*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding:0;
    text-decoration: none;
    outline: none;
    border: none;
    text-transform: capitalize;
    transition: all 0.2s linear;
}

$red:#e60000;
$black:#222;
$white:#fff;
$light-color:#666;
$ligh-bg:#eee;
$border:0.2rem solid $black;
$box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top:7rem ;
          &::-webkit-scrollbar{
            width: 1rem;}
            &::-webkit-scrollbar-track{
               background-color: transparent;
            }
            &::-webkit-scrollbar-thumb{
                background-color: $red;
             }
}

@mixin grid($val) {
    display: grid;
    grid-template-columns: repeat(auto-fit , minmax($val,1fr));
    gap: 2rem;
}
.heading{
text-align: center;
margin-bottom: 3rem;
font-size: 4rem;
}
section{
    padding: 3rem 9%;
}

.btn{
    // display: inline-block;
    margin-top: 20px;
    padding: 1rem 3rem;
    background: $red;
    color: $white;
    font-size: 1.7rem;
    box-shadow: $box-shadow;
    cursor: pointer;
    &:hover{
        letter-spacing: 0.1rem;
    }
}

.header{
    position: sticky;
    top:0;
    left: 0;
    right:0;
    z-index: 1000000;
    background-color: $red;
    box-shadow: $box-shadow;
    background: $white;
    display: flex;
    justify-content: space-between ;
    align-items: center;
    padding: 1.5rem 9%;
    .logo{
        font-size: 2.5rem;
        color: $black;
        font-weight: bolder;
        i{
            color: $red;
        }
    }
   
    .navbar a{
        margin: 0 1.5rem;
        font-size: 1.7rem;
        color: $black;
        &:hover{
            color: $red;
        }
    }
    .icons{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icons div,a{
        height: 4.5rem;
        width: 4.5rem;
        line-height: 4.5rem;
        border-radius: 0.5rem;
        background-color: $ligh-bg;
        font-size: 1.7rem;
        color: $black;
        margin-left: 0.3rem;
        text-align: center;
        cursor: pointer;
     &:hover{
      color: $red;
    }
    }
    .navbar a{
        background: transparent;
    }
    #menu-btn{
        display: none;
    }
    .search-form{
        position:absolute;
        top: 99%;
        right: 0px;
        left: 0px;
        height: 6rem;
        background: $white;
        border-top:$border;
        border-bottom:$border;
        display: flex;
align-items: center;
justify-content: space-between;
padding:0px 2rem;
clip-path: polygon(0 0,100% 0,100% 0,0 0);
// clip-path: polygon(0 0,100% 0,100% 100%,0 100%)
&.active{
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);  
}
input{
    width: 100%;
    font-size: 1.6rem;
    color: $light-color;
    text-transform:none;
}
label{
    font-size:2.5rem;
    margin-left:2rem;
    color:$black;
    cursor:pointer;
    &:hover{
        color:$red;

    }
}
    }
}



.home{
    position: relative;
    padding: 0;
    .slide{
        padding: 2rem;
        // display: flex;
        min-height: 60vh;
        display: none;
        &.active{
            display: flex;
        }
        .content{
            margin: auto;
            text-align: center;
            span{
                color: $black;
                //  display: block;
                font-size: 3rem;
                text-shadow: $box-shadow;
                animation:fadeIn 0.2s linear backwards;
            }
            h3{
                font-size: 5rem;
                color: $black;
                text-shadow: $box-shadow;
                text-transform:uppercase;
                animation: fadeIn 0.2s linear backwards 0.4s;
                margin-bottom: 2rem;
            }
            .btn{
                animation: fadeIn 0.2s linear backwards 0.7s;
            
               
            }
        }
    }
    #next-slide ,#prev-slide{
        height:5rem;
        width: 5rem;
        line-height: 4.5rem;
        font-size: 2.5rem;
        color: $black;
        border: $border;
        background: $white;
        box-shadow: $box-shadow;
        cursor: pointer;
        position: absolute;
        bottom: 2rem;
        right: 2rem;
        text-align: center;
        &:hover{
            background: $red;
            color: $white;
        }
    }
    #prev-slide{
        right:8rem;
    }
}

@keyframes fadeIn{
    0%{
        opacity:0;
        transform: translateY(-4rem) scale(2);
    }
}

