#loader{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:#050505;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:25px;

    z-index:999999;

    transition:opacity 0.8s ease,
               visibility 0.8s ease;
}

.loader-circle{

    width:90px;

    height:90px;

    border:2px solid rgba(0,255,255,0.25);

    border-top:2px solid #00ffff;

    border-radius:50%;

    animation:loaderSpin 1.5s linear infinite;

    box-shadow:
    0 0 25px rgba(0,255,255,0.25);
}

.loader-text{

    color:white;

    font-size:1rem;

    letter-spacing:4px;

    font-weight:600;
}
@keyframes loaderSpin{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(360deg);
    }
}

body{
	
	margin: 0;
	padding:0;
	
	background: linear-gradient(to right, #000000, #111111, #1a1a1a);
	color: white;
	
	font-family: Arial,sans-serif;
	
	scroll-behavior: smooth;
	opacity:1;

transition:opacity 0.35s ease;
}
body::before{
	
	content:"";
	
	position: fixed;
	
	width: 500px;
	height: 500px;
	
	background: rgba(255,255,255,0.05);
	
	border-radius: 50%;
	
	top: -100px;
	right: -100px;
	
	filter: blur(120px);
	
	z-index: -1;
		
}
body.fade-out{

    opacity:0;
}
#scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:2.5px;

    background:#c0c0c0;

    box-shadow:
    0 0 1px rgba(0,255,255,0.1);

    z-index:99999;

    transition:width 0.08s linear;
}

.main-container {
	width:100%;
	min-height: 100vh;
	
}

.navbar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	padding: 34px 80px;
}

.desktop-links a.active{

    color:#00ffff;
}




.logo{
	
	font-size:2.2rem;
	font-weight: 700;
	letter-spacing:2px;
	color:white;
	text-transform: uppercase;
}


.desktop-links{

    display:flex;

    gap:42px;
}

.desktop-links a{

    color:white;

    text-decoration:none;

    font-size:1rem;

    transition:0.3s ease;
}

.desktop-links a:hover{

    opacity:0.7;
}





.hamburger{

    display:none;

    font-size:32px;

    color:white;

    cursor:pointer;

    position:relative;

    z-index:5000;
}





.mobile-menu{

    position:fixed;

    top:0;

    right:0;



    width:100%;

    height:100vh;

    background:
    linear-gradient(
    135deg,
    #000000,
    #0a0f14,
    #000000
    );

    backdrop-filter:blur(12px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:35px;

 transition:
transform 0.65s cubic-bezier(0.22,1,0.36,1),
opacity 0.45s ease;
    z-index:2000;
    transform:translateX(100%);

    opacity:0;

    visibility:hidden;
}
.mobile-menu a{

    color:white;

    text-decoration:none;

    font-size:1.5rem;

    font-weight:600;

    letter-spacing:0.5px;

    transition:0.3s ease;
}

.mobile-menu a:hover{

    transform:translateY(-2px);
}


.mobile-menu.active{

    transform:translateX(0);

    opacity:1;

    visibility:visible;

    z-index:6000;
}



.close-btn{

    position:absolute;

    top:28px;

    right:32px;

    font-size:42px;

    color:white;

    cursor:pointer;

    transition:
transform 1s cubic-bezier(0.22,1,0.36,1),
opacity 0.8s ease;
}

.close-btn:hover{

    transform:rotate(90deg);
}

.hero-section{
	
	display:flex;
	
	justify-content: space-between;
	
	align-items: center;
	
	min-height: 100vh;
	
	padding: 0 80px;
	gap: 60px;
}

.hero-section h1 {

    font-size: 80px;
    

    margin-bottom: 15px;

}

.hero-section h1 span {

    color: gray;

}

.hero-section p {

    font-size: 28px;

    color: lightgray;

}

.hero-left {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    max-width: 600px;
    
    margin-top: -80px;

}

.hero-left h1{
	
	font-size: 82px;
	
	line-height: 1;
	
	margin-bottom: 0px;
	
	color: #f5f5f5;
	
}
.hero-left h1 span{
	
	color: #f5f5f5;
	
}

.hero-left p{
	
	font-size: 22px;
	
	line-height: 1.6;
	

	
	color:#19ffff;
	
	max-width: 420px;
	
	margin-bottom: 10px;
	
	margin-top: 0px;
		
}
.hero-button{
	
	display: inline-block;
	
	margin-top: 25px;
	
	padding: 16px 34px;
	
	width: fit-content;
	
	
	
	color: white;
	border:
   1px solid rgba(25,255,255,0.5);
	
	text-decoration: none;

    border-radius: 18px;
   
    font-size: 18px;

    font-weight: 700;

    transition:all 0.35s ease;
}
.hero-button:hover {

    
    
    box-shadow:
    0 0 30px rgba(25,255,255,0.3);

    transform: translateY(-5px);

}

.hero-right{
	
	width:50%;
	
	display: flex;
	
	justify-content: center;
	
	margin-top: -20px;
	
}

.profile-circle{
	
	width: 300px;
	
	height: 300px;
	
	border-radius: 35%;
	
	background: linear-gradient(
    to bottom right,
    #1f1f1f,
    #353535
);
	
	display: flex;
	
	justify-content: center;
	
	align-items: center;
	
	font-size: 32px;
	
	font-weight: 600;
	
	box-shadow:
            0 0 18px rgba(255,255,255,0.06),
            0 0 40px rgba(255,255,255,0.04);
    
    border: 1px solid rgba(255,255,255,0.05);

     transition: 0.4s;
	
	overflow: hidden;
	
}

.profile-circle:hover {

    transform: scale(1.03);

}

.profile-circle img{
	
	width:  100%;
	
	height: 100%;
	
	object-fit: cover;
	
	object-position: center top;
	
	transition: 0.4s ease;
	
}

.profile-circle:hover img {

    transform: scale(1.05);

}

.about-container{
	
	padding:120px 80px;
	
	min-height: 100vh;
}

.about-hero{
	
	  max-width: 800px;
}
.about-hero h1{
	
	font-size: 64px;
	
	margin-bottom: 25px;
}
.about-hero p{
	
	max-width: 900px;
	 line-height: 1.9; 
	color: rgba(255,255,255,0.72);
	
	 font-size: 20px;
	 
	
	 
	
}

.current-journey{
	
	 margin-top: 140px;
	 
	 max-width: 850px;
}

.current-journey h2{
	
	font-size: 42px;
	
	margin-bottom:30px;
	
}

.current-journey p{
	
	font-size: 19px;
	
	line-height: 1.9;
	
	color: rgba(255,255,255,0.72);
	
	margin-bottom: 25px;
}

.focus-section{
	
    margin-top:160px;
	
}

.focus-section h2{
	
	font-size: 42px;
	
	margin-bottom: 60px;
}

.focus-grid{
	
	display:grid;
	
	grid-template-columns:repeat(2,1fr);
	
	gap:35px;
}

 .focus-card{
 
  padding: 35px;
  
  border: 1px solid rgba(25,255,255,0.10);
  
  border-radius:28px;
  
  background: linear-gradient(
  145deg,
  rgba(255,255,255,0.05),
  rgba(255,255,255,0.15)
  );
  
  backdrop-filter: blur(14px);
  
  box-shadow:
    0 0px 25px rgba(255,255,255,0.03),
    0 10px 30px rgba(0,0,0,0.35);
  
  transition:
   transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
    
    overflow : hidden;
    
    position : relative;
  
 }

.focus-card:hover{
	
	transform:translateY(-10px);
	
	border-color: rgba(255,255,255,0.18);
	
	box-shadow:
	0 18px 40px rgba(0,0,0,0.45),
	0 0 20px rgba(25,255,255,0.3)
	;
	
}

.focus-card h3{
	
	font-size:24px;
	
	margin-bottom:20px;
	
}

.focus-card p{
	
	color: #bdbdbd;
	
	line-height:1.8;
	
	font-size: 17px;
	
	
}

.journey-section {

    margin-top: 180px;

    position: relative;

}

.journey-section::before{
	
	content: "";
	
	position: absolute;
	
	width:420px;
	
	height:420px;
	
	background: rgba(255,255,255,0.04);
	
	filter: blur(120px);
	
	top: 120px;
	
	left:-120px;
	
	z-index: -1;
	
	
}

.journey-section h2{
	
	font-size: 42px;
	
	margin-bottom: 70px;
	
}

.journey-container{
	
	display: flex;
	
	flex-direction: column;
	
	gap:60px;
	
	
}

.journey-item{
	
	display: flex;
	
	align-items: flex-start;
	
	gap: 30px;
	
}


.journey-line{
	
	width: 3px;
	
	min-height: 140px;
	
	background: rgba(255,255,255,0.15);
	
	border-radius: 50px;
}

.journey-dot {
	
	width: 16px;
	
	height: 16px;
	
	background: rgba(255,255,255,0.75);
	
	border-radius: 50%;
	
	display: block;
	
	margin-left: -6px;
	
	box-shadow:
	      0 0 12px rgba(255,255,255,0.45);
	      
	      transition:
	      transform 0.3s ease,
	      box-shadow 0.3s ease;
	
}

.journey-item:hover .journey-dot{
	
	transform:scale(1.25);

	box-shadow:
	0 0 12px rgba(255,255,255,0.75);
}
.journey-content{
	
	max-width:700px;
}

.journey-content h3{
	
	font-size:28px;
	
	margin-bottom: 18px;
	
}

.journey-content p{
	
	color:#bdbdbd;
	
	line-height: 1.9;
	
	font-size:18px;
}
	
	
.section-title{
	
	font-size:72px;
	
	font-weight: 700;
	
	 line-height: 1.1;
	 
	 letter-spacing:-2px;
	 
	 position: relative;
	 
	 display: inline-block;
	 
}

.section-title::after{
	
	content: "";
	
	position:absolute;
	
	bottom: -18px;
	
	width:120px;
	
	height:2px;
	
	background: linear-gradient(
	to right,
	rgba(25,255,255,0.9),
	transparent
	);
	
}

.about-closing{
	
	padding:180px 80px;
	
	text-align:center;
	
	position:relative;
}

.about-closing h2{

    font-size:64px;

    margin-bottom:30px;

}


.about-closing p{
	
	   max-width:750px;
	   
	   margin:auto;
	   
	   font-size:20px;
	   
	   line-height:1.8;
	   
	   color:#b8b8b8;
	   
}

.closing-btn{
	display:inline-block;
	
	margin-top:50px;
	
	padding:18px 42px;
	
	border:1px solid rgba(25,255,255,0.25);
	
	border-radius:50px;
	
	color:white;
	
	text-decoration:none;
	
	transition:all 0.35s ease;
	
}
.closing-btn:hover{

    transform:translateY(-5px);

    background:rgba(25,255,255,0.06);

    box-shadow:
    0 0 30px rgba(25,255,255,0.08);
}

.skills-hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding:90px 0 50px;
}



