*{
	padding: 0; /*spacing*/
	margin: 0;
    
}

html {
  scroll-behavior: smooth; /* Enables smooth scrolling between anchor links */
}

header nav ul{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5%;
  margin-left: 0;
  padding: 10px px;
  list-style: none;
  position: fixed;
  top: -0.5%;
  left: 80%;
  transform: translateX(-50%);
  background-position: right center; /* Start the background from the right */
  background-size: 50% 100%; /* Ensure the image only covers the right 50% of the element */
  background-repeat: no-repeat;
  border-radius: 10px;
  z-index: 1000;
	
}

nav ul li:hover .dropdown-content {
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.90);  /* Subtle black background */
    max-width: 100px; /* Adjust the width to make the dropdown wider */
    z-index: 1;
    left: 55%;
    transform: translateX(-50%); /* Centering the dropdown */
    padding: 7.5px 7.5px; /* Added padding for better spacing */
    border-radius: 7.5px; /* Optional: Adds rounded corners */
    box-shadow: 0px 3px 6px rgba(0, 191, 174, 0.35), 0px -3px 6px rgba(0, 191, 174, 0.35), 3px 0px 6px rgba(0, 191, 174, 0.35), -3px 0px 6px rgba(0, 191, 174, 0.35); /* Surrounding shadow on all sides */

}
nav ul li:hover .dropdown-content {
    display: block;
}

#menu .dropdown {
  margin-left: auto;  /* Pushes it to the right */
  position: relative;
      left: 120%;

}

#menu {
    list-style: none;
    display: flex;
    justify-content: flex-start; /* Align items to the left */
    margin-left: -300px; /* Move the entire menu to the left by 10px (you can adjust this value) */
}

.dropdown-content a {
    position: relative; /* Required to position the pseudo-element */
    padding: 12px 12px;
    text-decoration: none;
    display: block;
    color: white;
    font-size: 16px;
}

/* Hover effects for the main items */
nav ul li a:hover {
    background-color: #555;
}

/* Style the dropdown container */
.dropdown {
    position: relative;
}

/* Create the underline animation using the pseudo-element */
.dropdown-content a::before {
    content: ''; /* Empty content for the underline */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%; /* Initially no width */
    height: 2px;
    transition: width 0.5s ease; /* Animation for the width */
}

/* Show the underline when hovering */
.dropdown-content a:hover::before {
    width: 100%; /* Makes the underline fill the width of the link */
}

/* Move the dropdown list more to the right */
li.dropdown {
  position: relative;
  left: 20px; /* Adjust the value to move it more or less */

}

li.dropdown:hover .dropdown-content {
  
  transition: transform 0.2s ease; /* Smooth transition */
  top: 28px;
}


/* Hover effects for the main items */
nav ul li a:hover {
    background-color: #555;
}

/* Style the dropdown container */
.dropdown {
    position: relative;
}

/* Hover effects for dropdown items */

.dropdown-content a:hover {
    background-color: rgba(0, 0, 0, 0.1);  /* Subtle black background */
    color: #008080; /* Optional: Keep the text color change on hover */
    transform: scale(1.08); /* Slightly enlarges the element */
    transition: transform 0.2s ease; /* Smooth transition for the scaling effect */
    letter-spacing: 0.65px; /* Adjust letter spacing */

}

/* Main navigation item hover */
nav ul li a:hover {
    background-color: transparent;  /* Remove the background color */
}

nav ul li a:focus {
    background-color: transparent;  /* Remove the background color */

}

.dropdown-content a:focus,
nav ul li a:focus {
    transform: scale(0.98); /* Slightly shrink the element to simulate a click */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for transform and box-shadow */
}

/* Optional: Focus states for accessibility (outline) */

h2 {
  font-size: 20px;
  color: black;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
                'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-shadow: 0.1px 2px #8a8a8a;

  /* Box Dimensions and Positioning */
  height: 70px;
  top: 0;
  left: 0;
  right: 0;
  position: fixed;

  /* Background Styling */
    background: linear-gradient(135deg, black 25%, black 20%);


  /* Border Styling */
  border-radius: 2px;

  /* Ensure it appears on top */
  z-index: 2;

  /* Glow Effect Only at the Bottom */
  box-shadow: 0px 10px 15px rgba(0, 191, 174, 0.5);

  /*background: radial-gradient(ellipse at center, #000 35%, #004747 100%); /* Softer darker teal for outer glow /
  box-shadow: 0 0 30px rgba(0, 255, 204, 0.6); / Surround glow effect */

  /* Transition for smooth resizing */
  transition: font-size 0.3s ease, height 0.3s ease;
}

header img.blackBorder {
  height: 80px;
  border: none;
  border-radius: 12px;
  transition: transform 0.4s ease, filter 0.3s ease, box-shadow 0.3s ease;
  /*filter: drop-shadow(0 4px 20px rgba(0, 255, 204, 0.5)); /* Initial drop-shadow with lighter opacity */
  /*animation: breatheShadow 4s infinite ease-in-out; /* Slower animation for smoother breathing */
}

/* Subtle Breathing Effect for the Drop Shadow */
@keyframes breatheShadow {
  0% {
    filter: drop-shadow(0 4px 20px rgba(0, 255, 204, 0.4)); /* Soft initial shadow */
  }
  50% {
    filter: drop-shadow(0 4px 30px rgba(0, 255, 204, 0.7)); /* Slightly expanded shadow with smooth opacity increase */
  }
  100% {
    filter: drop-shadow(0 4px 20px rgba(0, 255, 204, 0.4)); /* Return to the initial subtle shadow */
  }
}

/* Small twinkling stars for header */
.header-star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
    animation: twinkle 2s infinite alternate ease-in-out;
}

/* Twinkling animation */
@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(1.2); }
}

h3:hover {

  letter-spacing: 1px;
}

h4:hover {

  letter-spacing: 1px;
}

/* Target the About link */
header nav ul li:nth-child(2) {
  margin-left: 42px; /* Pushes the "About" link to the right */
}

/* Target the About link */
header nav ul li:nth-child(4) {
  margin-left: 42px; /* Pushes the "About" link to the right */
}

#menu li:nth-child(1)::after,
#menu li:nth-child(2)::after,
#menu li:nth-child(3)::after,
#menu li:nth-child(4)::after {
    content: "";
    position: absolute;
    top: 2px;
    right: -26px; /* Moves the line to the right */
    height: 20px; /* Height of the divider line */
    border-right: 2px solid #008080; /* Line style */
    border-radius: 6px; /* Smooth rounded edges */
    
    /* Glow effect */
    box-shadow: 0 0 10px 2px rgba(0, 128, 128, 0.8); /* Creates the glowing effect */
    transition: box-shadow 0.3s ease-in-out; /* Adds smooth transition on hover */
}

/* Optional: Increase glow on hover */
#menu li:nth-child(1):hover::after,
#menu li:nth-child(2):hover::after,
#menu li:nth-child(3):hover::after,
#menu li:nth-child(4):hover::after {
    box-shadow: 0 0 15px 3px rgba(0, 128, 128, 1); /* Increases the glow when hovered */
}

#menu li {
    padding-right: 35px; /* Adds space between items */
}

/* Hover effect for list items */
header nav ul#menu li:nth-child(-n+5):hover {
  transform: scale(1.08); /* Scale up on hover */
  transition: transform 0.3s ease; /* Smooth transition for the transform */
  letter-spacing: 0.65px; /* Adjust letter spacing */

}

/* Scale down when clicked (active state) */
header nav ul#menu li:nth-child(-n+5):active {
  transform: scale(0.98); /* Slightly shrink on click */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for transform and box-shadow */
}

header nav ul {
  width: 245px;
  height: 70px;
  left: 850px;
  top: -27.5px;
  transform: translateY(0);
  transition: all 0.3s ease-out;
}

