styles.css

/* General Reset and Base */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif; /* Ensure Poppins is linked in HTML */
  color: #e2e2e2; /* Default text color */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* Removes extra space below images */
}

.section-title {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  color: #e2e2e2;
}

/* --- NAVIGATION BAR STYLES --- */
header {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 30px;
  position: absolute; /* Position over the hero background */
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none; /* Allow clicks to pass through header background */
}

.nav-wrapper {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Slightly transparent black for navbar */
  padding: 8px 20px 20px 20px; /* Padding for the navbar */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  pointer-events: all; /* Restore pointer events for navbar content */
  height: 40px;
}

.nav-top-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.left-nav,
.right-nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 58px;
  height: 32px;
  padding: 0 20px;
}

nav a {
  text-decoration: none;
  color: #FFFFFF;
  font-weight: 300;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0; /* Adjust this value */
  z-index: 10;
  position: relative;
}

.logo {
  width: 160px;
  height: auto;
  display: block;
  transform: translateY(-50%);
}

.logo-tagline {
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.05em;
  margin-top: -30px; /* Adjust this value */
  white-space: nowrap;
}

.hamburger {
  display: none;
  font-size: 28px;
  color: #e2e2e2;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.nav-center-spacer {
  flex-grow: 1;
}

/* --- HERO SECTION STYLES --- */
.hero-section {
  position: relative;
  width: 100%;
  height: 90vh; /* Adjust height as needed, e.g., 80vh for 80% of viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
  
  color: #FFFFFF; /* Space for the navbar */
  box-sizing: border-box; /* Include padding in height */
  /* Rectangle 4 */

}

/* Gradient Overlay */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)); /* Adjust transparency */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2; /* Ensure content is above the overlay */
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 100%;
  max-width: 942px; /* Match nav width for consistent layout */
  padding: 0 20px;
  box-sizing: border-box;
  align-items: center; /* Center content horizontally */
  text-align: center;
}

.hero-text h1 {
  font-size: 72px; /* Large font size for KIIT E-CELL */
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  text-align: left; /* Align text to the left */
}

.hero-text p {
  font-size: 24px; /* Smaller font for tagline */
  font-weight: 400;
  margin-bottom: 50px;
  letter-spacing: 0.02em;
    text-align: left; /* Align text to the left */
}

.cta-buttons {
  display: flex;
  gap: 20px;
  margin-top: 30px; /* Space between text and buttons */
}

.btn {
  padding: 12px 30px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn.gradient {
  /* Join Us btn */

box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 18px;
gap: 10px;

position: relative;


background: linear-gradient(96.68deg, #82A7AD 3.89%, #354547 65.23%);
border: 5px solid #000000;
border-radius: 25px;

}

.btn.login {
  color: #FFFFFF;
  border: 1px solid #333; /* Slight border for visibility */
  /* Log In btn */

box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 18px;
gap: 10px;
position: relative;
background: #000000;
border: 5px solid #000000;
border-radius: 25px;

}

.btn:hover {
  opacity: 0.8;
}

/* Hero Right Logo */
.hero-right-logo {
    position: absolute;
    right: -200px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFFFFF;
    text-align: center;
    pointer-events: none; /* Make it unclickable */

}
.hero-logo-ellipse {
  width: 200px; /* Diameter of the circle */
  height: 200px; /* Diameter of the circle */
  border-radius: 50%; /* Makes the container circular */
  border: 3px solid black; /* Your desired border */
  display: flex; /* Use flexbox to center the image inside */
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Important: Hides parts of the image that extend beyond the circular border */ /* Optional glow */
  background-color: black /* Optional: background color for the circle if image doesn't fill it */
  
}
.hero-logo-border{
    width: 250px; /* Diameter of the circle */
    height: 250px; /* Diameter of the circle */
    border-radius: 50%; /* Makes it a perfect circle */
    
    border: 2px solid #3467E5; /* Solid blue border */
    display: flex; /* Use flexbox to center content (logo and text) inside */
    justify-content: center; /* Center vertically */
    align-items: center;
}
.hero-right-logo img {
    width: 150px; /* Adjust size of the logo */
    height: auto; /* Blue glow */
    opacity: 0.7; /* Make it slightly transparent */
}

.hero-right-logo-text {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-top: 5px;
}

/* --- ABOUT US SECTION --- */
.about-us-section {
  padding: 80px 20px;
  background-color: #1a1a1a; /* Slightly lighter dark background */
  text-align: center;
}

.about-us-section .section-title {
  margin-bottom: 60px;
  background-color: #7d7d7d;
}

.about-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px; /* Space between text and logos */
  max-width: 1000px;
  margin: 0 auto;
}

.about-content p {
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  max-width: 600px;
  color: #ccc; /* Slightly lighter text for readability */
}

.about-logos {
  display: flex;
  justify-content: center; /* or space-between / flex-start / flex-end */
  align-items: center;
  gap: 20px; /* spacing between logos */
  margin-top: 30px;
  filter: grayscale(100%); /* Make logos slightly gray */
}

.about-logo-ecell {
  width: 120px; /* Adjust logo size */
  filter: brightness(0.8); /* Make it slightly less bright than the nav logo */
}

.about-logo-kiit {
  width: 150px; /* Adjust logo size */
}

/* --- QUOTE SECTION --- */
.quote-section {
  padding: 60px 20px;
  background-color: #121212; /* Darker background */
  text-align: center;
}

.quote-section .section-title {
  font-size: 28px;
  font-weight: 400; /* Lighter font weight */
  letter-spacing: 0.08em; /* More letter spacing */
  color: #e2e2e2;
  margin-bottom: 0; /* No margin bottom if it's just the text */
}

/* --- LIAISON SECTION --- */
.liaison-section {
  padding: 80px 20px;
  background-color: #1a1a1a; /* Same as about section */
  text-align: center;
}

.liaison-officers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Allow officers to wrap to next line */
  gap: 40px;
  margin-top: 40px;
}

