*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/* Testing - red elemetn border */
/* * {
    outline: 1px solid red;
} */

html, body {
    overflow-x: hidden;
}

body{
    font-family: Google Sans, Helvetica, Arial, sans-serif;
    color:#111;
    background:#ffffff;
    line-height:1.6;
}

/* ---------- Link Hover Effect ---------- */
a {
    position: relative;
    text-decoration: none;
    color: inherit;
}
a::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0%;
    height: 3px;

    background-color: #DA1212;

    transition: width 0.25s ease;
}
a:hover::after {
    width: 100%;
}

img{
    width:100%;
    height: auto;
    display:block;
}

/* ---------- Layout ---------- */
header,
main {
    max-width: 1800px;
    width: 95%;
    margin: 0 auto;
}

/* ---------- Header ---------- */
header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:1rem 0;
}
.brand{
    display:flex;
    align-items:center;
    gap:1rem;

    text-decoration:none;
    color:inherit;
}
.brand img{
    height:72px;
    width:auto;
    display:block;
}
.name{
    display:flex;
    flex-direction:column;

    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size:1.5rem;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:#DA1212;
}

nav{
    display:flex;
    gap:2rem;
}
nav a{
    font-size:1.15rem;
    font-weight:500;
    transition:.2s;
}
nav a:hover{
    opacity:1;
}

/* ---------- Intro ---------- */
.intro{
    padding:6rem 0 6rem;
    text-align: center;
}

.intro img {
    height:140px;
    max-width: 100%;
    width:auto;
    display:block;
    margin: 0 auto 6rem;
}

.intro p{
    max-width:1100px;
    margin: 0 auto;
    margin-bottom: 1rem;

    font-size:clamp(1.8rem,3vw,2.8rem);
    line-height:1.35;
    letter-spacing:-0.03em;
}

.highlight{
    text-decoration-line: underline;
    text-decoration-color:#DA1212;
    text-decoration-thickness:5px;
    text-underline-offset:8px;
}

/* ---------- Projects ---------- */

.work{
    padding:6rem 0;
}

.work h2{
    text-align:center;

    font-size:4rem;
    margin-bottom:4rem;
}

.project-grid{
    display:grid;

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

    gap:4rem 3rem;
    margin:0 auto;
}

.project-card{
    text-align:center;
}

.project-card img{
    width:75%;
    object-fit:cover;
    margin: 0 auto;

    border-radius:20px;
    border:5px solid transparent;

    transition:
        transform .3s ease,
        border-color .2s ease;
}

.project-card img:hover{
    transform:scale(1.02);
    border-color:#DA1212;
}

.project-card a::after{
    display:none;
}

.project-card h3{
    font-size:2rem;

    margin-top:1.5rem;
    margin-bottom:.75rem;

    letter-spacing:-0.02em;
}

.project-card p{
    color:#666;
    max-width:450px;
    line-height:1.6;
    margin: 0 auto;
}

/* ---------- Footer ---------- */

footer{
    border-top:5px solid #000000;
    background:#fff;
    padding:3rem 0;
}

.footer-inner{
    width:95%;
    max-width:1800px;
    margin:0 auto;

    display:flex;
    flex-direction: column;
    align-items:center;
    text-align: center;

    gap: 1.5rem;
}

/* logo image */
/* .footer-brand img{
    height:35px;
    width:auto;
    display:block;
} */

.socials{
    display:flex;
    align-items:center;
    gap:2rem;
}

.socials a{
    font-size:2.1rem;
    color:#555;
}

.socials a:hover{
    color:#DA1212;
}

.copyright{
    font-size:1.2rem;
    color:#555;
    margin-top:0.5rem;
}


/* ---------- Mobile ---------- */

@media(max-width:800px){

    header{
        flex-direction:column;
        gap:1.5rem;
    }

    nav{
        gap:1rem;
        flex-wrap:wrap;
        justify-content:center;
    }

    .project{
        grid-template-columns:1fr;
        gap:2rem;
    }

     .project-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }

    footer{
        flex-direction:column;
        gap:1rem;
    }
}

/* --------------------ABOUT-------------------- */
/* ---------- About Page ---------- */


.about-intro{
    display:grid;
    grid-template-columns:500px 1fr;
    gap:3rem;
    padding:3rem 0;
    align-items:center;
}

.about-image img{
    width:100%;
    max-width:500px;
    border-radius:12px;
    display:block;
}

.about-text h1{
    font-size:2.8rem;
    margin-bottom:2rem;
}

.about-text p{
    font-size:1.1rem;
    line-height:1.7;
    color:#555;
    margin-bottom:1.5rem;
}


/* ---------- Interests ---------- */

.interests{
    padding:2rem 0 5rem;
}

.interests h2{
    text-align:center;
    font-size:2.5rem;
    margin-bottom:4rem;
}

.interest-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:3rem;
}

.interest-grid h3{
    font-size:1.5rem;
    margin-bottom:1rem;
}

