body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  
  /* --- KEY FIX HERE: Ensure the body covers the full height of the viewport (100vh) --- */
  min-height: 100vh;
  
  /* Your desired gradient background */
 background: linear-gradient(135deg, #9336b7 0%, #4743b1 100%);
  
  /* Prevents horizontal scrollbar if elements are slightly oversized */
  overflow-x: hidden;
   
}
/* Make all text white for dark background */
body, h1, h2, h3, h4, h5, h6, p, a, span {
  color: white;
}


/* ------------------------------------------- */
/* --- Adjusting the Section Padding --- */
/* Your 'section' element has 60px padding on the bottom, 
   which might be contributing to the look of "extra space" below the content. */

section {
  /* Reduce or remove bottom padding if the section is the last element */
  padding: 60px 20px 80px 20px; /* Reduced bottom padding to 0px */
  text-align: center;
}
/* ------------------------------------------- */


header {
  background: white;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav a {
  color: rgb(20, 8, 8);
  text-decoration: none;
  margin-right: 15px;
  font-weight: 500;
}

/* Multiple definitions for #resumeBtn were merged/simplified for clarity */
#resumeBtn {
  background-color:#6a0dad;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative; /* Needed for the hover text trick */
}

/* Simplified and corrected hover for #resumeBtn */
#resumeBtn:hover {
  transform: scale(1.1); /* Reduced scale for better look */
  background-color: #6a0dad;
  color: #fff;
  transition: all 0.3s ease;
}

/* Simplified and corrected hover for .card */
.card:hover {
  transform: scale(1.05); /* Reduced scale for better look */
  background-color: #6a0dad;
  color: #fff;
  box-shadow: 0 8px 20px rgba(106, 13, 173, 0.4);
}

/* Rest of the CSS remains the same (removed repeated or conflicting styles) */

.cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px; /* Original gap */
  margin-top: 30px;
  gap: 30px; /* Overrides original gap, using this one */
}

.card {
  background: #f4f4f4;
  /* MODIFIED PADDING */
  padding: 30px 20px; 
  border-radius: 15px;
  /* ADDED FIXED SIZE AND FLEX PROPERTIES */
  width: 280px; 
  height: 100px;
  display: flex; 
  align-items: center;
  justify-content: center;
  
  font-size: 22px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(241, 241, 241, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Modal styles (as before) */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
}

.close {
  float: right;
  font-size: 20px;
  cursor: pointer;
}

form input, form button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}

form button {
  background: #4b0082;
  color: white; /* Changed text color to white for visibility */
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

form button:hover {
  background: #6a0dad;
  animation: pulse 0.5s ease-in-out forwards;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1.1); }
}


/* Hover effect: enlarge + color + text change for #resumeBtn */
#resumeBtn::after {
  
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap; /* Prevents text from wrapping */
}

#resumeBtn:hover::after {
  opacity: 1;
}

#resumeBtn:hover span {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Basic Navbar Styling */
.navbar ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.navbar ul li a {
  text-decoration: none;
  color: black;
  font-size: 18px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Hover Effect: enlarge text and change color */
.navbar ul li a:hover {
  color: #6a0dad;
  font-size: 19px; /* Smaller increase for better look */
  transform: scale(1.1);
}

/* Optional: slight shrink when clicked (active effect) */
.card:active {
  transform: scale(1.03); /* Smaller scale for better look */
}
/* Normal button look (Original text is here, no need for an extra span tag) */
#resumeBtn {
  background-color:#6a0dad;    /* black */
  color: white;              /* white text */
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  
  /* CRITICAL: Add a smooth transition for the transform effect */
  transition: all 0.3s ease; 
  
  /* Removing position: relative; and overflow: hidden; as they are no longer needed */
}

/* Hover effect: Only enlarge and change color */
#resumeBtn:hover {
  /* This is the line that makes the button grow */
  transform: scale(1.1); 
  
  background-color: #6a0dad;  /* purple */
  color: #fff;              /* white text */
  
  /* Ensuring the transition property is defined once above is generally cleaner */
}

