/* =====================================================
   Kristina Stringham Portfolio
   Modern Creative Portfolio
   Version 2
===================================================== */

/* ===========================
   RESET
=========================== */

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

/* ===========================
   GOOGLE FONT
=========================== */

body{

    font-family:'Poppins',sans-serif;

    background:#FAFAFA;

    color:#333;

    line-height:1.7;

}


/* ===========================
   BRAND COLORS
=========================== */

:root{

    --purple:#6F2DBD;
    --magenta:#C2187A;
    --teal:#14B8B4;
    --green:#2FA772;

    --charcoal:#202124;
    --dark:#2D2D2D;

    --background:#FAFAFA;
    --white:#FFFFFF;

    --text:#333333;
    --light:#666666;

    --shadow:0 15px 40px rgba(0,0,0,.08);

}

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

a{

    text-decoration:none;

    transition:.3s;

    color:inherit;

}

/* ===========================
   IMAGES
=========================== */

img{

    max-width:100%;

    display:block;

}

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

header{

    position:sticky;

    top:0;

    z-index:999;

    background:rgba(32,33,36,.95);

    backdrop-filter:blur(10px);

    box-shadow:0 6px 20px rgba(0,0,0,.15);

}

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

.navbar{

    max-width:1200px;

    margin:auto;

    padding:18px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo img{

    height:75px;

    transition:.3s;

}

.logo img:hover{

    transform:scale(1.05);

}

.nav-links{

    display:flex;

    list-style:none;

    gap:35px;

}

.nav-links a{

    color:white;

    font-weight:500;

    letter-spacing:.5px;

}

.nav-links a:hover{

    color:var(--teal);

}

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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:90px 30px;

    color:white;

    background:

    radial-gradient(circle at top left,
    rgba(111,45,189,.35),
    transparent 45%),

    radial-gradient(circle at bottom right,
    rgba(20,184,180,.25),
    transparent 40%),

    radial-gradient(circle at center right,
    rgba(194,24,122,.18),
    transparent 35%),

    linear-gradient(
        135deg,
        #202124,
        #2D2D2D
    );

}

.hero-text{

    max-width:900px;

}

.hero h1{

    font-size:4.8rem;

    font-weight:700;

    margin-bottom:15px;

}

.hero h2{

    font-weight:500;

    color:#D8B4FE;

    margin-bottom:30px;

}

.hero p{

    font-size:1.2rem;

    color:#E5E7EB;

    max-width:700px;

    margin:auto;

    margin-bottom:45px;

}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.button{

    background:var(--magenta);

    color:white;

    padding:16px 34px;

    border-radius:40px;

    font-weight:600;

    box-shadow:0 12px 30px rgba(194,24,122,.35);

}

.button:hover{

    background:var(--purple);

    transform:translateY(-4px);

}

.secondary{

    background:transparent;

    color:var(--teal);

    border:2px solid var(--teal);

}

.secondary:hover{

    background:var(--teal);

    color:white;

}

/* ===========================
   GENERAL SECTIONS
=========================== */

section{

    padding:90px 40px;

}

section h2{

    text-align:center;

    font-size:2.5rem;

    margin-bottom:20px;

    color:var(--charcoal);

}

/* ===========================
   PROJECTS
=========================== */

.projects{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}

.card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

    border-top:5px solid var(--magenta);

}

.card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.card h3{

    padding:20px 20px 10px;

    color:var(--charcoal);

}

.card p{

    padding:0 20px 25px;

    color:var(--light);

}

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

.about-preview{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.about-preview p{

    color:var(--light);

    margin-bottom:35px;

}

/* ===========================
   SKILLS
=========================== */

.skill-list{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

    max-width:1000px;

    margin:auto;

}

.skill-list span{

    background:white;

    padding:14px 24px;

    border-radius:50px;

    box-shadow:var(--shadow);

    font-weight:500;

    transition:.3s;

}

.skill-list span:hover{

    background:var(--teal);

    color:white;

}

/* ======================================
   SKILLS & TOOLS GROUPS
====================================== */

.skills-group {
    max-width: 1000px;
    margin: 0 auto 45px;
}

.skills-group h3 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--purple);
    font-size: 1.3rem;
}

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

footer{

    background:#202124;

    color:white;

    text-align:center;

    padding:50px;

}

footer p{

    margin:10px;

}

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

@media(max-width:900px){

.navbar{

    flex-direction:column;

    gap:20px;

}

.nav-links{

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}

.hero h1{

    font-size:3rem;

}

.hero h2{

    font-size:1.3rem;

}

}

@media(max-width:600px){

.hero{

    padding:60px 20px;

}

.hero h1{

    font-size:2.2rem;

}

.hero p{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.button{

    width:230px;

    text-align:center;

}

section{

    padding:70px 20px;

}

}
/* ==================================
   NEW HERO DESIGN
================================== */

.hero{

    position:relative;

    overflow:hidden;

}

/* Hero Content */

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

}

/* Logo */

.hero-logo{

    width:220px;

    margin:0 auto 40px;

    animation:float 6s ease-in-out infinite;

}

/* Heading */

.hero h1{

    font-size:4.5rem;

    line-height:1.1;

    margin-bottom:30px;

}

.hero h1 span{

    display:block;

    color:var(--teal);

}

.hero p{

    max-width:700px;

    margin:auto;

    font-size:1.2rem;

    line-height:1.8;

}

/* Decorative Circles */

.circle{

    position:absolute;

    border-radius:50%;

    opacity:.18;

    filter:blur(2px);

}

.circle-one{

    width:260px;
    height:260px;

    background:var(--purple);

    top:-70px;
    left:-70px;

}