.skills-left{

    max-width:620px;

    position:relative;

    z-index:5;
}



.skills-left h1{

    font-size:84px;

    line-height:0.94;

    font-weight:700;

    letter-spacing:-3px;

    margin-bottom:28px;

    color:#f5f5f5;
}



.skills-left h1 span{

    color:#00edf5;

    text-shadow:
    0 0 12px rgba(25,255,255,0.08);
}



.skills-left p{

    font-size:22px;

    line-height:1.9;

    color:#9f9f9f;

    max-width:560px;

    margin-top:12px;
}




.skills-visual{

    position:relative;

    width:520px;

    height:520px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-left:90px;

    margin-top:-160px;
}



.ecosystem-ring{

    position:absolute;

    width:430px;

    height:430px;

    border-radius:50%;

    border:
    1.5px solid rgba(25,255,255,0.20);
     box-shadow:
      0 0 22px rgba(25,255,255,0.05);
    

    z-index:1;
}



.orbit{

    position:absolute;

    width:104px;

    height:104px;

    border-radius:50%;

   background:
   rgba(255,255,255,0.018); 
   border:
   1px solid rgba(255,255,255,0.045);

    backdrop-filter:blur(12px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:3;

    transition:0.35s ease;
}



.orbit img{

    width:44px;

    height:44px;

    object-fit:contain;

    opacity:0.92;

    transition:0.35s ease;

    filter:drop-shadow(0 0 5px rgba(0,255,255,0.12));
}



.orbit:hover{


    border-color:rgba(25,255,255,0.18);

   transform:scale(1.08);
    box-shadow: 
    0 0 30px rgba(25,255,255,0.10);
}



.orbit:hover img{

   filter: drop-shadow(0 0 14px rgba(25,255,255,0.34));
    transform:scale(1.08);
}



.orbit-top{

    top:-12px;

    left:50%;

    transform:translateX(-50%);
}



.orbit-right{

left:50%;
    top:50%;

    transform:
    translate(160px,-50%);
}



.orbit-bottom{

    bottom:-12px;

    left:50%;

    transform:translateX(-50%);
}



.orbit-left{

   left:50%;
    top:50%;

    transform:
    translate(-260px,-50%);
}



.processor-core{

    position:relative;

    width:300px;

    height:300px;

    display:flex;

    justify-content:center;

    align-items:center;
    
    border:2px solid rgba(25,255,255,0.38);

    z-index:5;
}



.processor-core::before{ 
	content:""; 
	position:absolute;
	 width:270px;
	  height:270px; 
	  border-radius:42px; 
	  border:2px solid rgba(25,255,255,0.34); 
	  box-shadow: 0 0 14px rgba(25,255,255,0.03);
	   z-index:1;
	    left:50%;
	     top:50%; 
	     transform:translate(-50%,-50%); }


.core-inner{

    position:relative;

    width:82px;

    height:82px;

    border-radius:26px;


    background:rgba(25,255,255,0.02);

  border:
  2px solid rgba(25,255,255,0.78);
   box-shadow: 
  0 0 10px rgba(25,255,255,0.06);

    z-index:5;
}



.core-inner::before{

    content:"";

    position:absolute;

    width:16px;

    height:16px;

    border-radius:50%;

    background:#00f7ff;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    box-shadow:
    0 0 10px rgba(25,255,255,0.18);
}



.connector{

    position:absolute;

    background:rgba(25,255,255,0.72);

    box-shadow:
    0 0 8px rgba(25,255,255,0.08);
}



.connector.top{

    width:3px;

    height:118px;

    top:20px;

    left:50%;

    transform:translateX(-50%);
}



.connector.right{

    width:118px;

    height:3px;

    right:20px;

    top:50%;

    transform:translateY(-50%);
}



.connector.bottom{

    width:3px;

    height:118px;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);
}



.connector.left{

    width:118px;

    height:3px;

    left:20px;

    top:50%;

    transform:translateY(-50%);
}



.connector::after{

    content:"";

    position:absolute;

    width:20px;

    height:20px;

    border-radius:50%;

    background:#19ffff;

    box-shadow:
    0 0 12px rgba(25,255,255,0.18);
}



.connector.top::after{

    top:-10px;

    left:50%;

    transform:translateX(-50%);
}



.connector.right::after{

    right:-10px;

    top:50%;

    transform:translateY(-50%);
}



.connector.bottom::after{

    bottom:-10px;

    left:50%;

    transform:translateX(-50%);
}



.connector.left::after{

    left:-10px;

    top:50%;

    transform:translateY(-50%);
}



.pin-group{

    position:absolute;

    display:flex;

    gap:14px;
}



.pin-group span{

    background:rgba(25,255,255,0.42);
}



.top-pins{

    top:54px;

    left:50%;

    transform:translateX(-50%);
}



.top-pins span{

    width:3px;

    height:26px;
}



.right-pins{

    right:54px;

    top:50%;

    transform:translateY(-50%);

    flex-direction:column;
}



.right-pins span{

    width:26px;

    height:3px;
}



.bottom-pins{

    bottom:54px;

    left:50%;

    transform:translateX(-50%);
}



.bottom-pins span{

    width:3px;

    height:26px;
}



.left-pins{

    left:54px;

    top:50%;

    transform:translateY(-50%);

    flex-direction:column;
}



.left-pins span{

    width:26px;

    height:3px;
}


.skills-grid-section{

    padding:140px 0 120px;
}



.skills-grid-title{

    margin-bottom:70px;
}



.skills-grid-title h2{

    font-size:64px;

    font-weight:700;

    color:#f5f5f5;

    margin-bottom:18px;
}



.skills-grid-title p{

    font-size:20px;

    line-height:1.8;

    color:#9a9a9a;

    max-width:560px;
}



.skill-category{

    margin-bottom:70px;
}



.skill-category h3{

    font-size:28px;

    color:#efefef;

    margin-bottom:34px;

    text-transform:uppercase;

    letter-spacing:2px;
}



.skills-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:26px;

    align-items:start;
}

.skill-box{

    position:relative;
    width:280px;
    min-height:115px;

    padding:22px;

    border-radius:20px;

    background:
    linear-gradient(
    145deg,
    rgba(25,255,255,0.02),
    rgba(25,255,255,0.015)
    );
   
    border:1px solid
    rgba(25,255,255,0.25);

    backdrop-filter:blur(10px);
    
    box-shadow: 0 0 0 rgba(25,255,255,0); 

    transition:0.35s ease;

    overflow:hidden;
}



.skill-box:hover{

    transform:translateY(-6px);

    border:
    1px solid rgba(25,255,255,0.22);
     box-shadow:
     0 0 26px rgba(25,255,255,0.10);
}




.skill-box-top{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;
}



.skill-box-top img{

    width:42px;

    height:42px;

    object-fit:contain;

    filter:
    drop-shadow(0 0 10px rgba(25,255,255,0.10));

    transition:0.35s ease;
}



.skill-box:hover img{

    filter:
    drop-shadow(0 0 14px rgba(25,255,255,0.22));

    transform:scale(1.05);
}
.skill-box::before{

    content:"";

    position:absolute;

    top:0;

    left:22px;

    width:80px;

    height:1px;

    background:
    linear-gradient(
    to right,
    rgba(25,255,255,0.55),
    transparent
    );

    opacity:0;

    transition:0.35s ease;
}



.skill-box:hover::before{

    opacity:1;
}



.skill-info h4{

    font-size:24px;

    margin-bottom:4px;

    color:#f5f5f5;
}



.skill-info p{

    margin:0;

    font-size:14px;

    letter-spacing:1px;

    color:#8d8d8d;
}




.skill-level{

    display:flex;

    gap:9px;
}



.skill-level span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:
    rgba(255,255,255,0.10);

    transition:0.3s ease;
}





.skill-level span.active{

    background:#19ffff;

    box-shadow:
    0 0 1px rgba(25,255,255,0.18);
}





.skill-box:hover .skill-level span.active{

    box-shadow:
    0 0 14px rgba(25,255,255,0.35);
}



.skills-cta{
    padding: 90px 0 40px;
}

.skills-cta-box{
    text-align: center;
    padding: 60px 40px;
    border-radius: 30px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
}

.skills-cta-box h2{
    font-size: 42px;
    color: #f5f5f5;
    margin-bottom: 20px;
    font-weight: 700;
}

.skills-cta-box p{
    color: #9e9e9e;
    max-width: 750px;
    margin: auto;
    line-height: 1.8;
    font-size: 17px;
}

.skills-cta-btn{
    display: inline-block;
    margin-top: 30px;
    padding: 14px 34px;
    
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s ease;
}

.skills-cta-btn:hover{
    transform: translateY(-5px);
    box-shadow: 0 0 5px rgba(255,255,255,0.01);
}





.future-learning-section{
    margin-top: 90px;
}

