/***************************************************
 Global CSS Styles 
 **************************************************/

/* Global Variable Definitions */ 

:root{

    /*--main-bgd-colour: grey;*/
    --main-txt-colour: #6e6e6e;
    --h2-h4-txt-color: #9b9b9b;
    --welcome-text-banner-height: 300px;
    --main-image-height: 200px;
    --profile-image-height:500px;
    --development-image-height: 500px;
    --section-header-height: 275px;
    --section-image-height: 400px;
    --content-divider-height: 10px;
    --contact-container-height: 175px;
    --welcome-bgd-color:#2b2a2a;
    --section-bgd-color:#2b2a2a;
    --projectarea-bgd-color: white;
}

body{
    margin:0px;
    padding:0px;
    font-family: Arial, sans-serif, Verdana, Helvetica;
}

/* Header Tag Definitions */

/*Header Tag h1 - Welcome to Arrowtac Limited Only */
h1{
    margin: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    color: whitesmoke;
    font-weight: 500;
    font-size: 2.0em;
}

/*Header Tag h2 - Main Header - Sub-title */
h2 {
    margin: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    color:var( --h2-h4-txt-color);
    font-weight: 200;
    font-size: 1.5em;
}

/*Header Tag h3 - Section - Titles */
h3 {
    margin: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    color:whitesmoke;
    font-weight: 400;
    font-size: 1.6em;
}

/*Header Tag h4 - Section - Sub-titles */
h4 {
    margin: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    color:var( --h2-h4-txt-color);
    font-weight: 200;
    font-size: 1.2em;
}

/* Main Container and background colour */
.main-container{
    display: grid;
    grid-template-columns: 1fr;
    background-color: white;
}


/* Separate columns (x4) for the top navigation bar and company logo left sider mid and right side mid */ 

/***************************************************
 Navigation CSS Styles 
 **************************************************/

 .navigation-bar-container{
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    padding: 20px;
    background-color: black;
    grid-template-areas:" navbar-left-side navbar-left-mid navbar-right-mid navbar-right-side";
}

.main-navigation-bar{
    grid-area:navbar-left-mid;
    display:flex;
}

.navigation-bar-logo{
    grid-area:navbar-right-mid;
    display:flex;
}

.main-navigation-bar > div{
    display: grid;
    margin-left: 20px;
    padding-top: 2px;
    font-size: 1em;
    color:whitesmoke;
}

.navigation-bar-logo {
    display: grid;
    font-size: 1.2em;
    text-align: right;
    color:whitesmoke; 
}

/* Navigation Bar Link CSS Styles */

.navigation-link-wrapper{
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
}

.navigation-link-wrapper a {
    color:whitesmoke;
    text-decoration: none;
    transition: color 0.5s;
}

.navigation-link-wrapper:hover {
    border-bottom: 1px solid #8b8b8b;;
}

.navigation-link-wrapper a:hover {
    color:#8b8b8b;;
}

/* Welcome Container - Welcome to Arrowtac Banner and Text Styles */

.welcome-container{
    background-color: #2b2a2a;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    height: var(--welcome-text-banner-height);
}

/* Image Banner positioned below the Arrowtac Welcome Banner */ 

.main-page-top-img{
    display: flex;
    justify-content: space-between;
    height: var(--main-image-height);
}

.main-page-top-img-background{
    /*height: 100%;*/
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* General Content Divider Bar Style */

.content-divider-bar{
    background-color:black;
    display: flex;
    justify-content: space-between;
    height: var(--content-divider-height);
}

.content-divider-bar-white{
    background-color:white;
    display: flex;
    justify-content: space-between;
    height: 20px;
}

.content-divider-bar-dark{
    background-color:#2b2a2a;
    display: flex;
    justify-content: space-between;
    height: 50px;
}

/* Section Header Container - Banner and Text Styles */

.section-header-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--section-header-height);
    width:100%;
    background-color: var(--section-bgd-color);
}

.section-header-container-text{
    text-align: center;
}


/***************************** 
Project and Portfolio Styles *
*****************************/
/* images displayed 2 picture colums and rows with a border and side margins. */

.product-item-grid-container{

    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr; 
    grid-template-rows: repeat(2, 300px); 
    grid-auto-rows: 300px;
    width: 100%;
    grid-gap: 20px;
    background-color: var(--projectarea-bgd-color);
    grid-template-areas: 
        "row1-left   row1-left-mid   row1-right-mid   row1-right"
        "row2-left   row2-left-mid   row2-right-mid   row2-right"
}

