/* =========================================
   SAMUEL AGBOOLA WEBSITE
   PREMIUM DESIGN SYSTEM
========================================= */


/* =========================================
   ROOT VARIABLES
========================================= */

:root {

    --primary:#102A43;
    --secondary:#D4AF37;
    --dark:#1A1A1A;
    --light:#FFFFFF;
    --soft:#F5F7FA;
    --text:#334E68;

    --heading-font:'Playfair Display', serif;
    --body-font:'Inter', sans-serif;

}



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


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:var(--body-font);
    color:var(--text);
    background:var(--light);
    line-height:1.7;

}


img {

    max-width:100%;
    display:block;

}



a {

    text-decoration:none;

}



/* =========================================
   TYPOGRAPHY
========================================= */


h1,
h2,
h3 {

    font-family:var(--heading-font);
    color:var(--primary);

}



h1 {

    font-size:clamp(2.8rem,6vw,5rem);
    line-height:1.1;

}



h2 {

    font-size:clamp(2rem,4vw,3rem);
    margin-bottom:1.5rem;

}



h3 {

    margin-bottom:1rem;

}



p {

    font-size:1.05rem;

}



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


.navbar {

    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 8%;

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

    backdrop-filter:blur(15px);

    z-index:1000;

}



/* LOGO */


.logo {

    display:flex;

    align-items:center;

}



.logo img {

    height:60px;

    width:auto;

}



/* DESKTOP MENU */


nav {

    display:flex;

    align-items:center;

}



.nav-links {

    display:flex;

    gap:2rem;

    list-style:none;

}



.nav-links a {

    color:var(--primary);

    font-weight:600;

    transition:.3s ease;

}



.nav-links a:hover {

    color:var(--secondary);

}



/* MOBILE BUTTON */


.menu-toggle {

    display:none;

    border:none;

    background:none;

    font-size:1.8rem;

    cursor:pointer;

    color:var(--primary);

}



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

.hero {

    min-height:auto;

    display:grid;

    grid-template-columns:
1fr 480px;

    gap:6rem;

    align-items:center;

    padding:110px 6% 70px;

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        rgba(16,42,67,.95),
        rgba(16,42,67,.75)
    );

}



.hero::before {

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-150px;

    top:100px;

    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.18),
        transparent 70%
    );

}



/* HERO TEXT */


.hero-content {

    position:relative;

    z-index:2;

    max-width:900px;

}



.tagline {

    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.85rem;

    font-weight:600;

    margin-bottom:1.5rem;

}



.hero h1 {

    color:white;

    margin-bottom:1.5rem;

}



.hero p {

    color:#E6EEF5;

    max-width:700px;

    font-size:1.15rem;

}



/* HERO IMAGE */


.hero-image {

    position:relative;

    z-index:2;

    aspect-ratio:4/5;

    border-radius:24px;

    overflow:hidden;

    margin-right:120px;

}



.hero-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

}


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


.hero-buttons {

    display:flex;

    gap:1rem;

    margin-top:2.5rem;

    flex-wrap:wrap;

}



.btn {

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    display:inline-block;

    transition:.3s ease;

}



.btn.primary {

    background:var(--secondary);

    color:var(--dark);

    box-shadow:0 10px 25px rgba(212,175,55,.25);

}



.btn.outline {

    border:1px solid white;

    color:white;

}



.btn:hover {

    transform:translateY(-4px);

}

@media(min-width:769px){

.hero-buttons .btn {

    width:190px;

    text-align:center;

}

}

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


.section {

    max-width:1200px;

    margin:auto;

    padding:80px 8%;

}



/* =========================================
   IMPACT STATISTICS
========================================= */


.impact {

    background:var(--soft);

    padding:80px 8%;

}



.impact-grid {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:1.5rem;

}



.impact-card {

    background:white;

    padding:2rem;

    text-align:center;

    border-radius:20px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.08);

}



.impact-card h2 {

    color:var(--secondary);

    font-size:3rem;

    margin-bottom:.5rem;

}



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

.about-content h2 {

    position:relative;

    margin-bottom:2rem;

}


.about-content h2::after {

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:var(--secondary);

    margin-top:15px;

    border-radius:10px;

}

#about {

    display:block;

}


.about-grid {

    display:block;

}


.about-image {

    width:350px;

    float:left;

    margin-right:3rem;

    margin-bottom:1.5rem;

    border-radius:24px;

    overflow:hidden;

}


.about-image img {

    width:100%;

    height:450px;

    object-fit:cover;

}