header nav ul li{
  margin: 0 40px; /* Adds spacing between each list item */
  position: relative;
}

header nav ul li a {
  color: white; /* Text color */
  font-family: 'Quicksand', sans-serif;
  text-decoration: none; /* Removes underline from links */
  font-size: 18.5px; /* Adjust font size */
  font-weight: 500; /* Slightly lighter font weight for a modern feel */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  display: inline-block; /* Ensures positioning is applied correctly */
}

/* Underline effect */
header nav ul li a::before {
  content: ''; /* Empty content for the underline effect */
  position: absolute;
  bottom: -5px; /* Increased gap between the text and the underline */
  left: 0;
  width: 0; /* Initially, no underline */
  height: 2px; /* Height of the underline */
  background-color: white; /* Color of the underline */
  transition: width 0.3s ease; /* Smooth transition for the width */
}

/* On hover, the underline expands */
header nav ul li a:hover::before {
  width: 100%; /* Underline expands to full width of the text */
}

header nav ul li a:hover {
  color: #008080; /* Changes color on hover */
  transform: scale(1.1); /* Slight zoom effect on hover */
}

header a {
    text-decoration: none; /* Remove underline */
    color: white; /* Text color */
    font-size: 18px; /* Font size for readability */
    font-weight: bold; /* Keep text bold */
    font-family: 'Poppins', sans-serif; /* Use the Poppins font */
    cursor: pointer; /* Make it clickable */
    text-shadow: none; /* Remove text shadow */
    margin-left: 2px; /* Move the text to the right */
    margin-right: 2px; /* Move the text to the right */

}

header a:hover {
    color: #1abc9c;

}

section{ /*alignment*/
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center; 
}

.scroll-to-top {
  position: fixed;
  bottom: 45px;
  left: 30px;
  width: 50px;
  height: 50px;
  background-color: #008080;
  color: white;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border: none;
  cursor: pointer;
  transition: opacity 1s ease-out, transform 1s ease-out; /* Slower and smoother transition for opacity and transform */
  z-index: 999;
  opacity: 0; /* Initially hidden */
  transform: translateY(50px); /* Positioned off the screen */
  animation: bounce 0.85s ease-in-out infinite; /* Bounce animation */
  transform-origin: center; /* Ensures scaling happens from the center */
}

/* When the button becomes visible */
.scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0); /* Bring it into view */
}

/* Hover effect */
.scroll-to-top:hover {
  background-color: #006666;
  transform: scale(1.35) translateY(-5px); /* Add both scale and translateY */
}

/* Button arrow icon */
.scroll-to-top::before {
  content: "↑";
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: black;
}

/* Bouncing animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* Original position */
  }
  50% {
    transform: translateY(-5px); /* Moves up by 5px */
  }
}

/*.container{ page length -comment this out if added back in.
	margin-top: 10%;
}*/

.blackBorder {
    position: fixed;
    width: 245px; /* Set the width of the rectangle */
    height: 70px; /* Set the height of the rectangle */
    left: 85px;
    z-index: 10; /* Ensures the header stays on top of other content */
}

.footerlogo {
  position: center;
    width: 85px; /* Set the width of the rectangle */
    height: 85px; /* Set the height of the rectangle */
    margin-top: 45px;
    margin-right: 235px;
    
}

.footerlogo1 {
  position: center;
    width: 85px; /* Set the width of the rectangle */
    height: 85px; /* Set the height of the rectangle */
    margin-bottom: 935px;
    margin-right: 930px;
    
}

.footerlogo2 {
  
    width: 235px; /* Set the width of the rectangle */
    height: 235px; /* Set the height of the rectangle */
    margin-top: 125px;
    margin-left: -1125px;
	position: absolute;
    
}



#about-us-image7 {
    position: absolute; /* Absolutely position the image */
    bottom: 215px;
    left:1135px;         /* Distance from the right side of the page */
    width: 50px;        /* Set a fixed width for the image */
    height: 50px;       /* Set a fixed height for the image */
    transform: scale(0.085);
    z-index: -1;          /* Ensure the image stays behind other content */
}

.whiteBorder{
    height: 2050px;
    width: 935px;
    position: absolute;
    top: -725px;
    right: 1100px;
	
}

.theheader{
    position: fixed;
}

/* To position the contact section wherever you want using flexbox or other methods */

.contact-details h2 {
    font-size: 24px;
    margin-bottom: 8px; /* Space between heading and contact info */
    text-align: center;
    color: #F1C40F; /* Soft yellow for heading */
    
}

.contact-details ul {
    list-style-type: none; /* Removes default bullets */
    padding-left: 0;
    margin: 0; /* Removes any extra margin */
}

.contact-details li {
    margin-bottom: 6px; /* Space between items */
    font-size: 58px;
}

.contact-details a {
    color: #F7DC6F; /* Soft yellow for links */
    text-decoration: none;
}

.contact-details a:hover {
    text-decoration: underline; /* Underline links on hover */
}

.contact-details li strong {
    color: #A8E6CF; /* Soft green for strong labels */
    margin-right: 10px;
}

.contact-details {
    background-color: #333;
    color: #fff;
    padding: 32px 48px;
    border-radius: 8px;
    display: inline-block;
    text-align: left;
    box-sizing: border-box;
    width: auto;
    height: auto; 
    margin:0;
    position: absolute; /* Fixes the box to the left of the screen */
    left: 50px; /* Moves the box 20px from the left edge of the screen */
    top: 150%; /* Centers the box vertically */
    transform: translateY(-50%); /* Adjusts to truly center it */
}

.footer {
    background-color: black;
    color: white;
    padding: 40px 0;
    font-family: 'Poppins', sans-serif;
    
    /* Stronger glow effect */
    box-shadow: 0px -10px 10px rgba(0, 191, 174, 0.5);
    
    /* Ensure it's not covered by other elements */
    position: relative;
    overflow: hidden;
}

/* Container for footer content */
.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1625px;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* Small twinkling stars */
.footer-star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
    animation: twinkle 2s infinite alternate ease-in-out;
}

/* Twinkling animation */
@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(1.2); }
}

.linkedin-icon img {
    width: 20px;  /* Adjust size of LinkedIn logo */
    height: 20px;
    margin-right: 15px;
}

.social-icons {
	
    display: flex;            /* Aligns the icons horizontally */
    margin-top: 10px;
	
}

.social-icons a {
    font-size: 20px;
    margin-right: 15px;
    color: #333;  /* Icon color */
    text-decoration: none;
}

.social-icons a:hover {
    color: #007bff;  /* Hover color */
}

.footer-section {

    flex: 1;
    min-width: 100px;
    
}

.footer-section h3 , .footer-section h4 {
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: #008080;   
    transition: transform 0.4s ease; /* Smooth transition for transform and color */
	
}

.footer-section1 h3 , .footer-section1 h4 {
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: #008080;   
    transition: transform 0.4s ease; /* Smooth transition for transform and color */

}

.footer-section h3:hover, .footer-section h4:hover,
.footer-section1 h3:hover, .footer-section1 h4:hover {
    transform: scale(1.01); /* Slight scaling for a more subtle hover effect */
}


.footer-section a {

    text-decoration: none;  /* Removes underline */
    /* Ensures the text color stays the same */
    font-family: Arial, sans-serif; /* Same font as the rest of the page */
    display: inline-flex;   /* Aligns icon and text horizontally */
    align-items: center;    /* Centers icon and text vertically */
    font-size: 17px;    
    color:white;    /* Ensures consistent text size */

}

.footer-section1 a {

    text-decoration: none;  /* Removes underline */
    /* Ensures the text color stays the same */
    font-family: 'Poppins', sans-serif; /* Use the Poppins font */
    display: inline-flex;   /* Aligns icon and text horizontally */
    align-items: center;    /* Centers icon and text vertically */
    font-size: 17px;    
    color:white;    /* Ensures consistent text size */
}

