body {
  margin: 0;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
}

.top-container {
  display: flex;
  justify-content: space-between; /* Evenly space items */
  align-items: center;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 10px 20px;
  margin-top: 0px; /* Top margin */
  border-bottom: 1px solid #ddd;
  position: relative;
  width: 100%;
  z-index: 1;
  height: auto;
  flex-wrap: wrap; /* Optional if it might need to wrap on small screens */
}

.top-container a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  margin: 0 10px;
}

.top-container a:nth-of-type(3) {
  margin-right: 30px; /* Moves it to the left by increasing space from right */
}






.header {
  position: relative;
  height: 100vh;
  background-size: 1200px 400px;
  background-position: center;
  text-align: center;
  color: white;
  display: none; /* Hide all headers initially */
}

.header1 {
  background-image: url('https://t3.ftcdn.net/jpg/07/39/72/02/360_F_739720225_wI41mPgiTu3bg0AhBbg7ckMmouvlOcN4.jpg');
}

.header2 {
  background-image: url('https://static.vecteezy.com/system/resources/thumbnails/028/247/802/small_2x/asian-two-construction-engineers-supervising-progress-of-construction-project-and-crane-background-photo.jpg');
}

.header3 {
  background-image: url('https://static.vecteezy.com/system/resources/thumbnails/026/658/515/small_2x/engineers-constructing-industrial-background-photo.jpg');
}

/* Header Section */
/* Header Section */
.header {
  position: relative;
  height: 100vh;
  background-size: cover;
  background-position: center;
  text-align: left; /* Align text to the left */
  color: white;
  display: none; /* Initially hide all headers */
  padding-left: 20px; /* Add some padding from the left edge */
}

/* Header Text with Animation */
.header-text {
  position: absolute;
  bottom: 250px; /* Adjust the position */
  left: 10%; /* Align text to the left */
  transform: translateX(0); /* No need to center horizontally */
  animation: fadeInZoom 4s ease-in-out forwards, slideIn 2s ease-out forwards;
  font-size: 30px; /* Reduced text size */
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Added text shadow for better readability */
  color: #fff;
  line-height: 1.2;
}

/* Animation for Text */
@keyframes fadeInZoom {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Slide-in Animation for Text */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

/* Horizontal Line Style */
.horizontal-line {
  position: absolute;
  bottom: 220px; /* Adjust to align with the text */
  left: 5%; /* Move the line a little further left */
  width: 60%; /* Reduced line width */
  border-bottom: 2px solid rgba(255, 255, 255, 0.6); /* Thinner line */
  animation: lineAnimate 2s ease-in-out forwards;
}

/* Vertical Line Style */
.vertical-line {
  position: absolute;
  top: 40%; /* Adjust according to where you want the vertical line */
  left: 5%; /* Move the line a little further left */
  transform: translateX(0); /* No need to adjust horizontally */
  height: 50%; /* Reduced height */
  border-left: 2px solid rgba(255, 255, 255, 0.6); /* Thinner line */
  animation: lineAnimate 2s ease-in-out forwards;
}

/* Line Animation */
@keyframes lineAnimate {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 60%;
    height: 40%;
  }
  100% {
    width: 60%;
    height: 50%;
  }
}

/* Book a Visit Vertical Button */
/* Book a Visit Vertical Button */
.book-visit-btn {
  position: absolute; /* Change from fixed to absolute */
  top: 50%; /* Position it in the center vertically within the header */
  right: 20px; /* 20px from the right edge */
  transform: translateY(-50%); /* Center vertically */
  background-color: #800080; /* Purple background color */
  color: white; /* Text color */
  padding: 15px 30px; /* Vertical padding, smaller horizontal padding */
  font-size: 16px; /* Font size */
  font-weight: bold;
  text-decoration: none; /* Remove underline */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
  z-index: 1000; /* Ensure it's above other elements */
  display: block; /* Display as a block element to control height */
  writing-mode: vertical-rl; /* Make text flow vertically */
  white-space: nowrap; /* Prevent text from wrapping */
  text-align: center; /* Center align the text */
  height: 150px; /* Set the height for the button */
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease; /* Smooth transition */
}

