/* || G E N E R A L _ S T Y L E S */
body {
  font-family: "Ubuntu", sans-serif;
  letter-spacing: 0.2px;
}

h1,
h2,
h3 {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
}

h4,
h5 {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
}

p {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  color: #000000;
  font-size: 1.125rem;
  line-height: 1.5;
}

section {
  width: 100%; /* Changed from 100vw to 100% */
  position: relative; /* For positioning inner content */
  background-color: #fff; /* Example background color */
}

/* Styling all the image border */
img {
  border-radius: 2px; /* You can adjust the value based on your preference */
}

/* Styling the list in contact donation page */
ol {
  margin-bottom: 40px; /* Adjust as needed */
}

ol li {
  margin-bottom: 15px; /* Adjust as needed */
}

/* || H E A D I N G S */
.heading-1 {
  font-size: 2.027rem;
  line-height: 1.3;
  color: #445055;
  margin-bottom: 15px; /* Adjust as needed for spacing after heading-1 */
}

.heading-1-big {
  color: #00858c;
  font-size: 5vw; /* Starting point for responsiveness */
  max-width: 100%; /* Ensures the title doesn't overflow its container */
  word-wrap: break-word; /* Ensures long words don't overflow their container */
  margin-bottom: 35px; /* Adjust as needed for spacing after heading-2 */
}
@media (max-width: 768px) {
  .heading-1-big {
    font-size: 6vw; /* Increases size for smaller screens */
  }
}

@media (max-width: 480px) {
  .heading-1-big {
    font-size: 8vw; /* Further increases size for very small screens */
  }
}

.heading-2 {
  font-size: 1.802rem;
  line-height: 1;
  color: #52616b;
  margin-bottom: 25px; /* Adjust as needed for spacing after heading-2 */
}

.heading-2-big {
  color: #445055;
  font-size: 6vw; /* Starting point for responsiveness */
  max-width: 100%; /* Ensures the title doesn't overflow its container */
  word-wrap: break-word; /* Ensures long words don't overflow their container */
  margin-bottom: 35px; /* Adjust as needed for spacing after heading-2 */
}

@media (max-width: 768px) {
  .heading-2-big {
    font-size: 6vw; /* Increases size for smaller screens */
  }
}

@media (max-width: 480px) {
  .heading-2-big {
    font-size: 10vw; /* Further increases size for very small screens */
  }
}

.card-body p {
  margin-bottom: 20px; /* Adjust as needed for spacing after paragraphs inside card body */
}

.heading-3 {
  font-size: 1.602rem;
  line-height: 1.2;
}

.heading-4 {
  font-size: 1.424rem;
  line-height: 1.3;
}

.heading-5 {
  font-size: 1.266rem;
  line-height: 1.5;
}

h4 + p {
  margin-top: 10px; /* Adjust the margin value as needed */
}

/* || C A R O U S E L */

#customCarousel .carousel-inner,
#customCarousel .carousel-item,
#customCarousel .carousel-item img {
  height: 66vh; /* 2/3 of the viewport height */
  object-fit: cover; /* Ensures images cover the area without stretching */
}

@media (max-width: 991px) {
  .head-image-small {
    display: block;
  }

  .head-image-large {
    display: none;
  }
}

@media (min-width: 992px) {
  .head-image-small {
    display: none !important; /* Ensures override of conflicting styles */
  }

  .head-image-large {
    display: block !important;
    padding-top: 10px; /* Adds padding to the top of the large image */
  }
}

/* || TEXT INDENT for bullets etc */
.indent-text {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  color: #000000;
  font-size: 1.125rem;
  line-height: 1.5;
}

.indent-text p {
  text-indent: 0; /* Remove the indent for the first line */
  margin: 10px 0; /* Adjust the margin as needed */
}

.indent-text ul {
  margin: 0;
  padding: 0; /* Remove default padding */
}

.indent-text li {
  text-indent: 0px; /* Set negative indent to align with the text */
  margin: 10px 0; /* Adjust the margin as needed */
}

/* || BOARD MEMBERS IMAGE */

.board-member {
  display: flex;
  align-items: flex-start; /* Align items to the top */
  margin-bottom: 40px; /* Add margin between board members */
}

