/* ==========================================
   WOODIJ DRAFTING PAGE
========================================== */


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

* {

    box-sizing: border-box;

}


body {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    color: #3B2A20;

    background: #ffffff;

}


a {

    text-decoration: none;

}



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

.site-header {

    background: #ffffff;

    border-bottom: 1px solid #eeeeee;

    padding: 18px 20px;

}


.header-container {

    max-width: 1200px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.logo {

    width: 150px;

    display: block;

}


.main-nav {

    display: flex;

    align-items: center;

    gap: 25px;

}


.main-nav a {

    color: #4169E1;

    font-weight: 700;

    font-size: 15px;

}


.main-nav a:hover {

    color: #27408B;

}


.header-button {

    background: #6F913F;

    color: #ffffff;

    padding: 14px 24px;

    border-radius: 5px;

    font-weight: 700;

}


.header-button:hover {

    background: #55752F;

}



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

.drafting-hero {

    padding: 120px 20px;

    background: linear-gradient(
        135deg,
        #E8F1DF,
        #DCEBCF,
        #C9DDB7
    );

}


.drafting-page-container {

    max-width: 1200px;

    margin: auto;

}


.page-tag {

    font-size: 15px;

    letter-spacing: 2px;

    font-weight: 700;

    color: #4169E1;

    margin-bottom: 25px;

}


.drafting-hero h1 {

    font-family: Georgia, serif;

    font-size: 65px;

    line-height: 1.15;

    margin: 0 0 30px 0;

    color: #3B2A20;

}


.drafting-hero h1 span {

    color: #628A3D;

}


.hero-text {

    max-width: 700px;

    font-size: 20px;

    line-height: 1.7;

    color: #4A4038;

    margin-bottom: 35px;

}


.hero-button {

    display: inline-block;

    background: #6F913F;

    color: #ffffff;

    padding: 16px 30px;

    border-radius: 5px;

    font-weight: 700;

}


.hero-button:hover {

    background: #55752F;

}



/* ==========================================
   EXPERIENCE SECTION
========================================== */

.drafting-experience {

    padding: 110px 20px;

    background: #ffffff;

}


.drafting-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1.3fr;

    gap: 100px;

}


.section-tag {

    font-size: 14px;

    letter-spacing: 2px;

    color: #4169E1;

    font-weight: 700;

}


.experience-title h2 {

    font-family: Georgia, serif;

    font-size: 52px;

    line-height: 1.2;

    color: #3B2A20;

    margin-top: 20px;

}


.experience-content {

    font-size: 17px;

    line-height: 1.8;

    color: #4A4038;

}


.experience-content p {

    margin-bottom: 25px;

}


.experience-content h3 {

    font-size: 28px;

    color: #3B2A20;

    margin-top: 45px;

}


.experience-list {

    list-style: none;

    padding: 0;

}


.experience-list li {

    position: relative;

    padding-left: 35px;

    margin-bottom: 17px;

    font-weight: 600;

}


.experience-list li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 1px;

    width: 22px;

    height: 22px;

    background: #628A3D;

    color: white;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 13px;

}



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

.drafting-services {

    padding: 110px 20px;

    background: #F7F8F5;

}


.services-heading {

    max-width: 1200px;

    margin: auto;

    text-align: center;

    margin-bottom: 60px;

}


.services-heading p {

    color: #4169E1;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

}


.services-heading h2 {

    font-family: Georgia, serif;

    font-size: 48px;

    color: #3B2A20;

}


.drafting-services-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 30px;

}


.drafting-service-card {

    background: white;

    padding: 45px 35px;

    border-radius: 8px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.06);

}


.drafting-service-card:hover {

    transform: translateY(-5px);

    transition: 0.3s;

}


.service-number {

    font-size: 15px;

    color: #4169E1;

    font-weight: bold;

    margin-bottom: 25px;

}


.drafting-service-card h3 {

    font-size: 25px;

    color: #3B2A20;

}


