/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
/*

CSS Minifier Tool: https://www.toptal.com/developers/cssminifier

COLOR LIBRARY
dimgray zwarte text
 007dff  blauw
 Gainsboro gebroken wit
 #D3D3D3 iets donkerder dat wit
 fff  wit (buttons)
 b5cf3e OLD highlight groen
 9CAF33 NEW highlight groen (iets donkerder)
 0c4272 background blauw
 007dff highlight blauw
 007dff navigation links
 768828 background groen
 1d3451 radial-gradient beginkleur
 2F4156 midden van die twee kleuren - 25%, te gebruiken voor highlights en achtergronden
 142438 radial-gradient eindkleur
 nav menu width 951
*/

/* Font loading */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500; /* Medium weight */
  font-display: swap;
  src: url("../font/Roboto/Roboto-Medium.woff2") format("woff2"),
    url("../font/Roboto/Roboto-Medium.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700; /* Bold weight */
  font-display: swap;
  src: url("../font/Roboto/Roboto-Bold.woff2") format("woff2"),
    url("../font/Roboto/Roboto-Bold.woff") format("woff");
}

@font-face {
  font-family: "BebasNeueBook";
  font-style: normal;
  font-weight: 700; /* Bold weight */
  font-display: swap;
  src: local("BebasNeueBook"),
    url("../font/Bebas/BebasNeueBook.woff2") format("woff2"),
    /* Preferred modern format */ url("../font/Bebas/BebasNeueBook.woff")
      format("woff"); /* Older fallback format */
}

@font-face {
  font-family: "AvenirLtStd";
  font-style: normal;
  font-weight: 400; /* Adjust if your AvenirLTStd-Book is a different weight */
  font-display: swap;
  src: local("AvenirLTStd-Book"),
    url("../font/Avenir/AvenirLTStd-Light.woff2") format("woff2"),
    /* Modern & smaller */ url("../font/Avenir/AvenirLTStd-Light.woff")
      format("woff"); /* Fallback */
}

@font-face {
  font-family: "AvenirLtStd";
  font-style: bold;
  font-weight: 600; /* Adjust if your AvenirLTStd-Book is a different weight */
  font-display: swap;
  src: local("AvenirLTStd-Book"),
    url("../font/Avenir/AvenirLTStd-Medium.woff2") format("woff2"),
    /* Modern & smaller */ url("../font/Avenir/AvenirLTStd-Medium.woff")
      format("woff"); /* Fallback */
}

/* Html & buttons */
html {
  font-size: 1rem; /* Base font size, typically 16px for accessibility */
  line-height: 1.7; /* Comfortable line height for readability */
  font-family: "AvenirLtStd", Arial, sans-serif; /* Modern, clean font stack */
  scroll-padding-top: 70px;
}

html,
body {
  font-family: "AvenirLtStd", Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "BebasNeueBook", Arial, sans-serif;
  margin: 0 0 25px 0;
  padding: 0;
  font-weight: 700;
  letter-spacing: 0.025em;     /* recommended for caps */
  word-spacing: 0.075em;
  text-transform: uppercase; /* optional */
}

.ph1 {
  font-family: "BebasNeueBook", Arial, sans-serif;
  margin: 0 0 10px 0;
  padding: 0;
}

p {
  font-family: "AvenirLtStd", Arial, sans-serif;
  padding: 0;
  margin: 0 0 5px 0;
  font-weight: 400;
}

p strong {
  font-weight: 600;
}

@media (max-width: 768px) {
  p {
    hyphens: auto;
    word-break: break-word;
    overflow: break-word;
  }
}

a {
  font-weight: 600;
  text-decoration: none;
}

br {
  display: block;
}

a:hover,
a:active,
a:focus {
  outline: none;
  text-decoration: underline;
}

.xsmall {
  font-size: 1.125rem;
  line-height: 22px;
  position: relative;
  line-height: 5px;
}

.popup_menu {
  margin-top: 1.1em !important;
}

.tags-list {
  list-style: none;
  margin: 0 0 3em;
  padding: 0;
  padding-right: 2em;
}

/* Ensure .hidden-mobile and .hidden-large-screen toggle properly */
@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
  .hidden-large-screen {
    display: block !important;
  }
}

@media (min-width: 769px) {
  .hidden-mobile {
    display: block !important;
  }
  .hidden-large-screen {
    display: none !important;
  }
}

/* Responsive full-width image styling */
.full-width-image {
  width: 100%;
  height: auto;
  max-width: 100vw; /* Ensures it doesn't exceed the viewport width */
  display: block; /* Removes extra spacing around the image */
  margin: 0 auto; /* Centers the image */
}

.spacer {
  height: 15px;
  flex-shrink: 0;
}

.row-custom {
  margin: 0 !important;
  margin-bottom: 5px !important;
}

.lazyframe {
  background-size: cover;
  background-position: center;
}

.tags-list li {
  display: inline-block;
  margin: 0.25em 0.25em 0.25em 0;
}

.more-btn {
  display: inline-flex; /* Use inline-flex for minimal width */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  margin-bottom: 15px !important;
  color: #007dff !important;
  background: #fff !important;
  text-decoration: none !important;
  border: 2px solid #007dff;
}

.more-btn i {
  font-size: 0.875rem;
  color: #007dff
}

.more-btn a {
  color: #007dff !important;
  text-decoration: none !important;
}

.more-btn:hover {
  color: #fff !important;
  background: #007dff !important;
  border: 2px solid #007dff;
  text-decoration: none !important;
}

.more-btn:hover i {
  color: #fff !important;
}

.cta-btn {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border: 2px solid #D3D3D3;
  color: #D3D3D3;
}

.cta-btn a {
  color: #D3D3D3;
  text-decoration-line: none;
}

.cta-btn:hover {
  background: #007dff;
  border: 2px solid #007dff;
  text-decoration-line: none !important;
  color: #D3D3D3;
}

.start-btn {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  background: #007dff;
  color: #fff;
  border: 2px solid #007dff;
}

.start-btn a {
  color: #fff;
  text-decoration-line: none;
}

.start-btn:hover {
  border: 2px solid #007dff;
  text-decoration-line: none !important;
  color: #007dff;
  background-color: #fff;
}

.btn-get-started {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.3s;
  margin: 10px;
  color: #007dff;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border: 2px solid #007dff;
}

.btn-get-started a {
  border: 2px solid #007dff;
  text-decoration-line: none;
  color: 007dff;
  background: white;
}
.btn-get-started:hover {
  border: 2px solid #007dff;
  text-decoration-line: none;
  color: white;
  background: #007dff;
}

.btn-get-started i {
  font-family: "FontAwesome";
  font-size: 2.25rem;
  background: #fff;
  color: #0c4272;
}

.tab {
  margin-left: 40px;
}

/* Next & Previous buttons */
.go-to-next,
.go-to-previous {
  position: fixed;
  background: #007dff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  bottom: 50%; /* <- now visible on desktop */
  font-family: "AvenirLtStd", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #007dff;
  z-index: 99;
  opacity: 1;
  transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* Positioning */
.go-to-next {
  right: 50px;
}

.go-to-previous {
  left: 50px;
}

/* Hover effects */
.go-to-next:hover,
.go-to-previous:hover {
  transform: scale(1.2);
  color: #fff;
  text-decoration: none !important;
}

/* Icon styles */
.go-to-next i,
.go-to-previous i {
  font-family: "FontAwesome";
  font-size: 1.25rem;
  color: inherit;
}

.go-to-next i {
  margin-left: 3px;
}

.go-to-previous i {
  margin-right: 5px;
}

/* Remove link underline */
.go-to-next i a,
.go-to-previous i a {
  text-decoration: none;
}

/* Hidden class (used by JS) */
.hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .go-to-next,
  .go-to-previous {
    position: fixed;
    bottom: 30px;
    top: auto;
    width: 45px;
    height: 45px;
    border-radius: 0;
    background: radial-gradient(
  circle at top left,
  #3395ff,
  #0062cc
  );
  border-left: 1px solid #7fbdff;
  border-right: 1px solid #003d7f;
  border-bottom: 1px solid #003d7f;
  border-top: 1px solid #7fbdff;
    z-index: 99;
  }

  .go-to-previous {
    left: calc(50% - 50px);
    border-top-left-radius: 22.5px;
    border-bottom-left-radius: 22.5px;
  }

  .go-to-next {
    left: calc(50% + 5px);
    border-top-right-radius: 22.5px;
    border-bottom-right-radius: 22.5px;
  }

  /* Remove hover scaling */
  .go-to-next:hover,
  .go-to-previous:hover {
    transform: none !important;
  }

  /* Optional: Remove spacing shift */
  .go-to-next i {
    margin-left: 0;
  }

  .go-to-previous i {
    margin-right: 0;
  }
}

#preload {
  display: none;
}
.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}

.lazy-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  width: 100%;
}

.videowrapper {
  position: relative;
  width: 100%;
  max-width: 600px; /* Adjust maximum width as needed */
  padding-bottom: 56.25%; /* Aspect ratio: (height/width)*100 for 16:9 */
  height: 0; /* Required for padding-bottom trick */
  overflow: hidden;
}


.videowrappervimeo {
  position: relative;
  width: 100%;
  max-width: 600px; /* Adjust maximum width as needed */
  padding-bottom: 56.38%; /* Aspect ratio: (height/width)*100 for 16:9 */
  height: 0; /* Required for padding-bottom trick */
  overflow: hidden;
}

.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.figure50right {
  float: right;
  width: 50%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  margin: 0.5em;
  padding: 0.5em;
}

.bracketed-container {
  position: relative;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
  width: 300px;
  height: auto;
}

/* Add brackets to top-left and bottom-left */
.bracketed-container::before,
.bracketed-container::after {
  content: "[";
  position: absolute;
  font-size: 1.25rem;
  font-weight: bold;
}

/* Top-left bracket */
.bracketed-container::before {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

/* Bottom-left bracket */
.bracketed-container::after {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

/*--------------------------------------------------------------
# Cookie Banner
--------------------------------------------------------------*/
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
}

.cookie-banner-inner {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(17, 17, 17, 0.42);
  color: #dcdcdc;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 18px 20px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cookie-banner p {
  margin: 0 0 14px 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #dcdcdc;
}

.cookie-banner a {
  color: #dcdcdc;
  font-weight: 600;
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-actions button {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  border: 2px solid #d3d3d3;
  color: #d3d3d3;
  background: transparent;
  cursor: pointer;
}

.cookie-actions button:hover {
  background: #007dff;
  border-color: #007dff;
  color: #dcdcdc;
}

#cookie-accept {
  background: #007dff;
  border-color: #007dff;
  color: #ffffff;
}

#cookie-accept:hover {
  background: #ffffff;
  border-color: #007dff;
  color: #007dff;
}

@media (max-width: 768px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 20px;
  }

  .cookie-banner-inner {
    max-width: 100%;
    padding: 16px;
  }

  .cookie-actions {
    flex-direction: column;
  }

  .cookie-actions button {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

/* Default header opacity for most pages */
#header {
  background: rgba(36, 55, 77, 0.5); /* Semi-transparent */
  padding: 20px 0;
  height: 72px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 97;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

#header.header-scrolled {
  background: rgba(36, 55, 77, 0.95);
  transition: all 0.5s;
}

#header.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#header {
  opacity: 1;
  transition: opacity 0.3s ease;
}

#header #logo {
  float: left;
}

#header #logo h1 {
  font-size: 2rem;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: "BebasNeueBook", Arial, sans-serif;
  letter-spacing: 3px;
}

#header #logo h1 a,
#header #logo h1 a:hover {
  color: #fff;
  padding-left: 10px;
  position: relative;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

#header #logo img {
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  #header #logo h1 {
    font-size: 1.75rem;
  }
  #header #logo img {
    max-height: 35px;
  }
}

