/* ==============================
   GENERAL
================================ */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family: 'DM Sans', sans-serif;

    color: #20231f;

    background: #ffffff;

    line-height: 1.6;

}


.container {

    width: 90%;

    max-width: 1250px;

    margin: auto;

}


/* ==============================
   HEADER
================================ */

.header {

    width: 100%;

    background: #ffffff;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow:
    0 2px 15px rgba(0,0,0,0.08);

}


.nav-container {

    height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.logo img {
    height: 65px;
    width: auto;
    display: block;
}


.nav {

    display: flex;

    align-items: center;

    gap: 26px;

}


.nav a {

    text-decoration: none;

     color: #4A382B;

    font-size: 15px;

    font-weight: 500;

    transition: 0.3s;

}


.nav a:hover,
.nav a.active {

    color: #6F913F;

}


.header-button {

    background: #20251d;

    color: white;

    text-decoration: none;

    padding: 12px 22px;

    border-radius: 4px;

    font-size: 14px;

    transition: 0.3s;

}


.header-button:hover {

    background: #6b8b3d;

}


.menu-toggle {

    display: none;

    border: none;

    background: none;

    font-size: 28px;

    cursor: pointer;

}


/* ==============================
   HERO
================================ */

.hero {

    min-height: 720px;

    position: relative;

    display: flex;

    align-items: center;

    background:

    linear-gradient(
    rgba(20,25,18,0.70),
    rgba(20,25,18,0.45)
    ),

    url("../images/hero-drafting.jpg");

    background-size: cover;

    background-position: center;

}


.hero-content {

    position: relative;

    z-index: 2;

}


.hero-text {

    max-width: 650px;

    color: white;

}


.hero-small-title {

    font-size: 13px;

    letter-spacing: 2px;

    color: #b9d68b;

    margin-bottom: 20px;

    font-weight: 600;

}


.hero h1 {

    font-family:
    'Playfair Display', serif;

    font-size: 68px;

    line-height: 1.15;

    margin-bottom: 25px;

    font-weight: 600;

}


.hero h1 span {

    color: #b7d779;

}


.hero-description {

    font-size: 19px;

    max-width: 590px;

    margin-bottom: 35px;

    color: #f2f2f2;

}


.hero-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}


.btn-primary {

    background: #6F913F;

    color: #FFFFFF;

    text-decoration: none;

    padding: 15px 28px;

    border-radius: 4px;

    font-weight: 600;

    transition: 0.3s;

}


.btn-primary:hover {

    background: #4F6F2E;

}


.btn-secondary {

    border: 1px solid white;

    color: white;

    text-decoration: none;

    padding: 15px 28px;

    border-radius: 4px;

    font-weight: 600;

    transition: 0.3s;

}


.btn-secondary:hover {

    background: white;

    color: #20251d;

}


/* ==============================
   INTRO
================================ */

.intro-section {

    padding: 110px 0;

    background: #f5f4f0;

}


.intro-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

}


.section-label {

    color: #6F913F;

    font-size: 13px;

    letter-spacing: 2px;

    font-weight: 700;

    margin-bottom: 18px;

}


.intro-left h2 {

    font-family:
    'Playfair Display', serif;

    font-size: 45px;

    line-height: 1.2;

}


.intro-right p {

    font-size: 17px;

    margin-bottom: 18px;

    color: #555;

}


.text-link {

    text-decoration: none;

    color: #5d7c34;

    font-weight: 700;

    display: inline-block;

    margin-top: 10px;

}


/* ==============================
   SERVICES
================================ */

.services-section {

    padding: 110px 0;

}


.section-heading {

    text-align: center;

    max-width: 720px;

    margin: auto;

    margin-bottom: 60px;

}


.section-heading h2 {

    font-family:
    'Playfair Display', serif;

    font-size: 48px;

    margin-bottom: 15px;

}


.section-heading > p:last-child {

    color: #666;

    font-size: 17px;

}


.services-grid {

    display: grid;

    grid-template-columns:
    repeat(3, 1fr);

    gap: 28px;

}


.service-card {

    background: white;

    border-radius: 6px;

    overflow: hidden;

    box-shadow:
    0 8px 30px rgba(0,0,0,0.08);

    transition: 0.35s;

}


.service-card:hover {

    transform:
    translateY(-10px);

    box-shadow:
    0 18px 45px rgba(0,0,0,0.13);

}


.service-image {

    height: 260px;

    overflow: hidden;

}


.service-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;

}


.service-card:hover img {

    transform: scale(1.08);

}


.service-content {

    padding: 30px;

}


.service-number {

    color: #789a48;

    font-weight: 700;

    font-size: 14px;

}


.service-content h3 {

    font-size: 25px;

    margin:
    10px 0 15px;

    line-height: 1.3;

}


.service-content p {

    color: #666;

    margin-bottom: 22px;

}


.service-content a {

    text-decoration: none;

    color: #20251d;

    font-weight: 700;

}


