body{
    background-color: #1f242d;
    
 
}

#project {
  position: relative;
  overflow: hidden;
}




.lottie-background {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Or adjust as needed */
  z-index: -1;
  pointer-events: none;
}

.lottie-background lottie-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-link:hover{
  color: #7cf03d !important;
}



.home{
    color: white;
    margin-top: 100px;
}





.home-info p{
 
    word-spacing: 0.05em;
    line-height: 1.6;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 0;
   
}

.btn-sci{
    display: flex;
    align-items: center;
    
      
   
}



.btn{
    display: inline-block;
    background:#7cf03d;
    border: 2px solid #7cf03d;
    border-radius: 40px;
    box-shadow: 0 0 10px #7cf03d; 
    font-size: 16px;
    transition: .5s;
    color: #1f242d;
}

.btn:hover{
    background: transparent;
    box-shadow: none;
}

.btn-sci .sci{
    margin-left: 10px;
}

.btn-sci .sci a{
    display: inline-flex;
    padding: 8px;
    text-decoration: none;
    color: white;
    border: 1px solid white;
    border-radius: 50%;
}

.btn-sci .sci a:hover{
    color: #1f242d;
    border: 1px solid #7cf03d;
    box-shadow: 0 0 10px #7cf03d; 
    transition: .5s;
    background-color: #7cf03d; ;
}





