body, p {
  letter-spacing: 0em !important;
}

h2, h3 {
  font-size: 40px !important;
}

nav .offcanvas-body a {
  font-size: 20px;
}

.bg-bg-1 {
  background-color: #0C3562 !important;
}

.mainMenu a:hover {
  color: rgba(255, 255, 255, 0.45) !important;
}

.background-image-scale {
  background-size: cover;
  background-repeat: no-repeat;
}

.background-image-scale-position-top {
  background-position: top center;
}

.background-image-scale-position-bottom {
  background-position: bottom center;
}

.vertical-center-element {
  position: absolute;
  min-width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.filter-white {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* PROJECT */
.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #0C3562; /* Set the desired border color */
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 40px;
  background-color: #f9f9f9; /* Background color */
  height: auto; /* Auto height to accommodate changes */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
  position: relative; /* Allow positioning of child elements */
}

.project-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}

.project-item img {
  width: 100px; /* Fixed width for images */
  height: 100px; /* Fixed height for images */
  border-radius: 10px;
  object-fit: cover; /* Maintain aspect ratio and crop */
}

.project-details {
  flex-grow: 1;
  margin-left: 15px;
}

.project-details h2 {
  font-size: 1.2rem;
  margin: 0;
  color: #333;
}

.project-details .info-badge {
  display: inline-block;
  background-color: #DFECFB; /* Set the desired background color */
  color: #007acc; /* Text color */
  padding: 3px 8px;
  border-radius: 20px; /* Rounded corners */
  font-size: 0.8rem;
  margin-right: 5px;
  margin-top: 10px;
}

.section-title {
  font-weight: bold; /* Make the text bold */
}



.project-date {
  text-align: center; /* Center the date below the buttons */
  font-size: 0.9em; /* Adjust font size as needed */
  color: #333; /* Adjust color as needed */
}

.project-actions {
  display: flex;
  align-items: center;
}

/* Container for the buttons that stay in original position */
.button-container {
  display: flex;
  align-items: center;
}

.project-actions .btn, .project-actions .icon-btn {
  margin-left: 5px;
  padding: 5px 10px;
  border: 1px solid #007acc;
  background-color: transparent;
  color: #007acc;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-actions .btn {
  font-size: 0.9rem;
}

/* Styles for the "share" and "copy" buttons */
.icon-btn-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align buttons to the left, or use 'center' for center alignment */
  gap: 10px; /* Space between buttons */
}

.icon-btn {
  width: 120px !important; /* Set a fixed width for buttons */
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
}

.icon-btn i {
  font-size: 1.2rem;
}

.project-actions .btn:hover {
  background-color: #007acc;
  color: #fff;
  text-decoration: none;
}

.project-actions .icon-btn {
  border: 1px solid #007acc;
  background-color: transparent;
  color: #007acc;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
}

.project-actions .icon-btn:hover {
  background-color: #007acc;
  color: #fff;
}

.project-actions .icon-btn i {
  font-size: 1.2rem;
}

.icon-btn-and-date {
  text-align: right; /* Align contents to the right */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-end; /* Align buttons and text to the right */
   margin-top: 15px;
}

/* Style for the date below the buttons */
.project-date {
  font-weight: bold;
  font-size: 0.9em;
  color: #333;
  margin-top: 5px; /* Adds space between buttons and date */
  text-align: center;
}


/* Selection background */
::selection {
  background: #b3d4fc; /* Default blue background */
  color: black; /* Default text color */
}

/* Styles for title and subtitle alignment */
.section-title {
  text-align: left; /* Left-align the titles */
}

.section-subtitle {
  text-align: left; /* Left-align the subtitles */
  font-size: 1.2rem;
  margin-top: 10px;
  color: #666; /* Optional: Add a softer color for subtitle */
}

.btn-secondary {
  background-color: #0C3562 !important; /* Initial background color */
  color: #ffffff !important; /* Initial text color */
  border: none; /* Remove border */
  border-radius: 20px; /* Set the border radius */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and text color */
  font-weight: bold; /* Optional: Make the text bold */
  padding: 5px 15px; /* Adjust padding */
  margin-bottom: 15px !important; /* Add margin-bottom */
  margin-right: 15px !important;
}

.btn-secondary:hover {
  background-color: #ffffff !important; /* Change background to white on hover */
  color: #0C3562 !important; /* Change text color to blue on hover */
}

.custom-margin {
  margin-bottom: 15px !important;
  margin-right: 10px !important;
}

