@import url("https://fonts.googleapis.com/css2?family=Meddon&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel&family=Niconne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Candal&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");

body {
	background: #100e1a !important;
	overflow-x: hidden;
	transition: all 0.5s ease !important;
	opacity: 0;
	transition: opacity 0.5s ease;
}
html {
	scroll-behavior: smooth;
}

body.loaded {
	opacity: 1;
}

li {
	list-style: none;
}
a {
	text-decoration: none !important;
}
/* #preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	overflow: hidden;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	display: flex;
	align-items: center;
	justify-content: center;
} */
/* #preloader:before {
	content: "";
	position: absolute;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 6px solid rgba(59, 130, 246, 0.2);
	border-top-color: #3b82f6;
	animation: spin 1s linear infinite;
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
} */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
#header {
	transition: all 0.5s;
	z-index: 997;
}
#header.header-inner-pages,
#header.header-scrolled {
	background: rgba(17, 15, 39, 0.8);
}
#header .logo {
	font-size: 32px;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 2px;
	font-family: Meddon, cursive;
	font-size: 20px !important;
}
#header .logo:hover {
	text-decoration: underline !important;
}
#header .logo a {
	color: #fff;
}
#header .logo img {
	max-height: 40px;
}
.navi {
	max-width: 1200px !important;
	margin: auto;
	justify-content: space-between !important;
	padding-left: 30px;
	padding-right: 30px;
}
.lefty {
	width: 100% !important;
	max-width: 1350px !important;
	margin: auto !important;
	display: flex !important;
}
@media (max-width: 992px) {
	#header .logo {
		font-size: 28px;
	}
}
.navbur {
	background: #1d1836 !important;
	background: #100e1a !important;
	padding: 20px 0;
	transition: all 0.5s ease !important;
}
nav {
	display: flex !important;
	float: right;
}
.nav-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-menu > ul {
	display: flex;
}
.nav-menu > ul > li {
	position: relative;
	white-space: nowrap;
	padding: 10px 0 10px 24px;
}
.nav-menu a {
	display: block;
	position: relative;
	color: rgb(10, 218, 255);
	transition: 0.3s;
	font-size: 15px;
	font-weight: 800;
	padding: 0 3px;
	font-family: "Open Sans", sans-serif;
}
.nav-menu > ul > li > a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: -5px;
	left: 0;
	background-color: #fd0404;
	visibility: hidden;
	width: 0;
	transition: all 0.3s ease-in-out 0s;
}
.nav-menu .active > a:before,
.nav-menu a:hover:before,
.nav-menu li:hover > a:before {
	visibility: visible;
	width: 100%;
}
.nav-menu .active > a,
.nav-menu a:hover,
.nav-menu li:hover > a {
	color: #fff !important;
}
.nav-menu .drop-down ul {
	display: block;
	position: absolute;
	left: 22px;
	top: calc(100% + 30px);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	padding: 10px 0;
	background: #fff;
	box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
	transition: 0.3s;
}
.nav-menu .drop-down:hover > ul {
	opacity: 1;
	top: 100%;
	visibility: visible;
}
.nav-menu .drop-down li {
	min-width: 180px;
	position: relative;
}
.nav-menu .drop-down ul a {
	padding: 10px 20px;
	font-size: 14px;
	text-transform: none;
	color: #2c4964;
}
.nav-menu .drop-down ul .active > a,
.nav-menu .drop-down ul a:hover,
.nav-menu .drop-down ul li:hover > a {
	color: #1f1c3d;
}
.nav-menu .drop-down > a:after {
	content: "\ea99";
	font-family: IcoFont;
	padding-left: 5px;
}
.nav-menu .drop-down .drop-down ul {
	top: 0;
	left: calc(100% - 30px);
}
.nav-menu .drop-down .drop-down:hover > ul {
	opacity: 1;
	top: 0;
	left: 100%;
}
.nav-menu .drop-down .drop-down > a {
	padding-right: 35px;
}
.nav-menu .drop-down .drop-down > a:after {
	content: "\eaa0";
	font-family: IcoFont;
	position: absolute;
	right: 15px;
}
@media (max-width: 1366px) {
	.nav-menu .drop-down .drop-down ul {
		left: -90%;
	}
	.nav-menu .drop-down .drop-down:hover > ul {
		left: -100%;
	}
	.nav-menu .drop-down .drop-down > a:after {
		content: "\ea9d";
	}
}
.get-started-btn {
	margin-left: 25px;
	color: #fff;
	border-radius: 5px;
	padding: 6px 25px 8px 25px;
	white-space: nowrap;
	transition: 0.3s;
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
	border: 2px solid rgba(255, 255, 255, 0.5);
}
.get-started-btn:hover {
	border-color: #fff;
	color: #fff;
}
@media (max-width: 992px) {
	.get-started-btn {
		margin: 0 48px 0 0;
		padding: 6px 18px;
	}
}
.changed {
	background: 0 0;
	font-size: 20px;
	transition: all 0.4s;
	outline: 0 !important;
	line-height: 1;
	cursor: pointer;
	text-align: right;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 2px;
}
.mobile-nav-toggle {
	position: fixed;
	right: 15px;
	top: 15px;
	z-index: 9998;
	border: 0;
	background: 0 0;
	font-size: 24px;
	transition: all 0.4s;
	outline: 0 !important;
	line-height: 1;
	cursor: pointer;
	text-align: right;
	padding-right: 15px;
}
.mobile-nav-toggle i {
	color: #03b6ec;
	font-size: 37px;
	background-color: transparent;
	border: none !important;
	margin-right: 5px;
}
.mobile-nav {
	position: fixed;
	color: white !important;
	top: 55px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	z-index: 9999;
	overflow-y: auto;
	background:rgba(0, 0, 0, 0.329);
	transition: ease-in-out 0.2s;
	opacity: 0;
	visibility: hidden;
	border-radius: 10px;
	padding: 10px 0;
}
.mobile-nav * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobile-nav a {
	display: block;
	position: relative;
	color: #e8ebee;
	padding: 10px 20px;
	font-weight: 500;
	outline: 0;
}
.nav-menu .active > a,
.nav-menu li:hover > a {
	color: #f4f2f8 !important;
	text-decoration: none;
}
.mobile-nav .drop-down > a:after {
	content: "\ea99";
	font-family: IcoFont;
	padding-left: 10px;
	position: absolute;
	right: 15px;
}
.mobile-nav .active.drop-down > a:after {
	content: "\eaa1";
}
.mobile-nav .drop-down > a {
	padding-right: 35px;
}
.mobile-nav .drop-down ul {
	display: none;
	overflow: hidden;
}
.mobile-nav .drop-down li {
	padding-left: 20px;
}
.mobile-nav-overly {
	width: 100%;
	height: 100%;
	z-index: 9997;
	top: 0;
	left: 0;
	position: fixed;
	background: rgba(28, 47, 65, 0.6);
	overflow: hidden;
	display: none;
	transition: ease-in-out 0.2s;
}
.mobile-nav-active {
	overflow: hidden;
}
.mobile-nav-active .mobile-nav {
	opacity: 1;
	visibility: visible;
}
.mobile-nav-active .mobile-nav-toggle i {
	color: #ffffff;
}
.descript {
	margin-top: 160px !important;
	/* padding-top: 4rem !important; */
}
.initial-0 {
	color: #f0f8ff;
}
.initial-0 h1 {
	margin-bottom: 30px;
	color: #fff;
	font-size: 3rem !important;
}

.initial-0 #hey {
	margin-bottom: 20px !important;
}
.initial-0 h3 {
	margin-bottom: 10px;
}
.initial-0 p {
	font-size: 16px;
}
.initial-1 img {
	width: 100%;
}
.button {
	margin-top: 20px;
}

.initial-0 button {
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	background-color: #4CAF50;
	color: white;
	position: relative;
	overflow: hidden;
	transition: all 0.3s;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	border-color: rgba(251, 255, 12, 0.502);
	border-radius: 10px;
	height: 60px !important;
	width: 150px;
	background: rgb(0, 106, 124);
	font-size: 17px;
	color: #fff;
	padding: 0 !important;
	font-weight: 700;
}
	
.initial-0 button::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #381937, #ff07ea);
	transition: all 0.3s;
	z-index: -1;
}

.initial-0 button:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(8, 208, 243, 0.3);
}

.initial-0 button:hover::before {
	top: 0;
}