.drafting-service-card p {

    font-size: 16px;

    line-height: 1.7;

    color: #4A4038;

}



/* ==========================================
   KPI SECTION
========================================== */

.drafting-kpi {

    padding: 110px 20px;

    background: linear-gradient(
        135deg,
        #E8F1DF,
        #DCEBCF
    );

}


.kpi-heading {

    text-align: center;

    margin-bottom: 60px;

}


.kpi-heading p {

    font-size: 14px;

    color: #4169E1;

    font-weight: 700;

    letter-spacing: 2px;

}


.kpi-heading h2 {

    font-family: Georgia, serif;

    font-size: 48px;

    color: #3B2A20;

}


.kpi-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 25px;

}


.kpi-item {

    background: #ffffff;

    text-align: center;

    padding: 40px 20px;

    border-radius: 8px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.06);

}


.kpi-item h3 {

    font-family: Georgia, serif;

    font-size: 48px;

    margin: 0 0 15px;

    color: #4169E1;

}


.kpi-item p {

    font-size: 16px;

    line-height: 1.5;

    margin: 0;

    color: #3B2A20;

}



/* ==========================================
   CONTACT SECTION
========================================== */

.drafting-contact {

    padding: 110px 20px;

    background: #3B2A20;

    text-align: center;

}


.drafting-contact-content {

    max-width: 900px;

    margin: auto;

}


.drafting-contact p {

    color: #A8C77A;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

}


.drafting-contact h2 {

    font-family: Georgia, serif;

    color: white;

    font-size: 48px;

    line-height: 1.3;

    margin-bottom: 35px;

}


.drafting-contact a {

    display: inline-block;

    background: #6F913F;

    color: white;

    padding: 17px 35px;

    border-radius: 5px;

    font-weight: 700;

}


.drafting-contact a:hover {

    background: #8CAF58;

}



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

.drafting-footer {

    background: #1F211D;

    color: white;

    padding: 70px 20px 0;

}


.footer-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 60px;

    padding-bottom: 60px;

}


.footer-logo {

    width: 150px;

    background: white;

    padding: 8px;

    border-radius: 4px;

}


.footer-container p {

    color: #cccccc;

    line-height: 1.7;

    max-width: 400px;

}


.footer-container h4 {

    font-size: 18px;

    margin-bottom: 20px;

}


.footer-container a {

    display: block;

    color: #cccccc;

    margin-bottom: 12px;

}


.footer-container a:hover {

    color: #A8C77A;

}


.footer-bottom {

    border-top: 1px solid #444;

    text-align: center;

    padding: 25px;

    color: #aaaaaa;

}



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

@media (max-width: 900px) {


    .header-container {

        flex-wrap: wrap;

    }


    .main-nav {

        order: 3;

        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

    }


    .drafting-container {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .drafting-services-grid {

        grid-template-columns: 1fr;

    }


    .kpi-container {

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

    }


    .footer-container {

        grid-template-columns: 1fr 1fr;

    }


}



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

@media (max-width: 600px) {


    .site-header {

        padding: 15px;

    }


    .header-container {

        flex-direction: column;

        align-items: center;

    }


    .main-nav {

        gap: 15px;

        justify-content: center;

    }


    .drafting-hero {

        padding: 80px 20px;

    }


    .drafting-hero h1 {

        font-size: 42px;

    }


    .hero-text {

        font-size: 17px;

    }


    .drafting-experience {

        padding: 70px 20px;

    }


    .experience-title h2 {

        font-size: 40px;

    }


    .drafting-services {

        padding: 70px 20px;

    }


    .services-heading h2 {

        font-size: 36px;

    }


    .drafting-kpi {

        padding: 70px 20px;

    }


    .kpi-heading h2 {

        font-size: 36px;

    }


    .kpi-container {

        grid-template-columns: 1fr;

    }


    .drafting-contact {

        padding: 80px 20px;

    }


    .drafting-contact h2 {

        font-size: 36px;

    }


    .footer-container {

        grid-template-columns: 1fr;

    }

}