/* Button hover effect with animation */
.book-visit-btn:hover {
  background-color: #9b30b0; /* Lighter purple on hover */
  transform: translateY(-50%) scale(1.1) translateX(10px); /* Slightly move right and increase size */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Add deeper shadow on hover */
}

/* Sticky Nav Bar */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px 0;
  display: none; /* Initially hidden */
  z-index: 1000;
}

.nav a {
  margin: 0 15px;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  border-radius: 4px;
}

/* Ensure the nav container takes up the full width */
.nav {
  display: flex;
  justify-content: space-between; /* This ensures space between elements, if you have more than one item in .nav */
  width: 100%; /* Full width */
}

/* Social Media Icons in Nav */
.nav .social-media-icons {
  display: flex;
  margin-left: auto; /* Pushes the social media icons to the right */
  gap: 10px; /* Reduced gap between icons */
}

.nav .social-media-icons a {
  color: white;
  font-size: 18px;
}

.nav .social-media-icons a:hover {
  color: black;
}

/* New Button Container Below Top Container */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-color: #333;
  padding: 10px 0;
}

.button-link {
  text-decoration: none;
  color: white;
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

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

.header {
  position: relative;
  height: 100vh;
  background-size: cover;
  background-position: center;
  text-align: center;
  color: white;
}

/* Social Links container */
.social-links {
  position: absolute;
  top: 70px; /* Distance from top of the header */
  right: -600px; /* Distance from the right side of the page */
}

/* Nav bar */
.nav {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px 0;
}

.nav a {
  margin: 0 15px;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  border-radius: 4px;
}

/* Why Choose Us Section */
/* Color for "Why" */
.why-text {
  color: #d4af37; /* Example color for "Why" */
}

/* Color for "Choose Us?" */
.choose-text {
  color: #800080; /* Example color for "Choose Us?" */
}

/* Section styling */
.why-choose-us {
  padding: 60px 20px;
  background-color: #f4f4f4; /* Light grey background */
  text-align: center;
  color: #333; /* Default text color */
}

.why-choose-us h2 {
  font-size: 36px;
  font-weight: bold;
  color: #3a2d6b;
  margin-bottom: -60px;
  text-transform: uppercase;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 40px 20px;
  background-color: #fff;
}

.stat-item h1 {
  font-size: 48px;
  color: #3a2d6b;
}

.stat-item p {
  font-size: 16px;
  color: #555;
  margin: 5px 0;
}

.stat-item span {
  font-size: 14px;
  color: #777;
}

.section-title {
  font-size: 32px;
  color: #b58c42;
  margin: 40px 0;
}

.features {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.feature-item {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
}

.feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
  z-index: 1;
}

.feature-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
}

.feature-icon {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  color: #f0d48a;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
  .features {
    flex-direction: column;
    align-items: center;
  }

  .feature {
    width: 80%;
    margin-bottom: 20px;
  }
}

/* Home page circle */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  background-color: #f9f9f9;
}

.section-title {
  font-size: 32px;
  color: #b58c42;
  margin-top: 0px 0;
}

.features {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 20px;
}

.feature-item {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease-in-out; /* Smooth fade effect for images */
}

.inner-circle {
  width: 250px; /* Example size */
  height: 250px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 1;
}

.feature-content {
  text-align: center;
  color: #3a2d6b;
  position: relative;
  z-index: 2;
  font-family: 'Cinzel', Arial, Helvetica, sans-serif;
  opacity: 1; /* Ensure text is always visible */
}

.feature-icon {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  color: #3a2d6b;
}

/* Flip card section */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  background-color: #f9f9f9;
  text-align: center;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.heading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.heading-section h1 {
  font-size: 24px;
  color: #b58c42; /* Golden color */
  margin: 10px 0;
  position: relative;
}

.heading-section h1::before,
.heading-section h1::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 4px;
  background-color: #b58c42; /* Golden color */
  transform: translateY(-50%);
}

.heading-section h1::before {
  left: -70px; /* Position the line on the left */
}

.heading-section h1::after {
  right: -70px; /* Position the line on the right */
}

.heading-section p {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 32px;
  color: #3a2d6b;
  margin-top: 10px;
}

.card-container {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 40px;
  margin-top: -80px;
  margin-bottom: 40px; /* Add margin-bottom to provide space below the cards */
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* Ensures equal spacing */
  gap: 20px; /* Adds space between cards */
  padding: 20px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center aligns the cards */
  gap: 20px; /* Minimal spacing */
  padding: 10px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Keeps cards centered */
  padding: 10px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
}