/* idea-link */
.idea-link {
  position: relative; /* Keep it relative to its parent */
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: normal;
  font-size: 0.8em;
  color: dimgray; /* Default text color */
  background-color: #f5f5f5; /* Light gray background */
  border: 1px solid #dcdcdc; /* Light gray border */
  border-radius: 12px; /* Rounded corners */
  padding: 16px 10px 12px 35px; /* Space around the text */
  max-width: 300px; /* Set a specific width */
  margin: 15px;
  box-sizing: border-box; /* Includes padding and border in dimensions */
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.idea-link:hover {
  color: black; /* Text turns black on hover */
  background-color: #eaeaea; /* Slightly darker background on hover */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  text-decoration: none;
}

.idea-link .bulb {
  position: absolute;
  top: -10px; /* Align bulb above the frame */
  left: -12px; /* Align bulb to the left */
  font-size: 1.5em; /* Size of the bulb icon */
  color: #fff; /* Default bulb color */
  background: radial-gradient(
  circle at top left,
  #3395ff,
  #0062cc
  );
  border-left: 1px solid #7fbdff;
  border-right: 1px solid #003d7f;
  border-bottom: 1px solid #003d7f;
  border-top: 1px solid #7fbdff;
  width: 40px; /* Equal width and height for a circular background */
  height: 40px;
  border-radius: 50%; /* Fully rounded background */
  display: flex; /* Center the icon within the circle */
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.3s ease, color 0.3s ease;
}

.idea-link:hover .bulb {
  transform: scale(1.2); /* Enlarge the bulb icon on hover */
  color: #fff; /* Black icon on hover */
}

.idea-link-blue {
  position: relative; /* Keep it relative to its parent */
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: normal;
  font-size: 0.8em;
  color: gainsboro; /* Default text color */
  background-color: #2f4156; /* Light gray background */
  border: 1px solid #3a4d65; /* Light gray border */
  border-radius: 12px; /* Rounded corners */
  padding: 16px 10px 12px 35px; /* Space around the text */
  max-width: 300px; /* Set a specific width */
  margin: 22px auto 22px auto;
  box-sizing: border-box; /* Includes padding and border in dimensions */
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.idea-link-blue:hover {
  color: #fff; /* Text turns black on hover */
  background-color: #1e2d3f; /* Slightly darker background on hover */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  text-decoration: none;
}

.idea-link-blue .bulb {
  position: absolute;
  top: -10px; /* Align bulb above the frame */
  left: -12px; /* Align bulb to the left */
  font-size: 1.5em; /* Size of the bulb icon */
  color: #fff; /* Default bulb color */
  background: radial-gradient(
  circle at top left,
  #3395ff,
  #0062cc
  );
  border-left: 1px solid #7fbdff;
  border-right: 1px solid #003d7f;
  border-bottom: 1px solid #003d7f;
  border-top: 1px solid #7fbdff;
  width: 40px; /* Equal width and height for a circular background */
  height: 40px;
  border-radius: 50%; /* Fully rounded background */
  display: flex; /* Center the icon within the circle */
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.3s ease, color 0.3s ease;
}

.idea-link-blue:hover .bulb {
  transform: scale(1.2); /* Enlarge the bulb icon on hover */
  color: #fff; /* Black icon on hover */
}

/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
#intro {
  display: table;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #0c4272;
}

#intro .carousel-container {
  position: relative;
  z-index: 1; /* Ensure it stays above other layers */
}

#intro .carousel-content {
  z-index: 2;
}

#intro .carousel-inner {
  z-index: 4;
}

#intro .carousel-item {
  overflow: visible;
}

#intro .carousel-item {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  #intro .carousel-item {
    background-position: left;
  }
}

#intro .carousel-item::before {
  content: "";
  background-color: rgba(12, 66, 114, 0.5);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#carousel-video {
  position: absolute;
  left: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}

#intro .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#intro .carousel-content {
  text-align: center;
}

#intro h1 {
  color: Gainsboro;
  font-family: "Roboto", Arial, sans-serif;
  margin-bottom: 15px;
  font-size: 2.5rem;
  font-weight: 700;
}

#intro .custom-heading {
  color: Gainsboro;
  font-family: "Roboto", Arial, sans-serif;
  margin-bottom: 15px;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  padding-left: 10px;
  padding-right: 10px;
}

#intro i {
  font-family: "FontAwesome";
  vertical-align: super;
  font-size: smaller;
}

@media (max-width: 768px) {
  #intro .custom-heading {
    font-size: 1.875rem;
  }
}

#intro p {
  width: 80%;
  max-width: 600px;
  margin: 0 auto 30px auto;
  color: Gainsboro;
  font-size: 1.125rem;
  text-align: center;
}

@media (min-width: 1024px) {
  #intro p {
    width: 60%;
  }
}

/* Scroll Indicator Container */
#intro .scroll-indicator {
  position: absolute;
  bottom: 20%; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 1000;
}

/* Ion Chevron Down Icon */
#intro .scroll-indicator .ion-chevron-down {
  color: white; /* Change to desired color */
  animation: bounce 1.5s infinite; /* Bounce animation */
  font-size: 2.5rem;
  display: inline-block; /* Ensure it's animatable */
}

/* Bounce Animation */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0); /* Only Y-axis */
  }
  40% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(5px);
  }
}

#intro .carousel-fade .carousel-inner .carousel-item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

#intro .carousel-fade .carousel-inner .carousel-item,
#intro .carousel-fade .carousel-inner .active.carousel-item-left,
#intro .carousel-fade .carousel-inner .active.carousel-item-right {
  opacity: 1;
}

#intro .carousel-fade .carousel-inner .active,
#intro .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
#intro .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
  opacity: 1;
  transition: 0.3s;
}

#intro .carousel-fade .carousel-inner .carousel-item-next,
#intro .carousel-fade .carousel-inner .carousel-item-prev,
#intro .carousel-fade .carousel-inner .active.carousel-item-left,
#intro .carousel-fade .carousel-inner .active.carousel-item-right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#intro .carousel-control-prev,
#intro .carousel-control-next {
  width: 20%;
  z-index: 10;
}

@media (min-width: 1024px) {
  #intro .carousel-control-prev,
  #intro .carousel-control-next {
    width: 10%;
  }
}

#intro .carousel-control-next-icon,
#intro .carousel-control-prev-icon {
  background: none;
  font-size: 2rem;
  line-height: 1;
}

#intro .carousel-indicators li {
  cursor: pointer;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu,
.nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.nav-menu li {
  position: relative;
  white-space: nowrap;
}

.nav-menu > li {
  float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
  display: block;
}

.nav-menu ul ul {
  top: 0;
  left: 100%;
}

.nav-menu ul li {
  min-width: 100px;
}

/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
  padding-right: 30px;
}

.sf-arrows .sf-with-ul:after {
  content: "\f107";
  position: absolute;
  right: 15px;
  font-size: 0.75rem;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: 700;
}

.sf-arrows ul .sf-with-ul:after {
  content: "\f054";
  position: absolute;
  font-size: 0.5rem;
  font-family: "FontAwesome";
  font-weight: 700;
  color: dimgray;
  top: 9px;
  line-height: 12px;
}

/* Nav Meu Container */
#nav-menu-container {
  float: right;
  margin: 0;
}

@media (min-width: 951px) {
  #nav-menu-container {
    padding-right: 10px;
  }
}

@media (max-width: 951px) {
  #nav-menu-container {
    display: none;
  }
}

@media (min-width: 768px) {
  .hidden-large-screen {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

/* Nav Menu Styling */
.nav-menu a {
  padding: 0px 5px 10px 5px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  outline: none;
}

.nav-menu .active {
  color: #B8DDFF;
  letter-spacing: 1px;
}

#header.header-scrolled .nav-menu .active {
  color: #66B1FF;
  letter-spacing: 1px;
}

.nav-menu i {
  font-family: "FontAwesome";
  font-size: 0.5rem;
  vertical-align: baseline; /* Aligns text baseline with adjacent text */
  line-height: 12px;
  font-family: "FontAwesome";
  font-style: normal;
  color: dimgray;
  font-weight: 700;
  position: relative; /* Enable precise positioning */
  top: -1px; /* Adjust this value to move it higher */
}

@media (max-width: 951px) {
  .nav-menu i {
    display: none !important;
  }
}

.nav-menu li:hover > a:not([href="javascript:void(0)"]),
.nav-menu > .menu-active > a:not([href="javascript:void(0)"]) {
  color: #007bff;
}

.nav-menu > li {
  margin-left: 4px;
}

.nav-menu ul {
  margin: 4px 0 0 0;
  padding: 10px;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  background: #fff;
}

.nav-menu ul li {
  transition: 0.1s;
}

.nav-menu ul li a {
  padding: 6px;
  transition: 0.1s;
  display: block;
  color: dimgray;
  font-size: 0.75rem;
  text-transform: none;
}

.nav-menu a[href="javascript:void(0)"] {
  pointer-events: none;
  cursor: default;
}

.nav-menu ul ul {
  margin: 0;
}

/* Mobile Nav Toggle */
#mobile-nav-toggle {
  display: none;
  position: fixed;
  right: -5px;
  top: 0;
  margin: 15px 30px 0 0 !important;
  width: 35px !important;
  height: 35px !important;
  background: radial-gradient(
  circle at top left,
  #3395ff,
  #0062cc
  );
  border-left: 1px solid #7fbdff;
  border-right: 1px solid #003d7f;
  border-bottom: 1px solid #003d7f;
  border-top: 1px solid #7fbdff;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem !important;
  transition: all 0.4s;
  outline: none;
  cursor: pointer;
  z-index: 999;
}

/* Icon color */
#mobile-nav-toggle i {
  font-family: "FontAwesome";
  color: #fff;
}

@media (max-width: 951px) {
  #mobile-nav-toggle {
    display: flex !important;
  }
}

/* Mobile Nav Styling */
#mobile-nav {
  position: fixed;
  top: 0;
  padding-top: 18px;
  bottom: 0;
  z-index: 997;
  background: rgba(0, 0, 0, 0.8);
  left: -325px;
  width: 325px;
  overflow-y: auto;
  transition: 0.4s;
}

#mobile-nav .active {
  color: #66B1FF;;
  letter-spacing: 1px;
}

#mobile-nav ul {
  padding: 0;
  margin: 0px;
  list-style: none;
}

#mobile-nav ul li {
  position: relative;
}

#mobile-nav ul li a {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  font-family: "Roboto", Arial, sans-serif;
  line-height: 1.5;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  text-decoration: none;
  max-width: 80%;
  outline: none;
  min-height: 48px;
  text-overflow: ellipsis; /* Handle overflow text */
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden; /* Hide overflowed text */
}

#mobile-nav ul li a:hover:not([href="javascript:void(0)"]) {
  color: #66B1FF;
}

#mobile-nav ul li {
  padding-left: 15px;
}

#mobile-nav ul .menu-has-children i {
  font-family: "FontAwesome";
  display: inline-block;
  position: absolute;
  font-family: "FontAwesome";
  right: 30px;
  z-index: 99;
  cursor: pointer;
  color: #fff;
  font-size: 1.75rem; /* Larger icons for easier tapping */
}

#mobile-nav ul .menu-has-children i.fa-chevron-up {
  display: inline-block;
  color: #66B1FF;
  padding: 0px;
}

#mobile-nav ul .menu-has-children i.fa-chevron-right {
  display: none;
}

#mobile-nav ul .menu-has-children i.fa-chevron-down {
  padding: 0px;
}

#mobile-nav ul .menu-has-children i.fa-chevron-down:hover {
  color: #66B1FF; /* Change to desired hover color */
}

#mobile-nav ul .menu-has-children li a {
  text-transform: none;
}

#mobile-body-overly {
  width: 100%;
  height: 100%;
  z-index: 947;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}

/* Mobile Nav body classes */
body.mobile-nav-active {
  overflow: hidden;
}

body.mobile-nav-active #mobile-nav {
  left: 0;
}

body.mobile-nav-active #mobile-nav-toggle {
  color: #fff;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
/* Sections Header
--------------------------------*/

.section-header h1 {
  font-size: 2rem;
  line-height: 1;
  color: dimgray;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  position: relative;
  padding-bottom: 5px;
}

.section-header h1::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-header h1::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #007dff;
  bottom: 0;
  left: calc(50% - 20px);
}

.section-header h2 {
  font-size: 2rem;
  color: dimgray;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
}

.section-header h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-header h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #007dff;
  bottom: 0;
  left: calc(50% - 20px);
}

.section-header h3 {
  font-size: 1.875rem;
  color: dimgray;
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
}

.section-header p {
  text-align: center;
  padding-bottom: 30px;
  color: dimgray;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
/* Blog Header
--------------------------------*/

/* Section with background
--------------------------------*/
.section-bg {
  background: #b8b8b8;
}

.section-bg-light {
  background: #fff;
}

/* Featured Services Section
--------------------------------*/
#featured-services {
  position: relative;
  background: radial-gradient(circle at top, #1d3451, #142438);
  padding: 20px 0;
}

#featured-services::before {
  content: "";
  position: absolute;
  height: 70px; /* Same as the offset */
  width: 100%;
  visibility: hidden; /* Prevent it from being visible */
}

#featured-services-anchor {
  position: relative;
  top: -70px; /* Adjust based on header height */
  visibility: hidden; /* Ensure it doesn't display */
}

#featured-services .box {
  padding: 10px 20px;
}

#featured-services .box-bg {
  background-image: linear-gradient(
    0deg,
    #000000 0%,
    #242323 50%,
    #000000 100%
  );
}

#featured-services i {
  font-family: "FontAwesome";
  color: #66B1FF;
  font-size: 1.625rem;
  font-family: "FontAwesome";
  display: inline-block;
  vertical-align: bottom;
  line-height: 1;
}

#featured-services h4 {
  text-transform: uppercase;
  margin: 15px 0;
  font-size: 1.375rem;
  color: Gainsboro;
  letter-spacing: 1px;
}
#featured-services h4 a {
  color: #fff;
}

#featured-services h4 a:hover {
  color: #007dff;
}

@media (max-width: 768px) {
  #featured-services p {
    font-size: 1rem;
    line-height: 26px;
    color: Gainsboro;
    margin-bottom: 0px;
  }
}

@media (min-width: 768px) {
  #featured-services p {
    font-size: 0.875rem;
    line-height: 24px;
    color: Gainsboro;
    margin-bottom: 0px;
  }
}

#featured-services p a {
  color: gainsboro;
  text-decoration: underline;
  font-weight: 600;
}

#featured-services p a:hover {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
}

#featured-services .range-ul ul {
  list-style: none;
  list-style-position: inside;
  padding: 0;
  margin: 0;
}

#featured-services .range-ul ul i {
  font-family: "FontAwesome";
  padding-right: 0px;
  font-size: 0.875rem;
  color: Gainsboro;
  vertical-align: middle;
}

#featured-services .range-ul ul li {
  padding-left: 10px;
  text-indent: -4px;
}