section.product-item-one{
    grid-area: row1-left-mid;
    background: #8b8b8b;
    color: whitesmoke;
    background-size: cover;
    position:relative;
}

section.product-item-two{
    grid-area: row1-right-mid;
    background-color:#8b8b8b;
    color: whitesmoke;
    background-size: cover;
    position:relative;
}

section.product-item-three{
    grid-area: row2-left-mid;
    background-color: black;
    color: whitesmoke;
    background-size: cover;
    position:relative;
}

section.product-item-four{
    grid-area: row2-right-mid;
    background-color: black;
    color: whitesmoke;
    position:relative;
}

.background-product-image{
    background-color: black;
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align:center;
}

.img-text-wrapper{
    position: absolute;
    top: 0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align:center;
    height:100%;
    width:100%;
}

.product-item-title {
    font-weight:400;
    font-size: 1.1em;
}

.img-text-wrapper .product-item-title {
    font-weight:400;
    font-size: 1.1em;
    color: transparent;
    transition: 1s;
}


.img-text-wrapper:hover .product-item-title {
    font-weight:400;
    font-size: 1.1em;
    color: whitesmoke;
    transition: 2s;
}

.img-text-wrapper:hover {
    font-weight:400;
    font-size: 1.1em;
    text-align: center;
    color: whitesmoke;
    background-color: black;
    opacity:65%;
    transition: background-color 0.5s;
}

/* Work In Progress Section */

.work-section-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    height: var(--development-image-height);
}

.work-img-background{
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: var(--development-image-height);
}


/*********************************** 
About Section and Portfolio Styles *
***********************************/

.profile-items-wrapper {
    display: grid;
    grid-template-columns: 1fr;
}

.profile-item-wrapper {
    position: relative;
}

