:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey: rgb(81,76,77);
  --color-light-grey: #c0c0c0;
  --color-dark-grey: #333333;
  --color-darker-grey: #191919;
  --color-orange: rgb(240, 82, 35);

  --color-black-semi-transparent: rgba(0, 0, 0, 0.5);
  --color-white-semi-transparent: rgba(255, 255, 255, 0.5);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: 'Segoe UI', 'Arial', sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-align: justify;
}

a {
  color: var(--color-orange);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-white);
}

.turret {
  font-family: 'Turret Road', sans-serif;
}

.orange {
  color: var(--color-orange);
}

.vh-100x {
  min-height: calc(100vh - 200px);
}

.btn-link {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--color-white);
  color: var(--color-white);
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  position: relative;
  background: transparent;
}

.btn-link:hover {
  background-color: var(--color-white);
  color: var(--color-black);
  text-shadow: 0 0 0 rgba(0,0,0,0); /* Ensures no fallback */
}

/* Navbar */

.navbar {
  transition: all 0.4s ease;
  padding: 1.2rem 1rem;
  background-color: transparent;
  z-index: 999;
}

.navbar.scrolled {
  background-color: var(--color-black) !important;
  padding: 0.6rem 1rem;
}

.navbar-brand,
.nav-link {
  color: #ffffff !important;
}

.nav-item2 {
  padding: 8px;
}

.nav-link2 {
  color: #ffffff !important;
  padding: 5px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--color-orange) !important;
}

.nav-link2:hover {
  color: var(--color-orange) !important;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  height: 60px;
}

.navbar-logo {
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Black background for collapsed navbar */
@media (max-width: 991.98px) {
  .navbar {
    background-color: var(--color-black) !important;
  }
  .nav-link {
    text-align: right;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
  }

}

/* White hamburger icon */
.navbar-toggler {
  border: none;
  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Hero Section */

.hero-section:not(.half-hero) {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.hero-bg.active {
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 2rem;
  background-color: var(--color-black-semi-transparent);
}

.hero-content h1 {
  color: var(--color-orange);
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 700;
}

.hero-quotes {
  margin-top: 1rem;
  font-size: clamp(1rem, 2vw, 2rem);
  min-height: 4em;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  font-style: italic;
}

.hero-quotes.active {
  opacity: 1;
}

.hero-subtitle {
  margin-top: 1rem;
  font-size: clamp(1rem, 2vw, 2rem);
  min-height: 4em;
  transition: opacity 3s ease-in-out;
  color: var(--color-grey);
}

.section {
  position: relative;
  background-color: var(--color-black);
  color: var(--color-white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section:nth-of-type(even) {
  background-color: var(--color-dark-grey);
}

.section-cont {
  padding-top: 100px;
  padding-bottom: 120px;
}

.scroll-down {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgb(240, 82, 35);
  color: white;
  text-align: center;
  line-height: 48px;
  font-size: 20px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  z-index: 10;
}

.scroll-down:hover {
  background-color: rgb(81, 76, 77);
}

.scroll-up {
  position: absolute;
  bottom: 20px;
  right: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgb(240, 82, 35);
  color: white;
  text-align: center;
  line-height: 48px;
  font-size: 20px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  z-index: 10;
}

.scroll-up:hover {
  background-color: rgb(81, 76, 77);
}


.footer {
  background-color: var(--color-black);
  color: var(--color-orange);
}

.footer-brand {
  font-family: Turret Road;
}

.footer-invest{
  background-color: var(--color-white);
}

.footer-invest img{
  max-width: 100%;
  max-height: 100px;
}

.half-hero {
  height: 50vh;
}

.half-hero {
  height: 50vh;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
}

.parallax-scroll {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; /* keep default centered */
  min-height: 100vh;
  z-index: 1;
  will-change: background-position; /* smoother */
}

.horizontal-cover {
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
}


#section1 {
  background-image: url("../imgs/section_01.png");
  min-height: calc(100vh); 
}

#section2 {
  background-image: url("../imgs/section_02.png");
  min-height: calc(100vh - 60px); 
}

.footer-contact {
  background-color: var(--color-grey);
  color: var(--color-white);
  padding: 60px 20px;
}


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

ul.contact-info li {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.about1 {
  background-image: url("../imgs/about_01.png");
  min-height: calc(100vh); 
}

.image-div {
  background-size: cover;
  background-position: center;
}

#about1_1 {
  background-image: url("../imgs/about_02_01.png");
  min-height: 250px;
}

#about1_2 {
  background-image: url("../imgs/about_02_02.png");
  min-height: 250px;
}

#about3_1 {
  background-image: url("../imgs/about_03_01.jpg");
  min-height: 250px;
  border: 4px solid var(--color-black);
}
#about3_2 {
  background-image: url("../imgs/about_03_02.jpg");
  min-height: 250px;
  border: 4px solid var(--color-black);
}
#about3_3 {
  background-image: url("../imgs/about_03_03.jpg");
  min-height: 250px;
  border: 4px solid var(--color-black);
}