#featured-services .range-ul ul li:before {
  padding-right: 5px;
}

#featured-services .range-ul ul li:first-child {
  padding-top: 0;
}

#featured-services .blog-btn {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.3s;
  margin: 15px;
  color: #fff;
  background: #007dff;
  text-decoration-line: none;
  border: 2px solid #007dff;
}

#featured-services .blog-btn:hover {
  background: #77b9ff;
  color: #fff;
  border: 2px solid #007dff;
  text-decoration-line: none;
}

#featured-services .blog-btn a {
  color: #fff;
  text-decoration-line: none;
}

/* Values Services Section
--------------------------------*/
#values {
  background: #9caf33;
  padding: 30px 0;
}

#values .box {
  padding: 30px 20px;
}

#values .box-bg {
  background-image: linear-gradient(
    0deg,
    #000000 0%,
    #242323 50%,
    #000000 100%
  );
}

#values i {
  font-family: "FontAwesome";
  color: #007dff;
  font-size: 3rem;
  display: inline-block;
  line-height: 1;
}

#values h4 {
  margin: 15px 0;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: #fff;
}
#values h4 a:hover {
  color: #007dff;
}

#values .container {
  font-size: 1rem;
  line-height: 24px;
  color: dimgray;
  margin-bottom: 0;
}

#values p {
  font-size: 1rem;
  line-height: 24px;
  color: dimgray;
  margin-bottom: 0;
}

#values .tagline {
  font-size: 1.125rem;
  text-align: center;
  line-height: 20px;
  color: dimgray;
  margin-bottom: 0;
}

#values h4 a:hover {
  color: #007dff;
}

/* About Us Section
--------------------------------*/
#about {
  background-size: cover;
  padding: 30px 0 5px 0;
  position: relative;
  scroll-margin-top: 70px; /* Adjust based on header height */
  display: block;
  overflow: hidden;
}

#about::after {
  content: "";
  display: table;
  clear: both;
}

#about::before,
#about::after {
  content: none; /* Remove unnecessary pseudo-elements */
}

#about::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9;
}

#about .section-header h2 .smaller {
  font-size: 1.125rem;
  position: relative;
  line-height: 1;
  letter-spacing: 1px;
  display: block;
  margin-top: 2px;
}

#about .container {
  position: relative;
  z-index: 10;
}

#about .about-col {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 2px;
}

#about .about-col .img {
  position: relative;
}

#about .about-col .img img {
  border-radius: 4px 4px 0 0;
}

#about .about-col .icon {
  width: 64px;
  height: 64px;
  padding-top: 12px;
  position: absolute;
  background-color: #9caf33;
  border-radius: 20%;
  text-align: center;
  left: calc(50% - 32px);
  bottom: -30px;
  transition: 0.3s;
}

#about .about-col i {
  font-family: "FontAwesome";
  font-size: 2.25rem;
  line-height: 1;
  color: #fff;
  transition: 0.3s;
}

#about .about-col:hover .icon {
  background-color: #fff;
}

#about .about-col:hover i {
  font-family: "FontAwesome";
  color: #9caf33;
}

#about .about-col h2 {
  color: dimgray;
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0;
  margin: 40px 0 12px 0;
}

#about .about-col h2 a {
  color: dimgray;
}

#about .about-col h2 a:hover {
  color: #9caf33;
}

#about p {
  font-size: 1rem;
  color: dimgray;
  margin-bottom: 0;
  padding: 0 20px 20px 20px;
}

video {
  width: 100%;
  height: auto;
}

video::-webkit-media-text-track-display {
  font-size: 130%;
}

/* TempBanner Section
--------------------------------*/

#TempBanner {
  position: relative;
  background: radial-gradient(circle at top, #768828, #637118);
  padding: 40px 0;
}

#TempBanner::before {
  content: "";
  position: absolute;
  height: 70px; /* Same as the offset */
  width: 100%;
  visibility: hidden; /* Prevent it from being visible */
}

#TempBanner .container {
  position: relative;
  z-index: 10;
}

#TempBanner h4,
#TempBanner p {
  font-size: 1rem;
  color: white;
  margin: 0;
  display: inline-block;
  padding: 0 20px 10px 20px;
  font-family: "AvenirLtStd", Arial, sans-serif;
}

#TempBanner h4 {
  display: inline;
  font-weight: 600;
}

#TempBanner p a {
    color: white;
    text-decoration: underline;
    font-weight: 600;
  }

#TempBanner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 25px;
  }

#TempBanner ul {
  list-style: none;
}

#TempBanner ul li {
  color: white;
  font-family: "AvenirLtStd", Arial, sans-serif;
}

#TempBanner .cta-btn {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  margin-top: 0; /* Reduce the top margin to bring the button closer */
  margin-bottom: 0; /* Optional: Remove bottom margin if unnecessary */
  border: 2px solid white;
  color: white;
  text-align: center;
}

#TempBanner .cta-btn a {
  color: #D3D3D3;
  text-decoration-line: none;
}

#TempBanner .cta-btn:hover {
  background: #9CAF33;
  border: 2px solid #9CAF33;
  text-decoration-line: none !important;
  color: white;
}

#TempBanner .highlight p {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.815rem;
  line-height: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 2px 28px;
  color: white;
  text-align: center;
}

/* Range Section
--------------------------------*/
#range {
  background-color: Gainsboro;
  background-size: cover;
  padding: 30px 0 40px 0;
  position: relative;
}

#range::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9;
}

#range .container {
  position: relative;
  z-index: 10;
}

#range .range-col {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

#range .range-col .img {
  position: relative;
}

#range .range-col .img img {
  border-radius: 4px 4px 0 0;
}

#range .range-col .icon {
  width: 63px;
  height: 63px;
  padding-top: 8px;
  position: absolute;
  background-color: #0c4272;
  border-radius: 20%;
  text-align: center;
  left: calc(50% - 32px);
  bottom: -30px;
  transition: 0.3s;
}

#range .range-col i {
  font-family: "FontAwesome";
  font-size: 2.375rem;
  line-height: 1;
  color: #fff;
  transition: 0.3s;
}

#range .range-col:hover .icon {
  background-color: #0c4272;
}

#range .range-col:hover i {
  font-family: "FontAwesome";
  color: #fff;
}

#range .range-col h2 {
  color: dimgray;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 22px;
  padding: 0;
  margin: 40px 0 0px 0;
}

#range .range-col h2 a {
  color: dimgray;
}

#range .range-col h2 a:hover {
  color: #007dff;
}

#range .range-col p {
  font-size: 1rem;
  line-height: 24px;
  color: dimgray;
  margin-bottom: 0;
  padding: 0 20px 0 20px;
}

#range .smaller {
  font-size: 1.25rem;
  position: relative;
  line-height: 1.2;
  letter-spacing: 1px;
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Range Hover Section
--------------------------------*/
@media (min-width: 1024px) {
  #range-article {
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
}

@media (max-width: 1024px) {
  #range-article {
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
}

#range-article::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
}

#range-article .container {
  position: relative;
  z-index: 10;
}

@media (min-width: 1024px) {
  #range-article .range-colg {
    background: #131b28;
  }
}

@media (max-width: 1024px) {
  #range-article .range-col {
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
}

#range-article .range-col {
  padding: 0px 0 20px 0;
}

#range-article .range-col .img {
  position: relative;
}

#range-article .range-col .icon {
  width: 63px;
  height: 63px;
  padding-top: 8px;
  position: absolute;
  background-color: #0c4272;
  border-radius: 20%;
  text-align: center;
  left: calc(50% - 32px);
  bottom: -30px;
  transition: 0.3s;
}

#range-article .range-col i {
  font-family: "FontAwesome";
  font-size: 2.375rem;
  line-height: 1;
  color: #fff;
  transition: 0.3s;
}

#range-article .range-col:hover .icon {
  background-color: #fff;
}

#range-article .range-col:hover i {
  font-family: "FontAwesome";
  color: #0c4272;
}

#range-article .range-col h3 {
  color: Gainsboro;
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0;
  margin: 15px 0 5px 0;
}

#range-article .range-col h3 a {
  color: dimgray;
}

#range-article .range-col h3 a:hover {
  color: #007dff;
}

#range-article .range-col h2 {
  color: dimgray;
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0;
  margin: 40px 0 12px 0;
}

#range-article .range-col h2 a {
  color: dimgray;
}

#range-article .range-col h2 a:hover {
  color: #007dff;
}

#range-article .range-col p {
  font-size: 0.875rem;
  line-height: 24px;
  margin-bottom: 0;
  padding: 0 5px 10px 5px;
  color: Gainsboro;
}

#range-article p a {
  color: Gainsboro;
  text-decoration: underline;
  font-weight: 600;
}

#range-article p a:hover {
  color: white;
}

#range-article .highlight-section {
  background-color: #2f4156; /* Light background to make it stand out */
  border-left: 7px solid #9caf33; /* Add a green accent line */
  padding: 5px; /* Add padding for better spacing */
  margin: 6px 0; /* Add spacing from surrounding elements */
}

#range-article .highlight-section p {
  padding-top: 10px;
}

#range-article .highlight-section h3 {
  margin-bottom: 1px;
  margin-top: 15px;
  margin: 0;
}

#range-article .highlight-section a {
  color: gainsboro; /* Match the green accent */
  font-weight: 600;
  text-decoration: underline;
}

#range-article .highlight-section a:hover {
  text-decoration: underline; /* Add hover effect */
  color: #fff;
}


/* Range Hover Section
--------------------------------*/
#range-hover {
  background: grey;
  background-size: cover;
  padding: 30px 0 40px 0;
  position: relative;
  scroll-margin-top: 70px; /* Adjust based on header height */
}

#range-hover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9;
}

#range-hover .section-header h2 .smaller {
  font-size: 1.125rem;
  position: relative;
  line-height: 1;
  letter-spacing: 1px;
  display: block;
  margin-top: 2px;
}

#range-hover .container {
  position: relative;
  z-index: 10;
}

#range-hover .range-col {
  display: grid;
  place-items: center; /* Centers both horizontally and vertically */
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 15px;
}

#range-hover .range-col .img {
  position: relative;
}

#range-hover .range-col .img img {
  border-radius: 4px 4px 0 0;
}

#range-hover .range-col .icon {
  width: 63px;
  height: 63px;
  padding-top: 12px;
  position: absolute;
  background-color: #fff;
  border-radius: 20%;
  text-align: center;
  left: calc(50% - 32px);
  bottom: 10px;
  transition: 0.3s;
}

#range-hover .range-col i {
  font-family: "FontAwesome";
  font-size: 2.375rem;
  padding-left: 7px;
  line-height: 1;
  color: #007dff;
  transition: 0.3s;
}

#range-hover .range-col:hover .icon {
  background-color: #007dff;
}

#range-hover .range-col:hover i {
  font-family: "FontAwesome";
  color: #fff;
}

#range-hover .range-col h3 {
  color: dimgray;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 1px;
  padding: 0;
  margin: 15px 5px 12px 5px;
}

#range-hover .range-col h3 a {
  color: dimgray;
}

#range-hover .range-col h3 a:hover {
  color: #007dff;
}

#range-hover .range-col h2 {
  color: dimgray;
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0;
  margin: 40px 0 12px 0;
}

#range-hover .range-col h2 a {
  color: dimgray;
}

#range-hover .range-col h2 a:hover {
  color: #007dff;
}

#range-hover .range-col p {
  font-size: 0.875rem;
  line-height: 24px;
  color: dimgray;
  margin-bottom: 0;
  padding: 0 10px 10px 10px;
}

/* range_display Section
--------------------------------*/
#range_display {
  background-color: lightblue;
  background-size: cover;
  padding: 90px 0 40px 0;
  position: relative;
}

#range_display::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9;
}

#range_display .container {
  position: relative;
  z-index: 10;
}

#range_display h1 {
  font-size: 2rem;
}

#range_display h1 .smaller {
  font-size: 1.125rem;
  position: relative;
  line-height: 1;
  letter-spacing: 1px;
  display: block;
  margin-top: 2px;
}

#range_display p {
  text-align: left;
  color: dimgray;
  margin-bottom: 15px;
  line-height: 1.7;
}

#range_display p a {
  color: dimgray;
  text-decoration: underline;
  font-weight: 600;
}

#range_display .range_display-col {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 15px !important;
  display: flex; /* Enables Flexbox layout */
  flex-direction: column; /* Ensures child elements stack vertically */
  align-items: center; /* Centers horizontally */
  justify-content: center; /* Centers vertically if needed */
  text-align: center; /* Ensures text content is centered */
}

#range_display .range_display-col .img {
  position: relative;
}
#range_display .range_display-col .img img {
  border-radius: 4px 4px 0 0;
}

#range_display .range_display-col .icon {
  width: 63px;
  height: 63px;
  display: flex; /* Use Flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  background-color: #fff;
  border-radius: 20%; /* Ensure it’s perfectly circular */
  position: absolute;
  left: calc(50% - 31.5px); /* Adjust to half the width for precise centering */
  bottom: 10px; /* Adjust to half the height for precise positioning */
  transition: 0.3s;
}

#range_display .range_display-col i {
  font-family: "FontAwesome";
  font-size: 2.375rem;
  line-height: 1;
  color: #007dff;
  transition: 0.3s;
  margin-left: 0; /* Remove padding or margins for proper centering */
  margin-top: 5x;
}

