/* style.css — custom theme overrides */

/* ------------- GLOBAL RESET ------------- */
body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    background-color: #fafafa;
    color: #333;
}

/* ------------- NAVBAR ------------- */
.logo-img {
    height: 75px;        /* Adjust size for perfect balance */
    width: auto;         /* Keeps the original proportions */
    object-fit: contain;
}

/* (removed custom purple so Bootstrap .text-bg-dark can show) */

/* Nav links */
.nav-link {
    font-weight: 500;
    transition: color 0.2s ease;
}
.nav-link:hover {
    color: #0d6efd !important; /* Bootstrap primary blue */
}

/* ------------- HERO SECTION ------------- */
/* scope width only to hero */
.hero-section .container {
    max-width: 900px;
}

/* scope H1 to hero so global pages keep default colors */
.hero-section h1 {
    color: #f8e9d0;
    font-weight: 700;
}

/* welcome line (H2) styling in hero */
.hero-section h2 {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 400;           /* slightly bolder than 300, easier to read */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #ffcc66;             /* warm gold tone that fits dark hero image */
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.hero-section .container > * + * {
  margin-top: 2rem;   /* adds space between each text element */
}


/* (keep your optional hero-text styles) */
.hero-text h1 {
    color: #f8e9d0;
}
.hero-text h1 span {
    color: #e3b23c;  /* accent word Renew */
}
.hero-text p {
    color: #eaeaea;
}

/* keep your outline secondary (used in hero buttons) */
.btn-outline-secondary {
    border-color: #f8e9d0;
    color: #f8e9d0;
}
.btn-outline-secondary:hover {
    background-color: #f8e9d0;
    color: #5b4636;
}

/* ------------- SERVICES (cards) ------------- */
#services .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
}

/* Fix image height and crop proportionally */
#services .card-img-top {
    height: 230px;        /* adjust to 250px or 300px if you prefer taller */
    object-fit: cover;    /* ensures it fills area nicely */
    width: 100%;
}

/* Make card body take the rest of the space */
#services .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Optional polish: subtle hover lift */
#services .card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.service-card img {
    height: 460px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-radius: 1rem;
}
.service-card:hover img {
    transform: scale(1.05);
}
.service-card .card-body {
    padding: 1.25rem 1.25rem 1.5rem;
}
.service-copy h3 {
    font-size: 1.75rem;
}
.service-copy {
    max-width: 500px;
}
.service-copy p {
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .service-card img {
        height: 300px;
    }
    .service-copy {
        text-align: center;
    }
}

/* ------------- BUTTONS ------------- */
/* Keep the blue primary button set (removed earlier gold override) */
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* ------------- FOOTER ------------- */
footer {
    background-color: #f8f9fa;
}

/* Footer with big background image (like hero) */
.footer-section {
    position: relative;
    background: url('../img/footer-bg.jpg') center center / cover no-repeat;
    min-height: 420px; /* make it generous; adjust as you like */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
    overflow: hidden;
}

.footer-section .overlay {
    position: absolute;
    inset: 0;
    /* slightly darker than hero to guarantee readability */
    background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55));
    z-index: 1;
}
.footer-section .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .footer-section {
        min-height: 360px;
        padding: 48px 0;
        background-position: center top; /* keep the focal point on mobile */
    }
}