@charset "utf-8";

/*
/*	Copyright (c) 2021 marketify
/*	Author: marketify
/*	This file is made for CURRENT TEMPLATE


/*--------------------------------f-------------------*/
/*	01) CORE CSS
/*---------------------------------------------------*/

html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px
}
body{
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 32px;
	letter-spacing: 0px;
	word-wrap: break-word;
	font-weight: 400;
	background-color: #0f1117;
	color: #A9AFC3;
}

/* 🎯 HIDE SCROLLBARS - ALL BROWSERS 🎯 */
/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
	display: none;
	width: 0;
	background: transparent;
}

/* Hide scrollbar for IE, Edge and Firefox */
html, body {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;     /* Firefox */
}

/* Global scrollbar override for ANY element */
* {
	scrollbar-width: none !important; /* Firefox */
	-ms-overflow-style: none !important; /* IE/Edge */
}

*::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Typography Hierarchy */
/* All headings and important text use Exo 2 */
h1, h2, h3, h4, h5, h6,
.title, .skcode_title, .hero_title, .section_title,
.skcode_hero .title, .skcode_information .info_left h3,
.skcode_service_list .service_item h3, .skcode_title .title,
.skcode_hero .title span, .skcode_hero .title .middle,
.text-type-animation, .txt-rotate,
.skcode_hero .title .middle span, .skcode_hero .title .middle strong,
.skcode_topbar .menu ul li a, .skcode_mobile_menu ul li a,
.tech_name, .challenge_content h4, .challenge_content h5,
.solution_panel h4, .tech_stack_panel h4,
.result_number, .form-heading,
.footer_left p, .username,
nav, navigation, menu-item,
button, .sendMessage-btn,
.modern-contact-form .form-heading {
	font-family: 'Exo 2', sans-serif !important;
}

/* All body text, descriptions, and paragraphs use Inter */
p, .description, .skcode_hero .description,
.skcode_title .description, .service_item .content p,
.hidden_information p, .philosophy_text,
.approach_section p, .solution_panel p,
.result_text, .contact_left ul li p,
input, textarea, .input-field,
.modern-contact-form input, .modern-contact-form textarea,
body, .skcode_wrapper {
	font-family: 'Inter', sans-serif !important;
}
body::-webkit-scrollbar {
	width: 11px;
}
body{
	scrollbar-width: thin;
	scrollbar-color: #999 #fff;
}
body:-webkit-scrollbar-track {
	background: #fff;
}
body::-webkit-scrollbar-thumb {
	background-color: #aaa;
	border-radius: 10px;
	border: 3px solid #fff;
}
[class^="skcode_"] .content,
[class^="skcode_"],
section{
	width: 100%;
	float: left;
	clear: both;
	height: auto;
}
a{
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.svg{
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
.svg.custom{
	fill: none;
	/* stroke: #000; */
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #7e7e7e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #7e7e7e;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #7e7e7e;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #7e7e7e;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #7e7e7e;
}

::placeholder { /* Most modern browsers support this now. */
   color: #7e7e7e;
}

.overlay_image{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
	transition: all 1s ease;
}
.container{
	max-width: 1370px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	padding: 0 40px;
	position: relative;
	clear: both;
}

h1, h2, h3, h4, h5, h6{
	line-height: 1.5;
	color: #0F172A;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
}

h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

.skcode_wrapper{
	position: relative;
}
*:after,
*:before,
.skcode_wrapper,
.skcode_wrapper *{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}

/* AI Matrix Loader */
#preloader{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

#preloader:before,
#preloader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-color: #000;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
#preloader:after{
    left: auto;
    right: 0;
}

/* AI Matrix Loader Styles */
.ai-matrix-loader {
  width: 120px;
  height: 160px;
  margin: 30px auto;
  position: relative;
  perspective: 800px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.digit {
  color: #00ff88;
  font-family: monospace;
  font-size: 18px;
  text-align: center;
  text-shadow: 0 0 5px #00ff88;
  animation:
    matrix-fall 2s infinite,
    matrix-flicker 0.5s infinite;
  opacity: 0;
}

.digit:nth-child(1) {
  animation-delay: 0.1s;
}
.digit:nth-child(2) {
  animation-delay: 0.3s;
}
.digit:nth-child(3) {
  animation-delay: 0.5s;
}
.digit:nth-child(4) {
  animation-delay: 0.7s;
}
.digit:nth-child(5) {
  animation-delay: 0.9s;
}
.digit:nth-child(6) {
  animation-delay: 1.1s;
}
.digit:nth-child(7) {
  animation-delay: 1.3s;
}
.digit:nth-child(8) {
  animation-delay: 1.5s;
}

.glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle,
    rgba(0, 255, 136, 0.1) 0%,
    transparent 70%
  );
  animation: matrix-pulse 2s infinite;
}