.interest-grid p{
    color:#666;
    line-height:1.7;
}

.interest-card{
    display:grid;
    grid-template-columns:80px 1fr;
    gap:1.5rem;
    align-items:start;
}

.interest-icon{
    display:flex;
    justify-content:center;
    align-items:center;

    font-size:3.5rem;
    color:#DA1212;
}

.interest-content h3{
    margin:0 0 .75rem;
    font-size:1.5rem;
}

.interest-content p{
    margin:0;
    color:#666;
    line-height:1.7;
}

/* .......................................PROJECT...................................................... */
/* ==========================================================
   PROJECT PAGE
   ========================================================== */

/* ---------- General ---------- */

.project-hero,
.text-section,
.objectives,
.process,
.feature-section,
.findings{
    max-width: 1600px;
    margin: 0 auto;
    padding:4rem 0;
}

.section-divider{
    width:100%;
    height:1px;
    background:#e9e9e9;
    margin:0 auto;
}

.section-intro{
    max-width:850px;
    margin:1.5rem auto 4rem;
    text-align:center;
    color:#666;
    font-size:1.25rem;
    line-height:1.8;
    /* margin-bottom: 1rem; */
}


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

.project-hero{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:5rem;
    align-items:center;
}

.project-label{
    color:#DA1212;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:1rem;
}

.project-hero h1{
    font-size:clamp(3rem,5vw,5rem);
    line-height:1;
    margin-bottom:2rem;
    letter-spacing:-.04em;
}

.project-description{
    font-size:1.35rem;
    color:#555;
    line-height:1.8;
    margin-bottom:3rem;
}

.project-meta{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    margin-bottom:3rem;
}

.meta-title{
    display:block;
    font-size: 1.5em;
    color:#DA1212;
    font-weight:700;
    margin-bottom:.35rem;
}

.meta-item p{
    font-size: 1.15em;
    color:#555;
}

.hero-buttons{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
    padding:.9rem 1.8rem;
    border-radius:8px;
    font-weight:600;
    transition:.25s;
}

.primary-btn{
    background:#DA1212;
    color:white;
}

.secondary-btn{
    border:2px solid #DA1212;
    color:#DA1212;
}

.primary-btn:hover{
    background:#b60f0f;
}

.secondary-btn:hover{
    background:#DA1212;
    color:white;
}

/* remove underline animation */
.hero-buttons a::after{
    display:none;
}


/* ==========================================================
   Hero Images
   ========================================================== */

.hero-images{
    position:relative;
    min-height:800px;
}

.hero-images img{
    position:absolute;
    width:80%;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.hero-images img:first-child{
    top:0;
    left:0;
}

.hero-images img:last-child{
    bottom:0;
    right:0;
}


/* --------------------------------------------------------------- */

/* ==========================================================
   OVERVIEW
   ========================================================== */

.overview-section{
    max-width: 1600px;
    margin: 0 auto;
    padding:3rem 0;
    margin-bottom: 0em;
}

.overview-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:2.5rem;
}

.info-card{
    background:#fff8f8;
    padding:2.5rem;
    border-radius:20px;
    transition:.3s;
}

.info-card h2{
    color:#DA1212;
    text-align: center;
    font-size:1.5rem;
    margin-bottom:1rem;
    letter-spacing:-0.02em;
}

.info-card p{
    color:#555;
    font-size:1.25rem;
    line-height:1.9;
    margin-bottom:1rem;
}

.info-card p:last-child{
    margin-bottom:0;
}

/* ---------- Mobile ---------- */

@media(max-width:900px){

    .overview-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   OBJECTIVES
   ========================================================== */

.objectives{
    text-align:center;
}

.objectives h2{
    font-size:3rem;
    margin-bottom:4rem;
}

.objective-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}

.objective-card{
    padding:2.5rem;
    border:2px solid #e5e5e5;
    border-radius:14px;
    transition:.3s;
}

.objective-card:hover{
    transform:translateY(-5px);
    border-color:#DA1212;
}

.objective-card h3{
    margin-bottom:1rem;
    font-size:1.75rem;
}

.objective-card p{
    color:#666;
    font-size: 1.25em;
    line-height:1.8;
    margin-bottom: 1rem;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.process{
    text-align:center;
}

.process h2{
    font-size:3rem;
}

.process p{
    font-size: 1.25em;
}

.process-image{
    max-width:1600px;
    margin:0 auto;
    /* border-radius:14px;
    box-shadow:0 15px 40px rgba(0,0,0,.08); */
}


/* ==========================================================
   FEATURE SECTIONS
   ========================================================== */

.feature-section{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
}

.feature-section.reverse{
    direction:rtl;
}

.feature-section.reverse>*{
    direction:ltr;
}

.feature-image img{
    width: 100%;
}

.feature-image-color img{
    width: 75%;
}

.feature-text h2{
    font-size:2.5rem;
    margin-bottom:2rem;
}

.feature-heading h2{
    font-size:3rem;
    margin-bottom:1rem;
    text-align:center;
    margin: 0 auto;
}

.feature-text p{
    color:#555;
    line-height:1.9;
    margin-bottom:1.5rem;
    font-size:1.25rem;
}


/* ==========================================================
   FINDINGS
   ========================================================== */

.findings{
    text-align:center;
}

.findings h2{
    font-size:3rem;
    margin-bottom:4rem;
}

.finding-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
    margin-bottom:3rem;
}