#range_display .range_display-col i {
  font-family: "FontAwesome";
  margin-left: 0; /* Remove padding or margins for proper centering */
  margin-top: 4px;
}

#range_display .range_display-col .icon i.fa-chevron-right {
  margin-left: 6px; /* Adjust as needed */
  margin-top: 6px; /* Adjust as needed */
  font-size: 2rem;
}

#range_display .range_display-col:hover .icon {
  background-color: #007dff;
}

#range_display .range_display-col:hover i {
  font-family: "FontAwesome";
  color: #fff;
}

#range_display .range_display-col h2 {
  color: dimgray;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
  padding: 0;
  margin: 15px 5px 12px 5px;
}

#range_display .range_display-col h2 a {
  color: dimgray;
}

#range_display .range_display-col h2 a:hover {
  color: #007dff;
}

@media (min-width: 768px) {
  #range_display .range_display-col p {
    font-size: 0.875rem;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 0;
    padding: 0 10px 10px 10px;
    color: dimgray;
  }
}

@media (max-width: 768px) {
  #range_display .range_display-col p {
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 0;
    padding: 0 10px 10px 10px;
    color: dimgray;
  }
}

#range_display p a:hover {
  color: Black;
  text-decoration: underline;
}

#range_display .range-ul ul {
  list-style: none;
  list-style-position: inside;
  padding: 0 0 20px 0;
  margin: 0;
  color: dimgray;
}

#range_display .range-ul ul i {
  font-family: "FontAwesome";
  padding-right: 0px;
  color: dimgray;
}

#range_display .range-ul ul li {
  padding-left: 10px;
  text-indent: -5px;
  color: dimgray;
}

#range_display .range-ul ul li:before {
  padding-right: 5px;
}

#range_display .range-ul ul li:first-child {
  padding-top: 0;
}

#range_display .smaller {
  font-size: 1.25rem;
  position: relative;
  line-height: 1.5;
  letter-spacing: 1px;
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Blog Section
--------------------------------*/
html,
body {
  background: radial-gradient(circle at top, #1d3451, #142438);
  background-size: cover;
  background-attachment: scroll;
  background-repeat: no-repeat;
  margin: 0;         /* overschrijf indien nodig default-margins */
  padding: 0;
}

/* 2) Je bestaande #blog-styles blijven ongewijzigd */
@media (min-width: 768px) {
  #blog {
    padding: 90px 0 40px 0;
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
   background-attachment: scroll;
    background-repeat: no-repeat;
    position: relative;
  }
}

@media (max-width: 768px) {
  #blog {
    padding: 90px 0 40px 0;
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    position: relative;
  }
}

#blog {
  min-height: 3000px; /* or based on estimated size */
}

#blog::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
}

#blog .section-header h1::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

#blog .section-header h1::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #9caf33;
  bottom: 0;
  left: calc(50% - 20px);
}

#blog .container {
  position: relative;
  z-index: 10;
}

#blog .section-header h1 .smaller {
  font-size: 1.125rem;
  position: relative;
  line-height: 1.1;
  letter-spacing: 1px;
  display: block;
  margin-top: 2px;
  margin-top: 2px;
}

#blog p {
  font-family: "AvenirLtStd", Arial, sans-serif;
  color: Gainsboro;
  text-align: center;
  margin-bottom: 10px;
}
#blog div + p {
  margin-top: 40px; /* Adjust margin-top when a <p> follows an <h3> */
}

#blog #blog-flters,
#blog-link #blog-flters {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
  text-align: center;
  vertical-align: middle;
}

#blog #blog-flters li,
#blog-link #blog-flters li {
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
  font-weight: 700;
  margin: 15px 20px 30px 0;
  display: inline-block;
  padding: 7px 20px;
  font-size: 0.75rem;
  line-height: 16px;
  color: gainsboro;
  border-radius: 16px;
  text-transform: uppercase;
  background: none;
  margin-bottom: 5px;
  border: 1.5px solid gainsboro;
  transition: all 0.3s ease-in-out;
}

#blog #blog-flters i,
#blog-link #blog-flters i {
  font-family: "FontAwesome";
  font-size: 0.5rem;
  vertical-align: middle;
  line-height: 16px;
  font-weight: lighter;
}

#blog #blog-flters li:hover,
#blog-link #blog-flters li:hover {
  background: #007dff;
  border: 1.5px solid #007dff;
  color: gainsboro;
}

#blog-link #blog-flters a {
  color: gainsboro;
  text-decoration: none;
}

#blog-link #blog-flters li:hover a {
  color: gainsboro;
}

/* Active filter styling */
#blog #blog-flters li.filter-active {
  background: #007dff;
  border: 1.5px solid #007dff;
  color: #fff;
}

#blog #blog-flters li:last-child,
#blog-link #blog-flters li:last-child {
  margin-right: 0;
}

#blog #blog-flters li:first-child,
#blog-link #blog-flters li:first-child {
  margin-left: 0;
}

#blog #blog-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px; /* Space between grid items */
  width: 100%; /* Or a specific max-width, e.g., max-width: 1200px */
  margin: 0 auto; /* Center the container */
}

#blog #blog-items > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}

@media (max-width: 768px) {
  #blog-items {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
  }
}

#blog-items .blog-col {
  display: flex;
  box-sizing: border-box;
  margin: 10px;
  margin-bottom: 20px;
  background: #2f4156; /* New background color */
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(1, 8, 16, 0.08);
  position: relative;
  flex-direction: column; /* Stack items vertically */
}

#blog .blog-col .img img {
  width: 100%; /* Ensures the image stretches to fit its container */
  height: auto; /* Maintains the aspect ratio */
  display: cover;
  object-fit: cover;
  background-color: #e0e0e0;
}

#blog-items .blog-col {
  /* Remove the following lines if present */
  /* float: none !important; */
  /* display: block !important; */

  /* Retain other necessary styles */
  box-sizing: border-box;
  width: calc((100% - 100px) / 3);
  margin-bottom: 20px;
}

@media (max-width: 788px) {
  #blog-items .blog-col {
    width: 100%; /* Single column */
    margin-left: 0;
    margin-right: 0;
  }
}

#blog .blog-col .italic {
  font-style: italic;
}

#blog h1 {
  color: Gainsboro;
  font-size: 2.375rem;
}

#blog .blog-col {
  background: #2f4156; /* New background color */
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(18, 63, 105, 0.08);
  margin-bottom: 20px;
}

#blog .blog-col .img {
  position: relative;
}

#blog .blog-col .img img {
  border-radius: 0px 0px 0 0;
}

#blog .blog-col .icon {
  width: 64px;
  height: 64px;
  padding-top: 12px;
  text-align: center;
  position: absolute;
  background-color: #fff;
  border-radius: 20%;
  left: calc(50% - 32px);
  bottom: -30px;
  transition: 0.3s;
}

#blog .blog-col i {
  font-family: "FontAwesome";
  font-size: 2.375rem;
  transform: translateX(1px);
  line-height: 1;
  color: #007dff;
  transition: 0.3s;
}

#blog .blog-col:hover .icon {
  background-color: #007dff;

}

#blog .blog-col:hover i {
  font-family: "FontAwesome";
  color: #fff;
}

#blog .blog-col h3 {
  color: Gainsboro;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 1px;
  padding: 0;
  margin: 40px 15px 10px 15px;
}

#blog .blog-col h3 a {
  color: Gainsboro;
  text-decoration: none;
}

#blog .blog-col h3 a:hover {
  color: White;
  text-decoration: none;
}

#blog p a,
#blog ul a,
#blog li a {
  color: gainsboro;
  font-weight: 600;
  text-decoration: underline;
}

#blog p a:hover,
#blog ul a:hover,
#blog li a:hover {
  color: white;
}

#blog .blog-col h3 a:hover {
  color: #fff;
}

#blog .blog-btn,
#detail .blog-btn,
#article .blog-btn {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  margin-bottom: 15px;
  color: gainsboro;
  border: 2px solid gainsboro;
}


#blog .blog-btn:hover,
#detail .blog-btn:hover,
#article .blog-btn:hover
{
  color: gainsboro;
  background: #007dff;
  border: 2px solid #007dff;
  text-decoration-line: none;
}

#blog .blog-btn i,
#detail .blog-btn i,
#article .blog-btn i {
  font-size: 0.875rem;
  color: gainsboro !important;
}

#blog .blog-btn i a,
#detail .blog-btn i a,
#article .blog-btn i a {
  color: gainsboro !important;
}

#blog .blog-btn i a:hover,
#detail .blog-btn i a:hover,
#article .blog-btn i a:hover {
  color: gainsboro !important;
}

#blog .blog-col p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.8;
  color: Gainsboro;
  margin-bottom: 15px;
  padding: 0 20px 0px 20px;
}

#blog .blog-page {
  font-family: "AvenirLtStd", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  margin-top: 10px;
  color: #fff;
  background: #007dff;
  border: 2px solid #007dff;
}

#blog .blog-page:hover {
  color: #007dff;
  background: #fff;
  border: 2px solid #007dff;
}

#blog .blog-outro {
  position: relative;
  overflow: hidden;
}

#blog-items .blog-col,
#blog .blog-col {
  background: #2f4156 !important; /* New background color with higher specificity */
}

/* Article Section
--------------------------------*/

@media (min-width: 1024px) {
  #article {
    padding: 90px 0 40px 0;
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
}
@media (max-width: 1024px) {
  #article {
    padding: 90px 0 40px 0;
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
}

#article::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
}

#article .container .buttons {
  text-align: center;
}

#article .section-header {
  position: relative;
  z-index: 11; /* One higher than #article::before’s z-index:9 */
}
#article .section-header h1::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

#article .section-header h1::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #9caf33;
  bottom: 0;
  left: calc(50% - 20px);
}

#article .section-header h1 {
  position: relative;
  color: Gainsboro;
  font-size: 2rem;
  line-height: 1.2;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 15px;
}

#article .section-header h1 .smaller {
  font-size: 1.25rem;
  position: relative;
  line-height: 1;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 2px;
}

#article .container {
  position: relative;
  z-index: 10;
}

#article .alignright {
  text-align: right;
}

.dropcap {
  float: left;
  font-size: 400%;
  font-weight: 900;
  color: Gainsboro;
  margin: -20px 7px -20px 0;
}

#article p video {
  width: 100%;
  height: auto;
}

#article .blog-outro {
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  #article .container .buttons {
    display: none;
  }
}

#article .blog-col {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

#article .blog-col .img {
  position: relative;
}

#article .blog-col .img img {
  border-radius: 4px 4px 0 0;
}

#article .accent {
  color: #fff;
  letter-spacing: 1px;
}

#article .super {
  vertical-align: super;
  font-size: smaller;
}

#article h2 {
  text-align: left;
  font-weight: 700;
  font-size: 1.5rem;
  padding: 10px;
  margin: 0px 0 12px 0;
  color: Gainsboro;
  letter-spacing: 1px;
}

#article h3 {
  text-align: left;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 10px;
  margin: 15px 0 12px 0;
  color: Gainsboro;
  letter-spacing: 1px;
}

#article h3 a {
  color: Gainsboro;
  text-decoration: underline;
}

#article h3 a:hover {
  text-decoration: underline;
  color: #fff;
}

#article h4 {
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  padding: 10px;
  margin: 15px 0 12px 0;
  color: Gainsboro;
}

#article .blog-col h2 a:hover {
  text-decoration: underline;
  color: #fff;
}

#article p {
  text-align: left;
  padding: 0 20px 0 20px;
  font-family: "AvenirLtStd", Arial, sans-serif;
  margin-bottom: 10px;
  font-weight: 400;
  color: Gainsboro;
}

#article .highlight-section {
  background-color: #2f4156; /* Light background to make it stand out */
  border-left: 7px solid #9caf33; /* Add a green accent line */
  padding: 5px; /* Add padding for better spacing */
  margin: 6px 0; /* Add spacing from surrounding elements */
}

#article .highlight-section .voordat {
  text-align: left;
  font-family: "BebasNeueBook", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 10px;
  margin: 15px 0 12px 0;
  color: Gainsboro;
  letter-spacing: 1px;
}

#article .highlight-section p {
  padding-top: 10px;
}

#article .highlight-section p a {
  color: gainsboro;
  font-weight: 600;
  text-decoration: underline;
}

#article .highlight-section p a:hover {
  color: white;
}

#article .highlight-section .meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#article .highlight-section .meta-list li {
  display: grid;
  grid-template-columns: 70px 1fr; /* adjust label width */
  gap: 10px;
  margin-bottom: 0.75rem;
}

#article .highlight-section .label {
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

#article .highlight-section .label::after {
  content: " :";
}

#article .highlight-section .value {
  line-height: 1.2;
}

blockquote {
  color: Gainsboro;
  text-align: center;
  font-style: italic;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

blockquote a {
  color: gainsboro;
  font-weight: 600;
  text-decoration: underline;
}

blockquote a:hover {
  color: #fff;
}

#article .highlight-section h3 {
  margin-bottom: 1px;
  margin-top: 15px;
  margin: 0;
}

#article .highlight-section a {
  color: gainsboro; /* Match the green accent */
  font-weight: 600;
  text-decoration: underline;
}

#article .highlight-section a:hover {
  text-decoration: underline; /* Add hover effect */
  color: #fff;
}

#article ul {
  list-style: none;
  padding: 0 10px 0 10px;
}