.board-member-image {
  flex: 0 0 25%; /* Image occupies 1/4 of the page */
  margin-right: 20px; /* Adjust the margin as needed */
  padding-bottom: 30px; /* Add padding to the image */
  padding-top: 8px; /* Add padding to the image */
}

.board-member-image img {
  width: 100%;
  height: auto;
}

.board-member-info {
  flex: 1;
}

@media (min-width: 481px) {
  .board-member-image {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

@media (max-width: 480px) {
  .board-member {
    flex-direction: column; /* Change flex direction to column for smaller screens */
    align-items: center; /* Center items in the column */
  }

  .board-member-image {
    margin-right: 0; /* Remove margin for smaller screens */
    margin-bottom: 10px; /* Add margin between image and text */
  }
}

/* || GRAYSCALE ROLLOVER */

.img-gray {
  filter: none;
  -webkit-filter: grayscale(0);
}

.img-gray:hover {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

/* || M I S C */

/* Hide things */
.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

@media (max-width: 991px) {
  .head-image-small {
    display: block;
  }

  .head-image-large {
    display: none;
  }
}

@media (min-width: 992px) {
  /* Hide footer links */
  .hide-row {
    display: none;
  }
  /* change photo in index page */
  .head-image-small {
    display: none !important; /* Use !important to override any conflicting styles */
  }
  .head-image-large {
    display: block !important;
    padding-top: 10px;
  }
}

/* Make links inactive */
.inactive-link {
  pointer-events: none;
  cursor: default; /* Optional: Set cursor to default to indicate it's not clickable */
  /* color: ; Optional: Change the color to visually indicate it's inactive  */
}

/* Make image sticky */
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* || C O N T A I N E R S */
.container-fluid {
  padding: 0 5% 0 5%;
}

@media (max-width: 992px) {
  .container-fluid {
    padding: 0 0;
  }
}

/* || M A I N  S E C T I O N */
#main-section {
  padding-top: 100px;
  padding-right: 15px;
  padding-bottom: 180px;
  padding-left: 15px;
  background-color: #fff; /* Consistent background color */
  color: #264e69; /* Consistent text color */
}

/* General container styles for consistent alignment */
.container {
  max-width: 1140px; /* Adjust based on your design's max-width */
  margin-right: auto;
  margin-left: auto;
}

/* Additional media queries as needed based on your site's breakpoints */

/* Adding space after the section */
#main-section + section {
  margin-top: 60px; /* Adjust as needed for your design */
}

/* || N A V I G A T I O N _ B A R */
/* Brand logo adjustments */
.logo-mob {
  width: 100%; /* Adjust width as necessary */
  max-width: 145px; /* Example: limit max width to ensure it fits */
}

.logo-desk {
  width: 80%;
}

.navbar-light .navbar-nav .nav-link.active {
  color: #445055;
}

/* General Styles for Navbar */
/* Adjust navbar height and content alignment */
.navbar {
  display: flex; /* Use flexbox to layout navbar contents */
  justify-content: space-between; /* Space between logo and toggler */
  align-items: center; /* Center align items vertically */
  padding: 0.6rem 0.6rem; /* Adjust padding */
}

.navbar-brand {
  line-height: inherit;
  white-space: nowrap;
}

.navbar-full-width-background {
  background-color: #ffffff;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Adjust the container within the navbar for alignment */
.navbar > .container,
.navbar > .container-fluid {
  display: flex;
  justify-content: space-between; /* Keep items on opposite ends */
  align-items: center; /* Center-align items vertically */
  margin-right: auto;
  margin-left: auto;
  width: 100%; /* Ensure the container takes the full width of its parent */
  max-width: none; /* Remove the maximum width restriction */
  padding-right: 0;
  padding-left: 0; /* Remove padding to allow full width usage */
}

/* Sticky Navbar - applies only to desktop views */
@media (min-width: 992px) {
  .navbar-sticky {
    height: 50px;
    transition: all 0.3s; /* Smooth transition for height change */
  }

  .navbar-sticky .logo-desk,
  .navbar-sticky .logo-mob {
    height: 40px; /* Adjust so logo fits nicely within the sticky navbar height */
    width: auto; /* Maintain aspect ratio */
    transition: height 0.3s; /* Smooth transition for logo resizing */
  }

  /* Adjust navbar brand padding if needed to vertically center logo */
  .navbar-sticky .navbar-brand {
    padding: 5px 0; /* Example padding adjustment */
  }
}

.nav-item {
  padding-top: 8px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

.nav-link {
  font-size: 1rem;
  font-family: "Ubuntu";
  font-weight: 400;
}

/* Normal state - increased specificity to override existing styles */
.navbar-light .navbar-nav .nav-link {
  color: #00858c; /* Your desired color */
}

/* Hover state - ensure to match or exceed the specificity for hover as well */
.navbar-light .navbar-nav .nav-link:hover {
  color: #1e2022; /* Your desired hover color */
}

.nav-link.active,
a.nav-link.active {
  color: #0294a5; /* Example: change to your desired active link color */
  font-weight: bold; /* Optional: makes the active link bold */
}

/* Navbar Toggler adjustments */
.navbar-light .navbar-toggler {
  border: 0;
  padding: 0; /* Adjust padding to align with brand logo */
}

.navbar-light .navbar-brand {
  display: flex;
  align-items: center; /* Center-align items vertically */
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1rem; /* Adjust font size as needed */
  margin-right: 0; /* Adjust margin to reduce space if necessary */
}

/* Navigation Bar Responsive Adjustments */
@media (max-width: 992px) {
  .navbar-collapse {
    background-color: transparent; /* Ensure transparency to match the navbar background */
    padding-top: 20px; /* Adjust padding as needed */
    padding-bottom: 20px; /* Adjust padding as needed */
    box-shadow: none; /* Ensure no box-shadow is applied */
  }

  .navbar-sticky .logo-mob,
  .navbar-sticky .logo-desk {
    height: auto; /* Retain original logo size in mobile views */
  }

  .nav-item {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin-left: auto; /* Align to the right */
  }

  .nav-link {
    font-size: 1.2rem;
    font-weight: 400;
  }
}

/* Ensure navbar does not wrap on small screens */
@media (max-width: 576px) {
  .navbar {
    flex-wrap: nowrap; /* Prevent wrapping to keep items in one line */
  }
  .navbar-brand,
  .navbar-toggler {
    flex-grow: 0; /* Do not allow these elements to grow */
    flex-shrink: 0; /* Do not allow these elements to shrink */
  }
  .logo-mob,
  .logo-desk {
    flex-grow: 0; /* Prevent logo from taking extra space */
    flex-shrink: 0; /* Prevent logo from shrinking */
  }
  .navbar-collapse {
    flex-grow: 1; /* Allow collapse area to take up remaining space */
    justify-content: flex-end; /* Align the toggled menu to the right */
  }
}

@media (max-width: 540px) {
  .navbar-brand {
    line-height: inherit;
    white-space: nowrap;
  }
}

/* ||||||||  Hamburger Animation */
/* Hamburger Animation */
.animated-icon1,
.animated-icon2,
.animated-icon3 {
  width: 40px;
  height: 20px;
  position: relative;
  margin: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

.animated-icon1 span,
.animated-icon2 span,
.animated-icon3 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

/* Initial color assignments for each bar */
.animated-icon1 span:nth-child(1) {
  background: #445055;
  top: 0px;
}

.animated-icon1 span:nth-child(2) {
  background: #00858c;
  top: 10px;
}

.animated-icon1 span:nth-child(3) {
  background: #445055;
  top: 20px;
}

/* Animation for opening the hamburger menu with color adjustments */
.animated-icon1.open span:nth-child(1) {
  top: 11px;
  background: #00858c; /* Color change for the top part of the "X" */
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.animated-icon1.open span:nth-child(3) {
  top: 11px;
  background: #445055; /* Maintains its initial color for the bottom part of the "X" */
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* || END Hamburger Animation */



/* || I N D E X _ P A G E */
.head-image {
  width: 100%;
  margin-bottom: 6%;
  /* margin: 20px; */
}

@media (max-width: 540px) {
  .head-image {
    margin-bottom: 13%;
  }
}

/* || S E R V I C E S _ P A G E */

#services-section {
  padding-top: 140px;
  padding-right: 15px;
  padding-bottom: 180px;
  padding-left: 15px;
  background-color: #f7f7f7; /* Adjust the background color as needed */
}

#services-section .heading-2 {
  color: #00858c; /* Matches your existing heading-2 color */
  margin-bottom: 30px;
}

#services-section .heading-3 .line-break {
  display: inline-block; /* Adjusts the span to behave more like inline elements */
  /* Add more specific styles here if needed */
  font-weight: 500; /* If you want to differentiate the style from the main title */
  font-size: 0.7em; /* Optional: Adjust size relative to the main title */
}

#services-section .heading-3 {
  margin-top: 36px; /* Spacing above each service heading */
  margin-bottom: 6px;
  color: #00858c; /* Matches your existing heading-3 color */
}

#services-section ul {
  list-style-type: none; /* Removes default list styling */
  padding-left: 0; /* Aligns with the rest of the content */
  margin-bottom: 0; /* Ensures there's no extra space below the list */
}

#services-section ul li {
  padding-left: 1.8em; /* Adjust according to the icon's size */
  position: relative;
  margin: 6px 0; /* Reduced space between bullets */
}

