/*
  Sandhu Design and Drafting Ltd. – Global Stylesheet

  This stylesheet defines a dark, elegant theme with metallic accents inspired
  by modern architecture. Colours and layout variables are defined at the top
  for easy customization. The design focuses on clarity and usability across
  all pages and devices.
*/

:root {
  --primary-color: #0f1b2a;        /* Primary dark background */
  --secondary-color: #4d5969;      /* Secondary dark border colour */
  --accent-color: #cda45e;         /* Warm metallic gold accent */
  --light-color: #f5f5f5;          /* Light text colour */
  --content-width: 1200px;         /* Max width for content containers */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--light-color);
  background-color: var(--primary-color);
  line-height: 1.6;
}

a {
  color: var(--light-color);
  text-decoration: none;
}

header {
  background-color: rgba(15,27,42,0.95);
  width: 100%;
  /* Increased padding to accommodate a larger logo */
  padding: 30px 0;
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid var(--secondary-color);
}

.nav-container {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

/* Make the logo scale responsively using CSS clamp.  
   The height will never be smaller than 60px or larger than 120px,
   and it scales proportionally with the viewport width (10vw).
*/
.logo img {
  height: clamp(60px, 10vw, 120px);
  width: auto;
}

/* Reduce header padding on small screens */
@media (max-width: 768px) {
  header {
    padding: 20px 0;
  }
}

nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin-left: 30px;
}

nav ul li a {
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

nav ul li a:hover {
  color: var(--accent-color);
}

/* Hero Section */
.hero {
  background-image: url('../images/hero.jpg');
  background-size: cover;
  background-position: center;
  height: 80vh;
  position: relative;
  border-bottom: 1px solid var(--secondary-color);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 800px;
  padding: 20px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: var(--light-color);
  letter-spacing: 1px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #d3d3d3;
}

.btn {
  display: inline-block;
  padding: 12px 32px;
  margin: 10px;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 3px;
}

.btn:hover {
  background-color: var(--accent-color);
  color: var(--primary-color);
}

/* Section Styles */
.section {
  padding: 80px 20px;
  max-width: var(--content-width);
  margin: 0 auto;
}

.section.dark {
  background-color: var(--primary-color);
}

.section.light {
  background-color: #131e2c;
}

.section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--accent-color);
  letter-spacing: 0.5px;
}

.section p {
  margin-bottom: 20px;
  color: var(--light-color);
  font-size: 1rem;
}

.two-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.two-columns .column {
  flex: 1 1 50%;
}

/* Services Cards */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.service-card {
  flex: 1 1 calc(50% - 40px);
  background-color: #131e2c;
  padding: 30px;
  border: 1px solid var(--secondary-color);
  border-radius: 8px;
  transition: border-color 0.3s ease;
}

.service-card:hover {
  border-color: var(--accent-color);
}

.service-card h3 {
  margin-bottom: 15px;
  font-size: 1.5rem;
  color: var(--accent-color);
}

.service-card p {
  color: var(--light-color);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--secondary-color);
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  color: var(--light-color);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-weight: 500;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item .overlay span {
  font-size: 1.2rem;
  text-align: center;
}

/* Contact Form */
.contact-form {
  background-color: #131e2c;
  padding: 40px;
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  margin-bottom: 5px;
  color: var(--accent-color);
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  margin-bottom: 20px;
  padding: 12px;
  border: none;
  border-radius: 4px;
  background-color: #0f1b2a;
  color: var(--light-color);
  outline: none;
}

.contact-form textarea {
  resize: vertical;
  height: 150px;
}

.contact-form input[type='submit'] {
  background-color: var(--accent-color);
  color: var(--primary-color);
  cursor: pointer;
  font-weight: bold;
  border: none;
  transition: background-color 0.3s ease;
}

.contact-form input[type='submit']:hover {
  background-color: #b88c47;
}

/* Footer */
footer {
  background-color: #0c1421;
  color: #9aa6b6;
  padding: 40px 20px;
  margin-top: 80px;
  border-top: 1px solid var(--secondary-color);
}

footer .footer-container {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-col {
  flex: 1 1 25%;
}

.footer-col h4 {
  margin-bottom: 15px;
  color: var(--accent-color);
  font-size: 1.2rem;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  color: #9aa6b6;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-col ul li a:hover {
  color: var(--accent-color);
}

/* Responsive Design */
@media (max-width: 768px) {
  nav ul li {
    margin-left: 20px;
  }
  .hero h1 {
    font-size: 2.4rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .two-columns .column {
    flex: 1 1 100%;
  }
  .services-grid .service-card {
    flex: 1 1 100%;
  }
  .footer-col {
    flex: 1 1 100%;
  }
}

/* Existing rule to size the logo responsively */
.logo img {
  height: clamp(60px, 10vw, 120px);
  width: auto;
  transition: transform 0.3s ease-in-out; /* animate any changes smoothly */
}

/* New rule: scale the logo up when hovered */
.logo img:hover {
  transform: scale(1.1); /* enlarge by 10% */
}