#article li {
  padding-left: 21px;
  padding-top: 3px;
  text-indent: -4px;
  line-height: 1.7;
  color: Gainsboro;
  font-family: "AvenirLtStd", Arial, sans-serif;
  font-weight: 400;
}

#article ul a,
#article li a,
#article p a,
#article .cite p a {
  color: gainsboro;
  font-weight: 600;
  text-decoration: underline;
}

#article ul a:hover,
#article li a:hover,
#article p a:hover,
#article .cite p a:hover {
  color: #fff;
}

#article p .text-center {
  text-align: center;
}

#article p .italic {
  font-style: italic;
}

#article .quote {
  color: Gainsboro;
  font-style: italic;
  text-align: center;
  padding: 0 40px 0 40px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

@media (max-width: 768px) {
  #article .quote {
    hyphens: auto;
    word-break: break-word;
    overflow: break-word;
  }
}

#article .fig {
  text-align: center;
  font-family: "AvenirLtStd", Arial, sans-serif;
  line-height: 1.4;
  color: Gainsboro;
}

@media (max-width: 768px) {
  #article .fig {
    hyphens: auto;
    word-break: break-word;
    overflow: break-word;
  }
}

#article .fig a {
  color: gainsboro;
  font-weight: 600;
  text-decoration: underline;
}

#article .fig a:hover {
  color: #fff;
}

#article .figcaption {
  padding: 5px 0 5px 0;
  color: Gainsboro;
}

#article .figcaption a {
  color: gainsboro;
  font-weight: 600;
  text-decoration: underline;
}

#article .figcaption a:hover {
  color: #fff;
}

#article .figcaption a:hover {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

#article .small {
  font-size: 0.875rem;
  line-height: 1.4;
  font-style: italic;
  color: Gainsboro;
  margin-bottom: 0;
  text-align: center;
  padding: 0 20px 0 20px;
}

#article .article-item {
  position: relative;
  height: 380px;
  overflow: hidden;
}

#article .article-text {
  height: 200px;
}

#article .article-item figure {
  background: #fff;
  overflow: hidden;
  height: 330px;
  position: relative;
  margin: 0;
  background-color: #2f4156;
}

#article .article-item figure:hover img {
  opacity: 0.8;
  transition: 0.3s;
  background: #fff;
}

#article .article-item figure .link-preview,
#article .article-item figure .link-details {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  line-height: 1;
  text-align: center;
  width: 42px;
  height: 38px;
  background: #007dff;
  border-radius: 15%;
  transition: 0.3s;
}

#article .article-item figure .link-preview i,
#article .article-item figure .link-details i {
  font-family: "FontAwesome";
  padding-top: 4px;
  font-size: 1.875rem;
  vertical-align: middle;
  color: #fff;
}

#article .article-item figure .link-preview:hover,
#article .article-item figure .link-details:hover {
  background: #fff;
}

#article .article-item figure .link-preview:hover i,
#article .article-item figure .link-details:hover i {
  font-family: "FontAwesome";
  color: #007dff;
}

#article .article-item figure .link-preview {
  left: calc(50% - 21px);
  top: calc(50% - 21px);
}

#article .article-item figure .link-details {
  right: calc(50% - 21px);
  top: calc(50% - 21px);
}

#article .article-item figure:hover .link-preview {
  visibility: visible;
  left: calc(50% - 21px);
}

#article .article-item figure:hover .link-details {
  visibility: visible;
  right: calc(50% - 21px);
}

#article .article-item .article-info {
  background: #2f4156;
  text-align: center;
  padding: 10px 10px;
  height: 60px;
}

#article .article-item .article-info h4 {
  font-size: 1.125rem;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 0;
}

#article .article-item .article-info h4 a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

#article .article-item .article-info h4 a:hover {
  color: #007dff;
}

#article .article-item .article-info p {
  padding: 0;
  margin: 0;
  color: Gainsboro;
  font-weight: 400;
  text-align: center;
  font-size: 0.815rem;
  font-style: italic;
}

#article .container4 .small {
  font-size: 0.875rem;
  line-height: 1.4;
  font-style: italic;
  margin-bottom: 0;
  text-align: center;
  padding: 0 10px 0 0px;
}

#article .container4 ul {
  list-style: none;
  font-size: 0.9375rem;
  color: dimgray;
  padding: 0 10px 0 10px;
}

#article .container4 li {
  padding-left: 20px;
  padding-top: 3px;
  text-indent: -5px;
  line-height: 1.7;
  color: dimgray;
}

#article .article-item4 {
  position: relative;
  height: 320px;
  overflow: hidden;
}

#article .article-item4 figure {
  background: #fff;
  overflow: hidden;
  height: 235px;
  position: relative;
  margin: 0;
  background: #2f4156;
}

#article .article-item4 figure:hover img {
  opacity: 0.8;
  transition: 0.3s;
  background: #fff;
}

#article .article-item4 figure .link-preview,
#article .article-item4 figure .link-details {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  line-height: 1;
  text-align: center;
  width: 42px;
  height: 38px;
  background: #007dff;
  border-radius: 15%;
  transition: 0.3s;
}

#article .article-item4 figure .link-preview i,
#article .article-item4 figure .link-details i {
  font-family: "FontAwesome";
  padding-top: 4px;
  font-size: 1.875rem;
  vertical-align: middle;
  color: #fff;
}

#article .article-item4 figure .link-preview:hover,
#article .article-item4 figure .link-details:hover {
  background: #fff;
}

#article .article-item4 figure .link-preview:hover i,
#article .article-item4 figure .link-details:hover i {
  font-family: "FontAwesome";
  color: #007dff;
  text-decoration: none;
}

#article .article-item4 figure .link-preview {
  left: calc(50% - 21px);
  top: calc(50% - 21px);
}

#article .article-item4 figure .link-details {
  right: calc(50% - 21px);
  top: calc(50% - 21px);
}

#article .article-item4 figure:hover .link-preview {
  visibility: visible;
  left: calc(50% - 21px);
}

#article .article-item4 figure:hover .link-details {
  visibility: visible;
  right: calc(50% - 21px);
}

#article .article-item4 .article-info4 {
  background: #2f4156;
  text-align: center;
  padding: 5px 5px;
  height: 55px;
  border-radius: 0 0 3px 3px;
}

#article .article-item4 .article-info4 h4 {
  font-size: 1.125rem;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 0;
}

#article .article-item4 .article-info4 h4 a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

#article .article-item4 .article-info4 h4 a:hover {
  color: #007dff;
}

#article .article-item4 .article-info4 p {
  padding: 0;
  margin: 0;
  color: Gainsboro;
  font-weight: 400;
  text-align: center;
  font-size: 0.815rem;
  font-style: italic;
}

#article div.imageright {
  float: right;
  width: 50%;
  margin: 0.5em;
  padding: 0.5em;
}

#article div.imageright p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

#article .containerH .small {
  font-size: 0.875rem;
  line-height: 1.4;
  font-style: italic;
  color: Gainsboro;
  margin-bottom: 0;
  text-align: center;
  padding: 0 20px 0 20px;
}

#article .containerH ul {
  list-style: none;
  padding: 0 10px 0 10px;
}

#article .containerH li {
  padding-left: 20px;
  padding-top: 3px;
  text-indent: -5px;
  line-height: 1.7;
  color: Gainsboro;
}

#article .article-itemH {
  position: relative;
  height: 430px;
  overflow: hidden;
}

#article .article-textH {
  height: 200px;
}

#article .article-itemH figure {
  background: #fff;
  overflow: hidden;
  height: 330px;
  position: relative;
  margin: 0;
  background-color: #0c4272;
}

#article .article-itemH figure:hover img {
  transition: 0.3s;
  background: #fff;
}

#article .article-itemH figure .link-preview,
#article .article-itemH figure .link-details {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  line-height: 1;
  text-align: center;
  width: 42px;
  height: 38px;
  background: #007dff;
  border-radius: 15%;
  transition: 0.3s;
}

#article .article-itemH figure .link-preview i,
#article .article-itemH figure .link-details i {
  font-family: "FontAwesome";
  padding-top: 5px;
  font-size: 1.875rem;
  vertical-align: middle;
  color: #fff;
}

#article .article-itemH figure .link-preview:hover,
#article .article-itemH figure .link-details:hover {
  background: #fff;
}

#article .article-itemH figure .link-preview:hover i,
#article .article-itemH figure .link-details:hover i {
  font-family: "FontAwesome";
  color: #007dff;
}

#article .article-itemH figure .link-preview {
  left: calc(50% - 21px);
  top: calc(50% - 21px);
}

#article .article-itemH figure .link-details {
  right: calc(50% - 21px);
  top: calc(50% - 21px);
}

#article .article-itemH figure:hover .link-preview {
  visibility: visible;
  left: calc(50% - 21px);
}

#article .article-itemH figure:hover .link-details {
  visibility: visible;
  right: calc(50% - 21px);
}

#article .article-itemH .article-infoH {
  text-align: center;
  padding: 10px 10px;
  height: 110px;
}

#article .article-itemH .article-infoH h4 {
  font-size: 1.125rem;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 0;
}

#article .article-itemH .article-infoH h4 a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

#article .article-itemH .article-infoH h4 a:hover {
  color: #007dff;
}

#article .article-itemH .article-infoH p {
  padding: 0;
  margin: 0;
  color: Gainsboro;
  font-weight: 400;
  text-align: center;
  font-size: 0.815rem;
  font-style: italic;
}

/* Detail Section
--------------------------------*/

@media (min-width: 1024px) {
  #detail {
    padding: 90px 0 40px 0;
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
}

@media (max-width: 1024px) {
  #detail {
    padding: 90px 0 40px 0;
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
}

video {
  width: 100%;
  height: auto;
}

#detail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
}

#detail .container .buttons {
  text-align: center;
}

#detail .section-header {
  position: relative;
  z-index: 11; /* One higher than #article::before’s z-index:9 */
}

#detail .section-header h1::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

#detail .section-header h1::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #9caf33;
  bottom: 0;
  left: calc(50% - 20px);
}

#detail .section-header h1 {
  position: relative;
  color: Gainsboro;
  font-size: 2rem;
  line-height: 1.2;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 30px;
}

#detail .section-header h1 .smaller {
  font-size: 1.25rem;
  position: relative;
  line-height: 1;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 2px;
  margin-top: -2px;
}

#detail .container {
  position: relative;
  z-index: 10;
}

#detail .container .buttons {
  text-align: center;
}

@media (max-width: 768px) {
  #detail .container .buttons {
    display: none;
  }
}

#detail .blog-col {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

#detail .blog-col .img {
  position: relative;
}

#detail .blog-col .img img {
  border-radius: 4px 4px 0 0;
}

#detail .accent {
  color: Gainsboro;
  letter-spacing: 1px;
}

#detail .super {
  vertical-align: super;
  font-size: smaller;
}

#detail .smaller {
  font-size: 1.25rem;
  position: relative;
  line-height: 1.4;
  letter-spacing: 1px;
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

#detail h1 {
  color: Gainsboro;
  font-size: 2rem;
}

#detail h1::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

#detail h1::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #007dff;
  bottom: 0;
  left: calc(50% - 20px);
}

#detail h2 {
  text-align: left;
  font-weight: 700;
  font-size: 1.5rem;
  padding: 10px;
  margin: 20px 0 12px 0;
  color: Gainsboro;
  letter-spacing: 1px;
}

#detail h3 {
  text-align: left;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 10px;
  margin: 15px 0 12px 0;
  color: Gainsboro;
  letter-spacing: 1px;
}

#detail h3 a {
  color: Gainsboro;
}

#detail h3 a:hover {
  text-decoration: underline;
  color: #007dff;
}

#detail h4 {
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  padding: 10px;
  margin: 15px 0 12px 0;
  color: Gainsboro;
}

#detail .blog-col h2 a:hover {
  color: #0077b5;
}

#detail p {
  text-align: left;
  padding: 0 20px 0 20px;
  font-family: "AvenirLtStd", Arial, sans-serif;
  margin-bottom: 10px;
  font-weight: 400;
  color: Gainsboro;
}

#detail ul {
  list-style: none;
  padding: 0 10px 0 10px;
}

#detail li {
  padding-left: 20px;
  padding-top: 3px;
  text-indent: -7px;
  line-height: 1.7;
  color: Gainsboro;
  font-family: "AvenirLtStd", Arial, sans-serif;
  font-weight: 400;
}

#detail p a,
#detail li a
{
  color: Gainsboro;
  text-decoration: underline;
  font-weight: 600;
}

#detail p a:hover {
  color: #fff;
}

#detail p .text-center {
  text-align: center;
}

#detail p .italic {
  font-style: italic;
}

#detail .quote {
  color: Gainsboro;
  font-style: italic;
  text-align: center;
  padding: 0 40px 0 40px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

#detail .fig {
  text-align: center;
  font-family: "AvenirLtStd", Arial, sans-serif;
  line-height: 1.4;
  color: Gainsboro;
}

#detail .fig a {
  color: Gainsboro;
  text-decoration: underline;
}

#detail .fig a:hover {
  color: #fff;
}

#detail .figcaption {
  padding: 5px 0 5px 0;
  color: Gainsboro;
}

#detail .small {
  font-size: 0.875rem;
  line-height: 1.4;
  font-style: italic;
  color: Gainsboro;
  margin-bottom: 0;
  text-align: center;
  padding: 0 20px 0 20px;
}