.project-actions .btn, .project-actions .icon-btn {
  margin-left: 10px; /* Space between buttons */
  margin-bottom: 10px; /* Space below each button */
  padding: 5px 15px; /* Adjust padding for a better appearance */
  border: 1px solid #007acc;
  background-color: transparent;
  color: #007acc;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Increase the space between specific buttons */
.project-actions .btn + .btn,
.project-actions .btn + .icon-btn,
.project-actions .icon-btn + .btn
 {
  margin-left: 10px; /* Double the space between buttons */
}

.btn-primary i {
  margin-right: 8px; /* Add some space between the icon and text */
}


.button-container .btn-secondary, 
.button-container .btn-primary {
  background-color: #0C3562 !important; /* Dark blue background */
  color: #ffffff !important; /* White text */
  border: none; /* Remove border */
  border-radius: 50px; /* Fully rounded corners */
  padding: 10px 20px; /* Padding for a larger, rounded button */
  font-size: 1rem; /* Standard font size */
  font-weight: bold; /* Bold text */
  text-align: center; /* Center the text */
  text-decoration: none; /* Remove underline */
  display: inline-block; /* Inline block for button styling */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition */
  min-width: 110px; /* Minimum width */
  min-height: 36px; /* Minimum height */
  margin-bottom: 10px; /* Space below each button */
  margin-left: 0px; /* Reset margin for the first button */
  margin-right: 0px; /* Reset margin for the right side */
}

.button-container .btn-secondary:hover, 
.button-container .btn-primary:hover {
  background-color: #082944 !important; /* Darker background color on hover */
}

.button-container .btn-secondary:first-of-type,
.button-container .btn-primary:first-of-type {
  margin-left: 10px; /* 10px right margin for the first button */
}

    /* Clear button style */
    .with-clear {
      position: relative;
  }

  .with-clear::-ms-clear {
      display: none;
      width: 0;
      height: 0;
  }

  .with-clear::after {
      content: '✕';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      font-size: 16px;
      color: #aaa;
      visibility: hidden;
  }

  .with-clear:not(:placeholder-shown)::after {
    visibility: visible;
}

.search-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px; /* Consistent 20px space between elements */
}

.button-group {
  display: flex;
  gap: 10px; /* Space between Search and Clear buttons */
  justify-content: flex-end;
}

/* Gallery button container */
.gallery-button-container {
  display: grid;
  gap: 10px; /* Space between buttons */
  margin-top: 20px; /* Space above the buttons */
}

/* Single button: One line */
.gallery-button-container button:nth-of-type(1):nth-last-of-type(1) {
  grid-template-columns: 1fr;
}

/* Two or more buttons: Stack in pairs */
.gallery-button-container {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Each button is at least 150px wide */
}

/* Adjust button styles */
.gallery-button-container .btn {
  text-align: center;
  padding: 10px 15px;
  font-size: 0.9rem;
  background-color: #0C3562;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* Hover effect */
.gallery-button-container .btn:hover {
  background-color: #082944;
}

/* Action buttons container */
.action-buttons-container {
  display: grid;
  gap: 10px; /* Space between buttons */
  grid-template-columns: 1fr; /* Default to one column */
  margin-top: 15px;
}

/* Adjust button styles */
.action-buttons-container .btn {
  text-align: center;
  padding: 10px 15px;
  font-size: 0.9rem;
  background-color: #0C3562;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* Custom font for the dropdown */
#category-dropdown {
  font-family: 'Raleway', sans-serif; /* Change to your preferred font */
  font-size: 16px; /* Adjust font size */
  font-weight: 400; /* Adjust font weight */
  color: #0C3562; /* Adjust text color */
}

/* Custom font for the dropdown options */
#category-dropdown option {
  font-family: 'Raleway', sans-serif; /* Match the dropdown font */
  font-size: 16px; /* Adjust font size */
  font-weight: 400; /* Adjust font weight */
  color: #0C3562; /* Adjust text color */
}

@media (max-width: 945px) and (min-width: 760px) {
  .button-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns layout */
    gap: 10px; /* Space between buttons */
  }

  .button-container .btn, 
  .button-container .threed-button {
    width: 100%; /* Ensure buttons take full width within each column */
    margin-right: 0;
  }

  .button-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns layout */
    gap: 10px; /* Space between buttons */
  }

  .button-container .btn, 
  .button-container .threed-button {
    width: 100%; /* Ensure buttons take full width within each column */
    height: 40px; /* Set a fixed height to prevent height increase */
    white-space: nowrap; /* Prevent text from breaking into multiple lines */
    overflow: hidden; /* Ensure no overflow of text */
    text-overflow: ellipsis; /* Optional: Add ellipsis for overflowing text */
    display: flex;
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
  }


}




