:root{
    --main:#0a192f;
    --text:#64ffda;
    --secondary:#7983A0;
    --dark-blue:#112240;
    --border: rgba(255, 255, 255, 0.1);
    --white:#fff;
}
body{
    background-color: var(--main);
    color: var(--secondary);
    font-family: 'Poppins', sans-serif;
    
}
html {
  scroll-behavior: smooth;
}

.Home {
  background-color: var(--main); 
  background-image:
    radial-gradient(1px 1px at 10px 10px, #64ffda, transparent),
    radial-gradient(1px 1px at 40px 60px, #64ffda, transparent),
    radial-gradient(1px 1px at 80px 120px, #64ffda, transparent),
    radial-gradient(1px 1px at 160px 200px, #64ffda, transparent),
    radial-gradient(1px 1px at 300px 80px, #64ffda, transparent);
  background-size: 200px 200px;
  animation: moveStars 30s linear infinite;
}


@keyframes moveStars {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 1000px 1000px, 500px 500px, 800px 1200px, 700px 900px, 400px 800px;
  }
}


#typed{
    border-right: 3px solid #64ffda;
}
.nav-item{
    margin-left: 10px ;
    margin-right: 10px ;
    font-weight: 500;
}
.navbar-brand{
    color: var(--text);
    font-weight: 700;
    font-size: larger;
}
nav.navbar {
  position: sticky;
  top: 0;
  z-index: 100; 
  background-color: var(--main); 
  
}
.Resume{
    background-color: var(--main);
    color: var(--text) !important;
    max-width: 80px;
    height: 40px;
    border-radius: 4px;
    border: var(--text) 1px solid;
    text-align: center;
    display: flex;
    align-items: center;   
  justify-content: center;
  color: inherit;
}
.Resume a{
    text-decoration: none;
    outline: none;
    color: var(--text);
}
.Resume:hover{
    background-color: var(--text);
    a{
        color: var(--main) !important;
    }
    
}
.navbar-toggler{
   border: none;
}
 .nav-link:hover {
 color: var(--text) !important;

}
.one{
    min-height:  450px;
    
}
.View{
    background-color: var(--main);
    color: var(--text) !important;
    border: var(--text) 2px solid !important;
     width: 150px;
     margin: 20px;
}
.View:hover,
.get,
.get:hover{
    background-color: var(--text);
    color: var(--main) !important;
    width: 150px;
}
h1{
    color: var(--white);
    font-size: xx-large;
    font-weight:bolder;
    margin: 20px;
}
.title{
    font-size: xx-large;
    font-weight: bold;
}
p {
  white-space: normal;
  max-width: 700px;
  margin-top: 20px;
}
.icons a{
    color: var(--secondary);
    font-size: x-large;
    margin-top: 20px;
     transition: all 0.2s ease;
}
.icons a:hover{
    color: var(--text);
    margin-top: 10px;
   
}

.aboutt{
    background-color: var(--main);
    margin-top: 80px;
    height: fit-content;
    width: 100% !important;
   
}

.head> span{
    color: var(--text);
    font-size: large !important;
    margin-left: 50px;

}
.head{
    color: var(--white);
    margin-top: 40px;
    text-align: center;
    padding-bottom: 15px;
    font-weight: bold;
    margin-right: 50px;
    
}

.myphoto{
  width: 310px;  
  height: 300px;
  margin-bottom: 30px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 50px;
  z-index: 2;
  position: relative;
   transition: transform 0.6s cubic-bezier(.22,.9,.28,1); 
  
}

.photo-wrapper{
    position: relative;
    display: inline-block;
   
}
/* .{
    content: "";
    position: absolute;
   top: 68px;
   left: 30px;
   width: 300px;  
  height: 300px;
  border: 2px solid var(--text);
  border-radius: 10px;
 
} */
.down{
   color: var(--text);
    margin-right: 100px;
    font-size: xx-large;
    position: absolute;
}
.para p{
    line-height: 1.7;
    margin-bottom: 30px;
    font-size: large;
}
.para{
    max-width: 700px;
    
}
.tec h6{
    color: var(---blue);
    letter-spacing: 1px;
    margin-left: 5px;
    max-width: 300px;
    margin-bottom: 20px;
}
.tec ul li{
    list-style: none;
   
}

.technologies{
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px;
    padding: 0;
}
.technologies i{
    color:var(--text);
}

.projects{
    background-color: var(--main) !important;
}



.proImg img{
   
    height: 400px;
    filter: grayscale(25%);
    margin-top: 50px;
    border-radius: 30px;
    
}
.proImg img:hover{
   filter:contrast(90%);
}
.proDetails h2{
    color: var(--white);
    font-weight: bold;
    font-size: larger;
    
    margin-top: 15px;
}
.Details{
    background-color: var(--dark-blue);
    font-size: medium;
    padding: 30px;
    border-radius: 10px;
    border: 1px var(--border) solid;
   
}
.proDetails ul{
    display: flex;
    padding: 0;
    
}
.proDetails ul li{
    list-style: none;
    padding: 3px 10px;
    background-color: var(--main);
    border-radius: 6px;
    border: 1px var(--border) solid;
    text-align: center;
   margin-right: 7px;
   font-size:small;
}
.icons a{
    margin-right: 20px;
    font-size: x-large;
   
}
#Experience{
    background-color: var(--main);
    
}

.personalExperience{
    background-color: var(--dark-blue);
    padding: 30px;
    border-radius: 10px;
    border: 1px var(--border) solid;
    margin-bottom: 40px;
    position: relative;
    transition: all 0.2s ease;
}  
.personalExperience:hover{
    transform: scale(1.02);
}
.personalExperience::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 10%;
  width: 2px;
  height: 80%;
  background-color: var(--text);
  border-radius: 5px;
}

.personalExperience > h5{
    color: var(--white);
   
}
.personalExperience i{
    color: var(--text);
    margin-right: 5px;
}
.personalExperience >div{
    margin-top: 20px;
}
#contact{
    background-color: var(--main);
    padding-bottom: 60px;
}
.sendMassage,
.connect,
.response{
    background-color: var(--dark-blue);
    padding: 25px;
    border-radius: 10px;
    border: 1px var(--border) solid;
    margin-bottom: 23px;

}
.sendMassage{
    padding: 40px;
    
}
.sendMassage >h5,
.connect >h5,
.response>h6{
    margin-bottom: 20px;
}
.sendMassage label{
    color: var(--white);
    margin-bottom: 5px;
}
.sendMassage input{
    background-color: var(--dark-blue);
    border-radius: 8px;
    border: 1px var(--border) solid;
    padding: 5px 0px 5px 10px;
    margin-bottom: 15px;
   color:#E6F1FF ;
   caret-color: var(--white);
}
.sendMassage input::placeholder{
    color: var(--secondary) !important;
    font-size: small;
}
#message{
   padding-bottom:30px ;
}