#about4_1 {
  border: 4px solid var(--color-black);
  text-align: center;
}
#about4_1 img{
  max-height: 70px;
  max-width: fit-content;
}

#about4_2 {
  border: 4px solid var(--color-black);
  text-align: center;
}
#about4_3 {
  border: 4px solid var(--color-black);
  text-align: center;
}
#about4_3 img{
  max-height: 70px;
  max-width: fit-content;
}

.picture-div img {
  max-width: 100%;
  height: auto;
}

#about4_5 {
  background-image: url("../imgs/about_04_05.jpg");
  min-height: 250px;
  border: 4px solid var(--color-black);
}
#about4_6 {
  background-image: url("../imgs/about_04_06.jpg");
  min-height: 250px;
  border: 4px solid var(--color-black);
}
#about4_7 {
  background-image: url("../imgs/about_04_07.jpg");
  min-height: 250px;
  border: 4px solid var(--color-black);
}
#about4_8 {
  background-image: url("../imgs/about_04_08.jpg");
  min-height: 250px;
  border: 4px solid var(--color-black);
}
#about4_9 {
  background-image: url("../imgs/about_04_09.jpg");
  min-height: 250px;
  border: 4px solid var(--color-black);
}
#about4_10 {
  background-image: url("../imgs/about_04_10.jpg");
  min-height: 250px;
  border: 4px solid var(--color-black);
}


.services1 {
  background-image: url("../imgs/services_01.png");
  min-height: calc(100vh); 
}


#services3_1 {
  background-image: url("../imgs/services_03_01.png");
  min-height: 280px;
  background-size: 90% auto;
  background-repeat: no-repeat;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #services3_1 {
    min-height: 450px;  
    background-size: 70% auto;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services3_1 {
    min-height: 390px;
  }
}

#services4_1 {
  background-image: url("../imgs/services_04_01.png");
  min-height: 370px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #services4_1 {
    min-height: 500px;  }
}

#services4_2 {
  background-image: url("../imgs/services_04_02.jpg");
  min-height: 350px;
  border: 4px solid var(--color-dark-grey);
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #services4_2 {
    min-height: 500px;  }
}

#services4_3 {
  background-image: url("../imgs/services_04_03.png");
  min-height: 350px;
  border: 4px solid var(--color-dark-grey);
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #services4_3 {
    min-height: 500px;  }
}

#services5_1 {
  background-image: url("../imgs/services_05_01.png");
  min-height: 370px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #services5_1 {
    min-height: 500px;  }
}

#services5_2 {
  background-image: url("../imgs/services_05_02.jpg");
  min-height: 370px;
  border: 4px solid var(--color-black);
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services5_2 {
    min-height: 230px;  }
}

@media (max-width: 767.98px) {
  #services5_2 {
    min-height: 550px;  
  }
}