#detail .article-item {
  position: relative;
  height: 380px;
  overflow: hidden;
}

#detail .article-text {
  height: 200px;
}

#detail .article-item figure {
  background: #fff;
  overflow: hidden;
  height: 330px;
  position: relative;
  margin: 0;
  background-color: #0c4272;
}

#detail .article-item figure:hover img {
  opacity: 0.8;
  transition: 0.3s;
  background: #fff;
}

#detail .article-item figure .link-preview,
#detail .article-item figure .link-details {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  line-height: 1;
  text-align: center;
  width: 42px;
  height: 38px;
  background: #007dff;
  border-radius: 15%;
  transition: 0.3s;
}

#detail .article-item figure .link-preview i,
#detail .article-item figure .link-details i {
  font-family: "FontAwesome";
  padding-top: 4px;
  font-size: 2.25rem;
  vertical-align: middle;
  color: #fff;
}

#detail .article-item figure .link-preview:hover,
#detail .article-item figure .link-details:hover {
  background: #fff;
}

#detail .article-item figure .link-preview:hover i,
#detail .article-item figure .link-details:hover i {
  font-family: "FontAwesome";
  color: #007dff;
}

#detail .article-item figure .link-preview {
  left: calc(50% - 21px);
  top: calc(50% - 21px);
}

#detail .article-item figure .link-details {
  right: calc(50% - 21px);
  top: calc(50% - 21px);
}

#detail .article-item figure:hover .link-preview {
  visibility: visible;
  left: calc(50% - 21px);
}

#detail .article-item figure:hover .link-details {
  visibility: visible;
  right: calc(50% - 21px);
}

#detail .article-item .article-info {
  background: #2f4156;
  text-align: center;
  padding: 10px 10px;
  height: 60px;
}

#detail .article-item .article-info h4 {
  font-size: 1.125rem;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 0;
}

#detail .article-item .article-info h4 a {
  color: #fff;
  text-decoration: underline;
}

#detail .article-item .article-info h4 a:hover {
  color: #007dff;
}

#detail .article-item .article-info p {
  padding: 0;
  margin: 0;
  color: Gainsboro;
  font-weight: 400;
  text-align: center;
  font-size: 0.815rem;
  font-style: italic;
}

#detail .container4 .small {
  font-size: 0.875rem;
  line-height: 1.4;
  font-style: italic;
  margin-bottom: 0;
  text-align: center;
  padding: 0 10px 0 0px;
}

#detail .container4 ul {
  list-style: none;
  font-size: 0.9375rem;
  color: dimgray;
  padding: 0 10px 0 10px;
}

#detail .container4 li {
  padding-left: 20px;
  padding-top: 3px;
  text-indent: -5px;
  line-height: 1.7;
  color: dimgray;
}

#detail .article-item4 {
  position: relative;
  height: 320px;
  overflow: hidden;
}

#detail .article-item4 figure {
  background: #fff;
  overflow: hidden;
  height: 235px;
  position: relative;
  margin: 0;
  background-color: #0c4272;
}

#detail .article-item4 figure:hover img {
  opacity: 0.8;
  transition: 0.3s;
  background: #fff;
}

#detail .article-item4 figure .link-preview,
#detail .article-item4 figure .link-details {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  line-height: 1;
  text-align: center;
  width: 42px;
  height: 38px;
  background: #007dff;
  border-radius: 15%;
  transition: 0.3s;
}

#detail .article-item4 figure .link-preview i,
#detail .article-item4 figure .link-details i {
  font-family: "FontAwesome";
  padding-top: 5px;
  font-size: 1.875rem;
  vertical-align: middle;
  color: #fff;
}

#detail .article-item4 figure .link-preview:hover,
#detail .article-item4 figure .link-details:hover {
  background: #fff;
}

#detail .article-item4 figure .link-preview:hover i,
#detail .article-item4 figure .link-details:hover i {
  font-family: "FontAwesome";
  color: #007dff;
  text-decoration: none;
}

#detail .article-item4 figure .link-preview {
  left: calc(50% - 21px);
  top: calc(50% - 21px);
}

#detail .article-item4 figure .link-details {
  right: calc(50% - 21px);
  top: calc(50% - 21px);
}

#detail .article-item4 figure:hover .link-preview {
  visibility: visible;
  left: calc(50% - 21px);
}

#detail .article-item4 figure:hover .link-details {
  visibility: visible;
  right: calc(50% - 21px);
}

#detail .article-item4 .article-info4 {
  background: #2f4156;
  text-align: center;
  padding: 5px 5px;
  height: 55px;
  border-radius: 0 0 3px 3px;
}

#detail .article-item4 .article-info4 h4 {
  font-size: 1.125rem;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 0;
}

#detail .article-item4 .article-info4 h4 a {
  color: #fff;
  text-decoration: underline;
}

#detail .article-item4 .article-info4 h4 a:hover {
  color: #fff;
  text-decoration: underline;
}

#detail .article-item4 .article-info4 p {
  padding: 0;
  margin: 0;
  color: Gainsboro;
  font-weight: 400;
  text-align: center;
  font-size: 0.815rem;
  font-style: italic;
}

#detail div.imageright {
  float: right;
  width: 50%;
  margin: 0.5em;
  padding: 0.5em;
}

#detail div.imageright p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

#detail .containerH .small {
  font-size: 0.875rem;
  line-height: 1.4;
  font-style: italic;
  color: Gainsboro;
  margin-bottom: 0;
  text-align: center;
  padding: 0 20px 0 20px;
}

#detail .containerH ul {
  list-style: none;
  padding: 0 10px 0 10px;
}

#detail .containerH li {
  padding-left: 20px;
  padding-top: 3px;
  text-indent: -5px;
  line-height: 1.7;
  color: Gainsboro;
}

#detail .article-itemH {
  position: relative;
  height: 430px;
  overflow: hidden;
}

#detail .article-textH {
  height: 200px;
}

#detail .article-itemH figure {
  background: #fff;
  overflow: hidden;
  height: 330px;
  position: relative;
  margin: 0;
  background-color: #0c4272;
}

#detail .article-itemH figure:hover img {
  opacity: 1;
  transition: 0.3s;
}

#detail .article-itemH figure .link-preview,
#detail .article-itemH figure .link-details {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  line-height: 1;
  text-align: center;
  width: 42px;
  height: 38px;
  background: #007dff;
  border-radius: 15%;
  transition: 0.3s;
}

#detail .article-itemH figure .link-preview i,
#detail .article-itemH figure .link-details i {
  font-family: "FontAwesome";
  padding-top: 4px;
  font-size: 2.25rem;
  vertical-align: middle;
  color: #fff;
}

#detail .article-itemH figure .link-preview:hover,
#detail .article-itemH figure .link-details:hover {
  background: #fff;
}

#detail .article-itemH figure .link-preview:hover i,
#detail .article-itemH figure .link-details:hover i {
  font-family: "FontAwesome";
  color: #007dff;
}

#detail .article-itemH figure .link-preview {
  left: calc(50% - 21px);
  top: calc(50% - 21px);
}

#detail .article-itemH figure .link-details {
  right: calc(50% - 21px);
  top: calc(50% - 21px);
}

#detail .article-itemH figure:hover .link-preview {
  visibility: visible;
  left: calc(50% - 21px);
}

#detail .article-itemH figure:hover .link-details {
  visibility: visible;
  right: calc(50% - 21px);
}

#detail .article-itemH .article-infoH {
  text-align: center;
  padding: 10px 10px;
  height: 110px;
}

#detail .article-itemH .article-infoH h4 {
  font-size: 1.125rem;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 0;
}

#detail .article-itemH .article-infoH h4 a {
  color: #fff;
  text-decoration: underline;
}

#detail .article-itemH .article-infoH h4 a:hover {
  color: #007dff;
}

#detail .article-itemH .article-infoH p {
  padding: 0;
  margin: 0;
  color: Gainsboro;
  font-weight: 400;
  text-align: center;
  font-size: 0.815rem;
  font-style: italic;
}


/* Call To Action Section
--------------------------------*/

@media (min-width: 1024px) {
  #call-to-action {
    background: #2f4156;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    padding: 20px 0;
  }
}

@media (max-width: 1024px) {
  #call-to-action {
    background: #2f4156;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    padding: 20px 0;
  }
}

#call-to-action h3 {
  color: gainsboro;
  font-size: 1.75rem;
  letter-spacing: 1px;
  margin-top: 15px;
}

#call-to-action p {
  color: Gainsboro;
}

#call-to-action .ctb-btn:hover {
  background: #007dff;
  border: 2px solid #007dff;
  text-decoration-line: none;
}

#call-to-action .ctb-btn {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 13px;
  border-radius: 25px;
  transition: 0.3s;
  margin-top: 10px;
  border: 2px solid Gainsboro;
  color: gainsboro;
}

/* Blog Link Section
--------------------------------*/

@media (min-width: 768px) {
  #blog-link {
    background: url("../img/bg10.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 30px 0 0 0;
    margin-bottom: 0;
    position: relative; /* To contain child elements properly */
    overflow: hidden; /* Ensures child elements do not overflow */
    background-attachment: scroll;
  }
}

@media (max-width: 768px) {
  #blog-link {
    background-color: #768828;
    padding: 10px 0;
  }
}

#blog-link h3 {
  color: gainsboro;
  font-size: 1.75rem;
  letter-spacing: 1px;
  margin-top: 15px;
}

#blog-link h3 .smaller {
  font-size: 1.125rem;
  position: relative;
  line-height: 1;
  letter-spacing: 1px;
  display: block;
  margin-top: 2px;
}

#blog-link p {
  color: Gainsboro;
}


#blog-link i {
  font-family: "FontAwesome";
  color: #fff;
  font-size: 1.875rem;
  font-weight: 400;
  display: inline-block;
}

#blog-link .icon-bottom i {
  font-family: "FontAwesome";
  position: relative;
  bottom: 20px;
}

#blog-link .icon-top i {
  font-family: "FontAwesome";
  position: relative;
  top: 10px;
}

#blog-link .blog-static-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 20px;
  overflow-x: auto;
  margin: 15px 0;
}

#blog-link .blog-static-grid .slide-owl-wrap {
  width: 150px;
  text-align: center;
}

#blog-link .slide-owl-wrap p {
  font-size: 0.815rem;
  margin-top: 5px;
}

#blog-link .slide-owl-wrap:hover p {
  color: #fff !important;
  text-decoration: none !important;
}

#blog-link .slide-owl-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 3px solid gainsboro;
}

/* Work Section
--------------------------------*/
#work {
  background-color: grey;
  padding: 20px 0 40px 0;
  position: relative;
  scroll-margin-top: 70px; /* Adjust based on header height */
}

#work::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
}

#work #work-flters {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
  text-align: center;
}

#work #work-flters i {
  font-family: "FontAwesome";
  font-size: 0.5rem;
  vertical-align: middle;
  line-height: 16px;
  font-weight: lighter;
}

#work #work-flters li {
  font-family: "Roboto", Arial, sans-serif;
  color: dimgray;
  cursor: pointer;
  font-weight: 700;
  margin: 15px 15px 15px 0;
  display: inline-block;
  padding: 10px 20px;
  font-size: 0.75rem;
  line-height: 16px;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: #f0f0f0;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

#work #work-flters li:hover,
#work #work-flters li.filter-active {
  background: #007dff;
  color: #fff;
}

#work #work-flters li:last-child {
  margin-right: 0;
}

#work .work-wrap {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

#work .work-wrap:hover {
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
  background: #fff;
}

#work .work-item {
  position: relative;
  height: 490px;
  overflow: hidden;
}

#work .work-item figure {
  background: #000;
  overflow: hidden;
  height: 370px;
  position: relative;
  border-radius: 4px 4px 0 0;
  margin: 0;
  background-color: #fff;
}

#work .work-item figure:hover img {
  opacity: 0.8;
  transition: 0.3s;
  background: #fff;
}

#work .work-item figure .link-preview,
#work .work-item figure .link-details {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  line-height: 1;
  text-align: center;
  width: 63px;
  height: 63px;
  padding-top: 12px;
  border-radius: 20%;
  background: #fff;
  left: calc(50% - 32px);
  bottom: -30px;
  transition: 0.3s;
}

#work .work-item figure .link-preview i,
#work .work-item figure .link-details i {
  font-family: "FontAwesome";
  padding-left: 7px;
  font-size: 2.375rem;
  color: #007dff;
}

#work .work-item figure .link-preview:hover,
#work .work-item figure .link-details:hover {
  background-color: #007dff;
}

#work .work-item figure .link-preview:hover i,
#work .work-item figure .link-details:hover i {
  font-family: "FontAwesome";
  color: #fff;
}

#work .work-item figure .link-preview {
  left: calc(50% - 32px);
  top: calc(50% - 32px);
}

#work .work-item figure .link-details {
  right: calc(50% - 21px);
  top: calc(50% - 32px);
}

#work .work-item figure:hover .link-preview {
  visibility: visible;
  left: calc(50% - 32px);
}

#work .work-item figure:hover .link-details {
  visibility: visible;
  right: calc(50% - 32px);
}

#work .work-item .work-info {
  background: #fff;
  text-align: center;
  padding: 30px;
  height: 90px;
  border-radius: 0 0 3px 3px;
}

#work .work-item .work-info h4 {
  font-size: 1.125rem;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 0;
}

#work .work-item .work-info h4 a {
  color: dimgray;
}