.finding{
    padding:2.5rem;
    border:2px solid #e5e5e5;
    border-radius:14px;
    transition:.3s;
}

.finding:hover{
    transform:translateY(-5px);
    border-color:#DA1212;
}

.finding h3{
    margin-bottom:1rem;
    font-size:1.75rem;
}

.finding p{
    color:#666;
    font-size: 1.25em;
    line-height:1.8;
    margin-bottom: 1rem;
}

blockquote{
    max-width:850px;
    margin:0 auto;
    font-size:2rem;
    font-style:italic;
    line-height:1.5;
    color:#333;
}

blockquote span{
    display:block;
    margin-top:1rem;
    font-size:1.5rem;
    color:#777;
    font-style:normal;
    margin-bottom: 3rem;
}

.highlight-block{
    display: inline;
    margin:0 auto;
    font-size:2rem;
    font-style:italic;
    color:#333;
    text-decoration-line: underline;
    text-decoration-color:#DA1212;
    text-decoration-thickness:5px;
    text-underline-offset:8px;
}


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

.gallery{
    text-align:center;
    max-width: 1600px;
    margin: 0 auto;
    padding:0rem 0;
}

.gallery h2{
    font-size:3rem;
    margin-bottom:1rem;
    margin-top: 0rem;
}

.gallery>p{
    max-width:850px;
    margin:0 auto 4rem;
    color:#666;
    line-height:1.8;
    font-size:1.25rem;
}

.gallery-grid{
    max-width: 1600px;
    width:100%;
    margin: 0 auto;
    margin-bottom: 4rem;
    /* display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2rem; */
}

.gallery-grid img{
    max-width: 1600px;
    width:100%;
    margin: 0 auto;
    margin-bottom: 4rem;
    /* border-radius:14px; */
    /* box-shadow:0 20px 50px rgba(0,0,0,.08);
    transition:.3s; */
}

.gallery-grid-colormaker img{
    max-width: 1600px;
    width:70%;
    margin: 0 auto;
    margin-bottom: 4rem;
    /* border-radius:14px; */
    /* box-shadow:0 20px 50px rgba(0,0,0,.08);
    transition:.3s; */
}

/* .gallery-grid img:hover{
    transform:translateY(-8px);
} */


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1000px){

.project-hero{

    grid-template-columns:1fr;
    gap:4rem;

}

.hero-images{

    min-height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;

}

.hero-images img{

    position:static;
    width:100%;

}

.text-section{

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

}

.feature-section{

    grid-template-columns:1fr;

}

.feature-section.reverse{

    direction:ltr;

}

.objective-grid{

    grid-template-columns:1fr;

}

.finding-list{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

}


@media(max-width:700px){

.project-hero h1{

    font-size:2.8rem;

}

.project-description{

    font-size:1.15rem;

}

.objectives h2,
.process h2,
.findings h2,
.gallery h2{

    font-size:2.3rem;

}

.section-title h2{

    font-size:2rem;

}

.feature-text h2{

    font-size:2rem;

}

blockquote{

    font-size:1.5rem;

}

.hero-buttons{

    flex-direction:column;

}

.primary-btn,
.secondary-btn{
    text-align:center;
}

}

/* ==========================================================
   IMAGE GALLERY
   ========================================================== */

.image-gallery{
    padding:0rem 0;
    text-align:center;
}

.image-gallery h2{
    font-size:3rem;
    margin-bottom:4rem;
}

.image-grid img{
    max-width: 1600px;
    width:100%;
    margin: 0 auto;
    margin-bottom: 4rem;
}

/* ---------- Tablet ---------- */

@media(max-width:1000px){
    .image-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


/* ---------- Mobile ---------- */

@media(max-width:700px){
    .image-gallery h2{
        font-size:2.3rem;
    }
    .image-grid{
        grid-template-columns:1fr;
    }
}

/* ---------- Mobile ---------- */


@media(max-width:800px){
    .about-intro{
        grid-template-columns:1fr;
    }
    .intro img {
        height:auto;
        width:80%;
        max-width:300px;
        margin-bottom:3rem;
    }
    .interest-grid{
        grid-template-columns:1fr;
    }
}

/* ==========================================================
   BACK LINK
   ========================================================== */

.back-link{
    margin-top:5px;
    margin-bottom: -25px;
}

.back-link a{
    display:inline-flex;
    align-items:center;
    gap:.6rem;

    color:#666;
    font-size:1rem;
    font-weight:500;

    transition:.25s;
}

.back-link a::after{
    bottom: -3px;
}

.primary-btn::after{
    display:none;
}