.flip-card {
  width: 250px;
  height: 250px;
  perspective: 1000px; /* Ensures the flip happens in place */
  margin: 24px; /* Keeps the spacing */
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg); /* Flips at the same position */
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  overflow: hidden;
}

.flip-card-front {
  background-color: #3a2d6b;
}

.flip-card-back {
  background-size: cover;
  background-position: center;
  transform: rotateY(180deg);
}

/* Footer Section */
/* Footer Section */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

.footer {
  background-color: #800080;
  color: #fff; /* Ensure all text inside footer is white */
  padding: 45px 15px; /* Slightly increased padding */
  text-align: center; /* Center align text */
}

.footer-container {
  display: flex;
  justify-content: center; /* Center all content horizontally */
  align-items: flex-start; /* Align items to the top for better structure */
  flex-wrap: wrap;
  gap: 20px; /* Adjusted gap between columns */
  max-width: 1200px; /* Restrict max width */
  margin: 0 auto; /* Center the container */
  text-align: left; /* Align text under headings */
}

.footer-section {
  flex: 1;
  min-width: 200px; /* Ensure each section has a minimum width */
}

/* Keep the logo section size the same as in your original code */
.logo-section img {
  width: 150px; /* Original size */
  margin-bottom: 10px;
}

.footer-section h4 {
  text-align: left; /* Ensure headings align properly */
  width: max-content; /* Keep headings compact */
  margin-bottom: 10px;
  color: #fff; /* Ensure headings are white */
  border-bottom: 1px solid #b58c42;
  display: inline-block;
  padding-bottom: 5px;
}

.footer-section p,
.footer-section ul {
  margin: 5px 0; /* Slightly increased spacing */
  line-height: 1.5; /* Improve readability */
  color: #fff; /* Ensure text is white */
}

/* Add underline after every paragraph and list item */
.footer-section ul li,
.footer-section p {
  border-bottom: 1px solid #fff; /* White underline */
  padding-bottom: 5px; /* Space between text and underline */
  margin-bottom: 5px; /* Space between lines */
  display: block; /* Ensure underline spans full width */
}

.footer-section ul {
  list-style-type: none;
  padding-left: 0; /* Remove default padding */
}

.footer-section ul li {
  margin: 3px 0;
}

.footer-section ul li a {
  color: #f9f9f9;
  text-decoration: none;
  transition: color 0.3s ease;
}

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

.contact-section .social-icons {
  display: flex;
  justify-content: flex-start; /* Align icons to the left */
  gap: 8px; /* Slightly increased space between icons */
}

.contact-section .social-icons a {
  color: #f9f9f9;
  font-size: 20px; /* Kept the original size */
  text-decoration: none;
}

.contact-section .social-icons a:hover {
  color: #b58c42;
}

.footer-bottom {
  text-align: center;
  margin-top: 10px;
  padding-top: 8px;
  font-size: 14px;
  color: #fff !important; /* Force white color */
  background: none !important; /* Remove any background color */
  font-weight: 500;
}

.footer-bottom * {
  color: #fff !important; /* Apply white to all child elements */
}

/* General Content Styling for Nikunj Builders */
.nikunj-builders-section {
  padding: 40px 0;
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.6;
  display: flex;
  justify-content: center; /* Center the section horizontally */
  width: 100%; /* Ensure full width */
}

.nikunj-builders-container {
  max-width: 1200px; /* Constrain the content width */
  width: 100%; /* Full width of the container */
  padding: 0 20px; /* Add padding on the left and right */
  box-sizing: border-box; /* Ensure padding does not cause overflow */
  margin: 0 auto; /* Center the container horizontally */
  text-align: justify; /* Justify text alignment for equal line ends */
  margin-top: -100px;
}

.nikunj-builders-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center; /* Align title to the left */
  margin-bottom: 20px;
  color: #d723dd; /* Deep Blue */
  text-transform: uppercase;
  font-family: 'Cinzel', Arial, Helvetica, sans-serif;
}