#services-section ul li:before {
  content: "\f185"; /* FontAwesome leaf icon unicode */
  font-family: "Font Awesome 5 Free"; /* Adjust based on the version you're using */
  font-weight: 900; /* Required for solid icons */
  position: absolute;
  left: 0;
  color: #445055; /* Bullet point color, set to the specific green you want */
  font-size: 1em; /* Adjust icon size */
  vertical-align: -0.2em; /* Adjusts the icon baseline, making it appear lower. Experiment with the value to achieve desired positioning */
}

.services-row {
  margin-bottom: 50px;
}

@media (min-width: 481px) {
  .img-services {
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
  }
}

@media (max-width: 992px) {
  .img-services {
    width: 100%;
    padding-bottom: 25px;
  }
}

@media (max-width: 768px) {
  .img-services {
    width: 100%;
  }
}

/* || C L I E N T S _ P A G E */
#clients-section {
  padding-top: 140px;
  padding-right: 15px;
  padding-bottom: 180px;
  padding-left: 15px;
  background-color: #fff; /* Adjust based on your design preference */
}

#clients-section .client-category {
  margin-bottom: 40px; /* Adds space between the different categories */
}

#clients-section .heading-3 {
  color: #00858c;
  margin-top: 40px;
  margin-bottom: 5px; /* More space below sub-headings */
}