.future-box{
    position: relative;
    opacity: 0.75;
    border: 1px dashed rgba(25,255,255,0.18);
}

.future-box:hover{
    opacity: 1;
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(25,255,255,0.14);
}

.future-badge{
    position: absolute;
    top: 15px;
    right: 18px;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 30px;
    background: rgba(255,255,255,0.12);
    color: white;
    letter-spacing: 1px;
    font-weight: 600;
}



.skill-box,
.future-roadmap-card,
.learning-banner {
    transition: all 0.4s ease;
}


.skill-box:hover,
.future-roadmap-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #00f7ff;
    box-shadow:
        0 0 20px rgba(0, 247, 255, 0.25),
        0 0 40px rgba(0, 247, 255, 0.08);
}


.skill-box img,
.future-roadmap-card img {
    transition: transform 0.4s ease;
}

.skill-box:hover img,
.future-roadmap-card:hover img {
    transform: scale(1.12) rotate(3deg);
}


.skill-category h3 {
    position: relative;
    display: inline-block;
}

.skill-category h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60%;
    height: 2px;
    background: #00f7ff;
    box-shadow: 0 0 10px #00f7ff;
}


.skills-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 42px;
    border-radius: 50px;
    color:white;
    font-size: 1rem;
     border:
       1px solid  rgba(25,255,255,0.35);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.35s ease;
    
}

.skills-cta-btn:hover {
	
	   box-shadow:
    0 0 28px rgba(25,255,255,0.35);
    transform: translateY(-4px) ;
     
   
}


.reveal{
	opacity:0;
	transform:translateY(40px);
	transition:all 0.8s ease;
}

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


.skill-box:nth-child(1) {
    animation-delay: 0.1s;
}

.skill-box:nth-child(2) {
    animation-delay: 0.2s;
}

.skill-box:nth-child(3) {
    animation-delay: 0.3s;
}

.skill-box:nth-child(4) {
    animation-delay: 0.4s;
}

.skill-box:nth-child(5) {
    animation-delay: 0.5s;
}


.project-hero{
	
	min-height:100vh;
	display:flex;
	align-items:center;
	padding-top:140px;
	position:relative;
}
.project-left h1 {
	font-size:5.2rem;
	line-height:0.95;
	font-weight:700;
	color:white;
	letter-spacing:-2px;}
	
	
	
.project-left p{
	margin-top:28px;
	max-width:560px;
	font-size:1.05rem;
	line-height:1.9;
	color:#9ca3af;
}

.command-center{

    width:100%;
    max-width:520px;
    padding:34px;
    border-radius:32px;
    background:
    rgba(255,255,255,0.03);
    border:
    1px solid rgba(255,255,255,0.06);
    backdrop-filter:blur(18px);
    box-shadow:
    0 0 40px rgba(0,240,255,0.05);
    position:relative;
    overflow:hidden;
}
.command-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:28px;
}
.system-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background: #00ffaa;
    box-shadow:
    0 0 18px rgba(0,240,255,0.5);
}
.command-header h3{
    color:white;
    font-size:1rem;
    letter-spacing:2px;
    margin:0;
}
.command-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.command-card{
    padding:24px;
    border-radius:24px;
    background:
    rgba(255,255,255,0.025);
    border:
    1px solid rgba(255,255,255,0.05);
    transition:0.35s ease;
}
.command-card:hover{
    transform:translateY(-6px);
    border-color:
    rgba(25,240,255,0.18);
    box-shadow:
    0 0 24px rgba(25,240,255,0.08);
}
.command-card p{
    color:white;
    margin-bottom:16px;
    font-size:0.95rem;
}
.command-card span{
    font-size:0.78rem;
    padding:8px 14px;
    border-radius:999px;
    letter-spacing:1px;
    font-weight:600;
}
.active-status{
    background:
    rgba(25,255,255,0.12);
    color:#19ffff;
}
.online-status{
    background:
    rgba(0,255,170,0.10);
    color:#00ffaa;
}
.running-status{
    background:
    rgba(255,200,0,0.10);
    color:#ffd000;
}
.locked-status{
    background:
    rgba(255,80,80,0.10);
    color:#ff6b6b;
}

.featured-project-section{

    padding:110px 0 100px;
}



.section-heading{

    text-align:center;

    margin-bottom:90px;
}


.section-heading h2{

    font-size:3.5rem;

    color:white;

    margin-bottom:18px;
}



.section-heading p{

    max-width:720px;

    margin:auto;

    color:#9ca3af;

    line-height:1.9;

    font-size:1rem;
}


.featured-project-card{

    max-width:900px;

    margin:auto;

    padding:26px;

    border-radius:36px;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(25,255,255,0.12);

    backdrop-filter:blur(20px);

    display:flex;

    align-items:center;

    gap:26px;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 8px rgba(25,255,255,0.05);

    transition:0.4s ease;
}


.featured-project-card:hover{

    transform:translateY(-8px);

    border-color:
    rgba(25,255,255,0.22);

    box-shadow:
    0 0 100px rgba(25,255,255,0.08);
}


.project-preview{

    flex:1;
}


.preview-screen{

    background:
    rgba(8,8,12,0.95);

    border:
    1px solid rgba(255,255,255,0.06);

    border-radius:24px;

    overflow:hidden;

    padding:18px;
}


.preview-topbar{

    display:flex;

    gap:8px;

    margin-bottom:18px;
}


.preview-topbar span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#06402B;
}





.preview-content{

    display:flex;

    gap:16px;
}


.preview-sidebar{

    width:70px;

    height:125px;

    border-radius:16px;

    background:
    rgba(25,255,255,0.08);
}


.preview-main{

    flex:1;
}


.preview-chart{

    height:52px;

    border-radius:18px;

    margin-bottom:16px;

    background:
    linear-gradient(
    135deg,
    rgba(25,255,255,0.20),
    rgba(25,255,255,0.05)
    );
}


.preview-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;
}


.preview-grid div{

    height:28px;

    border-radius:14px;

    background:
    rgba(255,255,255,0.05);
}


.project-status{

    margin-top:18px;

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:
    rgba(0,255,170,0.12);

    color:#00ffaa;

    font-size:0.78rem;

    font-weight:600;

    letter-spacing:1px;
}




.project-details{

	font-size:0.94rem;
    flex:1;
}


.project-details h3{

    font-size:2rem;

    color:white;

    margin-bottom:10px;
}






.project-details h4{

    color:#d1d5db;

    margin-bottom:24px;

    font-size:1rem;
}


.project-details p{

    color:#9ca3af;
    max-width:470px;

    line-height:1.9;

    margin-bottom:28px;

    font-size:0.98rem;
}




.stack-group{

    margin-bottom:24px;
}



.stack-group h5{

    color:white;

    margin-bottom:14px;

    font-size:1rem;

    font-weight:600;
}


.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}



.tech-stack span{

    padding:7px 13px;

    border-radius:999px;

    border:
    1px solid rgba(25,255,255,0.16);

   background:#303030;

    color:white;

    font-size:0.8rem;

    transition:0.3s ease;
}


.tech-stack span:hover{

    transform:translateY(-1px);

    border-color:
    rgba(25,255,255,0.5);


}



.project-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-top:34px;
}

.project-btn{

    padding:11px 22px;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    transition:0.35s ease;

    font-size:0.92rem;
}






.primary-btn{

    border: 1px solid rgba(25,255,255,0.25);



    color:white;
    transition:0.4s ease;
}

.primary-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 28px rgba(25,255,255,0.35);
}


.secondary-btn{

   border: 1px solid rgba(25,255,255,0.25);


    color:white;
}



.secondary-btn:hover{

      transform:translateY(-4px);

    box-shadow:
    0 0 28px rgba(25,255,255,0.35);
}


  .upcoming-systems-section{

    padding:120px 0;
}


.upcoming-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:28px;

    margin-top:70px;
}


.upcoming-card{

    position:relative;

    padding:34px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.025);

    border:
    1px solid rgba(25,255,255,0.08);

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:0.4s ease;
}


.upcoming-card:hover{

    transform:translateY(-8px);

    border-color:
    rgba(25,255,255,0.18);

    box-shadow:
    0 0 40px rgba(25,255,255,0.08);
}

.lock-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    background:
    rgba(25,255,255,0.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.4rem;

    margin-bottom:28px;

    border:
    1px solid rgba(25,255,255,0.10);
}



.upcoming-card h3{

    color:white;

    font-size:1.5rem;

    margin-bottom:18px;
}


.upcoming-card p{

    color:#9ca3af;

    line-height:1.9;

    margin-bottom:30px;

    font-size:0.95rem;
}


.upcoming-card span{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

   

    border:
    1px solid rgba(25,255,255,0.35);

    color:#ffffff;

    font-size:0.78rem;

    letter-spacing:1px;
}
.project-journey-section{

    padding:120px 0 140px;
}

.journey-box{

    position:relative;

    max-width:900px;

    margin:auto;

    padding:90px 40px;

    border-radius:40px;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(25,255,255,0.10);

    backdrop-filter:blur(18px);

    text-align:center;

    overflow:hidden;
}


.journey-glow{

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(25,255,255,0.18),
    transparent 75%);

    top:-120px;

    left:50%;

    transform:translateX(-50%);

    filter:blur(20px);

    pointer-events:none;
}


.journey-box h2{

    position:relative;

    color:white;

    font-size:3rem;

    line-height:1.2;

    margin-bottom:28px;

    z-index:2;
}

.journey-box p{

    position:relative;

    max-width:650px;

    margin:auto;

    color:#9ca3af;

    line-height:2;

    font-size:1rem;

    margin-bottom:40px;

    z-index:2;
}



.journey-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:999px;

    border:
     1px solid rgba(25,255,255,0.25);

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:0.35s ease;

    z-index:2;
}


.journey-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 28px rgba(25,255,255,0.35);
}



