@font-face
{
    font-family: Montserrat;
    src: url(assets/Montserrat-Regular.ttf);
}

*
{
    margin: 0;
    padding: 0;
}

html
{
    scroll-behavior: smooth;
}

img
{
    width: 100%;
}

body
{
    font-size: 16px;
    display: grid;
    font-family: Montserrat,'Lato', Courier, monospace;
    background-color: #fff ;
}

.container
{
    display: grid;
    gap: 10px;
    margin: 50px;
}

/* Header */
.header
{
    display: grid;
    grid-template-areas: 
    'hero hero features-1'
    'hero hero features-2';
}

.hero
{
    padding: 50px;
    grid-area: hero;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    background-image: url(img/hero.png);
}

.hero > *{
    display: none;
}

.feature
{
    display: grid;
    color: white;
    place-content: center;
    text-align: center;
    cursor: pointer;

}

.feature .price
{
    font-weight: 200;
    font-size: 2em;
}

.features-1
{
    grid-area: features-1;
    background-size: cover;
    background-position: center;
    background-image: url(img/price-1.jpg);
}

.features-2
{
    grid-area: features-2;
    background-size: cover;
    background-position: center;
    background-image: url(img/features-2.JPG);
}

/* Navigation */

.menu
{
    order: -1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    margin-top: -40px;
}

.brand
{
    justify-self: center;
}


.brand img
{
    max-width: 200px;
}

.menu ul
{
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
    align-items: center;
    gap: 10px; 
}

.menu li
{
    text-align: center;
}


.menu a {
    padding: 7px;
    text-decoration: none;
    color: #222222;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9em;
}

.menu a:hover
{
    border-bottom: 1px solid black;
}

.menu-toggle
{
    display: none;
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    position: relative;
    z-index: 5;
}

.menu-toggle span
{
    display: block;
    width: 28px;
    height: 3px;
    background-color: #222222;
    border-radius: 3px;
    transition: all 0.5s;
}