#profile-container h3 {

    color:var(--primary);

    font-size:1.4rem;

    margin-top:2.5rem;

    margin-bottom:1rem;

    position:relative;

}

#profile-container h3 + p {

    background:var(--soft);

    border-left:4px solid var(--secondary);

    padding:1.5rem 1.8rem;

    border-radius:0 18px 18px 0;

    font-size:1.1rem;

    line-height:1.8;

    margin-bottom:2rem;

}


#profile-container h3::before {

    content:"";

    display:inline-block;

    width:8px;

    height:8px;

    background:var(--secondary);

    border-radius:50%;

    margin-right:12px;

}



#profile-container ul {

    margin:1rem 0 1.5rem 0;

    list-style:none;

}



#profile-container li {

    margin-bottom:.8rem;

    padding-left:1.5rem;

    position:relative;

}

#profile-container {

    line-height:1.8;

}


#profile-container li::before {

    content:"✓";

    position:absolute;

    left:0;

    color:var(--secondary);

    font-weight:bold;

}



/* =========================================
   CARD SYSTEM
========================================= */


.cards {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));

    gap:2rem;

    margin-top:3rem;

}


.card,
.innovation-card,
.speaking-card {

    background:white;

    border:1px solid rgba(16,42,67,.08);

    border-radius:24px;

    padding:2.5rem;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.innovation-card::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}


.innovation-card:hover::before {

    transform:scaleX(1);

}


.card:hover,
.innovation-card:hover,
.speaking-card:hover {

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(16,42,67,.12);

}



/* =========================================
   INNOVATIONS
========================================= */


.innovation-category {

    display:inline-block;

    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.75rem;

    font-weight:700;

    margin-bottom:1rem;

}



.innovation-card h3 {

    font-size:1.5rem;

}

.innovation-card p {

    line-height:1.8;

}


.innovation-card h3 {

    line-height:1.4;

    margin-bottom:1.2rem;

}


.innovation-impact,
.innovation-recognition {

    margin-top:1.5rem;

    padding-top:1rem;

    border-top:

    1px solid rgba(0,0,0,.08);

}


.innovation-impact strong,
.innovation-recognition strong {

    color:var(--secondary);

    display:block;

    margin-bottom:.7rem;

    text-transform:uppercase;

    letter-spacing:1.5px;

    font-size:.75rem;

}

.section > h2 {

    position:relative;

    margin-bottom:2.5rem;

}


.section > h2::after {

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:var(--secondary);

    margin-top:15px;

    border-radius:10px;

}

/* =========================================
   AWARDS
========================================= */


#awards-container {

    position:relative;

    margin-top:3rem;

}


#awards-container::before {

    content:"";

    position:absolute;

    left:96px;

    top:10px;

    bottom:10px;

    width:3px;

    background:linear-gradient(
        to bottom,
        var(--secondary),
        rgba(212,175,55,.2)
    );

}


.award-item {

    display:grid;

    grid-template-columns:120px 1fr;

    gap:2rem;

    margin-bottom:2.5rem;

    position:relative;

}


.award-item::before {

    content:"";

    position:absolute;

    left:89px;

    top:8px;

    width:16px;

    height:16px;

    background:var(--secondary);

    border-radius:50%;

    border:4px solid white;

    box-shadow:0 0 0 2px var(--secondary);

}


.award-year {

    color:var(--secondary);

    font-weight:700;

    font-size:1.5rem;

    letter-spacing:1px;

}



.award-content {

    background:white;

    border:1px solid rgba(16,42,67,.08);

    padding:2rem;

    border-radius:20px;

    transition:.3s ease;

}

.award-content:hover {

    transform:translateX(8px);

    box-shadow:

    0 20px 45px rgba(16,42,67,.12);

}




.award-org {

    font-weight:600;

    margin-bottom:1rem;

}



/* =========================================
   SPEAKING
========================================= */


.speaking-icon {

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(212,175,55,.12);

    color:var(--secondary);

    border-radius:50%;

    font-size:1.5rem;

    margin-bottom:1.5rem;

}



.speaking-card h3 {

    font-size:1.45rem;

    line-height:1.4;

    margin-bottom:1rem;

}

.speaking-card::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}


.speaking-card:hover::before {

    transform:scaleX(1);

}

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

.contact {

    background:

    linear-gradient(
        135deg,
        var(--primary),
        #163B5C
    );

    color:white;

    text-align:center;

    padding:110px 8%;

    border-radius:35px;

    margin:5rem 8%;

    position:relative;

    overflow:hidden;

}