.initial-0 uil {
	margin-left: 5px;
	font-size: 14px;
}
.initial-0 button:hover {
	background: #3a278b;
	border: none !important;
}
button:nth-child(2) {
	margin-left: 20px;
}
.button a {
	text-decoration: none;
	color: #fff;
}
.social {
	margin-top: 20px;
	margin-bottom: 50px;
}
.social i {
	margin-right: 10px;
	font-size: 20px;
	color: #c7c5c5;
}
.its-me {
	margin-top: 100px;
}
.about .container {
	max-width: 1400px;
	margin: auto;
}
.about .row2 {
	margin-top: 30px;
	display: flex;
	max-width: 1200px;
	margin: auto;
	align-items: center;
	flex-wrap: wrap-reverse;
	justify-content: space-around;
	color: #dddada;
	font-family: Montserrat, sans-serif;
}
.initial-3 img {
	width: 100%;
	margin-top: 30px;
}
.initial .title h1 {
	font-size: 2.4rem;
	font-weight: 900;
	letter-spacing: 3px;
	margin-bottom: 40px;
	color: #7c7c7c;
	font-family: Candal, sans-serif;
}
.about .icons {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.about .icons div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
}
.icons i {
	font-size: 34px;
}
.skills {
	padding: 100px 0;
}
.bar {
	background: #fff;
	height: 10px;
	width: 100%;
	border-radius: 30px;
}
.row9 {
	display: flex;
	align-items: center;
	justify-content: center;
}
.initial-5 {
	color: #f3f3f3;
}
.bar-info {
	margin-bottom: 20px;
}
.skills .title h1 {
	font-family: Candal, sans-serif;
	color: #dddada;
	font-size: 2.4rem;
}
.bars {
	margin-top: 50px;
}
#one {
	height: 10px;
	background: #db7093;
	width: 60%;
	border-radius: 30px;
}
#two {
	height: 10px;
	width: 60%;
	background: #2a6eec;
	border-radius: 30px;
}
#three {
	height: 10px;
	width: 60%;
	background: #15ff00;
	border-radius: 30px;
}
#four {
	height: 10px;
	width: 60%;
	background: #ee3b3b;
	border-radius: 30px;
}
#five {
	height: 10px;
	width: 60%;
	background: #e9b50a;
	border-radius: 30px;
}
#six {
	height: 10px;
	width: 60%;
	background: #b610a8;
	border-radius: 30px;
}
#seven {
	height: 10px;
	width: 60%;
	background: #067719;
	border-radius: 30px;
}
.bar-info {
	display: flex;
	justify-content: space-between;
}
.work {
	max-width: 1250px !important;
	margin: auto;
}
.row3 {
	
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 30px;
}
.initial-6 {
	background: #1d1836 !important;
	width: 400px !important;
	border-color: #00ccff;
	box-shadow: 0 8px 16px 0 rgba(247, 1, 255, 0.377);
}
.initial-6 {
	margin: 15px;
	padding: 15px;
	border-radius: 10px;
	width: 100%;
	transition: ease 0.5s;
	cursor: pointer;
	text-align: center;
	transition: all ease-in-out 0.3s;
}
.row3 .initial-6:hover {
	box-shadow: rgb(26, 127, 145) 0 20px 30px -10px;
}
.initial-6 button {
	background: #bb04f3;
	height: 40px;
	width: 120px;
	border-radius: 5px;
	border: none;
	color: #fff;
	transition: all.5s ease;
	border-color: #070707;
}
.row3 .initial-6 img {
	border-radius: 5px !important;
	position: relative !important;
}
.row3 .initial::after {
	transition: all ease-in-out 0.5s;
}
.row3 .initial-6:hover::after {
	position: absolute !important;
	content: "";
	height: 195px;
	width: 400px;
	left: 0;
	top: 0;
	background: rgb(0, 0, 0, 0.3) !important;
	z-index: 10;
}
.title2 {
	color: #dddada !important;
	font-family: Candal, sans-serif;
	padding-left: 20px;
}
.col-5-info {
	padding: 15px 0;
	color: #dddada !important;
}
.intial-5 button {
	margin-top: 20px;
	width: 100px !important;
}
.col-5-info button a {
	color: #dddada !important;
	text-decoration: none;
	font-weight: 600;
}
.initial-6 button:hover {
	background: #472a77;
	color: #000 !important;
}
.initial-6 img {
	width: 100%;
	height: 60%;
}
footer {
	max-width: 1200px;
	margin: auto;
	margin-top: 80px;
	color: #dddada;
}
.title5 {
	margin-bottom: 30px;
	font-weight: 100 !important;
	font-family: Candal, sans-serif;
}
.row4 {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap-reverse;
	margin-top: 30px;
}
.initial-7 img {
	width: 100% !important;
}
.initial-0 img {
	width: 100%;
}
.col #helo {
	margin-bottom: 20px;
}
.contact-info {
	margin-bottom: 20px;
	font-weight: 100 !important;
	font-family: Poppins, sans-serif;
}
.col i {
	font-size: 20px;
}
.contact-info #io {
	font-family: Poppins, sans-serif;
	margin-left: 10px;
	font-size: 17px;
	font-weight: 600;
}
.c-ico {
	margin-bottom: 10px;
}
a {
	text-decoration: none;
}
.contact-info h4 i {
	margin-right: 10px;
	color: #fff;
	font-size: 16px;
}

.footing {
	margin-top: 50px !important;
	max-width: 1200px;
	margin: auto;
	text-align: center;
}
.social {
	display: flex;
	align-items: center;
}
.social i {
	background: #f3f2f2;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 200px;
	width: 30px;
	height: 30px;
	font-size: 14px;
	transition: all 0.5s;
}

/* styles.css */
.instagram-icon {
  text-decoration: none; /* Remove underline from the link */
  color: #405DE6; /* Set the color of the icon */
  font-size: 24px; /* Set the size of the icon */
  transition: color 0.3s; /* Add a smooth color transition on hover */
}

.instagram-icon:hover {
  color: #833ab4; /* Change the color of the icon on hover */
}

.contact-info p {
	font-size: 13px;
	font-weight: 100 !important;
	color: #dbdbdb;
}
.logo2 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Niconne;
	text-transform: lowercase;
}
.logo2 h2 {
	font-size: 17px !important;
}
.logo2 div {
	margin-left: -20px;
}
.logo2 img {
	width: 80px;
}
.footing p {
	font-size: 14px;
	font-family: Poppins, sans-serif;
}
.contact-info h4 {
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.contact-info h4 i {
	background: #dddada;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 200px;
	width: 30px;
	height: 30px;
	font-size: 15px;
	transition: 0.5s;
	margin-bottom: 20px;
}
.col-5-info i {
	padding: 10px 10px;
}
.django {
	margin-bottom: 50px !important;
}
#e {
	width: 25px;
	position: absolute;
	top: -3px;
	margin-left: 5px;
}
.navbur.scrolled {
	background: #1d1836 !important;
	transition: background-color 0.2s linear;
}
.navbar2.scrolled {
	background: #1d1836 !important;
	transition: background-color 0.2s linear;
}
#copy {
	text-transform: lowercase;
}
.wave {
	animation-name: wave-animation;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
	transform-origin: 70% 70%;
	display: inline-block;
}
@keyframes wave-animation {
	0% {
		transform: rotate(0);
	}
	10% {
		transform: rotate(14deg);
	}
	20% {
		transform: rotate(-8deg);
	}
	30% {
		transform: rotate(14deg);
	}
	40% {
		transform: rotate(-4deg);
	}
	50% {
		transform: rotate(10deg);
	}
	60% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(0);
	}
}
#big {
	font-size: 20px;
	font-family: Montserrat, sans-serif !important;
}
.icons i,
ion-icon {
	cursor: pointer;
	color:#000;
}
.fa-html5 {
	color: #ff4500;
}
.fa-css3 {
	color: #00aeff;
}
.logo-javascript {
	color: #e9b50a;
}
.logo-react {
	color: #00aeff;
}
.fa-facebook {
	color: #5656be;
}
.logo-python {
	color: #57a4d1;
}
.fa-database {
	color: #0cf;
}
.contact-info h4 i:hover,
.social i:hover {
	background: #cecccc !important;
	color: #000;
}
.up-arrow {
	position: relative;
}
.arrow {
	position: absolute;
	right: 0;
	bottom: 50px;
}
.arrow i {
	background: #6e31df;
	display: flex;
	justify-content: center;
	height: 40px;
	width: 40px;
	font-size: 35px;
	color: #fff;
	border-radius: 5px;
}
@media only screen and (max-width: 1300px) {
	.col-8 {
		flex-basis: 90%;
	}
}
@media only screen and (max-width: 1024px) {
	.title,
	.title5 {
		padding-left: 20px !important;
	}
	.container {
		max-width: 1000px !important;
		margin: auto !important;
	}
	.footing,
	.initial-6 {
		font-size: 12px;
	}
}
@media only screen and (max-width: 885px) {
	.row {
		text-align: center;
	}
	.initial-0 p {
		font-size: 13px;
	}
	.initial-4 {
		flex-basis: 80%;
		text-align: center;
		font-size: 12px;
		margin-top: 20px;
	}
	.button button {
		height: 35px;
	}
	.social {
		justify-content: center;
	}
	.title,
	.title2 {
		text-align: center !important;
	}
	.title h1 {
		font-size: 2rem;
	}
	.icons {
		justify-content: center;
	}
	.col-8 {
		flex-basis: 80%;
		font-size: 12px;
	}
	.footing,
	.initial-6 {
		font-size: 12px;
	}
	.col {
		font-size: 12px;
	}
	.logo {
		padding-left: 0;
	}
	.title5 {
		text-align: center;
	}
	.navbar {
		background: 0 0 !important;
	}
	.navbar2 .scrolled {
		background: 0 0 !important;
	}
	.logo {
		padding-left: 20px;
	}
	ul li {
		margin: 20px 10px;
	}
	.menu {
		display: inline-block;
	}
}
@media only screen and (max-width: 810px) {
	.arrow {
		right: 30px !important;
	}
}
@media only screen and (max-width: 768px) {
	.initial-1 img {
		margin-top: 50px !important;
		width: 80% !important;
	}
	.initial-2 img,
	.initial-7 {
		width: 80% !important;
	}
	.initial-8 {
		margin-top: 30px !important;
		text-align: center !important;
	}
	.main-button {
		margin-left: 20px !important;
		height: 45px !important;
	}
	.main-button2 {
		height: 45px !important;
	}
	.row {
		text-align: center;
	}
	.initial-0 p {
		font-size: 13px;
	}
	.initial-4 {
		flex-basis: 80%;
		text-align: center;
		font-size: 12px;
	}
	.initial-6 {
		margin-bottom: 20px !important;
	}
	.initial-0 button {
		height: 45px !important;
		font-size: 14px !important;
	}
	.obojo h4 {
		display: flex !important;
		justify-content: center;
		margin-left: 10px;
	}
	.c-ico {
		text-align: center !important;
	}
	.button button {
		height: 35px;
	}
	.social {
		justify-content: center;
	}
	.title,
	.title2 {
		text-align: center !important;
	}
	.title h1 {
		font-size: 2rem;
	}
	.icons {
		justify-content: center;
	}
	.col-8 {
		flex-basis: 80%;
		font-size: 12px;
	}
	.footing,
	.initial-6 {
		font-size: 12px;
	}
	.col {
		font-size: 12px;
	}
	.logo {
		padding-left: 0;
	}
	.title5 {
		text-align: center;
	}
	.logo {
		padding-left: 20px;
	}
	.menu {
		display: inline-block;
	}
}
@media only screen and (max-width: 450px) {
	#e {
		display: none !important;
	}
	.arrow {
		right: 110px !important;
		bottom: 130px;
	}
	.button button {
		height: 40px;
		width: 150px;
		font-size: 12px;
	}
	#btn2 {
		margin-top: 20px;
		margin-right: 20px;
	}
}
@media only screen and (max-width: 360px) {
	.arrow {
		right: 140px !important;
		bottom: 180px;
	}
	.main-button {
		margin-top: 100px !important;
	}
	.navi {
		padding-left: 0 !important;
	}
}
p {
	font-family: Montserrat, sans-serif !important;
}
.change-theme {
	color: #fff !important;
}
body.dark-theme {
	background-color: #f8feff !important;
	transition: all 0.5s ease !important;
}
body.dark-theme .initial-6 {
	background: #faffff !important;
	transition: all 0.5s ease !important;
}
body.dark-theme .navbur {
	background: #f8feff !important;
	transition: all 0.5s ease !important;
}
body.dark-theme a,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
body.dark-theme p {
	color: #000 !important;
}
body.dark-theme .change-theme {
	color: #070707 !important;
}
body.dark-theme .icofont-navigation-menu {
	color: #222 !important;
}
body.dark-theme .active {
	color: #6e31df !important;
}
body.dark-theme .nav-menu .active > a,
body.dark-theme .nav-menu a:hover,
body.dark-theme .nav-menu li:hover > a {
	color: #5846f9 !important;
	text-decoration: none !important;
}
body.dark-theme .navbur.scrolled {
	background: #dffaf9 !important;
	transition: background-color 0.2s linear;
}
body.dark-theme .contact-info #io {
	color: #2e2d2d !important;
}
body.dark-theme .contact-info #io {
	color: #2e2d2d !important;
}
/* .lap1 {
	padding-top: 300px !important;
} */
/* .pt-6 {
	padding-top: 3.5rem !important;
} */