.menu-toggle input 
{
    display: block;
    position: absolute;
    background-color: #000;
    width: 40px;
    height: 28px;
    left: -5px;
    top: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

.menu-toggle span:nth-child(2)
{
    transform-origin: 0 0;
}

.menu-toggle span:nth-child(4)
{
    transform-origin: 0 100%;
}

.menu-toggle input:checked ~ span:nth-child(2)
{
    background-color: #fff;
    transform: rotate(-45deg) translate(-1px,-1px);
}
.menu-toggle input:checked ~ span:nth-child(4)
{
    background-color: #fff;
    transform: rotate(45deg) translate(-1px,0);
}
.menu-toggle input:checked ~ span:nth-child(3)
{
    opacity: 1;
    transform: scale(0);
}

/* Services */

.services
{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 20px;
    text-align: center;
}

.box
{
    display: grid;
    place-content: center;
    background-image: url(img/services-4.jpg);
    background-size: cover;
    background-position: center;
    min-height: 180px;
    border-radius: 10px;  
}
.box2
{
    display: grid;
    place-content: center;
    background-image: url(img/services-2.jpg);
    background-size: cover;
    background-position: center;
    min-height: 180px;
    border-radius: 10px;  
}
.box3
{
    display: grid;
    place-content: center;
    background-image: url(img/services-3.jpg);
    background-size: cover;
    background-position: center;
    min-height: 180px;
    border-radius: 10px;  
}

.services a
{
    text-decoration: none;
    color: #fff;
    display: none;
}
/* 
.box .desc:hover
{
    background-image: linear-gradient(to top, rgba(245, 246, 252, 0.52), rgba(24, 22, 22, 0.8)),url(img/services-1.jpg);
    
} */

.box:hover a,.box2:hover a,.box3:hover a{
    display: inherit;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.5em;
    text-shadow: 0 0 3px #000;
}


.sale
{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    place-content: center;
    margin-top: 10px;
    grid-template-areas: 
    'label item'
    'label item';
}

.promo
{
    background-color: black;
}

.label
{
    grid-area: label;
    display: grid;
    color: #fff;
    font-size: 1.5em;
    font-weight: 500;
    place-content: center;
    text-align: center;
    background-color: #222222;
    gap:10px;
}

.sale .item
{
    grid-area: item;
    display: grid;
    color: white;
    place-content: center;
    text-align: center;

}

.sub-title
{
    display: grid;
    place-content: center;
    font-size: 0.7em;
    font-weight: 200;
    text-align: center;
}

.sale .item img
{
    padding: 20px;
    border-radius: 50%;
    max-width: 190px;
}

/* Gallery */

.gallery
{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}

.product
{
    margin-top: 20px;
}

.product h2
{
    grid-column: 1/-1;
    text-align: left;
    font-size: 2em;
    margin-bottom: 20px;    
}

.product img
{
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.card
{
    background-color: #222222;
    border-radius: 20px;
}

.card img
{
    max-width: 300px;
}

.card .desc
{
    padding: 20px;
    color: #fff;
}

.card .desc p
{
    text-align: right;
    font-weight: 200;
    font-size: 1.5em;
}

/* About */

.about
{
    display: grid;
    grid-template-areas: 
    'right  left'
    'right  left'
    ;
    margin-top: 30px;
}

.left
{
    grid-area: left;
    display: grid;
    place-content: center;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(to right, rgba(245, 246, 252, 0.52), rgba(27, 27, 27, 0.8)),url(img/price-1.jpg);
    min-height: 400px;
    color: #222222;
    gap: 30px;
}

.left h1
{
    text-align: right;
    font-weight: 800;
    font-size: 2em;
    color: #fff;
}

.left p
{
    color: #fff;
    text-align: right;
    font-weight: 300;
    font-size: 1em;
}

.right
{
    grid-area: right;
    display: grid;
    grid-template-rows: 1fr 50px 1fr;
}

.top
{
    background-color: #000;
    display: grid;
    place-content: center;
    color: #fff;
    font-size: 1.5em;
    font-weight: 200;
}

.mid
{
    background-color: #7e7a7a;
    display: grid;
    place-content: center;
    color: #fff;
    font-size: 1.5em;
    font-weight: 200;
}
.bot
{
    background-color: #000;
    display: grid;
    place-content: center;
    color: #fff;
    font-size: 1.5em;
    font-weight: 200;
}

/* footer */

.footer
{
    background-color: #222222;
    text-align: center;
    padding: 20px;
    color: #fff;
}

.footer img
{
    max-width: 200px;   
}

/* Responsive Breakpoint */

@media(max-width : 1024px)
{
    .menu
    {
        order: inherit;
        margin-top: 0px;
        grid-template-columns: 1fr;
    }

    .menu a
    {
        background-color: #7e7a7a;
        display: block;
        padding: 7px;
        text-decoration: none;
        color: #222222;
        font-weight: 400;
        text-align: center;
        text-transform: uppercase;
        font-size: 0.9em;
    }

    .hero
    {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: top;
    }

    .hero > *
    {
        display: block;
        color: #fff;
        font-weight: 400;
        font-size: 1.5em;
        padding: 0px;
    }

}

@media(max-width : 768px)
{
    .menu
    {
        order: -1;
        justify-items: end;
    }

    .hero
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: top;
    }
    

    .hero > *
    {
        display: inherit;
        font-weight: 800;
    }

    
    .menu-toggle
    {
        display: flex;
    }

    .menu ul
    {
        display: flex;
        position: absolute;
        right: 0;
        left: 0;
        height: 100vh;
        background-color: #7e7a7a;
        width: 100%;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        z-index: 1;
        transform: translateY(-100%);
        opacity: 0;
        transition: all 1s;
        
    }

    .menu ul.slide
    {
        opacity: 1;
        transform: translateY(0);
    }
    .about
    {
        grid-template-areas:
        'left'
        'right'
        ;
    }
    .left
    {
        min-height: 200px;
    }

    .left h1,.left p
    {
        text-align: center;
    }

    .right
    {
        min-height: 200px;
    }
}

@media(max-width : 600px)
{
    .header
    {
        grid-template-areas: 
        'hero'
        'features-1'
        'features-2';
    }

    .services
    {
        grid-template-columns: 1fr;
    }

    .sale
    {
        grid-template-columns: 1fr;
        grid-template-areas: 
            'label'
            'item'
        ;
    }

    .label
    {
        padding: 10px;        
    }
}