.category{
    .box-container{
        @include grid(16rem);
        text-align: center;
.box:hover h3{
    color: $red;
}
        img{
            height: 14rem;
            margin-bottom: 1rem;
        }
        h3{
            font-size: 1.7rem;
            color: $black;
            font-weight: normal;
        }
       
    }
}



.about{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:2rem;
    .image{
        flex:1 1 42rem;
        padding-bottom: 5rem;
        padding-right: 5rem;

        img{
            width: 100%;
            box-shadow: 4rem 4rem  0 $ligh-bg;
        }
    }
    .content{
        flex:1 1 42rem;
        .box{
            padding: 3rem;
            background-color: $ligh-bg;
            h3{
                font-size:2.5rem;
                color: $black;
            }
p{
    padding: 1rem 0;
    line-height: 2;
    color: $light-color;
    font-size: 1.4rem;
    
}
        }
.icons-container{
    display: flex;
    // flex-wrap: wrap;
    // align-items: flex-end;
    gap: 2rem;
    margin-top: 2rem;
    .icons{
        flex:1 1 16rem;
        background-color: $ligh-bg;
        padding: 2rem;
        text-align: center;
        i{
            color: $red;
            margin-bottom: 1rem;
            font-size: 5rem;
        }
        p{
            font-size: 1.4rem;
            color: $light-color;
        }
    }
}
    }
}


