/* Reset and global styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Background styles */
body {
  background: #000000;
  background-size: 400% 400%; /* Creates a smooth animation effect if needed */
  animation: gradientAnimation 15s ease infinite; /* Optional animation */
  font-family: 'Poppins', sans-serif;
  position: relative;
}

/* Optional animation for a dynamic gradient effect */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* body::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, white 100%);
} */
.logo {
  position: fixed;
  top: -10px;
  right: 10px;
  z-index: 1000; /* Ensure it is above other elements */
}

.logo img {
  width: 200px; /* Adjust the size as needed */
  height: auto;
}

html {
  scroll-behavior: smooth;
}

.white-text {
  color: white; /* Black color for the text */
  text-decoration: none; /* Removes the underline */

}


body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 1%, transparent 40%);
  /* z-index: 1; Overlay sits on top of the background */
}



.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.4rem; /* Adjusted font size for emphasis */
  font-family: 'Cormorant Garamond', serif; /* Set Cormorant Garamond as the font */
  font-weight: 500; /* Light weight for Cormorant Garamond */
  border: none; /* No border */
}




.navbar ul {
  display: flex;
  list-style: none;
  font-family: 'Cormorant Garamond', serif; /* Set Cormorant Garamond as the font */
  font-weight: 300; /* Light weight for Cormorant Garamond */
  
}

.navbar ul li {
  margin-bottom: 20px; /* Increased vertical margin */
  padding: 0 15px;
  margin-top: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
}



.navbar ul li a {
  text-decoration: none;
  color: #000000;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  font-family: 'Cormorant Garamond', serif; /* Set Cormorant Garamond as the font */
  font-weight: 300; /* Light weight for Cormorant Garamond */
  transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */

}

.navbar ul li a:hover {
  transform: scale(1.1); /* Increase the size of the link slightly */
  color: #009688; /* Optional: change color on hover */
}


.navbar ul li a::after {
  content: '';
  display: block;
  height: 2px;
  background: #009688;
  transition: width 0.3s;
  width: 0%;
  font-family: 'Cormorant Garamond', serif; /* Set Cormorant Garamond as the font */
  font-weight: 300; /* Light weight for Cormorant Garamond */
}

.navbar ul li a:hover::after {
  width: 100%;
  font-family: 'Cormorant Garamond', serif; /* Set Cormorant Garamond as the font */
  font-weight: 300; /* Light weight for Cormorant Garamond */
  
}

.menu-toggle {
  display: none;
  cursor: pointer;
  flex-direction: column;
  z-index: 2000;  /* Ensure it's above other elements */
}


.menu-toggle .bar {
  height: 3px;
  width: 25px;
  background-color: #000;
  margin: 3px 0;
  transition: 0.3s;
}

.navbar, .navbar * {
  pointer-events: auto; /* Ensures that the navbar and its children are clickable */
}

@media (max-width: 1508px) {
  .menu-toggle {
    display: flex; /* Only shows the hamburger menu at specific breakpoints */
    margin-right: 90%;
  }

  .navbar ul {
    list-style: none;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    position: fixed;
    left: 0;  /* Position the menu at the left side of the viewport */
    top: 0;
    height: 100%;
    width: 200px; /* Adjust width as needed */
    background: rgb(234, 234, 234); /* Solid light gray color, no transparency */
    display: flex;
    flex-direction: column;
    align-items: left; /* Align menu items to the left */
    padding: 20px;
    transform: translateX(-100%); /* Start off-screen to the left */
    transition: transform 0.3s ease;
    border: none; /* No border */
  }
  
  .navbar.active ul {
    transform: translateX(0); /* Slide in from the left when active */
  }
  }

  .hide-menu {
    display: none; /* Hides the hamburger menu icon */
}

.no-scroll {
  overflow: hidden; /* Prevents scrolling */
  height: 100%; /* Optional: may help ensure layout stability */
}


.blur-content {
  filter: blur(2px); /* Adjust blur level as necessary */
  pointer-events: none; /* Disables clicking or interacting with the content */
  opacity: 0.8; /* Optional: dims the content to visually indicate it's inactive */

}



.banner {
  background-color: rgb(234, 234, 234); /* Default background color */
  transition: background-color 0.3s ease; /* Smooth transition for background color change */
  padding: 20px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100; /* Ensure it's above other content but below the menu when active */
  border: none; /* No border */

}


/* Button styles */
.button1, .button2 {
  position: absolute;
  padding: 2px 30px;
  border: none;
  background-color: #009688;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 1.2rem;
}

.button1 {
  bottom: 5%;
  right: 1%;
}

.button2 {
  bottom: 1%;
  left: 1%;
}

.button1:hover, .button2:hover {
  background-color: #00796b;
}

