/* ==========================================
   GOOGLE FONT NOTE
   Make sure this is linked in your HTML:

   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
========================================== */


/* ==========================================
   GLOBAL RESET
   Removes default browser spacing
========================================== */

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


/* ==========================================
   BODY
   Controls page background + default font
========================================== */

body {
    background-color: #a9b9cf; /* light blue background */
    font-family: 'Poppins', sans-serif;
}
.home-section {
    display: flex;
    align-items: center;      /* vertically aligns image and text */
    justify-content: space-between;
    gap: 60px;                /* space between text and image */
    padding: 60px;
}

.home-text {
    flex: 1;
}

.home-image {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* pushes image to the right */
}

.home-image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px; /* optional if you want rounded corners */
}
.home-title {
    color: #FFF;
    font-family: Poppins;
    font-size: 52px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.home-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* THIS keeps it left */
}


/* ==========================================
   WRAPPER
   Centers entire website
========================================== */

#wrapper {
    width: 90%;
    margin: 0 auto; /* centers horizontally */
}


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

header {
    background-color: #EDFFBF; /* light green */
    padding: 30px;
}

/* Your Name (Main Title) */
header {
    background-color: #d8e9b9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
}

/* Maguire Simms Typography */
.logo {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 64px;
    font-style: italic;
    font-weight: 200;
    line-height: normal;
}


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

nav {
    margin-top: 20px;
}

/* Navigation links */
nav a {
    text-decoration: none; /* removes underline */
    color: rgb(2, 2, 2);
    margin-right: 25px;
    font-weight: 600;
    font-size: 16px;
}

/* Hover effect */
nav a:hover {
    color: #4a5d7a;
}


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

main {
    background-color: #6e84a3; /* blue section */
    padding: 60px;
}


/* ==========================================
   ABOUT LAYOUT
   Text + Image side-by-side
========================================== */

.about-container {
    display: flex;               /* makes columns */
    align-items: center;         /* vertical alignment */
    justify-content: space-between;
}


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

.about-text {
    width: 50%;
    color: #ffffff;
}

/* About heading */
.about-text h2 {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 30px;

    /* No outline on heading */
    -webkit-text-stroke-width: 0px;
}

/* Paragraph Styling (Body Text) */
.about-text p {
    font-size: 36px;
    font-weight: 400;
    line-height: normal;
    color: #FFF;

    /* BLACK OUTLINE ONLY ON BODY TEXT */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
}


/* ==========================================
   IMAGE SECTION
========================================== */

.about-image {
    width: 40%;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}



/* =========================
   GLOBAL STYLES
========================= */

/* Removes default spacing from browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Sets font and background color */
body {
    font-family: Arial, sans-serif;
    background-color: #aebcd0; /* light blue background */
}


/* =========================
   HEADER
========================= */
/* Your Name (Main Title) */
header h1 {
   color: #ffffff;
font-family: "Instrument Sans";
font-size: 64px;
font-weight: 400;
line-height: normal;
}

/* Top green bar */
header {
    background-color: #c8dca6; /* light green */
    padding: 20px 0;
}

/* Keeps content centered and spaced */
.header-container {
    width: 90%;
    margin: 0 auto;

    /* Flexbox makes layout horizontal */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Your name styling */
.logo {
    font-size: 36px;
    font-weight: 300;
    color: #333;
}


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

nav ul {
    list-style: none;

    /* Horizontal nav */
    display: flex;
    gap: 25px;
}

/* Navigation links */
nav a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

/* Active page (Contact) */
nav a.active {
    color: #5b6f8f; /* bluish highlight */
}


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

.contact-section {
    width: 90%;
    margin: 0 auto;

    /* Big blue box */
    background-color: #667a97;
    height: 500px;

    padding: 40px;
}

/* Contact title */
.contact-section h2 {
    color: white;
    font-size: 48px;
}




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

footer {
    background-color: #c8dca6; /* same green as header */
    height: 120px;

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

    font-size: 14px;
}



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

/* Body Background */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #b7c6db;
}

/* Main Wrapper */
.wrapper {
    width: 90%;
    margin: 40px auto;
    background-color: #000000; 
    padding-bottom: 80px;
}

/* ================= HEADER ================= */
/* Your Name (Main Title) */
header h1 {
   color: #ffffff;
font-family: "Instrument Sans";
font-size: 64px;
font-weight: 400;
line-height: normal;
}
header {
    background-color: #d8e9b9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
}

.logo {
    font-size: 42px;
    font-style: italic;
    font-weight: 400;
}

nav a {
    text-decoration: none;
    color: rgb(7, 7, 7);
    font-weight: 600;
    margin-left: 35px;
    font-size: 18px;
    transition: 0.3s ease;
}

nav a:hover {
    color: #5c6f8f;
}

nav a.active {
    color: #5c6f8f;
}

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

