/* =========================
   ROOT COLORS (CSS Variables)
   Makes colors reusable
   ========================= */

:root {

    /* Cream color you specified */
    --Cream: #FCFBF4;

    /* Blue tones from your design */
    --LightBlue: #5b8fa8;
    --MediumBlue: #3b6f8c;
    --DarkBlue: #1f4e66;

}



/* =========================
   GLOBAL PAGE SETTINGS
   ========================= */

body {

    margin: 0;

    /* Page background */
    background-color: #dcd9d3;

    /* Default font */
    font-family: Georgia, serif;

}



/* =========================
   WRAPPER
   Holds entire page
   ========================= */

#wrapper {

    width: 95%;

    margin: auto;

}



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

header {

    background-color: var(--LightBlue);

    padding: 30px;

}



/* =========================
   YOUR NAME (HEADER TITLE)
   Matches your exact specs
   ========================= */

header h1 {

    color: var(--Cream);

    font-family: 'Imbue', serif;

    font-size: 100px;

    font-weight: 400;

    margin: 0;

    /* Stroke around letters */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;

    /* Drop shadow */
    text-shadow: 0 4px 4px rgba(0,0,0,0.25);

}



/* =========================
   NAVIGATION BOX
   ========================= */

nav {

    background-color: white;

    padding: 15px;

    margin-top: 20px;

    text-align: center;

}



/* Navigation Links */
nav a {

    color: var(--Cream);

    font-family: 'Imbue', serif;

    font-size: 40px;

    font-weight: 400;

    text-decoration: none;

    margin: 0 15px;

}



/* Hover Effect */
nav a:hover {

    color: black;

}



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

main {

    background-color: var(--MediumBlue);

    padding: 40px;

    min-height: 500px;

}



/* =========================
   ABOUT SECTION
   ========================= */

section {

    width: 65%;

    float: left;

}



/* About Title */

section h2 {

    color: var(--Cream);

    font-family: 'Imbue', serif;

    font-size: 60px;

}



/* Paragraph Text */

section p {

    color: var(--Cream);

    font-size: 22px;

    line-height: 1.6;

}



/* =========================
   SIDEBAR
   ========================= */

aside {

    width: 30%;

    float: right;

    color: var(--Cream);

}



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

footer {

    background-color: var(--DarkBlue);

    padding: 30px;

    clear: both;

}



footer h4 {

    color: var(--Cream);

    font-family: 'Imbue', serif;

}

/* =====================
   GENERAL PAGE STYLE
===================== */

/* Remove default browser spacing */
body {
    margin: 0;
    font-family: 'Playfair Display', serif;
    background-color: #e5e3df;
}


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



header {

    background-color: #5a8faa; /* light blue bar */
    padding: 30px 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;

}

/* Site title (Carson Mays) */
.site-title {

    color: white;
    font-size: 48px;
    margin: 0;

}


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

.nav-links {

    list-style: none;
    margin: 0;
    padding: 10px 20px;

    background-color: #e5e3df;

    display: flex;
    gap: 30px;

}

/* Navigation links */
.nav-links a {

    text-decoration: none;
    color: #5a8faa;
    font-size: 20px;

}

/* Hover effect */
.nav-links a:hover {

    text-decoration: underline;

}


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

.contact-section {

    background-color: #3a6f8f; /* darker blue */

    padding: 60px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

}


/* =====================
   LEFT SIDE FORM
===================== */

.form-area {

    width: 50%;

}

/* Contact title */
.form-area h2 {

    color: white;
    font-size: 48px;

}

/* Form labels */
.form-area label {

    color: white;
    font-size: 20px;

    display: block;
    margin-top: 25px;

}

/* Input boxes */
.form-area input {

    width: 70%;
    height: 40px;

    margin-top: 10px;

    background-color: #e5e3df;
    border: none;

}


/* =====================
   RIGHT CONTACT CARD
===================== */

.contact-card {

    width: 30%;

    background-color: #e5e3df;

    padding: 40px;

}

/* Contact card title */
.contact-card h3 {

    color: #3a6f8f;
    font-size: 24px;

}

/* Contact text */
.contact-card p {

    color: #3a6f8f;
    font-size: 20px;
    margin-top: 30px;

}


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

footer {

    background-color: #1f4f6b;
    height: 80px;

}

/* RESET DEFAULT BROWSER SPACING */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* BODY BACKGROUND */
body {

    background-color: #d9d6d1; /* light gray background */

    font-family: 'Imbue', serif;
}

/* RESET DEFAULT SPACING */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* BODY BACKGROUND */
body {

    background-color: #d8d6d1;

    font-family: 'Imbue', serif;
}