.officer img {
  width: 150px; /* Size of circular images */
  height: 150px;
  border-radius: 50%; /* Makes image circular */
  object-fit: cover; /* Ensures image covers the circle */
  border: 3px solid #0072FF; /* Blue border around circles */
  box-shadow: 0 0 15px rgba(0, 114, 255, 0.4); /* Subtle blue glow */
}

.section-divider {
  width: 80%; /* Adjust width of the line */
  max-width: 600px;
  border: none;
  border-top: 1px solid #333; /* Darker line */
  margin: 80px auto 0 auto; /* Space below officers */
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
  .hero-section {
    height: 70vh;
  }
  .hero-text h1 {
    font-size: 60px;
  }
  .hero-text p {
    font-size: 20px;
  }
  .hero-right-logo {
      position: absolute;
    right: 50px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    display: flex; /* Flex container to allow alignment if multiple elements were here */
    justify-content: center; /* Center the ellipse */
    align-items: center; /* Center the ellipse */
    pointer-events: none; /* Make it unclickable */
    z-index: 2;

  }
  .hero-logo-ellipse{
     width: 250px; /* Diameter of the circle */
    height: 250px; /* Diameter of the circle */
    border-radius: 50%; /* Makes it a perfect circle */
    background-color: #000; /* Solid black background for the circle */
    border: 2px solid rgba(0, 114, 255, 0.8); /* Solid blue border */
    box-shadow: 0 0 20px 10px rgba(0, 114, 255, 0.4); /* Blue outer glow */
    display: flex; /* Use flexbox to center content (logo and text) inside */
    flex-direction: column; /* Stack logo and text vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    text-align: center;
    color: #FFFFFF; /* Text color for tagline inside */
    position: relative;
  }
  .hero-logo-ellipse img { /* Target the image INSIDE the ellipse */
    width: 120px; /* Size of the logo itself, adjust to fit within the ellipse */
    height: auto;
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(255,255,255,0.3)); /* Slight brightness/glow for the white logo */
    margin-bottom: 5px; /* Space between logo and text */
}
  .hero-right-logo img {
      width: 100px;
  }
  .about-content {
      flex-direction: column;
  }
  .about-content p {
      text-align: center;
      max-width: 90%;
  }
}