/* You can safely DELETE the following CSS blocks from your stylesheet: */
/*
#resumeBtn::after { ... }
#resumeBtn:hover::after { ... }
#resumeBtn:hover span { ... }
#resumeBtn span { ... }
*/
#resumeBtn {
  /* ... (other styles) ... */
  transition: all 0.5s ease; /* Increase time for a smoother, slower scale */
  transform-origin: center; /* Ensure the scale happens from the middle */
}

#resumeBtn:hover {
  transform: scale(1.1);
  /* ... (other hover styles) ... */
}

/* --- New Section: Talent Acquisition Styles --- */

.talent-acquisition-section {
    /* Standard section padding */
    padding: 80px 40px; 
    
    /* Sets the background to white as seen in the image */
    background-color: white; 
}

.content-wrapper {
    /* Uses Flexbox to place text and image side-by-side */
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Max width for content centering */
    margin: 0 auto; /* Center the content wrapper */
    gap: 40px;
}

.text-content {
    /* Ensures text takes up roughly half the space */
    flex: 1;
    max-width: 500px;
    text-align: left; /* Aligns text content to the left */
}

.text-content h1 {
    font-size: 3em; /* Large, bold heading */
    color: #333; /* Dark color */
    line-height: 1.1;
    margin-bottom: 20px;
}

.text-content p {
    font-size: 1.1em;
    color: #555; /* Slightly lighter body text */
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Style for the 'Join' button */
.join-button {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid #555; /* Light border */
    border-radius: 30px;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    transition: all 0.3s ease;
}

.join-button:hover {
    background-color: #555;
    color: white;
}

/* Image container and styles */
.image-content {
    flex: 1;
    position: relative; /* Needed to position the info-box */
    max-width: 600px;
}

.image-content img {
    /* Ensure the image scales nicely within its container */
    max-width: 100%;
    height: auto;
    display: block;
}

/* Style for the light blue floating info box */
.info-box {
    position: absolute;
    bottom: 20px;
    left: 10%; /* Adjust to match visual placement */
    width: 80%;
    background-color: #e0f7fa; /* Light blue background */
    padding: 20px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 1.0em;
    font-weight: 500;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .content-wrapper {
        /* Stack the text and image vertically on smaller screens */
        flex-direction: column;
        text-align: center;
    }
    
    .text-content {
        max-width: 100%;
    }
    
    .text-content h1 {
        font-size: 2.5em;
    }
    
    .text-content p {
        font-size: 1em;
    }
    
    .image-content {
        margin-top: 40px;
    }
    
    .info-box {
        bottom: 0;
        left: 5%;
        width: 90%;
    }
}
/* --- New Section: Tailored Recruitment Solutions Styles --- */

.recruitment-solutions-section {
    /* Set the background to white to separate it from the gradient hero */
    background-color: white; 
    padding: 80px 20px;
    text-align: center;
}

.header-content {
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.header-content h2 {
    font-size: 2.5em;
    color: #1f1e1e;
    margin-bottom: 10px;
}

.header-content p {
    font-size: 1.1em;
    color: #666;
}

/* Container for the two cards */
.solutions-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
}

.solution-card {
    /* The light blue background color shown in your image */
    background-color: #f0f8ff; 
    
    /* Make the cards take up roughly half the space */
    flex: 1;
    min-width: 300px;
    max-width: 550px;
    
    /* Add padding for internal content */
    padding: 30px;
    border-radius: 8px;
    text-align: left;
    
    /* Optional: Slight shadow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.card-text-content {
    margin-bottom: 20px;
}

.solution-card h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.solution-card p {
    color: #555;
    line-height: 1.5;
}

/* Image styles - adjust based on your actual images */
.solution-card img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes any default bottom spacing */
    margin-top: 20px; /* Space between text and image */
    border-radius: 8px; /* Optional: match card corner radius */
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .solutions-grid {
        flex-direction: column;
        align-items: center;
    }
    .solution-card {
        max-width: 90%; /* Make cards a bit wider on mobile */
    }
}

/* --- New Section: Contact Form Styles --- */

.contact-section {
    background-color: white; /* Ensures white background */
    padding: 80px 20px;
    text-align: center;
}

.contact-section .header-content {
    margin-bottom: 50px;
}

.contact-section h2 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
}

.contact-section p {
    font-size: 1.1em;
    color: #666;
}

.contact-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    gap: 40px;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
}