.footer-section i {
    margin-right: 12px;      /* Adds space between the icon and the text */
    font-size: 25px;        /* Ensures the icon size stays the same */
    /* Ensures the icon color is the same as text */
}

.footer-section1 i {
    margin-right: 12px;      /* Adds space between the icon and the text */
    font-size: 25px;        /* Ensures the icon size stays the same */
    /* Ensures the icon color is the same as text */
}

.footer-section a:hover {
    color: #333;            /* Keeps the text color the same when hovered */
}

.footer-section1 a:hover {
    color: #333;            /* Keeps the text color the same when hovered */
}

.footer-section p {
    font-size: 17px; 
    line-height: 1.8;
    color: #008080;   
}

.footer-section1 p {
    font-size: 1rem;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section1 ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
    font-size: 1rem;
}

.footer-section1 ul li {
    margin-bottom: 10px;
    font-size: 1rem;
}

.footer-section ul li a {
    font-family: 'Poppins', sans-serif; /* Use the Poppins font */
    color: #008080;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section1 ul li a {
    color: #008080;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-right: 35px;
}

.footer-section ul li a:hover {
    color: white;
}

.footer-section1 ul li a:hover {
    color: white;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links .social-icon {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.social-links .social-icon:hover {
    color: #1abc9c;
}

.footer-bottom {
    background-color: black;
    color: #008080;   
    text-align: center;
    padding: 15px 0;
    font-size: 0.9rem;
    margin-left: 20px; /* Moves the entire section slightly to the right */
}

.footer-bottom-links a {
    color: #008080;
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
}

.footer-bottom-links a:hover {
    color: white;
}

/* Basic Styles for the content */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body.fade-in {
  background-color: #e0f7fa; /* A smooth blue color */
}

@keyframes fadeInColor {
  0% {
    background-color: white;
  }
  100% {
    background-color: #e0f7fa; /* Replace with your dynamic color */
  }
}

body {
  animation: fadeInColor 3s ease-out; /* Adjust duration and easing as needed */
}

h1 {
  text-align: center;
  margin-top: 50px;
}

/* Reset body margin and padding */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

/* Logo styles */
.logo {
  text-align: center;
  padding-top: 20px;
  z-index: 2;
}

.logo img {
  max-width: 100px; /* Adjust to your logo size */
  height: auto;
}

/* Flash Effect */
.flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0; /* Start invisible */
  visibility: hidden; /* Start hidden */
  animation: flashEffect 0.6s ease-out forwards;
  z-index: 9999;
}

.flash.active {
  visibility: visible;
  opacity: 1;
}

@keyframes flashEffect {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

/* Content styles */

@keyframes fadeInContent {
  0% {
    opacity: 0.1; /* Start with low opacity */
  }
  100% {
    opacity: 1; /* Fade to fully visible */
  }
}

h1 {
  font-size: 2rem;
  margin-top: 50px;
}

// Dark Mode CSS

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

body.dark-mode .cta-button {
  background-image: linear-gradient(45deg, #333, #555);

}

.cta-button i,
.cta-button2 i {
  position: relative;
  top: 0px; /* Moves the icon down slightly */
  right: 14px;  /* You can use left/right to shift horizontally */
}

.circle-img {
  width: 205px; /* Adjust the size of the circular images */
  height: 205px;
  border-radius: 100%; /* Makes the image circular */
  object-fit: cover; /* Ensures the image covers the circle without distortion */
  position: relative; /* Set position relative to its normal position */
  left: -320px; /* Move the image to the right by 20px (adjust as needed) */
  top: 185px;
  transition: transform 0.3s ease-in-out; /* Smooth scale transition */
  border: 2px solid black; /* Returning to original black outline */

}

.circle-img1 {
  width: 205px; /* Adjust the size of the circular images */
  height: 205px;
  border-radius: 100%; /* Makes the image circular */
  object-fit: cover; /* Ensures the image covers the circle without distortion */
  position: relative; /* Set position relative to its normal position */
  left: -775px; /* Move the image to the right by 20px (adjust as needed) */
  top: 185px;
  transition: transform 0.3s ease-in-out; /* Smooth scale transition */
  border: 2px solid black; /* Returning to original black outline */

}

.circle-img2 {
  width: 205px; /* Adjust the size of the circular images */
  height: 205px;
  border-radius: 100%; /* Makes the image circular */
  object-fit: cover; /* Ensures the image covers the circle without distortion */
  position: relative; /* Set position relative to its normal position */
  left: -210px; /* Move the image to the right by 20px (adjust as needed) */
  top: -35px; /* Fixed the syntax issue by removing the comment */
  transition: transform 0.3s ease-in-out; /* Smooth scale transition */
  border: 2px solid black; /* Returning to original black outline */

}


.flash {
  background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%); /* Gradient background */
  color: white;
  padding: 60px 40px; /* Increased padding for a more spacious feel */
  border-radius: 12px; /* More rounded corners */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Stronger box-shadow for depth */
  position: relative;
  top: -50px; /* Shift the flash section higher */
  max-width: 800px; /* Limit width for more controlled left-alignment */
  margin-left: 0; /* No margin on the left to stick to the edge */
  text-align: left; /* Keep the text left-aligned */
  animation: fadeIn 2.4s ease-out; /* Add fade-in animation */
}

/* Slogan Animation */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.icologo {
    width: 290px;
    height: 290px;
    margin-top: 80px;
    margin-left: -1875px;
    position: absolute;

}

/* Container Setup */

.home-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 1000px;
  width: 100%;
  padding: 125px 20px 20px; /* Add 15px padding to the top */
  margin: 0 auto; /* Center the container on the page */
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}

.home-container.visible {
  opacity: 1; /* Become visible */
  visibility: visible; /* Make visible */
}

/* Hero Section Styling */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two-column layout */
  gap: 60px;
  align-items: center;
  width: 100%;
  padding: 20px;
  position: relative;
}

/* Text Section Styling */
.text-section {
  text-align: left;
  max-width: 300px;
  
}

.text-section h1 {
  text-align: left; /* Align text to the left */
  font-family: 'Poppins', sans-serif; /* Use the Poppins font */
  font-size: 5rem; /* Slightly smaller font size for balance */
  margin-bottom: 40px; /* Increased margin for better spacing */
  color: black; /* A softer dark grey for elegance */
  font-weight: 600; /* Medium weight for a cleaner, less bold look */
  line-height: 1.3; /* Comfortable line height for readability */
  letter-spacing: 0.5px; /* Subtle letter spacing for sophistication */
  position: absolute; /* Position as per your original request */
  bottom: 95%; /* Keep vertical position as you specified */
  transition: all 0.3s ease; /* Smooth transition effect */
  max-width: 950px;
  text-shadow: none; /* Remove all text shadow effects */
}

/* Hover effect */
.text-section h1:hover {
  transform: translateY(-8px); /* Slight upward movement on hover */
}

.text-section p:hover {
}