@media (max-width: 768px) {
  /* Navbar responsiveness */
  .nav-wrapper {
    width: 100%;
    padding: 8px 0;
  }

  .nav-top-row {
    flex-direction: column;
    align-items: flex-end;
  }

  .left-nav,
  .right-nav {
    display: none;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 0;
    text-align: center;
  }

  .nav-center-spacer {
    display: none;
  }

  .hamburger {
    display: block;
    position: absolute;
    transform: none;
    margin-right: 20px;
  }

  .nav-top-row.active .left-nav,
  .nav-top-row.active .right-nav {
    display: flex;
  }

  .logo-area {
    margin-top: 20px;
    position: static;
    transform: none;
  }

  .logo {
    transform: none;
  }

  .logo-tagline {
    margin-top: 5px;
  }

  /* Hero section responsiveness */
  .hero-section {
    height: 100vh;
    padding-top: 100px;
  }
  .hero-text h1 {
    font-size: 48px;
  }
  .hero-text p {
    font-size: 18px;
  }
  .cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
  .btn {
    width: 80%;
    margin: 0 auto;
  }
  .hero-right-logo {
      display: none;
  }

  /* About and Liaison sections responsiveness */
  .about-us-section{
    background: linear-gradient(252.44deg, #B3E6EE 0%, #203A43 50%, #2C5364 100%);
filter: blur(70px);

  }
   .quote-section, .liaison-section {
    padding: 50px 15px;
  }
  .section-title {
    font-size: 28px;
    margin-bottom: 30px;
  }
  .about-content {
    gap: 30px;
  }
  .about-content p {
      font-size: 16px;
  }
  .liaison-officers {
    gap: 20px;
  }
  .officer img {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 40px;
  }
  .hero-text p {
    font-size: 16px;
  }
  .section-title {
    font-size: 24px;
  }
}
/* --- LIAISON SECTION --- */
.liaison-section {
  padding: 80px 20px;
  background-color: #1a1a1a;
  text-align: center;
}

.liaison-officers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 40px;
}

/* Container for each officer card */
.officer {
  position: relative;
  width: 150px; /* Initial width of the circle */
  height: 150px; /* Initial height of the circle */
  border-radius: 50%; /* Initial circular shape */
  overflow: hidden; /* Hide overflowing content */
  cursor: pointer;
  transition: all 0.4s ease-out; /* Smooth transition for all properties */
  display: flex; /* Use flexbox to center content */
  justify-content: center;
  align-items: center;
}

/* Inner card that will transform */
.officer-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* Start as a circle */
  display: flex;
  flex-direction: column; /* For vertical stacking of image and text */
  justify-content: flex-start; /* Image at top initially */
  align-items: center;
  overflow: hidden;
  transition: all 0.4s ease-out;
  background-color: transparent; /* No background until hover */
}


