html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}

body {
  background-color: #090b0f;
  color: #d6d3d4;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px
}



/* Navbar */
.navbar {
  background-color: rgba(9, 11, 15, 0.9);
  backdrop-filter: blur(6px);
  max-height: 400px;
}
.nav-link.active,
.nav-link:hover {
  color: #c39864 !important;
}
.custom-dropdown {
  background-color: #090b0f;
  border: 1px solid #c39864;
}
.custom-dropdown .dropdown-item {
  color: #d6d3d4;
}
.custom-dropdown .dropdown-item:hover {
  background-color: #c39864;
  color: #090b0f;
}

/* === HERO SECTION Major (Responsive Video) === */
.hero-section {
  height: 100vh;
  width: 100vw;
  margin-top: 76px;
  position: relative;
  object-fit: cover;
  border-bottom: 1px solid #c39864;
}

.seamless-fade {
  opacity: 1;
  transition: opacity 0.5s linear;
}





@media (max-width: 1200px) {
  .hero-section {
    height: 50vh;       /* Reduce hero height on smaller screens */
    margin-top: 76px;
    position: relative;
    object-fit: cover;
    border-bottom: 1px solid #c39864;
  }
}

@media (max-width: 960px) {
  .hero-section {
    height: 50vh;       /* Reduce hero height on smaller screens */
    margin-top: 76px;
    position: relative;
    object-fit: cover;
    border-bottom: 1px solid #c39864;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 40vh;       /* Reduce hero height on smaller screens */
    margin-top: 76px;
    position: relative;
    object-fit: cover;
    border-bottom: 1px solid #c39864;
  }
}


@media (max-width: 480px) {
  .hero-section {
    height: 30vh;       /* Reduce hero height on smaller screens */
    margin-top: 76px;
    position: relative;
    object-fit: cover;
    border-bottom: 1px solid #c39864;
  }
}

@media (max-width: 330px) {
  .hero-section {
    height: 20vh;       /* Reduce hero height on smaller screens */
    margin-top: 100px;
    position: relative;
    object-fit: cover;
    border-bottom: 1px solid #c39864;
  }
}



/* === HERO SECTION Minor (smaller pages) === */
.hero-section-minor {
  position: relative;
  width: 100vw;
  margin-top: 76px;
  overflow: hidden;
  border-bottom: 1px solid #c39864;
}

.hero-section-minor img {
  width: 100%;
  height: 70vh;
  object-fit: cover;
}

/* Image controls height */
.hero-img-minor {
  width: 100vw;
  height: auto; 
  display: block;
}

/* === HERO SECTION footer === */
.hero-section-footer {
  position: relative;
  width: 100vw;
  overflow: hidden;
  border-bottom: 1px solid #c39864;
}

.hero-section-footer img{
  height: 40vh;
  object-fit: contain;
  object-position: center;
}


.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 15, 0.7);
  z-index: 2;
}

.hero-overlay-minor {
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 15, 0.6);
  z-index: 2;
}

.hero-btn { 
  background-color: #c39864;  
  color: #090b0f; 
  border: 2px solid #c39864;
}

.hero-btn:hover { 
  background-color: transparent; 
  border: 2px solid #c39864;
  color:#d6d3d4; 
}


.award-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.award-img {
  height: 100px;              /* Lock image height */
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.award-text {
  margin-top: 0.75rem;
  font-size: 1.1rem;
  text-align: center;
}




/* Brand Carousel */
.brand-logo {
  height: 200px;
  width: 300px;
  object-fit: contain;
}

/* Services */
.service-card {
  cursor: pointer;
}
.service-card img {
  transition: transform 0.5s ease;
  border-radius: 4px;
}
.service-card:hover img {
  transform: scale(1.05);
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 15, 0.85);
  opacity: 0;
  color: #d6d3d4;
  transition: opacity 0.3s ease;
  text-align: center;
  padding: 2rem;
}
.service-card:hover .overlay {
  opacity: 1;
}
.overlay-btn {
  border: 2px solid #c39864;
  color: #d6d3d4;
  background: transparent;
  transition: all 0.3s;
}
.overlay-btn:hover {
  background: #c39864;
  color: #090b0f;
}