.contact-section {
    background-color: #667b9a;
    padding: 80px 90px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.contact-section {
    background-color: #6B7F99; /* your blue */
    width: 100%;
    min-height: 100vh;
}

/* Left Side Form */
.contact-form {
    width: 45%;
    color: rgb(50, 12, 12);
}

.contact-form h1 {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 40px;
}

.contact-form label {
    display: block;
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 12px;
}

.contact-form input {
    width: 100%;
    padding: 16px;
    border: none;
    background-color: #d8e9b9;
    font-size: 16px;
    outline: none;
}

/* Right Contact Info Box */
.contact-info {
    width: 40%;
    background-color: #d8e9b9;
    padding: 45px;
}

.contact-info h2 {
    font-size: 38px;
    color: #4e5f7a;
    margin-bottom: 10px;
}

.contact-info hr {
    border: none;
    height: 3px;
    background-color: #4e5f7a;
    width: 60%;
    margin-bottom: 35px;
}

.contact-info p {
    font-size: 22px;
    color: #4e5f7a;
    margin-bottom: 35px;
}



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

/* BODY */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #b7c6db;
}

/* MAIN WRAPPER */
.wrapper {
    width: 90%;
    margin: 40px auto;
    background-color: #d8e9b9;
    padding-bottom: 80px;
}

/* ================= HEADER ================= */
header {
    background-color: #EDFFBF; /* light green */
    padding: 30px;
}

/* Your Name (Main Title) */
header h1 {
   color: #ffffff;
font-family: "Instrument Sans";
font-size: 64px;
font-weight: 400;
line-height: normal;

    /* No outline on header */
    -webkit-text-stroke-width: 0px;
}

nav a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-weight: 600;
    margin-left: 35px;
    font-size: 18px;
    transition: 0.3s ease;
}

nav a:hover {
    color: #5c6f8f;
}

nav a.active {
    color: #5c6f8f;
}

/* ================= GALLERY SECTION ================= */

.gallery-section {
    background-color: #667b9a;
    padding: 70px 70px 60px 70px;
}

.gallery-section h1 {
    color: white;
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 40px;
}

/* GRID */
.gallery-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

/* GALLERY ITEM */
.gallery-item {
    width: 19%;
    color: white;
}

.gallery-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    margin-bottom: 20px;
}

.gallery-item p {
    font-size: 18px;
    line-height: 1.5;
}

/* BOTTOM BAR */
.bottom-bar {
    height: 100px;
    background-color: #d8e9b9;
}



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

/* BODY */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #b7c6db;
}

/* WRAPPER */
.wrapper {
    width: 90%;
    margin: 40px auto;
    background-color: #cfe3a5;
    padding-bottom: 80px;
}

/* ================= HEADER ================= */
.logo {
    color: #ffffff;
    font-family: "Instrument Sans";
    font-size: 64px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
}
header {
    background-color: #d8e9b9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
}

.logo {
    font-size: 42px;
    font-style: italic;
    font-weight: 400;
}

nav a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-weight: 600;
    margin-left: 35px;
    font-size: 18px;
    transition: 0.3s ease;
}

nav a:hover {
    color: #5c6f8f;
}

nav a.active {
    color: #5c6f8f;
}

/* ================= LINKS SECTION ================= */

.links-section {
    background-color: #667b9a;
    padding: 80px 80px 100px 80px;
}

.links-container {
    display: flex;
    gap: 120px;
}

/* LEFT TITLE */
.links-container h1 {
    color: #FFF;
    font-size: 52px;
    font-weight: 700;
}

/* RIGHT LINKS */
.links-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Typography you requested */
.links-list p {
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Underlined Link Typography */
.links-list a {
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;

    transition: 0.3s ease;
}

.links-list a:hover {
    opacity: 0.75;
}

/* BOTTOM BAR */
.bottom-bar {
    height: 120px;
    background-color: #d8e9b9;
}


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

/* BODY BACKGROUND */
body {
    background-color: #b7c6db;
    font-family: 'Poppins', sans-serif;
}

/* WRAPPER */
.wrapper {
    width: 90%;
    margin: 40px auto;
    background-color: #cfe3a5;
    padding-bottom: 80px;
}

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


/* Adjust nav inside box */
nav {
    display: flex;
    gap: 40px;
}

nav a {
    text-decoration: none;
    color: rgb(3, 3, 3);
    font-weight: 600;
    font-size: 18px;
}

header {
    background-color: #d8e9b9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
}

/* Maguire Simms Typography */
.logo {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 64px;
    font-style: italic;
    font-weight: 200;
    line-height: normal;
}

/* Navigation */
nav a {
    text-decoration: none;
    color: rgb(9, 9, 9);
    font-weight: 600;
    margin-left: 35px;
    font-size: 18px;
    transition: 0.3s ease;
}
h1 {
    color: #FFFFFF;
}


nav a:hover {
    color: #5c6f8f;
}

nav a.active {
    color: #5c6f8f;
}

/* ================= MEDIA SECTION ================= */

.media-section {
    background-color: #667b9a;
    padding: 80px;
}

/* Section Title */
.media-section h1 {
    color: #FFF;
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 50px;
}

/* Media Box (Exact Figma Specs) */
.media-box {
    width: 960px;
    height: 540px;
    background: #FFF;
    margin-left: 220px; /* visually centered similar to Figma */
}

.media-box {
    width: 300px;       /* adjust if needed */
    margin: 0 auto;     /* centers it */
}

.media-box video {
    width: 100%;
    border-radius: 8px; /* optional - makes it look cleaner */
}

/* Bottom Bar */
.bottom-bar {
    height: 120px;
    background-color: #d8e9b9;
}