.officer-details {
  position: absolute; /* Position details relative to .officer-card */
  bottom: -100%; /* Start hidden below the card */
  left: 0;
  width: 100%;
  padding: 10px 0;
  background-color: #000; /* Black background for text area */
  color: #fff;
  text-align: center;
  opacity: 0; /* Hidden by default */
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.officer-name {
  font-size: 20px; /* */
  font-weight: 600; /* */
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Optional subtle shadow for text */
}

.officer-role {
  font-size: 14px; /* */
  font-weight: 300; /* */
  color: #ccc;
  letter-spacing: 0.02em;
}


/* --- HOVER EFFECTS --- */
.officer:hover {
  width: 150px; /* Wider on hover, adjust as needed */
  height: 250px; /* Taller on hover, adjust as needed */

  border-radius: 100px 100px 0 0; /* Square corners on hover */
  border: 5px solid #79A6DD;
  background-color: #000; /* Black background for the whole card */

}

.officer:hover .officer-card {
  border-radius: 0; /* Remove inner border radius */
  justify-content: space-between; /* Push image to top, text to bottom */
}

.officer:hover img {
  border-radius: 50%; /* Keep image circular even when container is square */
  transform: translateY(-20px); /* Slightly move image up to make space for text */
}

.officer:hover .officer-details {
  bottom: 0; /* Reveal details at the bottom */
  opacity: 1; /* Make details visible */
}


.section-divider {
  width: 80%;
  max-width: 600px;
  border: none;
  border-top: 1px solid #333;
  margin: 80px auto 0 auto;
}

/* --- Responsive Design (update relevant sections) --- */
@media (max-width: 768px) {
  /* ... other responsive styles ... */
  .officer {
    width: 120px; /* Smaller initial size on mobile */
    height: 120px;
  }
  .officer:hover {
    width: 150px; /* Smaller hover size on mobile */
    height: 200px;
  }
  .officer-name {
    font-size: 16px;
  }
  .officer-role {
    font-size: 12px;
  }
}


.events-title{
font-family: Porter Sans Block;
font-weight: 400;
font-size: 96px;
line-height: 114.99999999999999%;
letter-spacing: 6%;
text-align: center;
vertical-align: middle;
position: relative;
padding: 0px 120px 0px 120px;
}
.event-name{
font-family: Nunito;
font-weight: 800;
font-size: 60px;
line-height: 114.99999999999999%;
letter-spacing: 6%;
text-align: center;
vertical-align: middle;
position: relative;
}
.event-card{
     display: flex; /* Enables Flexbox for the container */
  justify-content: center; /* Centers the images horizontally within the container */
  align-items: flex-start; /* (Optional) Centers images vertically if container has a height */
  flex-wrap: wrap; /* Allows images to wrap to the next line on smaller screens if they don't fit */
  gap: 80px; /* Creates space (gap) between the images */
  /* Optional: Add some padding around the container */
  width: 100%; /* Ensure the container takes full width */
  max-width: 1200px; /* Optional: Constrain the max width of the container */
  margin: 0 auto;
  padding: 20px; /* Optional: Add some padding around the container */
}
.event-image{
max-width: 100%; /* Ensure images are responsive and don't overflow */
  height: auto; /* Maintain aspect ratio */
  display: block;
flex: 1 1 auto; /* Allows images to grow and shrink, and have a base size */
  max-width: calc(25% - 11.25px);
  height: auto; /* Maintain aspect ratio */
  display: block; /* Removes extra space below images */
  object-fit: cover; /* Useful if you set a fixed height for images, crops them to fit */
  border-radius: 8px; /* Optional: Soften image corners */;
  
}
.event-image:hover{
    transform: scale(1.33); /* Slightly zoom in on hover */
    animation:dissolve 0.6s ease-in-out; /* Smooth transition effect */
  opacity: 0.7;
  transition: opacity 0.6s ease-in-out;
}
@media (max-width: 992px) {
  .event-image {
    max-width: calc(50% - 10px); /* Two images per row on tablets */
  }
}
/* For mobile devices */
@media (max-width: 576px) {
  .event-image {
    max-width: 100%; /* One image per row on mobile, stacking them */
  }
  .event-card {
    gap: 10px; /* Smaller gap on mobile */
    padding: 10px;
  }
}

/* --- Core Styles for the button container --- */
.global-register-button-container {
    position: fixed; /* Ensures it stays in the viewport regardless of scroll */
    top: -100vh; /* Starts completely off-screen above the viewport */
    left: 50%; /* Starts at the horizontal center */

    /* Initial animation state: slightly smaller, completely transparent,
       and horizontally centered (first part of transform) */
    transform: translate(-50%, 0) scale(0.8);
    opacity: 0;

    z-index: 1000; /* Ensures it's on top of everything (navbar, content, blur) */
    box-sizing: border-box;
    width: auto; /* Let content define width */
    white-space: nowrap; /* Prevent button text wrapping */
    padding: 10px 0; /* Padding for the container, if needed around the button */

    /* Animation transition properties for smooth in/out */
    transition: top 0.6s ease-out, /* Smooth vertical slide */
                transform 0.6s ease-out, /* Smooth scaling and vertical centering */
                opacity 0.4s ease-out; /* Smooth fade in/out, slightly faster */
}

/* --- Active state when button is visible --- */
.global-register-button-container.active {
    top: 50%; /* Moves to the vertical center of the viewport */

    /* Final animation state: perfectly centered (horizontally and vertically)
       and scales to its normal size (1) */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; /* Fully visible */
}

/* --- Styling for the actual button inside the container --- */
/* Assuming your button has class .main-register-button or id="mainRegisterBtn" */
/* If you want to use a class like 'register-btn', update your HTML and this selector */
.register-btn,.register-btn1{ /* Or #mainRegisterBtn if styling by ID, or .register-btn if using that class */
    height: 100px;
    width: 300px;
    font-family: 'Montserrat', sans-serif; /* Ensure Montserrat is linked in HTML if custom font */
    font-weight: 900;
    font-size: 48px;
    line-height: 115%; /* Simplified from 114.999... */
    letter-spacing: 0.09em; /* Changed from 9% to 0.09em for more standard usage */
    text-align: center;
    vertical-align: middle; /* This usually applies to inline/table-cell elements, often not needed on a block button */
    background-color: #000;
    color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(88, 116, 121, 1);
    cursor: pointer; /* Indicate it's clickable */
    /* Add hover effects for the button itself for better UX */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; /* Smooth hover transition */
}

/* --- NEW STYLES FOR THE BLUR OVERLAY (keep as is from previous correct solution) --- */
.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Adjust this alpha for dimming intensity */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 999; /* Below the button (1000) but above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-out, visibility 0s linear 0.4s;
}

.blur-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease-out;
}

/* --- Responsive Adjustments (no changes needed for button positioning here) --- */
@media (max-width: 992px) {
    /* ... your other responsive rules ... */
    .main-register-button {
        font-size: 36px; /* Adjust font size for smaller screens */
        height: 80px;
        width: 160px;
    }
}

@media (max-width: 768px) {
    /* ... your other responsive rules ... */
    .main-register-button {
        font-size: 28px; /* Further adjust font size for mobile */
        height: 70px;
        width: 140px;
    }
}
.contact-container {
    display: flex; /* Enables Flexbox for side-by-side layout */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    justify-content: center; /* Centers the items horizontally within the container */
    align-items: flex-start; /* Aligns items to the top of the flex container */
    max-width: 75rem; /* Maximum width for the entire contact component (1200px) */
    margin: 0 auto; /* Centers the contact component on the page */
    gap: 2.5rem; /* Space between the image area and the form area (40px) */
    padding-top: 90px; /* Padding at the top for spacing */

}

/* --- Left Image Area Styles --- */
.contact-image-area {
    flex-shrink: 0; /* Prevents the image area from shrinking */
    width: 21.875rem; /* Fixed width for the image container (350px) */
    height: 21.875rem; /* Fixed height for a square shape (350px) */
    background-color: #f2f2f2; /* Light gray background as seen in image_494b62.jpg */
    box-shadow: 0 0.3125rem 0.9375rem rgba(0,0,0,0.3); /* Subtle shadow */
    display: flex; /* Use flexbox to center the logo inside */
    justify-content: center;
    align-items: center; /* Ensures the logo stays within bounds if it's too big */
}

.contact-image-area img {
    max-width: 80%; /* Logo takes up 80% of its container's width */
    max-height: 80%; /* Logo takes up 80% of its container's height */
    object-fit: contain; /* Scales logo to fit, maintaining aspect ratio */
}

/* --- Right Contact Form Area Styles --- */
.contact-form-area {
    flex-grow: 1; /* Allows the form area to take up available space */
    max-width: 43.75rem; /* Maximum width for the form area itself (700px) */
    background-color: #2a2a2a; /* Dark background matching your design */
    border: 0.0625rem solid #ffffff; /* Thin white border from your design */
    padding: 2.5rem; /* 40px */
    box-shadow: 0 0.3125rem 0.9375rem rgba(0,0,0,0.3);
}

.contact-form-area h1 {
    font-size: 3.75rem; /* 60px, adjust as needed to match "Contact Us" title size */
    color: #ffffff;
    margin-bottom: 1.875rem; /* 30px */
    text-align: center; /* Aligns "Contact Us" title */

}

.contact-form {
    display: flex;
    flex-direction: column; /* Stacks the main content and button vertically */
}

/* New Flexbox container for inputs and contact details */
.contact-form .form-main-content {
    display: flex; /* Arrange input group and info group side-by-side */
    flex-wrap: wrap; /* Allow wrapping on smaller inner screens */
    gap: 1.875rem; /* 30px space between columns */
    justify-content: space-between; /* Push columns to ends, distributing space */
    align-items: flex-start; /* Align content to the top */
    width: 100%; /* Ensure it takes full width of its parent form */
}

.contact-form .form-inputs-group {
    flex: 1; /* Allows inputs to take up more space (e.g., 2/3) */
    min-width: 17.5rem; /* Minimum width before wrapping (280px) */
}

.contact-form .contact-info-buttons-group {
    flex: 1; /* Allows info/buttons to take up less space (e.g., 1/3) */
    min-width: 12.5rem; /* Minimum width before wrapping (200px) */
    display: flex;
    flex-direction: column; /* Stack details, social, and button vertically */
    justify-content: space-between; /* Distribute space vertically */
    height: 100%; /* Ensure it fills height available by form-inputs-group */
}

/* Form Group (for input fields) */
.contact-form .form-group {
    margin-bottom: 1.5625rem; /* 25px */
    position: relative; /* Needed for the floating label effect */
}

/* Floating Label for Inputs */
.contact-form label {
    position: relative;
    top: 0.625rem; /* 10px */
    left: 0;
    font-size: 1.125rem; /* 18px */
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease-out;
    pointer-events: none; /* Allows clicks to pass through to the input */
    margin-bottom: 800px;
}

/* Input and Textarea Base Styles */
.contact-form input[type="text"],
.contact-form input[type="email"] {
    width: 100%;
    padding: 10px; /* 10px 0 */
    background: none; /* No background */
    border: none; /* No default border */
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.5); /* The underline */ /* Input text color */
    font-size: 1.25rem; /* 20px, closer to the 24px in mockup but scales with rem */
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth underline color change */
}
.contact-form textarea {
    width: 100%;
    padding-top: 100px; /* 10px 0 */
    background: none; /* No background */
    border: none; /* No default border */
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.5); /* The underline *//* Input text color */
    font-size: 1.25rem; /* 20px, closer to the 24px in mockup but scales with rem */
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth underline color change */
    position: relative; /* Needed for the floating label effect */
    box-sizing: border-box; /* Ensures padding is included in width */
    top: 40px;
}