.contact-hero-section{

    padding:130px 0 90px;

    position:relative;

    overflow:hidden;
}



.contact-left{

    position:relative;

    z-index:5;
}



.contact-badge{

    display:inline-block;

    padding:10px 20px;

    border-radius:999px;

    background:
    rgba(0,255,170,0.10);

    border:
    1px solid rgba(0,255,170,0.16);

    color:#00ffaa;

    font-size:0.78rem;

    font-weight:600;

    letter-spacing:1px;
}



.contact-left h1{

    font-size:4rem;

    line-height:1.05;

    color:white;

    margin:28px 0 24px;

    max-width:620px;

    letter-spacing:-2px;
}



.contact-left p{

    color:#9ca3af;

    line-height:2;

    font-size:1rem;

    max-width:560px;

    margin-bottom:42px;
}




.contact-status-group{

    display:flex;

    flex-wrap:wrap;

    gap:18px;
}



.status-card{

    min-width:180px;

    padding:22px;

    border-radius:22px;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(255,255,255,0.06);

    backdrop-filter:blur(16px);

    transition:0.35s ease;
}



.status-card:hover{

    transform:translateY(-6px);

    border-color:
    rgba(25,255,255,0.12);

    box-shadow:
    0 0 24px rgba(25,255,255,0.05);
}



.status-card h3{

    color:white;

    font-size:0.95rem;

    margin-bottom:12px;
}



.status-card span{

    font-size:0.92rem;

    line-height:1.7;
}

.location-status span{ 
	color:#dbe4ee;
	 } 

.active-status span{
	color:#4ade80; 
	} 
	.backend-status span{
	 color:#19ffff;
 }






.contact-visual{

    position:relative;

    width:520px;

    height:520px;

    margin:auto;
    transform:translateY(-15px);

    display:flex;

    justify-content:center;

    align-items:center;
}



.contact-visual::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(25,255,255,0.07),
    transparent 72%
    );

    filter:blur(40px);

    z-index:0;
}


.signal-ring{

    position:absolute;

    border-radius:50%;

    border:
    2px solid rgba(25,255,255,0.18);

    box-shadow:
    0 0 30px rgba(25,255,255,0.05);

    animation:
    pulseRing 5s linear infinite;
}



.ring-one{

    width:180px;

    height:180px;
}



.ring-two{

    width:300px;

    height:300px;

    animation-delay:1s;
}



.ring-three{

    width:430px;

    height:430px;

    animation-delay:2s;
}



.signal-core{

    width:150px;

    height:150px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(25,255,255,0.10),
    rgba(25,255,255,0.02)
    );

    border:
    2px solid rgba(25,255,255,0.16);

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:5;

    box-shadow:
    0 0 80px rgba(25,255,255,0.10);
}


@keyframes pulseRing{

    0%{

        transform:scale(0.96);

        opacity:0.55;
    }

    50%{

        transform:scale(1);

        opacity:1;
    }

    100%{

        transform:scale(0.96);

        opacity:0.55;
    }
}

.core-symbol{
	font-size:3rem;
	color:#e8fdff;
	display:flex;
	justify-content:center;
	align-items:center;
	text-shadow:
	0 0 18px rgba(25,255,255,0.18),
	0 0 45px rgba(25,255,255,0.12);
	animation:
	corePulse 3s ease-in-out infinite;
}

@keyframes corePulse{ 
	
	
	0%{ transform:scale(0.92);
 opacity:0.75;
  }
 
 
  50%{ transform:scale(1.05);
   opacity:1; } 
   
   100%{ transform:scale(0.92); 
   opacity:0.75; 
      } 
   
   }


.contact-console-section{

    padding:40px 0 120px;

    position:relative;
}



.console-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:start;
}



.console-left{

    padding-right:20px;
}



.console-label{ display:inline-block;
 padding:10px 18px; 
 border-radius:999px; 
 background: rgba(0,255,255,0.06);
  border: 1px solid rgba(0,255,255,0.14);
   color:#7df9ff;
    font-size:0.78rem;
     letter-spacing:1px; 
     font-weight:600; 
     margin-bottom:24px; 
     box-shadow:
      0 0 18px rgba(0,255,255,0.05);
 }



.console-left h2{

    font-size:3rem;

    color:white;

    margin-bottom:22px;
}



.console-left p{

    color:#9ca3af;

    line-height:2;

    max-width:520px;

    margin-bottom:40px;
}



.contact-info-list{

    display:flex;

    flex-direction:column;

    gap:18px;
}



.info-card{

    padding:18px 22px;

    border-radius:22px;

    border:
    1px solid rgba(25,255,255,0.09);

    backdrop-filter:blur(16px);

    transition:0.35s ease;

    position:relative;

    overflow:hidden;

}


.info-card:hover{

    transform:translateY(-5px);

    border-color:
    rgba(25,255,255,0.12);

    box-shadow:
    0 0 24px rgba(25,255,255,0.07);
}


.info-card h3{

    color:white;

    font-size:1rem;

    margin-bottom:10px;
}



.info-card span{

    color:#d1d5db;

    font-size:0.95rem;
}



.info-card a{

    color:#cbd5e1;

    text-decoration:none;

    font-size:0.95rem;

    transition:0.3s ease;
}



.info-card a:hover{

    opacity:0.9;
     color:#19ffff;
}



.contact-form-box{

    padding:40px;
    
    min-height:620px;
    
    margin-left:80px; 
    
    margin-top:45px;
   
    border-radius:28px;

    background:
    rgba(255,255,255,0.03);
    
      height:fit-content;

    border:
    1px solid rgba(25,255,255,0.06);

    backdrop-filter:blur(18px);
  
    
}



.contact-form-box h3{

    color:white;

    font-size:2rem;

    margin-bottom:32px;
}



.form-group{

    margin-bottom:26px;
}



.form-group input,
.form-group textarea{

    width:100%;

    padding:16px 20px;

    border-radius:18px;

    border:
    1px solid rgba(25,255,255,0.06);

    background:
    rgba(0,0,0,0.28);

    color:white;

    outline:none;

    transition:0.35s ease;

    resize:none;
}



.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#6b7280;
}



.form-group input:focus,
.form-group textarea:focus{

    border-color:
    rgba(25,255,255,0.26);

    box-shadow:
    0 0 18px rgba(25,255,255,0.08);
}


.primary-btn{ 
	display:inline-flex;
	 justify-content:center;
	  align-items:center; 
	  min-width:235px;
	   padding:14px 30px;
	    border-radius:999px;
	     
	      color:white;
	       border:
	        1px solid rgba(25,255,255,0.18);
	         font-weight:600; 
	         transition:0.35s ease;
	          cursor:pointer;
	           text-decoration:none; 
	           
	           background: rgba(255,255,255,0.03) !important;
	            color:white !important;
}

.primary-btn:hover{

    transform:translateY(-4px);

    border-color:
    rgba(25,255,255,0.25);

    box-shadow:
    0 0 24px rgba(25,255,255,0.14);

}
.form-note{
	margin-top:26px;
	max-width:340px;
	 display:flex; 
	 align-items:center;
	  gap:10px;
	   color:#7c8799; 
     font-size:0.92rem;
 }


.system-architecture-section{

    padding:120px 0;

    position:relative;
    overflow:hidden;
}

.system-architecture-section::before{ 
	content:"";
	 position:absolute; 
	 width:700px;
	  height:700px; 
	  top:-200px;
	   left:50%; 
	   transform:translateX(-50%); 
	   background: radial-gradient( circle, rgba(0,255,255,0.05),
	    transparent 70% );
	     filter:blur(60px);
	      z-index:0;
 }

.architecture-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 55px;
}



.architecture-label{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:
    rgba(0,255,255,0.06);

    border:
    1px solid rgba(0,255,255,0.14);

    color:#7df9ff;

    font-size:0.78rem;

    letter-spacing:1px;

    font-weight:600;

    margin-bottom:24px;

    box-shadow:
    0 0 18px rgba(0,255,255,0.05);
}



.architecture-heading h2{

    font-size:3.2rem;

    color:white;

    margin-bottom:22px;
}

.architecture-note{
	
	 margin-top:18px;
	 display:block; 
	 margin-bottom:18px;
	  color:#6b7280;
	   font-size:0.88rem;
    letter-spacing:0.3px; 
    }

.architecture-heading p{

    color:#7c8799;

    line-height:2;

    font-size:1rem;
}



.architecture-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;
}



.architecture-card{

    position:relative;

    padding:38px 32px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.03);

    border:
    2px solid rgba(25,255,255,0.05);

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:0.4s ease;
}



.architecture-card:hover{

    transform: translateY(-10px) scale(1.01); 
    border-color: rgba(255,255,255,0.10);
     box-shadow: 0 20px 40px rgba(0,0,0,0.28);
}



.architecture-number{

    position:absolute;

    top:28px;

    right:28px;

    color:#5b6472;

    font-size:0.9rem;

    font-weight:600;

    letter-spacing:1px;
}



.architecture-icon{

    position:relative;

    width:88px;

    height:88px;

    margin-bottom:34px;

    display:flex;

    justify-content:center;

    align-items:center;
}



.icon-ring{

    position:absolute;

    width:88px;

    height:88px;

    border-radius:50%;

    border:
    2px solid rgba(25,255,255,0.08);
}
@keyframes architecturePulse{
	
	0%{ transform:scale(0.96);
	 opacity:0.6; 
	 } 
	 50%{ transform:scale(1); 
	 opacity:1; 
	 } 
	 100%{
	  transform:scale(0.96); 
	  opacity:0.6; 
	  }
}


.icon-core{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:0.9rem;

    font-weight:700;

    letter-spacing:1px;
}



.database-card .icon-core{

    background:
    rgba(0,255,255,0.10);

    border:
    1px solid rgba(0,255,255,0.18);

    color:#7df9ff;

    box-shadow:
    0 0 24px rgba(0,255,255,0.08);
}



