/* HEADER / NAV / FOOTER */
header, 
nav, 
footer {
    background-color: #181B22; /* modern dark panel */
    color: #E5E7EB; /* soft professional white */
    text-align: center;
    width: 100%;
    height: auto;
    padding: 10px 0;
}
/* =====================
   BODY
===================== */
/* BODY */
body {
    font-family: 'Georgia', Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #0F1117; /* modern dark background */
    color: #E5E7EB;
}

/* MAIN */
main {
    background-color: #0F1117;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* =====================
   STYLED BOXES
===================== */
.style1 {
    background: #edf1f7;      /* var(--primary-blue) */
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

.style2fortext {
    background: #181B22;      /* var(--bg-secondary) */
    text-align: center;
    font-size: 1rem;
    margin: 50px;
    color: #E5E7EB;           /* var(--text-main) */
    letter-spacing: 2px;
}

/* NAV*/

nav a {
    color:  #E5E7EB;           /* var(--primary-blue) */
    margin: 0 10px;
}

nav a:hover {
    color: #93C5FD;           /* var(--soft-blue) */
    text-decoration: none;
}

/* =====================
   SECTION
===================== */
section {
    border: 1px #3B82F6;      /* var(--primary-blue) */
    padding: 20px;
    margin: 20px auto;
    max-width: 800px;
    background: #1F242C;      /* var(--surface) */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

ul {
    list-style-position: inside;
}

/* =====================
   BUTTONS
===================== */
button {
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
}

.btn-hover:hover {
    background: #60A5FA;      /* var(--primary-blue-hover) */
}

.btn-glow {
    background: #3B82F6;      /* var(--primary-blue) */
    color: #E5E7EB;           /* var(--text-main) */
    border-radius: 5px;
    transition: box-shadow 0.3s;
}

.btn-glow:hover {
    box-shadow: 0 0 10px #3B82F6; /* var(--primary-blue) */
}

/* =====================
   PHOTO GALLERY
===================== */
.gallery {
    display: flex; /* Aligns images in a horizontal line */
    flex-wrap: wrap; /* Moves images to the next line if there isn't enough space */
    gap: 50px; /* Adds space between each image */
    justify-content: center;
}

.gallery img {
    width: 180px; /* Sets each image's width */
    height: 120px; /* Sets each image's height */
    object-fit: cover; /* Ensure the image filles the box without distortion */
    border-radius: 6px; /* Rounds the image corners slightly */
    transition: all 0.3s; /* Smoothly animates changes on hover */ 
}

/* Hover Effect 1: Rotate and Dropshadow */
.hover-one:hover {
    transform: rotate(360deg) scale(1.65); /* Rotates the image by 5 degrees and enlarges slightly */
    box-shadow: 0 8px 15px gray; /* Adds a soft shadow behind the image (when hovered) */
    opacity: 1; /* Keeps full opacity throughout transition */
}

/* Hover Effect 2: Grayscale to Color Fade */
.hover-two:hover {
    filter: grayscale(100%); /* Starts the image in black and white */
    transition: filter 0.4s, transform 0.3s; /*Smoothly animates both filter (gray) and movement */
    transform: scale(1.65); /* Slightly enlarges the image */
}

/* Hover Effect 3: Scale and Fade */
.hover-three:hover {
    transform: scale(1.65); /* Slightly enlarges image on hover */
    opacity: 0.5; /* Makes the image slightly transparent */
}

/* =====================
   QUOTE BOX
===================== */
/* Project 3: Styled Quote Box */
.quote-section{
    text-align: center; /* Centers all text and elements inside the section */
    max-width: 30%; /* Limits the section's width to 30% of the page */
}

.quote-section h3{
    color: #ffffff; /* Changes the H3 text to a white color */
    font-family: 'Merriweather', serif; /* Uses Merriweather and the classic serif font for a refined look */
    margin-bottom: 15px; /* Adds space below the heading */
    text-transform: uppercase; /* Makes all heading 3 letters uppercase */
    letter-spacing: 1px; /* Adds small spacing between letters for readability/cool factor*/
}
/* Main quote box styling */
.quote-box{
    font-family: 'Georgia', serif; /* Uses Georgia and the classic serif font for a refined look */
    font-style: italic; /* Italicizes text to make it look like an actual quote */
     background: #181B22;     /* var(--bg-secondary) */
    color: #E5E7EB;           /* var(--text-main) */
    background-blend-mode: multiply; /* Blends the texture softly into the color */
    padding: 20px 30px; /* Adds inner spacing around the quote */
    border-left: 6px solid#181B22; /* Adds a thick, modern darkm tripe on the left */
    border-radius: 10px; /* Rounds the corners slightly for a softer look */
    box-shadow: 0 4px 10px #93C5FD; /* Adds a light shadow for depth */
    color: #ffffff; /* Sets the quote text to a white */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.quote-box:hover{
    transform: translateY(-4px); /* Slightly lift the box when hovered */
    box-shadow: 0 6px 14px rgb(255, 254, 254); /* Makes the shadow deeper to enhance the lift */
    background-image: linear-gradient(135deg, #b7a68f, #d9cbb4), url('https://www.transparenttextures.com/patterns/black-paper.png');
}

.quote-box cite{
    display: block; /* Makes the citation appear on its own line */
    margin-top: 12px; /* adds space above the author's name */
    font-style: normal; /* Removes italics to contrast the quote text */
    font-weight: bold; /* Makes the author's name stand out by making it bold */
    color: #ffffff; /*Sets a muted olive-green tone for the author name */
    text-align: right; /* Aligns the author's name to the right edge */
    letter-spacing: 0.5px; /* Adds small spacing between letters for balance */
}

/* =====================
   BOXES
===================== */
.box1 {
    display: inline-block;
    vertical-align: top;
    margin: 15px;
    padding: 35px 25px;
    width: 220px;
    background: #181B22;
    color: #fcfdff;
    font-size: 20px;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    border-radius: 10px;
    border: 2px solid #93C5FD; /* soft modern blue accent */
    box-shadow: 0 4px 12px rgba(147, 197, 253, 0.2);
    text-align: center;
}