.contact::before {

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    right:-150px;

    top:-150px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.25),
        transparent 70%
    );

}



.contact h2 {

    color:white;

}



.contact-content {

    max-width:900px;

    margin:auto;

    position:relative;

    z-index:2;

}



.contact-content > p {

    color:white;

    font-size:1.15rem;

}



.contact-options {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:1.5rem;

    margin:3rem 0;

}



.contact-options div {

    border:1px solid rgba(255,255,255,.2);

    padding:2rem;

    border-radius:22px;

    transition:.3s ease;

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

}


.contact-options div:hover {

    transform:translateY(-6px);

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

}



.contact-options h3 {

    color:var(--secondary);

}



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


.footer {

    background:var(--primary);

    color:white;

    text-align:center;

    padding:3rem 8%;

    border-top:1px solid rgba(212,175,55,.25);

}



.footer p {

    font-size:.9rem;

    margin:0;

    opacity:.85;

    letter-spacing:.5px;

}


.footer-tagline {

    margin-bottom:1.5rem !important;

}



.social-links {

    display:flex;

    justify-content:center;

    gap:1.8rem;

    margin-bottom:1.8rem;

}



.social-links a {

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s ease;

}


.social-links img {

    width:32px;

    height:32px;

    filter:brightness(0) invert(1);

    transition:.3s ease;

}


.social-links a:hover img {

    filter:none;

    transform:translateY(-4px);

}


.social-links a:hover {

    color:var(--secondary);

}



.footer-logo {

    width:180px;

    height:auto;

    margin:0 auto 1.5rem;

}


/* =========================================
   SCROLL ANIMATION
========================================= */


.section,
.card,
.stat,
.impact-card {

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}



.show {

    opacity:1;

    transform:translateY(0);

}

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


/* TABLET + MOBILE */

@media(max-width:900px){



/* HEADER */


.navbar {

    padding:18px 5%;

}



.logo img {

    height:45px;

}




.menu-toggle {

    display:flex;

    align-items:center;

    justify-content:center;

}



/* MOBILE MENU */


.nav-links {

    position:absolute;

    top:80px;

    left:0;

    right:0;

    background:var(--primary);

    display:none;

    flex-direction:column;

    align-items:center;

    padding:2rem;

    gap:1.5rem;

}



.nav-links.active {

    display:flex;

}



.nav-links a {

    color:white;

}





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


.hero {

    grid-template-columns:1fr;

    gap:2.5rem;

    min-height:auto;

    padding:

    110px 5% 70px;

    text-align:left;

}



.hero-content {

    max-width:100%;

}



.hero h1 {

    font-size:2.6rem;

}



.hero-buttons {

    flex-direction:column;

    width:100%;

}



.btn {

    width:100%;

    text-align:center;

}





/* HERO IMAGE MOBILE FIX */


.hero-image {

    width:100%;

    max-width:420px;

    height:auto;

    margin:0 auto;

    border-radius:24px;

}



.hero-image img {

    width:100%;

    height:auto;

    object-fit:cover;

}



/* ABOUT MOBILE */


.about-grid {

    display:block;

}



.about-image {

    float:none;

    width:100%;

    max-width:400px;

    margin:0 auto 2rem;

}




/* SECTIONS */


.section {

    padding:60px 5%;

}




.contact {

    margin:3rem 5%;

    padding:70px 5%;

}





/* AWARDS */


#awards-container::before {

    left:20px;

}



.award-item {

    grid-template-columns:50px 1fr;

    gap:1rem;

}



.award-year {

    font-size:1rem;

}



}





/* =========================================
   SMALL MOBILE
========================================= */


@media(max-width:500px){



.logo img {

    height:38px;

}



.hero h1 {

    font-size:2.2rem;

}



.hero p {

    font-size:1rem;

}



.impact-grid {

    grid-template-columns:1fr;

}



.contact h2 {

    font-size:2rem;

}


.footer-logo {

    width:140px;

}


}



/* =========================================
   ACCESSIBILITY
========================================= */


button {

    font-family:inherit;

}



button:focus,
a:focus {

    outline:2px solid var(--secondary);

    outline-offset:3px;

}

.scroll-down {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.5rem;

    margin-top:2rem;

    color:white;

    font-size:.9rem;

    font-weight:600;

    opacity:.9;

    animation:bounce 2s infinite;

}


.scroll-down:hover {

    color:var(--secondary);

}


@keyframes bounce {

    0%,
    100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(10px);

    }

}