.profile-img-background{
    height: var(--profile-image-height);
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Lower Border Container - Reserved */

.contact-container{
    display: flex;
    background-color: #2b2a2a;
    justify-content: space-between;
    height: var(--contact-container-height);
}

/* Bottom Border - Copyright Information and Bottom Website Border */ 

.copyright-border-container{
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    text-align: left;
    font-size: 1em;
    padding:20px;
    color:whitesmoke;
    background-color: black;
    height: 10px;
}

/* Area for the copyright sysmbol */

.copyright-border-container > .bottom-left-side-mid {
    /*margin-right: 20px;*/
    font-size: 1em;
}

/* Area for the back to the top link */

.copyright-border-container > .bottom-right-side-mid {
    display:flex;
    justify-content: right;
    font-size: 1em;
    text-align: right;
}

.bottom-nav-link-wrapper{
    display: flex;
    font-size: 1em;
    text-align: right;
    padding-top: 1px;
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
}

.bottom-nav-link-wrapper a {
    display: flex;
    font-size: 1em;
    text-align: right;
    padding-top: 1px;
    color:white;
    text-decoration: none;
    transition: color 0.5s;
}

.bottom-nav-link-wrapper:hover {
    display: flex;
    font-size: 1em;
    text-align: right;
    padding-top: 1px;
    border-bottom: 1px solid #8b8b8b;;
}

/* MEDIA QUERIES FOR BREAKPOINTS 2400, 1800, 1300, 1000, 800, 720, 460, and 400 PX */

@media screen and (max-width:2400px){

    .product-item-grid-container{
    
        display:grid;
        grid-template-columns: 1.2fr 1fr 1fr 1.2fr; 
        grid-template-rows: repeat(2, 300px); 
        grid-auto-rows: 300px;
        width: 100%;
        grid-gap: 10px;
        grid-template-areas: 
            "row1-left   row1-left-mid   row1-right-mid   row1-right"
            "row2-left   row2-left-mid   row2-right-mid   row2-right"
    }

    .content-divider-bar-white{
        background-color:white;
        display: flex;
        justify-content: space-between;
        height: 10px;
    }
}

/* MEDIA QUERY FOR BREAKPOINT 1800 */

@media screen and (max-width:1800px){

    .product-item-grid-container{
    
        display:grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; 
        grid-template-rows: repeat(2, 300px); 
        grid-auto-rows: 300px;
        width: 100%;
        grid-gap: 10px;
        grid-template-areas: 
            "row1-left   row1-left-mid   row1-right-mid   row1-right"
            "row2-left   row2-left-mid   row2-right-mid   row2-right"
    }

    .content-divider-bar-white{
        background-color:white;
        display: flex;
        justify-content: space-between;
        height: 10px;
    }
}

/* MEDIA QUERY FOR BREAKPOINT 1300 */

@media screen and (max-width:1300px){

    .product-item-grid-container{
    
        display:grid;
        grid-template-columns: 0.8fr 1.2fr 1.2fr 0.8fr; 
        grid-template-rows: repeat(2, 300px); 
        grid-auto-rows: 300px;
        width: 100%;
        grid-gap: 10px;
        grid-template-areas: 
            "row1-left   row1-left-mid   row1-right-mid   row1-right"
            "row2-left   row2-left-mid   row2-right-mid   row2-right"
    }


    .content-divider-bar-white{
        background-color:white;
        display: flex;
        justify-content: space-between;
        height: 10px;
    }

    .copyright-border-container{
        display: grid;
        grid-template-columns: 0.8fr 1.2fr 1.2fr 0.8fr;
        /*text-align: left;*/
        font-size: 1em;
        padding:20px;
        color:whitesmoke;
        background-color: black;
        height: 10px;
    }
}

/* MEDIA QUERY FOR BREAKPOINT 1000 */

@media screen and (max-width:1000px){

    .product-item-grid-container{

        display:grid;
        grid-template-columns: 0.6fr 1.4fr 1.4fr 0.6fr; 
        grid-template-rows: repeat(2, 300px); 
        grid-auto-rows: 300px;
        width: 100%;
        grid-gap: 5px;
        grid-template-areas: 
            "row1-left   row1-left-mid   row1-right-mid   row1-right"
            "row2-left   row2-left-mid   row2-right-mid   row2-right"   
    }

    .content-divider-bar-white{
        background-color:white;
        display: flex;
        justify-content: space-between;
        height: 5px;
    }

    .copyright-border-container{
        display: grid;
        grid-template-columns: 0.6fr 1.4fr 1.4fr 0.6fr;
        /*text-align: left;*/
        font-size: 1em;
        padding:20px;
        color:whitesmoke;
        background-color: black;
        height: 10px;
    }

}

/* MEDIA QUERY FOR BREAKPOINT 800 */

@media screen and (max-width:800px){

    .product-item-grid-container{
    
       display:grid;
       grid-template-columns: 0.5fr 1.5fr 1.5fr 0.5fr; 
       grid-template-rows: repeat(2, 300px); 
       grid-auto-rows: 300px;
       width: 100%;
       grid-gap: 5px;
       grid-template-areas: 
           "row1-left   row1-left-mid   row1-right-mid   row1-right"
           "row2-left   row2-left-mid   row2-right-mid   row2-right"   
    }

    .copyright-border-container{
        display: grid;
        grid-template-columns: 0.5fr 1.9fr 1.1fr 0.5fr;
       /* text-align: left;*/
        font-size: 0.9em;
        padding:20px;
        color:whitesmoke;
        background-color: black;
        height: 10px;
    }

    /* Area for the back to the top link */

    .copyright-border-container > .bottom-right-side-mid {
        display:flex;
        justify-content: right;
        font-size: 1em;
        text-align: right;
    }

    .bottom-nav-link-wrapper{
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        height: 22px;
        border-bottom: 1px solid transparent;
        transition: border-bottom 0.5s;
    }

    .bottom-nav-link-wrapper a {
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        color:white;
        text-decoration: none;
        transition: color 0.5s;
    }

    .bottom-nav-link-wrapper:hover {
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        border-bottom: 1px solid #8b8b8b;;
    }
}

/* MEDIA QUERY FOR BREAKPOINT 720 */

@media screen and (max-width:720px){

    .product-item-grid-container{
    
       display:grid;
       grid-template-columns: 0.1fr 1.9fr 1.9fr 0.1fr; 
       grid-template-rows: repeat(2, 300px); 
       grid-auto-rows: 300px;
       width: 100%;
       grid-gap: 5px;
       grid-template-areas: 
           "row1-left   row1-left-mid   row1-right-mid   row1-right"
           "row2-left   row2-left-mid   row2-right-mid   row2-right"   
    
    }

    .copyright-border-container{
        display: grid;
        grid-template-columns: 0.1fr 2.7fr 1.1fr 0.1fr;
        /*text-align: left;*/
        font-size: 1em;
        padding:20px;
        color:whitesmoke;
        background-color: black;
        height: 10px;
    }

    /* Area for the back to the top link */

    .copyright-border-container > .bottom-right-side-mid {
        display:flex;
        justify-content: right;
        font-size: 1em;
        text-align: right;
    }

    .bottom-nav-link-wrapper{
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        height: 22px;
        border-bottom: 1px solid transparent;
        transition: border-bottom 0.5s;
    }

    .bottom-nav-link-wrapper a {
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        color:white;
        text-decoration: none;
        transition: color 0.5s;
    }

    .bottom-nav-link-wrapper:hover {
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        border-bottom: 1px solid #8b8b8b;;
    }

}

/* MEDIA QUERY FOR BREAKPOINT 500 */

@media screen and (max-width:500px){

    h1{
        margin: 0;
        display:flex;
        justify-content: center;
        align-items: center;
        color: whitesmoke;
        font-weight: 500;
        font-size: 1.7em;
    }
    
    /*Header Tag h2 - Main Header - Sub-title */
    h2 {
        margin: 0;
        display:flex;
        justify-content: center;
        align-items: center;
        color:var( --h2-h4-txt-color);
        font-weight: 200;
        font-size: 1.3em;
    }


    .product-item-grid-container{
    
       display:grid;
       grid-template-columns: 1fr; 
       grid-template-rows: repeat(4, 300px); 
       grid-auto-rows: 300px;
       width: 100%;
       grid-gap: 5px;
       grid-template-areas: 
           "row1-left-mid"   
           "row1-right-mid"
           "row2-left-mid"   
           "row2-right-mid"   
    }


    .copyright-border-container{
        display: grid;
        grid-template-columns: 0.1fr 2.6fr 1.2fr 0.1fr;
        text-align: left;
        font-size: 0.9em;
        padding:20px;
        color:whitesmoke;
        background-color: black;
        height:10px;
    }

    /* Area for the back to the top link */

    .copyright-border-container > .bottom-left-side-mid {
        /*margin-right: 20px;*/
        font-size: 0.8em;
    }
    
    .copyright-border-container > .bottom-right-side-mid {
        display:flex;
        justify-content: right;
        font-size: 1em;
        text-align: right;
    }

    .bottom-nav-link-wrapper{
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        height: 22px;
        border-bottom: 1px solid transparent;
        transition: border-bottom 0.5s;
    }

    .bottom-nav-link-wrapper a {
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        color:white;
        text-decoration: none;
        transition: color 0.5s;
    }

    .bottom-nav-link-wrapper:hover {
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        border-bottom: 1px solid #8b8b8b;;
    }
}

/* MEDIA QUERY FOR BREAKPOINT 400 */

@media screen and (max-width:400px){

    h1{
        margin: 0;
        display:flex;
        justify-content: center;
        align-items: center;
        color: whitesmoke;
        font-weight: 500;
        font-size: 1.6em;
    }
    
    /*Header Tag h2 - Main Header - Sub-title */
    h2 {
        margin: 0;
        display:flex;
        justify-content: center;
        align-items: center;
        color:var( --h2-h4-txt-color);
        font-weight: 200;
        font-size: 1.2em;
    }

    /*Header Tag h3 - Section - Titles */
    h3 {
        margin: 0;
        display:flex;
        justify-content: center;
        align-items: center;
        color:whitesmoke;
        font-weight: 400;
        font-size: 1.4em;
    }

    /*Header Tag h4 - Section - Sub-titles */
    h4 {
        margin: 0;
        display:flex;
        justify-content: center;
        align-items: center;
        color:var( --h2-h4-txt-color);
        font-weight: 200;
        font-size: 1.1em;
    }

    .product-item-grid-container{
    
       display:grid;
       grid-template-columns: 1fr; 
       grid-template-rows: repeat(4, 300px); 
       grid-auto-rows: 300px;
       width: 100%;
       grid-gap: 5px;
       grid-template-areas: 
           "row1-left-mid"   
           "row1-right-mid"
           "row2-left-mid"   
           "row2-right-mid"   
    }

    .copyright-border-container{
        display: grid;
        grid-template-columns: 0.1fr 2.6fr 1.2fr 0.1fr;
        text-align: left;
        font-size: 0.9em;
        padding:20px;
        color:whitesmoke;
        background-color: black;
        height:10px;
    }

    /* Area for the back to the top link */

    .copyright-border-container > .bottom-right-side-mid {
        display:flex;
        justify-content: right;
        font-size: 1em;
        text-align: right;
    }

    .bottom-nav-link-wrapper{
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        height: 22px;
        border-bottom: 1px solid transparent;
        transition: border-bottom 0.5s;
    }

    .bottom-nav-link-wrapper a {
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        color:white;
        text-decoration: none;
        transition: color 0.5s;
    }

    .bottom-nav-link-wrapper:hover {
        display: flex;
        font-size: 1em;
        text-align: right;
        padding-top: 1px;
        border-bottom: 1px solid #8b8b8b;;
    }
}

/* end of CSS */