/* ===========================================================
   Silver Studios Website
   style.css

   Part 1
   Reset, Variables, Layout & Navigation
=========================================================== */


/* ===========================
   CSS Variables
=========================== */

:root{

    --background:#121212;
    --background-light:#1d1d1d;

    --card:#242424;

    --primary:#4da3ff;
    --primary-hover:#6ab5ff;

    --text:#ffffff;
    --text-light:#cfcfcf;

    --border:#353535;

    --shadow:0 8px 24px rgba(0,0,0,.35);

    --radius:12px;

    --transition:.25s ease;

}


/* ===========================
   Reset
=========================== */

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


html{

    scroll-behavior:smooth;

}


body{

    background:var(--background);

    color:var(--text);

    font-family:

        Arial,
        Helvetica,
        sans-serif;

    line-height:1.6;

}


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

img{

    max-width:100%;

    display:block;

}


/* ===========================
   Links
=========================== */

a{

    color:inherit;

    text-decoration:none;

}


/* ===========================
   Lists
=========================== */

ul{

    list-style:none;

}


/* ===========================
   Headings
=========================== */

h1{

    font-size:3.2rem;

    margin-bottom:20px;

}


h2{

    font-size:2.3rem;

    margin-bottom:30px;

}


h3{

    font-size:1.4rem;

    margin-bottom:10px;

}


p{

    color:var(--text-light);

}


/* ===========================
   General Section
=========================== */

.section{

    width:min(1200px,90%);

    margin:auto;

    padding:80px 0;

}


/* ===========================
   Navigation
=========================== */

header{

    position:sticky;

    top:0;

    z-index:100;

    background:rgba(18,18,18,.95);

    backdrop-filter:blur(10px);

    border-bottom:1px solid var(--border);

}


.navbar{

    width:min(1200px,90%);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}


.logo{

    font-size:1.4rem;

    font-weight:bold;

    letter-spacing:2px;

}


.nav-links{

    display:flex;

    gap:25px;

}


.nav-links a{

    padding:8px 14px;

    border-radius:8px;

    transition:var(--transition);

}


.nav-links a:hover{

    background:var(--primary);

}


.active{

    background:var(--primary);

}


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

.hero{

    min-height:75vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

    background:

        linear-gradient(

            rgba(0,0,0,.55),

            rgba(0,0,0,.75)

        ),

        url("../images/hero.jpg");

    background-size:cover;

    background-position:center;

}


.small-hero{

    min-height:45vh;

}


.hero-content{

    max-width:800px;

}


.hero-content p{

    font-size:1.2rem;

    margin-bottom:35px;

}


/* ===========================
   Buttons
=========================== */

.button{

    display:inline-block;

    padding:

        14px
        28px;

    background:var(--primary);

    border-radius:8px;

    transition:var(--transition);

    font-weight:bold;

}


.button:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

}


/* ===========================
   Card Grid
=========================== */

.card-grid{

    display:grid;

    grid-template-columns:

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

    gap:30px;

}

/* ===========================================================
   Part 2
   Cards, Project Cards, Footer & Utilities
=========================================================== */


/* ===========================
   Standard Cards
=========================== */

.card{

    background:var(--card);

    padding:30px;

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

}


.card p{

    margin-top:15px;

}


/* ===========================
   Project Cards
=========================== */

.project-card{

    background:var(--card);

    border-radius:var(--radius);

    overflow:hidden;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.project-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}


.project-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}


/* Content inside cards */

.project-content{

    padding:25px;

}


.project-content h3{

    margin-bottom:12px;

}


.project-content p{

    margin-bottom:20px;

}


/* Button inside project card */

.project-content .button{

    margin-top:10px;

}


/* ===========================
   About Section
=========================== */

.section p{

    margin-bottom:18px;

}


/* ===========================
   Footer
=========================== */

footer{

    margin-top:80px;

    padding:40px 20px;

    background:var(--background-light);

    border-top:1px solid var(--border);

    text-align:center;

}