/* styles.css */
.icon img {
    width: 10px; /* Set the width of the image */
    height: 50px; /* Set the height of the image */
    /* Add any other styles you want to apply to the image */
  }

  #moon{
    width: 50px;
    height: 50px;
  }
  

  .fa-twitter:ho{
    color: #3483fac7;
}



.social .a .fa-instagram{
    color: rgb(241, 98, 55);
}

.fa-linkedin:hover{
    color: rgb(233, 240, 247);
    background-color: aliceblue;
    border-color: rgb(226, 40, 40);
    border: #00d7c0;
	background-color: #2a6eec;
    
}


.fab {
	font-size: 35px;
	margin: 0 5px;
	padding: 10px;
	border: 1px solid #ffbb00;
	border-radius: 35px;
	transition: all 0.3s ease;
	box-shadow: 0 0 10px  #03afff;
  }
  
  /* Define hover effect for icons */
  .fab:hover {
	background-color: transparent;
	box-shadow: 0 8px 16px 0 rgba(1, 247, 255, 0.836);
	
  }
  
  
  ul.list-inline {
	padding-top: 5rem;
	list-style: none;
  }

  .fa-github{
	color: whitesmoke;
  }
	
  .fa-instagram{
	color: rgb(252, 4, 4);
  }

  .fa-twitter{
	color: #00aeff;
  }



.fa-linkedin {
	color: white;
	
}
.fa-facebook-f {
	background: #2b5dbb !important;
}

@font-face {
	font-family: 'good';
	src: url('/static/fonts/good.ttf') format('truetype');
  }

  @font-face {
	font-family: 'lol';
	src: url('/static/fonts/lol.ttf') format('truetype');
  }
  
  @font-face {
	font-family: 'bool';
	src: url('/static/fonts/bool.otf') format('opentype');

  }

  @font-face {
	font-family: 'logo';
	src: url('/static/fonts/logo.otf') format('opentype');

  }

  @font-face {
	font-family: 'cold';
	src: url('/static/fonts/cold.otf') format('opentype');
  }
  
	.sol{
		font-family: cold;
	}

  .footing p{
	font-family: 'cold';
  }
  #mood{
    font-family: 'cold', sans-serif;
	color: #00aeff;
	font-size: 40px;
	
	
  }

  

  #name{
	font-family: 'cold', sans-serif;
	color: #00aeff;
	font-size: 150px;
	text-shadow: 2px 2px 4px #1a1919
  }

  #mainlogo{
	font-family: 'logo' !important;
	border-radius: 5px;
	font-size: 40px;
	color: #ffae00 !important;
	
  }



  #mainlogo:hover{
	color: #00aeff !important;
  }


  .icon-container {
	
	transition: transform 0.3s;
	box-shadow: 5 4px 50px rgba(223, 6, 243, 0.692);
	
  }


  .ion-icon{
	border:rgb(217, 20, 235);
  }
  
  .icon-container i,
  .icon-container ion-icon {
	position: relative;
	display: block;
	transition: all 0.3s;
	
  }
  
  
  
  .icon-container:hover i,
  .icon-container:hover ion-icon {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(223, 6, 243, 0.692);
  }
  
  


  #home-link,
#about-link,
#skills-link,
#work-link,
#contact-link {
    transition: transform 0.3s ease;
	
}

#home-link:hover,
#about-link:hover,
#skills-link:hover,
#work-link:hover,
#contact-link:hover {
    transform: scale(1.1);
	color: rgb(240, 9, 228);
}
.animated-image {
    animation: animate__animated animate__zoomIn;
    animation-duration: 1s;
}

@keyframes zoomInAnimation {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

#logo{
	font-size: 30px;
	color: #00d7c0;
	font-weight: bolder;
	padding-right: 35;
	font-family: 'Courier New', Courier, monospace;
}

.input-group-text {
	background-color:rgb(24, 23, 23); /* Change the color as needed */
	color:  #000000; 
	/* Change the color of the icon as needed */
	height: auto;
	border-color: #000000;
	border-right: none;
	font-size: 29px;
	font-family: "Font Awesome 5 Free";
	content: "\f0e0";
}



.btn{
	background-color: transparent;
	border-color:  #00d7c0;
	width: 200px;
	border-radius: 10px;
}

.form-control{
	background-color: transparent !important;
	border-color:  rgb(0, 215, 193);
	outline: none;
	height: auto;
	min-height: 29px;
	  
}

.transparent-card{
	 /* Set a maximum height for the card */
	
	background-color: transparent !important;
	border-color: #000000;
	outline: none;
	background-color:  rgb(219, 223, 220);
}
.btn{
	background-color: transparent;
	border-color:  #00d7c0;
	width: 200px;
	
}

#glow{
	min-height: 43px;
	max-height: fit-content;
}
#makec{
	align-items: center;
	position: relative;
	justify-content: center;
}
.custom-shadow {
	box-shadow: 0 0 10px  #00d7c0;
}

/* Adjust the appearance of the logo */
/*
#just a {
	
	display: inline-block;
	border: #00aeff;
	width: 40;
	 
	overflow: hidden; 
	transition: transform 0.3s ease; 
	
  }
*/

.large-image {
    width: 70px; /* Set the desired width */
    height: 90px; /* Allow the height to adjust proportionally */
	border-color: #15ff00;
}
  
  
  /* Add hover effect for the logo */
 #just a:hover {
	transform: rotate(360deg); /* Rotate the logo on hover */
	color: #00aeff;
  }

 

  .progress {
	width: 0;
	height: 100%; 
	background-color: #4caf50; 
	animation: progressAnimation 2s ease-in-out forwards; 
  }

  .and {
	width: 0;
	height: 100%; 
	background-color: #e008d6; 
	animation: progressAnimations 2s ease-in-out forwards; 
  }

  .hulet {
	width: 0;
	height: 100%; 
	background-color: #e0d208; 
	animation: progressAnimationss 2s ease-in-out forwards; 
  }

  .sost {
	width: 0;
	height: 100%; 
	background-color: #0891e0; 
	animation: progressAnimationsss 2s ease-in-out forwards; 
  }

  .arat {
	width: 0;
	height: 100%; 
	background-color: #e0082c; 
	animation: progressAnimationssss 2s ease-in-out forwards; 
  }

  .amst {
	width: 0;
	height: 100%; 
	background-color: #08e049; 
	animation: progressAnimationsssss 2s ease-in-out forwards;

  }


  .sdst {
	width: 0;
	height: 100%; 
	background-color: #e09c08; 
	animation: progressAnimationssssss 2s ease-in-out forwards;

  }




  
  @keyframes progressAnimation {
	from {
	  width: 0; /* frontend*/
	}
	to {
	  width: 50%; /* End with 50% width */
	}
  }

  @keyframes progressAnimations {
	from {
	  width: 0; /* backend */
	}
	to {
	  width: 80%; /* End with 50% width */
	}
  }

  @keyframes progressAnimationss {
	from {
	  width: 0; /* java script */
	}
	to {
	  width: 50%; /* End with 50% width */
	}
  }

  @keyframes progressAnimationsss {
	from {
	  width: 0; /* python*/
	}
	to {
	  width: 85%; /* End with 50% width */
	}
  }

  @keyframes progressAnimationssss {
	from {
	  width: 0; /* Start with 0% width */
	}
	to {
	  width: 90%; /* End with 50% width */
	}
  }

  @keyframes progressAnimationsssss {
	from {
	  width: 0; /* S*/
	}
	to {
	  width: 80%; /*java */
	}
  }

  @keyframes progressAnimationssssss {
	from {
	  width: 0; /* django*/
	}
	to {
	  width: 90%; /* */
	}
  }


  .alert-transparent{
	background-color: transparent;
  }
  
  
  
  
  @keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
	}
	}

	.bounce {
	
	animation: bounce 2s 1;
	
	
	}
  

	
	  
	/* #theme-button i {
		font-size: 25px;
		
		border-color: #00ccff;
		align-items: center;
		color: hsl(36, 100%, 50%);
	  }

	  #theme-button {
		cursor: pointer;
		border-color: #00ccff;
		padding: 10px;
		border-radius: 50%;
		transition: background-color 0.3s;
	  } */