.dashboard-card .icon-core{

    background:
    rgba(90,120,255,0.10);

    border:
    1px solid rgba(90,120,255,0.18);

    color:#9db2ff;

    box-shadow:
    0 0 24px rgba(90,120,255,0.08);
}



.email-card .icon-core{

    background:
    rgba(0,255,140,0.10);

    border:
    1px solid rgba(0,255,140,0.18);

    color:#7dffbe;

    box-shadow:
    0 0 24px rgba(0,255,140,0.08);
}



.architecture-card h3{

    color:white;

    font-size:1.4rem;

    margin-bottom:18px;
}



.architecture-card p{

    color:#9ca3af;

    line-height:2;

    font-size:0.96rem;
}


.contact-page-end{ 
	padding:20px 0 120px;
	 display:flex; 
	 justify-content:center; 
	 align-items:center;
	 text-decoration:none;
 }


.explore-hero{

    position: relative;

    min-height: 88vh;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    padding: 0 8%;

}

.explore-grid{

    position: absolute;

    inset: 0;

   

    background-size: 70px 70px;

    opacity: 0.35;

}

.explore-hero-content{

    position: relative;

    z-index: 2;

    text-align: center;

    max-width: 950px;

}

.explore-label{

    display: inline-block;

    padding: 12px 26px;

    border-radius: 999px;

    border: 1px solid rgba(25,255,255,0.18);

    background: rgba(0,255,255,0.05);

    color: #7ef9ff;

    font-size: 0.9rem;

    letter-spacing: 2px;

    margin-bottom: 28px;

}

.explore-hero h1{

    font-size: 6rem;

    line-height: 1;

    font-weight: 700;

    margin-bottom: 30px;

}

.explore-hero p{

    font-size: 1.2rem;

    line-height: 1.9;

    color: rgba(255,255,255,0.72);

    max-width: 640px;

    margin: auto;

}

.explore-about{

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

    padding: 120px 8%;

}

.about-preview-left{

    position: relative;

    min-height: 430px;

    border-radius: 40px;

    border: 1px solid rgba(255,255,255,0.06);

    background:
    radial-gradient(circle at center,
    rgba(0,255,255,0.08),
    transparent 70%);

    overflow: hidden;
    
      transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;

}

.about-preview-left:hover{

    transform:translateY(-8px);

    border-color:rgba(0,255,255,0.12);

    box-shadow:
    0 0 40px rgba(0,255,255,0.05);
}

.about-preview-glow{

    position: absolute;

    width: 320px;

    height: 320px;

    background: rgba(0,255,255,0.08);

    filter: blur(80px);

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

}

.about-preview-circle{

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    border: 1px solid rgba(0,255,255,0.16);

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

}

.about-preview-right h2{

    font-size: 4rem;

    line-height: 1.1;

    margin: 25px 0;

}

.about-preview-right p{

    font-size: 1.08rem;

    line-height: 2;

    color: rgba(255,255,255,0.7);

    max-width: 580px;

    margin-bottom: 40px;

}

.preview-tag{

    display: inline-block;

    padding: 10px 22px;

    border-radius: 999px;

    border: 1px solid rgba(0,255,255,0.15);

    background: rgba(0,255,255,0.05);

    color: #7ef9ff;

    font-size: 0.82rem;

    letter-spacing: 2px;

}


.explore-project-section{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:80px;

    padding:140px 8%;
    

    position:relative;
}



.project-preview-card{

    flex:0.95;

    display:flex;

    flex-direction:column;
}



.project-window{

    max-width:620px;

    background:rgba(255,255,255,0.01);

    border:1px solid rgba(0,255,255,0.08);

    border-radius:34px;

    padding:35px;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(14px);

    box-shadow:
    0 0 30px rgba(25,255,255,0.03);
    
      transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.project-window:hover{

    transform:translateY(-10px);

    border-color:rgba(0,255,255,0.14);

    box-shadow:
    0 0 50px rgba(0,255,255,0.06);
}

.project-window::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at center,
    rgba(0,255,255,0.10),
    transparent 72%
    );

    opacity:0.85;

    pointer-events:none;
}



.window-top{

    display:flex;

    gap:12px;

    margin-bottom:34px;

    position:relative;

    z-index:2;
}



.window-top span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#06402B;
}



.window-layout{

    display:flex;

    gap:25px;

    position:relative;

    z-index:2;
}



.layout-sidebar{

    width:90px;

    height:260px;

    border-radius:28px;

    background:
    linear-gradient(
    180deg,
    rgba(0,255,255,0.10),
    rgba(0,255,255,0.03)
    );
}



.layout-content{

    flex:1;
}



.layout-header{

    height:70px;

    border-radius:24px;

    margin-bottom:28px;

    background:
    linear-gradient(
    90deg,
    rgba(0,255,255,0.09),
    rgba(0,255,255,0.03)
    );
}



.layout-row{

    display:flex;

    gap:18px;

    margin-bottom:18px;
}



.layout-row div{

    flex:1;

    height:58px;

    border-radius:18px;

    background:rgba(255,255,255,0.05);
}



.system-status{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:22px;

    padding:14px 26px;

    border-radius:100px;

    background:rgba(0,255,136,0.08);

    border:1px solid rgba(0,255,136,0.12);

    color:#00ff88;

    font-size:0.92rem;

    letter-spacing:1px;

    width:fit-content;

    box-shadow:
    0 0 30px rgba(0,255,136,0.08);
}



.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#00ff88;

    box-shadow:
    0 0 12px rgba(0,255,136,0.7);
}



.project-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;
    
    
}



.section-badge {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    border-radius:999px;

    border:1px solid rgba(0,255,255,0.14);

    background:
    linear-gradient(
    135deg,
    rgba(0,255,255,0.08),
    rgba(0,255,255,0.03)
    );

    backdrop-filter:blur(10px);

    color:#7ffcff;

    font-size:0.82rem;

    letter-spacing:2px;

    text-transform:uppercase;

    box-shadow:
    0 0 30px rgba(0,255,255,0.06);

    width:fit-content;

    margin-bottom:36px;
}



.project-content h2{

    max-width:700px;

    font-size:3.3rem;

    line-height:1.04;

    font-weight:700;

    margin-top:5px;

    margin-bottom:30px;
}



.project-content p{

    max-width:500px;

    font-size:1.08rem;

    line-height:1.95;

    color:rgba(255,255,255,0.72);

    margin-bottom:40px;
}



.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    max-width:560px;

    margin-bottom:42px;
    
   
}



.tech-stack span{

    padding:14px 26px;

    border-radius:100px;

    border:1px solid rgba(0,255,255,0.16);

    background:rgba(255,255,255,0.02);

    font-size:0.95rem;

   transition:
transform 0.35s ease,
background 0.35s ease,
border-color 0.35s ease;
    
    
}



.tech-stack span:hover{

    border-color:rgba(0,255,255,0.34);

    background:rgba(0,255,255,0.06);

    transform:translateY(-2px);
}



.explore-project-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:fit-content;

    padding:17px 36px;

    font-weight:600;

    letter-spacing:0.5px;

    border-radius:100px;

    text-decoration:none;

    color:white;

    border:1px solid rgba(0,255,255,0.18);

    background:rgba(255,255,255,0.03);
will-change:transform;
    
}



.explore-project-btn:hover{

    transform:translateY(-4px);

    

    box-shadow:0 0 25px rgba(0,255,255,0.12);
}



.explore-skills-section{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:110px;

    padding:150px 8%;

    position:relative;
}


.explore-skills-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(0,255,255,0.05);

    filter:blur(140px);

    border-radius:50%;

    top:10%;

    left:-10%;

    z-index:-1;
}



.skills-preview-side{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:34px;
}



.skill-card{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:34px;

    min-height:150px;

    border-radius:34px;

    border:1px solid rgba(0,255,255,0.08);

    background:rgba(255,255,255,0.02);

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.45s ease;
    
    animation:floatCard 5s ease-in-out infinite;
}



.skill-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(0,255,255,0.12),
    transparent 72%);

    opacity:0.9;
}



.skill-card:hover{

    transform:translateY(-8px);

    border:1px solid rgba(0,255,255,0.14);

    box-shadow:0 0 40px rgba(0,255,255,0.06);
}



.skill-card-one{

    width:78%;
}



.skill-card-two{

    width:68%;

    margin-left:120px;
    animation-delay:1s;
}



.skill-card-three{

    width:82%;

    margin-left:35px;
    animation-delay:2s;
}



.skill-card img{

    width:58px;

    height:58px;

    object-fit:contain;

    position:relative;

    z-index:2;

       
    filter:
     drop-shadow(0 0 10px rgba(255,255,255,0.08));
      transition:
       transform 0.4s ease,
     filter 0.4s ease;
}



.skill-card img:hover{

    transform:translateY(-6px) scale(1.08);
    
    transform:translateY(-6px) scale(1.08); 
    filter: drop-shadow(0 0 18px rgba(0,255,255,0.28));
}

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

.skills-content{

    flex:1;
}



.skills-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    border-radius:999px;

    border:1px solid rgba(0,255,255,0.14);

    background:
    linear-gradient(
    135deg,
    rgba(0,255,255,0.08),
    rgba(0,255,255,0.03)
    );

    backdrop-filter:blur(10px);

    color:#7ffcff;

    font-size:0.82rem;

    letter-spacing:3px;

    text-transform:uppercase;

    box-shadow:
    0 0 30px rgba(0,255,255,0.06);

    margin-bottom:34px;
}



.skills-content h2{

    font-size:4.3rem;

    line-height:1.05;

    font-weight:600;

    margin-bottom:34px;
}



.skills-content p{

    max-width:650px;

    font-size:1.1rem;

    line-height:2;

    color:rgba(255,255,255,0.72);

    margin-bottom:44px;
}