/* Optional: Adding a fade-in animation for text */
@keyframes fadeInEffect {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-section h1 {
  animation: fadeInEffect 2.4s ease-out; /* Smooth fade-in animation */

}

.highlight-careers {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: #008080;
}

.highlight-futures {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: #008080;
}

.text-section p {

  font-size: 1.25rem; /* Slightly larger text for better readability */
  color: #222; /* Slightly darker text color for a more professional appearance */
  line-height: 1.8; /* Adjusted line height for improved legibility */
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif; /* Use the Poppins font */
  position: absolute; /* Absolute positioning for dynamic placement */
  width: 80%; /* Let the text span 80% of the section for balance */
  opacity: 0.9; /* Slight opacity for a more refined look */
  position: absolute; /* Change to 'relative' or 'fixed' based on need */
  bottom: 79%; /* Adjust vertical position */
  right:17.5%;
  opacity: 0; /* Initially hidden */
  transition: opacity 2.4s ease-in-out; /* Smooth fade-in effect */
  /*white-space: nowrap;  Prevents the text from wrapping */
  overflow: hidden; /* Hides the text until it's typed */
  display: inline-block; /* Keeps text inline for typing effect */
  text-shadow: none;

}

.text-section p::after {
  content: '|'; /* This will simulate the cursor */
  font-weight: bold;
  color: #444;
  margin-left: 5px;
  animation: blink 0.8s step-end infinite; /* Blinking effect */
}

@keyframes typing {
  0% {
    width: 0; /* Start with no text visible */
  }
  100% {
    width: 100%; /* Reveal full text horizontally */
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.text-section p.typing {
  animation: typing 2s steps(30) 1s forwards; /* Typing effect with delay */
  opacity: 1; /* Fade in text */
}

/* CTA Section Wrapper Styling */
.cta-section-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  text-align: center;
  
}

/* CTA Button Styling */
.cta-button {
  font-family: 'Poppins', sans-serif; /* Use the Poppins font */
  padding: 10px 26px; /* Slightly larger padding for a more balanced look */
  background-color: #008080; /* Techy blue background */
  color: white;
  text-decoration: none;
  border-radius: 50px; /* Modern rounded corners */
  font-size: 1.35rem; /* Bigger font for better emphasis */
  font-weight: 450; /* Bold text for stronger call-to-action */
  letter-spacing: 0.35px; /* More space between letters for a cleaner look */
  transition: all 0.3s ease-out; /* Smooth transition effect */
  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4), 0 2px 8px rgba(0, 123, 255, 0.2); /* Soft shadow */
  border: 0.5 px solid transparent;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 30px;
  width: 295px;
  text-align: center; /* Center-align the text */
  box-sizing: border-box;
  border-radius: 50px;
  backdrop-filter: blur(8px); /* Optional: Glassmorphism effect */
  background-image: linear-gradient(45deg, #008080, #000000); /* Gradient background */
  background-size: 200% 200%;
  right:111.5%;
  top:129%;
  visibility: hidden; /* Initially hidden */
  transition: opacity 2.4s ease-in-out; /* Smooth fade-in effect */
}

/* Hover Effect */

/* Optional: Adding a "glow" effect on hover */
@keyframes glowEffect {
  0% {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.6), 0 0 8px rgba(0, 123, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.8), 0 0 12px rgba(0, 123, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.6), 0 0 8px rgba(0, 123, 255, 0.4);
  }
}

.cta-button:hover {
  animation: glowEffect 1s ease-in-out infinite; /* Glow effect on hover */
  color: white !important; /* Force text color to white on hover */
  text-decoration: none !important; /* Prevent underline on hover */

}

.cta-section-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  text-align: center;
  
}

/* CTA Button Styling */
.cta-button2 {
  font-family: 'Poppins', sans-serif; /* Use the Poppins font */
  padding: 10px 26px; /* Slightly larger padding for a more balanced look */
  background-color: #008080; /* Techy blue background */
  color: white;
  text-decoration: none;
  border-radius: 50px; /* Modern rounded corners */
  font-size: 1.35rem; /* Bigger font for better emphasis */
  font-weight: 450; /* Bold text for stronger call-to-action */
  letter-spacing: 1px; /* More space between letters for a cleaner look */
  transition: all 0.3s ease-out; /* Smooth transition effect */
  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4), 0 2px 8px rgba(0, 123, 255, 0.2); /* Soft shadow */
  border: 0.5 px solid transparent;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 30px;
  width: 295px;
  text-align: center; /* Center-align the text */
  box-sizing: border-box;
  border-radius: 50px;
  backdrop-filter: blur(8px); /* Optional: Glassmorphism effect */
  background-image: linear-gradient(45deg, #008080, #000000); /* Gradient background */
  background-size: 200% 200%;
  left:70%;
  bottom:48.5%;
  visibility: hidden; /* Initially hidden */
  transition: opacity 2.4s ease-in-out; /* Smooth fade-in effect */

}

.cta-button2:hover {
  animation: glowEffect 1s ease-in-out infinite; /* Glow effect on hover */
  color: white !important; /* Force text color to white on hover */
  text-decoration: none !important; /* Prevent underline on hover */
}

/* Footstep Pulse Animation */
@keyframes footstep-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.contact-container {
  position: absolute;
  bottom: 0; /* Position it at the top of the page */
  left: 0; /* Align it to the left */
  width: 100%; /* Stretch to the full width of the page */
  height: 100vh; /* Stretch to 100% of the viewport height */
  max-width: none; /* Remove the max-width so it can stretch */
  margin: 0;
  padding: 5px 50px; /* Reduced padding (as you already have) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  overflow: hidden;

}

/* Target the h1 inside this specific header */
#contact header h1 {
  text-align: left; /* Align text to the left */
  font-family: 'Playfair Display', serif;
  font-size: 5rem; /* Slightly smaller font size for balance */
  color: black; /* A softer dark grey for elegance */
  font-weight: 600; /* Medium weight for a cleaner, less bold look */
  line-height: 1.3; /* Comfortable line height for readability */
  letter-spacing: 0.5px; /* Subtle letter spacing for sophistication */
  position: absolute; /* Position as per your original request */
  right: 160px;
  top: 5px;
  transition: all 0.3s ease; /* Smooth transition effect */
  max-width: 1350px;
  text-shadow: none; /* Remove any text shadow */

}

.contact-container.visible {
  opacity: 1; /* Become visible */
  visibility: visible; /* Make visible */
}

#contact header h1:hover{
  color: white; /* Light blue color for the hover state */
  transform: translateY(-8px); /* Slight upward movement on hover */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2); /* Stronger shadow for hover effect */
}

.contact-info {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;

}

.contact-info1 {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;

}

/* Individual contact info block */
.contact-info div {
    padding: 20px;
    width: 30%;
}

/* Individual contact info block */
.contact-info1 div {
    padding: 20px;
    width: 30%;
}

/* Contact info block titles */
.contact-info h3 {
  font-family: 'Poppins', sans-serif; /* Use the Poppins font */
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
  color: white; /* White text color */
  position: relative;
  top: 45px;
  right: 245px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); /* Black shadow with higher opacity */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.contact-info h3:hover {
  transform: scale(1.05); /* Slight scale effect on hover */
  color: #008080; /* Change text color on hover */
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45); /* Stronger shadow on hover */
}

/* Contact info block titles */
.contact-info1 h3 {
  font-family: 'Poppins', sans-serif; /* Use the Poppins font */
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
  color: white; /* White text color */
  position: relative;
  top: -608px;
  right: 245px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); /* Black shadow with higher opacity */
  transition: all 0.3s ease; /* Smooth transition for hover effect */

}

.contact-info1 h3:hover {
  transform: scale(1.05); /* Slight scale effect on hover */
  color: #008080; /* Change text color on hover */
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45); /* Stronger shadow on hover */
}

/* Contact info block text */
.contact-info p {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: black;
  text-align: center;
  position: relative;
  top: 10.5px;
  right: 105px;
  font-weight: bold;
  text-shadow: none; /* Remove any text shadow */
  transition: all 0.3s ease;
}


.contact-info p:hover {
  color: #008080; /* Change text color on hover */
  transform: scale(1.03); /* Slightly scale up on hover */
}

.contact-info1 p {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: black;
  text-align: center;
  position: relative;
  top: -642px;
  right: 105px;
  font-weight: bold;
  text-shadow: none; /* Remove any text shadow */
  transition: all 0.3s ease;
}

.contact-info1 p:hover {
  color: #008080; /* Change text color on hover */
  transform: scale(1.03); /* Slightly scale up on hover */
}