.shop{
background-color: $ligh-bg;
.box-container{
    @include grid(31rem);
    .box{
        text-align: center;
        background: $white;
        border: $border;
        box-shadow: $box-shadow;
        &:hover .image{
            img{ transform: scale(1.1);}
            .icons{
                transform: translateX(0rem);
            }
        }

        .image{
            position: relative;
            overflow: hidden;

            img{
                height: 25rem;
            }
            .icons{
                position: absolute;
                top: 1rem;
                left: 2rem;
                transform: translateX(-10rem);
            
                a{
                    display: block;
                    height: 5rem;
                    width: 5rem;
                    line-height: 4.5rem;
                    font-size: 1.7rem;
                    color: $black;
                    border: $border;
                    box-shadow: $box-shadow;
                    margin-top: 1rem;
                    &:hover{
                        color: $white;
                        background: $red;
                    }
                }
            }

            .content{
                padding:2rem;
                h3{
                    font-size: 2rem;
                    padding-bottom: 2rem;
                    font-weight: normal;
                }
                .price{
                    font-size: 2rem;
                    font-weight: bolder;
                    color: $red;
                    margin-bottom: 2rem;
                    span{
                        color: $light-color;
                        font-size: 1.5rem;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }
}
}

.banner{
    background: url(../images/banner-bg.png);
    background-size: cover;
    background-position: center;
    .content{
        max-width: 40rem;
        background:$white;
        box-shadow: $box-shadow;
        padding: 2rem;
        text-align: center;
        margin: 10rem 0 ;
       a{
           margin-bottom: 4rem;
       }
        span{
            font-size: 2rem;
            color: $red;
        }
        h3{
            font-size: 3rem;
            padding-top:0.5rem;
        }
        p{
            font-size: 1.4rem;
            color: $light-color;
            padding: 1rem 0;
            line-height: 2;
            margin-bottom: 2rem;
        }
    }
}

.gallery{
    .box-container{
        @include grid(31rem);
        .box{
            // overflow: hidden;
            height: 25rem;
            box-shadow: $box-shadow;
            position: relative;
&:hover .content{
    display: flex;
}
            img{
                width:100%;
                height:100%;
                object-fit:cover;
            }

            .content{
                border: $border;
                background: rgba(255 ,255,255,0.8);
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                position: absolute;
                top:0;
                left: 0;
                width: 100%;
                height: 100%;
                // padding:2rem;
                display: none;
                h3{
                    font-size: 2rem;
                    color: $black;
                    animation: fadeIn 0.2s backwards linear;
                }
                p{
                    font-size: 1.4rem;
                    color: $black;
                    padding: 1rem 0;
                    line-height: 2;
                    animation: fadeIn 0.2s linear backwards 0.4s;
                }
                .btn{
                    animation:fadeIn 0.2s linear backwards 0.6s ;
                }
            }
        }

    }
}


.message{
    background: url(../images/message-bg.png) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 3rem 2rem;
    form{
        margin:2rem auto;
        text-align: center;
        background: $white;
        max-width: 40rem;
        box-shadow: $box-shadow;
        padding:2rem;
        h3{
            font-size: 3rem;
        }
        .box{
            width:100% ;
            border-bottom: $border;
            padding: 1.5rem 0;
            margin: 0.7rem 0;
            color: $light-color;
            text-transform: none;
            &:focus{
                border-color: $red;
            }
            textarea{
                height: 15rem;
                resize: none;
            }
        }
    }
}

.blog{
    .box-container{
        @include grid(31rem);
        .box{border: $border;
            &:hover .image img{
                transform: scale(1.1);
            }
            .image{
                overflow: hidden;
                height: 30rem;
                width: 100%;
                border-bottom: $border;
                img{
                    width:100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
}
.content{
    padding: 2rem;
    position: relative;
      .date{
    position: absolute;
    top: -4rem;
    right: 3rem;
    border: $white solid .5rem;
    border-radius: 50%;
    width: 8rem;
    height: 8rem;
    background: $red;
    text-align: center;
    padding-top: 1rem;
         h3{
            font-size: 2.7rem;
            line-height: 1;
           color: $white;
            }
      span{
        font-size:1.5rem;
        color: $white;
         }
    }
    

    .user{
    display: block;
    padding-bottom:1rem;
    font-size: 1.5rem;
    color: $light-color;
       i{
        padding-right: 0.5rem;
        color: $red;
        &:hover{
            color: $red;
        }
        }
   
      }
      .title{
        font-size: 2rem;
        color: $black;
        &:hover{
            color: $red;
        }
     
       }
      p{
        padding: 1rem 0;
        line-height: 2;
        color: $light-color;
        font-size: 1.4rem;
    }
     }
    }
}


.service{
    @include grid(31rem);
    background: $red;
    .box{
        text-align: center;
        padding: 2rem;
        img{
            height: 10rem;
        }
        h3{
            padding: 1rem 0;
            font-size: 2rem;
            color: $white;
        }
        p{
            line-height: 2;
            font-size: 1.4rem;
            color: $white;
        }
    }
}

.footer{
    .box-container{
        @include grid(25rem);
        .box{
            h3{
                font-size:2.2rem;
                color: $black;
                padding: 1rem 0;
            }
            a:hover{color: $red;}
            .link{
                padding:1rem 0 ;
                font-size: 1.4rem;
                color: $light-color;
                display: block;
                
                i{
                    padding-right: 0.5rem;
                    color: $red;
                }
                &:hover{
                    i{padding-right: 2rem}
                }
            }
            .share{
                margin-top:2rem;
                a{
                    height: 4.5rem;
                    width: 4.5rem;
                    border-radius: 0.5rem;
                    line-height: 4.5rem;
                    font-size:1.7rem ;
                    background: $ligh-bg;
                    text-align: center;
                    color: $black;
                    margin-right: 0.5rem;
                    &:hover{
                        color: $white;
                        background: $red;
                    }
                }
            }
            form{
                .email{
                    border: $border;
                    width: 100%;
                    padding: 1.2rem 1.4rem;
                    text-transform: none;
                    color: $light-color;
                    margin: 1rem 0;
                    font-size: 1.6rem;
                }
                .btn{
                    width:100px;
                }
                
            }
            p{
                padding: 1rem 0;
                font-size: 1.7rem;
                color: $light-color;
            }
        }
      
    }
    .credit{
        text-align: center;
        margin: auto;
padding:1rem;
padding-top: 3rem;
margin-top: 3rem;
font-size: 2rem;
border-top: $border;
color:$light-color;
        span{
            color: $red;
        }
    }
}








// media queries
@media (max-width:991px){
    html{
        font-size: 55%;
    }
    .header{
        padding: 1.5rem 2rem;
    }
section{
    padding: 3rem 2rem;
}
}
@media(max-width:768px){
    .header{
        #menu-btn{
            display: inline-block;
        }
        .navbar{
            position:absolute;
            top: 99%;
            left: 0;
            right: 0;
            background: $white;
            border-bottom:$border;
            padding: 0 2rem;
clip-path: polygon(0 0,100% 0,100% 0,0 0);

            &.active{
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);  

            }
        }
        a{
            display: block;
            font-size: 2rem;
            margin: 3rem 1 1rem;
&:hover{
    padding-left:10px;
}
        }
    }
}

@media(max-width:450px){
    .home .slide .content{
        h3{
            font-size: 4rem;
        }
        span{
         font-size:4rem;
        }
    }
    .banner .content{
        margin: 3rem 0;

    }
}