.explore-skills-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    border-radius:100px;

    text-decoration:none;

    color:white;

    font-weight:600;

    letter-spacing:0.5px;

    border:1px solid rgba(0,255,255,0.18);

        

    transition:0.4s ease;
}



.explore-skills-btn:hover{

    transform:translateY(-4px);

    

    box-shadow:0 0 25px rgba(0,255,255,0.12);
}



.explore-contact-section{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:110px;

    padding:160px 8%;

    position:relative;
}



.contact-visual-side{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;
}



.contact-visual{

    position:relative;

    width:420px;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:center;
}



.headphone-ring{

    position:relative;

    width:100%;

    height:100%;

    border-radius:50%;

    border:18px solid rgba(0,255,255,0.08);

    border-top-color:transparent;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
    0 0 80px rgba(0,255,255,0.04);
}



.headphone-ring::before{

    content:"";

    position:absolute;

    width:120%;

    height:120%;

    border-radius:50%;

    background:
    radial-gradient(circle at center,
    rgba(0,255,255,0.08),
    transparent 72%);

    z-index:-1;
}



.earth-core{

    width:180px;

    height:180px;

    border-radius:50%;

    border:1px solid rgba(0,255,255,0.14);

    background:rgba(255,255,255,0.02);

    backdrop-filter:blur(12px);

    display:flex;

    justify-content:center;

    align-items:center;

    animation:earthFloat 5s ease-in-out infinite;
}



.earth-core i{

    font-size:5rem;

    color:#7ef9ff;

    text-shadow:
    0 0 30px rgba(0,255,255,0.24);
}



@keyframes earthFloat{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-10px);
    }

    100%{

        transform:translateY(0px);
    }
}



.contact-content{

    flex:1;
}



.contact-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    border-radius:999px;

    border:1px solid rgba(0,255,255,0.14);

    background:
    linear-gradient(
    135deg,
    rgba(0,255,255,0.08),
    rgba(0,255,255,0.03)
    );

    backdrop-filter:blur(10px);

    color:#7ffcff;

    font-size:0.82rem;

    letter-spacing:3px;

    text-transform:uppercase;

    box-shadow:
    0 0 30px rgba(0,255,255,0.06);

    margin-bottom:34px;
}



.contact-content h2{

    max-width:680px;

    font-size:4.4rem;

    line-height:1.04;

    font-weight:700;

    margin-bottom:32px;
}



.contact-content p{

    max-width:600px;

    font-size:1.08rem;

    line-height:2;

    color:rgba(255,255,255,0.72);

    margin-bottom:42px;
}



.contact-links{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:44px;
}



.contact-links a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 26px;

    border-radius:999px;

    text-decoration:none;

    color:white;

    border:1px solid rgba(0,255,255,0.14);

    background:rgba(255,255,255,0.03);

    transition:0.4s ease;
}



.contact-links a:hover{

    transform:translateY(-4px);

    background:rgba(0,255,255,0.06);

    border-color:rgba(0,255,255,0.22);
}



.explore-contact-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:100px;

    text-decoration:none;

    color:white;

    font-weight:600;

    letter-spacing:0.5px;

    border:1px solid rgba(0,255,255,0.18);

    background: rgba(255,255,255,0.03);

    transition:0.4s ease;
}



.explore-contact-btn:hover{

    transform:translateY(-4px);

  background: rgba(255,255,255,0.03);

    box-shadow:0 0 25px rgba(0,255,255,0.12);
}


.explore-ending-section{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:180px 8% 140px;

    overflow:hidden;
}



.ending-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(0,255,255,0.08),
    transparent 72%);

    filter:blur(140px);

    z-index:-1;
}



.ending-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    border-radius:999px;

    border:1px solid rgba(0,255,255,0.14);

    background:
    linear-gradient(
    135deg,
    rgba(0,255,255,0.08),
    rgba(0,255,255,0.03)
    );

    backdrop-filter:blur(10px);

    color:#7ffcff;

    font-size:0.82rem;

    letter-spacing:3px;

    text-transform:uppercase;

    box-shadow:
    0 0 30px rgba(0,255,255,0.06);

    margin-bottom:38px;
}



.explore-ending-section h2{

    max-width:800px;

    font-size:5rem;

    line-height:1.04;

    font-weight:700;

    margin-bottom:34px;
}



.explore-ending-section p{

    max-width:620px;

    font-size:1.08rem;

    line-height:2;

    color:rgba(255,255,255,0.72);

    margin-bottom:48px;
}



.ending-home-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border-radius:100px;

    text-decoration:none;

    color:white;

    font-weight:600;

    letter-spacing:0.5px;

    border:1px solid rgba(0,255,255,0.18);

    background:rgba(255,255,255,0.03);

    transition:0.4s ease;
}



.ending-home-btn:hover{

    transform:translateY(-4px);



    box-shadow:0 0 25px rgba(0,255,255,0.12);
}

.success-message{

    margin-bottom:28px;

    padding:16px 22px;

    border-radius:18px;

    border:1px solid rgba(0,255,136,0.18);

    background:rgba(0,255,136,0.06);

    color:#7dffbf;

    font-size:0.95rem;

    letter-spacing:0.4px;

    backdrop-filter:blur(12px);

    box-shadow:
    0 0 30px rgba(0,255,136,0.06);
}

.table {

    min-width: 900px;

}

td {
    word-break: break-word;
}


.name-column {

    min-width: 140px;

}

.email-column {

    min-width: 220px;

}



.message-column {

    min-width: 350px;

    max-width: 450px;

    white-space: normal;

    word-break: break-word;

}

.action-column {

    min-width: 140px;

}

.action-column .btn {

    width: 100%;

    margin-bottom: 10px;

    white-space: nowrap;
  

}


.login-page {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at top right,
            rgba(0,255,255,0.04),
            transparent 25%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(255,255,255,0.03),
            transparent 20%
        ),

        linear-gradient(
            135deg,
            #000000,
            #050505,
            #0a0a0a
        );

    overflow: hidden;

    position: relative;
}

.login-card {

    width: 100%;

    max-width: 520px;

    padding: 50px;

    border-radius: 32px;

    background:
        rgba(10,10,10,0.88);

    border:
        1px solid rgba(255,255,255,0.06);

    backdrop-filter: blur(16px);

    box-shadow:
        0 20px 80px rgba(0,0,0,0.7);

    position: relative;

    overflow: hidden;
}

.login-card::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    background:
        rgba(0,255,255,0.03);

    border-radius: 50%;

    top: -120px;

    right: -120px;

    filter: blur(80px);

    pointer-events: none;
}

.login-title {

    font-size: 3rem;

    font-weight: 700;

    text-align: center;

    margin-bottom: 35px;

    color: white;
}



.login-input {

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.08);

    color: white;

    padding: 14px 16px;

    border-radius: 14px;

    width: 100%;

    margin-bottom: 22px;

    transition: 0.3s ease;
}



.login-input:focus {

    outline: none;

    border-color: cyan;

    box-shadow:
        0 0 18px rgba(0,255,255,0.25);

    background: rgba(255,255,255,0.06);
}



.login-input::placeholder {

    color: rgba(255,255,255,0.45);
}


.login-btn {

    width: 100%;

    padding: 15px;

    border-radius: 16px;

    border: 1px solid rgba(0,255,255,0.15);

    background: rgba(255,255,255,0.03);

    color: white;

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: 0.5px;

    transition: all 0.35s ease;

    backdrop-filter: blur(10px);
}



.login-btn:hover {

    transform: translateY(-2px);

    background: rgba(255,255,255,0.05);

    border-color: rgba(0,255,255,0.25);

    box-shadow:
        0 0 25px rgba(0,255,255,0.12);
}


.login-error {

    background: rgba(255,0,0,0.08);

    border: 1px solid rgba(255,0,0,0.2);

    color: #ffb3b3;

    padding: 12px;

    border-radius: 12px;

    margin-bottom: 20px;

    text-align: center;
}

.admin-wrapper{

    width:100%;
    min-height:100vh;

    padding:140px 7% 80px;

    background:
    radial-gradient(circle at center,
    rgba(0,255,255,0.04),
    transparent 65%);

}

.admin-panel{

    width:100%;

    background:
    rgba(15,15,15,0.82);

    border:
    1px solid rgba(255,255,255,0.05);

    border-radius:32px;

    padding:40px;

    backdrop-filter:blur(18px);

    box-shadow:
    0 0 40px rgba(0,0,0,0.45);

}

.admin-top{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    margin-bottom:50px;

}

.contact-msg{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 40px;

    border-radius:999px;

    border:
    1px solid rgba(0,255,255,0.15);

    background:
    rgba(0,255,255,0.04);

    color:#8efcff;

    letter-spacing:5px;

    font-size:1rem;

    font-weight:600;

    text-transform:uppercase;

    box-shadow:
    0 0 30px rgba(0,255,255,0.08);

}

.admin-table{

    width:100%;

    border-collapse:collapse;

    min-width:1100px;

}

.admin-table thead{

    background:
    rgba(255,255,255,0.03);

}

.admin-table th{

    padding:24px;

    color:white;

    font-size:1.05rem;

    font-weight:600;

    border-bottom:
    1px solid rgba(255,255,255,0.08);

}

.admin-table td{

    padding:24px;

    vertical-align:top;

    border-bottom:
    1px solid rgba(255,255,255,0.05);

    color:#e5e5e5;

}

.admin-table tbody tr{

    transition:0.35s ease;

}

.admin-table tbody tr:hover{

    background:
    rgba(255,255,255,0.025);

}

.name-column{

    min-width:180px;

}

.email-column{

    min-width:280px;

}

.message-column{

    min-width:450px;

}

.date-column{

    min-width:170px;

}

.status-column{

    min-width:170px;

}

.action-column{

    min-width:160px;

}

.message-text{

    color:#d8d8d8;

    line-height:1.9;

    word-break:break-word;

}