.send-message-title {
  text-align: center; /* Center the text */
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem;
  margin-bottom: 40px;
  color: black;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.35px;
  position: absolute;
  bottom: 87%;
  left: 14.25%; /* Move to center */
  transform: translateX(-50%); /* Perfect centering */
  transition: all 0.3s ease;
  max-width: 950px;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.8), -2px -2px 3px rgba(255, 255, 255, 0.8); /* White outline */
  text-transform: uppercase;
}

.send-message-title:hover {
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2); /* Stronger shadow for hover effect */
  animation: glow 1.5s infinite alternate ease-in-out; /* Subtle glowing effect */
}

.send-message-title1 {
  text-align: center; /* Center the text */
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem;
  margin-bottom: 40px;
  color: black;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.35px;
  position: absolute;
  bottom: 90.5%;
  left: 11.6%; /* Move to center */
  transform: translateX(-50%); /* Perfect centering */
  transition: all 0.3s ease;
  max-width: 950px;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.8), -2px -2px 3px rgba(255, 255, 255, 0.8); /* White outline */
  text-transform: uppercase;
}

.send-message-title1:hover {
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2); /* Stronger shadow for hover effect */
  animation: glow 1.5s infinite alternate ease-in-out; /* Subtle glowing effect */
}

@keyframes glow {
  0% {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  100% {
    text-shadow: 4px 4px 16px rgba(255, 255, 255, 0.5), 0 4px 12px rgba(255, 255, 255, 0.4);
  }
}

/* General button styling */

/* Shared button styles */
.btn1, .btn2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: white;
    padding: 15px 35px;
    font-size: 20px;
    border-radius: 50px; /* Fully rounded edges */
    border: none;
    outline: none;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    /* Positioning */
    
    top: 0px; /* Lower the button */
    right: -720px;  /* Move it to the right */
}

/* First button - Warm Gold (Previously Green) */
.btn1 {
    background: linear-gradient(135deg, #008080, #008080);
}

.btn1:hover {
    background: linear-gradient(135deg, #008080, #008080);
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(0, 128, 128, 0.4); /* Teal shadow */

}

/* Second button - Deep Blue (Previously Orange) */
.btn2 {
    background: linear-gradient(135deg, #008080, #008080);
    margin-top: 70px; /* Space between buttons */
}

.btn2:hover {
    background: linear-gradient(135deg, #008080, #008080); /* Slightly darker blue */
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(0, 128, 128, 0.4); /* Teal shadow */

}

/* Ripple effect on click */
.btn1:active, .btn2:active {
    transform: scale(1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#cv-upload h3 {
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 4.2rem;
  margin-bottom: 40px;
  color: black;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.35px;
  position: absolute;
  bottom: 74%;
  left: 76px;
  transition: all 0.3s ease;
  max-width: 950px;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.8), -2px -2px 3px rgba(255, 255, 255, 0.8); /* White outline */
  text-transform: uppercase;
}

#contact-content, #cv-upload-content {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0s 0.5s, height 0.5s ease-in-out; /* Transition height for smoother animation */
  position: absolute;
  width: 100%;
}

/* When active, make the section visible */
#contact-content.show, #cv-upload-content.show {
  opacity: 1;
  visibility: visible;
  height: auto;  /* Reset height when showing */
  overflow: visible;
  position: relative;
  transition: opacity 0.5s ease-in-out, visibility 0s 0s, height 0.5s ease-in-out;
}

/* Styling for h5 (Header) with a Smooth, Continuous Animation */
.contact-right h5 {
  font-size: 42px;
  font-family: 'Poppins', sans-serif;
  color: black;
  margin-bottom: 15px; /* Space below the header */
  text-shadow: none !important; /* Ensures no shadow is applied */
  animation: fadeLoop 2s ease-in-out infinite;
}

/* Keyframe Animation */
@keyframes fadeLoop {
  0% {
    opacity: 0.6; /* Slightly higher opacity */
    transform: translateY(2px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.6;
    transform: translateY(2px);
  }
}

/* Tooltip icon style */
.tooltip-icon {
  font-size: 28px;
  color: #ffcc00;
  margin-left: 12px;
  cursor: pointer;
  position: relative; /* Needed for top adjustment */
  top: 5px; /* Adjust this value to move it lower or higher */
}

/* Tooltip text that will show when the icon is hovered */
.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 8px;
  font-size: 12px; /* Default font size */
  border-radius: 5px;
  top: 50%; /* Vertically center relative to icon */
  left: 120%; /* Push to the right of the icon */
  transform: translateY(-50%); /* Adjust for vertical centering */
  white-space: nowrap;
  z-index: 10;
  visibility: hidden; /* Make it hidden by default */
  opacity: 0; /* Make it invisible initially */
  transition: opacity 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

/* Show the tooltip and make text bigger on hover */
.tooltip-icon:hover::after {
  visibility: visible;
  font-family: 'Poppins', sans-serif;
  opacity: 1;
  font-size: 20px;
}

/* Right side content - Header and Text */
.contact-right {
  flex: 1; /* Right section takes up less space */
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: flex-start; /* Align content to the left */
  justify-content: flex-start; /* Align content to the top */
  margin-top: -705px; /* Optional: Set to 0 to move the section to the top */
  margin-left: 1070px; /* Optional: Set to 0 to move the section to the left */
}

.contact-heading-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.contact-heading-wrapper i {
  font-size: 62px;
  color: #008080;
  margin-left: 20px; /* Adjust this value to move it more or less */
  margin-top: -24px; /* Move the icon up */
}

/* Styling for p (Text) with a Smooth Animation */
.contact-right p {
  font-size: 21px;
  font-family: 'Poppins', sans-serif;
  color: black;
  line-height: 1.6;
  max-width: 550px; /* Optional: limit the width for better readability */
  text-align: left; /* Align text to the left */
  text-shadow: none !important; /* Ensures no shadow is applied */
  opacity: 0;
  transform: scale(0.98); /* Slightly smaller to create a pop effect */
  animation: fadeInScale 1.5s ease-out forwards;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Added transition for color */
}

/* Keyframe Animation */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1); /* Scale to full size */
  }
}

/* Hover effect for p (Text) */
.contact-right p:hover {
  transform: scale(1.05); /* Slight scale up on hover */
  color: white; /* Change color to #008080 (Teal) on hover */
}

/* Styling for h5 (Header) with a Smooth, Continuous Animation */
.contact-right1 h5 {
  font-size: 42px;
  font-family: 'Poppins', sans-serif;
  color: black;
  margin-bottom: 15px; /* Space below the header */
  text-shadow: none !important; /* Ensures no shadow is applied */
  animation: fadeLoop 2s ease-in-out infinite;
}

/* Keyframe Animation */
@keyframes fadeLoop {
  0% {
    opacity: 0.6; /* Slightly higher opacity */
    transform: translateY(2px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.6;
    transform: translateY(2px);
  }
}

/* Right side content - Header and Text */
.contact-right1 {
  flex: 1; /* Right section takes up less space */
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: flex-start; /* Align content to the left */
  justify-content: flex-start; /* Align content to the top */
  margin-top: -685px; /* Optional: Set to 0 to move the section to the top */
  margin-left: 1070px; /* Optional: Set to 0 to move the section to the left */
}

/* Styling for p (Text) with a Smooth Animation */
.contact-right1 p {
  font-size: 21px;
  font-family: 'Poppins', sans-serif;
  color: black;
  line-height: 1.6;
  max-width: 550px; /* Optional: limit the width for better readability */
  text-align: left; /* Align text to the left */
  text-shadow: none !important; /* Ensures no shadow is applied */
  opacity: 0;
  transform: scale(0.98); /* Slightly smaller to create a pop effect */
  animation: fadeInScale 1.5s ease-out forwards;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Added transition for color */
}

/* Keyframe Animation */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1); /* Scale to full size */
  }
}

/* Hover effect for p (Text) */
.contact-right1 p:hover {
  transform: scale(1.05); /* Slight scale up on hover */
  color: white; /* Change color to #008080 (Teal) on hover */
}