#work .work-item .work-info h4 a:hover {
  color: #007dff;
}

#work .work-item .work-info p {
  padding: 0;
  margin: 0;
  color: dimgray;
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
}

/* Engagement Section
--------------------------------*/
@media (min-width: 768px) {
  #engagement:first-of-type {
    padding: 90px 0 40px 0;
  }
  #engagement {
    padding: 40px 0 40px 0;
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
}

@media (max-width: 768px) {
  #engagement {
    padding: 90px 0 40px 0;
    background: radial-gradient(circle at top, #1d3451, #142438);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
}

#engagement::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
}

#engagement .section-header h1::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

#engagement .section-header h1::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #9caf33;
  bottom: 0;
  left: calc(50% - 20px);
}

#engagement .container {
  position: relative;
  z-index: 10;
  height: 100%;
}

#engagement h4 {
  font-size: 1.5rem;
  line-height: 26px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 5px;
  padding-bottom: 0;
  color: Gainsboro;
}

#engagement p {
  text-align: left;
  padding: 0 20px 0 20px;
  font-family: "AvenirLtStd", Arial, sans-serif;
  margin-bottom: 10px;
  font-weight: 400;
  color: Gainsboro;
  line-height: 1.7;
}

#engagement .engagement-col ul {
  list-style: none;
}

#engagement .engagement-col li {
  padding-left: 21px;
  padding-top: 5px;
  text-indent: -5px;
  line-height: 1.7;
  color: Gainsboro;
  font-family: "AvenirLtStd", Arial, sans-serif;
  font-weight: 400;
}

#engagement h1 {
  color: Gainsboro;
}

#engagement h2 {
  color: Gainsboro;
  margin-bottom: 30px;
  font-size: 2.375rem;
  font-weight: 700;
}

#engagement-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px; /* Space between grid items */
}

#engagement-items .engagement-col {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-bottom: 20px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(18, 63, 105, 0.08);
  position: relative;
}

#engagement .engagement-col .img img {
  border-radius: 4px 4px 0 0;
}

#engagement-items .engagement-col {
  /* Remove the following lines if present */
  /* float: none !important; */
  /* display: block !important; */
  /* Retain other necessary styles */
  box-sizing: border-box;
  width: 100%; /* Single column */
  margin-bottom: 20px;
}

@media (max-width: 788px) {
  #engagement-items .engagement-col {
    width: 100%; /* Single column */
    margin-left: 0;
    margin-right: 0;
  }
}

#engagement .engagement-item .engagement-info h4 {
  font-size: 1.5rem;
  line-height: 26px;
  font-weight: 700;
  padding-bottom: 0;
  color: Gainsboro;
  margin-top: 5px;
  margin-bottom: 5px;
}

#engagement .engagement-item .engagement-info p {
  padding: 0;
  margin: 0;
  color: Gainsboro;
  font-size: 0.875rem;
  text-align: center;
}

#engagement #engagement-flters {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
  text-align: center;
  vertical-align: middle;
}

#engagement #engagement-flters li {
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
  font-weight: 700;
  margin: 15px 20px 30px 0;
  display: inline-block;
  padding: 7px 20px;
  font-size: 0.75rem;
  line-height: 16px;
  color: gainsboro;
  border-radius: 16px;
  text-transform: uppercase;
  background: none;
  margin-bottom: 5px;
  border: 1.5px solid gainsboro;
  transition: all 0.3s ease-in-out;
}

#engagement #engagement-flters i {
  font-family: "FontAwesome";
  font-size: 0.5rem;
  vertical-align: middle;
  line-height: 16px;
  font-weight: lighter;
}

#engagement #engagement-flters li:hover {
  background: #007dff;
  border: 1.5px solid #007dff;
  color: gainsboro;
}

/* Active filter styling */
#engagement #engagement-flters li.active {
  background: #007dff;
  border: 1.5px solid #007dff;
  color: #fff;
}

#engagement #engagement-flters li:last-child {
  margin-right: 0;
}

#engagement #engagement-flters li:first-child {
  margin-left: 0;
}
#engagement .engagement-wrap {
  box-shadow: black;
  transition: 0.3s;
}

#engagement .engagement-wrap:hover {
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
  background: #fff;
}

#engagement .engagement-item {
  position: relative;
  height: 525px;
  overflow: hidden;
}

#engagement .engagement-item figure {
  background: #000;
  overflow: hidden;
  height: 260px;
  position: relative;
  margin: 0;
  background-color: #2f4156;
}

#engagement .engagement-item figure:hover img {
  opacity: 0.8;
  transition: 0.3s;
  background: #2f4156;
}

#engagement .engagement-item figure .link-preview,
#engagement .engagement-item figure .link-details {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  line-height: 1;
  text-align: center;
  width: 63px;
  height: 63px;
  padding-top: 12px;
  border-radius: 20%;
  background: #fff;
  left: calc(50% - 32px);
  bottom: -30px;
  transition: 0.3s;
}

#engagement .engagement-item figure .link-preview i,
#engagement .engagement-item figure .link-details i {
  font-family: "FontAwesome";
  padding-left: 7px;
  font-size: 2.375rem;
  color: #007dff;
}

#engagement .engagement-item figure .link-preview:hover,
#engagement .engagement-item figure .link-details:hover {
  background-color: #007dff;
}

#engagement .engagement-item figure .link-preview:hover i,
#engagement .engagement-item figure .link-details:hover i {
  font-family: "FontAwesome";
  color: #fff;
}

#engagement .engagement-item figure .link-preview {
  left: calc(50% - 32px);
  top: calc(50% - 32px);
}

#engagement .engagement-item figure .link-details {
  right: calc(50% - 21px);
  top: calc(50% - 32px);
}

#engagement .engagement-item figure:hover .link-preview {
  visibility: visible;
  left: calc(50% - 32px);
}

#engagement .engagement-item figure:hover .link-details {
  visibility: visible;
  right: calc(50% - 32px);
}

#engagement .engagement-item .engagement-info {
  background: #2f4156;
  text-align: center;
  padding: 20px;
  height: 275px;
}

#engagement a {
  color: white;
  font-weight: 600;
}

#engagement a:hover {
  text-decoration: underline;
}

#engagement .cta-btn {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border: 2px solid #D3D3D3;
  color: #D3D3D3;
}

#engagement .cta-btn a {
  color: #D3D3D3;
  text-decoration-line: none;
}

#engagement .cta-btn:hover {
  background: #007dff;
  border: 2px solid #007dff;
  text-decoration-line: none !important;
  color: #D3D3D3;
}

/* Portfolio Section
--------------------------------*/
#portfolio {
  background: lightblue;
  padding: 90px 0 40px 0;
  position: relative;
}

#portfolio::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
}

#portfolio p {
  color: dimgray;
}

#portfolio {
  min-height: 2000px; /* or based on estimated size */
}

#portfolio #portfolio-flters,
#work #portfolio-flters {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
  text-align: center;
  vertical-align: middle;
}

#portfolio .section-header h1 .smaller
#work .section-header h1 .smaller {
  font-size: 1.125rem;
  position: relative;
  line-height: 1;
  letter-spacing: 1px;
  display: block;
  margin-top: 2px;
}

#portfolio #portfolio-flters li,
#work #portfolio-flters li {
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
  font-weight: 700;
  margin: 15px 20px 30px 0;
  display: inline-block;
  padding: 5px 20px;
  font-size: 0.75rem;
  line-height: 16px;
  color: #808080;
  border-radius: 16px;
  text-transform: uppercase;
  background: none;
  margin-bottom: 5px;
  border: 1.5px solid #808080;
  transition: all 0.3s ease-in-out;
}

#portfolio #portfolio-flters i,
#work #portfolio-flters i {
  font-family: "FontAwesome";
  font-size: 0.5rem;
  vertical-align: middle;
  line-height: 16px;
}

#portfolio #portfolio-flters li:hover,
#work #portfolio-flters li:hover {
  background: #007dff;
  border: 1.5px solid #007dff;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

#work #portfolio-flters li:hover a {
  color: #fff !important;
  transition: all 0.3s ease-in-out;
}

#work #portfolio-flters a {
  color: #808080 !important;
  text-decoration: none;
}

#portfolio #portfolio-flters li.filter-active
 {
  background: #007dff;
  border: 1.5px solid #007dff;
  color: #fff;
}

#portfolio #portfolio-flters li:last-child,
#work #portfolio-flters li:last-child {
  margin-right: 0;
}

#portfolio .portfolio-wrap {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
  background: #fff;
  transition: 0.3s;
}

#portfolio .portfolio-wrap:hover {
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
}

#portfolio .portfolio-intro {
  position: relative;
  overflow: hidden;
}

#portfolio .portfolio-item {
  position: relative;
  height: 490px;
  overflow: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#portfolio .portfolio-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 565 / 850;
  display: block;
}

#portfolio .portfolio-text {
  height: 160px;
}

#portfolio .portfolio-item figure {
  background: #fff;
  overflow: hidden;
  height: 370px;
  position: relative;
  border-radius: 4px 4px 0 0;
  margin: 0;
  background-color: #fff;
}

#portfolio .portfolio-item figure:hover img {
  transition: 0.3s;
  background: #fff;
}

#portfolio .portfolio-item figure .link-preview,
#portfolio .portfolio-item figure .link-details {
  visibility: hidden;
  position: absolute;
  display: flex; /* Use Flexbox */
  justify-content: center; /* Center icon horizontally */
  align-items: center; /* Center icon vertically */
  width: 63px; /* Set exact width */
  height: 63px; /* Set exact height */
  border-radius: 20%; /* Ensure button is circular */
  background: #fff;
  left: calc(50% - 31.5px); /* Center horizontally */
  bottom: calc(12% - 31.5px); /* Center vertically */
  transition: 0.3s; /* For hover effects */
}

#portfolio .portfolio-item figure .link-preview i,
#portfolio .portfolio-item figure .link-details i {
  font-family: "FontAwesome";
  font-size: 2.6rem;
  color: #007dff;
  line-height: 1; /* Reset line-height */
  margin: 0; /* Reset margins */
  position: relative; /* Ensure alignment is relative to container */
  top: 0; /* Remove unnecessary offsets */
  transform: translateX(1px);
}


#portfolio .portfolio-item figure .link-preview:hover,
#portfolio .portfolio-item figure .link-details:hover {
  background-color: #007dff;
  text-decoration: none;
}

#portfolio .portfolio-item figure .link-preview:hover i,
#portfolio .portfolio-item figure .link-details:hover i {
  font-family: "FontAwesome";
  color: #fff;
}

#portfolio .portfolio-item figure:hover .link-preview {
  visibility: visible;
}

#portfolio .portfolio-item figure:hover .link-details {
  visibility: visible;
}

#portfolio .portfolio-item .portfolio-info {
  background: #fff;
  text-align: center;
  padding: 20px 10px;
  height: 90px;
  border-radius: 0 0 3px 3px;
}

#portfolio .portfolio-item .portfolio-info h4 {
  font-size: 1.125rem;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 0;
  color: dimgray;
}

#portfolio h4 {
  color: dimgray;
}

#portfolio .portfolio-item .portfolio-info h4 a {
  color: dimgray;
}

#portfolio .portfolio-item .portfolio-info h4 a:hover {
  color: #007dff;
}

#portfolio .portfolio-item .portfolio-info p {
  padding: 0;
  margin: 0;
  color: dimgray;
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
}

/* Clients Section
--------------------------------*/

#clients {
  padding: 30px 0 40px 0;
  background: #2f4156;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
}

#clients h3 {
  color: gainsboro;
  font-size: 1.75rem;
  letter-spacing: 1px;
  margin-top: 15px;
}

#clients img {
  max-width: 100%;
  padding: 15px 0;
  padding-right: 15px;
}

#clients img:hover {
  opacity: 1;
}

#clients .owl-nav,
#clients .owl-dots {
  margin-top: 5px;
  text-align: center;
}

#clients .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 20%;
  background-color: #ddd;
}

#clients .owl-dot.active {
  background-color: #356998;
}

#clients p {
  color: Gainsboro;
}


/* articles-carousel Section
--------------------------------*/
#articles-carousel {
  padding: 60px 0 0 0;
  background-color: #144271;
}

@media (max-width: 768px) {
  #articles-carousel {
    display: none;
  }
}

#articles-carousel p {
  font-size: 0.815rem;
  font-weight: 400;
  text-align: center;
  color: #fff;
  transition: 0.3s;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 2px;
}

#articles-carousel p:hover {
  color: #007dff;
}

#articles-carousel .owl-nav,
#articles-carousel .owl-dots {
  margin-top: 5px;
  text-align: center;
}

#articles-carousel .owl-dot {
  display: none;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 20%;
  background-color: #ddd;
}

#articles-carousel .owl-dot.active {
  background-color: #356998;
}

#articles-carousel i {
  font-family: "FontAwesome";
  color: #fff;
  font-size: 1.875rem;
  font-weight: 400;
  display: inline-block;
}

#articles-carousel .icon-bottom i {
  font-family: "FontAwesome";
  position: relative;
  bottom: 20px;
}

#articles-carousel .icon-top i {
  font-family: "FontAwesome";
  position: relative;
  top: 10px;
}
/* index-articles-carousel Section
--------------------------------*/

#index-articles-carousel {
  padding: 0px 0 0 0;
}
#index-articles-carousel p {
  font-size: 0.815rem;
  font-weight: 700;
  text-align: center;
  color: Gainsboro;
  transition: 0.3s;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 2px;
}