.date-text{

    display:block;

    font-weight:600;

    margin-bottom:8px;

}

.time-text{

    color:#8f8f8f;

    font-size:0.95rem;

}

.status-wrapper{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:fit-content;

    padding:8px 18px;

    border-radius:999px;

    font-size:0.9rem;

    font-weight:600;

}

.read-badge{

    background:
    rgba(0,255,140,0.14);

    border:
    1px solid rgba(0,255,140,0.18);

    color:#7dffbe;

}

.unread-badge{

    background:
    rgba(255,180,0,0.14);

    border:
    1px solid rgba(255,180,0,0.18);

    color:#ffd46b;

}

.mark-read-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:fit-content;

    padding:12px 22px;

    border-radius:14px;

    text-decoration:none;

    background:
    rgba(0,255,255,0.05);

    border:
    1px solid rgba(0,255,255,0.15);

    color:white;

    font-weight:600;

    transition:0.3s ease;

}

.mark-read-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 25px rgba(0,255,255,0.12);

}

.delete-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:14px 22px;

    border-radius:14px;

    text-decoration:none;

    background:
    rgba(255,0,80,0.12);

    border:
    1px solid rgba(255,0,80,0.2);

    color:white;

    font-weight:600;

    transition:0.3s ease;

}

.delete-btn:hover{

    transform:translateY(-2px);

    background:
    rgba(255,0,80,0.18);

}

.custom-scroll::-webkit-scrollbar{

    height:8px;

}

.custom-scroll::-webkit-scrollbar-track{

    background:
    rgba(255,255,255,0.04);

}

.custom-scroll::-webkit-scrollbar-thumb{

    background:
    rgba(0,255,255,0.2);

    border-radius:999px;

}

.admin-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:50px;

}
.logout-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:16px;

    text-decoration:none;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(255,255,255,0.08);

    color:white;

    font-size:0.95rem;

    font-weight:600;

    letter-spacing:0.5px;

    transition:all 0.3s ease;

    backdrop-filter:blur(10px);

}
.logout-btn:hover{

    transform:translateY(-2px);

    background:
    rgba(255,255,255,0.05);

    border-color:
    rgba(0,255,255,0.22);

    box-shadow:
    0 0 25px rgba(0,255,255,0.12);

}

.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-bottom:40px;

}
.stat-card{

    background:
    rgba(15,15,15,0.82);

    border:
    1px solid rgba(255,255,255,0.05);

    border-radius:24px;

    padding:28px;

    backdrop-filter:blur(14px);

    transition:0.3s ease;

}
.stat-card:hover{

    transform:translateY(-4px);

    border-color:
    rgba(0,255,255,0.15);

    box-shadow:
    0 0 25px rgba(0,255,255,0.08);

}

.stat-label{

    display:block;

    color:#9a9a9a;

    margin-bottom:12px;

    font-size:0.95rem;

}
.stat-card h2{

    margin:0;

    color:white;

    font-size:2.5rem;

    font-weight:700;

}
.search-form{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:35px;

}
.search-input{

    flex:1;

    padding:15px 20px;

    border-radius:16px;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(255,255,255,0.08);

    color:white;

    outline:none;

    transition:0.3s ease;

}

.search-input:focus{

    border-color:
    rgba(0,255,255,0.25);

    box-shadow:
    0 0 20px rgba(0,255,255,0.08);

}
.search-input::placeholder{

    color:
    rgba(255,255,255,0.45);

}
.search-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 28px;

    border-radius:16px;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(0,255,255,0.12);

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:0.3s ease;

}
.search-btn:hover{

    transform:translateY(-2px);

    border-color:
    rgba(0,255,255,0.22);

    box-shadow:
    0 0 25px rgba(0,255,255,0.10);

}

.clear-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 28px;

    border-radius:16px;

    text-decoration:none;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(25,255,255,0.08);

    color:white;

    font-weight:600;

    transition:0.3s ease;

}
.clear-btn:hover{

 
    transform:translateY(-2px);

    border-color:
    rgba(0,255,255,0.22);

    box-shadow:
    0 0 25px rgba(0,255,255,0.10);


}

.error-container{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;
}

.error-code{

    font-size:8rem;

    font-weight:800;

    color:#00ffff;

    text-shadow:
    0 0 20px rgba(0,255,255,0.35);
}

.error-title{

    color:white;

    margin-top:10px;

    margin-bottom:20px;
}

.error-description{

    color:rgba(255,255,255,0.75);

    max-width:600px;

    line-height:1.8;
}

.error-btn{

    margin-top:35px;

    padding:14px 32px;

    border-radius:999px;

    text-decoration:none;

    color:white;

    border:1px solid rgba(0,255,255,0.25);

    transition:0.3s ease;
}

.error-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 20px rgba(0,255,255,0.2);
}
@media (max-width: 992px){
	
	.section-title{
	    
	    font-size:54px;

	}
	
	.journey-section{
	
	   margin-top: 120px;
	
	}
	


.skills-visual{

	width:95%;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:40px;

	transform:scale(0.78);
	transform-origin:center top;

	margin-left:-25px;
	margin-bottom:-120px;
}


    .featured-project-card{

        flex-direction:column;

        padding:32px;
    }



    .project-details h3{

        font-size:2.3rem;
    }



    .section-heading h2{

        font-size:2.8rem;
    }


 .upcoming-grid{

        grid-template-columns:1fr;

        gap:24px;
    }
    
    .contact-hero-section{

        padding:120px 0 80px;
    }



    .contact-left{

        text-align:center;

        margin-bottom:70px;
    }



    .contact-left h1{

        font-size:3rem;

        margin-left:auto;

        margin-right:auto;
    }



    .contact-left p{

        margin-left:auto;

        margin-right:auto;
    }



    .contact-status-group{

        justify-content:center;
    }


    .console-wrapper{

        grid-template-columns:1fr;

        gap:60px;
    }



    .console-left{

        padding-right:0;
    }



    .console-left h2{

        font-size:2.5rem;
    }

.system-architecture-section{ 
	padding:100px 0; 
	} 
	.architecture-heading h2
	{ 
	font-size:2.6rem;
	 } 
	 .architecture-grid{
	  grid-template-columns:1fr;
	   gap:26px;
	   
 }

.explore-hero h1{ 
	font-size: 4.5rem;
	 } 


.explore-about{ 
	grid-template-columns: 1fr;
 gap: 60px; }



.explore-project-section{ 
	flex-direction:column;
	 gap:70px;
	  padding:110px 7%;
	   } 
	   .project-content h2{ 
	font-size:3.5rem;
	 }
	 
	 .explore-skills-section{
	  flex-direction:column;
	   gap:80px; 
	   padding:120px 7%;
	    }
	     .skills-preview-side{
	      width:100%;
	       align-items:center;
	        }
	         .skills-content{
	          width:100%;
	           text-align:center;
	            display:flex;
	             flex-direction:column;
	              align-items:center;
	               }
	                .skills-content p{ 
	                max-width:100%; 
	                }
	                 .skill-card-one, 
	                 .skill-card-two, .skill-card-three{
	                  width:100%;
	               max-width:520px; 
	            margin-left:0;
	                    }
	                     .skills-content h2{
	                      font-size:3.5rem;
	  }

.explore-contact-section{
	flex-direction:column; 
gap:90px;
 padding:130px 7%;
  } 
  .contact-content{
   width:100%;
   text-align:center;
  display:flex;
 flex-direction:column;     align-items:center; 
       }
   .contact-content p{
  max-width:100%; 
  } 
   .contact-content h2{
    font-size:3.5rem;
           
}

.explore-ending-section{ padding:150px 7% 120px; }
 .explore-ending-section h2{ font-size:3.8rem; }
 .explore-ending-section p{ max-width:100%; }
 
  .admin-wrapper{

        padding:120px 5% 60px;

    }

    .admin-panel{

        padding:24px;

        border-radius:24px;

    }

    .contact-msg{

        width:100%;

        text-align:center;

        font-size:0.9rem;

        letter-spacing:3px;

    }
 
 
}


@media (max-width:768px){

body{

    overflow-x:hidden;
}


body::before{

	width:320px;
	
	height:320px;
	
	top:80px;
	
	right:-120px;
	
	filter:blur(90px);
  
}


.main-container{

    width:100%;

    overflow:hidden;
}

.desktop-links{

    display:none;
}

.navbar{

   padding:18px 16px; 
   width:100%; 
   box-sizing:border-box;
    overflow:hidden;
}

.logo{

    font-size:0.95rem; 
    letter-spacing:1px; 
    max-width:70%; 
    overflow:hidden;
}

.hamburger{

    display:flex;
}

.hero-section{

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;
    font-size: clamp(2.8rem, 8vw, 5rem);
    gap:20px;
    
  
       
     min-height:90vh;

    padding-top:40px; 
    
    padding-bottom:40px;

    padding:30px 24px 60px;

    width:100%;

    box-sizing:border-box;
}

.hero-left{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    max-width:100%;
}

.hero-right{

    width:100%;

    display:flex;

    justify-content:center;
}

.hero-left h1{

    font-size:3.3rem;

    line-height:0.95;
}

.hero-left p{

    font-size:1.05rem;

    margin-top:14px;
}

.hero-button{

    margin-top:24px;

    display:inline-flex;

    justify-content:center;

    align-items:center;
}

.profile-circle{

   width:220px; height:280px; 
   
   border-radius:32px; 
   
   overflow:hidden;
   
    margin-top:25px;
    
    margin-bottom:20px;
    
}

.profile-circle img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

    display:block;
}

.about-container{

    padding:60px 24px;

    width:100%;

    box-sizing:border-box;
}

.about-hero h1{

   font-size: 4rem; 
   line-height: 1.05;
}

.about-hero p{

  font-size: 1.05rem;
   line-height: 1.9; 
  max-width: 100%;
}