/* For small screens, show the button */

  



















  


  





  



#header {
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-scrolled {
    background: rgba(15, 23, 42, 0.6);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

































  

  





























.contact-popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-popup.active {
	opacity: 1;
	visibility: visible;
}

.contact-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(8px);
}

.contact-popup-content {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	width: 90%;
	max-width: 500px;
	background: linear-gradient(135deg, #1a1f2c 0%, #2d3748 100%);
	border-radius: 20px;
	padding: 2.5rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.contact-popup.active .contact-popup-content {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	visibility: visible;
}

.contact-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 2;
}

.contact-close:hover {
	background: rgba(59, 130, 246, 0.2);
	transform: rotate(90deg);
}

.contact-popup h1 {
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	margin: 2rem 0;
	text-align: center;
	position: relative;
	padding-bottom: 1rem;
}

.contact-popup h1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, #3b82f6, #60a5fa);
	border-radius: 3px;
}

.contact-form-group {
	margin-bottom: 1.5rem;
}

.contact-input-group {
	position: relative;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	transition: all 0.3s ease;
	overflow: hidden;
}

.contact-input-group:focus-within {
	background: rgba(255, 255, 255, 0.08);
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.contact-form-control {
	width: 100%;
	padding: 1.2rem 1.5rem;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 1rem;
	border-radius: 12px;
}

.contact-form-control:focus {
	outline: none;
	box-shadow: none;
}

.contact-form-control::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

textarea.contact-form-control {
	min-height: 120px;
	resize: vertical;
	padding-top: 1rem;
}

.contact-submit-btn {
	width: 100%;
	padding: 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
	border: none;
	border-radius: 12px;
	color: white;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.contact-submit-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: 0.5s;
}

.contact-submit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.4);
}

.contact-submit-btn:hover::before {
	left: 100%;
}

#contactSubmitIcon {
	margin-left: 0.5rem;
	transition: transform 0.3s ease;
}

.contact-submit-btn:hover #contactSubmitIcon {
	transform: translateX(4px);
}

/* Contact Success Message Styles */
.contact-success-message {
	margin-bottom: 1.5rem;
	animation: contactSlideDown 0.5s ease-out;
}

.contact-success-message .alert {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	color: #10b981;
	padding: 1rem;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	backdrop-filter: blur(8px);
}

.contact-success-message .alert i {
	font-size: 1.2rem;
}

@keyframes contactSlideDown {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes contactFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
	.contact-popup-content {
		width: 95%;
		padding: 2rem;
	}

	.contact-popup h1 {
		font-size: 1.5rem;
		margin: 1.5rem 0;
	}

	.contact-form-control {
		padding: 1rem 1.2rem;
	}
}

@media (max-width: 480px) {
	.contact-popup-content {
		width: 100%;
		height: 100%;
		border-radius: 0;
		padding: 1.5rem;
	}

	.contact-popup h1 {
		font-size: 1.3rem;
		margin: 1.2rem 0;
	}

	.contact-form-control {
		padding: 0.8rem 1rem;
	}

	.contact-close {
		top: 0.8rem;
		right: 0.8rem;
	}
}

/* Hero Section Styles */
.hero-section {
	min-height: 100vh;
	padding: 6rem 0;
	position: relative;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity: 0.5;
}

.hero-content {
	position: relative;
	z-index: 1;
	padding: 0 1rem;
}

.greeting {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.wave {
	font-size: 2rem;
	animation: wave 2.5s infinite;
}

@keyframes wave {
	0% { transform: rotate(0deg); }
	10% { transform: rotate(14deg); }
	20% { transform: rotate(-8deg); }
	30% { transform: rotate(14deg); }
	40% { transform: rotate(-4deg); }
	50% { transform: rotate(10deg); }
	60% { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}

.hey-text {
	font-size: 1.2rem;
	color: #3b82f6;
	font-weight: 600;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.name-text {
	font-size: 3.5rem;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 1rem;
	line-height: 1.2;
}

.highlight {
	background: linear-gradient(120deg, #3b82f6 0%, #60a5fa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-right: 0.5rem;
}

.role-text {
	font-size: 1.8rem;
	color: #94a3b8;
	margin-bottom: 1.5rem;
	font-weight: 500;
}

.bio-text {
	font-size: 1.1rem;
	color: #e2e8f0;
	line-height: 1.8;
	margin-bottom: 2rem;
	max-width: 600px;
}

.social-links {
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.social-icon {
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(59, 130, 246, 0.1);
	border: 1px solid rgba(59, 130, 246, 0.2);
	border-radius: 12px;
	color: #3b82f6;
	font-size: 1.2rem;
	transition: all 0.3s ease;
}

.social-icon:hover {
	background: #3b82f6;
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.3);
}

.cta-buttons {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.cta-button {
	padding: 1rem 2rem;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

.cta-button.primary {
	background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
	color: white;
}

.cta-button.secondary {
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
	border: 1px solid rgba(59, 130, 246, 0.2);
}

.cta-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.3);
}

.image-container {
	position: relative;
	padding: 2rem;
	perspective: 1000px;
}

.image-wrapper {
	position: relative;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	transform-style: preserve-3d;
	animation: float 6s ease-in-out infinite;
}

.image-wrapper::before {
	content: '';
	position: absolute;
	inset: -15px;
	background: linear-gradient(45deg, #3b82f6, #60a5fa);
	border-radius: 50px;
	z-index: -1;
	opacity: 0;
	filter: blur(20px);
	animation: subtleGlow 8s ease-in-out infinite;
}

.profile-image {
	width: 100%;
	height: auto;
	border-radius: 30px;
	filter: drop-shadow(0 15px 30px rgba(59, 130, 246, 0.2));
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	z-index: 1;
}

@keyframes subtleGlow {
	0%, 100% {
		opacity: 0;
		transform: scale(0.95);
	}
	50% {
		opacity: 0.2;
		transform: scale(1.02);
	}
}

.profile-image::before {
	content: '';
	position: absolute;
	inset: -8px;
	background: linear-gradient(45deg, #3b82f6, #60a5fa);
	border-radius: 38px;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.5s ease;
	filter: blur(15px);
}

@keyframes subtleGlow {
	0%, 100% {
		opacity: 0;
		transform: scale(0.95);
	}
	50% {
		opacity: 0.2;
		transform: scale(1.02);
	}
}

.image-wrapper:hover .profile-image::before {
	opacity: 0.2;
	animation: gentlePulse 3s ease-in-out infinite;
}

@keyframes gentlePulse {
	0%, 100% {
		opacity: 0.2;
		filter: blur(15px);
	}
	50% {
		opacity: 0.3;
		filter: blur(20px);
	}
}

.floating-badge {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	background: rgba(59, 130, 246, 0.95);
	backdrop-filter: blur(10px);
	padding: 0.75rem 1.5rem;
	border-radius: 50px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	box-shadow: 0 8px 16px -4px rgba(59, 130, 246, 0.2);
	animation: badgeFloat 4s ease-in-out infinite;
	border: 1px solid rgba(255, 255, 255, 0.1);
	z-index: 2;
	transform: translateZ(20px);
}

.floating-badge::before {
	content: '';
	position: absolute;
	inset: -3px;
	background: linear-gradient(45deg, #3b82f6, #60a5fa);
	border-radius: 53px;
	z-index: -1;
	opacity: 0;
	filter: blur(8px);
	animation: badgeGlow 4s ease-in-out infinite;
}

@keyframes badgeGlow {
	0%, 100% {
		opacity: 0;
		transform: scale(0.98);
	}
	50% {
		opacity: 0.15;
		transform: scale(1.02);
	}
}

.background-shapes .shape {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
	opacity: 0.08;
	animation: shapeFloat 8s ease-in-out infinite;
}

.shape::before {
	content: '';
	position: absolute;
	inset: -8px;
	background: inherit;
	border-radius: inherit;
	filter: blur(12px);
	opacity: 0;
	animation: shapeGlow 8s ease-in-out infinite;
}

@keyframes shapeGlow {
	0%, 100% {
		opacity: 0;
		transform: scale(0.95);
	}
	50% {
		opacity: 0.1;
		transform: scale(1.02);
	}
}

.shape-1 {
	width: 300px;
	height: 300px;
	top: -150px;
	right: -150px;
	animation-delay: 0s;
}

.shape-2 {
	width: 200px;
	height: 200px;
	bottom: -100px;
	left: -100px;
	animation-delay: -2s;
}

.shape-3 {
	width: 150px;
	height: 150px;
	top: 50%;
	right: 10%;
	animation-delay: -4s;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0) rotateX(0) rotateY(0);
	}
	25% {
		transform: translateY(-20px) rotateX(5deg) rotateY(-5deg);
	}
	75% {
		transform: translateY(20px) rotateX(-5deg) rotateY(5deg);
	}
}

@keyframes glowPulse {
	0%, 100% {
		opacity: 0.5;
		filter: blur(20px);
	}
	50% {
		opacity: 0.7;
		filter: blur(30px);
	}
}

@keyframes badgeFloat {
	0%, 100% {
		transform: translateY(0) translateX(0) translateZ(20px);
	}
	50% {
		transform: translateY(-10px) translateX(5px) translateZ(30px);
	}
}

@keyframes shapeFloat {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	25% {
		transform: translate(20px, -20px) scale(1.1);
	}
	50% {
		transform: translate(-20px, 20px) scale(0.9);
	}
	75% {
		transform: translate(-20px, -20px) scale(1.1);
	}
}

.image-wrapper:hover .profile-image {
	transform: scale(1.05);
	filter: drop-shadow(0 30px 60px rgba(59, 130, 246, 0.4));
}

.image-wrapper:hover .floating-badge {
	animation: badgeFloat 2s ease-in-out infinite;
	box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.4);
}

@media (max-width: 768px) {
	.image-wrapper {
		max-width: 350px;
	}
	
	.floating-badge {
		padding: 0.6rem 1.2rem;
		bottom: 1.5rem;
		right: 1.5rem;
	}
	
	.shape-1 {
		width: 200px;
		height: 200px;
		top: -100px;
		right: -100px;
	}
	
	.shape-2 {
		width: 150px;
		height: 150px;
		bottom: -75px;
		left: -75px;
	}
	
	.shape-3 {
		width: 100px;
		height: 100px;
	}
}

@media (max-width: 480px) {
	.image-wrapper {
		max-width: 280px;
	}
	
	.floating-badge {
		padding: 0.5rem 1rem;
		bottom: 1rem;
		right: 1rem;
	}
	
	.shape-1 {
		width: 150px;
		height: 150px;
		top: -75px;
		right: -75px;
	}
	
	.shape-2 {
		width: 100px;
		height: 100px;
		bottom: -50px;
		left: -50px;
	}
	
	.shape-3 {
		width: 75px;
		height: 75px;
	}
}

.floating-badge i {
	color: white;
	font-size: 1.2rem;
}

.floating-badge span {
	color: white;
	font-weight: 500;
	font-size: 0.9rem;
}

.background-shapes .shape {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
	opacity: 0.1;
}

.shape-1 {
	width: 300px;
	height: 300px;
	top: -150px;
	right: -150px;
}

.shape-2 {
	width: 200px;
	height: 200px;
	bottom: -100px;
	left: -100px;
}

.shape-3 {
	width: 150px;
	height: 150px;
	top: 50%;
	right: 10%;
}

@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0px); }
}

@keyframes badgeFloat {
	0% { transform: translateY(0px) translateX(0px); }
	50% { transform: translateY(-10px) translateX(5px); }
	100% { transform: translateY(0px) translateX(0px); }
}

/* Mobile Responsive Styles */
@media (max-width: 991px) {
	.hero-section {
		padding: 4rem 0;
		min-height: auto;
	}

	.hero-content {
		padding: 0 1.5rem;
	}

	.name-text {
		font-size: 2.8rem;
	}

	.role-text {
		font-size: 1.5rem;
	}

	.bio-text {
		font-size: 1rem;
		margin-bottom: 1.5rem;
	}

	.image-container {
		margin-top: 3rem;
		padding: 1rem;
	}

	.image-wrapper {
		max-width: 350px;
	}

	.floating-badge {
		bottom: 1.5rem;
		right: 1.5rem;
		padding: 0.6rem 1.2rem;
	}
}

@media (max-width: 768px) {
	.hero-section {
		padding: 3rem 0;
	}

	.hero-content {
		padding: 0 1rem;
	}

	.name-text {
		font-size: 2.2rem;
	}

	.role-text {
		font-size: 1.3rem;
	}

	.bio-text {
		font-size: 0.95rem;
		line-height: 1.6;
	}

	.cta-buttons {
		flex-direction: column;
		width: 100%;
	}

	.cta-button {
		width: 100%;
		justify-content: center;
		padding: 0.9rem 1.5rem;
	}

	.social-links {
		justify-content: center;
	}

	.image-wrapper {
		max-width: 300px;
	}

	.floating-badge {
		bottom: 1rem;
		right: 1rem;
		padding: 0.5rem 1rem;
	}

	.floating-badge i {
		font-size: 1rem;
	}

	.floating-badge span {
		font-size: 0.8rem;
	}
}

@media (max-width: 480px) {
	.hero-section {
		padding: 2rem 0;
	}

	.greeting {
		margin-bottom: 1rem;
	}

	.wave {
		font-size: 1.8rem;
	}

	.hey-text {
		font-size: 1rem;
	}

	.name-text {
		font-size: 1.8rem;
	}

	.role-text {
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}

	.bio-text {
		font-size: 0.9rem;
		margin-bottom: 1.5rem;
	}

	.social-icon {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}

	.image-wrapper {
		max-width: 250px;
	}

	.profile-image {
		border-radius: 20px;
	}

	.floating-badge {
		bottom: 0.8rem;
		right: 0.8rem;
		padding: 0.4rem 0.8rem;
	}

	.floating-badge i {
		font-size: 0.9rem;
	}

	.floating-badge span {
		font-size: 0.75rem;
	}

	.shape-1 {
		width: 200px;
		height: 200px;
		top: -100px;
		right: -100px;
	}

	.shape-2 {
		width: 150px;
		height: 150px;
		bottom: -75px;
		left: -75px;
	}

	.shape-3 {
		width: 100px;
		height: 100px;
	}
}

/* Additional Modern Effects */
.hero-section::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
	pointer-events: none;
}