.sendMassage button,
.sendMassage button:hover{
  background-color: var(--text);
  color: var(--dark-blue);
  
}
.sendMassage input:focus{
   box-shadow: 0px 0px 4px var(--text);
   outline: none;
   border-color: var(--text);
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--main) inset !important;
  -webkit-text-fill-color: var(--white) !important;
 
 
}


.connect>article{
    margin-bottom: 15px;
}
.connect>article i{
    margin-right: 5px;
}
.connect >p{
   color: var(--white);
   margin-top: 20px;
  
}
.connect >section{
    margin-top: -25px;
}
.response >p{
    font-size: medium;
}
.Get >h2{
 margin-bottom: -10px;

}

.br{
    background-color: var(--border);
    height: 1px;
   
}

footer{
   
    background-color: var(--main);
    padding: 20px;
    font-size: small;
}
footer >.icons a{
    font-size: x-large !important;
}
footer >article{
    margin-top: 10px;
}
.back i{
 margin-right: 3px;
 
}
.back:hover{
    color: var(--text) !important;
}
a{
    text-decoration: none;
    color: inherit;
}
section {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}
section.show {
  opacity: 1;
  transform: translateY(0);
}
.light-mode {
  --main: #f0f4f8;
  --dark-blue:#FFFFFF;
  --text:  #0D9488;
  --secondary: #475569;
  --secondaryy: #0F172A;
  --white:#0F172A;
  --border:#e0e0e0;

  #typed,
  .head{
    color: #0F172A !important;
  }
  .sendMassage input ,
  .proDetails ul li{
    background-color: #F3F4F6;
    color: #0a192f;
    caret-color: black;
  }

}
    .mode,.mode:hover{
        bottom: 100px;    
    right: 20px;
    position:fixed;
    z-index: 30;
    padding: 15px;
        margin: 15px;
        justify-content: center;
        transition: all 0.4s ease;
        border: 2px var(--border) solid;
        border-radius: 7px;
        animation: floatUpDown 1.5s ease-in-out infinite;
      
    }
    @keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); 
  }
}
.dark,.dark:hover{
    background-color: var(--dark-blue);
    color: var(--text);
   
}
.dark:hover{
    transform: scale(1.1);
}
.light,.light:hover{
    
    color: var(--text) ;
   
   
}