.circle-two{

    width:180px;
    height:180px;

    background:var(--magenta);

    top:140px;
    right:90px;

}

.circle-three{

    width:220px;
    height:220px;

    background:var(--teal);

    bottom:-80px;
    left:120px;

}

.circle-four{

    width:130px;
    height:130px;

    background:var(--green);

    bottom:150px;
    right:-30px;

}

/* Floating Animation */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}
/* ======================================
   BRAND CLUSTER
====================================== */

.brand-cluster{

    position:relative;

    width:90px;

    height:70px;

    margin:0 auto 20px;

}

/* Base Dot */

.dot{

    position:absolute;

    width:26px;

    height:26px;

    border-radius:50%;

    animation:floatDots 6s ease-in-out infinite;

    box-shadow:0 8px 18px rgba(0,0,0,.12);

}
.dot::after{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.6);

    top:4px;

    left:5px;

}
/* Colors */

.purple{

    background:#6F2DBD;

    top:0;
    left:32px;

}

.teal{

    background:#14B8B4;

    bottom:0;
    left:10px;

    animation-delay:.4s;

}

.magenta{

    background:#C2187A;

    bottom:0;
    right:10px;

    animation-delay:.8s;

}

.green{

    background:#2FA772;

    top:22px;
    left:32px;

    width:18px;

    height:18px;

    animation-delay:1.2s;

}

/* Floating Animation */

@keyframes floatDots{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}
/* ======================================
   WHAT I DO
====================================== */

.services{

    max-width:1200px;

    margin:60px auto 0;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.service-card{

    background:white;

    border-radius:22px;

    padding:35px;

    box-shadow:var(--shadow);

    transition:.35s;

    text-align:center;

}

.service-card:hover{

    transform:translateY(-8px);

    border-top:5px solid var(--magenta);

}

.service-card h3{

    margin-bottom:20px;

    color:var(--purple);

}

.service-card p{

    color:var(--light);

    line-height:1.8;

}
/* Project Card Buttons */

.card .button{

    display:inline-block;

    margin:20px;

    padding:12px 24px;

    font-size:.95rem;

}
.section-intro{

    max-width:700px;

    margin:0 auto 50px;

    text-align:center;

    color:var(--light);

    font-size:1.1rem;

}
.button-group {

    display: flex;

    gap: 10px;

    margin-top: 20px;

    flex-wrap: wrap;

}

/* ======================================
   ARCHIVE / GRAPHIC DESIGN CARDS
====================================== */

.archive-card {
    display: flex;
    flex-direction: column;
}

.archive-thumbnail {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.archive-card .logo-thumbnail {
    object-fit: contain;
    background: #f7f5f2;
    padding: 1.25rem;
}

.archive-card .project-tags {
    margin-top: auto;
    margin-bottom: 1rem;
}

.archive-card .button {
    align-self: flex-start;
}
/* ======================================
   PROJECT TAGS
====================================== */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0.5rem 1.25rem;
    align-items: center;
}

.project-tags span {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(210, 27, 131, 0.35);
    border-radius: 999px;
    background: rgba(210, 27, 131, 0.08);
    color: #333;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
}
.project-label {
    display: inline-block;
    margin: 0.35rem 1.25rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
}
/* ======================================
   PORTFOLIO INTRODUCTION
====================================== */

.portfolio-intro {
    max-width: 750px;
    margin: 0 auto 35px;
    text-align: center;
    color: var(--light);
    font-size: 1.25rem;
    line-height: 1.8;
}
/* Portfolio Hero Spacing */

.portfolio-hero {
    padding: 70px 40px 55px;
    position: relative;
    overflow: hidden;
}

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

.about-content {
    max-width: 850px;
    margin: 0 auto;
}

.about-content p {
    color: var(--light);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 28px;
}

.about-content p:last-child {
    margin-bottom: 0;
}



/* ======================================
   ABOUT PAGE SECTION BACKGROUNDS
====================================== */

#about-introduction {
    background: #FAFAFA;
}

#background {
    background: #F5F3F7;
}

#about-skills {
    background: #F7F5F2;
}

#growth {
    background: #F2F8F8;
}

#where-going {
    background: #FAFAFA;
}

#about-contact {
    background: #F0EAF6;
    color: var(--charcoal);
    text-align: center;
    padding: 70px 40px;
}

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

#about-introduction h2,
#background h2,
#about-skills h2,
#growth h2,
#where-going h2 {
    margin-bottom: 40px;
}


/* ======================================
   ABOUT CONTACT
====================================== */

#about-contact {
    text-align: center;
    padding: 90px 40px;
}

#about-contact h2 {
margin-bottom: 20px;
color: var(--charcoal);
}

#about-contact p {
    max-width: 600px;
    margin: 0 auto 30px;
    color: var(--light);
    font-size: 1.1rem;
}


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

@media (max-width: 600px) {

    .about-content {
        max-width: 100%;
    }

    .about-content p {
        font-size: 1rem;
        line-height: 1.8;
    }

    #about-introduction,
    #background,
    #about-skills,
    #growth,
    #where-going {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #about-contact {
        padding: 70px 20px;
    }

}
/* ======================================
   ABOUT PAGE CONTENT
====================================== */

.about-content {
    max-width: 850px;
    margin: 0 auto;
}

.about-content p {
    color: var(--light);
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 1.5rem;
}

.about-content p:last-child {
    margin-bottom: 0;
}

#about-contact p {
    color: var(--light);
}

/* ======================================
   ABOUT PAGE SECTION SPACING
====================================== */

#about-introduction,
#background,
#about-skills,
#growth,
#where-going {
    padding: 40px 40px;
}
/* ======================================
CONTACT BUTTONS
====================================== */

.contact-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}