.hero-text {
	position: relative;
}

.hero-text::before {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
	top: -100px;
	left: -100px;
	border-radius: 50%;
	z-index: -1;
}

.hero-image {
	position: relative;
}

.hero-image::before {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
	bottom: -150px;
	right: -150px;
	border-radius: 50%;
	z-index: -1;
}

/* Enhanced Button Styles */
.cta-button {
	position: relative;
	overflow: hidden;
}

.cta-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.2),
		transparent
	);
	transition: 0.5s;
}

.cta-button:hover::before {
	left: 100%;
}

/* Enhanced Social Icons */
.social-icon {
	position: relative;
	overflow: hidden;
}

.social-icon::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	transform: translateX(-100%);
	transition: 0.5s;
}

.social-icon:hover::before {
	transform: translateX(100%);
}

/* Enhanced Image Effects */
.profile-image {
	position: relative;
}

.profile-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		45deg,
		rgba(59, 130, 246, 0.2),
		transparent
	);
	border-radius: 30px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.profile-image:hover::after {
	opacity: 1;
}

/* Enhanced Floating Badge */
.floating-badge {
	position: relative;
	overflow: hidden;
}

.floating-badge::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(255, 255, 255, 0.1),
		transparent
	);
	transform: translateX(-100%);
	transition: 0.5s;
}

.floating-badge:hover::before {
	transform: translateX(100%);
}


.row3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
padding: 1rem;
justify-items: center;
}

.card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border-radius: 16px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(59, 130, 246, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
width: 280px;
min-height: 420px;
display: flex;
flex-direction: column;
position: relative;
}

.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
opacity: 0;
transition: opacity 0.3s ease;
}

.card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
border-color: rgba(59, 130, 246, 0.3);
}

.card:hover::before {
opacity: 1;
}

.card img {
width: 100%;
height: 180px;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(0.9);
}

.card:hover img {
transform: scale(1.05);
filter: brightness(1);
}

.card-body {
padding: 1.5rem;
background: transparent;
flex-grow: 1;
display: flex;
flex-direction: column;
position: relative;
}

.card-body h3 {
font-size: 1.25rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 0.75rem;
position: relative;
display: inline-block;
}

.card-body h3::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 30px;
height: 2px;
background: #3b82f6;
transition: width 0.3s ease;
}

.card:hover .card-body h3::after {
width: 100%;
}

.card-body p {
color: #94a3b8;
margin-bottom: 1.5rem;
line-height: 1.6;
font-size: 0.95rem;
flex-grow: 1;
}

.card button {
background: linear-gradient(135deg, #3b82f6, #60a5fa);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
cursor: pointer;
width: 100%;
margin-top: auto;
position: relative;
overflow: hidden;
}

.card button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
	90deg,
	transparent,
	rgba(255, 255, 255, 0.2),
	transparent
);
transition: 0.5s;
}

.card button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.card button:hover::before {
left: 100%;
}

.card button a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
z-index: 1;
}

.card button a::after {
content: '→';
transition: transform 0.3s ease;
}

.card button:hover a::after {
transform: translateX(4px);
}

/* Responsive styles for small screens */
@media (max-width: 768px) {
.row3 {
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding: 0.5rem;
}

.card {
	width: 100%;
	max-width: none;
	height: 380px;
}

.card img {
	height: 150px;
}

.card-body {
	padding: 1rem;
}

.card-body h3 {
	font-size: 1.1rem;
}

.card-body p {
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.card button {
	padding: 0.6rem 1rem;
	font-size: 0.9rem;
}
}

/* Extra small screens */
@media (max-width: 480px) {
.row3 {
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.card {
	height: 360px;
}

.card img {
	height: 130px;
}

.card-body {
	padding: 0.75rem;
}

.card-body h3 {
	font-size: 1rem;
}

.card button {
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
}
}

/* Modern Skills Section */
.skills {
padding: 6rem 0;
position: relative;
overflow: hidden;
}

.skills::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, transparent 50%);
animation: rotate 20s linear infinite;
top: -50%;
left: -50%;
}

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.skills .title {
text-align: center;
margin-bottom: 4rem;
position: relative;
}

.skills .title h1 {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
display: inline-block;
}

.skills .title h1::before {
content: 'SKILLS';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: blur(8px);
opacity: 0.5;
z-index: -1;
}

.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

.skill-category {
background: rgba(30, 41, 59, 0.6);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(59, 130, 246, 0.1);
}

.skill-category::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
opacity: 0;
transition: opacity 0.3s ease;
}

.skill-category:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.skill-category:hover::before {
opacity: 1;
}

.skill-category h3 {
color: #e2e8f0;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1rem;
}

.skill-category h3 i {
color: #3b82f6;
font-size: 1.8rem;
}

.skill-items {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.skill-item {
background: rgba(15, 23, 42, 0.4);
border-radius: 12px;
padding: 1rem;
transition: transform 0.3s ease;
}

.skill-item:hover {
transform: translateX(5px);
}

.skill-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.8rem;
}

.skill-name {
color: #e2e8f0;
font-size: 1.1rem;
font-weight: 500;
}

.skill-level {
display: flex;
gap: 0.3rem;
}

.skill-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.2);
transition: all 0.3s ease;
}

.skill-dot.active {
background: #3b82f6;
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.skill-bar {
height: 6px;
background: rgba(30, 41, 59, 0.8);
border-radius: 3px;
overflow: hidden;
position: relative;
}

.skill-progress {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
border-radius: 3px;
position: relative;
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
width: 0;
}

.skill-progress::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
	90deg,
	transparent,
	rgba(255, 255, 255, 0.3),
	transparent
);
animation: shimmer 2s infinite;
}