h2 {
  position: absolute;
  left: 35%;  /* Ensures fixed margin from the left side */
  right: 8%; /* Ensures fixed margin from the right side */
  top: 50%;
  transform: translateY(-50%); /* Centers it vertically regardless of the line height */
  text-align: left;
  color: white; /* Default color for text in h2 */
  font-size: 2.5vw; /* Responsive font size */
  /* font-size: 3.5vh; Responsive font size */
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  padding: 0 1rem;
  box-sizing: border-box; /* Includes padding in width calculation if needed */
  width: auto; /* Width automatically adjusts to maintain the fixed margins */
  height: auto;
  max-width: calc(100% - 35%); /* Maximum width taking into account both margins */

}

.box-link {
  display: inline-block;
  padding: 5px 30px;
  border: 2px solid #dcbbbb; /* White border */
  border-radius: 10px; /* Rounded edges */
  color: #ffffff; /* White text */
  text-decoration: none; /* Remove underline */
  position: absolute;
  transform: translateY(-50%); /* Centers it vertically regardless of the line height */
  font-size: 1.7vw; /* Responsive font size */
  left: 46%; 
  margin-top: 1%;
  /* right: 8%; Ensures fixed margin from the right side */
  top: 80%;
  width: auto;
  text-align: left;
  color: white; /* Default color for text in h2 */
  max-width: calc(100% - 23%); /* Maximum width taking into account both margins */

}

hb {
  position: absolute;
  left: 45%;  /* Ensures fixed margin from the left side */
  right: 8%; /* Ensures fixed margin from the right side */
  top: 80%;
  transform: translateY(-50%); /* Centers it vertically regardless of the line height */
  text-align: left;
  color: white; /* Default color for text in h2 */
  font-size: 3.5vw; /* Responsive font size */
  /* font-size: 3.5vh; Responsive font size */
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  padding: 0 1rem;
  box-sizing: border-box; /* Includes padding in width calculation if needed */
  width: auto; /* Width automatically adjusts to maintain the fixed margins */
  height: auto;
  max-width: calc(100% - 53%); /* Maximum width taking into account both margins */
}

.blue-text {
  display: block; /* Makes the span start on a new line */
  color: white; /* Specific color */
  font-size: 3.5vw; /* Responsive font size */
  /* font-size: 3.5vh; Responsive font size */
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  margin-top: 0.5rem; /* Optional: Adds a little space above the blue text */
}

.red-capital {
  color: rgb(208, 72, 54); /* Reddish color for capitals */
}

.white-non-capital {
  color: white; /* White color for non-capitals */
}


/* Container styles */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Stack items vertically */
  min-height: 100vh;
  padding: 0 2vw;
  box-sizing: border-box;
  text-align: center;
}

/* Media Queries for finer control */
@media (max-width: 1200px) {
  h2, .blue-text {
    font-size: 3.5vw;
  }
}

@media (max-width: 992px) {
  h2, .blue-text {
    font-size: 3vw;
  }
}

@media (max-width: 768px) {
  h2, .blue-text {
    font-size: 2.5vw;
  }
}

@media (max-width: 576px) {
  h2, .blue-text {
    font-size: 2vw;
  }
}
/* Link with icon styles */
.link-with-icon, .link-with-icon2 {
  display: inline-flex;
  align-items: center;
  color: white;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
  margin-top: 20rem;
}

.icon-box, .icon-box2 {
  width: 12px;
  height: 12px;
  background-color: #4caf66;
  margin-right: 3rem;
}

.icon-box2 {
  margin-left: -3.3rem;
}

/* Canvas background */
canvas#animationCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

/* Additional div styles */
div2 {
  margin-top: 1rem;
}

#services {
  display: flex;
  justify-content: space-between; /* Distribute boxes evenly */
  align-items: stretch; /* Ensure boxes have the same height */
  background-color: #f9f9f9; /* Lighter background for a cleaner look */
  color: #242424;
  padding: 5vw 10vw; /* Responsive padding */
  height: auto; /* Adjust height to fit content */
  font-size: 1.4rem; /* Initial font size */
  font-family: 'Playfair Display', serif; /* Set Playfair Display as the font */
  font-weight: 400; /* Lighter font weight for elegance */
  line-height: 1.6; /* Improved line height for better readability */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  border-radius: 8px; /* Rounded corners for a softer appearance */
  /* margin: 2rem auto; Margin for spacing around the section */
  gap: 2vw; /* Space between the boxes */
}

#services .box {
  flex: 1 1 auto; /* Allow boxes to grow and shrink to fit content */
  padding: 2vw; /* Padding inside each box */
  margin: 2%; /* Ensures spacing */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the start */
  align-items: flex-start; /* Align content to the start */
  background-color: white; /* White background for each box */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  border-radius: 8px; /* Rounded corners for a softer appearance */
  transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
  text-align: left; /* Left align text for readability */
}

