/* ==============================
   Imported Fonts
============================== */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');

/* ==============================
   Root Variables
============================== */
:root{
    --primary-font: "Josefin Sans", serif;
    --secondary-font: "Cardo", serif;
}

/* showreel panel*/
.panel{
    float: left;
    width: 90%;
    margin: 0 5%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#showreel-panel{
    width: 90%;
    margin: 87px 5% 0;
}

.showreel{
    float: left;
    width: 100%;
    object-fit: contain;
}

.showreel video{
    float: left;
    width: 100%;
}

/* introduction panel */

#intro-panel{
    margin: 24px 5% 0;
}


.heading{
    float: left;
    width: 100%;
    text-align: center;
}

.heading h1{
    font-family: var(--primary-font);
    font-size: 20pt;
    font-weight: 400;
}

.subtext{
    float: left;
    width: 100%;
    text-align: center;
}

.subtext p{
    font-family: var(--secondary-font);
    font-size: 12pt;
    font-weight: 400;
}

.subtext a{
    color: #000;
}

/* brands panel */
#brands-panel{
    margin: 24px 5% 0;
}

.brand-logos {
    float: left;
    width: 90%;
    margin: 0 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0; /* Add some spacing between images */
}

.brand-logos img {
    flex: 1 1 calc(50% - 20px); /* Two images per row with space between */
    max-width: 125px; /* Ensure images don't overflow */
    object-fit: contain; /* Maintain aspect ratio */
}

/* recent projects panel */

#recent-projects-panel{
    margin: 47px 5% 0;
}

.project-box{
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 25px 0;
}

.project-box a{
    color: #000;
}

.preview{
    float: left;
    width: 100%;
    overflow: hidden;
    object-fit: contain;
}

.preview img{
    float: left;
    width: 100%;
}

.details{
    float: left;
    width: 100%;
    font-family: var(--secondary-font);
    font-style: italic;
}

.left-side{
    float: left;
    width: 50%;
}

.left-side h1{
    float: left;
    width: 100%;
    text-decoration: underline;
    font-size: 12pt;
    font-weight: 300;
    padding: 0 0 0 5px;
}

.left-side h2{
    font-size: 12pt;
    font-weight: 300;
    padding: 0 0 0 5px;
}

.right-side{
    float: right;
    width: 50%;
}

.right-side h1{
    float: right;
    width: 100%;
    font-size: 12pt;
    font-weight: 300;
    text-align: right;
    padding: 0 5px 0 0;
}

#more-projects{
    background-color: #fff;; 
    color: #000; 
    border: 2px solid #000; 
    padding: 8px 40px 6px; 
    font-family: var(--primary-font);
    font-size: 8pt;
    cursor: pointer; 
    transition: all .3s ease-in;
}


#more-projects:hover{
    background-color: #000;
    color: #fff;
}
/* contact panel */

#contact-panel{
    margin: 96px 5% 0;
}

.inspire-block{
    float: left;
    width: 100%;
    text-align: center;
    margin: 50px 0 80px;
}

.inspire-block h1{
    font-family: var(--primary-font);
    font-size: 15pt;
    margin: 5px 0;
}

.inspire-block p{
    margin: 5px 0;
}

#contact{
    background-color: #fff;; 
    color: #000; 
    border: 2px solid #000; 
    padding: 8px 40px 6px; 
    font-family: var(--primary-font);
    font-size: 8pt;
    cursor: pointer;
    margin: 50px 0;
    transition: all .3s ease-in;
}

#contact:hover{
    background-color: #000;
    color: #fff;
}

@media (min-width: 769px){
    #showreel-panel{
        height: 100vh;
        width: 70%;
        margin: 20px 15% 0;
    }

    .subtext{
        width: 600px;
    }

    #intro-panel{
        margin: 96px 5% 0;
    }

    #brands-panel{
        margin: 96px 5% 0;
    }

    .brand-logos {
        margin: 40px 5% 0;
    }

    #recent-projects-panel{
        margin: 96px 5% 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .project-box{
        width: 870px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 25px 0;
    }
}