/* Floating Label Effect: Moves label up when input is focused or has content */

/* Input/Textarea Focus Underline Color */
.contact-form input,
.contact-form textarea {
    border-bottom-color: #0072FF; /* Accent color for underline on focus */
    color:white; /* Change text color to white on focus */
}

/* Specific Styles for the Message Textarea */
.contact-form .message-group textarea {
    border: 0.0625rem solid #ffffff; /* Full border for message box */
    border-radius: 1.5625rem 1.5625rem 0 0; /* 25px top corners, 0 bottom. Refined based on image. */
    height: 10.4375rem; /* Approx. 167px from anima code (overlap-3 height), adjust if needed */
    resize: vertical; /* Allow vertical resizing by user */
    padding: 1.25rem; /* 20px padding inside the message box */
    padding-bottom: 0; /* No bottom padding so line sits at bottom */
    color: white; /* Change text color to white for better contrast */
}
/* Adjust label for textarea to align with its padding */
.contact-form .message-group label {
    
    margin-bottom: 1000px; /* 20px padding to match textarea padding */
    
}


/* --- Contact Info and Social Icons Layout --- */
.contact-details {
    margin-bottom: 1.875rem; /* 30px space between contact details and social icons */
    line-height: 1.6;
    padding-left: 100px; /* 10px padding to match design */
}

