/* Hide the default cursor */
body {
   background: linear-gradient(rgb(255, 252, 232), rgb(247, 239, 230), rgb(240, 225, 228), rgb(232, 212, 225), rgb(224, 199, 223));
   cursor: none; /* Hide the default cursor */
   margin: 0;
   width: 100vw;
}

/* Custom cursor */
.custom-cursor {
   width: 20px;
   height: 20px;
   background-color: lightpink;
   opacity: 25%;
   border-radius: 50%;
   position: fixed; /* Ensures it follows the mouse without scrolling issues */
   top: 0;
   left: 0;
   pointer-events: none; /* Prevents interference with clicks */
   transition: opacity 0.2s ease, transform 0.05s linear;
   z-index: 10000;
}
/* Pop-up animation */
@keyframes popUp {
   from {
       transform: translateY(50px); /* Start slightly below */
       opacity: 0; /* Start invisible */
   }
   to {
       transform: translateY(0); /* End at the original position */
       opacity: 1; /* Fully visible */
   }
}

/* Initial state for pop-up elements */
.personalportfolio, .header1 {
   opacity: 0; /* Hidden by default */
   transform: translateY(50px); /* Start slightly below */
   transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

/* Active state to trigger the animation */
.personalportfolio.active, .header1.active {
   animation: popUp 0.5s ease forwards; /* Apply the pop-up animation */
}

.navbar {
   background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
   backdrop-filter: blur(10px); /* Apply blur effect */
   padding: 10px 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: sticky;
   top: 0;
   width: 100%;
   z-index: 1000;
   border-bottom: 2px solid white; /* Optional: Add a white border at the bottom */
}

@keyframes slideDown {
   from {
       transform: translateY(-100%); /* Start off-screen above */
       opacity: 0; /* Start invisible */
   }
   to {
       transform: translateY(0); /* End at its original position */
       opacity: 1; /* Fully visible */
   }
}

/* Initial state for the navbar */

/* Active state to trigger the animation */
.navbar1.active {
   animation: slideDown 0.5s ease forwards; /* Apply the slide-down animation */
}

.navbar1 {
   padding: 10px 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: sticky;
   top: 0;
   width: 100%;
   z-index: 1000;
   opacity: 0; /* Hidden by default */
   transform: translateY(-100%); /* Start off-screen above */
   transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

 
 .navbar .logo {
    color: black;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
 }
 .navbar .logo:hover{
    color:#a85361;
    transition: color 0.3s;
 }
 
 .navbar ul {
    list-style: none;
    display: flex;
    margin-left: 100px;
 }
 
 .navbar ul li {
    margin: 0 15px;
 }
 
 .navbar ul li a {
    color: black;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
 }
 
 .navbar ul li a:hover {
    color: #a85361;
 }
 
 /* Menu toggle button */
.menu-toggle {
   display: none;
   font-size: 24px;
   color: black;
   cursor: pointer;
   padding: 5px 10px; /* Add padding for better appearance */
   transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

.menu-toggle:hover {
   color: #a85361;

}

/* Navigation links for mobile */
@media (max-width: 768px) {
   .navbar ul {
       display: none;
       flex-direction: column;
       width: 50%;
       position: absolute;
       top: 50px;
       left: 0;
       background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
       border: 2px solid pink; /* Add a pink border for consistency */
       border-radius: 5px; /* Rounded corners */
       padding: 10px 0; /* Add padding for spacing */
       z-index: 1000;
   }

   .navbar ul.show {
       display: flex;
      align-items: center;
      }

   .navbar ul li {
       margin: 10px 0; /* Add spacing between links */
   }

   .navbar ul li a {
       color: black; /* Match the portfolio's text color */
       font-size: 18px; /* Adjust font size for readability */
       text-decoration: none; /* Remove underline */
       padding: 10px 20px; /* Add padding for better clickability */
       border-radius: 5px; /* Rounded corners */
       transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
      }

   .navbar ul li a:hover {
       background-color: pink; /* Pink background on hover */
       color: white; /* White text on hover */

   }

   .menu-toggle {
       display: block;
   }
}

 .herosection{
    margin: 225px;
    margin-bottom: 350px;
 }
 .personalportfolio{
    color: black;
    font-size: 25px;
    margin-top: 60px;
    display: flex;
    justify-content: center;
 }
 .header1{
    font-size: 100px;
    display: flex;
    justify-content: center;
 }


 .aboutme
 {
   background-color: white;
   padding: 50px;
   border-radius: 15px;
   margin-bottom: 100px;
 }
 .about-container
 {
   display: flex;
   justify-content: center;
   align-items: center;
   justify-items: center;
 }
 .about-information
 {
   font-size: 20px;
   color:black;
 }
 


 /* Pop-up animation */
@keyframes popUp {
   from {
       transform: translateY(50px); /* Start slightly below */
       opacity: 0; /* Start invisible */
   }
   to {
       transform: translateY(0); /* End at the original position */
       opacity: 1; /* Fully visible */
   }
}

   


/* Active state to trigger the animation */
.card-container.active {
   animation: popUp 0.5s ease forwards; /* Apply the pop-up animation */
}

/* Card container */
/* Card container to align them in a row */
.card-container {
   display: flex;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap; /* Ensures responsiveness */
   padding: 20px;
   margin-bottom: 50px;

   opacity: 0; /* Hidden by default */
   transform: translateY(50px); /* Start slightly below */
   transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */

}

/* Individual card styling */
.card {
   width: 18rem;
   background-color: white;
   border-radius: 10px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   text-align: center;
   margin: 20px;
}

/* Image on top of the card */
.card-img-top {
   width: 100%;
   height: 250px; /* Fixed height for consistency */
   object-fit: cover; /* Ensures images maintain aspect ratio */
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

/* Card body */
.card-body {
   padding: 15px;
}

/* Card title */
.card-title {
   font-size: 1.25rem;
   font-weight: bold;
   margin-bottom: 10px;
}

/* Card text */
.card-text {
   font-size: 0.9rem;
   color: #555;
   margin-bottom: 15px;
}

/* Button styling */
.btn {
   display: inline-block;
   text-decoration: none;
   background-color: #007bff;
   color: white;
   padding: 8px 12px;
   border-radius: 5px;
   font-size: 0.9rem;
   transition: background-color 0.3s ease;
}

/* Button hover effect */
.btn:hover {
   background-color: #0056b3;
}

/* Card hover effect */
.card:hover {
   transform: translateY(-5px);
   box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
   transform: scale(1.15);
}



h2{
   color: black;
   margin-bottom: 100px;
   font-size: 35px;
   font-weight: normal;

}

.gallery-btn {
   background-color: pink; /* Pink background */
   color: black; /* Black text */
   border: 2px solid white; /* White outline */
   padding: 10px 20px; /* Add padding for better button appearance */
   border-radius: 5px; /* Slightly rounded corners */
   font-size: 16px; /* Adjust font size */
   text-decoration: none; /* Remove underline for links */
   display: inline-block; /* Ensure proper button styling */
   transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

.gallery-btn:hover {
   background-color: white; /* Black background */
   color: pink; /* Pink text */
   border: 2px solid pink; /* Pink outline */
}



 .footer {
   background-color: rgba(255, 255, 255, 0.2);
    color: white;
    text-align: center;
    padding: 10px 0;
    width: 100%;

    border-top: 2px solid white;
 }
 
 .footer ul {
    list-style: none;
    padding: 0;
 }
 
 .footer ul li {
    display: inline;
    margin: 0 10px;
 }
 
 .footer ul li a {
    color: white;
    text-decoration: none;
 }
 
 .footer ul li a:hover {
    text-decoration: underline;
 }
 
 .footer-icon {
    width: 24px;
    height: 24px;
 }


 .aboutinformation{
    display: flexbox;
    justify-content: center;
 }
 
 img {
     transition: box-shadow 0.2s ease-in-out;
 }
 img:hover {
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Adds a shadow */
 }
 .footer ul li a:hover .fa-instagram {
     color: purple;
 }
 
 .footer ul li a:hover .fa-envelope {
     color: #D44638; 
 }
 
 .footer ul li a:hover .fa-linkedin {
     color: #0077B5; 
 }
 
 .footer ul li a i {
     transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
 }
 
 .footer ul li a:hover i {
     transform: scale(1.2); /* Slight zoom */
 }