@keyframes matrix-fall {
  0% {
    transform: translateY(-50px) rotateX(90deg);
    opacity: 0;
  }
  20%,
  80% {
    transform: translateY(0) rotateX(0deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(50px) rotateX(-90deg);
    opacity: 0;
  }
}

@keyframes matrix-flicker {
  0%,
  19%,
  21%,
  100% {
    opacity: 0.8;
  }
  20% {
    opacity: 0.2;
  }
}

@keyframes matrix-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

.preloaded:before,
.preloaded:after{
    -webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    -o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    animation: preloadedzero 300ms ease-in-out 500ms forwards;
}
@keyframes preloadedzero{
    0%{
        width: 50%;
    }
    100%{
        width: 0%;
    }
}

/* Modalbox */
.skcode_modalbox,
.skcode_modalbox *{
	box-sizing: border-box;
}
/* 🎯 MODAL SCROLLBAR HIDING - COMPREHENSIVE 🎯 */
.skcode_modalbox .modal_content{
  	scrollbar-width: none !important; /* Firefox - hidden */
  	scrollbar-color: transparent transparent !important; /* Firefox fallback */
	-ms-overflow-style: none !important; /* IE and Edge - hidden */
	overflow: auto !important;
}

/* Hide modal scrollbars - All Webkit browsers (Chrome, Safari, Opera) */
.skcode_modalbox .modal_content::-webkit-scrollbar{
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
}

/* Ensure all scrollbar elements are hidden */
.skcode_modalbox .modal_content::-webkit-scrollbar-track{
	display: none !important;
	background: transparent !important;
}

.skcode_modalbox .modal_content::-webkit-scrollbar-thumb{
	display: none !important;
	background: transparent !important;
}

.skcode_modalbox .modal_content::-webkit-scrollbar-corner{
	display: none !important;
	background: transparent !important;
}

/* Additional modal elements that might scroll */
.skcode_modalbox .modal_in,
.skcode_modalbox .box_inner,
.skcode_modalbox .hidden_information {
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

.skcode_modalbox .modal_in::-webkit-scrollbar,
.skcode_modalbox .box_inner::-webkit-scrollbar,
.skcode_modalbox .hidden_information::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}
.skcode_modalbox .fixed_title:empty{
	display: none;
}
.skcode_modalbox .fixed_title{
	margin: 0;
	font-family: 'Exo 2', sans-serif;
    font-size: 18px;
    color: #0F172A;
    background: #fff;
    position: fixed;
    z-index: 44;
    left: 0;
    padding: 5px 15px;
    top: 5px;
    box-shadow: 0px 3px 4px rgb(0 0 0 / 5%);
    FONT-WEIGHT: 500;
    border-radius: 0 10px 10px 0;
    text-transform: capitalize;
}
.skcode_modalbox .fixed_title span{
	color: #7e7e7e;
    font-family: monospace;
	font-size: 14px;
    display: block;
    border-bottom: 1px solid #bfbfbf;
}
.skcode_modalbox{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 9999;
	background-color: rgba(0,0,0,.8);
	opacity: 0;
	visibility: hidden;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.skcode_modalbox.opened{
	opacity: 1;
	visibility: visible;
}
.skcode_modalbox .container{
	height: 100vh;
}
.skcode_modalbox .box_inner{
	position: absolute;
	top: 70px;
	bottom: 70px;
	width: 968px;
	left: 50%;
	transform: translateX(-50%);
	background: transparent !important;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	margin-top: -20px;
	border-radius: 5px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.skcode_modalbox.opened .box_inner{
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}
.skcode_modalbox .close{
	position: fixed;
	left: 100%;
	top: 0px;
	margin-left: 40px;
	z-index: 10001;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Uiverse.io animated close button */
.skcode_modalbox .close .button {
	display: block;
	position: relative;
	width: 56px;
	height: 56px;
	margin: 0;
	overflow: hidden;
	outline: none;
	background-color: transparent !important;
	cursor: pointer;
	border: 0 !important;
	box-shadow: none !important;
}

.skcode_modalbox .close .button:before,
.skcode_modalbox .close .button:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	inset: 7px;
}

.skcode_modalbox .close .button:before {
	border: 4px solid #ff0066;
	transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
		transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
	animation: pulseRing 3s ease-in-out infinite;
}

.skcode_modalbox .close .button:after {
	border: 4px solid #00ff88;
	transform: scale(1.3);
	transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
		transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	opacity: 0;
	animation: pulseRing 3s ease-in-out infinite reverse;
}

@keyframes pulseRing {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.3;
		transform: scale(0.9);
	}
}

.skcode_modalbox .close .button:hover:before,
.skcode_modalbox .close .button:focus:before {
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
		transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.skcode_modalbox .close .button:hover:after,
.skcode_modalbox .close .button:focus:after {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
		transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.skcode_modalbox .close .button-box {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	animation: slideArrows 2s ease-in-out infinite;
}

@keyframes slideArrows {
	0%, 50% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-56px);
	}
	75%, 100% {
		transform: translateX(0);
	}
}

.skcode_modalbox .close .button-elem {
	display: block;
	width: 20px;
	height: 20px;
	margin: 17px 18px 0 18px;
	transform: rotate(180deg);
	fill: #00d4ff;
}

.skcode_modalbox .close .button:hover .button-box,
.skcode_modalbox .close .button:focus .button-box {
	animation-play-state: paused;
}

/* Only pause animation on hover for devices that support proper hover (desktop) */
@media (hover: hover) and (pointer: fine) {
	.skcode_modalbox .close .button:hover .button-box,
	.skcode_modalbox .close .button:focus .button-box {
		animation-play-state: paused;
	}
}
.skcode_modalbox .close .svg{
	width: 50px;
	height: 50px;
}

/* Hide the modal counter text (01/04 Services) */
.skcode_modalbox .fixed_title {
	display: none !important;
}

/* Modern Cyberpunk Modal Content Design */
.skcode_modalbox .modal_in {
	padding: 0;
	background: transparent;
}

.skcode_modalbox .modal_in .description {
	background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(159, 76, 255, 0.1));
	border-radius: 20px;
	border: 1px solid rgba(0, 212, 255, 0.3);
	backdrop-filter: blur(20px);
	padding: 40px;
	position: relative;
	overflow: hidden;
	margin: 0;
}

.skcode_modalbox .modal_in .description:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 20px;
	padding: 2px;
	background: linear-gradient(45deg, #00d4ff, #9f4cff, #ff0066, #00ff88);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: exclude;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	z-index: -1;
	opacity: 0.7;
}

/* Service Header with Icon */
.skcode_modalbox .modal_in .description h3 {
	font-size: 32px;
	color: #ffffff;
	text-align: center;
	margin-bottom: 30px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
	position: relative;
}

.skcode_modalbox .modal_in .description h3:after {
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	background: linear-gradient(90deg, #00d4ff, #9f4cff);
	margin: 15px auto 0;
	border-radius: 2px;
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

/* Description Text */
.skcode_modalbox .modal_in .description > p {
	font-size: 18px;
	line-height: 1.8;
	color: #e0e0e0;
	margin-bottom: 40px;
	text-align: justify;
	font-weight: 300;
}

/* Responsibilities Section */
.skcode_modalbox .modal_in .description h3:nth-of-type(2) {
	font-size: 24px;
	color: #00ff88;
	text-align: left;
	margin: 40px 0 25px 0;
	text-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
}

.skcode_modalbox .modal_in .description h3:nth-of-type(2):after {
	width: 50px;
	margin: 10px 0 0 0;
	background: linear-gradient(90deg, #00ff88, #00d4ff);
}

/* Responsibilities List */
.skcode_modalbox .modal_in .description .in_list {
	margin-top: 25px;
}

.skcode_modalbox .modal_in .description .in_list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.skcode_modalbox .modal_in .description .in_list ul li {
	margin-bottom: 15px;
	padding: 15px 20px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	border-left: 4px solid #00d4ff;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	position: relative;
}

.skcode_modalbox .modal_in .description .in_list ul li:hover {
	background: rgba(0, 212, 255, 0.1);
	border-left-color: #ff0066;
	transform: translateX(10px);
	box-shadow: 0 5px 25px rgba(0, 212, 255, 0.3);
}

.skcode_modalbox .modal_in .description .in_list ul li p {
	margin: 0;
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
}

/* Additional paragraph styling for services like cybersecurity */
.skcode_modalbox .modal_in .description .in_list + p {
	margin-top: 30px;
	font-size: 16px;
	line-height: 1.7;
	color: #b0b0b0;
	font-style: italic;
	padding: 20px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Services Philosophy Quote */
.services_philosophy {
	margin-top: 60px;
	padding: 40px;
	text-align: center;
	position: relative;
	background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 102, 0.1));
	border-radius: 15px;
	border: 1px solid rgba(0, 212, 255, 0.3);
	backdrop-filter: blur(10px);
}

.services_philosophy:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 15px;
	padding: 2px;
	background: linear-gradient(45deg, #00d4ff, #ff0066, #00ff88);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: exclude;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	z-index: -1;
}

.philosophy_text {
	font-size: 20px;
	line-height: 1.6;
	color: #ffffff;
	font-style: italic;
	font-weight: 300;
	text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
	margin: 0;
	position: relative;
	z-index: 2;
}

.philosophy_text:before {
	content: '"';
	font-size: 60px;
	color: #00d4ff;
	position: absolute;
	top: -20px;
	left: -20px;
	line-height: 1;
	opacity: 0.7;
}

.philosophy_text:after {
	content: '"';
	font-size: 60px;
	color: #ff0066;
	position: absolute;
	bottom: -40px;
	right: -20px;
	line-height: 1;
	opacity: 0.7;
}
.skcode_modalbox .modal_content{
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	padding: 50px;
	overflow-y: scroll;
	background: transparent !important;
}
.hidden_information{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -11;
	display: none;
}
.skcode_modalbox .image{
	position: relative;
	max-height: 450px;
	margin-bottom: 50px;
	overflow: hidden;
}
.skcode_modalbox .image img{
	position: relative;
	min-width: 100%;
	opacity: 0;
}
.skcode_modalbox .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.skcode_modalbox h3{
	font-size: 23px;
	font-weight: 700;
	margin-bottom: 30px;
}
.skcode_modalbox p{
	margin-bottom: 30px;
/*	text-align: justify;*/
}
.skcode_modalbox .in_list{
	width: 100%;
	float: left;
	margin-bottom: 30px;
	padding-left: 20px;
}
.skcode_modalbox .in_list ul{
	margin: 0px;
	list-style-type: none;
}
.skcode_modalbox .in_list ul li{
	margin: 0px 0px 15px 0px;
	width: 100%;
	float: left;
	position: relative;
	padding-left: 0px;
}
.skcode_modalbox .in_list ul li:last-child{
	margin-bottom: 0px;
}
.skcode_modalbox .in_list ul li p{
	margin-bottom: 0px;
}
.skcode_prevnext.disabled{
	opacity: .5;
}

/* 🎮 CYBERPUNK PREV/NEXT BUTTONS 🎮 */
.skcode_prevnext {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	margin-top: 40px;
	padding: 20px;
}

.skcode_prevnext .next,
.skcode_prevnext .prev{
	float: none;
	position: relative;
}

.skcode_prevnext .prev{
	margin-right: 0;
}

.skcode_prevnext a{
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Exo 2', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	min-width: 120px;
	height: 45px;
	position: relative;
	color: #64ffda;
	background: rgba(15, 17, 23, 0.8);
	border: 2px solid #64ffda;
	border-radius: 25px;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	backdrop-filter: blur(10px);
	box-shadow: 
		0 4px 15px rgba(100, 255, 218, 0.2),
		inset 0 1px 0 rgba(100, 255, 218, 0.3);
}

.skcode_prevnext .prev a{
	text-align: center;
}

.skcode_prevnext .next a{
	text-align: center;
}

.skcode_prevnext a:hover{
	color: #0f1117;
	border-color: #64ffda;
	background: #64ffda;
	box-shadow: 
		0 6px 25px rgba(100, 255, 218, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

.skcode_prevnext a:active{
	transform: translateY(0);
	box-shadow: 
		0 2px 10px rgba(100, 255, 218, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Icon styling - Both buttons get arrows */
.skcode_prevnext .prev a:before{
	content: '← PREV';
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.skcode_prevnext .next a:before{
	content: 'NEXT →';
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.skcode_prevnext a:hover:before{
	color: #0f1117;
}

/* Remove old after content */
.skcode_prevnext .next a:after{
	display: none;
}

/* Reset before positioning */
.skcode_prevnext a:before{
	position: relative;
	z-index: auto;
	width: auto;
	bottom: auto;
	height: auto;
	background: none;
	opacity: 1;
	margin: 0;
	padding: 0;
}

/* Responsive design */
@media (max-width: 768px) {
	.skcode_prevnext {
		flex-direction: column;
		gap: 15px;
	}
	
	.skcode_prevnext a {
		min-width: 100px;
		font-size: 13px;
	}
}
/*---------------------------------------------------*/
/*	xx) TOPBAR
/*---------------------------------------------------*/
.skcode_topbar{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 100;
	background-color: rgba(15, 17, 23, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	
	-webkit-transition: all .8s ease;
	   -moz-transition: all .8s ease;
	    -ms-transition: all .8s ease;
	     -o-transition: all .8s ease;
	        transition: all .8s ease;
}
.skcode_topbar .in{
	padding: 40px 0px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.skcode_topbar.animate .in{
	background-color: rgba(15, 17, 23, 0.98);
	padding: 20px 0px;
	box-shadow: 0px 5px 20px rgba(0,0,0,.4);
} 
.skcode_wrapper.animate .skcode_topbar{
	top: 0px;
	transition-delay: 1.2s;
}
.skcode_topbar .topbar_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.skcode_topbar .logo{
	margin-right: 20px;
}
.skcode_topbar .logo img{
	max-width: 120px;
	max-height: 70px;
}
.skcode_topbar ul{
	margin: 0px;
	list-style-type: none;
	display: flex;
	align-items: center;
}
.skcode_topbar ul li{
	margin: 0px 15px 0px 0px;
	list-style-type: none;
}
.skcode_topbar ul li:last-child{
	margin-right: 0px;
}
.skcode_topbar ul li a{
	text-decoration: none;
	color: #ccd6f6;
	font-size: 16px;
	font-weight: 600;
	display: block;
	overflow: hidden;
	position: relative;
	padding: 12px 25px;
	margin: 0;
	border-radius: 8px;
	transition: all 0.3s ease;
	background-color: transparent;
}

.skcode_topbar ul li a::before {
	content: "";
	border-radius: 2px;
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: #64ffda;
	left: 8px;
	top: 50%;
	transform: translateY(-50%) rotate(225deg);
	cursor: pointer;
	transition: 0.3s;
	z-index: -1;
	opacity: 0;
}

.skcode_topbar ul li a:hover {
	color: #0f1117;
	background-color: #64ffda;
}

.skcode_topbar ul li a:hover::before {
	transform: translateY(-50%) rotate(0deg);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 8px;
	background-color: #64ffda;
	opacity: 1;
}

.skcode_topbar ul li.button a{
	border: 2px solid #64ffda;
	padding: 8px 30px;
	border-radius: 25px;
	color: #64ffda;
	background-color: transparent;
	font-weight: 700;
}

.skcode_topbar ul li.button a::before {
	display: none;
}

.skcode_topbar ul li.button a:hover,
.skcode_topbar ul li.current.button a{
	border-color: #64ffda;
	background-color: #64ffda;
	color: #0f1117;
	box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
}

.skcode_topbar ul li.current a{
	color: #64ffda;
	background-color: rgba(100, 255, 218, 0.1);
}

.skcode_topbar ul li.current a::before {
	opacity: 1;
	width: 8px;
	height: 8px;
	background-color: #64ffda;
}
.skcode_topbar .menu{
	position: relative;
}
.skcode_topbar .menu .ccc{
	position: absolute;
	bottom: 0;
	width: 0;
	background-color: #9f4cff;
	display: block;
	height: 2px;
	transition: all .5s ease;
	border-radius: 3px;
}


/* Hero Header */
.skcode_hero{
	position: relative;
}
.skcode_hero .overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.skcode_hero .overlay_color{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	background: rgba(15, 17, 23, 0.3);
}
.skcode_hero .overlay_image{
	background-repeat: no-repeat;
    background-size: cover;
    background-position: 75% 100%;
}
.skcode_hero .content{
	position: relative;
	width: 100%;
	z-index: 15;
}
.skcode_hero .content_in{
	width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    min-height: auto;
	padding: 40px 20px;
    display: flex;
	flex-direction: column;
    justify-content: center;
}
.skcode_hero .title{
	margin: 0;
	padding: 0;
	font-size: 70px;
	line-height: 102px;
	margin-bottom: 8px;
}
.skcode_hero .title span{
	color: #9f4cff;
}
.skcode_hero .description{
	margin: 0;
	padding: 0;
	margin-bottom: 20px;
}

/* ===== HOME SECTION LAYOUT ===== */
.skcode_hero {
	position: relative;
	min-height: auto;
	padding: 120px 0 60px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.skcode_hero .content {
	position: relative;
	z-index: 10;
	width: 100%;
}

/* ===== MOBILE RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
	/* Fix mobile container padding */
	.container {
		padding: 0 20px;
		max-width: 100%;
	}
	
	.skcode_hero .content_in {
		padding: 125px 20px;
		max-width: 90%;
	}
	
	/* Mobile floating skull background - body wide */
	body.dark::after {
		content: "";
		position: fixed;
		top: 20%;
		left: 10%;
		width: 150px;
		height: 175px;
		background-image: url('../img/skull-hacker-enhanced.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		opacity: 0.25;
		z-index: 1;
		pointer-events: none;
		animation: floatSkull 45s ease-in-out infinite;
	}
}

/* ===== DESKTOP FLOATING SKULL ===== */
@media (min-width: 769px) {
	/* Desktop floating skull background - body wide */
	body.dark::before {
		content: "";
		position: fixed;
		top: 15%;
		left: 5%;
		width: 200px;
		height: 235px;
		background-image: url('../img/skull-hacker-enhanced.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		opacity: 0.30;
		z-index: 1;
		pointer-events: none;
		animation: floatSkullDesktop 60s ease-in-out infinite;
	}
}

/* Floating animation keyframes */
@keyframes floatSkull {
	0% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 0.40;
		left: 10%;
		top: 10%;
	}
	10% {
		transform: translate(0, 0) rotate(1deg);
		opacity: 0.40;
		left: 70%;
		top: 20%;
	}
	20% {
		transform: translate(0, 0) rotate(-1deg);
		opacity: 0.40;
		left: 60%;
		top: 50%;
	}
	30% {
		transform: translate(0, 0) rotate(2deg);
		opacity: 0.40;
		left: 30%;
		top: 70%;
	}
	40% {
		transform: translate(0, 0) rotate(-2deg);
		opacity: 0.40;
		left: 5%;
		top: 60%;
	}
	50% {
		transform: translate(0, 0) rotate(1deg);
		opacity: 0.40;
		left: 65%;
		top: 30%;
	}
	60% {
		transform: translate(0, 0) rotate(-1deg);
		opacity: 0.40;
		left: 20%;
		top: 80%;
	}
	70% {
		transform: translate(0, 0) rotate(2deg);
		opacity: 0.40;
		left: 50%;
		top: 15%;
	}
	80% {
		transform: translate(0, 0) rotate(-2deg);
		opacity: 0.40;
		left: 15%;
		top: 40%;
	}
	90% {
		transform: translate(0, 0) rotate(1deg);
		opacity: 0.40;
		left: 40%;
		top: 65%;
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 0.40;
		left: 10%;
		top: 10%;
	}
}

/* Desktop floating animation keyframes */
@keyframes floatSkullDesktop {
	0% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 0.50;
		left: 5%;
		top: 15%;
	}
	5% {
		transform: translate(0, 0) rotate(2deg);
		opacity: 0.50;
		left: 25%;
		top: 5%;
	}
	10% {
		transform: translate(0, 0) rotate(-1deg);
		opacity: 0.50;
		left: 55%;
		top: 20%;
	}
	15% {
		transform: translate(0, 0) rotate(4deg);
		opacity: 0.50;
		left: 85%;
		top: 12%;
	}
	20% {
		transform: translate(0, 0) rotate(-3deg);
		opacity: 0.50;
		left: 70%;
		top: 35%;
	}
	25% {
		transform: translate(0, 0) rotate(1deg);
		opacity: 0.50;
		left: 35%;
		top: 45%;
	}
	30% {
		transform: translate(0, 0) rotate(-2deg);
		opacity: 0.50;
		left: 15%;
		top: 60%;
	}
	35% {
		transform: translate(0, 0) rotate(5deg);
		opacity: 0.50;
		left: 60%;
		top: 75%;
	}
	40% {
		transform: translate(0, 0) rotate(-4deg);
		opacity: 0.50;
		left: 90%;
		top: 65%;
	}
	45% {
		transform: translate(0, 0) rotate(3deg);
		opacity: 0.50;
		left: 45%;
		top: 85%;
	}
	50% {
		transform: translate(0, 0) rotate(-1deg);
		opacity: 0.50;
		left: 20%;
		top: 80%;
	}
	55% {
		transform: translate(0, 0) rotate(2deg);
		opacity: 0.50;
		left: 75%;
		top: 90%;
	}
	60% {
		transform: translate(0, 0) rotate(-5deg);
		opacity: 0.50;
		left: 10%;
		top: 70%;
	}
	65% {
		transform: translate(0, 0) rotate(4deg);
		opacity: 0.50;
		left: 40%;
		top: 50%;
	}
	70% {
		transform: translate(0, 0) rotate(-2deg);
		opacity: 0.50;
		left: 80%;
		top: 40%;
	}
	75% {
		transform: translate(0, 0) rotate(3deg);
		opacity: 0.50;
		left: 65%;
		top: 15%;
	}
	80% {
		transform: translate(0, 0) rotate(-1deg);
		opacity: 0.50;
		left: 30%;
		top: 25%;
	}
	85% {
		transform: translate(0, 0) rotate(2deg);
		opacity: 0.50;
		left: 50%;
		top: 55%;
	}
	90% {
		transform: translate(0, 0) rotate(-3deg);
		opacity: 0.50;
		left: 15%;
		top: 35%;
	}
	95% {
		transform: translate(0, 0) rotate(1deg);
		opacity: 0.50;
		left: 35%;
		top: 10%;
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 0.50;
		left: 5%;
		top: 15%;
	}
}

/* ===== FLOATING PARTICLES ===== */
.floating-particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
}

.floating-particles .particle {
	position: absolute !important;
	color: #00ff41 !important;
	font-family: 'Courier New', monospace !important;
	font-size: 14px !important;
	font-weight: bold !important;
	opacity: 0.2 !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	display: inline-block !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	line-height: normal !important;
	text-decoration: none !important;
	list-style: none !important;
}

/* Individual particle animations */
.floating-particles .particle:nth-child(1) { animation: float1 25s infinite; font-size: 12px !important; }
.floating-particles .particle:nth-child(2) { animation: float2 30s infinite; font-size: 16px !important; }
.floating-particles .particle:nth-child(3) { animation: float3 28s infinite; font-size: 14px !important; }
.floating-particles .particle:nth-child(4) { animation: float4 35s infinite; font-size: 18px !important; color: #9f4cff !important; }
.floating-particles .particle:nth-child(5) { animation: float5 22s infinite; font-size: 13px !important; }
.floating-particles .particle:nth-child(6) { animation: float6 32s infinite; font-size: 15px !important; }
.floating-particles .particle:nth-child(7) { animation: float7 27s infinite; font-size: 14px !important; color: #0ea5e9 !important; }
.floating-particles .particle:nth-child(8) { animation: float8 24s infinite; font-size: 12px !important; }
.floating-particles .particle:nth-child(9) { animation: float9 29s infinite; font-size: 16px !important; }
.floating-particles .particle:nth-child(10) { animation: float10 26s infinite; font-size: 15px !important; }
.floating-particles .particle:nth-child(11) { animation: float11 31s infinite; font-size: 17px !important; }
.floating-particles .particle:nth-child(12) { animation: float12 33s infinite; font-size: 14px !important; }
.floating-particles .particle:nth-child(13) { animation: float13 23s infinite; font-size: 13px !important; }
.floating-particles .particle:nth-child(14) { animation: float14 28s infinite; font-size: 15px !important; }
.floating-particles .particle:nth-child(15) { animation: float15 34s infinite; font-size: 16px !important; color: #9f4cff !important; }
.floating-particles .particle:nth-child(16) { animation: float16 25s infinite; font-size: 14px !important; color: #ff6b6b !important; }
.floating-particles .particle:nth-child(17) { animation: float17 30s infinite; font-size: 17px !important; }
.floating-particles .particle:nth-child(18) { animation: float18 26s infinite; font-size: 13px !important; color: #64ffda !important; }
.floating-particles .particle:nth-child(19) { animation: float19 32s infinite; font-size: 15px !important; }
.floating-particles .particle:nth-child(20) { animation: float20 28s infinite; font-size: 18px !important; color: #ffb347 !important; }

/* Particle floating animations - Directional movement */
@keyframes float1 {
	/* Left to Right */
	0% { transform: translate(0vw, 20vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 25vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(100vw, 30vh) rotate(360deg); opacity: 0; }
}

@keyframes float2 {
	/* Right to Left */
	0% { transform: translate(100vw, 60vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 65vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(0vw, 70vh) rotate(-360deg); opacity: 0; }
}

@keyframes float3 {
	/* Top to Bottom */
	0% { transform: translate(30vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(35vw, 50vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(40vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float4 {
	/* Bottom to Top */
	0% { transform: translate(70vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(65vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(60vw, 0vh) rotate(-360deg); opacity: 0; }
}

@keyframes float5 {
	/* Diagonal: Top-Left to Bottom-Right */
	0% { transform: translate(0vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 50vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(100vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float6 {
	/* Diagonal: Bottom-Left to Top-Right */
	0% { transform: translate(0vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(100vw, 0vh) rotate(-360deg); opacity: 0; }
}

@keyframes float7 {
	/* Left to Right (Lower path) */
	0% { transform: translate(0vw, 80vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.25; }
	50% { transform: translate(50vw, 75vh) rotate(180deg); }
	90% { opacity: 0.25; }
	100% { transform: translate(100vw, 70vh) rotate(360deg); opacity: 0; }
}

@keyframes float8 {
	/* Right to Left (Upper path) */
	0% { transform: translate(100vw, 40vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 35vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(0vw, 30vh) rotate(-360deg); opacity: 0; }
}

@keyframes float9 {
	/* Top to Bottom (Right side) */
	0% { transform: translate(80vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(75vw, 50vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(70vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float10 {
	/* Bottom to Top (Left side) */
	0% { transform: translate(20vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(25vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(30vw, 0vh) rotate(-360deg); opacity: 0; }
}

@keyframes float11 {
	/* Diagonal: Top-Right to Bottom-Left */
	0% { transform: translate(100vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 50vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(0vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float12 {
	/* Left to Right (Middle path) */
	0% { transform: translate(0vw, 50vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 45vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(100vw, 40vh) rotate(360deg); opacity: 0; }
}

@keyframes float13 {
	/* Right to Left (Lower Middle) */
	0% { transform: translate(100vw, 75vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 70vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(0vw, 65vh) rotate(-360deg); opacity: 0; }
}

@keyframes float14 {
	/* Top to Bottom (Left side) */
	0% { transform: translate(15vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(20vw, 50vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(25vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float15 {
	/* Bottom to Top (Right side) */
	0% { transform: translate(85vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.3; }
	50% { transform: translate(80vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.3; }
	100% { transform: translate(75vw, 0vh) rotate(-360deg); opacity: 0; }
}

@keyframes float16 {
	/* Right to Left (High path) */
	0% { transform: translate(100vw, 15vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 20vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(0vw, 25vh) rotate(-360deg); opacity: 0; }
}

@keyframes float17 {
	/* Top to Bottom (Center) */
	0% { transform: translate(50vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(45vw, 50vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(40vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float18 {
	/* Left to Right (Very low path) */
	0% { transform: translate(0vw, 90vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 85vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(100vw, 80vh) rotate(360deg); opacity: 0; }
}

@keyframes float19 {
	/* Diagonal: Middle-Left to Middle-Right */
	0% { transform: translate(0vw, 45vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 55vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(100vw, 65vh) rotate(360deg); opacity: 0; }
}

@keyframes float20 {
	/* Bottom to Top (Center) */
	0% { transform: translate(45vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(55vw, 0vh) rotate(-360deg); opacity: 0; }
}

/* Mobile responsive particles */
@media (max-width: 768px) {
	.floating-particles .particle {
		font-size: 12px !important;
		opacity: 0.15 !important;
	}
	.floating-particles .particle:nth-child(4),
	.floating-particles .particle:nth-child(7),
	.floating-particles .particle:nth-child(15),
	.floating-particles .particle:nth-child(16),
	.floating-particles .particle:nth-child(20) {
		opacity: 0.2 !important;
	}

	/* Mobile particle animations - smaller, faster movements */
	.floating-particles .particle:nth-child(1) { animation: float1Mobile 20s infinite; font-size: 8px !important; }
	.floating-particles .particle:nth-child(2) { animation: float2Mobile 25s infinite; font-size: 10px !important; }
	.floating-particles .particle:nth-child(3) { animation: float3Mobile 22s infinite; font-size: 9px !important; }
	.floating-particles .particle:nth-child(4) { animation: float4Mobile 28s infinite; font-size: 12px !important; color: #9f4cff !important; }
	.floating-particles .particle:nth-child(5) { animation: float5Mobile 18s infinite; font-size: 8px !important; }
	.floating-particles .particle:nth-child(6) { animation: float6Mobile 26s infinite; font-size: 10px !important; }
	.floating-particles .particle:nth-child(7) { animation: float7Mobile 21s infinite; font-size: 9px !important; color: #0ea5e9 !important; }
	.floating-particles .particle:nth-child(8) { animation: float8Mobile 19s infinite; font-size: 8px !important; }
	.floating-particles .particle:nth-child(9) { animation: float9Mobile 24s infinite; font-size: 10px !important; }
	.floating-particles .particle:nth-child(10) { animation: float10Mobile 20s infinite; font-size: 9px !important; }
	.floating-particles .particle:nth-child(11) { animation: float11Mobile 25s infinite; font-size: 11px !important; }
	.floating-particles .particle:nth-child(12) { animation: float12Mobile 27s infinite; font-size: 9px !important; }
	.floating-particles .particle:nth-child(13) { animation: float13Mobile 17s infinite; font-size: 8px !important; }
	.floating-particles .particle:nth-child(14) { animation: float14Mobile 23s infinite; font-size: 10px !important; }
	.floating-particles .particle:nth-child(15) { animation: float15Mobile 29s infinite; font-size: 11px !important; color: #9f4cff !important; }
	.floating-particles .particle:nth-child(16) { animation: float16Mobile 22s infinite; font-size: 9px !important; color: #ff6b6b !important; }
	.floating-particles .particle:nth-child(17) { animation: float17Mobile 26s infinite; font-size: 10px !important; }
	.floating-particles .particle:nth-child(18) { animation: float18Mobile 18s infinite; font-size: 8px !important; color: #64ffda !important; }
	.floating-particles .particle:nth-child(19) { animation: float19Mobile 24s infinite; font-size: 9px !important; }
	.floating-particles .particle:nth-child(20) { animation: float20Mobile 27s infinite; font-size: 12px !important; color: #ffb347 !important; }
}

/* Mobile particle animations - optimized for smaller screens with directional movement */
@keyframes float1Mobile {
	/* Left to Right - Mobile */
	0% { transform: translate(0vw, 20vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 25vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(100vw, 30vh) rotate(360deg); opacity: 0; }
}

@keyframes float2Mobile {
	/* Right to Left - Mobile */
	0% { transform: translate(100vw, 60vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 65vh) rotate(-180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(0vw, 70vh) rotate(-360deg); opacity: 0; }
}

@keyframes float3Mobile {
	/* Top to Bottom - Mobile */
	0% { transform: translate(30vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(35vw, 50vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(40vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float4Mobile {
	/* Bottom to Top - Mobile */
	0% { transform: translate(70vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(65vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(60vw, 0vh) rotate(-360deg); opacity: 0; }
}

@keyframes float5Mobile {
	/* Diagonal: Top-Left to Bottom-Right - Mobile */
	0% { transform: translate(0vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 50vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(100vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float6Mobile {
	/* Diagonal: Bottom-Left to Top-Right - Mobile */
	0% { transform: translate(0vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(100vw, 0vh) rotate(-360deg); opacity: 0; }
}

@keyframes float7Mobile {
	/* Left to Right (Lower path) - Mobile */
	0% { transform: translate(0vw, 80vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(50vw, 75vh) rotate(180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(100vw, 70vh) rotate(360deg); opacity: 0; }
}

@keyframes float8Mobile {
	/* Right to Left (Upper path) - Mobile */
	0% { transform: translate(100vw, 40vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 35vh) rotate(-180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(0vw, 30vh) rotate(-360deg); opacity: 0; }
}

@keyframes float9Mobile {
	/* Top to Bottom (Right side) - Mobile */
	0% { transform: translate(80vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(75vw, 50vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(70vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float10Mobile {
	/* Bottom to Top (Left side) - Mobile */
	0% { transform: translate(20vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(25vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(30vw, 0vh) rotate(-360deg); opacity: 0; }
}

@keyframes float11Mobile {
	/* Diagonal: Top-Right to Bottom-Left - Mobile */
	0% { transform: translate(100vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 50vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(0vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float12Mobile {
	/* Left to Right (Middle path) - Mobile */
	0% { transform: translate(0vw, 50vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 45vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(100vw, 40vh) rotate(360deg); opacity: 0; }
}

@keyframes float13Mobile {
	/* Right to Left (Lower Middle) - Mobile */
	0% { transform: translate(100vw, 75vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 70vh) rotate(-180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(0vw, 65vh) rotate(-360deg); opacity: 0; }
}

@keyframes float14Mobile {
	/* Top to Bottom (Left side) - Mobile */
	0% { transform: translate(15vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(20vw, 50vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(25vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float15Mobile {
	/* Bottom to Top (Right side) - Mobile */
	0% { transform: translate(85vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.2; }
	50% { transform: translate(80vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.2; }
	100% { transform: translate(75vw, 0vh) rotate(-360deg); opacity: 0; }
}

@keyframes float16Mobile {
	/* Right to Left (High path) - Mobile */
	0% { transform: translate(100vw, 15vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 20vh) rotate(-180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(0vw, 25vh) rotate(-360deg); opacity: 0; }
}

@keyframes float17Mobile {
	/* Top to Bottom (Center) - Mobile */
	0% { transform: translate(50vw, 0vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(45vw, 50vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(40vw, 100vh) rotate(360deg); opacity: 0; }
}

@keyframes float18Mobile {
	/* Left to Right (Very low path) - Mobile */
	0% { transform: translate(0vw, 90vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 85vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(100vw, 80vh) rotate(360deg); opacity: 0; }
}

@keyframes float19Mobile {
	/* Diagonal: Middle-Left to Middle-Right - Mobile */
	0% { transform: translate(0vw, 45vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 55vh) rotate(180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(100vw, 65vh) rotate(360deg); opacity: 0; }
}

@keyframes float20Mobile {
	/* Bottom to Top (Center) - Mobile */
	0% { transform: translate(45vw, 100vh) rotate(0deg); opacity: 0; }
	10% { opacity: 0.15; }
	50% { transform: translate(50vw, 50vh) rotate(-180deg); }
	90% { opacity: 0.15; }
	100% { transform: translate(55vw, 0vh) rotate(-360deg); opacity: 0; }
}

.skcode_video_button{
	max-width: 260px;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
}
.skcode_video_button .icon{
	min-width: 66px;
	width: 66px;
	height: 66px;
	position: relative;
	margin-right: 27px;
	border-radius: 50%;
	background-color: #9f4cff;
	transition: all .6s ease;
}
.skcode_video_button .icon .svg{
	position: absolute;
	width: 22px;
	height: 22px;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -8px;
	color: #fff;
}
.skcode_video_button .video_right{
	width: 100%;
}
.skcode_video_button span{
	display: block;
	font-size: 16px;
	line-height: 1.5;
	padding: 8px 0 9px;
	position: relative;
}
.skcode_video_button .top:after{
	content: '';
	right: 0;
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: #bfbfbf;
	height: 1px;
	transition: all .3s .3s ease;
}
.skcode_video_button .top:before{
	content: '';
	left: 0;
	width: 0;
	position: absolute;
	bottom: 0px;
	background-color: #bfbfbf;
	height: 1px;
	transition: all .3s ease;
}
.skcode_video_button:hover .top:after{
	width: 0;
	opacity: 0;
	transition: all .3s ease;
}
.skcode_video_button:hover .top:before{
	width: 100%;
	opacity: 1;
	transition: all .3s .3s ease;
}
.skcode_video_button:hover .icon{
	background-color: #0F172A;
}
.skcode_video_button .bottom{
	color: #9f4cff;
}
.skcode_video_button a{
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}




.skcode_title{
	max-width: 670px;
}
.skcode_title .sub_text{
	margin-bottom: 23px;
}
.skcode_title .sub_text span{
	display: inline-block;
	padding: 8px 18px;
	font-size: 14px;
	line-height: 21px;
	background-color: #fff;
	color: #9f4cff;
}
.skcode_title.bg_white .sub_text span{
	background-color: #0f1117;
}
.skcode_title .title{
	margin: 0;
	padding: 0;
	font-size: 60px;
	line-height: 1.5;
	margin-bottom: 20px;
}
.skcode_title .title span{
	color: #9f4cff;
}
.skcode_title .description{
	margin-bottom: 31px;
}
.skcode_title .skcode_button{
	margin-top: 9px;
}
.skcode_title > *:last-child{margin-bottom: 0;}
.skcode_button a{
	display: inline-block;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0em;
	text-align: center;
	padding: 14px 40px;
	text-decoration: none;
	color: #9f4cff;
	border: 2px solid #9f4cff;
	border-radius: 40px;
}
.skcode_button a:hover{
	background-color: #9f4cff;
	color: #fff;
}


/* Servisec */
.skcode_services{
	padding: 0px 0;
}
.skcode_services .content{
	display: flex;
	flex-direction: column;
}
.skcode_services .service_left{
	width: 100%;
	min-width: 100%;
	padding-right: 0;
	padding-bottom: 60px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.skcode_service_list{
	margin: 0;
	padding-top: 0;
	list-style-type: none;
}
.skcode_service_list > li{
	margin: 0;
	padding: 0;
	margin-bottom: 20px;
}
.skcode_service_list .service_item{
	width: 100%;
	border: 2px solid #0f1117;
	background-color: #fff;
	padding: 20px 60px 20px 20px;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	border-radius: 10px;
	transition: all .3s ease;
}
.skcode_service_list .service_item .content {
	flex: 1;
	margin-left: 60px;
}
.skcode_service_list .service_item .content h3{
	margin: 0 0 5px 0;
	padding: 0;
	font-weight: 500;
	font-size: 24px;
	font-family: 'Exo 2', sans-serif;
	color: #64ffda;
}
.skcode_service_list .service_item .content p{
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #ffffff;
}
.skcode_service_list .icon{
	position: absolute;
	display: block;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
}
.skcode_service_list .icon svg{
	width: 40px;
	display: block;
	height: 40px;
}
.skcode_service_list .arrow{
	position: absolute;
	right: 45px;
	top: 50%;
	transform: translateY(-50%);
}
.skcode_service_list .arrow .svg{
	width: 15px;
	display: block;
	height: 15px;
	stroke: #7e7e7e;
}
.skcode_service_list .service_item:hover{
	background-color: #0f1117;
}
.skcode_service_list .service_item:hover .arrow .svg{
	stroke: #9f4cff;
}

/* Cyberpunk Arrow Styles */
.cyberpunk-arrow {
	transition: all 0.3s ease;
	filter: drop-shadow(0 0 3px rgba(100, 255, 218, 0.5));
}

.skcode_service_list .service_item:hover .cyberpunk-arrow {
	transform: translateX(5px);
	filter: drop-shadow(0 0 8px rgba(159, 76, 255, 0.8));
}

.cyberpunk-arrow path {
	transition: all 0.3s ease;
}

.skcode_service_list .service_item:hover .cyberpunk-arrow path:first-child {
	animation: arrowPulse 1.5s infinite;
}

@keyframes arrowPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* Gradient hover effects */
.skcode_service_list .service_item:hover .cyberpunk-arrow #arrowGradient1 stop:first-child {
	stop-color: #ff0066;
}

.skcode_service_list .service_item:hover .cyberpunk-arrow #arrowGradient2 stop:first-child {
	stop-color: #ff0066;
}

.skcode_service_list .service_item:hover .cyberpunk-arrow #arrowGradient3 stop:first-child {
	stop-color: #ff0066;
}

.skcode_service_list .service_item:hover .cyberpunk-arrow #arrowGradient4 stop:first-child {
	stop-color: #ff0066;
}

/* Mobile Cyberpunk Arrow Positioning */
@media(max-width: 768px) {
	.skcode_service_list .arrow {
		right: 20px;
		bottom: 8px;
		top: auto;
		transform: none;
	}
	
	.skcode_service_list .service_item {
		padding-right: 60px;
		padding-bottom: 50px;
		min-height: 100px;
	}
	
	.cyberpunk-arrow {
		width: 20px !important;
		height: 20px !important;
	}
}

@media(max-width: 480px) {
	.skcode_service_list .arrow {
		right: 15px;
		bottom: 6px;
		top: auto;
		transform: none;
	}
	
	.skcode_service_list .service_item {
		padding-right: 50px;
		padding-bottom: 45px;
		min-height: 90px;
	}
	
	.cyberpunk-arrow {
		width: 18px !important;
		height: 18px !important;
	}
}





/* Information */
.skcode_information{
	background-color: transparent;
	padding: 0;
}
.skcode_information .content{
	width: 100%;
	float: left;
	clear: both;
}
.skcode_information .info_left{
	width: 50%;
	float: left;
	padding-right: 60px;
}
.skcode_information .info_left ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	margin-left: -40px;
}
.skcode_information .info_left li{
	margin: 0;
	padding: 0;
	width: 50%;
	float: left;
	padding-left: 40px;
	margin-bottom: 20px;
}
.skcode_information .info_left li:nth-child(2){
	margin-top: 20px;
}
.skcode_information .info_left .item{
	width: 100%;
	float: left;
	clear: both;
	padding: 40px 30px;
	text-align: center;
	background-color: #fff;
	border-radius: 10px;
}
.skcode_information .info_left .svg{
	width: 45px;
	height: 45px;
}
.skcode_information .info_left h3{
	font-family: 'Exo 2', sans-serif;
	font-size: 50px;
	font-style: normal;
	font-weight: 600;
	line-height: 75px;
	letter-spacing: 0em;
}
.skcode_counter{
	width: auto;
	float: none;
	clear: none;
}
.skcode_information .info_left h3 .suffix,
.skcode_information .info_left h3 .prefix{
	color: #9f4cff;
}
.skcode_information .info_left p{
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0em;
} 
.skcode_information .info_right{
	width: 50%;
	padding-left: 60px;
	float: left;
}
.skcode_information .skcode_title{
	margin-bottom: 54px;
}
.skcode_checklist ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.skcode_checklist li{
	position: relative;
	width: 100%;
	float: left;
	clear: both;
	margin: 0 0 27px 0;
	padding: 0 0 0 42px;
}
.skcode_checklist li:last-child{margin-bottom: 0;}
.skcode_checklist .icon{
	position: absolute;
	top: 5px;
	left: 0;
}
.skcode_checklist .svg{
	width: 22px;
	height: 22px;
	fill: none;
	display: block;
}
.skcode_checklist h3{
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0em;
	margin-bottom: 10px;
}
.skcode_checklist p{
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0em;
}






/* Technologies */
.skcode_technologies{
	padding: 80px 0;
	background-color: #fff;
}
.dark .skcode_technologies{
	background-color: #111319;
}
.skcode_technologies .content{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.tech_grid{
	margin-top: 60px;
	width: 100%;
}
.tech_items_all{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 25px;
	justify-items: center;
	max-width: 1000px;
	margin: 0 auto;
}
.tech_item{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 25px 20px;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	min-height: 120px;
	width: 100%;
}
.dark .tech_item{
	background: #2a2a2a;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.tech_item::before{
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
	transition: all 0.3s ease;
}
.tech_item:hover{
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.dark .tech_item:hover{
	box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3);
}
.tech_item:hover::before{
	left: 0;
}
.tech_item:hover .tech_icon{
	transform: scale(1.1);
	filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.6));
}
.tech_icon{
	font-size: 40px;
	margin-bottom: 15px;
	color: #667eea;
	transition: all 0.3s ease;
	position: relative;
	z-index: 2;
}
.tech_name{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	text-align: center;
	position: relative;
	z-index: 2;
	line-height: 1.3;
}
.dark .tech_name{
	color: #fff;
}
.tech_item[data-skill="Advanced"] .tech_icon{
	color: #28a745;
}
.tech_item[data-skill="Intermediate"] .tech_icon{
	color: #ffc107;
}
.tech_item[data-skill="Beginner"] .tech_icon{
	color: #6c757d;
}
.tech_item::after{
	content: attr(data-skill);
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 12px;
	opacity: 0;
	transition: all 0.3s ease;
	white-space: nowrap;
	z-index: 3;
}
.dark .tech_item::after{
	background: #fff;
	color: #333;
}
.tech_item:hover::after{
	opacity: 1;
	top: -35px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.tech_items_all{
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 20px;
	}
	.tech_item{
		padding: 20px 15px;
		min-height: 100px;
	}
	.tech_icon{
		font-size: 35px;
		margin-bottom: 10px;
	}
	.tech_name{
		font-size: 13px;
	}
}

/* Case Study */
.skcode_case_study{
	padding: 80px 0;
	background-color: #fff;
}
.dark .skcode_case_study{
	background-color: #111319;
}
.skcode_case_study .content{
	max-width: 1200px;
	margin: 0 auto;
}

/* Challenge Banner */
.challenge_banner{
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 15px;
	padding: 30px;
	margin: 60px 0;
	text-align: center;
	box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.challenge_content h4.project_name{
	color: #9f4cff;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 25px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.challenge_content h5{
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 15px;
	opacity: 0.9;
}
.challenge_content p{
	color: #fff;
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}

/* Approach Section */
.approach_section{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin: 60px 0;
}
.tech_stack_panel,
.solution_panel{
	padding: 30px;
	background: #f8f9fa;
	border-radius: 15px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.dark .tech_stack_panel,
.dark .solution_panel{
	background: #1a1a1a;
	box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.tech_stack_panel h4,
.solution_panel h4{
	font-size: 20px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
}
.dark .tech_stack_panel h4,
.dark .solution_panel h4{
	color: #fff;
}

/* Tech Flow */
.tech_flow{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
	align-items: center;
}
.tech_item_flow{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.tech_icon_flow{
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	transition: all 0.3s ease;
}
.tech_icon_flow:hover{
	transform: scale(1.1);
	box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.tech_icon_flow i{
	font-size: 24px;
	color: #fff;
}
.tech_item_flow span{
	font-size: 13px;
	font-weight: 500;
	color: #333;
	line-height: 1.3;
}
.dark .tech_item_flow span{
	color: #fff;
}

/* Results Banner */
.results_banner{
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: linear-gradient(135deg, #28a745, #20c997);
	border-radius: 15px;
	padding: 40px 20px;
	margin: 60px 0;
	box-shadow: 0 10px 30px rgba(40, 167, 69, 0.3);
}
.result_item{
	text-align: center;
	color: #fff;
}
.result_number{
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 5px;
}
.result_text{
	font-size: 16px;
	opacity: 0.9;
}
.result_divider{
	width: 2px;
	height: 60px;
	background: rgba(255,255,255,0.3);
}

/* Visuals Section */
.visuals_section{
	margin: 60px 0;
	text-align: center;
}
.visuals_section h4{
	font-size: 28px;
	font-weight: 600;
	color: #333;
	margin-bottom: 40px;
}
.dark .visuals_section h4{
	color: #fff;
}
.visual_grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
}
.visual_item{
	background: #f8f9fa;
	border-radius: 15px;
	padding: 60px 30px;
	text-align: center;
	transition: all 0.3s ease;
	cursor: pointer;
	border: 2px solid transparent;
}
.dark .visual_item{
	background: #1a1a1a;
}
.visual_item:hover{
	transform: translateY(-5px);
	border-color: #667eea;
	box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
}
.visual_placeholder i{
	font-size: 48px;
	color: #667eea;
	margin-bottom: 20px;
	display: block;
}
.visual_placeholder span{
	font-size: 18px;
	font-weight: 500;
	color: #333;
}
.dark .visual_placeholder span{
	color: #fff;
}

/* Visual Images */
.visual_image{
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	border-radius: 10px;
}
.visual_image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.visual_item:hover .visual_image img{
	transform: scale(1.05);
}
.image_overlay{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	padding: 20px;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}
.visual_item:hover .image_overlay{
	transform: translateY(0);
}
.image_overlay span{
	color: #fff;
	font-size: 16px;
	font-weight: 500;
}

/* Takeaways Section */
.takeaways_section{
	background: #f8f9fa;
	border-radius: 15px;
	padding: 40px;
	margin: 60px 0 0;
	text-align: center;
	border-left: 4px solid #667eea;
}
.dark .takeaways_section{
	background: #1a1a1a;
}
.takeaways_section h4{
	font-size: 24px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
}
.dark .takeaways_section h4{
	color: #fff;
}
.takeaways_section p{
	font-size: 16px;
	line-height: 1.7;
	color: #666;
	margin: 0;
}
.dark .takeaways_section p{
	color: #A9AFC3;
}

/* Animations */
@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Responsive Design */
@media (max-width: 768px) {
	.approach_section{
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.tech_flow{
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 15px;
	}
	.results_banner{
		flex-direction: column;
		gap: 30px;
	}
	.result_divider{
		width: 60px;
		height: 2px;
	}
	.visual_grid{
		grid-template-columns: 1fr;
	}
	.result_number{
		font-size: 28px;
	}
}
.skcode_portfolio{
	padding: 0;
}
.skcode_portfolio .skcode_title{
	margin-bottom: 20px;
}
.skcode_portfolio_slider .item{
	cursor: pointer;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}
.skcode_portfolio_slider .item img{
	min-width: 100%;
	opacity: 0;
}
.skcode_portfolio_slider .item .image{
	width: 100%;
	position: relative;
}
.skcode_portfolio_slider .item:hover .overlay_image{
	transform: scale(1.2);
}
.skcode_portfolio_slider .item:hover .overlay{
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
}
.skcode_portfolio_slider .item:hover .title_holder{
	top: 0;
}
.skcode_portfolio_slider .item .overlay{
	content: '';
	position: absolute;
	height: 100%;
	left: 0;
	right: 0;
	bottom: 100%;
	transition: all .4s ease;
	z-index: 1;
}
.skcode_portfolio_slider .item .title_holder{
	position: absolute;
	top: 100%;
	height: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30px;
	
	transition: all .8s ease;
}
.skcode_portfolio_slider .item .bckg{
	background-color: rgba(36, 33, 33, 0.767);
	border-radius: 40px 0 40px 0;
	padding-left:40px;
	/* padding-right: 30px; */
	padding-bottom: 10px;
}
.skcode_portfolio_slider .item .title_holder h3{
	margin: 0;
	padding: 0;
	font-family: 'Exo 2', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 27px;
	letter-spacing: 0em;
	color: #9f4cff;
	margin-bottom: 5px;
}
.skcode_portfolio_slider .item .title_holder p{
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0em;
	color: #A9AFC3;
}
.skcode_portfolio_slider .item .title_holder h3 > span{
	padding-right: 40px;
	position: relative;
}
.skcode_portfolio_slider .item .title_holder .svg{
	width: 20px;
	height: 20px;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -10px;
	fill: none;
}
.skcode_portfolio_slider .skcode_slider_in{
	margin-bottom: 43px;
}


/* Contact */
.skcode_contact{
	background-color: transparent;
	padding: 0;
}

/* Ensure contact section background consistency */
#contact {
	background-color: transparent;
}

.skcode_contact .container {
	background-color: transparent !important;
}

.skcode_contact .content {
	background-color: transparent !important;
}
.skcode_contact .skcode_title{
	margin-bottom: 20px;
	max-width: 670px;
}
.skcode_contact .contact_cols{
	width: 100%;
	display: flex;
	align-items: center;
}
.skcode_contact .contact_left{
	width: 50%;
	padding-right: 80px;
}
.skcode_contact .contact_left ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.skcode_contact .contact_left li{
	margin: 0;
	padding: 0;
	width: 100%;
	margin-bottom: 33px;
}
.skcode_contact .contact_left h3{
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0em;
	margin-bottom: 9px;
}
.skcode_contact .contact_left p{
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0em;
}
.skcode_contact .contact_left p a{
	color: #7e7e7e;
	text-decoration: none;
}
.skcode_contact .contact_left p a:hover{
	color: #9f4cff;
}
.skcode_contact .contact_right{
	width: 50%;
	padding: 45px 45px 60px 45px;
	background-color: transparent;
	border-radius: 15px;
	box-shadow: none;
	border: none;
}
.skcode_contact_form h3{
	margin: 0;
	padding: 0;
	font-family: 'Exo 2', sans-serif;
	font-size: 25px;
	font-style: normal;
	font-weight: 400;
	line-height: 41px;
	letter-spacing: 0em;
	margin-bottom: 8px;
}
.skcode_contact_form h4{
	margin: 0;
	padding: 0;
	font-family: 'Exo 2', sans-serif;
	font-size: 25px;
	font-style: normal;
	font-weight: 600;
	line-height: 41px;
	letter-spacing: 0em;
	color: #7E7E7E;
}
.skcode_contact_form textarea,
.skcode_contact_form input[type="text"],
.skcode_contact_form input[type="email"]{
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-style: normal;
	display: block;
	font-weight: 500;
	line-height: 21px;
	height: 62px;
	letter-spacing: -0.025em;
	text-align: left;
	padding: 20px 0;
	width: 100%;
	outline-color: transparent;
	outline: none;
	border: none;
	background: none;
	border-bottom: 1px solid #7E7E7E;
	transition: border-color 0.3s ease;
}
.skcode_contact_form textarea{
	height: 120px;
	resize: vertical;
	min-height: 80px;
}
.skcode_contact_form textarea:focus,
.skcode_contact_form input[type="text"]:focus,
.skcode_contact_form input[type="email"]:focus{
	background: none;
	border-bottom-color: #9f4cff;
}
.skcode_contact_form a{
	display: inline-block;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: center;
    padding: 8px 40px;
    text-decoration: none;
    color: #0F172A;
    border: 2px solid #7e7e7e;
    border-radius: 40px;
	overflow: hidden;
	position: relative;
	background-color: transparent;
}
.skcode_contact_form a:hover{
	border-color: #9f4cff;
	background-color: #9f4cff;
	color: #fff;
}
.skcode_contact_form a:hover:after{
	height: 100%;
}
.skcode_contact_form a:hover:before{
	top: 0;
}
.skcode_contact_form .item{
	margin-top: 40px;
}
.skcode_contact_form .item:first-child{
	margin-top: 20px;
}
.skcode_contact_form .item:last-child{
	margin-top: 60px;
}
.skcode_contact_form .empty_notice{
	color: #F52225;
	margin-bottom: 7px;
	display: none;
	text-align: left;
	font-weight: 500;
}
.skcode_contact_form .error{
	color: #F52225;
	text-align: left;
	font-weight: 500;
}
.skcode_contact_form .success{
	color:#3A00FF;
	margin-bottom: 7px;
	text-align: left;
	font-weight: 500;
}

/* Modern Contact Form Styles */
.modern-contact-form {
	display: flex;
	flex-direction: column;
	align-self: center;
	font-family: inherit;
	gap: 10px;
	padding: 2em;
	background-color: #0f1117;
	border-radius: 20px;
	position: relative;
}

.modern-contact-form .form-heading {
	text-align: center;
	margin: 1em 0 1.5em 0;
	color: #64ffda;
	font-size: 1.4em;
	font-weight: 600;
	background-color: transparent;
}

.modern-contact-form .form-field {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	border-radius: 10px;
	padding: 0.8em;
	border: none;
	outline: none;
	color: white;
	background-color: #0f1117 !important;
	box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
	margin-bottom: 8px;
}

.modern-contact-form .form-field:focus-within {
	background-color: #0f1117 !important;
	box-shadow: inset 2px 5px 10px rgb(5, 5, 5), 0 0 0 1px #64ffda;
}

.modern-contact-form .input-field {
	background: none !important;
	border: none;
	outline: none;
	width: 100%;
	color: #ccd6f6;
	padding: 0.5em 1em;
	font-size: 14px;
	font-family: inherit;
	background-color: transparent !important;
}

.modern-contact-form .input-field::placeholder {
	color: #8892b0;
	opacity: 0.8;
}

.modern-contact-form .input-field:focus {
	color: #64ffda !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.modern-contact-form .input-field:focus::placeholder {
	color: #64ffda;
	opacity: 0.6;
}

.modern-contact-form .input-field:active,
.modern-contact-form .input-field:hover {
	background: none !important;
	background-color: transparent !important;
}

.modern-contact-form .sendMessage-btn {
	cursor: pointer;
	margin: 1em 0 1.5em 0;
	padding: 1em 2em;
	border-radius: 10px;
	border: none;
	outline: none;
	background-color: transparent;
	color: #64ffda;
	font-weight: bold;
	font-size: 16px;
	border: 1px solid #64ffda;
	transition: all ease-in-out 0.3s;
	font-family: inherit;
}

.modern-contact-form .sendMessage-btn:hover {
	transition: all ease-in-out 0.3s;
	background-color: #64ffda;
	color: #0f1117;
	cursor: pointer;
	box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
	transform: translateY(-2px);
}

.form-card1 {
	background: linear-gradient(163deg, #64ffda 0%, #64ffda 100%);
	border-radius: 22px;
	transition: all 0.3s ease;
	padding: 2px;
	margin-top: 20px;
}

.form-card1:hover {
	box-shadow: 0px 0px 30px 1px rgba(100, 255, 218, 0.3);
}

.form-card2 {
	background-color: #0f1117;
	border-radius: 20px;
	transition: all 0.2s ease;
}

.form-card2:hover {
	transform: scale(0.98);
}

/* Override existing form styles for modern form */
.modern-contact-form .success {
	position: absolute;
	top: -40px;
	left: 0;
	right: 0;
	background-color: #64ffda;
	color: #0f1117;
	padding: 10px;
	border-radius: 10px;
	text-align: center;
	font-weight: 600;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 10;
}

.modern-contact-form .success.active {
	opacity: 1;
	visibility: visible;
	top: -50px;
}

.modern-contact-form .empty_notice {
	position: absolute;
	top: -40px;
	left: 0;
	right: 0;
	background-color: #9f4cff;
	color: white;
	padding: 10px;
	border-radius: 10px;
	text-align: center;
	font-weight: 600;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 10;
}

.modern-contact-form .empty_notice.active {
	opacity: 1;
	visibility: visible;
	top: -50px;
}

/* Responsive adjustments for modern form */
@media (max-width: 768px) {
	.modern-contact-form {
		padding: 1.5em;
		margin: 0;
	}
	
	.modern-contact-form .form-heading {
		font-size: 1.2em;
		margin: 0.5em 0 1em 0;
	}
	
	.modern-contact-form .form-field {
		padding: 0.6em;
		margin-bottom: 6px;
	}
	
	.modern-contact-form .input-field {
		padding: 0.4em 0.8em;
		font-size: 13px;
	}
	
	.modern-contact-form .sendMessage-btn {
		padding: 0.8em 1.5em;
		font-size: 14px;
		margin: 0.8em 0 1em 0;
	}
	
	.form-card1 {
		margin-top: 15px;
	}
	
	.contact_cols {
		flex-direction: column;
		gap: 40px;
		align-items: stretch;
	}
	
	.contact_left {
		order: 2;
		width: 100% !important;
		padding-right: 0 !important;
		text-align: center;
	}
	
	.contact_right {
		order: 1;
		width: 100% !important;
		padding-left: 0 !important;
	}

	.modern-contact-form {
		padding: 1.5em;
		margin: 0;
		max-width: 100%;
	}
	
	.modern-contact-form .form-heading {
		font-size: 1.2em;
		margin: 0.5em 0 1em 0;
	}
	
	.modern-contact-form .form-field {
		padding: 0.6em;
		margin-bottom: 6px;
	}
	
	.modern-contact-form .input-field {
		padding: 0.4em 0.8em;
		font-size: 13px;
	}
	
	.modern-contact-form .sendMessage-btn {
		padding: 0.8em 1.5em;
		font-size: 14px;
		margin: 0.8em 0 1em 0;
	}
	
	.form-card1 {
		margin-top: 0;
	}
}

/* Footer */

.skcode_footer{
	padding: 30px 0;
}
.skcode_footer .content{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.skcode_footer p{
	font-family: 'Poppins';
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0em;
}
.skcode_footer p a{
	text-decoration: none;
	color: #7E7E7E;
}
.skcode_footer p a:hover{
	color: #9f4cff;
}
.skcode_footer ul a{
	display: block;
	color: #7E7E7E;
	text-decoration: none;
}
.skcode_footer ul a .svg{
	width: 23px;
	height: 23px;
	stroke: #7e7e7e;
	display: block;
	fill: none;
	transition: all .3s ease;
}
.skcode_footer ul a:hover .svg{
	stroke: #9f4cff;
}
.skcode_footer ul{
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.skcode_footer ul li{
	margin: 0 0 0 20px;
	padding: 0;
}

/* Modern Social Media Buttons */
.share {
	display: flex;
	flex-direction: row;
	gap: 1em;
	transition: .4s ease-in-out;
	justify-content: center;
	align-items: center;
}

.btn1 {
	position: relative;
	width: 3em;
	height: 3em;
	outline: none;
	border: none;
	border-radius: 50%;
	background-color: #0f1117;
	border: 2px solid #64ffda;
	transition: .4s all;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn1 .instagram {
	margin-top: 0;
	fill: #E4405F;
	width: 20px;
	height: 20px;
}

.btn1 .tooltiptext1 {
	visibility: hidden;
	width: 6em;
	height: 8em;
	background-color: #0f1117;
	color: #64ffda;
	text-align: center;
	border-radius: 10px;
	padding: 1em;
	position: absolute;
	left: -1.5em;
	top: -8em;
	z-index: 1;
	transition: .2s ease-in-out;
	border: 1px solid #64ffda;
}

.btn1 .tooltiptext1 .card {
	width: 4em;
	height: 4em;
	background-color: #64ffda;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn1 .tooltiptext1 .account {
	margin-top: 0;
}

.btn1 .tooltiptext1 .username {
	font-size: 0.7em;
	margin-top: 1.6em;
	font-weight: bold;
}

.btn1:hover .tooltiptext1 {
	transform: translateY(-1em);
	visibility: visible;
}

.btn1:hover {
	background-color: #E4405F;
	border-color: #E4405F;
}

.btn1:hover .instagram {
	fill: white;
}

.btn2 {
	position: relative;
	width: 3em;
	height: 3em;
	outline: none;
	border: none;
	border-radius: 50%;
	background-color: #0f1117;
	border: 2px solid #64ffda;
	transition: .4s all;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn2 .facebook {
	margin-top: 0;
	fill: #1877F2;
	width: 18px;
	height: 18px;
}

.btn2 .tooltiptext2 {
	visibility: hidden;
	width: 6em;
	height: 8em;
	background-color: #0f1117;
	color: #64ffda;
	text-align: center;
	border-radius: 10px;
	padding: 1em;
	position: absolute;
	left: -1.5em;
	top: -8em;
	z-index: 1;
	transition: .2s ease-in-out;
	border: 1px solid #64ffda;
}

.btn2 .tooltiptext2 .card {
	width: 4em;
	height: 4em;
	background-color: #64ffda;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn2 .tooltiptext2 .account {
	margin-top: 0;
}

.btn2 .tooltiptext2 .username {
	font-size: 0.7em;
	margin-top: 1.6em;
	font-weight: bold;
}

.btn2:hover .tooltiptext2 {
	transform: translateY(-1em);
	visibility: visible;
}

.btn2:hover {
	background-color: #1877F2;
	border-color: #1877F2;
}

.btn2:hover .facebook {
	fill: white;
}

.btn3 {
	position: relative;
	width: 3em;
	height: 3em;
	outline: none;
	border: none;
	border-radius: 50%;
	background-color: #0f1117;
	border: 2px solid #64ffda;
	transition: .4s all;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn3 .git {
	fill: #64ffda;
	width: 18px;
	height: 18px;
}

.btn3 .tooltiptext3 {
	visibility: hidden;
	width: 6em;
	height: 8em;
	background-color: #0f1117;
	color: #64ffda;
	text-align: center;
	border-radius: 10px;
	padding: 1em;
	position: absolute;
	left: -1.5em;
	top: -8em;
	z-index: 1;
	transition: .2s ease-in-out;
	border: 1px solid #64ffda;
}

.btn3 .tooltiptext3 .card {
	width: 4em;
	height: 4em;
	background-color: #64ffda;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn3 .tooltiptext3 .account {
	margin-top: 0;
}

.btn3 .tooltiptext3 .username {
	font-size: 0.7em;
	margin-top: 1.6em;
	font-weight: bold;
}

.btn3:hover .tooltiptext3 {
	transform: translateY(-1em);
	visibility: visible;
}

.btn3:hover {
	background-color: #333;
	border-color: #333;
}

.btn3:hover .git {
	fill: white;
}

.btn4 {
	position: relative;
	width: 3em;
	height: 3em;
	outline: none;
	border: none;
	border-radius: 50%;
	background-color: #0f1117;
	border: 2px solid #64ffda;
	transition: .4s all;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn4 .linkedin {
	margin-top: 0;
	fill: #0077B5;
	width: 18px;
	height: 18px;
}

.btn4 .tooltiptext4 {
	visibility: hidden;
	width: 6em;
	height: 8em;
	background-color: #0f1117;
	color: #64ffda;
	text-align: center;
	border-radius: 10px;
	padding: 1em;
	position: absolute;
	left: -1.5em;
	top: -8em;
	z-index: 1;
	transition: .2s ease-in-out;
	border: 1px solid #64ffda;
}

.btn4 .tooltiptext4 .card {
	width: 4em;
	height: 4em;
	background-color: #64ffda;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn4 .tooltiptext4 .account {
	margin-top: 0;
}

.btn4 .tooltiptext4 .username {
	font-size: 0.7em;
	margin-top: 1.6em;
	font-weight: bold;
}

.btn4:hover .tooltiptext4 {
	transform: translateY(-1em);
	visibility: visible;
}

.btn4:hover {
	background-color: #0077B5;
	border-color: #0077B5;
}

.btn4:hover .linkedin {
	fill: white;
}



/* Mobile Menu */
.skcode_mobile_menu{
	width: 100%;
	height: auto;
	position: relative;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 10;
	box-shadow: 0px 5px 10px rgba(0,0,0,.05);
}
.skcode_mobile_menu .my_trigger{
	line-height: 1;
	position: relative;
}

/* New Animated Hamburger Menu */
.my_trigger .hamburger {
	cursor: pointer;
	display: block;
}

.my_trigger .hamburger input {
	display: none;
}

.my_trigger .hamburger svg {
	/* The size of the SVG defines the overall size */
	height: 2em;
	width: 2em;
	/* Define the transition for transforming the SVG */
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.my_trigger .hamburger .line {
	fill: none;
	stroke: #64ffda; /* Cyberpunk cyan color */
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
	/* Define the transition for transforming the Stroke */
	transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
		stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.my_trigger .hamburger .line-top-bottom {
	stroke-dasharray: 12 63;
}

.my_trigger .hamburger input:checked + svg {
	transform: rotate(-45deg);
}

.my_trigger .hamburger input:checked + svg .line-top-bottom {
	stroke-dasharray: 20 300;
	stroke-dashoffset: -32.42;
}

/* Remove old hamburger styles - replaced with new animated version */
.my_trigger .hamburger-box{
	display: none;
}

/* Mobile menu layout styles */
.skcode_mobile_menu .mobile_menu_inner{
	width: 100%;
	height: auto;
	float: left;
	clear: both;
	background-color: rgba(15, 17, 23, 0.95);
	backdrop-filter: blur(20px);
	padding: 8px 0px;
	border-bottom: 1px solid rgba(100, 255, 218, 0.3);
	position: relative;
	overflow: hidden;
}

.skcode_mobile_menu .mobile_menu_inner::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: -100%;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, #64ffda, #00bcd4, #64ffda, transparent);
	animation: cyberpunk-line-scan 3s infinite;
	box-shadow: 0 0 5px rgba(100, 255, 218, 0.5);
}

@keyframes cyberpunk-line-scan {
	0% {
		left: -100%;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

@keyframes cyberpunk-line-scan {
	0% {
		left: -100%;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}
.skcode_mobile_menu .mobile_in{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}
.skcode_mobile_menu .mobile_in .logo img{
	max-width: 100px;
}

.skcode_mobile_menu .dropdown{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: rgba(15, 17, 23, 0.98);
	backdrop-filter: blur(25px);
	box-shadow: 0px 5px 20px rgba(0,0,0,.2);
	display: none;
	border-top: 1px solid rgba(100, 255, 218, 0.2);
}
.skcode_mobile_menu .dropdown_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 15px 0;
}

/* Modern mobile menu buttons */
.skcode_mobile_menu .dropdown ul{
	width: fit-content;
	height: fit-content;
	background-color: transparent;
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

.skcode_mobile_menu .dropdown ul li{
	margin: 0px;
	padding: 0px;
	float: left;
	width: 100%;
	margin-bottom: 3px;
}

.skcode_mobile_menu .dropdown ul li:last-child{
	margin-bottom: 0;
}

.skcode_mobile_menu .dropdown ul li a{
	background-color: transparent;
	font-family: "Inter", sans-serif;
	color: rgb(255, 255, 255);
	border: none;
	font-size: 16px;
	font-weight: 500;
	padding: 10px 25px;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	text-align: left;
	transition: all 0.3s ease;
	z-index: 1;
	display: block;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
}

.skcode_mobile_menu .dropdown ul li a:hover {
	color: #0f1117;
	text-align: left;
}

.skcode_mobile_menu .dropdown ul li a:hover::before {
	transform: rotate(0deg);
	width: 100%;
	height: 45px;
	top: 0px;
	border-radius: 8px;
	background-color: #64ffda;
}

.skcode_mobile_menu .dropdown ul li a::before {
	content: "";
	border-radius: 2px;
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: #64ffda;
	left: 8px;
	top: 50%;
	transform: translateY(-50%) rotate(225deg);
	cursor: pointer;
	transition: 0.3s;
	z-index: -1;
}

.skcode_mobile_menu .dropdown ul li a:active::before {
	background-color: #4ade80;
}

/* Current/active menu item */
.skcode_mobile_menu .dropdown ul li.current a {
	color: #64ffda;
}

.skcode_mobile_menu .dropdown ul li.current a::before {
	background-color: #64ffda;
	width: 8px;
	height: 8px;
}

/* Intro CSS */
.skcode_full_link{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	display: block;
	z-index: 20;
}
.skcode_intro .hero{
	width: 100%;
	height: 100vh;
	float: left;
	position: relative;
}
.skcode_intro .hero:after{
	content: '';
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	background-color: #000;
}
.skcode_intro .hero .image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-repeat: repeat;
    opacity: .4;
	z-index: 3;
}
.skcode_intro .hero .content{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	padding: 0px 20px;
}
.skcode_intro .hero .content p{
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	padding: 45px 0px;
}
.skcode_intro .skcode_button a{
	color: #fff;
	background-color: #9f4cff;
}
.skcode_intro .skcode_button a:hover{
	color: #fff;
	background-color: transparent;
}
.skcode_intro .mainpart{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 120px;
}
.skcode_intro .main_title{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	text-align: center;
}
.skcode_intro .main_title span{
	color: #9f4cff;
	font-size: 16px;
	font-weight: 500;
	display: inline-block;
	margin-bottom: 6px;
}
.skcode_intro .main_title h3{
	font-size: 60px;
	font-weight: 700;
}
.skcode_intro .demo_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-top: 62px;
}
.skcode_intro .demo_list ul{
	margin: 0px 0px 0px -140px;
	list-style-type: none;
}
.skcode_intro .demo_list ul li{
	margin: 0px 0px 140px 0px;
	width: 50%;
	float: left;
	padding-left: 140px;
	text-align: center;
}
.skcode_intro .demo_list ul li .list_inner:hover{
	transform: translateY(-20px);
}
.skcode_intro .demo_list ul li .list_inner{
	width: 100%;
    height: auto;
    clear: both;
    float: left;
    position: relative;
    transition: all .3s ease;
    box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
    border-radius: 20px;
    overflow: hidden;
	padding-bottom: 70px;
}
.skcode_intro .demo_list ul li:nth-child(2) .list_inner{
	box-shadow: 0 5px 15px rgb(255 255 255 / 10%);
}
.skcode_intro .demo_list ul li:nth-child(2) .list_inner h3{
	color: #fff;
	background-color: #000;
}
.skcode_intro .demo_list ul li .list_inner h3{
	font-size: 20px;
	font-weight: 500;
	padding: 20px 0;
	font-family: 'Inter', sans-serif;
	position: absolute;
	left: 0;
	right: 0;
	background-color: #fff;
	color: #000;
	z-index: 5;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
 	transition: all .3s ease;
	height: 70px;
}
.skcode_intro .demo_list ul li .list_inner:hover h3{
	height: 100%;
	font-size: 26px;
}
.skcode_intro .go_purchase{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #151515;
	padding: 53px 20px 120px 20px;
	text-align: center;
}
.skcode_intro .go_purchase h3{
	font-size: 60px;
	font-weight: 700;
	color: #fff;
	margin: 43px;
}
.skcode_intro .copyright{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #1A1A1A;
	text-align: center;
	padding: 15px 20px;
}
.skcode_intro .copyright p{
	font-size: 14px;
	color: #FAF9FD;
}
.skcode_intro .copyright p a{
	color: #fff;
	text-decoration: none;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.skcode_intro .copyright p a:hover{
	color: #9f4cff;
}

body.intro #preloader:before,
body.intro #preloader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-color: #fff;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
body.intro #preloader:after{
    left: auto;
    right: 0;
}
body.intro .loader_line:before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 0%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #555;
    -webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
    -o-animation: lineheight 1000ms ease-in-out 0s forwards;
    animation: lineheight 1000ms ease-in-out 0s forwards;
}
body.intro .loader_line:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #ddd;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-animation: lineround 1200ms linear 0s infinite;
    -o-animation: lineround 1200ms linear 0s infinite;
    animation: lineround 1200ms linear 0s infinite;
    animation-delay: 2000ms;
}


/* some of experiments */
.skcode_information .info_left h3 .suffix,
.skcode_information .info_left h3 .prefix{
	color: inherit;
}
.skcode_portfolio_slider .item .title_holder p{
	color: #fff;
}

/* Responsive CSS */
@media(max-width: 1600px){
	body{font-size: 16px;}
	.container{max-width: 1170px;}
	.skcode_topbar .in{padding: 20px 0px;}
	.skcode_topbar.animate .in{padding: 15px 0px;}
	.skcode_topbar .logo img{max-width: 85px;}
	.skcode_topbar .menu .ccc{bottom: 6px;}
	.skcode_topbar ul li{margin-right: 25px;}
	.skcode_topbar ul li.button a{padding: 2px 22px;}
	.skcode_hero .title{font-size: 50px;line-height: 60px;margin-bottom: 25px;}
	.skcode_hero .description{margin-bottom: 30px;}
	.skcode_title .title{font-size: 50px;line-height: 1.2;}
	.skcode_title .sub_text{margin-bottom: 13px;}
	.skcode_button a{padding: 8px 30px;font-size: 16px;}
	.skcode_service_list .service_item{padding: 18px 35px 18px 18px;}
	.skcode_service_list .service_item .content {margin-left: 55px;}
	.skcode_service_list .service_item .content h3{font-size: 22px;}
	.skcode_service_list .service_item .content p{font-size: 15px;}
	.skcode_service_list > li{margin-bottom: 16px;}
	.skcode_service_list .icon{left: 20px;}
	.skcode_service_list .arrow{right: 20px;}
	.skcode_information .info_left h3{font-size: 40px;line-height: 55px;}
}
@media(max-width: 1200px){
	.skcode_modalbox.opened .box_inner{width: 600px;}
	.skcode_modalbox .close{margin-left: 20px;}
	.skcode_modalbox .modal_content{padding: 30px;}
}
@media(max-width: 1040px){
	.skcode_title{max-width: 100%;}
	.skcode_mobile_menu{display: block;}
	.skcode_topbar{display: none;}
	.container{padding: 0 20px;}
	.skcode_title .title,
	.skcode_hero .title{font-size: 40px;line-height: 1.3;}
	.skcode_hero .content_in{padding: 0 20px;}
	.skcode_button a{font-size: 16px;padding: 10px 30px;}
	.skcode_contact_form a{font-size: 16px;padding: 7px 30px;}
	.skcode_portfolio_slider .item .bckg{width: 100%; padding-left: 60px; background-color: rgba(22, 21, 21, 0.877);}
	.skcode_services .service_left{width: 100%;min-width: 100%;padding: 0 0 40px;}
	.skcode_services .content{flex-direction: column;}
	.skcode_services{padding: 0;}
	.skcode_service_list h3{font-size: 18px;}
	.skcode_information .info_left h3{font-size: 30px;}
	.skcode_information .info_left{width: 100%;padding: 0 0 30px;}
	.skcode_information .info_right{width: 100%;padding: 0;}
	.skcode_information{padding: 0;}
	.skcode_information .info_left li{padding-left: 20px;margin-bottom: 20px;}
	.skcode_information .info_left ul{margin-left: -20px;}
	.skcode_information .info_left li:nth-child(2){margin-top: 20px;}
	.skcode_information .skcode_title{margin-bottom: 34px;}
	.skcode_portfolio{padding: 0;}
	.skcode_portfolio .skcode_title{margin-bottom: 20px;}
	.skcode_contact .skcode_title{max-width: 100%;margin-bottom: 20px;}
	.skcode_contact .contact_left{width: 100% !important;padding: 0 !important;}
	.skcode_contact .contact_right{width: 100% !important;padding: 0 !important;}
	.skcode_contact .contact_cols{flex-direction: column !important; gap: 30px;}
	.skcode_contact .contact_left li{margin-bottom: 19px;}
	.skcode_contact{padding: 0;}
	.skcode_contact .contact_left h3{font-size: 16px;margin-bottom: 3px;line-height: 1.5;}
	.skcode_contact .contact_left p{font-size: 14px;line-height: 1.5;}
	/* Legacy form styles - keeping for compatibility */
	.skcode_contact_form h3{font-size: 20px;line-height: 1.5;margin-bottom: 5px;}
	.skcode_contact_form h4{font-size: 20px;line-height: 1.5;}
	
	/* No animation */
	.skcode_portfolio_slider .item .title_holder{top: 0;}
}
@media(max-width: 768px){
	body{font-size: 16px;}
	.skcode_modalbox.opened .box_inner{width: 500px;width: 88vw;}
	.skcode_modalbox .close .button {
		width: 46px;
		height: 46px;
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		box-shadow: none !important;
	}
	
	.skcode_modalbox .close .button-elem {
		width: 16px;
		height: 16px;
		margin: 14px 15px 0 15px;
	}
	
	@keyframes slideArrowsMobile {
		0%, 50% {
			transform: translateX(0);
		}
		25% {
			transform: translateX(-46px);
		}
		75%, 100% {
			transform: translateX(0);
		}
	}
	
	.skcode_modalbox .close .button-box {
		animation: slideArrowsMobile 2s ease-in-out infinite;
	}
	
	/* Remove hover pause on mobile - animation continues always */
	
	.skcode_modalbox .close .svg{display: none;}
	.skcode_modalbox .close{
		left: auto;
		right: 20px;
		top: 20px;
		width: 46px;
		height: 46px;
		margin-left: 0;
		cursor: pointer;
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		box-shadow: none !important;
		outline: none !important;
	}
	.skcode_testi_slider .title p{font-size: 16px;line-height: 1.5;}
	.skcode_footer .content{
		flex-direction: column;
	}
	.skcode_footer .footer_right{
		order: 1;
		margin-bottom: 20px;
	}
	.skcode_footer .footer_left{
		order: 2;
		margin-bottom: 0;
		text-align: center;
	}
	
	/* Mobile responsive for services philosophy */
	.services_philosophy {
		margin-top: 40px;
		padding: 25px 20px;
	}
	
	.philosophy_text {
		font-size: 16px;
		line-height: 1.5;
	}
	
	.philosophy_text:before {
		font-size: 40px;
		top: -15px;
		left: -10px;
	}
	
	.philosophy_text:after {
		font-size: 40px;
		bottom: -25px;
		right: -10px;
	}
	
	/* Mobile styling for modal content */
	.skcode_modalbox .modal_content {
		background: transparent !important;
		padding: 20px;
	}
	
	.skcode_modalbox .box_inner {
		background: transparent !important;
	}
	
	.skcode_modalbox .modal_in {
		background: transparent !important;
	}
	
	.skcode_modalbox .modal_in .description {
		padding: 25px 20px;
		border-radius: 15px;
		background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(159, 76, 255, 0.15)) !important;
		backdrop-filter: blur(25px);
		border: 1px solid rgba(0, 212, 255, 0.4);
	}
	
	.skcode_modalbox .modal_in .description h3 {
		font-size: 24px;
		margin-bottom: 20px;
	}
	
	.skcode_modalbox .modal_in .description > p {
		font-size: 16px;
		line-height: 1.6;
		margin-bottom: 30px;
	}
	
	.skcode_modalbox .modal_in .description h3:nth-of-type(2) {
		font-size: 20px;
		margin: 30px 0 20px 0;
	}
	
	.skcode_modalbox .modal_in .description .in_list ul li {
		padding: 12px 15px;
		margin-bottom: 12px;
		border-radius: 10px;
	}
	
	.skcode_modalbox .modal_in .description .in_list ul li p {
		font-size: 14px;
	}
	
	.skcode_modalbox .modal_in .description .in_list + p {
		font-size: 14px;
		padding: 15px;
		margin-top: 25px;
	}
	
	/* Mobile social buttons */
	.share {
		gap: 0.8em;
		margin-top: 15px;
	}
	
	.btn1, .btn2, .btn3, .btn4 {
		width: 2.5em;
		height: 2.5em;
	}
	
	.btn1 .tooltiptext1, 
	.btn2 .tooltiptext2, 
	.btn3 .tooltiptext3, 
	.btn4 .tooltiptext4 {
		width: 5em;
		height: 6em;
		left: -1em;
		top: -6.5em;
		padding: 0.8em;
		font-size: 0.8em;
	}
	
	.btn1 .tooltiptext1 .card, 
	.btn2 .tooltiptext2 .card, 
	.btn3 .tooltiptext3 .card, 
	.btn4 .tooltiptext4 .card {
		width: 3em;
		height: 3em;
	}
	
	.btn1 .tooltiptext1 .username, 
	.btn2 .tooltiptext2 .username, 
	.btn3 .tooltiptext3 .username, 
	.btn4 .tooltiptext4 .username {
		margin-top: 1em;
		font-size: 0.6em;
	}
	
	/* Remove old social styles for mobile */
	.skcode_footer ul a .svg{display: none;}
	.skcode_footer ul li:first-child{margin-left: 0;}
	.skcode_footer ul li{margin-left: 0;}
}
@media(max-width: 480px){
	.skcode_service_list .service_item{padding: 15px 20px 15px 15px;}
	.skcode_service_list .service_item .content {margin-left: 45px;}
	.skcode_service_list .service_item .content h3{font-size: 18px; margin-bottom: 4px;}
	.skcode_service_list .service_item .content p{font-size: 13px; line-height: 1.4;}
	.skcode_service_list > li{margin-bottom: 12px;}
	.skcode_service_list .icon{left: 15px;}
	.skcode_service_list .icon svg{width: 28px; height: 28px;}
	.skcode_service_list .arrow{right: 15px;}
	.skcode_service_list h3{width: 100%;}
	.skcode_service_list p{display: block;}
	.skcode_information .info_left li{width: 100%;}
	.skcode_information .info_left li:nth-child(2){margin-top: 0;}
	.container{padding: 0 10px;}
}
.txt-rotate{
	color:#9f4cff;
	display: inline-block;
	min-width: 180px;
	text-align: left;
}

/* Mobile text animation fix */
@media (max-width: 768px) {
	.txt-rotate {
		min-width: 150px;
	}
	
	.text-type-animation {
		display: block;
		width: 100%;
		overflow: hidden;
	}
	
	.skcode_hero .title .middle {
		display: block;
		min-height: 60px;
	}
}

/* Particules  */
  .dust {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
  }
  
  .particle {
	position: absolute;
	background-color: #ffffff;
	border-radius: 50%;
	opacity: 0.5;
	animation: moveDust 20s linear infinite;
  }
  
  @keyframes moveDust {
	0% {
	  transform: translateY(0) translateX(0) scale(1);
	  opacity: 0.5;
	}
	25% {
	  transform: translateY(-200px) translateX(50px) scale(0.8);
	  opacity: 0.3;
	}
	50% {
	  transform: translateY(-400px) translateX(100px) scale(1);
	  opacity: 0.5;
	}
	75% {
	  transform: translateY(-600px) translateX(50px) scale(0.8);
	  opacity: 0.3;
	}
	100% {
	  transform: translateY(-800px) translateX(0) scale(1);
	  opacity: 0.5;
	}
  }
  /* Astronaut */
  @keyframes astronaut {
	0% {
	  transform: rotate(0deg);
	}
  
	100% {
	  transform: rotate(360deg);
	}
  }
  .astronaut {
	width: 250px;
	height: 300px;
	position: absolute;
	z-index: -1;
	top: calc(50% - 150px);
	left: calc(80% - 125px);
	animation: astronaut 8s linear infinite;
  }
  @media (max-width: 1090px) {
	.astronaut {
		width: 250px;
		height: 300px;
		position: relative;
		z-index: -1;
		top: calc(50% - 150px);
		left: calc(50% - 125px);
		animation: astronaut 8s linear infinite;
	  }
	}
  .schoolbag {
	width: 100px;
	height: 150px;
	position: absolute;
	z-index: 1;
	top: calc(50% - 75px);
	left: calc(50% - 50px);
	background-color: #94b7ca;
	border-radius: 50px 50px 0 0 / 30px 30px 0 0;
  }
  
  .head {
	width: 97px;
	height: 80px;
	position: absolute;
	z-index: 3;
	background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
	border-radius: 50%;
	top: 34px;
	left: calc(50% - 47.5px);
  }
  
  .head:after {
	content: "";
	width: 60px;
	height: 50px;
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50% - 30px);
	background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);
	border-radius: 15px;
  }
  
  .head:before {
	content: "";
	width: 12px;
	height: 25px;
	position: absolute;
	top: calc(50% - 12.5px);
	left: -4px;
	background-color: #618095;
	border-radius: 5px;
	box-shadow: 92px 0px 0px #618095;
  }
  
  .body {
	width: 85px;
	height: 100px;
	position: absolute;
	z-index: 2;
	background-color: #fffbff;
	border-radius: 40px / 20px;
	top: 105px;
 left: calc(50% - 41px);
	background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
  }
  
  .panel {
	width: 60px;
	height: 40px;
	position: absolute;
	top: 20px;
	left: calc(50% - 30px);
	background-color: #b7cceb;
  }
  
  .panel:before {
	content: "";
	width: 30px;
	height: 5px;
	position: absolute;
	top: 9px;
	left: 7px;
	background-color: #fbfdfa;
	box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;
  }
  
  .panel:after {
	content: "";
	width: 8px;
	height: 8px;
	position: absolute;
	top: 9px;
	right: 7px;
	background-color: #fbfdfa;
	border-radius: 50%;
	box-shadow: 0px 14px 0px 2px #fbfdfa;
  }
  
  .arm {
	width: 80px;
	height: 30px;
	position: absolute;
	top: 121px;
	z-index: 2;
  }
  
  .arm-left {
	left: 30px;
	background-color: #e3e8eb;
	border-radius: 0 0 0 39px;
  }
  
  .arm-right {
	right: 30px;
	background-color: #fbfdfa;
	border-radius: 0 0 39px 0;
  }
  
  .arm-left:before,
  .arm-right:before {
	content: "";
	width: 30px;
	height: 70px;
	position: absolute;
	top: -40px;
  }
  
  .arm-left:before {
	border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;
	left: 0;
	background-color: #e3e8eb;
  }
  
  .arm-right:before {
	border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;
	right: 0;
	background-color: #fbfdfa;
  }
  
  .arm-left:after,
  .arm-right:after {
	content: "";
	width: 30px;
	height: 10px;
	position: absolute;
	top: -24px;
  }
  
  .arm-left:after {
	background-color: #6e91a4;
	left: 0;
  }
  
  .arm-right:after {
	right: 0;
	background-color: #b6d2e0;
  }
  
  .leg {
	width: 30px;
	height: 40px;
	position: absolute;
	z-index: 2;
	bottom: 70px;
  }
  
  .leg-left {
	left: 76px;
	background-color: #e3e8eb;
	transform: rotate(20deg);
  }
  
  .leg-right {
	right: 73px;
	background-color: #fbfdfa;
	transform: rotate(-20deg);
  }
  
  .leg-left:before,
  .leg-right:before {
	content: "";
	width: 50px;
	height: 25px;
	position: absolute;
	bottom: -26px;
  }
  
  .leg-left:before {
	left: -20px;
	background-color: #e3e8eb;
	border-radius: 30px 0 0 0;
	border-bottom: 10px solid #6d96ac;
  }
  
  .leg-right:before {
	right: -20px;
	background-color: #fbfdfa;
	border-radius: 0 30px 0 0;
	border-bottom: 10px solid #b0cfe4;
  }
  /* portfolio info */
  .portfolio-details .portfolio-info {
	padding: 30px;
	box-shadow: 0px 0 30px rgba(78, 78, 78, 0.08);
  }
  
  .portfolio-details .portfolio-info h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
  }
  
  .portfolio-details .portfolio-info ul {
	list-style: none;
	padding: 0;
	font-size: 15px;
  }
  
  .portfolio-details .portfolio-info ul li+li {
	margin-top: 10px;
  }

/* Active Builds Section Specific Styles */
.skcode_case_study .skcode_title{
	max-width: 100% !important;
	width: 100% !important;
	margin-bottom: 40px;
}
.skcode_case_study .skcode_title.bg_white{
	max-width: 100% !important;
	width: 100% !important;
}
.skcode_case_study .skcode_title .title,
.skcode_case_study .skcode_title.bg_white .title{
	font-size: 42px !important;
	line-height: 1.2 !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	margin-bottom: 25px;
	max-width: 100%;
	white-space: normal;
}

/* Visual Gallery for Active Builds */
.visual_gallery .img_list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-bottom: 30px;
}

.visual_gallery .img_list .visual_item{
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.visual_gallery .img_list .visual_item:hover{
	transform: translateY(-5px);
}

.visual_gallery .img_list .visual_item img{
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.visual_gallery .img_list .visual_item .overlay{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	color: white;
	padding: 20px;
	text-align: center;
}

/* Responsive styles for Active Builds title */
@media(max-width: 1040px){
	.skcode_case_study .skcode_title .title,
	.skcode_case_study .skcode_title.bg_white .title{
		font-size: 32px !important;
		line-height: 1.2 !important;
	}
}

@media(max-width: 768px){
	.skcode_case_study .skcode_title .title,
	.skcode_case_study .skcode_title.bg_white .title{
		font-size: 26px !important;
		line-height: 1.3 !important;
	}
	.visual_gallery .img_list{
		grid-template-columns: 1fr;
	}
}

/* 🔥 ELITE SOLUTIONS HUB BUTTON - CYBERPUNK MASTERPIECE 🔥 */
.skcode_topbar .menu ul li a[href="solutions-hub.html"],
.skcode_mobile_menu ul li a[href="solutions-hub.html"] {
	position: relative;
	background: linear-gradient(45deg, 
		rgba(159, 76, 255, 0.15), 
		rgba(100, 255, 218, 0.15),
		rgba(255, 0, 102, 0.15)
	);
	border: 2px solid transparent;
	border-radius: 12px;
	padding: 10px 20px !important;
	margin: 0 8px;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	backdrop-filter: blur(10px);
	box-shadow: 
		0 0 20px rgba(159, 76, 255, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Animated border effect */
.skcode_topbar .menu ul li a[href="solutions-hub.html"]::before,
.skcode_mobile_menu ul li a[href="solutions-hub.html"]::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, 
		#9f4cff, #64ffda, #ff0066, #00ff88, #9f4cff
	);
	background-size: 400% 400%;
	border-radius: 12px;
	z-index: -1;
	animation: gradientShift 3s ease infinite;
	opacity: 0.8;
}

/* Scanning line effect */
.skcode_topbar .menu ul li a[href="solutions-hub.html"]::after,
.skcode_mobile_menu ul li a[href="solutions-hub.html"]::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(100, 255, 218, 0.15), 
		transparent
	);
	border-radius: 12px;
	animation: scanLine 2s ease-in-out infinite;
	z-index: 0;
	pointer-events: none;
}

/* Hover state - EXPLOSIVE! */
.skcode_topbar .menu ul li a[href="solutions-hub.html"]:hover,
.skcode_mobile_menu ul li a[href="solutions-hub.html"]:hover {
	background: linear-gradient(45deg, 
		rgba(159, 76, 255, 0.3), 
		rgba(100, 255, 218, 0.3),
		rgba(255, 0, 102, 0.3)
	);
	color: #ffffff !important;
	text-shadow: 0 0 10px rgba(100, 255, 218, 0.8);
	transform: translateY(-3px) scale(1.05);
	box-shadow: 
		0 10px 30px rgba(159, 76, 255, 0.4),
		0 0 50px rgba(100, 255, 218, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.skcode_topbar .menu ul li a[href="solutions-hub.html"]:hover::before,
.skcode_mobile_menu ul li a[href="solutions-hub.html"]:hover::before {
	animation: gradientShiftFast 1s ease infinite, borderPulse 0.5s ease infinite alternate;
}

.skcode_topbar .menu ul li a[href="solutions-hub.html"]:hover::after,
.skcode_mobile_menu ul li a[href="solutions-hub.html"]:hover::after {
	animation: scanLineFast 0.8s ease infinite;
}

/* EPIC ANIMATIONS */
@keyframes gradientShift {
	0%, 100% { 
		background-position: 0% 50%;
	}
	50% { 
		background-position: 100% 50%;
	}
}

@keyframes gradientShiftFast {
	0%, 100% { 
		background-position: 0% 50%;
	}
	50% { 
		background-position: 100% 50%;
	}
}

@keyframes scanLine {
	0% { 
		left: -100%; 
		opacity: 0;
	}
	50% { 
		opacity: 0.6;
	}
	100% { 
		left: 100%; 
		opacity: 0;
	}
}

@keyframes scanLineFast {
	0% { 
		left: -100%; 
		opacity: 0;
	}
	50% { 
		opacity: 0.4;
	}
	100% { 
		left: 100%; 
		opacity: 0;
	}
}

@keyframes borderPulse {
	0% { 
		opacity: 0.8;
		transform: scale(1);
	}
	100% { 
		opacity: 1;
		transform: scale(1.02);
	}
}

/* Mobile optimizations */
@media(max-width: 1040px) {
	.skcode_mobile_menu ul li a[href="solutions-hub.html"] {
		margin: 8px 0;
		border-radius: 10px;
		padding: 12px 16px !important;
		font-size: 16px;
	}
}

@media(max-width: 480px) {
	.skcode_mobile_menu ul li a[href="solutions-hub.html"] {
		padding: 10px 14px !important;
		font-size: 14px;
		letter-spacing: 0.5px;
	}
}

/* 🚀 SOLUTIONS GRID - CYBERPUNK DESIGN 🚀 */
.solutions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
	margin-top: 50px;
	padding: 0 20px;
}

.solution-card {
	position: relative;
	background: linear-gradient(135deg, 
		rgba(15, 17, 23, 0.9), 
		rgba(159, 76, 255, 0.05)
	);
	border: 1px solid rgba(100, 255, 218, 0.2);
	border-radius: 15px;
	padding: 40px 30px;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(10px);
	overflow: hidden;
	cursor: pointer;
}

.solution-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, 
		rgba(159, 76, 255, 0.1), 
		rgba(100, 255, 218, 0.1),
		rgba(255, 0, 102, 0.1)
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 15px;
	z-index: 1;
}

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

.solution-card:hover {
	transform: translateY(-10px) scale(1.02);
	border-color: rgba(159, 76, 255, 0.6);
	box-shadow: 
		0 20px 40px rgba(159, 76, 255, 0.3),
		0 0 30px rgba(100, 255, 218, 0.2);
}

.solution-icon {
	position: relative;
	width: 80px;
	height: 80px;
	margin: 0 auto 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, 
		rgba(159, 76, 255, 0.2), 
		rgba(100, 255, 218, 0.2)
	);
	border-radius: 20px;
	transition: all 0.3s ease;
	z-index: 2;
}

.solution-icon i {
	font-size: 35px;
	color: #64ffda;
	transition: all 0.3s ease;
}

.solution-card:hover .solution-icon {
	background: linear-gradient(135deg, 
		rgba(159, 76, 255, 0.4), 
		rgba(100, 255, 218, 0.4)
	);
	transform: rotate(10deg) scale(1.1);
	box-shadow: 0 10px 25px rgba(100, 255, 218, 0.3);
}

.solution-card:hover .solution-icon i {
	color: #ffffff;
	text-shadow: 0 0 15px rgba(100, 255, 218, 0.8);
}

.solution-title {
	font-family: 'Exo 2', sans-serif !important;
	font-size: 20px;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
	position: relative;
	z-index: 2;
	transition: all 0.3s ease;
}

.solution-card:hover .solution-title {
	color: #64ffda;
	text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
}

/* Responsive Design */
@media(max-width: 768px) {
	.solutions-grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 20px;
		padding: 0 10px;
	}
	
	.solution-card {
		padding: 30px 20px;
	}
	
	.solution-icon {
		width: 70px;
		height: 70px;
		margin-bottom: 20px;
	}
	
	.solution-icon i {
		font-size: 30px;
	}
	
	.solution-title {
		font-size: 18px;
	}
}

@media(max-width: 480px) {
	.solutions-grid {
		grid-template-columns: 1fr 1fr;
		gap: 15px;
	}
	
	.solution-card {
		padding: 25px 15px;
	}
	
	.solution-icon {
		width: 60px;
		height: 60px;
		margin-bottom: 15px;
	}
	
	.solution-icon i {
		font-size: 25px;
	}
	
	.solution-title {
		font-size: 16px;
	}
}

/* 📱 SOLUTIONS HUB MOBILE SPACING OPTIMIZATION 📱 */
#solutions-hub {
	padding-top: 80px !important;
}

#solutions-hub .skcode_hero {
	padding-top: 40px !important;
}

@media(max-width: 768px) {
	#solutions-hub {
		padding-top: 10px !important;
	}
	
	#solutions-hub .skcode_hero {
		padding-top: 20px !important;
	}
}

@media(max-width: 480px) {
	#solutions-hub {
		padding-top: 5px !important;
	}
	
	#solutions-hub .skcode_hero {
		padding-top: 15px !important;
	}
}

/* 🏠 MAIN PAGE HOME SECTION SPACING OPTIMIZATION 🏠 */
#home {
	padding-top: 80px !important;
}

#home .skcode_hero {
	padding-top: 40px !important;
}

@media(max-width: 768px) {
	#home {
		padding-top: 10px !important;
	}
	
	#home .skcode_hero {
		padding-top: 20px !important;
	}
}

@media(max-width: 480px) {
	#home {
		padding-top: 5px !important;
	}
	
	#home .skcode_hero {
		padding-top: 15px !important;
	}
}

/* 📱 SMART NAVBAR - MOBILE SCROLL BEHAVIOR 📱 */
@media(max-width: 1024px) {
	/* MOBILE MENU behavior (hamburger menu) */
	.skcode_mobile_menu.navbar-hidden {
		transform: translateY(-100%) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Same timing as show */
	}
	
	.skcode_mobile_menu.navbar-visible {
		transform: translateY(0) !important;
		opacity: 1 !important;
		visibility: visible !important;
		transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Same timing as hide */
		animation: smoothDropDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	}
	
	/* Hide desktop topbar on mobile screens */
	.skcode_topbar {
		display: none !important;
	}
	
	/* Ensure mobile menu is properly positioned */
	.skcode_mobile_menu {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 9999 !important;
		width: 100% !important;
		background: rgba(0, 0, 0, 0.95) !important;
		backdrop-filter: blur(10px) !important;
		transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
		box-shadow: 0 4px 30px rgba(0, 212, 255, 0.3) !important;
		border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
		transform: translateY(0) !important; /* Default position */
	}
	
	/* Add top padding to body ONLY on mobile when mobile menu is fixed */
	body {
		padding-top: 80px !important; /* Adjust based on mobile menu height */
	}
	
	/* Ensure first section doesn't get hidden behind fixed navbar */
	#home, #solutions-hub {
		padding-top: 20px !important; /* Additional spacing for first sections */
	}
	
	/* Keyframe animations for smooth, elegant movement */
	@keyframes smoothDropDown {
		0% {
			transform: translateY(-100%);
			opacity: 0;
		}
		60% {
			transform: translateY(5px); /* Slight overshoot for bounce effect */
			opacity: 0.8;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	@keyframes smoothSlideUp {
		0% {
			transform: translateY(0);
			opacity: 1;
		}
		100% {
			transform: translateY(-100%);
			opacity: 0;
		}
	}
}

/* Desktop override - show desktop navbar, hide mobile menu */
@media(min-width: 1025px) {
	.skcode_topbar {
		display: block !important;
	}
	
	.skcode_mobile_menu {
		display: none !important;
	}
	
	/* Add proper padding for desktop fixed navbar */
	html body {
		padding-top: 120px !important; /* Desktop topbar is taller */
	}
	
	html body #home, 
	html body #solutions-hub {
		padding-top: 0 !important; /* Remove extra section padding on desktop */
	}
}

/* 📏 SOLUTIONS HUB SECTIONS SPACING OPTIMIZATION 📏 */
#web-development {
	padding: 5px 0 50px 0 !important;
}

#web-design,
#cybersecurity,
#software-solutions {
	padding: 50px 0 !important;
}

@media(max-width: 768px) {
	#web-development {
		padding: 5px 0 35px 0 !important;
	}
	
	#web-design,
	#cybersecurity,
	#software-solutions {
		padding: 35px 0 !important;
	}
}

@media(max-width: 480px) {
	#web-development {
		padding: 0px 0 25px 0 !important;
	}
	
	#web-design,
	#cybersecurity,
	#software-solutions {
		padding: 25px 0 !important;
	}
}