#cv-upload {
  width: 56%;
  padding: 16px;
  border-radius: 4px;
  position: relative;
  top: 15px;
  right: 102px;
  transform: scale(0.82);
  text-shadow: none;
  border: none;
  border-top: 4px solid black;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}

#cv-upload:hover {
  transform: scale(0.85); /* Slightly enlarge the form on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Add shadow to the form on hover */
}

#cv-upload label {
  display: block;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 5px; /* Slightly less space below labels */
  font-size: 16px; /* Slightly smaller font for compactness */
  font-weight: 500; /* Semi-bold for readability */
  line-height: 1.2; /* Tight line spacing */
  color: black; /* Darker color for better readability */
  font-weight: bold;
  transition: color 0.3s ease;
}

/* Target the CV form */
form {
  width: 50%;
  padding: 16px; /* Reduced padding */
  border-radius: 4px; /* Slightly tighter corners */
  position: relative;
  top: -60px;
  right: 50px;
  transform: scale(0.92);
  text-shadow: none;
  border: none;
  border-top: 4px solid black;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Control spacing between elements */
}

textarea {
  resize: none;
}

form:hover {
  transform: scale(0.95); /* Slightly enlarge the form on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Add shadow to the form on hover */
}

form label {
  font-family: 'Poppins', sans-serif;
  display: block;
  font-size: 17px;
  color: black;
  margin-bottom: 5px;
  margin-top: 10px;
  font-weight: bold;
  transition: color 0.3s ease;
}

form input,
form textarea {
  font-family: 'Poppins', sans-serif;
  width: 98%;
  padding: 12px;
  margin-top: 5px;
  border-radius: 5px;
  background-color: #f0f0f0;
  border: 2px solid black;
  font-size: 16px;
  color: black;
  transition: all 0.3s ease; /* Add transition for inputs */
}

form input:focus,
form textarea:focus {
  border-color: #008080; /* Change border color on focus */
  background-color: #e0f7f7; /* Light teal background when focused */
}

form input::placeholder,
form textarea::placeholder {
  color: #888; /* Lighter placeholder text */
}

/* Button styling */
form button {
  width: 100.75%;
  padding: 12px;
  background-color: black;
  color: white;
  font-size: 20px;
  border: 2px solid white;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-weight: bold;
}

form button:hover {
  background-color: #008080;
  transform: scale(1.01); /* Slightly enlarge button on hover */
}

/* Initial fade-in effect on page load */

/* Hover effect on text box */

/* Keyframes for fade-in animation */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* General About Us Section */
/* General About Us Container */
/* General About Us Container */

/* Fade-in Animation for Visibility */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Interactive List Hover Effects */

.star {
    position: absolute;
    width: 2.5px;border
    height: 2.5px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); /* Glowing effect */
    animation: twinkle 2s infinite alternate; /* Twinkle animation */
    opacity: 0.71;
}

 @keyframes twinkle {
            0% {
                opacity: 0.3;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0.3;
            }
        }

#jobs{
 
  font-family: 'Share Tech', sans-serif;
  font-size: 72px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-top: 200px; /* Prevents text from overlapping with header */
  width: 100vw;
  height: 100vh;
  text-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to top right,#FFFACD, #a3bfa1);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  background-attachment: fixed; /* Fixes the background while scrolling */

  /* Slicker border */
  border-top: 2px solid transparent; /* Keep the bottom border */
  border-bottom: 2px solid transparent; /* Keep the bottom border */
  border-left: none; /* Remove left side border */
  border-right: none; /* Remove right side border */
  background-clip: padding-box;
           
}

#about header h1 {
  text-align: right; /* Align text to the left */
  font-family: 'Playfair Display', serif;
  font-size: 5rem; /* Slightly smaller font size for balance */
  color: black; /* A softer dark grey for elegance */
  font-weight: 600; /* Medium weight for a cleaner, less bold look */
  line-height: 1.3; /* Comfortable line height for readability */
  letter-spacing: 0.5px; /* Subtle letter spacing for sophistication */
  position: absolute; /* Position as per your original request */
  left: 70px;
  top: -10px;
  transition: all 0.3s ease; /* Smooth transition effect */
  max-width: 1350px;
  text-shadow: none; /* Remove any text shadow */

}

#about header h1:hover{
  color: white; /* Light blue color for the hover state */
  transform: translateY(-8px); /* Slight upward movement on hover */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2); /* Stronger shadow for hover effect */
}

.about-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-width: none;
  margin: 0;
  opacity: 1; /* Start visible */
  visibility: visible; /* Start visible */
  transition: opacity 1s ease, visibility 1s ease;
  overflow: hidden;
}

.about-container.visible {
  opacity: 1; /* Become visible */
  visibility: visible; /* Make visible */
}

/* Target the h1 inside this specific header */

.about-container.visible {
  opacity: 1;
  visibility: visible;
}

.about-main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  justify-content: center;
  animation: fadeInUp 1.2s ease-in-out;
  z-index: 1;
}

.about-video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60vw;
  max-width: 900px;
  animation: zoomIn 1.4s ease-in-out;
}

.about-video video {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
  border: 2px solid #ffffff33;
  transition: transform 0.3s ease;
}

.about-video video:hover {
  transform: scale(1.04);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  max-width: 98vw;
  padding: 10px 10px;
}

.about-box {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 1.4s ease forwards;
  
  /* Move the box to the left */
  position: relative;
  left: -10px;  /* Adjust this value as needed */
}

.about-box:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.4);
}

.about-box img {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

.about-box h6 {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif; /* Use the Poppins font */
  margin-bottom: 10px;
  color: #008080;
  box-shadow: none;      /* Remove any box shadow */
  text-shadow: none;     /* Remove any text shadow */

}

.about-box p {
  font-size: 14px;
  line-height: 1.6;
  font-family: 'Poppins', sans-serif; /* Use the Poppins font */
  color: black;
  box-shadow: none;      /* Remove any box shadow */
  text-shadow: none;     /* Remove any text shadow */
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes moveBackground {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.side-quote-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
  
}

.side-left {
  left: 98px;
  top: 335px;
  align-items: flex-start;
}

.side-right {
  right: 110px;
  top: 290px;
  align-items: flex-end;
}

.quote-box {
  font-family: 'Poppins', sans-serif;
  background: rgba(135, 206, 250, 0.08);
  backdrop-filter: blur(16px) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) brightness(1.1);
  border: 1px solid rgba(135, 206, 250, 0.25);
  padding: 18px 22px;
  border-radius: 18px;
  color: black;
  font-size: 16px;
  font-style: italic;
  max-width: 320px;
  animation: spawnIn 0.8s ease-out forwards;
  opacity: 0;
  transform: scale(0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  pointer-events: auto;
  position: relative;
}

.quote-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #00bfae 0%, #7b2ff7 100%);
  opacity: 0.12;
  filter: blur(24px);
  
}

.quote-box:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 25px rgba(0, 191, 174, 0.3);
}

@keyframes spawnIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#about{
  font-family: 'Share Tech', sans-serif;
  font-size: 72px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-top: 200px; /* Prevents text from overlapping with header */
  width: 100vw;
  height: 100vh;
  text-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to top right, #8ec5fc, #f1c9ff);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  background-attachment: fixed; /* Fixes the background while scrolling */

  /* Slicker border */
  border-top: 2px solid transparent; /* Keep the bottom border */
  border-bottom: 2px solid transparent; /* Keep the bottom border */
  border-left: none; /* Remove left side border */
  border-right: none; /* Remove right side border */
  background-clip: padding-box;
           
}