.contact-details p {
    margin-bottom: 0.3125rem; /* 5px */
    font-size: 1rem; /* 16px */
}

.contact-details p strong {
    color: #ffffff; /* White color as in design */
    font-size: 1.5rem; /* 24px as in design */
    margin-bottom: 0.3125rem; /* 5px */
    display: block; /* Make strong tag a block for better spacing */
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 0.9375rem; /* 15px space between icons */
    margin-bottom: 1.875rem; /* 30px space between social icons and the button */
    justify-content: flex-start; /* Aligned left as in design */
    padding-left: 40px; /* 20px padding to match design */
}

.social-icons a img {
    width: 3.125rem; /* 50px size of social media icons */
    height: 3.125rem;  /* Smooth hover effects */
}

/* --- Submit Button --- */
.contact-submit-btn {
    display: flex; /* Use flex to center text */
    align-items: center; /* Vertically center text */
    justify-content: center; /* Align text to the right */
    width: 200px; /* 300px width for the button */
    height: 4.875rem; /* 78px from Anima code */
    background: linear-gradient(129deg, rgba(130, 167, 173, 1) 0%, rgba(53, 69, 71, 1) 65%); /* Gradient from your Anima code */
    color: #ffffff;
    border: none; /* No explicit border, gradient handles it */
    border-radius: 1.5625rem; /* 25px */
    font-family: "Montserrat", Helvetica; /* Font from your Anima code */
    font-size: 24px; /* 32px */
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.18rem; /* 2.88px */
    line-height: 1.15; /* Adjust line-height to match 36.8px for 32px font-size */
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-transform: uppercase; /* Match uppercase from design */
    position: relative; /* For hover effects */
    align-self: flex-end;
}


