/* Navigation */
nav {
    display: flex ;
    justify-content: space-between;
    text-align: center;
    padding: 0 1rem;

        font-family: "Jockey One", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 70;
        
    
}

ul {
    display: flex;
    list-style-type: none;
    float: right;


    color: rgb(75, 84, 135 );

}

li {
    margin: 0 1rem;
    justify-content: space-between;
    padding: 0 1rem;

}

a {
    text-decoration: none;
    
}


/* Hero big image */

.hero {
    width: 100%;
    height: 90%;

    background-image: url('../images/hero\ image.jpg');
    background-size: cover;

    display: flex;
    justify-content: center;
    align-items: flex-end;

}


/* allan studios */

h3 { 
    color: rgb(11, 20, 67 );
    font-size: 100;

}




/* Work Button */


.box {
    border-radius: 50px;
    background-color: rgb(11, 20, 67 ); 
    padding: 30px; 
    display: inline-block;
}

.box h7 {
    margin: 30; 
    text-align: center; 
    color: white;
        font-size: medium;
        font-family: "Josefin Sans";
        
}


.work {
    display: flex ;
    justify-content: center;
    text-align: center;
    margin: 0 20rem;


}

.box {
    background: rgb(11, 20, 67);
    width: 20%;
    height: 10%;
    margin: 5rem;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rem;
    border-radius: 50px;
}

.box1 {
    background: rgb(11, 20, 67);
    width: 20%;
    height: 10%;
    margin: 5rem;

    display:flex;
    align-items: stretch;

}

.image-container{

    margin:auto;
    width: 0 3rem;
    height:0 3rem;
}


.row {
    width: 80%;
    height: 80%;


    display: flex;
    width: 1200px;
    width: 100%;
    flex-wrap: wrap;
    padding: 3rem;


}

/* About Me */


.container {
    display: flex;
    text-align: justify; 
    align-items: center;
    width: 900px;
    margin: auto;


    font-family: "Jockey One";
    font-size: 25;

    padding-bottom: 5rem;

    color: rgb(11, 20, 67 );

}

.image-container {
    flex: 1;
    margin-right: 20px;
}

img {
    max-width: 100%;
    height: auto;
}

.text-container {
    flex: 1;
}



/* Lorem text = On top of 'LETS WORK TOGETHER' */

.container1 {
    display: flex;
    text-align: center; 
    align-items: center;
    width: 1200px;
    margin: auto;


    font-family: "Gothic A1";
    font-style: normal;
    font-size: 20;
    color: rgb(11, 20, 67 );

    padding-top: 3rem;


}



/* Gallery */

.Gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.row {
    display: flex;
    justify-content: center;
}

.box1 {
    width: 200px; 
    height: 200px; 
    margin: 10px;
}

.box1 img {
    width: auto; 
    height: auto%; 
    object-fit: cover; 
} 


/* footer */

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(11, 20, 67 ); 
    padding: 20px; 
    font-style: "Josefin Sans";
    font-size: 1.5rem;
    color: white;
}

.row2 {
    display: flex;
    align-items: center;
    
}

.box2 {
    margin-right: 10px; 
}

.h8 {
    margin: 0; 
    
}