@media (max-width: 768px) {
  #index-articles-carousel p {
    font-size: 0.875rem;
  }
}

#index-articles-carousel p {
  color: Gainsboro;
}

#index-articles-carousel p:hover {
  color: #fff;
}

#index-articles-carousel a:hover {
  text-decoration: none;
  color: #fff;
}

#index-articles-carousel img:hover {
  opacity: 0.8;
  border: 3px Gainsboro;
  box-shadow: 0 0 100px Gainsboro;
  background: #fff;
}

#index-articles-carousel i {
  font-family: "FontAwesome";
  color: #fff;
  font-size: 1.875rem;
  font-weight: 400;
  display: inline-block;
}

#index-articles-carousel .icon-bottom i {
  font-family: "FontAwesome";
  position: relative;
  bottom: 20px;
}

#index-articles-carousel .icon-top i {
  font-family: "FontAwesome";
  position: relative;
  top: 10px;
}
#index-articles-carousel .owl-nav,
#index-articles-carousel .owl-dots {
  margin-top: 5px;
  text-align: center;
}

#index-articles-carousel .owl-dot {
  display: none;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 20%;
  background-color: #ddd;
}

#index-articles-carousel .owl-dot.active {
  background-color: #9caf33;
}
/* Contact Section
--------------------------------*/
#contact {
  padding: 60px 0;
}

#contact .contact-info {
  margin-bottom: 20px;
  text-align: center;
}

#contact .contact-info i {
  font-family: "FontAwesome";
  font-size: 3rem;
  display: inline-block;
  margin-bottom: 10px;
  color: #356998;
}

#contact .contact-info address,
#contact .contact-info p {
  margin-bottom: 15px;
  color: dimgray;
}

#contact .contact-info h3 {
  font-size: 1.125rem;
  margin-bottom: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #282828;
}

#contact .contact-info a {
  color: dimgray;
}

#contact .contact-info a:hover {
  color: #007dff;
}

#contact .contact-address,
#contact .contact-phone,
#contact .contact-email {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  #contact .contact-address,
  #contact .contact-phone,
  #contact .contact-email {
    padding: 20px 0;
  }
}

@media (min-width: 768px) {
  #contact .contact-phone {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
}

#article .form #sendmessage {
  color: #007dff;
  border: 1px solid #007dff;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#article .form #errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#article .form #sendmessage.show,
#article .form #errormessage.show,
#article .form .show {
  display: block;
}

#article .form .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 0.875rem;
}

#article .form input,
#article .form textarea {
  padding: 10px 14px;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.9375rem;
}

#article .form button[type="submit"] {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  margin-bottom: 15px;

  color: gainsboro;
  background: none;
  border: 2px solid gainsboro;
}

#article .form button[type="submit"]:hover {
  color: gainsboro;
  background: #007dff;
  border: 2px solid #007dff;
  text-decoration-line: none;
}

/*--------------------------------------------------------------
# Sitemap
--------------------------------------------------------------*/
#sitemap {
  background: #000;
  padding: 0 0 30px 0;
  color: Gainsboro;
  font-size: 0.875rem;
}

#sitemap .sitemap-top {
  background: #000;
  padding: 60px 0 30px 0;
}

#sitemap .sitemap-top .sitemap-info {
  margin-bottom: 30px;
}

#sitemap .sitemap-top .sitemap-info h3 {
  font-size: 2rem;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 10px;
  line-height: 1;
  font-family: "AvenirLtStd", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 3px;
  border-left: 4px solid #356998;
}

#sitemap .sitemap-top .sitemap-info p {
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 0;
  font-family: "AvenirLtStd", Arial, sans-serif;
  color: Gainsboro;
}

#sitemap .sitemap-top .social-links a {
  font-size: 1.125rem;
  display: inline-block;
  background: dimgray;
  color: Gainsboro;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 20%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#sitemap .sitemap-top .social-links a:hover {
  background: #007dff;
  color: #fff;
}

#sitemap .sitemap-top h4 {
  font-size: 0.875rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
}

#sitemap .sitemap-top h4::before,
#sitemap .sitemap-top h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
}

#sitemap .sitemap-top h4::before {
  right: 0;
  background: #555;
}

#sitemap .sitemap-top h4::after {
  background: #356998;
  width: 60px;
}

#sitemap .sitemap-top .sitemap-links ul {
  list-style: none;
  border-bottom: 1px solid #333333;
  padding: 10px 0;
  margin: 0; /* Remove any default margin */
}

#sitemap .sitemap-top .sitemap-links ul li {
  position: relative; /* Base positioning for all <li> */
  padding-left: 15px; /* Reserve space for the icon alignment */
}

#sitemap .sitemap-top .sitemap-links ul li i.ion-ios-arrow-right {
  position: absolute; /* Make the icon independent of text flow */
  left: 0; /* Align icon to the left edge of the <li> */
  color: #ddd; /* Icon color */
  font-size: 1rem; /* Adjust icon size if needed */
}

#sitemap .sitemap-top .sitemap-links ul li i.ion-ios-arrow-right + a {
  padding-left: 5px; /* Add spacing between the icon and the text */
}

#sitemap .sitemap-top .sitemap-links ul li a {
  display: inline-block; /* Ensure text behaves properly */
  color: Gainsboro; /* Text color */
  text-decoration: none; /* Remove underline */
  width: 100%; /* Ensure the link takes full width for alignment */
}

#sitemap .sitemap-top .sitemap-links ul li:first-child {
  padding-top: 0; /* Optional: No extra padding for the first child */
}

#sitemap .sitemap-top .sitemap-links ul a:hover {
  color: white; /* Change text color on hover */
  text-decoration: underline;
}

#sitemap .sitemap-top .sitemap-contact {
  margin-bottom: 15px;
}

#sitemap .sitemap-top .sitemap-contact p {
  line-height: 26px;
}

#sitemap .sitemap-top .sitemap-newsletter {
  margin-bottom: 15px;
}

#sitemap .sitemap-top .sitemap-newsletter input[type="email"] {
  border: 0;
  padding: 6px 8px;
  width: 65%;
}

#sitemap .sitemap-top .sitemap-newsletter input[type="submit"] {
  background: #356998;
  border: 0;
  width: 35%;
  padding: 6px 0;
  text-align: center;
  color: #fff;
  transition: 0.3s;
  cursor: pointer;
}

#sitemap .sitemap-top .sitemap-newsletter input[type="submit"]:hover {
  background: #13a456;
}

#sitemap .copyright {
  text-align: center;
  padding-top: 30px;
}

#sitemap .credits {
  text-align: center;
  font-size: 0.875rem;
  color: #ddd;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #000;
  padding: 0 0 30px 0;
  color: Gainsboro;
  font-size: 0.875rem;
  margin-top: -1px;
  content-visibility: auto;
  contain-intrinsic-size: 300px;
  min-height: 200px;
}

#footer p {
  font-size: 0.875rem;
  line-height: 1.7;
  font-family: "AvenirLtStd", Arial, sans-serif;
}

#footer .footer-top {
  background: #1111;
  padding: 60px 0 30px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 15px;
}

#footer .footer-top .footer-info p {
  font-size: 0.875rem;
  line-height: 1.7;

  font-family: "AvenirLtStd", Arial, sans-serif;
  color: Gainsboro;
}

#footer .footer-top .social-links a {
  font-size: 1.375rem;
  display: inline-block;
  background: dimgray;
  color: Gainsboro;
  line-height: 1; /* Lowered from 1.7 */
  padding: 8px 8px;
  margin-right: 4px;
  border-radius: 20%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #66B1FF;
  color: #fff;
}

#footer .footer-top h4 {
  font-size: 1.25rem;
  letter-spacing: 1px;
  font-weight: bold;
  color: Gainsboro;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 5px;
}

#footer .footer-top h4::before,
#footer .footer-top h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
}

#footer .footer-top h4::before {
  right: 0;
  background: #555;
}

#footer .footer-top h4::after {
  background: #356998;
  width: 60px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 1px 0px;
  line-height: 1.6;
  margin: 0; /* Remove any default margin */
}

#footer .footer-top .footer-links ul li {
  padding: 1px 0;
  position: relative; /* Allow positioning of child elements */
}

#footer .footer-top .footer-links ul li i {
  font-family: "FontAwesome";
  position: absolute; /* Position the icon absolutely */
  left: 0; /* Align the icon to the left of the list item */
  top: 0; /* Align with the top of the text */
  width: 5px; /* Reserve space for the icon */
  text-align: center; /* Center the icon horizontally in its reserved space */
  color: Gainsboro; /* Icon color */
}

#footer .footer-top .footer-links ul li a {
  display: block; /* Ensure proper wrapping of text */
  padding-left: 13px; /* Add padding to align text after the icon */
  text-indent: 0; /* Reset text indentation */
  color: Gainsboro;
  font-weight: normal;
  text-decoration: none;
}

#footer .footer-top .footer-links ul li a:hover {
  color: white;
  text-decoration: underline;
}

#footer .footer-top .footer-links ul li a:hover {
  color: white;
  text-decoration: underline;
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact p {
  line-height: 1.6;
}

#footer .footer-top .footer-contact p a {
  color: gainsboro;
  font-weight: 500;
  text-decoration: none;
}

#footer .footer-top .footer-contact p a:hover {
  color: white;
  text-decoration: underline;
}

#footer .footer-top .footer-contact p a:hover {
  color: #fff;
}

#footer .copyright {
  text-align: center;
  padding-top: 30px;
}

#footer .credits {
  text-align: center;
  font-size: 0.875rem;
  color: #ddd;
}
#footer .footer-btn {
  font-family: "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0, 5px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.3s;
  margin-top: 10px;
  border: 2px solid dimgray;
  color: #fff;
  background: dimgray;
  text-decoration-line: none;
}

#footer .footer-btn:hover {
  color: #fff;
  background: #66B1FF;
  border: 2px solid #66B1FF;
  text-decoration-line: none;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn {
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.btn-default {
  color: dimgray;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: dimgray;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #fff;
  border-color: #ccc;
}
.btn-default .badge {
  color: #fff;
  background-color: dimgray;
}
.btn-primary {
  color: #fff;
  background-color: #3d3935;
  border-color: #3d3935;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: dimgray;
  border-color: dimgray;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: dimgray;
  border-color: dimgray;
}
.btn-primary .badge {
  color: #3d3935;
  background-color: #fff;
}
.btn-success {
  color: #fff;
  background-color: #789d4a;
  border-color: #789d4a;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  color: #fff;
  background-color: #6b8c42;
  border-color: #6b8c42;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #6b8c42;
  border-color: #6b8c42;
}
.btn-success .badge {
  color: #789d4a;
  background-color: #fff;
}
.btn-info {
  color: #fff;
  background-color: #6787b7;
  border-color: #6787b7;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #5679af;
  border-color: #5679af;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #5679af;
  border-color: #5679af;
}
.btn-info .badge {
  color: #6787b7;
  background-color: #fff;
}
.btn-warning {
  color: #fff;
  background-color: #eca154;
  border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #fff;
  background-color: #e9943d;
  border-color: #e9943d;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #e9943d;
  border-color: #e9943d;
}
.btn-warning .badge {
  color: #eca154;
  background-color: #fff;
}
.btn-danger {
  color: #fff;
  background-color: #c26e60;
  border-color: #c26e60;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  color: #fff;
  background-color: #bb5d4e;
  border-color: #bb5d4e;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #bb5d4e;
  border-color: #bb5d4e;
}
.btn-danger .badge {
  color: #c26e60;
  background-color: #fff;
}
.btn-link {
  font-weight: normal;
  color: #337ab7;
  border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
  color: #23527c;
  text-decoration: underline;
  background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
  color: #777;
  text-decoration: none;
}
.btn-filter {
  position: relative;
  overflow: hidden;
  color: dimgray;
  background-color: #fff;
  border-color: transparent;
}
.btn-filter::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 6px 12px;
  color: #37474f;
  -webkit-transform-origin: -25% 50%;
  transform-origin: -25% 50%;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
  -webkit-transition: -webkit-transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
}
.btn-filter:hover,
.btn-filter:focus,
.btn-filter.focus,
.btn-filter:active,
.btn-filter.active,
.open > .dropdown-toggle.btn-filter {
  color: dimgray;
  background-color: transparent;
  border-color: transparent;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.btn-filter:hover::after,
.btn-filter:focus::after,
.btn-filter.focus::after,
.btn-filter:active::after,
.btn-filter.active::after,
.open > .dropdown-toggle.btn-filter::after {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
}
.btn-submit {
  color: dimgray;
  background-color: #fff;
  border-color: transparent;
}
.btn-submit:hover,
.btn-submit:focus,
.btn-submit.focus,
.btn-submit:active,
.btn-submit.active,
.open > .dropdown-toggle.btn-submit {
  color: dimgray;
  background-color: transparent;
  border-color: #adadad;
}
.btn-round {
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
}
/* Label */
.label-default {
  background-color: #777;
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #5e5e5e;
}
.label-primary {
  background-color: #3d3935;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: dimgray;
}
.label-success {
  background-color: #789d4a;
}
.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #6b8c42;
}
.label-info {
  background-color: #6787b7;
}
.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #5679af;
}
.label-warning {
  background-color: #eca154;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #e9943d;
}
.label-danger {
  background-color: #c26e60;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #bb5d4e;
}