/* CTA Section */
.cta-section {
  background-color: #0c0f15;
}

/* Footer */
.footer {
  background-color: #0c0f15;
  border-top: 1px solid #c39864;
}

.footer .row {
  align-items: flex-start; /* Ensures all columns align at the top */
}

.footer-logo {
  display: block;
  margin: 0 auto;          /* Centers the logo horizontally */
  max-width: 220px;        /* Keeps it in line visually with other columns */
  height: auto;
}

.footer a {
  color: #d6d3d4;
  text-decoration: none;
}
.footer a:hover {
  color: #c39864;
}

/* Services page */

.hero-section-services {
  position: relative;
}


/* Service Layout */
/* === Hero Section === */

/* === Services Polaroid === */
.polaroid-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  cursor: pointer;
  perspective: 800px;
}
.polaroid {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 8px solid #d6d3d4;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  transition: transform 2.0s ease, opacity 2s ease;
}
.polaroid-front {
  z-index: 2;
  transform: rotate(-5deg);
}
.polaroid-back {
  z-index: 1;
  transform: rotate(5deg);
  opacity: 0;
}
.polaroid-wrap.hovered .polaroid-front {
  opacity: 0;
  transform: rotate(-5deg) translateX(-25px);
}
.polaroid-wrap.hovered .polaroid-back {
  opacity: 1;
  transform: rotate(0deg) translateY(-5px);
}

/* === Animations === */
.service-block {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1.1s ease-out;
}
.service-block.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* === CTA Section === */
.cta-section {
  background-color: #090b0f;
  border-top: 1px solid rgba(195, 152, 100, 0.3);
}
.cta-btn:hover {
  background-color: #c39864;
  color: #090b0f;
  border: 1px solid #c39864;
}

/* Portfolio Page */

.portfolio-hero {
  background: url('https://images.pexels.com/photos/378570/pexels-photo-378570.jpeg') center/cover no-repeat;
  height: 60vh;
  color: #d6d3d4;
  opacity: 0.4;
}
.filter-btns .btn {
  border-color: #c39864; 
}
.filter-btns .btn.active,
.filter-btns .btn:hover {
  background-color: #c39864;
  color: #090b0f;
}
.portfolio-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.0s ease, transform 1.0s ease;
}
.portfolio-item.visible {
  opacity: 1;
  transform: translateY(0);
}
.portfolio-img {
  cursor: pointer;
  transition: transform 1.0s ease;
  width: 100%;
  height: 400px;
  image-rendering: optimizeQuality;
  object-fit:cover;
  cursor: pointer;
}
.portfolio-img:hover {
  transform: scale(1.05);
}
.text-tertiary {
  color: #c39864 !important;
}
.custom-dropdown {
  background-color: #090b0f;
  border: 1px solid #c39864;
}
.custom-dropdown .dropdown-item {
  color: #d6d3d4;
}
.custom-dropdown .dropdown-item:hover {
  background-color: #c39864;
  color: #090b0f;
}

#modalTitle {
  color: #c39864;
  font-weight: 600;
  margin-bottom: 0;
}
.modal-body {
  margin-top: 1rem;
}

/*Contact Form*/

.form-control {
  background-color: #0e1117;
  border: 1px solid #c39864;
  color: #d6d3d4;
}

.form-control:focus {
  background-color: #0e1117;
  color: #d6d3d4;
  border-color: #c39864;
  box-shadow: none;
}

.btn-tertiary {
  background-color: #c39864;
  color: #090b0f;
  border: none;
  transition: background-color 0.3s ease;
}

.btn-tertiary:hover {
  background-color: #b38757;
}