.service-content a span {

    color: #789a48;

    margin-left: 5px;

}


/* ==============================
   WHY SECTION
================================ */

.why-section {

    padding: 110px 0;

    background: #f4f4f1;

}


.why-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}


.why-image img {

    width: 100%;

    height: 600px;

    object-fit: cover;

    border-radius: 5px;

}


.why-content h2 {

    font-family:
    'Playfair Display', serif;

    font-size: 48px;

    line-height: 1.2;

    margin-bottom: 20px;

}


.why-description {

    font-size: 17px;

    color: #666;

    margin-bottom: 35px;

}


.why-list {

    display: flex;

    flex-direction: column;

    gap: 22px;

}


.why-item {

    display: flex;

    gap: 15px;

}


.why-icon {

    min-width: 38px;

    height: 38px;

    background: #789a48;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

}


.why-item h4 {

    font-size: 18px;

    margin-bottom: 4px;

}


.why-item p {

    color: #666;

}


/* ==============================
   CTA
================================ */

.cta-section {

    padding: 120px 0;

    text-align: center;

    background:
    linear-gradient(
    rgba(26,32,23,0.92),
    rgba(26,32,23,0.92)
    ),

    url("../images/hero-drafting.jpg");

    background-size: cover;

    background-position: center;

    color: white;

}


.cta-container > p {

    color: #b7d779;

    letter-spacing: 2px;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 15px;

}


.cta-container h2 {

    font-family:
    'Playfair Display', serif;

    font-size: 55px;

    line-height: 1.2;

    margin-bottom: 35px;

}


.btn-light {

    display: inline-block;

    background: white;

    color: #20251d;

    text-decoration: none;

    padding: 16px 30px;

    font-weight: 700;

    border-radius: 4px;

}


/* ==============================
   FOOTER
================================ */

.footer {

    background: #1d211a;

    color: white;

    padding-top: 70px;

}


.footer-grid {

    display: grid;

    grid-template-columns:
    2fr 1fr 1fr 1fr;

    gap: 50px;

    padding-bottom: 60px;

}


.footer-logo {

    width: 180px;

    margin-bottom: 20px;

    filter:
    brightness(0)
    invert(1);

}


.footer-brand p {

    color: #c5c5c5;

    max-width: 350px;

    margin-bottom: 15px;

}


.footer-slogan {

    color: #b7d779 !important;

    font-weight: 600;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.footer-column h4 {

    margin-bottom: 10px;

    font-size: 17px;

}


.footer-column a {

    color: #c7c7c7;

    text-decoration: none;

    transition: 0.3s;

}


.footer-column a:hover {

    color: #b7d779;

}


.footer-column p {

    color: #c7c7c7;

}


.footer-bottom {

    border-top:
    1px solid rgba(255,255,255,0.1);

    padding: 20px 0;

    text-align: center;

}


.footer-bottom p {

    color: #aaa;

    font-size: 14px;

}


/* ==============================
   TABLET
================================ */

@media(max-width: 1000px) {


    .nav {

        gap: 15px;

    }


    .nav a {

        font-size: 13px;

    }


    .header-button {

        display: none;

    }


    .hero h1 {

        font-size: 58px;

    }


    .services-grid {

        grid-template-columns:
        repeat(2, 1fr);

    }


    .service-card:last-child {

        grid-column:
        span 2;

        max-width: 500px;

        margin: auto;

    }


    .footer-grid {

        grid-template-columns:
        repeat(2, 1fr);

    }


}


/* ==============================
   MOBILE
================================ */

@media(max-width: 768px) {


    .nav-container {

        height: 75px;

    }


    .logo img {

        height: 48px;

    }


    .menu-toggle {

        display: block;

    }


    .nav {

        display: none;

        position: absolute;

        top: 75px;

        left: 0;

        width: 100%;

        background: white;

        flex-direction: column;

        align-items: flex-start;

        padding: 25px;

        box-shadow:
        0 10px 20px rgba(0,0,0,0.1);

    }


    .nav.show {

        display: flex;

    }


    .hero {

        min-height: 650px;

        background-position: 65% center;

    }


    .hero h1 {

        font-size: 45px;

    }


    .hero-description {

        font-size: 17px;

    }


    .intro-container {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .intro-left h2 {

        font-size: 36px;

    }


    .services-grid {

        grid-template-columns: 1fr;

    }


    .service-card:last-child {

        grid-column: auto;

    }


    .section-heading h2 {

        font-size: 38px;

    }


    .why-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .why-image img {

        height: 420px;

    }


    .why-content h2 {

        font-size: 38px;

    }


    .cta-container h2 {

        font-size: 42px;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


}


/* ==============================
   SMALL MOBILE
================================ */

@media(max-width: 480px) {


    .container {

        width: 88%;

    }


    .hero {

        min-height: 600px;

    }


    .hero h1 {

        font-size: 38px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: flex-start;

    }


    .btn-primary,
    .btn-secondary {

        width: 100%;

        text-align: center;

    }


}