#services .box img {
  width: 50px; /* Adjust based on the logo size */
  height: 50px; /* Adjust based on the logo size */
  margin-bottom: 10px; /* Space between the logo and text */
}

#services p {
  font-size: 1.5rem; /* Adjust based on preference */
  line-height: 1.8; /* Line height for better readability */
  font-family: 'Poppins', sans-serif;
  font-weight: 550;
  color: #333; /* Darker color for text */
}

#services .box:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  color: rgb(0, 90, 221);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* More pronounced shadow on hover */
}

@media (max-width: 600px) {
  #services {
    flex-direction: column;
    height: auto;
  }
  #services .box {
    width: 90%; /* Wider boxes for narrow screens */
    height: auto; /* Height adjusts to content */
    margin: 10px 0; /* Vertical stacking */
  }
}

#team-header {
  background-color: transparent;  /* Remove any background color */
  padding: 20px 0;  /* Adjust padding as necessary */
  text-align: center;
  font-size: 36px;  /* Makes the text larger */
  color: black;  /* Set the text color */
  font-weight: bold;  /* Makes the text bold */
  /* margin-top: 30px; */
}

#Contact-header {
  background-color: transparent;  /* Remove any background color */
  padding: 20px 0;  /* Adjust padding as necessary */
  text-align: center;
  font-size: 36px;  /* Makes the text larger */
  color: black;  /* Set the text color */
  font-weight: bold;  /* Makes the text bold */
  /* margin-top: 30px; */
}


h3 {
  background-color: #ffffff; /* Background of the whole team section */
  margin-bottom: -60px;
  color: rgb(0, 118, 221);
  font-size: 2.9rem; /* Adjust based on preference */
  font-family: 'Cormorant Garamond', Garamond, serif; /* Changed to Garamond */
  font-weight: bold;
}

/* Team section styles */
#team {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 50px;
  background-color: #ffffff; /* Background of the whole team section */
  
}
.teambox {
  width: 20rem;
  margin: 1%;
  background-color: #ddd;
  background-image: linear-gradient(to bottom, #ffffff, #f1f1f1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease-in-out;
  margin-top: 5rem;
  margin-bottom: 7rem;
}

.teambox img {
  width: 100%;
  height: 480px; /* Height is specific to maintain uniformity */
  object-fit: cover;
}

.teambox p {
  font-size: 1.3rem;
  text-align: center;
  font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  margin-top: 10px;
  color: rgb(33, 58, 86);
}

.teambox:hover {
  transform: scale(1.05);
}

.teambox:hover img {
  opacity: 0.9;
  filter: brightness(110%);
}

@media (max-width: 1024px) {
  #team {
    flex-direction: column;
  }
  .teambox {
    width: 90%;
    height: auto; /* Adjust the height for smaller screens */
  }
  .teambox img {
    height: auto; /* Ensure the image scales properly */
  }
}


.icons {
  display: flex;
  justify-content: center;
  gap: 10px; /* Spacing between icons */
  margin-top: 10px;
  margin-bottom: 10px;
}

.icons img, .icons i {
  width: 20px; /* Adjust size accordingly */
  height: 20px; /* Adjust size accordingly */
  vertical-align: middle; /* Align icons */
}

#contact {
  color: #fff;
  padding: 50px 0;
  background-color: rgba(0, 0, 0, 0.8); /* Adjust transparency */
  background-blend-mode: multiply; /* Blend background image with color */
}

#contact h4 {
  margin-bottom: 20px;
  font-size: 18px;
  color: #3498db; /* Blue color */
}

#contact ul {
  list-style: none;
  padding: 0;
}

#contact ul li {
  margin-bottom: 10px;
  font-size: 14px;
}

#contact p {
  margin-bottom: 10px;
  font-size: 14px;
}

.social-icons a {
  display: inline-block;
  margin-right: 10px;
  color: #fff;
}

.social-icons i {
  font-size: 20px;
}

form {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

form input[type="email"] {
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin-right: 10px;
  width: 70%;
}

form button {
  background: none;
  border: none;
  cursor: pointer;
  color: #3498db; /* Blue color */
  font-size: 20px;
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

.footer-bottom p {
  margin: 0;
}

.container2 {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col-md-3 {
  flex: 1;
  min-width: 220px;
  margin-bottom: 20px;
}

/* Media Queries */
@media (max-width: 768px) {
  .col-md-3 {
      flex-basis: 100%;
  }
}


.contactbox {
  width: 100%;
  height: 60rem;
  margin: 1%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease-in-out;
  margin-top: 5rem;
}