@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

/* Responsive Styles */
@media (max-width: 768px) {
.skills {
	padding: 3rem 1rem;
}

.skills .title h1 {
	font-size: 2.2rem;
	margin-bottom: 2rem;
}

.skills-grid {
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding: 0.5rem;
}

.skill-category {
	padding: 1.5rem;
	margin: 0 -0.5rem;
	width: calc(100% + 1rem);
	border-radius: 15px;
	background: rgba(30, 41, 59, 0.8);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.skill-category h3 {
	font-size: 1.3rem;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.skill-category h3 i {
	font-size: 1.5rem;
	color: #3b82f6;
}

.skill-items {
	gap: 1.2rem;
}

.skill-item {
	background: rgba(15, 23, 42, 0.4);
	border-radius: 12px;
	padding: 1rem;
	transition: all 0.3s ease;
}

.skill-item:hover {
	transform: translateX(5px);
	background: rgba(15, 23, 42, 0.6);
}

.skill-info {
	margin-bottom: 0.8rem;
}

.skill-name {
	font-size: 1rem;
	font-weight: 500;
	color: #e2e8f0;
}

.skill-level {
	display: flex;
	gap: 0.3rem;
}

.skill-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.2);
	transition: all 0.3s ease;
}

.skill-dot.active {
	background: #3b82f6;
	box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.skill-bar {
	height: 6px;
	background: rgba(30, 41, 59, 0.8);
	border-radius: 3px;
	overflow: hidden;
}

.skill-progress {
	height: 100%;
	background: linear-gradient(90deg, #3b82f6, #60a5fa);
	border-radius: 3px;
	position: relative;
	transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
}

@media (max-width: 480px) {
.skills {
	padding: 2rem 0.5rem;
}

.skills .title h1 {
	font-size: 1.8rem;
	margin-bottom: 1.5rem;
}

.skill-category {
	padding: 1.2rem;
	margin: 0 -0.5rem;
	width: calc(100% + 1rem);
}

.skill-category h3 {
	font-size: 1.2rem;
	margin-bottom: 1.2rem;
}

.skill-items {
	gap: 1rem;
}

.skill-item {
	padding: 0.8rem;
}

.skill-name {
	font-size: 0.95rem;
}

.skill-bar {
	height: 5px;
}
}

.work {
padding: 6rem 0;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.work::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}

.title2 {
text-align: center;
margin-bottom: 4rem;
position: relative;
}

.title2 h1 {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
display: inline-block;
}

.title2 h1::before {
content: 'MY WORK';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: blur(8px);
opacity: 0.5;
z-index: -1;
}

.row3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}

.card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(59, 130, 246, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
position: relative;
}

.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
opacity: 0;
transition: opacity 0.3s ease;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: rgba(59, 130, 246, 0.3);
}

.card:hover::before {
opacity: 1;
}

.card img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(0.9);
}

.card:hover img {
transform: scale(1.05);
filter: brightness(1);
}

.card-body {
padding: 1.5rem;
background: transparent;
position: relative;
}

.card-body h3 {
font-size: 1.4rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}

.card-body h3::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 30px;
height: 2px;
background: #3b82f6;
transition: width 0.3s ease;
}

.card:hover .card-body h3::after {
width: 100%;
}

.card-body p {
color: #94a3b8;
margin-bottom: 1.5rem;
line-height: 1.6;
font-size: 0.95rem;
}

.card button {
background: linear-gradient(135deg, #3b82f6, #60a5fa);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
cursor: pointer;
width: 100%;
position: relative;
overflow: hidden;
}

.card button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
	90deg,
	transparent,
	rgba(255, 255, 255, 0.2),
	transparent
);
transition: 0.5s;
}

.card button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.card button:hover::before {
left: 100%;
}

.card button a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
z-index: 1;
}

.card button a::after {
content: '→';
transition: transform 0.3s ease;
}

.card button:hover a::after {
transform: translateX(4px);
}

@media (max-width: 768px) {
.work {
 padding: 4rem 0;
}

.title2 h1 {
 font-size: 2.5rem;
}

.row3 {
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	padding: 0.5rem;
	max-width: 100%;
}

.card {
 width: 100%;
}

.card img {
 height: 180px;
}

.card-body {
 padding: 1.2rem;
}

.card-body h3 {
 font-size: 1.2rem;
}
}

@media (max-width: 480px) {
.work {
 padding: 3rem 0;
}

.title2 h1 {
 font-size: 2rem;
}

.row3 {
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding: 0 1rem;
}

.card {
 width: 100%;
 max-width: 100%;
}

.card img {
 height: 200px;
}

.card-body {
 padding: 1.2rem;
}

.card-body h3 {
 font-size: 1.2rem;
}

.card-body p {
 font-size: 0.9rem;
}
}

/* Profile Image Animation and Mobile Styles */
.initial-1 img {
width: 100%;
max-width: 500px;
transition: transform 0.5s ease;
animation: float 6s ease-in-out infinite;
}

@keyframes float {
0% {
	transform: translateY(0px);
}
50% {
	transform: translateY(-20px);
}
100% {
	transform: translateY(0px);
}
}

@media (min-width: 1200px) {
.initial-1 img {
 max-width: 550px;
}
}

@media (max-width: 768px) {
.initial-1 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 2rem;
}

.initial-1 img {
 max-width: 350px;
 margin: 0 auto;
 display: block;
 animation: float 6s ease-in-out infinite, glow 3s ease-in-out infinite;
}
}

@keyframes glow {
0% {
	box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}
50% {
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
}
100% {
	box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}
}

/* Modern About Section Styles */
.about {
padding: 6rem 0;
position: relative;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
overflow: hidden;
}

.about::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}

