* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}
html {
  scroll-behavior: smooth;
}
body{
     background-color: #fbffff;
     margin: 0;
     padding: 0;
}
/*Nav*/
nav{
	color: black;
	background-color: transparent;
}

.navbar-nav .nav-link.active {
    color: #00FFFF !important;  
    font-weight: bold;
}
/* Navbar link styles */
.nav-link {
    color: white; /* Default text color */
    position: relative; /* Allows for absolute positioning of the pseudo-element */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

/* Hover state for navbar links */
.nav-link:hover {
    color: #00FFFF; 
}
/* Adding neon glow effect using a pseudo-element */
.nav-link::after {
    content: ""; /* Empty content for the pseudo-element */
    position: absolute; /* Positioning relative to the parent */
    left: 0; /* Align to the left */
    bottom: 0; /* Align to the bottom */
    width: 100%; /* Full width */
    height: 2px; /* Height of the neon line */
    background-color: rgba(0, 204, 255, 0.7); /* Neon color */
    transform: scaleX(0); /* Start with no scale */
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}
/* Scale the neon effect on hover */
.nav-link:hover::after {
    transform: scaleX(1); /* Scale to full width on hover */
    box-shadow: 0 0 5px rgba(0, 204, 255, 0.7), /* Neon-like shadow */
                0 0 10px rgba(0, 204, 255, 0.7),
                0 0 20px rgba(0, 204, 255, 0.5); /* Adjust these values for intensity */
}

#logo{
    width: 30px;
    height: 30px;
}

/*end of nav*/

/*landing*/
/* Neon glow effect for the profile image */
#profile img {
   
    animation: neonGlow 1.5s ease-in-out infinite alternate; /* Original animation timing */
}

@keyframes neonGlow {
    0% {
        box-shadow: 
            0 0 3px rgba(0, 204, 255, 0.5), 
            0 0 5px rgba(0, 204, 255, 0.5);
    }
    50% {
        box-shadow: 
            0 0 6px rgba(255, 255, 255, 0.8), 
            0 0 10px rgba(0, 204, 255, 0.8); /* Slightly brighter glow */
    }
    100% {
        box-shadow: 
            0 0 3px rgba(0, 204, 255, 0.5), 
            0 0 5px rgba(0, 204, 255, 0.5);
    }
}

.text-box {
    background-color: rgba(18, 18, 18, 0.7); /* Dark semi-transparent background */
    padding: 20px; /* Space inside the box */
    border-radius: 10px; /* Slightly rounded corners for aesthetic */
}
#title {
    color: #00FFFF; /* Neon Cyan */
       text-shadow: 
        0 0 3px rgba(0, 153, 153, 0.7),  /* Softer light glow */
        0 0 6px rgba(0, 153, 153, 0.5),  /* Medium glow */
        0 0 9px rgba(0, 153, 153, 0.3);  /* Fainter glow */
}

#project-title{
   color: #008B8B; /* Neon Cyan */
}

a    {
  text-decoration: none; 
  color: inherit;        
}
a:hover {
    color: #00FFFF; 
}
.transparent-button {
  background-color: transparent;
  color: #00FFFF;  /* Set the text color (adjust as needed) */
  padding: 10px 20px; /* Adjust padding as necessary */
  text-decoration: none;  /* Remove underline */
  border: 2px solid #00FFFF;  /* Set the border color */
  border-radius: 5px;  /* Round the corners */
  font-size: 16px;  /* Set the font size */
  cursor: pointer;  /* Change the cursor to pointer */
  transition: all 0.3s ease;  /* Smooth transition for hover effects */
}

.transparent-button:hover {
  background-color: #00FFFF;  /* Background color on hover */
  color: white;  /* Change text color on hover */
  border-color: #0056b3;  /* Darken border on hover */
}


#profile{
	width: 300px;
	height: 300px;

}
#landing {
    background: 
    linear-gradient(
        rgba(0, 0, 0, 0.59),
        rgba(0, 0, 0, 0.59)
        ), 
    url("./images/background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    
}

/*end of landing*/

/*card in projects and tools*/

.project .card {
    display: flex;
    flex-direction: column; /* Ensure the content stretches vertically */
}

#projects{
    background-color: #fbffff;
}
#tools{
    background-color:  #fbffff;
  
}

.container {
    padding: 1rem; /* Adjust padding as needed */
}

.card {
    margin-bottom: 1rem; /* Spacing between cards */
}


.card-body img {
    max-width: 50%; /* Adjust this value to control logo size */
    height: 75%; /* Maintain aspect ratio */
    margin: auto; /* Center the images */
    display: block; /* Necessary for centering */
}
.card {
    margin-bottom: 1rem; /* Spacing between cards */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for shadow and scaling */
    position: relative; /* Necessary for z-index to work properly */
}

.card:hover {
    transform: scale(1.05); /* Scale the card to 105% of its original size */
    box-shadow: 0 0 5px rgba(0, 139, 139, 0.7),  /* Darker cyan-like shadow */
                0 0 10px rgba(0, 139, 139, 0.5), /* Medium glow */
                0 0 20px rgba(0, 139, 139, 0.3); /* Fainter glow */
    z-index: 10; /* Bring the hovered card to the front */
}

/*end of card in projects and tools*/

/*contact section*/
#contact {
  padding-top: 30px; 
  margin-top: 0;
  height: 80vh; 
  background-color: #00ecbc;;
}
.text-box2 {
    background-color: rgba(18, 18, 18, 0.7); /* Dark semi-transparent background */
  
}
.form-label{
    color: #008B8B;
}
.custom-button {
    background-color: #131114; /* Custom color */
    color: white; /* Text color */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

/* Hover state */
.custom-button:hover {
    background-color:#00FFFF; /* Darker shade on hover */
    color:  #131114;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Shadow on hover */
    transform: translateY(-2px); /* Slight upward movement */
}

/* Active state (when button is clicked) */
.custom-button:active {
    background-color: #008B8B; /* Even darker shade for active state */
    color:  whitesmoke;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Reduced shadow */
    transform: translateY(0); /* Reset upward movement */
}
.contact-logo{
            width: 40px; /* Adjust the size of the logo */
            vertical-align: middle; /* Aligns with text */
           
}
.contact-logo:hover {
            transform: scale(1.2); 
}
#fb{
    width: 30px;
    height: auto;
}
#linkedin{
    width: 30px;
    height: auto;
}
#github{
    width: 30px;
    height: auto;
}
#gitlab{
    width: 30px;
    height: auto;
}
}
#contact-img{
    height:auto   
}


/*end of contact section*/