/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #333; /* Default text color (black) */
  background-color: #f9f9f9;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;  
  z-index: 2;
}


/* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: url('Hero_Section.jpg') no-repeat center/cover;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.section {
  position: relative;
  padding: 60px 0;
  color: #f4eeee; /* Ensure text is black for readability */
  overflow: hidden;
}

.section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1; /* Keep the overlay below clickable elements */
}

.about {
  background: url('About_Us.jpg') no-repeat center/cover;
}

.services {
  background: url('Services_Section.jpg') no-repeat center/cover;
}

.testimonials {
  background: url('Testimonials_Section.jpg') no-repeat center/cover;
}

.contact {
  background: url('Contact_Section.jpg') no-repeat center/cover;
}

.section h2 {
  font-size: 36px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.section h3 {
  color: #fff; /* White text color */
  font-size: 24px; /* Adjust font size */
  font-weight: bold; /* Make the text bold */
  text-transform: uppercase; /* Optional: Convert text to uppercase */
  margin-bottom: 15px; /* Add spacing below the heading */
}

.section p {
  font-size: 18px;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

.btn, .btn_2{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background: #0074D9;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s ease;
  cursor: pointer; /* Ensure the cursor changes to a pointer */
  z-index: 10; /* Ensure it's above other elements */
  pointer-events: auto; /* Ensure the button is clickable */
}

.btn:hover, .btn_2:hover {
  background: #0056b3;
}

.service-cards,
.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  position: relative;
  z-index: 2;
}

.card {
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #333;
}

/* Contact Section */
.contact {
  position: relative; /* Ensure the section is a positioning context */
}

.container {
  position: relative;
 /* z-index: 2;  Ensure the content is above the overlay */
}

/* Contact Form Styles */
.contact-form {
  z-index: 2; /* Ensure the form is above the overlay */
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  color: black; /* Ensure inputted text is black */
  background: white; /* Ensure the background is visible */
  z-index: 2; /* Ensure inputs are above the overlay */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #aaa; /* Placeholder text color */
  transition: color 0.3s ease; /* Smooth transition for placeholder */
}

.contact-form input:focus::placeholder,
.contact-form textarea:focus::placeholder {
  color: transparent; /* Hide placeholder text on focus */
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #007bff; /* Highlight border on focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Optional: Add a subtle glow */
}


/* Additional Pages Styling */
/* Shared Styles for All Pages */
.about-page,
.confidentiality-page,
.offer-page
.login
.register{
  position: relative; /* Required for pseudo-element positioning */
  padding: 60px 0; /* Add vertical padding for spacing */
  overflow: hidden; /* Prevent content overflow */
  color: #fff; /* Default text color */
}

/* Background Images */
.about-page {
  background: url('About_Us.jpg') no-repeat center/cover;
}

.confidentiality-page {
  background: url('About_Us.jpg') no-repeat center/cover;
}

.offer-page {
  background: url('About_Us.jpg') no-repeat center/cover;
}
.login {
  background: url('login_background.jpg') no-repeat center/cover;
}
.register {
  background: url('login_background.jpg') no-repeat center/cover;
}

/* Semi-transparent Overlay */
.about-page::before,
.confidentiality-page::before,
.offer-page::before 
.login::before
.register::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Adjust opacity as needed */
  z-index: 1; /* Place overlay behind text */
}

/* Container for Text Content */
.about-page .container,
.confidentiality-page .container,
.offer-page .container 
.login .container
.register .container{
  position: relative; /* Ensure container stacks above the overlay */
  z-index: 2; /* Place text content above the overlay */
  max-width: 1200px; /* Limit container width for better alignment */
  margin: 0 auto; /* Center the container */
  padding: 20px; /* Add padding for spacing */
}

/* Headings */
.about-page h2,
.confidentiality-page h2,
.offer-page h2,
.about-page h3,
.confidentiality-page h3,
.offer-page h3 
.login h2
.register h2
.login h3
.register h3 {

  color: #fff; /* White text color */
  z-index: 2; /* Ensure headings are above the overlay */
}

/* Paragraphs and Lists */
.about-page p,
.confidentiality-page p,
.offer-page p,
.about-page ul,
.confidentiality-page ul,
.offer-page ul 
.login p
.register p
.login ul
.register ul{

  color: #fff; /* White text color */
  z-index: 2; /* Ensure paragraphs and lists are above the overlay */
}

/* Lists */
.about-page ul,
.confidentiality-page ul,
.offer-page ul 
.login ul
.register ul{
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 30px;
}

/* Links */
.about-page a,
.confidentiality-page a,
.offer-page a 
.login a
.register a{
  color: #fff; /* White text color for links */
  text-decoration: underline; /* Add underline for visibility */
}

.about-page a:hover,
.confidentiality-page a:hover,
.offer-page a:hover 
.login a:hover
.register a:hover {
  color: #f0f0f0; /* Slightly lighter color on hover */
}

.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* Center the modal */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  text-align: center;
  border-radius: 8px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}

/* Fullscreen Background Image */
.login,
.register {
  position: relative;
  min-height: 100vh; /* Ensure the section takes up the full viewport height */
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  overflow: hidden; /* Prevent content overflow */
}

/* Semi-transparent Overlay */
.login::before,
.register::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Adjust opacity as needed */
  z-index: 1; /* Place overlay behind text */
}

/* Container for Text Content */
.login .container,
.register .container {
  position: relative; /* Ensure container stacks above the overlay */
  z-index: 2; /* Place text content above the overlay */
  max-width: 500px; /* Limit container width for better alignment */
  margin: 0 auto; /* Center the container */
  padding: 20px; /* Add padding for spacing */
  background: rgba(0, 0, 0, 0.7); /* Optional: Add a semi-transparent background for the form */
  border-radius: 10px; /* Rounded corners for the form */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Headings */
.login h2,
.register h2 {
  color: #fff; /* White text color */
  text-align: center; /* Center the heading */
  margin-bottom: 20px; /* Add spacing below the heading */
}

/* Form Styling */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between form elements */
}

.contact-form input,
.contact-form button {
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
}

.contact-form input {
  background: #fff;
  color: black; /* Ensure inputted text is black */
}

.contact-form input::placeholder {
  color: #aaa; /* Placeholder text color */
  transition: color 0.3s ease;
}

.contact-form input:focus::placeholder {
  color: transparent; /* Hide placeholder text on focus */
}

.contact-form button {
  background-color: #007bff; /* Blue button */
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #0056b3; /* Darker blue on hover */
}