#services5_3 {
  background-image: url("../imgs/services_05_03.jpg");
  min-height: 370px;
  border: 4px solid var(--color-black);
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services5_3 {
    min-height: 230px;  
  }
}

#services5_4 {
  background-image: url("../imgs/services_05_04.jpg");
  min-height: 370px;
  border: 4px solid var(--color-black);
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services5_4 {
    min-height: 230px;  }
}



#services6_1 {
  background-image: url("../imgs/services_06_01.jpg");
  min-height: 300px;
  border: 4px solid var(--color-dark-grey);
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services6_1 {
    min-height: 200px;  }
}

@media (max-width: 767.98px) {
  #services6_1 {
    min-height: 380px;  
  }
}

#services6_2 {
  background-image: url("../imgs/services_06_02.jpg");
  min-height: 300px;
  border: 4px solid var(--color-dark-grey);
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services6_2 {
    min-height: 200px;  }
}

@media (max-width: 767.98px) {
  #services6_2 {
    min-height: 300px;  
  }
}

#services6_3 {
  background-image: url("../imgs/services_06_03.jpg");
  min-height: 300px;
  border: 4px solid var(--color-dark-grey);
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services6_3 {
    min-height: 200px;  
  }
}

@media (max-width: 767.98px) {
  #services6_3 {
    min-height: 300px;  
  }
}



#services7_1 {
  background-image: url("../imgs/services_07_01.jpg");
  min-height: 230px;
  border: 4px solid var(--color-black);
  background-position: top center;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services7_1 {
    min-height: 180px;  }
}

@media (max-width: 767.98px) {
  #services7_1 {
    min-height: 380px;  
  }
}

#services7_2 {
  background-image: url("../imgs/services_07_02.jpg");
  min-height: 230px;
  border: 4px solid var(--color-black);
  background-position: top center;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services7_2 {
    min-height: 180px;  }
}

@media (max-width: 767.98px) {
  #services7_2 {
    min-height: 380px;  
  }
}

#services7_3 {
  background-image: url("../imgs/services_07_03.jpg");
  min-height: 230px;
  border: 4px solid var(--color-black);
  background-position: top right;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services7_3 {
    min-height: 180px;  
  }
}

@media (max-width: 767.98px) {
  #services7_3 {
    min-height: 280px;  
  }
}



#services8 .row {
  flex: 1 1 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}


#services8_1 {
  background-image: url("../imgs/services_08_01.jpg");
  min-height: 230px;
  border: 4px solid var(--color-dark-grey);
  background-position: top center;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services8_1 {
    min-height: 180px;  }
}

@media (max-width: 767.98px) {
  #services8_1 {
    min-height: 380px;  
  }
}

#services8_2 {
  background-image: url("../imgs/services_08_02.png");
  min-height: 230px;
  border: 4px solid var(--color-dark-grey);
  background-position: top center;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services8_2 {
    min-height: 180px;  }
}

@media (max-width: 767.98px) {
  #services8_2 {
    min-height: 380px;  
  }
}

#services8_3 {
  background-image: url("../imgs/services_08_03.jpg");
  min-height: 230px;
  border: 4px solid var(--color-dark-grey);
  background-position: top right;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services8_3 {
    min-height: 180px;  
  }
}

@media (max-width: 767.98px) {
  #services8_3 {
    min-height: 380px;  
  }
}


#services8_4 {
  background-image: url("../imgs/services_08_04.jpg");
  min-height: 180px;
  border: 4px solid var(--color-dark-grey);
  background-position: top right;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services8_4 {
    min-height: 200px;  
  }
}

@media (max-width: 767.98px) {
  #services8_4 {
    min-height: 300px;  
  }
}

#services8_5 {
  background-image: url("../imgs/services_08_05.jpg");
  min-height: 180px;
  border: 4px solid var(--color-dark-grey);
  background-position: top right;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services8_5 {
    min-height: 200px;  
  }
}