#clients-section .heading-4 {
  font-size: 1rem; /* Smaller font size */
  text-transform: uppercase; /* Capitalize letters */
  margin-bottom: 5px; /* Adjust as needed for spacing after heading-4 */
  /* Removed width, margin-left, and margin-right properties for left alignment */
}

#clients-section ul {
  list-style-type: none;
  padding-left: 0; /* Proper indentation for list */
  margin-bottom: 20px; /* Adds space below the list */
}

#clients-section ul li {
  padding-left: 1.5em; /* Reduced from 2.5em to make text closer to the icon */
  margin-bottom: 10px; /* Space between list items */
  position: relative;
  text-indent: 0px;
  margin: 2px 0; /* Reduced space between bullets */
}

#clients-section ul li:before {
  content: "\f185"; /* FontAwesome leaf icon unicode */
  font-family: "Font Awesome 5 Free"; /* Adjust based on the version you're using */
  font-weight: 900; /* Required for solid icons */
  position: absolute;
  left: 0;
  color: #445055; /* Bullet point color, set to the specific green you want */
  font-size: 1em; /* Adjust icon size */
  vertical-align: -0.2em; /* Adjusts the icon baseline, making it appear lower. Experiment with the value to achieve desired positioning */
}

/* || C L I E N T E L E _ S E C T I O N */
#clientele-section {
  padding-top: 140px;
  padding-right: 15px;
  padding-bottom: 180px;
  padding-left: 15px;
  background-color: #f7f7f7; /* Consistent background across the section */
}

