/* --------------------------------------------------------Commom----------------------------------------------------------- */

/* :root{
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-soft: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 12px 30px rgba(0,0,0,0.35);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,0.70);
} */


/*-------Body---------*/
body{
  /* color:rgb(255, 255, 255); */
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 1000px;
  /* background: linear-gradient(135deg, #030712, #1e293b); */
  /* background-color: #0f172a;
  background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
  background-repeat: repeat; */
  background:linear-gradient(135deg, #0b0b0b 0%, #141414 50%, #0b0b0b 100%);
  color: #e5e5e5;
  gap: 100px;
}

/*-------Header---------*/

head{
  display: flex;
}
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 12px 16px;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border-soft);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.navbar .nav-inner{
  max-width: 1100px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.nav-list {
  background-color: rgba(255, 255, 255, 0);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
}

.nav-list li:hover{
 color: #000000;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(100px) saturate(180%);
  -webkit-backdrop-filter: blur(0px) saturate(180%);
  border-radius: 900px; /* iOS pill shape */
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

  /* .nav-list li a {
 background-size: 200px;
  padding: 10px ; 
  font-size:30px;
 color: #ffffff;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 900px; /* iOS pill shape * /
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);  

}*/

/* .nav-list li a:hover {

} */

Ul{
  margin: auto;
  background-color: rgb(0, 0, 0);
}

li{
  border-radius: 0px;
  /* overflow:;  */
  background-color: azure;
  /* float:right; */
  padding:14px 16px;
  /* color: #ffffff;*/
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 900px; /* iOS pill shape */
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
} 

a{
    color:white;
    text-decoration:none;
}


/*-------Main---------*/
main {
  flex: 1;
  display:flex;
  margin-left: 10%;
  margin-right: 10%;
  /* flex-direction: column; */
  /* justify-content: center; */
} 


/*-------footer---------*/
footer {
  display: flex;
  flex-direction: column;
  margin: 1%;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  /* backdrop-filter: blur(100px) saturate(180%);
  -webkit-backdrop-filter: blur(0px) saturate(180%); */
  border-radius: 10px; /* iOS pill shape */
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); */
  padding: 1%; 
}

.socials{
  display: flex;
  gap: 20px;
}

#instagram{
 font-size:large;


}

 #instagram :hover{
  font-size: x-large;
 }

#footer-text{
padding-left: 200px;
 
}

/* --------------------------------------------------------Commom End----------------------------------------------------------- */


/* -------------------------------------Home.html--------------------------------------- */


/*-------About Me---------*/
.page-wrapper {
  flex:1;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  /* gap:0px; */
  margin:1%;
}

.h1{
  font-size: 350%;
  text-decoration: underline;
} 

/* p {
  font-size: x-large;
  text-align: center;
} */

#h2{
  font-size: xx-large;
  text-decoration-line: underline;
}

#about-me{
  flex:1;
  display: flex;
  margin: 1%;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.5);
  /* backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); */
  border-radius: 18px;
  /* box-shadow: 0 12px 30px rgba(0,0,0,0.35); */
} 

#AboutMe2{
  display:flex;
  font-size: xx-large;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 100px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); */
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);

}  

.about-text {
  display:flex;
  font-size:x-large;
  text-align: center;
  /* padding-left: 0% ;
  padding-right: 30% ;*/
} 

#home-text{
  font-size: x-large;
}

#Certifications{
  flex:1;
  display:flex;
  justify-content: space-between;
  padding: 50px;
  padding-top: 35px;
  margin: 1%; 
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); */
  border-radius: 10px; /* iOS pill shape */
  border: 2px solid rgba(255, 255, 255, 0.5);
    
}

#About-boottom{
  flex:1;
  display: flex;
  justify-content: space-between;
}

#AWSverify:hover{
  transition: ease;
  color: black;
  background:  rgb(255, 255, 255);
}


