/* CSSVariables */

:root {
    --primary: #ddd;
    --dark: #333;
    --light: #fff;
    --shadow: 0 1px 5px rbga(104, 104, 104, 0.8);
}

html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark);
}

body {
    background: rgb(0, 0, 0);
    /* margin: 30px 50px; */
    margin-left: 100px;
    margin-right: 100px;
    line-height: 1.4;
}

.btn {
    background: var(--dark);
    color: var(--light);
    padding: 0.6rem 1.3rem;
    text-decoration: none;
    border: 0;
}

img {
    height: auto;
    width: auto;
    max-height: 142px;
    max-width: 500px;
}

ul {
    list-style-type:  none;
}

a {
    text-decoration: none;
}

h1, h2 {
    font-weight: 300;
    line-height: 1.2;
    margin: 10px 0;
}

.wrapper {
    display: grid;
    grid-gap: 20px;
}

/* Navigation */
.navbar {
    background-color: black;
    color: aliceblue;
    height: 150px;
}
.navbar ul {
    display: flex;
}
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    overflow: auto;
    padding: 0 50px;
}

.navbar .flex {
    justify-content: space-between;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.navbar a {
    color: aliceblue;
    font-size: 30px;
    padding: 25px;
    margin: 0 5px;
}

.navbar a:hover {
    border-bottom: 2px #fff;
}

/* Top Container */
.top-container {
    display: grid;
    grid-gap: 20px;
    grid-template-areas: 
    'showcase showcase top-box-t';
    /* 'showcase showcase top-box-b';  */
}


/* ShowCase */
.showcase {
    grid-area: showcase;
    min-height: 500px;
    background: url();
    background-image: url("../images/left_Card_Display_Setup.jpg");
    background-size: cover;
    background-position: center;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: top;
    justify-content: center;
    box-shadow: var(--shadow);
}
.showcase > img
{
    /* object-fit: cover; */
    width: 100%;
    max-height: 100%;
}

.showcase h1 {
    font-size: 4rem;
    margin-bottom: 0;
    color: var(--light);
}

.showcase p {
    font-size: 1.3rem;
    margin-top: 75%;
    color: var(--light);
}

.showcase .btn {
    width: 75px;
    text-align: center;
    align-items: center;

    justify-content: center;
}
/* top box */

.top-box {
    background: var(--light);
    display: grid;
    align-items: center;
    justify-items: center;
    box-shadow: var(--shadow);
    padding: 1.5rem;
}
/* for prices in services */
.top-box .price {
    font-size: 2.5rem;
}

.top-box-t {
    grid-area: top-box-t;
}

.top-box-t > img
{
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

.top-box-b {
    grid-area: top-box-b;
}

/* box section */

.box-container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "box_a box_a box_b box_b box_c box_c";
    align-items: start;

}

.box_a {
    display: grid;
    grid-area: box_a;   
    justify-content: center;
    box-shadow: var(--shadow);
}

.box_b {
    grid-area: box_b;
}
.box_c {
    grid-area: box_c;
}
/* Gallery section */
.gallery-container {
    background: var(--primary);
    box-shadow: var(--shadow);
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(5, 200px);
    grid-template-rows: repeat(4, mimax(150px));

    padding: 3rem;
}

/* portfolio section */
.portfolio-container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.portfolio-container img {
    width: 100%;
    box-shadow: var(--shadow);
}

 /* service */
.top-container-services
{
    background: var(--primary);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    /* width: fit-content; */
    padding: 3rem;
}

.main-service-box
{
    grid-area: 1 / 1 / 3 / 5; 
    
    /* background-image: url("images/priceSheet.jpg"); */
    /* background-size: cover; */
    background-position: center;
    
   
    
    box-shadow: var(--shadow);
}
.main-service-box > img 
{
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
}
    
    /* .div1 { grid-area: 1 / 1 / 6 / 4; }
    .div2 { grid-area: 1 / 4 / 3 / 6; } */
    
.right-box
{
    grid-area: 1 / 5 / 3 / 6;
    margin-top: 30px;
    margin-left: 30px;

    font-size: larger;
    text-align: center;
}

/* Top Contact section */
.top-contact-flex-header
{
    display: flex;
    align-content: center;
    justify-content: center;
    color: azure;
}

.top-contact-container
{
    background: var(--primary);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(5, 15vw);
    grid-template-rows: repeat(2, 22vw);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: fit-content;
    padding: 3rem;
}

.main-contact-box 
{
    grid-area: 1 / 1 / 3 / 4; 
}

.right-contact-box
{
    grid-area: 1 / 4 / 3 / 6;
    padding: 10px;
}
.right-contact-box h2
{
    text-align: center;
    justify-content: center;
}
/* footer */
footer {
    display: flex;
    justify-content: center;
    margin-top: 0;
    background: var(--dark);
    color: var(--light);
    text-align: center;
    padding: 1rem;
}

.icon-ig
{
    margin-left: 10px;
    max-height: 50px;
    max-width: 50 px;
}

/* Media Queries */
@media(max-width: 700px) {
    .top-container {
        grid-template-areas: 
        'showcase showcase'
        'top-box-t top-box-b'
        ;
    }

    .showcase h1 {
        font-size: 2.5;
    }

    .main-nav ul {
        grid-template-columns: 1fr;
    }
    
    .info {
        grid-template-columns: 1fr;
    }

    .info .btn {
        display: block;
        text-align: center;
        margin: auto;
    }
}

@media(max-width: 500px) {
    .top-container {
        grid-template-areas: 
        'showcase'
        'top-box-t'
        'top-box-b';
    }
}

/* Gallery_About Section */

.gallery-container
{
    display: grid;
    background-color: #333;
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(2, 10vw);
    grid-template-rows: repeat(2, 15vh);
}  

/* notes
grid area : grid-row-start / grid-column-start / grid-row-end / grid-column-end: */
.gallery-item-1
{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

.gallery-item-1 > img
{
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

.gallery-item-2
{
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}

.gallery-item-2 > img
{
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

.gallery-item-3
{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 5;
}

.gallery-item-3 > img
{
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

.gallery-item-4
{
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
}

.gallery-item-4 > img
{
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}