:root {
    --bs-primary: #0d6efd;
    --bs-dark: #212529;
    --bs-light: #f8f9fa;
    --bs-white: #ffffff;
}

body {
    font-family: 'Poppins', sans-serif;
    padding-top: 70px; /* Offset for fixed navbar */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* Header */
.navbar-brand .logo {
    height: 40px;
}

/* Hero Section */
#hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80');
    background-size: cover;
    background-position: center;
    min-height: 80vh;
    color: var(--bs-white);
}

#hero .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    padding: 12px 30px;
    font-weight: 600;
    transition: background-color 0.3s, border-color 0.3s;
}

#hero .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Sections */
section {
    padding: 80px 0;
}

#about img {
    max-width: 100%;
    height: auto;
}

/* Services Section */
#services .card {
    transition: transform 0.3s, box-shadow 0.3s;
}

#services .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

/* Featured Project Section */
#featured-project {
    background-color: var(--bs-light);
}

#featured-project img {
    max-width: 100%;
    height: auto;
}

#featured-project .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    padding: 12px 30px;
    font-weight: 600;
    transition: background-color 0.3s, border-color 0.3s;
}

#featured-project .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Contact Section */
#contact {
    background-color: var(--bs-white);
}

#contact .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    padding: 12px 30px;
    font-weight: 600;
    transition: background-color 0.3s, border-color 0.3s;
}

#contact .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Footer */
footer {
    background-color: var(--bs-dark);
}

footer .fab {
    transition: color 0.3s;
}

footer .fab:hover {
    color: var(--bs-primary) !important;
}