.current-journey{
	

    margin-top:70px;
}

.current-journey h2{

    font-size:32px;
}

.current-journey p{

    font-size: 1.05rem;
   line-height: 1.9; 
  max-width: 100%;
}

.focus-section{

    margin-top:80px;
}

.focus-grid{

    grid-template-columns:1fr;

    gap:18px;

    width:100%;
}

.focus-card{

    min-height:auto;

    padding:24px;

    width:100%;

    box-sizing:border-box;
}

.section-title{

    font-size:38px;

    text-align:center;
}

.journey-section{

    margin-top:90px;
}

.journey-item{

    padding-left:20px;
}

.about-closing{

    padding:110px 24px;

    text-align:center;
}

.about-closing h2{

    font-size:42px;

    line-height:1.1;
}

.about-closing p{

    font-size:16px;

    line-height:1.8;

    margin-top:20px;
}

.closing-btn{

    display:inline-block;

    margin-top:30px;

    padding:14px 30px;

    font-size:15px;
}

.skills-hero .row{
    flex-direction: column;
}

.skills-left{
	text-align:left;
	margin-bottom:90px;
	padding-top:20px;
	
}



.skills-visual{

	width:95%;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:30px;

	transform:scale(0.78);
	transform-origin:center top;

	margin-left:-5px;
	margin-bottom:-120px;
}



.skills-left h1{
	   font-size:2.7rem;
	 max-width:220px;
    line-height:1.3;
    letter-spacing:-1px;
    text-align:left;
    
    margin-top:-60px;
    
    margin-bottom:15px;
}

.skills-left h1 span{
    display:block;
    
    font-size:2.9rem;
    line-height:0.95;
    margin-top:8px;
     color:  #19ffff;
}
.skills-left p{
	 
	font-size:1rem;

	line-height:1.8;
   
	margin-top:20px;
	text-align:left;

	max-width:320px;

	color:#9ca3af;
}

.skills-hero{
	padding-top:130px;

}



.skill-cetegory h3{
	font-size: 2rem;


}

.skills-grid{
	display:flex;
	flex-direction:column;
	align-items:center;
	
}
.skill-card{
	width:100%;
	max-width:320px;
}
.future-tag{
	font-size: 0.65rem;
}
.future-learning-banner h2{
	line-height:1.2;
}



  .featured-project-section{

        padding:140px 0 100px;
    }


    .featured-project-card{

        padding:24px;

        border-radius:28px;
    }


    .project-details h3{

        font-size:2rem;
    }

    .project-details h4{

        font-size:1rem;
    }


    .project-buttons{

        flex-direction:column;
    }


    .project-btn{

        width:100%;

        text-align:center;
    }


    .preview-sidebar{

        width:55px;
    }



    .journey-box{

        padding:70px 24px;
    }


    .journey-box h2{

        font-size:2.2rem;
    }

  
    .contact-left h1{

        font-size:2.4rem;

        line-height:1.1;
    }



    .contact-left p{

        font-size:0.95rem;
    }



    .contact-visual{

        width:320px;

        height:320px;
    }



    .contact-visual::before{

        width:320px;

        height:320px;
    }



    .ring-one{

        width:130px;

        height:130px;
    }


   




    .ring-two{

        width:220px;

        height:220px;
    }



    .ring-three{

        width:300px;

        height:300px;
    }



    .signal-core{

        width:95px;

        height:95px;
    }



    .mail-icon{

        width:34px;

        height:34px;
    }



    .status-card{

        width:100%;
    }


    .contact-console-section{

        padding:20px 0 90px;
    }



    .console-left h2{

        font-size:2rem;
    }



    .contact-form-box{

        padding:28px;
         margin-left:20px; 
    }


.system-architecture-section{ 
	padding:80px 0;
	 }
	  .architecture-heading{
	   margin-bottom:50px;
	    } 
	    .architecture-heading h2{
	     font-size:2rem; 
	     line-height:1.2;
	      } 
	      .architecture-heading p{ 
	      font-size:0.95rem; 
	      } 
	      .architecture-card{ 
	      padding:32px 24px; 
	      }
	       .architecture-number{ 
	       top:24px; 
	       right:24px; 
}

.explore-hero{
	padding: 0 7%;
	 min-height: 85vh;
	  } 
	  .explore-hero h1{
	   font-size: 3rem;
	    line-height: 1.08;
	     }
	      .explore-hero p{
	       font-size: 1rem;
	        line-height: 1.9; 
	        } 
	        .explore-label{
	         font-size: 0.78rem;
	          padding: 10px 22px;
 }

.explore-about{
	padding: 90px 7%;
	padding-top: 10px;
	
	 } 
	 
	 
	 .about-preview-left{ 
	 min-height: 320px; 
	 } 
	 .about-preview-right h2{ 
	 font-size: 2.6rem;
	  line-height: 1.2;
	   }
	    .about-preview-right p{ 
	    font-size: 0.97rem;
	     line-height: 1.9; 
}
.about-preview-right .primary-btn{ 
	min-width: 210px;
	 }

.explore-project-section{

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:55px;

        padding:110px 7%;

        text-align:left;
    }



    .project-preview-card{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;
    }



    .project-window{

        width:100%;

        max-width:340px;

        padding:24px;

        border-radius:28px;
    }



    .window-top{

        margin-bottom:24px;
    }



    .window-layout{

        gap:16px;
    }



    .layout-sidebar{

        width:72px;

        height:180px;

        border-radius:22px;
    }



    .layout-header{

        height:46px;

        border-radius:18px;

        margin-bottom:18px;
    }



    .layout-row{

        gap:12px;

        margin-bottom:12px;
    }



    .layout-row div{

        height:42px;

        border-radius:14px;
    }



    .system-status{

        margin-top:18px;

        padding:12px 20px;

        font-size:0.78rem;

        letter-spacing:0.8px;
    }



    .project-content{

        width:100%;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:flex-start;

        padding-top:0;
    }



    .project-badge{

        margin-bottom:22px;

        padding:10px 22px;

        font-size:0.72rem;

        letter-spacing:2px;
    }



    .project-content h2{

        font-size:2.7rem;

        line-height:1.05;

        margin-bottom:24px;

        max-width:100%;
    }



    .project-content p{

        font-size:0.95rem;

        line-height:1.9;

        max-width:100%;

        margin-bottom:28px;
    }



    .tech-stack{

        gap:12px;

        margin-bottom:30px;
    }



    .tech-stack span{

        padding:11px 18px;

        font-size:0.82rem;
    }



    .explore-project-btn{

        width:100%;

        justify-content:center;

        padding:16px 28px;

        font-size:0.92rem;
    }

.explore-skills-section{
	padding:100px 7%;
	 gap:60px;
	  }
	   .skills-preview-side{ 
	   gap:24px;
	    }
	     .skill-card{
	      width:100%; 
	      max-width:100%;
	       min-height:110px;
	        border-radius:26px;
	         gap:24px;     }
	  .skill-card img{          width:42px;
	    height:42px;
	   }
	  .skills-badge{
	     padding:12px 26px; 
	 font-size:0.72rem;
	 letter-spacing:2px;
	   margin-bottom:26px;
	  } 
	 .skills-content h2{
	   font-size:2.7rem;
  line-height:1.08; 
	 margin-bottom:24px; 
	     } 
    .skills-content p{
	     font-size:0.95rem;
	  line-height:1.9; 
	  margin-bottom:34px;
	         }
	     .explore-skills-btn{
	  width:100%;
   justify-content:center;
	padding:16px 28px; 
 font-size:0.92rem;
	        }
	        
 .explore-contact-section{ padding:100px 7%; gap:70px; }
  .contact-visual{ width:300px; height:300px; }
  .headphone-ring{ border-width:14px; }
   .earth-core{ width:130px; height:130px; } 
   .earth-core i{ font-size:3.5rem; } 
   .contact-badge{ padding:12px 26px;
    font-size:0.72rem; letter-spacing:2px;
     margin-bottom:26px; }
 
  .contact-content h2{ font-size:2.7rem; line-height:1.08; margin-bottom:24px; }
   
    .contact-content p{ font-size:0.95rem; line-height:1.9; margin-bottom:34px; }
        
  .contact-links{ gap:12px; margin-bottom:34px; }
        
  .contact-links a{ padding:12px 20px; font-size:0.88rem; }
         
    .explore-contact-btn{
          width:100%;
         justify-content:center;
          padding:16px 28px;
           font-size:0.92rem; 
           }

.explore-ending-section{
	padding:120px 7% 100px; }
	 .ending-glow{ width:340px; height:340px; }
	  .ending-badge{ padding:12px 24px; font-size:0.72rem; letter-spacing:2px; margin-bottom:28px; }
	   .explore-ending-section h2{ font-size:2.8rem; line-height:1.08; margin-bottom:24px; } 
	   .explore-ending-section p{ font-size:0.95rem; line-height:1.9; margin-bottom:36px; }
	    .ending-home-btn{ width:100%; justify-content:center; padding:16px 28px;
 font-size:0.92rem; }

.success-message{ 
font-size:0.88rem;
 padding:14px 18px;
 border-radius:16px;
  }
  
  .admin-panel{

        padding:18px;

    }

    .contact-msg{

        padding:14px 20px;

        font-size:0.82rem;

        letter-spacing:2px;

    }

    .admin-table th,
    .admin-table td{

        padding:18px;

        font-size:0.95rem;

    }

    .message-text{

        line-height:1.7;

    }
      .admin-top{

        flex-direction:column;

        align-items:stretch;

    }
     .logout-btn{

        width:100%;

    }
    
    .stats-grid{

        grid-template-columns:1fr;

    }
    .search-form{

        flex-direction:column;

        align-items:stretch;

    }
        .search-btn{

        width:100%;

    }
    
    .mobile-menu a.active{

    color:#00ffff;
}
}