#home {
  font-family: 'Share Tech', sans-serif;
  font-size: 72px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-top: 200px; /* Prevents text from overlapping with header */
  width: 100vw;
  height: 100vh;
  text-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  background-attachment: fixed; /* Fixes the background while scrolling */

  /* Remove borders from sides */
  border-bottom: 2px solid transparent; /* Keep the bottom border */
  border-left: none; /* Remove left side border */
  border-right: none; /* Remove right side border */

  /* Box shadow for effect */
  box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.5), 0 0 30px 5px rgba(200, 136, 255, 0.35);
}

.star1 {
    position: absolute;
    width: 2.5px;border
    height: 2.5px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); /* Glowing effect */
    animation: twinkle1 2s infinite alternate; /* Twinkle animation */
    opacity: 0.71;
}

 @keyframes twinkle1 {
            0% {
                opacity: 0.3;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0.3;
            }
        }

#contact{
  font-family: 'Share Tech', sans-serif;
  font-size: 72px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-top: 200px; /* Prevents text from overlapping with header */
  width: 100vw;
  height: 100vh;
  text-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5);
  background: linear-gradient(150deg, #8ec5fc , #a3bfa1 70%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  background-attachment: fixed; /* Fixes the background while scrolling */

   /* Slicker border */
  border-bottom: 2px solid transparent; /* Keep the bottom border */
  border-left: none; /* Remove left side border */
  border-right: none; /* Remove right side border */
  background-clip: padding-box;
}

#jobs header h1 {
  text-align: left; /* Align text to the left */
  font-family: 'Playfair Display', serif;
  font-size: 5rem; /* Slightly smaller font size for balance */
  color: black; /* A softer dark grey for elegance */
  font-weight: 600; /* Medium weight for a cleaner, less bold look */
  line-height: 1.3; /* Comfortable line height for readability */
  letter-spacing: 0.5px; /* Subtle letter spacing for sophistication */
  position: absolute; /* Position as per your original request */
  left: 65px;
  top: -10px;
  transition: all 0.3s ease; /* Smooth transition effect */
  max-width: 1350px;
  text-shadow: none; /* Remove any text shadow */
}

#jobs header h1:hover{
  color: white; /* Light blue color for the hover state */
  transform: translateY(-8px); /* Slight upward movement on hover */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2); /* Stronger shadow for hover effect */
}

.jobs-container {
  position: absolute;
  top: 0; /* Position it at the top of the page */
  left: 0; /* Align it to the left */
  width: 100%; /* Stretch to the full width of the page */
  height: 100vh; /* Stretch to 100% of the viewport height */
  max-width: none; /* Remove the max-width so it can stretch */
  margin: 0;
  padding: 5px 50px; /* Reduced padding (as you already have) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  overflow: hidden;
}

.filters-container {
  display: flex;
  margin-top: 180px; /* Increase margin to move down */
  margin-left: 850px; /* Push to the right */
  margin-right: 0; /* Ensure it aligns to the right */
  gap: 20px;
}

.job-filter {
  padding: 10px;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  border: 2px solid black;
  border-radius: 10px;
  width: 300px;
  background-color: white;
  top: 50px;
  right: 50px;

}

.job-filter:hover {
  border-color: #007bff;
}

.job-filter:focus {
  outline: none;
  border-color: #007bff;
}

.jobs-container.visible {
  opacity: 1; /* Become visible */
  visibility: visible; /* Make visible */
}

.job-main-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Dynamic grid with flexible columns */
  gap: 20px;
  margin-top: 65px;
  max-width: 1800px;
  overflow-y: auto; /* Reintroduce scroll */
  overflow-x: hidden; /* Disable horizontal scrolling */
  height: 580px; /* Fixed height for scrolling */
  padding: 20px;
  padding-top: 2px; /* Adjusts the top margin of the content, pushing the scrollbar down */
  box-sizing: border-box;
}

/* Style the scrollbar */
.job-main-container::-webkit-scrollbar {
  width: 10px; /* Smaller width for the scrollbar */
}

.job-main-container::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of the scrollbar thumb */
  border-radius: 10px;
}

.job-main-container::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Darker color on hover */
}

.job-item {
  font-family: 'Poppins', sans-serif;
  background-color: rgba(255, 255, 255, 0.35);
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 2px; /* Move the job item down by 20px, adjust this value as needed */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensures even spacing */
  height: 385px; /* Adjust this height as needed */

}

/* Style for the Home Page Search Bar */
.home-search-container {
  position: absolute; /* You can use relative, absolute, or fixed depending on where you want to position it */
  top: 50px; /* Adjust the position as needed */
  left: 20px; /* Adjust the left or right position */
}

/* Optionally, you can adjust the width of the search container */
.home-search-container input {
  position: absolute; /* You can use relative, absolute, or fixed depending on where you want to position it */
  width: 850px; /* Adjust the width as needed */
  padding: 8px;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  top: 124px; /* Adjust the position as needed */
  left: -25px;
  border: 2px solid #888 !important; /* Medium grey */

}

/* You can also add margin or padding to the button if needed */
.home-search-container button {
  position: absolute;
  padding: 9px 22px; /* Increase padding for a more spacious button */
  background-color: #008080; /* Blue background */
  color: white; /* White text color */
  border: none; /* No border */
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem; /* Set a good font size */
  border-radius: 30px; /* Rounded corners for a smooth look */
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2); /* Soft shadow */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  top: 122px; /* Adjust the position as needed */
  left: 520px; /* Adjust the position as needed */
}

/* Hover Effect - Slightly Darker Shade */
.home-search-container button:hover {
  background-color: #007070; /* Slightly darker teal */
  transform: translateY(-4px) scale(1.04); /* Gentle lift and grow */
  box-shadow: 0 6px 12px rgba(0, 107, 107, 0.3); /* Stronger shadow */

}

.home-search-container button {
    background-color: #007070 !important; /* Keep color consistent */
    transform: none !important; /* Prevent size changes */
    transition: none !important; /* Disable animations on click */
    outline: none !important; /* Remove default focus outline */
    border: 2px solid black !important; /* Add white border */
}


/* Active (Press) Effect - Even Slightly Darker */
.home-search-container button:active {
  background-color: #007070 !important; /* A bit darker than hover */
  transform: translateY(-2px) scale(1.02); /* Smooth press effect */
  box-shadow: 0 3px 8px rgba(0, 91, 91, 0.3); /* Softer shadow */
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out; 

}

.home-search-container button:hover {
  background-color: #0056b3;
}

.job-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.job-item h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  color: black;
  margin-bottom: 10px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.job-item p {
  font-family: 'Poppins', sans-serif;
  font-size: .92rem;
  color: black;
  margin-bottom: 8px;
  text-shadow: none;
}

.job-item p strong {
  font-weight: bold;
}

.job-item p:last-child {
  margin-bottom: 0;
}

.apply-btn {
  font-family: 'Poppins', sans-serif;
  padding: 10px 20px;
  background-color: #008080;
  color: white;
  font-size: 18px;
  border: 2px solid white;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;  /* Ensures it's treated like an inline element */
}

.apply-btn:hover {
  background-color: #008080; /* Slightly darker shade for hover effect */
  transform: scale(1.01); /* Makes the button scale up */
}

.apply-btn:active {
  transform: scale(1.02);
  background-color: #006666;
}

.apply-btn2 {
  font-family: 'Poppins', sans-serif;
  padding: 10px 20px;
  background-color: black;
  color: white;
  font-size: 18px;
  border: 2px solid white;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;  /* Ensures it's treated like an inline element */
}

.apply-btn2:hover {
  background-color: black;
  transform: scale(1.01);
}

.apply-btn2:active {
  transform: scale(1.02);
  background-color: black;
}

/* Style the search bar container */
.job-search-container {
  position: absolute; /* Make it absolute to position it relative to the parent container */
  top: 15%; /* Moves the search bar 20% down the page, adjust this value to move it up or down */
  left: 50px; /* Aligns the search bar to the left side with some margin */
  width: 100%; /* Makes it span the width of the page */
  max-width: 435px;
  text-align: left; /* Aligns the text to the left */
  padding-left: 20px; /* Adds some padding for better spacing */

}