#AWSverify{
  margin-left: 10px;
  padding-left: 10px ;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size:15px;
  color: #fff;
  background: rgba(255, 255, 255, 0);
  /* backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%); */
  border-radius: 10px; /* iOS pill shape */
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  /* cursor: pointer;  */
}

#AWS_img{
  flex:1;
  /* padding: 0px 0px 0px 150px; */
  padding-top: 30px;
  display: flex;
  justify-content: right;
  align-items: center;
}

#Badge-img{
  height:150px;
}

.Learnings{
  flex: 1;
  padding: 50px;
  padding-top: 35px;
  margin: 1%; 
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 10px; /* iOS pill shape */
  border: 2px solid rgba(255, 255, 255, 0.5);
}


/* -------------------------------------Projects.html--------------------------------------- */

.Projects{
  flex:1; 
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 100px;
  
}

#p1{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px ;
  padding-bottom: 50px;
  font-size: 700%;
  text-decoration-line: underline;
  background: rgba(255, 255, 255, 0.08);
 border: 1px solid rgba(255, 255, 255, 0.18);
   /* backdrop-filter: blur(14px); 
  -webkit-backdrop-filter: blur(14px);*/
  border-radius: 10px; /* iOS pill shape */
  border: 2px solid rgba(255, 255, 255, 0.5);
}

#Portfolio{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10%;
  margin-right: 10%;
  padding:100px ;
  font-size: xxx-large;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px; /* iOS pill shape */
  border: 2px solid rgba(255, 255, 255, 0.5);
  #Portfolio-tag :hover{
  color: #000000;
  text-decoration: underline;
  
  }
  #Portfolio-tag:hover + #Languages{
    color: rgb(20, 143, 22);
  }
}

#SFMS{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10%;
  margin-right: 10%;
  padding:100px ;
  font-size: xxx-large;
  background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.18);
  /*backdrop-filter: blur(14px); 
  -webkit-backdrop-filter: blur(14px);*/
  border-radius: 10px; /* iOS pill shape */
  border: 2px solid rgba(255, 255, 255, 0.5);
  #SFMS-tag :hover{
  color: #000000;
  text-decoration: underline;
  }
  #SFMS-tag:hover + #Languages{
  color: goldenrod;
  }
}



#GBT{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10%;
  margin-right: 10%;
  padding:100px ;
  font-size: xxx-large;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); */
  border-radius: 10px; /* iOS pill shape */
  border: 2px solid rgba(255, 255, 255, 0.5);

  #GBT-tag :hover{
    color: #000000;
    text-decoration: underline;
  }  
  #GBT-tag:hover + #Languages{
    color: rgb(204, 0, 255);
  }
}

#HGRS{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10%;
  margin-right: 10%;
  padding:100px ;
  font-size: xxx-large;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); */
  border-radius: 10px; /* iOS pill shape */
  border: 2px solid rgba(255, 255, 255, 0.5);
  #HGRS-tag :hover{
    color: #000000;
    text-decoration: underline;
  }
  #HGRS-tag:hover + #Languages{
  color: rgb(227, 20, 20);  
  }
}

#Languages{
  color: darkgrey;
  font-size: x-large;
}


/* -------------------------------------Architecture.html--------------------------------------- */

.Architecture-main{
 margin-left: 300px; 
 margin-right: 200px;
}

.Architecture-text{
  display:flex;
  font-size: xx-large;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 40px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); */
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.wrap{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center
}

.hint{
  color: rgba(229,229,229,.70);
  margin: 0 0 12px 0;
  font-size: 14px;
  text-align:center;
}

svg{
  width: 100%;
  height: auto;
  display:block;
}

.box{
  fill: rgba(255,255,255,0.08);
  stroke: rgba(255,255,255,0.18);
  stroke-width: 1.5;
}

.line{
  stroke: rgba(255,255,255,0.35);
  stroke-width: 3;
  stroke-linecap: round;
}

.title{
  fill: #e5e5e5;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.sub{
  fill: rgba(229,229,229,.70);
  font-weight: 600;
  font-size: 13px;
}