.about-image-container {
position: relative;
padding: 1rem;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.image-frame {
position: relative;
width: 100%;
max-width: 400px;
height: auto;
margin: 0 auto;
border-radius: 30px;
overflow: hidden;
background: linear-gradient(145deg, #1e293b, #0f172a);
box-shadow: 
	20px 20px 60px rgba(0, 0, 0, 0.3),
	-20px -20px 60px rgba(59, 130, 246, 0.1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(0.95) contrast(1.05);
object-fit: contain;
}

.image-frame::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
	45deg,
	rgba(59, 130, 246, 0.2),
	rgba(96, 165, 250, 0.1)
);
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}

.image-frame:hover {
transform: translateY(-10px);
box-shadow: 
	25px 25px 75px rgba(0, 0, 0, 0.4),
	-25px -25px 75px rgba(59, 130, 246, 0.15);
}

.image-frame:hover::before {
opacity: 1;
}

.image-frame:hover .profile-image {
transform: scale(1.05);
filter: brightness(1) contrast(1.1);
}

.floating-badge {
position: absolute;
bottom: 2rem;
right: 2rem;
background: rgba(59, 130, 246, 0.95);
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem;
border-radius: 50px;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: 
	0 10px 20px -5px rgba(59, 130, 246, 0.3),
	0 0 15px rgba(59, 130, 246, 0.2);
transform: translateY(0);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 2;
transform: translateZ(20px);
}

.floating-badge i {
color: white;
font-size: 1.2rem;
}

.floating-badge span {
color: white;
font-weight: 500;
font-size: 0.9rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.image-frame:hover .floating-badge {
transform: translateY(-5px);
box-shadow: 
	0 15px 30px -5px rgba(59, 130, 246, 0.4),
	0 0 20px rgba(59, 130, 246, 0.3);
}

@media (max-width: 768px) {
.image-frame {
 max-width: 300px;
 border-radius: 25px;
}

.floating-badge {
	bottom: 1.5rem;
	right: 1.5rem;
	padding: 0.5rem 1rem;
}

.floating-badge i {
 font-size: 1rem;
}

.floating-badge span {
 font-size: 0.8rem;
}
}

@media (max-width: 480px) {
.image-frame {
 max-width: 250px;
 border-radius: 20px;
}

.floating-badge {
	bottom: 1rem;
	right: 1rem;
	padding: 0.4rem 0.8rem;
}

.floating-badge i {
 font-size: 0.9rem;
}

.floating-badge span {
 font-size: 0.75rem;
}
}

.about-content {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

.section-tag {
display: inline-block;
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 1.5rem;
border: 1px solid rgba(59, 130, 246, 0.2);
}

.about-content .title h1 {
font-size: 2.5rem;
font-weight: 800;
color: white;
margin-bottom: 1.5rem;
line-height: 1.2;
position: relative;
}

.about-content .title h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
border-radius: 2px;
}

.about-text {
position: relative;
}

.about-text .text-content {
  line-height: 1.5em;
  transition: max-height 0.3s ease;
  overflow: hidden;
  max-height: 4.5em; /* Show only 3 lines by default */
}

.about-text.expanded .text-content {
  max-height: none;
  overflow: visible;
}

/* Remove the conflicting webkit-line-clamp styles */
.about-text .text-content {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.about-text.expanded .text-content {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  max-height: none;
  overflow: visible;
}

@media (max-width: 768px) {
.about-text .text-content {
  line-height: 1.5em;
  transition: max-height 0.3s ease;
  overflow: hidden;
  max-height: 4.5em;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.about-text.expanded .text-content {
  max-height: none;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
}

.tech-stack {
margin-top: 2rem;
}

.tech-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}

.tech-header h3 {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}

.tech-line {
flex-grow: 1;
height: 2px;
background: linear-gradient(90deg, #3b82f6, transparent);
}

.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
max-width: 100%;
}

.tech-item {
background: rgba(30, 41, 59, 0.6);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1rem;
text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(59, 130, 246, 0.1);
position: relative;
overflow: hidden;
min-width: 0; /* Prevent overflow */
}

.tech-icon {
font-size: 1.8rem;
margin-bottom: 0.5rem;
transition: transform 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}

.tech-item span {
color: #e2e8f0;
font-size: 0.85rem;
font-weight: 500;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Responsive Styles */
@media (max-width: 991px) {
.tech-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.8rem;
}
}

@media (max-width: 768px) {
.tech-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}

.tech-item {
 padding: 0.8rem;
}

.tech-icon {
 font-size: 1.5rem;
 margin-bottom: 0.4rem;
}

.tech-item span {
 font-size: 0.8rem;
}
}

@media (max-width: 480px) {
.tech-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
}

.tech-item {
 padding: 0.7rem;
}

.tech-icon {
 font-size: 1.3rem;
 margin-bottom: 0.3rem;
}

.tech-item span {
 font-size: 0.75rem;
}
}

/* Tech Icons Colors */
.tech-item:nth-child(1) .tech-icon { color: #e34f26; } /* HTML5 */
.tech-item:nth-child(2) .tech-icon { color: #1572b6; } /* CSS3 */
.tech-item:nth-child(3) .tech-icon { color: #f7df1e; } /* JavaScript */
.tech-item:nth-child(4) .tech-icon { color: #61dafb; } /* React */
.tech-item:nth-child(5) .tech-icon { color: #3776ab; } /* Python */
.tech-item:nth-child(6) .tech-icon { 
color: #f29111; /* SQL */
font-size: 3rem; /* Make SQL icon much bigger */
transform: scale(1.2); /* Additional scaling for emphasis */
}

@media (max-width: 768px) {
.tech-item:nth-child(6) .tech-icon {
	font-size: 2.8rem; /* Increased size for medium screens */
	transform: scale(1.1);
}
}

@media (max-width: 480px) {
.tech-item:nth-child(6) .tech-icon {
	font-size: 2.5rem; /* Increased size for mobile screens */
	transform: scale(1.1);
}

/* Adjust the tech item container for mobile to accommodate larger icon */
.tech-item:nth-child(6) {
 padding: 1rem;
 min-height: 100px;
}
}

/* Responsive Styles */
@media (max-width: 991px) {
.about {
 padding: 4rem 0;
}

.about-image-container {
 margin-bottom: 2rem;
}

.image-frame {
 max-width: 350px;
}

.about-content {
 padding: 1rem;
}

.about-content .title h1 {
 font-size: 2.2rem;
}

.about-text p {
 font-size: 1rem;
}

.tech-grid {
 grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 768px) {
.about {
 padding: 4rem 0;
}

.about-image-container {
 display: none; /* Hide the image container on mobile */
}

.about-content {
 padding: 1rem;
 width: 100%;
}

.about-text p {
 font-size: 0.95rem;
 line-height: 1.6;
 margin-bottom: 1rem;
 padding: 0;
 width: 100%;
 max-width: 100%;
}

.about-content .title h1 {
 font-size: 1.8rem;
 line-height: 1.3;
 margin-bottom: 1rem;
 width: 100%;
}

.about-text {
 width: 100%;
 padding: 0;
}
}

@media (max-width: 480px) {
.about-content {
 padding: 0.8rem;
}

.about-text p {
 font-size: 0.9rem;
 line-height: 1.5;
 margin-bottom: 0.8rem;
}

.about-content .title h1 {
 font-size: 1.6rem;
}

.col-md-7 {
 padding: 0 1rem;
}
}

/* Modern Mobile Navbar */
@media (max-width: 768px) {
.navbar {
 background: rgba(15, 23, 42, 0.95);
 backdrop-filter: blur(10px);
 padding: 0.8rem 1rem;
}

.navbar-toggler {
 border: none;
 padding: 0.5rem;
 background: transparent;
}

.navbar-toggler:focus {
 box-shadow: none;
 outline: none;
}

.navbar-toggler-icon {
 background-image: none;
 position: relative;
 width: 24px;
 height: 2px;
 background: #3b82f6;
 display: block;
 transition: all 0.3s ease;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
 content: '';
 position: absolute;
 width: 24px;
 height: 2px;
 background: #3b82f6;
 transition: all 0.3s ease;
}

.navbar-toggler-icon::before {
 transform: translateY(-8px);
}

.navbar-toggler-icon::after {
 transform: translateY(8px);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
 background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
 transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
 transform: rotate(-45deg);
}

.navbar-collapse {
 background: rgba(15, 23, 42, 0.98);
 backdrop-filter: blur(10px);
 padding: 1rem;
 border-radius: 12px;
 margin-top: 0.5rem;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 border: 1px solid rgba(59, 130, 246, 0.1);
}

.navbar-nav {
 gap: 0.5rem;
}

.nav-item {
 padding: 0.5rem 0;
}

.nav-link {
 color: #e2e8f0;
 font-size: 1.1rem;
 padding: 0.8rem 1rem;
 border-radius: 8px;
 transition: all 0.3s ease;
}

.nav-link:hover {
 background: rgba(59, 130, 246, 0.1);
 color: #3b82f6;
 transform: translateX(5px);
}

.nav-link.active {
 background: rgba(59, 130, 246, 0.15);
 color: #3b82f6;
 font-weight: 500;
}
}

@media (max-width: 480px) {
.navbar {
 padding: 0.6rem 0.8rem;
}

.nav-link {
 font-size: 1rem;
 padding: 0.7rem 0.9rem;
}

.navbar-collapse {
 padding: 0.8rem;
}
}

/* Logo Styles */
.navbar-brand {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, #3b82f6, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
padding: 0.5rem 0;
}

.navbar-brand::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}

.navbar-brand:hover::after {
transform: scaleX(1);
transform-origin: left;
}

@media (max-width: 768px) {
.navbar-brand {
 font-size: 1.3rem;
}
}

@media (max-width: 480px) {
.navbar-brand {
 font-size: 1.2rem;
}
}

/* Add these styles to your existing styles */
.image-wrapper {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto;
}

.floating-image {
width: 100%;
max-width: 500px;
animation: float 6s ease-in-out infinite;
filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3));
transition: all 0.5s ease;
}

.floating-tag {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(59, 130, 246, 0.95);
backdrop-filter: blur(10px);
padding: 12px 20px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.3);
animation: tagFloat 4s ease-in-out infinite;
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 2;
}

.floating-tag i {
color: white;
font-size: 1.2rem;
}

.floating-tag span {
color: white;
font-weight: 500;
font-size: 0.9rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@keyframes float {
0% {
	transform: translateY(0px);
}
50% {
	transform: translateY(-20px);
}
100% {
	transform: translateY(0px);
}
}

@keyframes tagFloat {
0% {
	transform: translateY(0px) translateX(0px);
}
50% {
	transform: translateY(-10px) translateX(5px);
}
100% {
	transform: translateY(0px) translateX(0px);
}
}

.image-wrapper:hover .floating-image {
filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.5));
transform: scale(1.02);
}

.image-wrapper:hover .floating-tag {
animation: tagFloat 2s ease-in-out infinite;
box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.4);
transform: translateY(-5px);
}

@media (max-width: 768px) {
.image-wrapper {
 max-width: 350px;
}

.floating-tag {
 padding: 8px 15px;
 bottom: 15px;
 right: 15px;
}

.floating-tag i {
 font-size: 1rem;
}

.floating-tag span {
 font-size: 0.8rem;
}
}

/* Add these styles to your existing styles */
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
font-size: 1.2rem;
transition: all 0.3s ease;
margin: 0 8px;
border: 1px solid rgba(59, 130, 246, 0.2);
}

.social-link:hover {
background: #3b82f6;
color: white;
transform: translateY(-3px);
box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.3);
}

.social-link i {
background: transparent !important;
}

@media (max-width: 768px) {
.social-link {
 width: 40px;
 height: 40px;
 font-size: 1.1rem;
 margin: 0 6px;
}
}

@media (max-width: 480px) {
.social-link {
 width: 35px;
 height: 35px;
 font-size: 1rem;
 margin: 0 4px;
}

.list-inline {
 padding: 2rem 0 !important;
}
}

/* Success Message Styles */
.contact-success-message {
margin-bottom: 1.5rem;
animation: slideDown 0.5s ease-out;
}

.contact-success-message .alert {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.2);
color: #10b981;
padding: 1rem;
border-radius: 12px;
display: flex;
align-items: center;
gap: 0.75rem;
backdrop-filter: blur(8px);
}

.contact-success-message .alert i {
font-size: 1.2rem;
}

@keyframes slideDown {
from {
	transform: translateY(-20px);
	opacity: 0;
}
to {
	transform: translateY(0);
	opacity: 1;
}
}

@keyframes fadeOut {
from {
	opacity: 1;
}
to {
	opacity: 0;
}
}
	/* Prevent Flash of Unstyled Content */
	html {
		background: #000;
	}
	
	body {
		margin: 0;
		padding: 0;
		background: #000;
		opacity: 0;
		transition: opacity 0.5s ease-in;
	}

	body.loaded {
		opacity: 1;
	}

	/* Hide all content until loaded */
	body > *:not(.preloader) {
		opacity: 0;
		transition: opacity 0.5s ease-in;
	}

	body.loaded > *:not(.preloader) {
		opacity: 1;
	}



	.main-button2{
		background-color: aliceblue;
		color: black;
	}

	/* Modern Preloader Styles */
	.preloader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99999;
		visibility: visible;
		opacity: 1;
		transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	}

	.preloader.fade-out {
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	}

	.loader {
		position: relative;
		width: 120px;
		height: 120px;
	}

	.loader:before,
	.loader:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 3px solid transparent;
		border-top-color: #3498db;
		animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
	}

	.loader:before {
		z-index: 100;
		animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
	}

	.loader:after {
		border: 3px solid transparent;
		border-top-color: #f3f3f3;
		animation: spin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite reverse;
	}

	.loader::before {
		border-top-color: #3498db;
		animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
	}

	.loader::after {
		border-top-color: #f3f3f3;
		animation: spin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite reverse;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg) scale(1);
		}
		50% {
			transform: rotate(180deg) scale(1.2);
		}
		100% {
			transform: rotate(360deg) scale(1);
		}
	}

	/* Add a subtle glow effect */
	.loader::before,
	.loader::after {
		box-shadow: 0 0 20px rgba(52, 152, 219, 0.3);
	}


	/* Ultra Modern Navbar */