.nikunj-builders-intro,
.nikunj-builders-subheading,
ul,
ul li {
  font-size: 16px;
  text-align: justify; /* Justify text to ensure equal line endings */
  margin-left: 0; /* Reset unwanted margin */
  margin-right: 0; /* Reset unwanted margin */
  padding-left: 0; /* Reset any padding */
  padding-right: 0; /* Reset any padding */
}

.nikunj-builders-subheading {
  font-weight: bold;
  color: #004d40; /* Teal */
  margin-top: 20px;
  margin-bottom: 10px;
}

ul {
  margin: 20px 0;
  padding-left: 40px; /* Ensure bullet lists are indented */
}

ul li {
  margin-bottom: 10px;
  text-align: justify; /* Ensure list items are justified */
}

ul li strong {
  color: #004d40; /* Teal */
}

/* Optional Animation for Text Appearance */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.nikunj-builders-intro,
.nikunj-builders-subheading,
ul,
ul li {
  opacity: 0;
  transform: translateX(-100px);
  animation: slideIn 1s ease-out forwards;
}

.nikunj-builders-intro:nth-child(odd),
.nikunj-builders-subheading:nth-child(odd),
ul:nth-child(odd) {
  animation-delay: 0.3s;
}

.nikunj-builders-intro:nth-child(even),
.nikunj-builders-subheading:nth-child(even),
ul:nth-child(even) {
  animation-delay: 0.6s;
}

/* section for showing venture details about us */
/* General Styles */
#unique-section {
  width: 100%;
  padding: 40px 0;
  background-color: #f9f9f9;
}

.unique-subsection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 0;
  position: relative;
  gap: 20px; /* Added spacing between elements */
  margin: 0 40px; /* Increased left and right margin */
}

.unique-image-container {
  flex: 1;
  text-align: center;
  overflow: hidden;
}

.unique-image-container img {
  width: 100%;
  height: auto;
  max-width: 100%; /* Ensures the image doesn't overflow its container */
  transform: scale(1);
  transition: transform 0.3s ease-out;
  border: 5px solid #b8860b; /* Dark Golden border */
  border-radius: 10px; /* Optional: adds rounded corners */
  box-sizing: border-box; /* Ensures border is considered part of the element's total width */
}

.unique-description {
  flex: 1;
  padding: 0 20px;
  opacity: 0;
  transform: translateX(100px); /* Initial slide-in effect */
  transition: all 0.5s ease-out;
}

.unique-description h3 {
  font-size: 42px;
  color: #b8860b;
  margin-bottom: 10px;
  align-items: center;
  font-family: 'Cinzel', Arial, Helvetica, sans-serif;
}

.unique-description p {
  font-size: 16px;
  line-height: 1.6;
}

.unique-divider {
  border: none;
  border-top: 4px solid #b8860b;
  margin: 20px 280px; /* Increased margin from left and right */
}

/* Hover Effects */
.unique-image-container:hover img {
  transform: scale(1.1);
}

/* Animation Keyframes */
@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Scroll Animation for Image and Description */
.unique-image-container.visible img {
  animation: zoomIn 0.6s ease-out forwards;
}

.unique-description.visible.left {
  animation: slideRight 0.6s ease-out forwards;
}

.unique-description.visible.right {
  animation: slideLeft 0.6s ease-out forwards;
}

/* Section-specific positioning for image and description */
.left {
  order: 0;
}

.right {
  order: 1;
}

/* Rating Style */
.rating {
  font-size: 18px;
  color: #ffd700; /* Gold color for the rating */
  font-weight: bold;
  margin-top: 10px; /* Space between description and rating */
}

/* contact-us, line above fotter about us */
/* Section Styling */
#contact-section {
  padding: 40px 20px;
  background-color: #f9f9f9; /* Soft background to blend with the theme */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Wrapper Styling */
.contact-details-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  max-width: 1200px;
  background-color: #ffffff;
  padding: 20px 30px;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add depth */
  gap: 20px;
}

/* Text Section */
.contact-text {
  flex: 1;
  text-align: left;
}

.contact-text h2 {
  font-size: 28px;
  color: #333; /* Neutral dark color for the title */
  margin-bottom: 10px;
  font-family: 'Cinzel', Arial, Helvetica, sans-serif;
}