#clientele-section .heading-2 {
  text-align: center;
  margin-bottom: 50px; /* Adequate spacing from heading to content */
}

#clientele-section .client {
  margin-bottom: 30px; /* Uniform spacing between client entries */
  text-align: center; /* Center-aligns the content for consistency */
}

#clientele-section .client-logo img,
.client-logo-placeholder {
  max-height: 100px; /* Uniform height for logos and placeholders */
  margin-bottom: 15px; /* Space between logo/placeholder and client name */
  display: block; /* Ensures img and placeholder are block elements */
  margin-left: auto; /* Center-align the image/placeholder */
  margin-right: auto; /* Center-align the image/placeholder */
}

#clientele-section .client-logo-placeholder {
  padding: 20px; /* Padding for visual prominence in absence of logo */
  height: 100px; /* Matches the logo container height */
  width: 100%; /* Ensures full width usage for alignment */
  display: flex; /* Flex display for centering the text */
  align-items: center; /* Vertically centers the text */
  justify-content: center; /* Horizontally centers the text */
}

#clientele-section .client-name {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500; /* Bold for name prominence */
  font-size: 1rem; /* Visibility and readability */
  color: #264e69; /* Brand consistency */
  margin-top: 10px; /* Ensures uniform spacing from logo/placeholder */
}

/* || P R O J E C T S */
.project-card {
  border: none;
}

.project-card .heading-4 {
  font-size: 1.266rem;
  margin-bottom: 2px;
}

.project-card p {
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}

/* colorize on hover image */
.colorize {
  position: relative;
  padding: 10px 3px 30px 3px;
}

/* class of the image */
.card-img-top {
  cursor: pointer;
}

/* || P R O J E C T _ P A G E */
.figure-caption {
  font-size: 0.9rem;
}

@media (max-width: 992px) {
  .figure-caption {
    text-align: left !important;
  }
}

/* || C O N T A C T _ P A G E */

#contact-section {
  padding-top: 140px;
  padding-right: 15px;
  padding-bottom: 180px;
  padding-left: 15px;
  background-color: #fff; /* Consistent background color */
  color: #264e69; /* Consistent text color */
}

/* map iframe */
iframe {
  border: 0;
}

.contact-row {
  padding-bottom: 20px;
}

.map-container {
  overflow: hidden;
  margin-top: 20px;
  padding-bottom: 56.25%;
  position: relative;
  height: 500px;
}

.map-container iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.form-group {
  font-size: 0.9rem;
  color: #00858c;
}

.form-control {
  font-size: 1rem;
}

.text-muted {
  font-size: 0.9rem;
}

/* Custom Button Styles */
.btn-custom {
  background-color: rgba(
    0,
    0,
    0,
    0.3
  ); /* Set your preferred background color */
  color: #fff; /* Set your preferred text color */
  font-size: small;
  padding: 5px 30px; /* Set padding as needed */
  text-decoration: none;
  border-radius: 3px; /* Set border radius for rounded corners */
  transition: background-color 0.3s ease; /* Add a smooth transition effect */
}

.btn-custom:hover {
  background-color: #264e69; /* Change background color on hover */
  color: #fff; /* Set your preferred text color */
}

/* C O N T A C T _ R E S P O N S I V E */
@media (max-width: 992px) {
  .map-container {
    margin-bottom: 40px;
    margin-top: 20px;
    height: 300px;
  }
}

/* || F O O T E R */
.footer {
  background-color: #fff;
  margin: 0 5% 2% 5%;
  border-top: 1px solid;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-color: #52616b;
}

.btn-link {
  color: #52616b;
  text-decoration: none;
  padding: 0 0 20px 0;
  font-size: 0.889rem;
}

.btn-link:active {
  text-decoration: none;
  outline: none;
}

.btn-link:hover {
  text-decoration: none;
  color: #000;
}

.btn-link:focus {
  outline: none;
  text-decoration: none;
  box-shadow: none;
}

.alignments {
  text-align: left;
}

.btn-copyright {
  font-size: 0.702rem;
  font-weight: 300;
  text-align: left;
}

@media (max-width: 992px) {
  .btn-copyright {
    text-align: center;
  }

  .alignments {
    text-align: center;
  }
}