/* ===============================
   GLOBAL
=================================*/
body {
  background-image: linear-gradient(to bottom, #3a3a3a, #333333, #212121, #171717, #000000);
  margin: 0;
  padding: 0;
}

/* ===============================
   NAVBAR
=================================*/
.custom-navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  padding: 8px 25px;
  border-bottom: 2px solid darkorange;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
}

.navbar-brand,
.nav-link,
.navbar-text a {
  color: #fff !important;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.nav-link:hover {
  color: darkorange !important;
}


/* Hamburger */
.navbar-toggler{
  border: 1px solid darkorange !important;
}

.navbar-toggler:focus{
  box-shadow: 0 0 0 0.2rem rgba(255,140,0,0.35) !important;
}

.navbar-dark .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ===============================
   HERO SECTION
=================================*/
#section1{
  position: relative;
  height: 100vh;
  overflow: hidden;
  padding: 90px 20px 40px;
  background: rgb(40,40,40);
  text-align: center;
  color: white;
  border: 2px solid darkorange;
}

.hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(60%);
  z-index: 1;
  pointer-events: none;
}

#section1 h1,
.hero-logo,
.hero-btn{
  position: relative;
  z-index: 3;
}

#h1section1{
  font-size: 3vw;
  text-shadow: 0 6px 6px black;
}

.hero-logo{
  width: 220px;
  margin: 25px auto;
  display: block;
}

/* Hero Button */
.button{
  border: 2px solid darkorange;
  background: rgba(0,0,0,0.35);
  color: white;
  padding: 14px 30px;
  font-size: 1.2rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 6px rgba(0,0,0,0.6);
  transition: 0.3s ease;
}

.button:hover{
  background: darkorange;
  color: white;
}

/* ===============================
   OTHER SECTIONS
=================================*/
#section2,
#section3,
#section4,
#section5{
  background: rgb(40,40,40);
  color: white;
  border: 2px solid darkorange;
  padding: 40px 20px;
  text-shadow: 2px 2px 2px black;
}

#h1section2,
#h1section3,
#h1section4,
#h1section5{
  font-size: 3vw;
  text-shadow: 0 6px 6px black;
}

/* ===============================
   GALLERY FIX
=================================*/
#section2 .row img{
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

/* ===============================
   CONTACT BUTTON FIX
=================================*/
.contact-button{
  padding: 12px 26px !important;
  font-size: 18px !important;
}

/* ===============================
   MAP
=================================*/
.map-card{
  margin: 20px auto 0;
  max-width: 1100px;
  border: 1px solid rgba(255,140,0,0.35);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 6px rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

.google-map{
  position: relative;
  padding-bottom: 45%;
}

.google-map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ===============================
   FOOTER
=================================*/
.footer{
  padding: 15px 0;
  background-color: #404040;
}

.footer .copyright{
  text-align: center;
  font-size: 13px;
  color: #c7c7c7;
}

/* ===============================
   MOBILE
=================================*/
@media (max-width: 767px){

  #h1section1,
  #h1section2,
  #h1section3,
  #h1section4,
  #h1section5{
    font-size: 5vw;
  }

  .hero-logo{
    width: 180px;
  }

  .hero-btn{
    width: 85%;
    max-width: 320px;
    margin-top: 15px;
  }

  .navbar-collapse{
    margin-top: 10px;
  }
}

.navbar-nav .nav-link{
  display: inline-block;
  position: relative;
}

.navbar-nav .nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: darkorange;
  transition: width .3s ease;
}

.navbar-nav .nav-link:hover::after{
  width: 100%;
}