.support {
  display: inline-block;
  font-size: 14px;
  color: #ff5722; /* Vibrant orange to match the theme */
  font-weight: 500; /* Medium weight for better readability */
  background-color: #fff7e6; /* Soft background for contrast */
  padding: 5px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  animation: blink 1s infinite; /* Blink animation */
  margin-left: 130px;
}

/* Contact Container */
.contact-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background-color: #ff9800; /* Vibrant orange background */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add depth */
  transition: all 0.3s ease;
  cursor: pointer;
}

.contact-container:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Icon */
.contact-container i {
  font-size: 20px;
  color: #ffffff;
}

/* Contact Info */
.contact-info .number {
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
}

/* Blink Animation */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Contact us page */
/* Section Styles */
#contact-us {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background-color: #f9f9f9;
}

.contact-wrapper {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* Left Side Design */
.contact-design {
  flex: 1;
  background-color: #ff9800;
  color: #ffffff;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.contact-design h2 {
  font-size: 28px;
  margin-bottom: 10px;
  font-family: 'Cinzel', Arial, sans-serif;
}

.contact-design p {
  font-size: 16px;
  margin-bottom: 20px;
}

.contact-design img {
  width: 80%;
  margin: 0 auto;
  border-radius: 10px;
}

/* Right Side Form */
.contact-form {
  flex: 1;
  padding: 40px 30px;
}

.contact-form h3 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #ff9800;
  outline: none;
}

textarea {
  height: 100px;
  resize: none;
}

button {
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background-color: #ff9800;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #e67e00;
}

#successMessage {
  display: none;
  color: green;
  font-weight: bold;
  margin-top: 10px;
}

.hidden {
  display: none;
}

.map-wrapper {
  text-align: center;
}

.map-container {
  display: inline-block;
  width: 100%;
  max-width: 1200px;
  height: 400px;
  border: 2px solid #ecf0f1;
  border-radius: 10px;
  margin-top: 30px;
  margin-bottom: 40px;
}


/* Popup Form for header*/
/* Popup Form Styling */
/* Popup Form Styling */
#popupForm {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px 30px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  width: 360px;
  max-width: 100%;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#popupForm.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Close Button */
#popupForm .close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1.4rem;
  color: #ff6f61;
  cursor: pointer;
  transition: color 0.3s ease;
}

#popupForm .close:hover {
  color: #ff5733;
}

/* Form Title */
#popupForm h3 {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 15px;
  color: white;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Label Styling */
#popupForm label {
  color: #ffffff; /* White color for labels */
  font-size: 1rem;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Input Fields */
#popupForm input,
#popupForm textarea {
  width: 100%;
  padding: 14px 20px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  color: black;
  background-color: #f9f9f9;
  box-sizing: border-box;
  transition: border 0.3s ease-in-out;
}

/* Focus State for Input Fields */
#popupForm input:focus,
#popupForm textarea:focus {
  border-color: #ff6f61;
  outline: none;
  background-color: #fff;
}

/* Textarea Styling */
#popupForm textarea {
  height: 120px;
  resize: none;
}

/* Button Styling */
#popupForm button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(to right, #ff6f61, #ff5733);
  color: white;
  font-size: 1.1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  font-weight: 600;
}

#popupForm button:hover {
  background: linear-gradient(to right, #ff5733, #ff6f61);
  transform: scale(1.05);
}

/* Background overlay effect for popup */
#popupForm:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
  backdrop-filter: blur(5px); /* Background blur effect */
}

/* Smooth visibility transition for popup */
#popupForm.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Map section for contact us page */
.map-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  text-align: center;
  position: relative;
  padding-left: 10%; /* Moves the map slightly to the right */
}

.map-container iframe {
  width: 80%;
  height: 100%;
  max-width: 1200px;
  display: block;
  margin: 0 auto;
}

/*Css for Project page */
/* Our Projects */
.container {
  text-align: center;
}

h2 {
  color: #4b2e83;
  font-size: 28px;
  margin-bottom: 20px;
}

.founder-section {
  padding: 50px 20px;
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.founder-content {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.founder-image {
  flex: 0 0 300px;
  text-align: center;
}

.founder-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.founder-image h3 {
  margin-top: 20px;
  font-size: 1.25rem;
  color: #2c3e50;
}

.founder-image p {
  font-size: 1rem;
  color: #555;
  margin-top: 5px;
}

.founder-text {
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
}