#header {
background: transparent;
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbur {
padding: 1.2rem 2rem;
background: transparent !important;
}

/* Modern Logo */
.logo {
margin: 0;
padding: 0;
}

.logo a {
text-decoration: none;
display: flex;
align-items: center;
position: relative;
}

.logo-container {
position: relative;
display: flex;
align-items: center;
gap: 0.2rem;
padding: 1rem;
width: 5rem;
height: 5rem;
}

.logo-hexagon {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.1));
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: all 0.5s ease;
}

.logo-text {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #3b82f6, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 1;
transition: all 0.3s ease;
text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.logo-dot {
font-size: 3.5rem;
background: linear-gradient(135deg, #60a5fa, #93c5fd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 1;
animation: pulse 2s ease-in-out infinite;
}

.logo-particles span {
position: absolute;
width: 4px;
height: 4px;
background: #3b82f6;
border-radius: 50%;
opacity: 0;
transition: all 0.5s ease;
}

.logo-particles span:nth-child(1) { top: 20%; left: 20%; }
.logo-particles span:nth-child(2) { top: 60%; right: 20%; }
.logo-particles span:nth-child(3) { bottom: 20%; left: 50%; }

@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}

#mainlogo:hover .logo-hexagon {
transform: rotate(180deg);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.2));
}

#mainlogo:hover .logo-text {
transform: scale(1.1);
filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.4));
}

#mainlogo:hover .logo-dot {
animation: none;
transform: scale(1.2);
}

#mainlogo:hover .logo-particles span {
opacity: 1;
transform: scale(1.5);
}

#mainlogo:hover .logo-particles span:nth-child(1) {
animation: float 3s ease-in-out infinite;
}

#mainlogo:hover .logo-particles span:nth-child(2) {
animation: float 3s ease-in-out infinite 0.5s;
}

#mainlogo:hover .logo-particles span:nth-child(3) {
animation: float 3s ease-in-out infinite 1s;
}

@keyframes float {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(-10px) scale(1.5); }
100% { transform: translateY(0) scale(1); }
}

/* Add a tech-inspired glow effect */
.logo-container::before {
content: '';
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
filter: blur(20px);
opacity: 0;
transition: all 0.5s ease;
z-index: -1;
}

#mainlogo:hover .logo-container::before {
opacity: 1;
}

/* Ultra Modern Navigation */
.nav-menu ul {
display: flex;
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}

.nav-menu li {
position: relative;
}

.nav-menu a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
padding: 0.6rem 1rem;
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Advanced Hover Effects */
.nav-menu a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.2));
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}

.nav-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.nav-menu li:hover a::before,
.nav-menu li.active a::before {
transform: translateY(0);
}

.nav-menu li:hover a::after,
.nav-menu li.active a::after {
width: 80%;
}

.nav-menu li:hover a,
.nav-menu li.active a {
color: #ffffff;
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Modern Icons */
.nav-menu a i {
font-size: 1.1rem;
opacity: 0.8;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: linear-gradient(135deg, #3b82f6, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.nav-menu a span {
position: relative;
z-index: 1;
}

.nav-menu li:hover a i,
.nav-menu li.active a i {
opacity: 1;
transform: scale(1.1);
}

.nav-menu li:hover a,
.nav-menu li.active a {
color: #ffffff;
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Mobile Navigation */
.mobile-nav-toggle {
display: none;
position: fixed;
top: 1.2rem;
right: 1.2rem;
z-index: 1000;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 12px;
padding: 0.8rem;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-toggle i {
color: #3b82f6;
font-size: 1.5rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-toggle:hover {
background: rgba(59, 130, 246, 0.2);
transform: translateY(-2px);
}

/* Scroll Effect */
.header-scrolled {
background: #1d1836;
backdrop-filter: blur(12px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
from {
	transform: translateY(-100%);
	opacity: 0;
}
to {
	transform: translateY(0);
	opacity: 1;
}
}

/* Mobile Styles */
@media (max-width: 991px) {
.mobile-nav-toggle {
	display: block;
}

.nav-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 300px;
	height: 100vh;
	background: #1d1836;
	backdrop-filter: blur(12px);
	padding: 2rem;
	transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 999;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-menu.active {
	right: 0;
}

.nav-menu ul {
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 5rem;
}

.nav-menu a {
	padding: 0.8rem 1.2rem;
	font-size: 1rem;
	justify-content: flex-start;
}

.nav-menu a i {
	font-size: 1.2rem;
	opacity: 1;
}

.mobile-nav-toggle.active i {
	transform: rotate(90deg);
}

.logo-container {
	width: 3.5rem;
	height: 3.5rem;
	padding: 0.8rem;
}

.logo-text {
	font-size: 2.5rem;
}

.logo-dot {
	font-size: 2.5rem;
}

.logo-particles span {
	width: 3px;
	height: 3px;
}

.navbur {
	padding: 1.2rem 0.5rem;
}
}

/* Advanced Animations */
@keyframes slideIn {
from {
	opacity: 0;
	transform: translateY(-20px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}

.nav-menu li {
animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
opacity: 0;
}

.nav-menu li:nth-child(1) { animation-delay: 0.1s; }
.nav-menu li:nth-child(2) { animation-delay: 0.2s; }
.nav-menu li:nth-child(3) { animation-delay: 0.3s; }
.nav-menu li:nth-child(4) { animation-delay: 0.4s; }
.nav-menu li:nth-child(5) { animation-delay: 0.5s; }

/* Glow Effect */
@keyframes glow {
0% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.2); }
50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }
100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.2); }
}

.nav-menu li:hover a {
animation: glow 2s infinite;
}

/* Remove conflicting webkit-line-clamp styles - let JavaScript handle it */

@media (max-width: 768px) {
.see-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.about-text p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
}

/* See more functionality styles */
#visibleContent {
  line-height: 1.5em;
  transition: max-height 0.3s ease;
}

#hiddenContent {
  margin-top: 1rem;
}

#hiddenContent p {
  margin-bottom: 0;
}

.about-text .text-content {
  line-height: 1.5em;
  transition: max-height 0.3s ease;
  overflow: hidden;
  max-height: 4.5em; /* Show only 3 lines by default */
}

.about-text.expanded .text-content {
  max-height: none;
  overflow: visible;
}

/* Remove the conflicting webkit-line-clamp styles */
.about-text .text-content {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.about-text.expanded .text-content {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  max-height: none;
  overflow: visible;
}

.about-text p {
  color: #e2e8f0;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  max-width: 600px;
}

/* Simple see more button styles */
.see-more-btn {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 500;
  margin-top: 1rem;
  border-radius: 8px;
  backdrop-filter: blur(8px);
  position: relative;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.see-more-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.see-more-btn i {
  transition: transform 0.3s ease;
}

.see-more-btn.expanded i {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
.about-text .text-content {
  line-height: 1.5em;
  transition: max-height 0.3s ease;
  overflow: hidden;
  max-height: 4.5em;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.about-text.expanded .text-content {
  max-height: none;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.see-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.about-text p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
}

.about-text {
    margin-bottom: 2rem;
}

.about-text .text-content {
    line-height: 1.8;
    color: #e2e8f0;
    font-size: 1.1rem;
}

.about-text .text-content p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
    max-width: 600px;
}

#visibleContent {
    display: block;
}

#hiddenContent {
    margin-top: 1rem;
}

#hiddenContent p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
    max-width: 600px;
}

/* Simple see more button styles */
.see-more-btn {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 500;
    margin-top: 1rem;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    position: relative;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.see-more-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.see-more-btn i {
    transition: transform 0.3s ease;
}

.see-more-btn.expanded i {
    transform: rotate(180deg);
}

/* Hero Profile Image Responsive & Amazing Design */
.hero-profile-image {
  width: 320px;
  height: 320px;
  max-width: 90vw;
  max-height: 90vw;
  border-radius: 50%;
  border: 6px solid #3b82f6;
  box-shadow: 0 8px 32px 0 rgba(59,130,246,0.25), 0 1.5px 8px 0 rgba(96,165,250,0.15);
  object-fit: cover;
  /* background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%); */
  background: transparent;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s;
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 2;
}
.hero-profile-image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 370px;
  height: 370px;
  /* Hexagon shape */
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(96,165,250,0.12) 60%, transparent 100%);
  box-shadow: 0 0 60px 10px #60a5fa44, 0 0 0 0 #fff0;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hero-profile-image {
    width: 220px;
    height: 220px;
    max-width: 70vw;
    max-height: 70vw;
  }
  .hero-profile-image::before {
    width: 260px;
    height: 260px;
  }
}
@media (max-width: 480px) {
  .hero-profile-image {
    width: 140px;
    height: 140px;
    max-width: 60vw;
    max-height: 60vw;
  }
  .hero-profile-image::before {
    width: 170px;
    height: 170px;
  }
}

.hero-image-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 370px;
  height: 370px;
  margin: 0 auto;
}
.hero-image-frame::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(96,165,250,0.12) 60%, transparent 100%);
  box-shadow: 0 0 60px 10px #60a5fa44, 0 0 0 0 #fff0;
  z-index: 1;
  pointer-events: none;
}
.hero-profile-image {
  width: 320px;
  height: 320px;
  max-width: 90vw;
  max-height: 90vw;
  border-radius: 50%;
  border: 6px solid #3b82f6;
  box-shadow: 0 8px 32px 0 rgba(59,130,246,0.25), 0 1.5px 8px 0 rgba(96,165,250,0.15);
  object-fit: cover;
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s;
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .hero-image-frame {
    width: 260px;
    height: 260px;
  }
  .hero-profile-image {
    width: 220px;
    height: 220px;
    max-width: 70vw;
    max-height: 70vw;
  }
}
@media (max-width: 480px) {
  .hero-image-frame {
    width: 170px;
    height: 170px;
  }
  .hero-profile-image {
    width: 140px;
    height: 140px;
    max-width: 60vw;
    max-height: 60vw;
  }
}