/* OUTER BORDER FRAME */
.outer-frame {

    border: 18px solid #d8d6d1;

    margin: 20px;

}





/* HEADER AREA */
header {

    background-color: #5f93b1;

    padding: 40px 60px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


/* LOGO TEXT */
.logo {

    color: white;
    font-size: 90px;
}


/* NAV BAR */
nav ul {

    list-style: none;

    display: flex;

    gap: 35px;

    background-color: #e6e2dc;

    padding: 15px 30px;

}


/* NAV LINKS */
nav a {

    text-decoration: none;

    color: #5f93b1;

    font-size: 30px;
}


/* MAIN BLUE AREA */
.main-section {

    display: flex;

    justify-content: space-between;

    background-color: #3f7392;

    padding: 60px;

}


/* LEFT FORM AREA */
.form-area {

    width: 55%;

    color: white;
}


/* CONTACT TITLE */
.form-area h2 {

    font-size: 70px;

    margin-bottom: 40px;
}


/* FORM LABELS */
label {

    display: block;

    font-size: 30px;

    margin-top: 25px;
}


/* INPUT BOXES */
input {

    width: 80%;

    height: 55px;

    margin-top: 12px;

    background-color: #e6e2dc;

    border: none;
}


/* RIGHT CONTACT BOX */
.contact-card {

    width: 30%;

    background-color: #e6e2dc;

    padding: 35px;

    color: #3f7392;
}


/* CONTACT TITLE */
.contact-card h3 {

    font-size: 34px;

    margin-bottom: 30px;
}


/* CONTACT TEXT */
.contact-card p {

    font-size: 26px;

    margin-bottom: 30px;
}


/* FOOTER BAR */
footer {

    height: 130px;

    background-color: #254f6a;
}

/* This section styles your text container */
  .welcome-section {
    background-color: #4a748c; /* Matches your blue background */
    padding: 40px;
    color: #ffffff;           /* Makes the text pure white */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 800px;
  }

  .welcome-section h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: bold;
  }

  .welcome-section p {
    font-size: 1.1rem;
    line-height: 1.6;        /* Adds space between lines for readability */
    text-align: justify;     /* Optional: makes the edges even */
  }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: white; 
            border: 15px solid rgb(245, 245, 235);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgb(86, 150, 218); 
            padding: 20px 40px;
        }

        .header h1 {
            color: white;
            font-size: 36px;
            margin: 0;
        }

        .navbar {
            display: flex;
            background-color: white; 
            border-radius: 5px; 
            overflow: hidden; 
        }

        .navbar a {
            color: rgb(70, 130, 180); 
            text-decoration: none;
            padding: 15px 20px;
            font-size: 18px;
            border-right: 1px solid rgb(220, 220, 220); 
        }

        .navbar a:last-child {
            border-right: none;
        }

        .gallery-container {
            background-color: rgb(54, 114, 160); 
            padding: 40px;
            color: white;
        }

        .gallery-container h2 {
            font-size: 32px;
            margin-bottom: 30px;
        }

        .photo-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr); 
            gap: 20px;
        }

        .photo-item {
            text-align: left;
        }

        .photo-item img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .photo-item p {
            font-size: 14px;
            line-height: 1.4;
            margin: 0;
        }
         

        /* =========================================
   GENERAL PAGE SETTINGS
========================================= */

body {
    margin: 0;
    background-color: #e5e3dd; /* light gray outside */
    font-family: 'Imbue', serif;
}


/* =========================================
   WRAPPER (blue container)
========================================= */

.wrapper {
    width: 95%;
    margin: 20px auto;
    background-color: #3b6f8f; /* main blue */
}


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

header {
    background-color: #5d93b2; /* lighter blue */
    padding: 30px;
    display: flex;
    align-items: center;
}


/* NAME (Carson Mays) */

.logo {
    color: white;
    font-size: 70px;
    margin: 0;
    flex: 1;
}


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

nav {
    background-color: #e5e3dd;
    padding: 10px 20px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

nav li {
}

nav a {
    text-decoration: none;
    color: #5d93b2;
    font-size: 28px;
}

nav a:hover {
    text-decoration: underline;
}


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

main {
    padding: 40px 60px;
}


/* My Links Title */

h2 {
    color: white;
    font-size: 70px;
    margin-bottom: 20px;
}


/* Paragraph Text */

p {
    color: white;
    font-size: 32px;
    margin-bottom: 25px;
}


/* Links */

p a {
    color: white;
    text-decoration: underline;
}

p a:hover {
    color: #cdd9e2;
}


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

footer {
    background-color: #1f4f6a; /* darker blue */
    height: 120px;
}