/* Style the search input field */
.job-search {
  padding: 12px 20px;
  font-size: 1rem;
  border: 2px solid #ddd; /* Original border */
  border-radius: 25px;
  width: 100%;
  max-width: 500px;
  background-color: #f9f9f9;
  color: #333;
  transition: all 0.3s ease;
  outline: 2px solid black; /* Adding an outline around the search field */
}

/* Search bar focus effect */
.job-search:focus {
  border-color: black;
  outline: 2px solid #008080; /* Outline color when focused */
  outline-offset: 3px; /* Adjusts the space when the input is focused */
  box-shadow: 0 0 5px rgba(0, 128, 128, 0.3);
}

.job-search::placeholder {
  color: black; /* Change placeholder text color */
  font-style: italic; /* Make the placeholder text italic */
  font-size: 1rem; /* Adjust the font size of the placeholder */
  font-family: 'Poppins', sans-serif; /* Change the font of the placeholder */
}

#faqs{
  font-family: 'Share Tech', sans-serif;
  font-size: 72px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-top: 200px; /* Prevents text from overlapping with header */
  width: 100vw;
  height: 100vh;
  text-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5);
  background: linear-gradient(150deg, #FFFACD , #708090 60%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  background-attachment: fixed; /* Fixes the background while scrolling */

  /* Slicker border */
  border-bottom: 2px solid transparent; /* Keep the bottom border */
  border-left: none; /* Remove left side border */
  border-right: none; /* Remove right side border */
  background-clip: padding-box;
           
}

.help-icon {
      position: fixed;
      top: 80px;
      right: 20px;
      width: 40px;
      height: 40px;
      background-color: #ffcc00;
      color: #000;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s ease;
    }
    .help-icon:hover {
      background-color: #ffaa00;
    }
    .tooltip {
      position: absolute;
      top: 50px;
      right: 0;
      background: #fff;
      color: #333;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      font-size: 14px;
      display: none;
      white-space: nowrap;
    }
    .help-icon:hover .tooltip {
      display: block;
    }

.btn3, .btn4, .btn5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: white;
    padding: 15px 35px;
    font-size: 20px;
    border-radius: 50px; /* Fully rounded edges */
    border: none;
    outline: none;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    /* Positioning */
    
    top: 20px; /* Lower the button */
    right: -25px;  /* Move it to the right */
}

/* Add to your existing CSS */
button.active {
    color: white; /* White text for the active button */
    border: 2px solid black; /* Green border for the active button */
}

/* First button - Elegant Green */
.btn3 {
    background: linear-gradient(135deg, #008080, #008080); /* Soft green */
}

.btn3:hover {
    background: linear-gradient(135deg, #008080, #008080);
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(0, 128, 128, 0.4); /* Teal shadow */

}

/* Second button - Warm Gold */
.btn4 {
    background: linear-gradient(135deg, #008080, #008080); /* Warm, golden hue */
    margin-top: 70px; /* Space between buttons */
}

.btn4:hover {
    background: linear-gradient(135deg, #008080, #008080); /* Slightly deeper gold */
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(0, 128, 128, 0.4); /* Teal shadow */

}

/* Third button - Deep Blue */
.btn5 {
    background: linear-gradient(135deg, #008080, #008080); /* Cool, deep blue */
    margin-top: 70px; /* Space between buttons */
}

.btn5:hover {
    background: linear-gradient(135deg, #008080, #008080); /* Slightly darker blue */
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(0, 128, 128, 0.4); /* Teal shadow */

}

/* Ripple effect on click */
.btn3:active, .btn4:active, .btn5:active {
    transform: scale(1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.FAQS-container {
  position: absolute; /* Position it absolutely within the viewport */
  top: 35px; /* Move it closer to the top of the page */
  left: 20px; /* Move it closer to the left edge of the page */
  width: 100%; /* Stretch to the full width of the page */
  height: 100vh; /* Stretch to 100% of the viewport height */
  max-width: none; /* Remove the max-width so it can stretch */
  margin: 0;
  padding: 5px 50px; /* Reduced padding (as you already have) */
  
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  overflow: hidden;
  
}

/* FAQ Header */
#faqs header h1  {
  text-align: left; /* Align text to the left */
  font-family: 'Playfair Display', serif;
  font-size: 5rem; /* Slightly smaller font size for balance */
  color: black; /* A softer dark grey for elegance */
  font-weight: 700; /* Bold weight for strong emphasis */
  text-transform: uppercase; /* Convert text to all caps */
  line-height: 1.3; /* Comfortable line height for readability */
  letter-spacing: 0.5px; /* Subtle letter spacing for sophistication */
  position: absolute; /* Position as per your original request */
  left: 840px; /* Move it closer to the left */
  top: -50px; /* Move it closer to the top */
  transition: all 0.3s ease; /* Smooth transition effect */
  max-width: 1350px;
  text-shadow: none; /* Remove any text shadow */
}

#faqs header h1:hover{
  color: white; /* Light blue color for the hover state */
  transform: translateY(-8px); /* Slight upward movement on hover */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2); /* Stronger shadow for hover effect */
}

.FAQS-container.visible {
  opacity: 1; /* Become visible */
  visibility: visible; /* Make visible */
}

/* FAQ Container */
.faq-main-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to move down when needed */
  justify-content: space-between;
  max-width: 1600px;
  margin: auto;
  padding: 50px;
  align-items: flex-start;
  opacity: 1; /* Initial opacity */
  transition: opacity 0.35s ease-in-out; /* Apply fade-in/out transition */
}

/* Optional: If you want the content to disappear */
.faq-main-container.fade-out {
  opacity: 0;
}

/* Individual FAQ item */
.faq-item {
  width: 48%;
  min-width: 400px;
  margin-bottom: 35px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-left: 5px solid #00bfae;
  background-color: rgba(255, 255, 255, 0.35); /* Adjusted transparency here */
  box-sizing: border-box;
  position: relative;
  top: 40px;
  right: 50px;
  transform: scale(1.1); /* Reduced scaling for a subtler effect */
  margin-left: -2.85%; /* Add this to create a gap between items */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  transform: scale(1.05); /* Subtle scale effect on hover */
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); /* Adding a stronger shadow on hover */
  background-color: rgba(255, 255, 255, 0.5); /* Slightly lightens the background color on hover */
}

.faq-item.active {
  transform: scale(1.03); /* Slightly enlarge the active FAQ item */
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15); /* Stronger shadow for the active FAQ */
}

/* Make sure buttons look good */
.faq-question {
  font-family: 'Poppins', sans-serif; /* Use the Poppins font */
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s ease, transform 0.3s ease;
}

.faq-question:hover {
  transform: scale(1.02); /* Slightly scale up the element */
  color: #008080; /* Change text color on hover */
}

.faq-question:focus {
  outline: none; /* Remove outline on focus */
}

.arrow-icon {
  font-size: 18px;
  transition: transform 0.3s ease, color 0.3s ease;
  color: #00bfae;
}

/* FAQ answer styling */
.faq-answer {
  display: none;
  padding: 10px 0;
  font-size: 16px;
  color: black;
  text-shadow: none;
  border-radius: 5px;
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.faq-item.active .faq-answer {
  display: block;
  max-height: 200px; /* Ensure it has a limit on height */
  padding: 10px 0;
}

.faq-item.active .arrow-icon {
  transform: rotate(180deg);
  color: #008080; /* Change arrow color when the FAQ is expanded */
}

/* Animation to reveal FAQ items smoothly */

/* Keyframes for smooth fade-in and upward movement */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional: Add a subtle hover effect for the arrow icon */
.arrow-icon:hover {
  color: #008080; /* Change color on hover */
  transform: scale(1.1); /* Slightly increase size on hover */
}