/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }
  
/* ----------------------------------------------
   2. HEADER & NAVIGATION
---------------------------------------------- */


/* 1) HEADER (Background behind everything) */
header {
    position: fixed;       /* Stays fixed at the top, spanning 100vh */
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 0;           /* Place it behind the main content */
    
      background: url("../assets/background.png") no-repeat center center/cover;
  }
  
  /* 2) NAV (Always on top) */
  nav {
    position: fixed;       /* So it doesn’t scroll away */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;         /* Higher than everything else */
    
    /* Keep your existing styling (fonts, colors, etc.) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 70px;
    background-color: white;
    background: url(../assets/meshwhitenav.png) no-repeat center center/cover;
  }
  
 .logo-pink{
    width: 25%;
    height: auto;
 }
  
  .nav-links {
    list-style: none;
    display: flex;
    gap: 70px;
  }
  
  .nav-links li a {
    text-decoration: none;
    font-size: 1.3rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #1B1131;
    transition: color 0.3s ease;
  }
  
  .nav-links li a:hover {
    color: #E519F1;
  }
  
  /* ----------------------------------------------
     3. TITLE SCREEN
  ---------------------------------------------- */
  .title-screen {
    /* 
      Replace the background image below with your chosen image path or URL.
      background-attachment: fixed keeps the image in place as you scroll. 
    */
    background: url("../assets/background.png") no-repeat center center/cover;
    background-size: cover;
    background-attachment: fixed;
  
    /* Full-size container matching header's height */
    width: 100%;
    height: 100%;
  
    /* Flex to center the text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .title-screen h1 {
    font-size: 20rem;
    color: #fff;
    
    font-family: "dharma-gothic-c", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .sub-heading {
    margin-top: 2px;
    font-size: 1.6rem;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }

  .typewriter-container {
    display: inline-block;
    position: relative;
  }
  
  /* The main container that holds typed lines */
  #typewriter-text {
    /* We attach the blinking cursor here */
    position: relative;
    padding-right: 10px;  /* some space for the cursor */
  }
  


  /* === Different Font Styles === */
  
  /* Class for Your Name line */
  .name-style {
    font-size: 16rem;
    color: #fff;
    
    font-family: "dharma-gothic-c", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  /* Class for Designer Developer Creator.. line */
  .role-style {
    font-size: 1.3rem;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin-top: 2px;
    /* If you want some spacing above or below this line, you can add margin */
  }


  /* Scroll Down Link */
.scroll-down {
    position: absolute;
    bottom: 20px;             /* Adjust spacing from the bottom */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    opacity: 0;               /* Hidden by default */
    pointer-events: none;     /* Disable click until shown */
    transition: opacity 0.5s ease;
  }
  
  /* When visible, the scroll link appears and starts its breathing animation */
  .scroll-down.visible {
    opacity: 1;
    pointer-events: auto;
    animation: breathing 2s infinite;
  }
  
  /* Breathing (scaling) animation */
  @keyframes breathing {
    0%   { transform: translateX(-50%) scale(1); }
    50%  { transform: translateX(-50%) scale(1.1); }
    100% { transform: translateX(-50%) scale(1); }
  }
  
  

  .main-content {
    /* This container starts below the full-screen header. */
    margin-top: 100vh;  /* So it appears after the 100vh header */
    position: relative;
    z-index: 1;         /* Above the header background (z-index: 0) */
    background: url("../assets/mesh-932white.png") no-repeat center center/cover;
  }
  
  /* 3) PROJECTS SECTION */


  .projects-section {
    padding: 60px 40px;
    /* background-color: #1B1131; */
 
  
  }
  .projects-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
    color: #1B1131;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px;
  }
  
  .project-item {
    position: relative;      /* So we can position text & overlay absolutely within the box */
    overflow: hidden;        /* Hides anything extending beyond the box boundary */
    border-radius: 5px;      /* Optional if you want rounded corners */
    transition: box-shadow 0.3s ease;
    /* Keep your background color or remove it if you rely on the image:
       background-color: #f2f2f2; 
    */
  }
  
  .project-item img {
    width: 100%;
    display: block;          /* Removes extra bottom spacing on images */
    border-radius: 5px;      /* Match the container's border-radius if you want a consistent shape */
  }
  
  /* Position the text in the center (or wherever you want) on top of the image */
  .project-item .project-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(0); /*Center the text horizontally & vertically*/
    color: #fff;                      /* White text for visibility on most images */
    z-index: 2;                       /* Above the overlay and image */
    font-size: 1.3rem;                /* Adjust as desired */
    font-weight: bold;
    text-align: center;
    margin: 0;   
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;                     /* Remove default h3 margin if needed */
    /* You can also apply your custom font-family here */
  }
  
  /* Hover effect: White transparent overlay 
     We use a ::before pseudo-element as the overlay layer */
  .project-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0); /* Fully transparent by default */
    z-index: 1;                         /* Behind the text (z-index:2), but above the image */
    transition: background 0.3s ease;   /* Smooth transition of the overlay */
  }
  
  .project-item:hover::before {
    background: rgba(0, 0, 0, 0.709); /* Semi-transparent white overlay */
  }
  
  .project-item:hover {
    /* If you still want the box-shadow effect on hover: */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.656);
  }

  .project-item:hover .project-title {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  
  
  /* Existing .skills-section rules (example) */
  .skills-section {
    padding: 60px 40px;
    color: #1B1131;
    /* The main heading was already centered, but let's ensure it: */
  }
  .skills-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2rem;
  }
  
  /* Make this the flex container for side-by-side columns */
  .skills-content {
    display: flex;
    justify-content: center;  /* Center columns horizontally in the container */
    align-items: flex-start;  /* Align columns at the top (or use center if you prefer) */
    gap: 40px;               /* Space between columns */
  }
  
  /* Each column set to center its own content */
  .about-me,
  .my-skills {
    /* If you want them to share space equally: */
    flex: 1;
    max-width: 45%;  /* Optional: keep columns from getting too wide */
    
    /* Center all text and images inside this column */
    text-align: center;
    
    /* If you want to ensure paragraphs and headings are centered in a vertical stack: */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Smaller heading for each column */
  .about-me h3,
  .my-skills h3 {
    margin-bottom: 15px;
    font-size: 1.7rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  /* Paragraph text is also centered now */
  .about-me p {
    line-height: 1.4;
    /* Adjust font size or color as needed */
    max-width: 90%; /* optional: keep text narrower for readability */
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4rem;
    text-align: left;
  }

  .resume-btn {
    /* Basic button styling */
    display: inline-block;
    padding: 12px 24px;
    margin-top: 20px;
  
    background-color: #333;   /* Button background color */
    color: #fff;             /* Button text color */
    text-decoration: none;   /* Remove underlines */
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }
  
  .resume-btn:hover {
    background-color: #fff; /* Change background color on hover */
    color: #333; /* Change text color on hover */
  }
  
  
  /* The skills image is also centered and scaled */
  .my-skills img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 10px; /* space between heading and image */
  }

  /* Initially hidden with transition */

  .hidden {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }


/* Start shifted from the left */
.left {
  transform: translateX(-40px);
}

/* Start shifted from the right */
.right {
  transform: translateX(40px);
}

/* start shifted from top */

.top {
  transform: translateY(40px);
}

/* Reveal state: fully visible and in place */
.reveal {
  opacity: 1;
  transform: translateX(0);
}

  
  
  
  /* Contact Section */
  .contact-section {
    padding: 60px 150px;
  }
  
  .contact-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2rem;
  }
  

  .contact-me {
    color: white; /* White text */
    padding: 40px; /* Padding for spacing */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center text alignment */
    margin: 0 auto; /* Center form horizontally */
    background: url(../assets/mesh-932white.png) no-repeat center center/cover;
  }
  
  .contact-me h1 {
    margin-bottom: 15px;
    font-size: 1.7rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal; /* Heading color matching hover state of cards */
    color: #1B1131;
  }
  
  .contact-me label {
    font-size: 1.1rem; /* Slightly larger labels */
    margin-bottom: 15px;
    font-size: 1.7rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .contact-me input[type="text"],
  .contact-me textarea {
    width: 100%; /* Full width of the input fields */
    padding: 10px; /* Inner spacing */
    margin-top: 5px; /* Space between label and input */
    margin-bottom: 15px; /* Space between inputs */
    border: 1px solid #E519F1; /* Border color matching card background */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Font size */
    background-color:white; /* Dark background for inputs */
    color: #1B1131; /* White text */
    text-align: center;
  }
  
  .contact-me input[type="text"]::placeholder,
  .contact-me textarea::placeholder {
    color: #1B1131; /* Placeholder text color */
  }
  
  .contact-me input[type="text"]:focus,
  .contact-me textarea:focus {
    outline: none; /* Remove default focus outline */
    border: 2px solid #1B1131; /* Highlight border on focus */
  }
  
  .contact-me textarea {
    resize: none; /* Prevent resizing */
  }
  
  .contact-me .submit {
    padding: 12px 24px;
    cursor: pointer;
  
    background-color: #333;   /* Button background color */
    color: #fff;             /* Button text color */
    text-decoration: none;   /* Remove underlines */
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }
  
  .contact-me .submit:hover {
    background-color: #fff; /* Change background color on hover */
    color: #333; /* Change text color on hover */
  }
  
  /* Thank You Message */
  .contact-me2 {
    display: none; /* Hidden by default */
    text-align: center;
    padding: 40px;
    background-color: #f0dbf1; /* Match the form background */
    border-radius: 10px;
  }
  
  .contact-me2 h1 {
    font-size: 1.5rem;
    color: #E519F1; /* Use the theme accent color */
  }


  @media (max-width: 480px) {

    .logo-pink{
      width: 55%;
      height: auto;
   }
    
    .nav-links {
      list-style: none;
      display: flex;
      gap: 30px;
    }
    
    .nav-links li a {
      text-decoration: none;
      font-size: 1.1rem;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #1B1131;
      transition: color 0.3s ease;
    }

    .name-style {
      font-size: 11rem;
      color: #fff;
      
      font-family: "dharma-gothic-c", sans-serif;
      font-weight: 700;
      font-style: normal;
    }
    
    /* Class for Designer Developer Creator.. line */
    .role-style {
      font-size: 1.1rem;
      color: #fff;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-style: normal;
      margin-top: 2px;
      /* If you want some spacing above or below this line, you can add margin */
    }
  
  
    /* Scroll Down Link */
  .scroll-down {
      position: absolute;
      bottom: 20px;             /* Adjust spacing from the bottom */
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.7rem;
      color: #fff;
      text-decoration: none;
      opacity: 0;               /* Hidden by default */
      pointer-events: none;     /* Disable click until shown */
      transition: opacity 0.5s ease;
    }

    .projects-section {
      padding: 25px 10px;
      /* background-color: #1B1131; */
   
    
    }
    .projects-section h2 {
      text-align: center;
      margin-bottom: 20px;
      font-size: 1.5rem;
      color: #1B1131;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-style: normal;
    }
    
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 columns */
      gap: 5px;
    }

    .project-item .project-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* Center the text horizontally & vertically */
      color: #fff;                      /* White text for visibility on most images */
      z-index: 2;                       /* Above the overlay and image */
      font-size: 1rem;                /* Adjust as desired */
      font-weight: bold;
      text-align: center;
      margin: 0;                        /* Remove default h3 margin if needed */
      /* You can also apply your custom font-family here */
    }


    .skills-section {
      padding: 25px 10px;
      color: #1B1131;
      /* The main heading was already centered, but let's ensure it: */
    }
    .skills-section h2 {
      text-align: center;
      margin-bottom: 20px;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 1.5rem;
    }
    
    /* Make this the flex container for side-by-side columns */
    .skills-content {
      display: flex;
      flex-direction: column;
      justify-content: center;  /* Center columns horizontally in the container */
      align-items: flex-start;  /* Align columns at the top (or use center if you prefer) */
      gap: 5px;               /* Space between columns */
    }

      /* Each column set to center its own content */
  .about-me,
  .my-skills {
    /* If you want them to share space equally: */
    flex: 1;
    max-width: 100%;  /* Optional: keep columns from getting too wide */
    
    /* Center all text and images inside this column */
    text-align: center;
    
    /* If you want to ensure paragraphs and headings are centered in a vertical stack: */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Smaller heading for each column */
  .about-me h3,
  .my-skills h3 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  /* Paragraph text is also centered now */
  .about-me p {
    line-height: 1.4;
    /* Adjust font size or color as needed */
    max-width: 90%; /* optional: keep text narrower for readability */
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.7rem;
    text-align: center;
  }

  .resume-btn {
    /* Basic button styling */
    display: inline-block;
    padding: 6px 12px;
    margin-top: 10px;
  
    background-color: #333;   /* Button background color */
    color: #fff;             /* Button text color */
    text-decoration: none;   /* Remove underlines */
    font-size: 0.7rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }

  .my-skills{
    margin-top: 40px;
  }

  .my-skills img {
    max-width: 80%;
    height: auto;
    display: block;
    margin-top: 0px;
}

.contact-section h2 {
  text-align: center;
  margin-bottom: 40px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5rem;
}

.contact-section {
  padding: 25px 15px;
}

.contact-me h1 {
  margin-bottom: 15px;
  font-size: 1.2rem;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #1B1131;
}

.left {
  transform: translateX(-10px);
}

/* Start shifted from the right */
.right {
  transform: translateX(10px);
}

/* start shifted from top */

.top {
  transform: translateY(10px);
}

.reveal {
  opacity: 1;
  transform: translateX(0);
}
    

  





  }

  .title-screen {
    transition: background-position 0.2s ease-out;
  }

  @media (max-width: 480px) {
    /* Force projects to stack vertically on mobile */
    .projects-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px; /* spacing between items */
    }
  }


  .page-footer {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: url("../assets/meshwhitenav.png") no-repeat center center/cover;
    border-top: 1px solid #ccc; /* Adjust as needed */
  }
  
  .page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between each section */
    background-color: #f5f5f5;      /* Adjust to your liking */
    border-top: 1px solid #ccc;    /* Adjust to your liking */
    padding: 1rem;
  }
  
  /* Make each section flexible so they distribute evenly */
  .footer-left, .footer-center, .footer-right {
    flex: 1;
  }
  
  /* Center the middle text */
  .footer-center {
    text-align: center;
  }
  
  /* Right-align the email */
  .footer-right {
    text-align: right;
  }
  
  /* Basic link styling: remove underline, inherit color */
  .footer-left a,
  .footer-right a {
    text-decoration: none;
    color: inherit; /* Adjust color if you want a custom link color */
    margin: 0 0.5rem; /* Spacing between links */
  }



  /* ========== Responsive Media Query ========== */
@media only screen and (max-width: 768px) {
  /* Reflow the footer sections vertically for smaller screens */
  .page-footer {
    flex-direction: column;
    align-items: center;
    font-size: 0.9rem; /* Decrease the overall font size for mobile */
  }

  /* Reset the default "flex: 1" to allow each row to size naturally */
  .footer-left, 
  .footer-center, 
  .footer-right {
    flex: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }

  /* Fine-tune link spacing in mobile layout */
  .footer-left a,
  .footer-right a {
    margin: 0 0.5rem;
  }
}