/* Style for the Form Box (Light Blue Background) */
.form-box {
    flex: 1;
    min-width: 350px;
    background-color: #e0f0ff; /* Light blue background color */
    padding: 40px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.form-box label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-top: 15px;
    margin-bottom: 5px;
}

.form-box input[type="text"], 
.form-box input[type="email"], 
.form-box textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box; /* Important: Padding/border included in width */
    font-size: 1em;
    resize: vertical; /* Allows user to resize the message box vertically */
}

.form-box textarea {
    min-height: 100px;
}

/* Style for the Submit Button */
.submit-button {
    width: 100%;
    padding: 12px;
    margin-top: 30px;
    background-color: #5b6af0; /* Darker blue/purple from your image */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #4351b6;
}

/* Style for the Image Box (Right Side) */
.image-box {
    flex: 1;
    min-width: 350px;
    position: relative;
    border-radius: 12px;
    overflow: hidden; /* Ensures the image and overlay stay within the border-radius */
    max-width: 450px;
    height: 480px; /* Fixed height to match the form box */
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire box without distortion */
    display: block;
}

/* Style for the white text overlay */
.image-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); /* Shadow for readability over the image */
    text-align: left;
}

.image-overlay h3 {
    font-size: 2.5em;
    margin: 0;
    line-height: 1;
}

.image-overlay p {
    font-size: 1.5em;
    margin: 0;
    font-weight: 300;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .contact-content-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .form-box, .image-box {
        max-width: 100%;
    }
    .image-box {
        height: 300px; /* Reduce height on mobile for better viewing */
    }
}

/* --- New Dual-Path Buttons --- */
.user-selection-buttons {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 50px;
}

.main-cta-btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 700;
    transition: all 0.3s ease;
    min-width: 200px; /* Ensure uniform size */
    text-align: center;
}

/* Client Button (e.g., primary purple) */
.client-btn {
    background-color: #6a0dad; /* Your primary purple */
    color: white;
    border: 2px solid #6a0dad;
}

/* Candidate Button (e.g., contrasting color or outline) */
.candidate-btn {
    background-color: transparent; 
    color: white;
    border: 2px solid white; 
}

.main-cta-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.candidate-btn:hover {
    background-color: white; 
    color: #6a0dad; /* Hover text color */
}

/* ----------------------------- */
/* MOBILE RESPONSIVE FIX SECTION */
/* ----------------------------- */

/* Header Flex Wrapping Fix */
header {
  flex-wrap: wrap;
  position: relative;
}

/* Navbar default desktop view */
.navbar ul {
  display: flex;
}

/* Hide hamburger on desktop */
.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #6a0dad;
  background: none;
  border: none;
}

/* Adjust Resume Button in smaller devices */
@media (max-width: 900px) {
  #resumeBtn {
    padding: 8px 16px;
    font-size: 14px;
  }

  .main-cta-btn {
    padding: 10px 20px;
    font-size: 1em;
    min-width: 150px;
  }
}

/* Make navbar responsive */
@media (max-width: 768px) {
  .navbar ul {
    flex-direction: column;
    background-color: white;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    display: none;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 15px 0;
  }

  .navbar ul li {
    padding: 10px 0;
  }

  .navbar.active ul {
    display: flex;
  }

  /* Show hamburger */
  .hamburger {
    display: block;
  }


.user-selection-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 60px;
  padding: 0 10px;
}

.main-cta-btn {
  display: inline-block;
  padding: 14px 35px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 600;
  transition: all 0.3s ease;
  min-width: 220px;
  text-align: center;
  box-sizing: border-box;
}

/* Client Button */
.client-btn {
  background-color: #6a0dad;
  color: white;
  border: 2px solid #6a0dad;
}

/* Candidate Button */
.candidate-btn {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

/* Hover Effects */
.main-cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.candidate-btn:hover {
  background-color: white;
  color: #6a0dad;
}

/* ✅ Mobile View Fix */
@media (max-width: 768px) {
  .user-selection-buttons {
    flex-direction: column;
    gap: 15px;
    margin-top: 40px;
    align-items: center;
  }

  .main-cta-btn {
    width: 90%;
    max-width: 320px;
    font-size: 1em;
    padding: 12px 0;
  }
}