/* =========================================================
   A WATCH MECHANIC
   Main Website Stylesheet
   ========================================================= */


/* =========================================================
   GENERAL PAGE STYLING
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f1e8;
    color: #222;
    line-height: 1.6;
}


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

header {
    background-color: #004225;
    color: white;
    padding: 45px 20px;
    text-align: center;
}

header h1 {
    margin: 0;
    font-family: Garamond, "Times New Roman", serif;
    font-size: 46px;
    font-weight: bold;
    letter-spacing: 2px;
}


/* =========================================================
   NAVIGATION BAR
   ========================================================= */

.navbar {
    background-color: #002d1a;
    text-align: center;
    padding: 25px 20px;
}

.navbar a {
    color: white;
    text-decoration: none;
    margin: 0 25px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.navbar a:hover {
    color: #c9a227;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

main {
    width: 100%;
}


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

.hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px;

    display: flex;
    align-items: center;
    gap: 70px;
}

.hero-image {
    flex: 1;
}

.hero-image img {
    width: 100%;
    display: block;
    border: 10px solid #241a01;
    border-radius: 2px;
}

.hero-text {
    flex: 1;
    text-align: center;
}

.hero-text h2 {
    margin-top: 0;
    margin-bottom: 15px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: bold;
    line-height: 1.2;

    color: #004225;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display: inline-block;

    margin-top: 15px;
    padding: 13px 28px;

    background-color: #004225;
    color: white;

    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: bold;

    border: 1px solid #004225;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.button:hover {
    background-color: #c9a227;
    border-color: #c9a227;
    color: #111;
}


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

.services {
    background-color: white;
    padding: 80px 40px;
    text-align: center;
}

.services h2,
.recent-work h2,
.about-preview h2,
.contact-preview h2 {
    margin-top: 0;
    margin-bottom: 45px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px;
    font-weight: bold;

    color: #004225;
}

.service-container {
    max-width: 1100px;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    gap: 30px;
}

.service {
    flex: 1;

    background-color: white;

    border: 3px solid #241a01;

    overflow: hidden;

    text-align: left;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.service img {
    width: 100%;
    height: 300px;

    object-fit: cover;

    display: block;
}

.service h3 {
    margin: 25px 30px 10px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;

    color: #004225;
}

.service p {
    margin: 0 30px 30px;

    font-size: 16px;
}


/* =========================================================
   RECENT WORK SECTION
   ========================================================= */

.recent-work {
    padding: 80px 40px;
    text-align: center;
}

.watch-gallery {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    gap: 30px;
}

.watch-item {
    flex: 1;
    background-color: white;

    border: 3px solid #241a01;

    padding-bottom: 25px;

    text-align: center;
}

.watch-item img {
    width: 100%;
    height: 300px;

    object-fit: cover;

    display: block;
}

.watch-item h3 {
    margin: 20px 15px 5px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;

    color: #004225;
}

.watch-item p {
    margin: 0 15px;
    color: #555;
}


/* =========================================================
   ABOUT PREVIEW ON HOMEPAGE
   ========================================================= */

.about-preview {
    background-color: #004225;
    color: white;

    padding: 90px 40px;

    text-align: center;
}

.about-preview h2 {
    color: white;
}

.about-preview p {
    max-width: 750px;
    margin: 0 auto 20px;

    font-size: 18px;
}

.about-preview .button {
    background-color: transparent;
    border-color: white;
}

.about-preview .button:hover {
    background-color: #c9a227;
    border-color: #c9a227;
    color: #111;
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-page {
    max-width: 900px;
    margin: 0 auto;

    padding: 90px 40px;

    text-align: center;
}

.about-page h2,
.about-philosophy h2,
.about-work h2,
.about-contact h2 {
    margin-top: 0;
    margin-bottom: 30px;

    font-family: Garamond, "Times New Roman", serif;
    font-size: 38px;
    font-weight: bold;

    color: #004225;
}

.about-page p {
    max-width: 750px;
    margin: 0 auto 25px;

    font-size: 18px;
}


/* =========================================================
   ABOUT PAGE - WHAT I DO
   ========================================================= */

.about-philosophy {
    background-color: white;

    padding: 90px 40px;

    text-align: center;
}

.about-philosophy p {
    max-width: 750px;
    margin: 0 auto 25px;

    font-size: 18px;
}


/* =========================================================
   ABOUT PAGE - SHARED LIST STYLE
   ========================================================= */

.about-philosophy ul,
.about-work ul {
    width: 600px;
    max-width: 100%;

    margin: 30px auto;
    padding: 0;

    list-style: none;

    text-align: center;
}

.about-philosophy li,
.about-work li {
    padding: 15px 20px;

    border-bottom: 1px solid #d6d0c0;

    font-size: 18px;

    text-align: center;
}

.about-philosophy li:first-child,
.about-work li:first-child {
    border-top: 1px solid #d6d0c0;
}


/* =========================================================
   ABOUT PAGE - WHAT I WORK ON
   ========================================================= */

.about-work {
    max-width: 900px;
    margin: 0 auto;

    padding: 90px 40px;

    text-align: center;
}


/* =========================================================
   ABOUT PAGE - CONTACT
   ========================================================= */

.about-contact {
    background-color: white;

    color: #222;

    padding: 90px 40px;

    text-align: center;
}

.about-contact h2 {
    color: #004225;
}

.about-contact p {
    max-width: 700px;

    margin: 0 auto 25px;

    font-size: 18px;
}

.about-contact .button {
    background-color: #004225;
    border-color: #004225;
    color: white;
}

.about-contact .button:hover {
    background-color: #c9a227;

    border-color: #c9a227;

    color: #111;
}


/* =========================================================
   CONTACT SECTION ON HOMEPAGE
   ========================================================= */

.contact-preview {
    padding: 90px 40px;

    text-align: center;

    background-color: #f4f1e8;
}

.contact-preview h2 {
    margin-bottom: 20px;
}

.contact-preview p {
    font-size: 18px;
    margin-bottom: 25px;
}

/* =========================================================
   CONTACT PAGE - INSTAGRAM
   ========================================================= */

.instagram-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #004225;
    text-decoration: none;

    font-size: 20px;

    transition: color 0.3s ease;
}

.instagram-contact:hover {
    color: #c9a227;
}

.instagram-contact-icon {
    width: 24px;
    height: 24px;
}


/* Space between Instagram handle and button */

.instagram-button {
    margin-bottom: 0px;
}

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

footer {
    background-color: #004225;
    color: white;

    padding: 25px 20px 18px;

    text-align: center;
}

footer h2 {
    margin: 0 0 8px;

    font-family: Garamond, "Times New Roman", serif;
    font-size: 24px;
}

footer h2 a {
    color: white;
    text-decoration: none;

    transition: color 0.3s ease;
}

footer h2 a:hover {
    color: #c9a227;
}

footer p {
    margin: 4px 0;
    color: white;
}


/* Instagram */

.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 12px;

    color: white;
    text-decoration: none;

    font-size: 15px;

    transition: color 0.3s ease;
}

.instagram-icon {
    width: 20px;
    height: 20px;
}

.instagram-link:hover {
    color: #c9a227;
}

footer .copyright {
    margin-top: 12px;

    font-size: 13px;
    color: #e5e5e5;
}


/* =========================================================
   MOBILE / RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 800px) {

    header {
        padding: 35px 20px;
    }

    header h1 {
        font-size: 36px;
    }


    /* Navigation */

    .navbar {
        padding: 20px 10px;
    }

    .navbar a {
        margin: 0 8px;
        font-size: 17px;
    }


    /* Homepage Hero */

    .hero {
        flex-direction: column;

        padding: 60px 25px;

        gap: 40px;
    }

    .hero-text h2 {
        font-size: 34px;
    }


    /* Services */

    .service-container {
        flex-direction: column;
    }

    .service img {
        height: 300px;
    }


    /* Recent Work */

    .watch-gallery {
        flex-direction: column;
    }

    .watch-item img {
        height: auto;
    }


    /* About Page */

    .about-page,
    .about-work {
        padding: 60px 25px;
        padding-bottom: 5px;
    }

    .about-philosophy,
    .about-contact {
        padding: 70px 25px;
    }

    .about-page h2,
    .about-philosophy h2,
    .about-work h2,
    .about-contact h2 {
        font-size: 32px;
    }


    /* About Lists */

    .about-philosophy ul,
    .about-work ul {
        width: 100%;
        max-width: 600px;
    }


    /* Other Sections */

    .services,
    .recent-work,
    .contact-preview {
        padding: 60px 25px;
    }

    .about-preview {
        padding: 70px 25px;
    }
    
    
}