footer p{

    margin:8px 0;

}


/* ===========================
   Horizontal Divider
=========================== */

hr{

    border:none;

    border-top:1px solid var(--border);

    margin:50px 0;

}


/* ===========================
   Utility Classes
=========================== */

.center{

    text-align:center;

}


.hidden{

    display:none;

}


.flex{

    display:flex;

}


.space-between{

    justify-content:space-between;

}


.align-center{

    align-items:center;

}


.margin-top{

    margin-top:40px;

}


.margin-bottom{

    margin-bottom:40px;

}


/* ===========================
   Fade Animation
=========================== */

.fade{

    animation:fadeIn .7s ease;

}


@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ===========================
   Float Animation
=========================== */

.float:hover{

    transform:

        translateY(-6px)

        scale(1.02);

}


/* ===========================
   Selection Colour
=========================== */

::selection{

    background:var(--primary);

    color:white;

}


/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{

    width:12px;

}


::-webkit-scrollbar-track{

    background:var(--background);

}


::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--primary-hover);

}

/* ===========================================================
   Part 3
   Contact Page, Responsive Design & Final Polish
=========================================================== */


/* ===========================
   Contact Layout
=========================== */

.contact-grid{

    display:grid;

    grid-template-columns:

        1fr
        1fr;

    gap:40px;

    margin-top:40px;

}


.contact-info{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:30px;

    box-shadow:var(--shadow);

}


.contact-info h3{

    margin-bottom:20px;

}


.contact-info p{

    margin-bottom:15px;

}


.contact-info a{

    color:var(--primary);

}


.contact-info a:hover{

    color:var(--primary-hover);

}


/* ===========================
   Contact Form
=========================== */

.contact-form{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:30px;

    box-shadow:var(--shadow);

}


.contact-form label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}


.contact-form input,

.contact-form textarea{

    width:100%;

    padding:14px;

    margin-bottom:20px;

    border:1px solid var(--border);

    border-radius:8px;

    background:var(--background-light);

    color:var(--text);

    font-size:1rem;

    transition:var(--transition);

}


.contact-form textarea{

    min-height:180px;

    resize:vertical;

}


.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 10px rgba(77,163,255,.3);

}


.contact-form button{

    cursor:pointer;

    border:none;

}


/* ===========================
   Image Effects
=========================== */

.project-card img{

    transition:

        transform .35s ease,

        filter .35s ease;

}


.project-card:hover img{

    transform:scale(1.05);

    filter:brightness(1.08);

}


/* ===========================
   Navigation Animation
=========================== */

.nav-links a{

    position:relative;

}


.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:width .25s ease;

}


.nav-links a:hover::after{

    width:100%;

}


.active::after{

    width:100%;

}


/* ===========================
   Hero Animation
=========================== */

.hero-content{

    animation:heroFade .9s ease;

}


@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ===========================
   Focus Accessibility
=========================== */

a:focus,

button:focus,

input:focus,

textarea:focus{

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

    outline-offset:3px;

}


/* ===========================
   Responsive
=========================== */

@media (max-width:900px){

    .contact-grid{

        grid-template-columns:1fr;

    }

}


@media (max-width:768px){

    h1{

        font-size:2.3rem;

    }

    h2{

        font-size:1.8rem;

    }

    .navbar{

        flex-direction:column;

        gap:20px;

    }

    .nav-links{

        flex-wrap:wrap;

        justify-content:center;

        gap:12px;

    }

    .hero{

        min-height:60vh;

        padding:30px;

    }

    .hero-content p{

        font-size:1rem;

    }

    .card-grid{

        grid-template-columns:1fr;

    }

}


@media (max-width:480px){

    body{

        font-size:.95rem;

    }

    .section{

        width:94%;

        padding:60px 0;

    }

    .button{

        width:100%;

        text-align:center;

    }

    .project-card img{

        height:180px;

    }

}


/* ===========================
   End of stylesheet
=========================== */