@media (max-width: 1024px) {
  .project-item {
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    height: auto; /* Allow height to adjust */
    padding: 15px; /* Adjust padding for smaller screens */
    position: relative; /* Allow absolute positioning of child elements */
  }

  .project-item img {
    width: 100%; /* Full width image */
    height: auto; /* Adjust height proportionally */
    max-width: 100%; /* Remove max-width restriction */
    border-radius: 0px; /* Remove border radius */
    margin-bottom: 10px; /* Space below the image */
  }

  .project-details {
    width: 100%; /* Full width details */
    margin-left: 0; /* Remove left margin */
    margin-bottom: 10px; /* Add some space below the details */
  }


  .icon-btn {
    width: 100%; /* Make buttons full width on small screens */
    max-width: 120px; /* Add a max-width to prevent excessive stretching */
}

  .icon-btn-container {
    position: absolute; /* Position relative to project item */
    top: calc(98% - 50px); /* Position below the image */
    right: 15px; /* Align to the right edge */
    display: flex;
    justify-content: center; /* Center buttons on mobile */
    bottom: 30px;
    margin-bottom: 10px;
  }

  .icon-btn-container .icon-btn {
    margin-left: 10px; /* Space between buttons */
  }

  .project-actions .icon-btn {
    margin-left: 10px; /* Space between buttons */
  }

  .project-actions .btn, .project-actions .icon-btn {
    width: auto; /* Auto width for buttons */
    margin-bottom: 0px; /* Space below each button */
  }

  .icon-btn-and-date {
    align-items: center; /* Center align items on mobile */
    text-align: center; /* Center align text */
}

  /* Font size adjustment for project name between 351px and 756px */
  .project-details h2 {
    font-size: 1.7rem !important; /* 25% smaller */
  }

  .button-container {
    flex-direction: column; /* Stack buttons vertically */
    align-items: stretch; /* Make buttons take full width */
  }

  .button-container .btn {
    flex: none; /* Reset flex property */
    width: 100%; /* Make each button take full width */
    margin-right: 0; /* Remove right margin */
  }
  .button-container .btn:first-of-type {
    margin-left: 0px !important; /* Add 10px margin to the right for the first button */
  }

  /* Ensure that gallery and 360 project buttons are styled correctly */
  .button-container .btn-secondary {
    width: 105%; /* Override to make secondary buttons full width */
    margin-right: 0; /* Reset right margin */
  }

  /* If the third button wraps to a new line, reset right margin */
  .button-container .btn:nth-of-type(3n) {
    margin-right: 0; /* Remove right margin for every third button */
  }

  /* Ensure each button aligns properly */
  .button-container .btn {
    flex-basis: calc(33.33% - 10px); /* Each button takes a third of the container */
  }

  /* Width adjustment for gallery and 360 project buttons */
  .button-container .btn {
    width: 105%; /* Set width to 105% for small screens */
  }

  .project-actions .btn + .btn,
  .project-actions .btn + .icon-btn,
  .project-actions .icon-btn + .btn
   {
    margin-left:0px; /* Double the space between buttons */
    margin-bottom:6px;
  }

  .upPdf {
    margin-bottom: 20px !important;
}

}

@media (min-width: 768px){
  .col-md-6 {
    width: 90%;
  }
}

/* For screens wider than 756px, reset styles */
@media (min-width: 757px) {
  .button-container .btn {
    width: auto; /* Reset width */
    flex-basis: auto; /* Reset flex basis */
  }

  .button-container {
    flex-direction: row; /* Ensure row layout for larger screens */
    flex-wrap: nowrap; /* Prevent wrapping */
  }
}

@media (max-width: 757px) {
  .project-actions .btn + .btn,
.project-actions .btn + .icon-btn,
.project-actions .icon-btn + .btn
 {
  margin-left: 0px; /* Double the space between buttons */
}

  /* Stack elements vertically on mobile and align to the right */
  .search-controls {
      display: flex;
      flex-direction: column;
      align-items: flex-end; /* Align all elements to the right */
      gap: 10px; /* Keep spacing consistent between elements */
  }

  .toggle-container {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px; /* Space below the toggle */
      order: -1; /* Move toggle above other elements */
  }

  .input-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100%; /* Full width for input on mobile */
    align-self: flex-end; /* Align input to the right */
  }

  /* Button group to keep Search and Clear on the same line on mobile */
  .button-group {
      display: flex;
      gap: 10px; /* Space between the buttons */
      width: 100%; /* Take full width on mobile */
      justify-content: flex-end;
  }

  #search-btn,
  #clear-all-btn {
      width: 48%; /* Ensures each button takes up about half of the available width */
  }



}

/* For two or more buttons, stack them in pairs */
@media (min-width: 576px) {
  .action-buttons-container {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Minimum button width */
  }
}


/* Font size adjustment for project name below 350px */
@media (max-width: 350px) {
  .project-details h2 {
    font-size: 1rem !important; /* 50% smaller */
  }
}

/* Center alignment for screens smaller than 756px */
@media (max-width: 756px) {
  .section-title,
  .section-subtitle {
    text-align: center; /* Center align on small screens */
  }

  #search-input {
    flex: 7 !important;
  }

 

}

@media (min-width: 768px) {
  .custom-team-column-w {
    max-width: 450px;
  }
}

@media (max-width: 991px) {
  .family-story-assimetric-images .col-sm {
    align-items: center !important;
  }
}