@media (max-width: 767.98px) {
  #services8_5 {
    min-height: 300px;  
  }
}

#services8_6 {
  background-image: url("../imgs/services_08_06.jpg");
  min-height: 180px;
  border: 4px solid var(--color-dark-grey);
  background-position: top right;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services8_6 {
    min-height: 200px;  
  }
}

@media (max-width: 767.98px) {
  #services8_6 {
    min-height: 300px;  
  }
}

#services8_7 {
  background-image: url("../imgs/services_08_07.jpg");
  min-height: 180px;
  border: 4px solid var(--color-dark-grey);
  background-position: top right;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #services8_7 {
    min-height: 200px;  
  }
}

@media (max-width: 767.98px) {
  #services8_7 {
    min-height: 300px;  
  }
}



.params-list {
  list-style:square;
  padding: 0 0 0 20px;
  margin: 0;
}

.params-list li{
  padding: 0 0 5px 10px;
  color: var(--color-light-grey);
}

#hecthor2_1 {
  background-image: url("../imgs/hecthor_02.png");
  min-height: 280px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #hecthor2_1 {
    min-height: 370px; 
    background-size: 60% auto !important;
  }
}

@media (max-width: 992px) {
  #hecthor2_1 {
    min-height: 370px; 
    background-size: 80% auto !important;
  }
}


#hecthor3 {
  background-color: var(--color-darker-grey);
}


#hecthor4_1 {
  background-image: url("../imgs/hecthor_04.png");
  min-height: 380px;
  background-size: 80% auto !important;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #hecthor4_1 {
    min-height: 370px; 
    background-size: 50% auto !important;
  }
}

@media (max-width: 992px) {
  #hecthor4_1 {
    min-height: 370px; 
    background-size: 70% auto !important;
  }
}

#hecthor5_1 {
  background-image: url("../imgs/hecthor_05_01.png");
}
#hecthor5_2 {
  background-image: url("../imgs/hecthor_05_02.png");
}
#hecthor5_3 {
  background-image: url("../imgs/hecthor_05_03.png");
}
#hecthor5_4 {
  background-image: url("../imgs/hecthor_05_04.png");
}

.hecthor5_x {
  min-height: 260px;
  border: 4px solid var(--color-black);
  background-position: center center;
  background-size: 90% auto !important;
  background-repeat: no-repeat;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .hecthor5_x {
    min-height: 370px; 
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hecthor5_x {
    min-height: 260px;  
  }
}

@media (max-width: 767.98px) {
  .hecthor5_x {
    min-height: 380px;  
  }
}

#hecthor6_2 {
  background-image: url("../imgs/services_03_02.jpg");
  min-height: 250px;
  border: 4px solid var(--color-dark-grey);
}
#hecthor6_3 {
  background-image: url("../imgs/services_03_03.jpg");
  min-height: 250px;
  border: 4px solid var(--color-dark-grey);
}
#hecthor6_4 {
  background-image: url("../imgs/services_03_04.jpg");
  min-height: 250px;
  border: 4px solid var(--color-dark-grey);
}

#hecthor6_5 {
  padding-left: 4px;
  padding-right: 4px;
}


/* SVG text style */
.svg-text {
  font-family: 'Segoe UI', 'Arial', sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  fill: var(--color-white);
  pointer-events: none;
  font-size: 28px;
  text-anchor: start;
  dominant-baseline: middle;
  opacity: 0.8;
  margin-left: 15px;
}

.svg-text-left {
  text-anchor: end !important;
}

.svg-line {
  stroke: var(--color-white);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4;
}

.svg-point {
  fill: var(--color-white);
  stroke: var(--color-black);
  stroke-width: 1;
  r: 3px;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .svg-text {
    font-size: 30px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .svg-text {
    font-size: 31px;
  }
}

@media (max-width: 767.98px) {
  .svg-text {
    font-size: 31px;
  }
}