.home-img .img-box{
    position: relative;
    width: 32vw;
    height: 32vw;
      
    border-radius: 50%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.home-img .img-box::before,
.home-img .img-box::after{
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: conic-gradient(transparent,transparent,transparent,rgb(0, 255, 255));
    transform: rotate(0deg);
    animation: rotate-border 10s linear infinite;
   
}

.home-img .img-box::after{
   animation-delay: -5s;
}

@keyframes rotate-border{
    100%{
    transform: rotate(360deg);

    }

}

.home-img .img-box .img-item{
    position: relative;
    /* background-color: #1f242d; */
    height: 100%;
    width: 100%;
    border-radius: 50%;
    display: flex;
    border: .1px solid #1f242d;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

.home-img .img-box .img-item img{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode:lighten ;
}


.home-info span{
    color: #7cf03d;
}


.typewriter-container {
    display: inline-block;
    position: relative;
    width: 19ch; /* Adjust to match your longest word */
    height: 1.2em;
    overflow: hidden;
    vertical-align: bottom;
}

.typewriter-container span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #7cf03d;
    animation: typing 3s steps(15) forwards, blink 0.7s step-end infinite, cycle 9s linear infinite;
    animation-delay: calc(var(--i) * 3s);
    opacity: 0;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink {
    50% { border-color: transparent; }
}

@keyframes cycle {
    0% { opacity: 1; }
    33.3%, 100% { opacity: 0; }
}


@media (max-width:575px){



    .home-img{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}



    
    .home{
        margin-top: 20px;
    }
    .home-info{
        padding: 20px;
       
        
    }

    .btn-sci{
        justify-content: center;
    }


 .home-img .img-box{
    margin-top: 30px;
    position: relative;
    width: 90vw;
    height: 90vw;

    border-radius: 50%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


}


.aboutme{
    margin-top: 200px;
    
    
    
   
}

.aboutme h3{
   
    color: white;
    text-align: center;
    margin-bottom: 50px;
}



.aboutme p{
    color: white;
}


.aboutme img{
    width:100%;
    margin: auto;
    
    /* box-shadow: 0 5px 40px #7cf03d; */
}


.aboutme .info-me{
    color: white;
    

}

.infome-card{
    
    backdrop-filter: blur(10px); /* frosted glass blur */
   -webkit-backdrop-filter: blur(10px); /* Safari support */
      border-radius: 15px;
    width: 100%;
    height: auto;
    padding: 20px;
    box-shadow: 0 5px 40px #7cf03d;
   
}


.aboutme .info-me h7{
    font-style: italic;
    color: gray;
}


.education{
    margin-top:50px;
}

.education h7{
    font-style: italic;
    color: gray;
    text-align: center;
 
   
}


.aboutme .info-me ul li {
    margin-top: 10px;
}


.skills h3{
    padding-top: 20px;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}

.skills{
    margin-top: 200px;
      margin-bottom: 100px;
      
}



.skills .skills-box{
  
    box-shadow: 0 5px 40px #7cf03d;
    height: 100%;
    width: 100%;
    padding: 10px;
     border-radius: 15px;
    padding-bottom: 30px;
    margin-bottom: 20px;
}


@media (max-width:575px){
    .aboutme img{
    width: 100%;
    margin: auto;
    /* box-shadow: 0 5px 40px #7cf03d; */
}



.aboutme .info-me{
    color: white;
    margin-top: 50px;

}


}




/* lock */

html,body{
	overflow-x:hidden;
	width:100%;
}



/* progress bar  */



  .progress {
      height: 6px;
      background-color: #e9ecef;
      margin-bottom: 20px;
    }
    .progress-bar-custom {
      background-color: #7cf03d;
    }
    .skill-label {
      font-weight: 500;
      margin-bottom: 4px;
      color: white;
    }

        .skill-label span{
            color: #7cf03d;
        }
/* 
.skill-label span{

        color: #7cf03d;
        text-align: center;

} */


.skill-label {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  margin-bottom: 4px;
}



/* large devices  */

/* @media (max-width:468px){
    .skills .skills-box{
      margin-bottom: 10px;
    }

} */




/* projects */

.project-info h3{
  color: white;
  text-align: center;

}

.project-box{
    color: red;
    margin-bottom: 40px;
    width: 100%;
    box-shadow: 0 5px 20px #7cf03d;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    
    
}

.project-box img{
    width: 100%;
    height: 100%;
    
}





.project-box img {
  width: 100%;
  display: block;
}

.project-content p {
  line-height: 1; /* or try 1.2 for slight spacing */
  margin: 0;       /* removes space around the paragraph */
}

.project-box .project-content {
 text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0;
  
 padding: 20px;
  background: linear-gradient(rgba(0, 0, 0, 0.2), #7cf03d);
  margin: auto;
  color: black;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.project-box .project-content h3{
    text-align: left;
    text-decoration: none;
    color: white;

   
}

.inline-heading {
        display: inline-flex;
        align-items: center;
        font-size: 30px;
}

.inline-heading i{
    font-size: 20px;
}

 

.project-box .project-content h3 a:hover{
  
    text-decoration: none;
    color: red;
   
}

.project-box .project-content h3 a{
  
    text-decoration: none;
    color: white;
   
}

.project-box:hover .project-content {
    
  opacity: 1;
 
}



/* poster  */

.poster-info{
     margin-top: 100px;
}
.poster-card{
    align-items: center;
    margin-bottom: 40px;
    color: red;
    width: 100%;
    box-shadow: 0 5px 20px red;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.poster-card img{
    width: 100%;
    display: block;
}

.poster-content p {
  line-height: 1; /* or try 1.2 for slight spacing */
  margin: 0;       /* removes space around the paragraph */
}

.poster-card .poster-content {
 text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0;
  
 padding: 20px;
  background: linear-gradient(rgba(0, 0, 0, 0.2), red);
  margin: auto;
  color: white;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


.poster-card:hover .poster-content {
    
  opacity: 1;
 
}



.posterbox-info{
    margin-top: 40px;
}
.poster-box img{
    width: 100%;
    display: block;
}



.poster-box{
    align-items: center;
    margin-bottom: 40px;
    color: white;
    width: 100%;
    box-shadow: 0 5px 20px #7cf03d;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}


.poster-box .posterbox-content {
 text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0;
  
 padding: 20px;
  background: linear-gradient(rgba(0, 0, 0, 0.2), #7cf03d);
  margin: auto;
  color: white;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


.poster-box:hover .posterbox-content {
    
  opacity: 1;
 
}




.posterbox-content p {
  line-height: 1; /* or try 1.2 for slight spacing */
  margin: 0;       /* removes space around the paragraph */
}


/* .contact-info{
    text-align: center;
} */

.contact-info h3{
    text-align: center;
    color: white;
}


.contact-info p{
    color: white;

    max-width:400px;
    width: 100%;
}


.contact-card{
    
    width: 100%;
    margin-top: 50px;
    padding: 50px;
    box-shadow: 0 5px 20px #7cf03d;
    border-radius: 10px;
}



.center-section {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically if you give it a height */
     /* centers the text */
  flex-direction: column;
  padding: 40px 20px;
}



/* mail form */


.form-info p{
    color: white;

    max-width:600px;
    width: 100%;
}


.center-section h3{
 color: white;
 text-align: center;
}

.center-section h4{
 color: white;
 text-align: center;
}



.form-card{
    
    width: 100%;
    margin-top: 50px;
    padding: 50px;
    box-shadow: 0 5px 20px #7cf03d;
    border-radius: 10px;
}


form {
  margin-top: 20px;
}

input, textarea {
  border: 1px solid #7cf03d;
  border-radius: 10px;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background: #1f242d;
  color: white;
}


button {
  padding: 10px 20px;
  background: #7cf03d;
  color: #fff;
  border: none;
  cursor: pointer;
  border: 2px solid #7cf03d;
  border-radius: 10px;
  box-shadow: 0 0 10px #7cf03d; 
  transition: .5s;
}



button:hover{
    background: transparent;
    box-shadow: none;
}








.navbar-scrolled{
    /* background-color: black; */
    /* box-shadow: 0 3pc 10px rgba(0,0,0,0.15); */
    transition: background 0.2s linear;

}


/* .navbar-scrolled {
  transition: background-color 0.3s ease;
} */


/* copyright */

.copyright{
    text-align: center;
    color: white;
    margin-top: 100px;
}



.copyright a{
    text-decoration: none;
    color: #7cf03d;
    
}





/* role animation */


/* .animated-text{
    font-size: 34px;
    font-weight: 600;
    min-width: 280px;
} */



.animated-text span{
    position: relative;
}

.animated-text span::before{
    content: "Graphic Designer";
    color: #7cf03d;
    animation: words 20s infinite;
}

.animated-text span::after{
    top: 0;
    content: "";
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    background-color: #1f242d;
    border-left: 2px solid #7cf03d;
    right: -8px;
    animation: cursor .8s infinite, typing 20s steps(14) infinite;
}

@keyframes cursor {
    to{
        border-left: 2px solid #ff7f5000;
    }
}

@keyframes words {
    0%,20%{
        content: "Graphic Designer";
    }
    21%,40%{
        content: "Web Developer";
    }
    41%,60%{
        content: "Digital marketing analyst";
    }
    61%,80%{
        content: "Web Developer";
    }
    81%,100%{
        content: "Digital marketing analyst";
    }
}

@keyframes typing {
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,45%,60%,65%,80%,85%{
        width: calc(100% + 8px);
    }
}