/* --- Responsive Adjustments for Mobile --- */
@media (max-width: 900px) { /* Main layout stacking breakpoint */
    .contact-container {
        flex-direction: column; /* Stacks image and form vertically */
        align-items: center; /* Centers items horizontally when stacked */
        gap: 2rem; /* Reduce gap on mobile */
    }

    .contact-image-area {
        width: 18.75rem; /* 300px */
        height: 18.75rem; /* 300px */
    }

    .contact-form-area {
        max-width: 90%; /* Allow form to take more width on smaller screens */
        padding: 1.875rem; /* 30px */
    }

    .contact-form-area h1 {
        font-size: 2.5rem; /* 40px */
        margin-bottom: 1.25rem; /* 20px */
        padding-top: 20px; /* Add some top padding for spacing */
        position: relative;
    }
}

@media (max-width: 768px) { /* Inner form layout stacking breakpoint */
    .contact-form .form-main-content {
        flex-direction: column; /* Stack form inputs and contact details vertically */
        align-items: center; /* Center them when stacked */
        gap: 1.5rem; /* 24px */
    }

    .contact-form .form-inputs-group,
    .contact-form .contact-info-buttons-group {
        width: 100%; /* Take full width when stacked */
        min-width: unset; /* Remove min-width constraint when stacked */
        text-align: center; /* Center text content in this group */
    }

    .social-icons {
        justify-content: center; /* Center social icons when stacked */
        margin-top: 1.25rem; /* 20px */
    }
    
    .contact-details {
        margin-top: 1.25rem; /* 20px */
        margin-bottom: 1.25rem; /* Adjust as needed */
        margin-left: 1.25rem; /* 20px */
    }
}

@media (max-width: 500px) { /* Smaller mobile screens */
    .contact-us-section {
        padding: 2.5rem 0.9375rem; /* 40px 15px */
    }

    .contact-image-area {
        width: 15.625rem; /* 250px */
        height: 15.625rem; /* 250px */
    }

    .contact-form-area {
        padding: 1.25rem; /* 20px */
    }

    .contact-form-area h1 {
        font-size: 2rem; /* 32px */
        margin-bottom: 1rem; /* 16px */
    }

    .contact-form input,
    .contact-form textarea,
    .contact-submit-btn {
        font-size: 1rem; /* 16px */
        padding: 0.75rem 0; /* 12px 0 */
    }
    
    .contact-submit-btn {
        font-size: 1.5rem; /* 24px */
        padding: 0.9375rem; /* 15px */
    }
}
.contact-home{
  align-content: center;
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
#contact{
  font-family: Montserrat;
font-weight: 800;
font-size: 40px;
line-height: 114.99999999999999%;
letter-spacing: 9%;
text-align: center;
vertical-align: middle;
width: 200;
height: 78;
border-radius: 25px;
border-width: 5px;
padding: 18px;
gap: 10px;
background: linear-gradient(96.68deg, #82A7AD 3.89%, #354547 65.23%);
align-self: center;
border: 5px solid rgba(0, 0, 0, 1)

}
body.fade-out {
  opacity: 0;
  transition: opacity 600ms ease-in;
}
.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 300ms ease-in;
}

.popup-content {
  background:black;
  padding: 2rem;
  border-radius: 10px;
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90%;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: popIn 300ms ease-in;
}

.close-button {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

@keyframes fadeIn {
  from { opacity: 0; } 
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes popIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes dissolve {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.dissolve-out {
  animation-name: dissolve;
  animation-duration: 600ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: black;
  border-radius: 8px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  max-width: 500px;
  width: 90%;
}

.close-button {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 24px;
  cursor: pointer;
}
html {
  scroll-behavior: smooth;
  animation-duration: 600ms; /* Smooth scroll duration */
  animation-fill-mode: both; /* Maintain end state after animation */
}
.fade-out {
  opacity: 0;
  transition: opacity 600ms ease-in;
}

.fade-in {
  opacity: 1;
  transition: opacity 600ms ease-in;
}