/* ==========================
   Google Font
========================== */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Hind Siliguri',sans-serif;
    background:#f8fafc;
    color:#1f2937;
    line-height:1.6;
}

/* ==========================
   Scrollbar
========================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f3f4f6;
}

::-webkit-scrollbar-thumb{
    background:#dc2626;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#b91c1c;
}

/* ==========================
   Navbar
========================== */

nav{
    transition:.3s;
}

nav a{
    transition:.3s;
    position:relative;
}

nav a::after{

    content:"";
    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:#dc2626;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

/* ==========================
   Hero
========================== */

.hero{

    min-height:650px;

}

.hero h1{

    text-shadow:0 3px 10px rgba(0,0,0,.3);

}

.hero button{

    transition:.3s;

}

.hero button:hover{

    transform:translateY(-4px);

}

/* ==========================
   Section Title
========================== */

section h2{

    color:#111827;

}

/* ==========================
   Category Card
========================== */

section .bg-white{

    transition:.35s;

}

section .bg-white:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

/* ==========================
   Product Card
========================== */

.bg-gray-50{

    transition:.35s;

}

.bg-gray-50 img{

    transition:.5s;

}

.bg-gray-50:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.bg-gray-50:hover img{

    transform:scale(1.08);

}

/* ==========================
   Button
========================== */

button{

    cursor:pointer;
    transition:.3s;

}

button:hover{

    transform:translateY(-2px);

}

/* ==========================
   Contact Form
========================== */

input,
textarea{

    transition:.3s;
    outline:none;

}

input:focus,
textarea:focus{

    border-color:#dc2626;

    box-shadow:0 0 0 4px rgba(220,38,38,.15);

}

/* ==========================
   Footer
========================== */

footer{

    background:#111827;

}

footer p{

    letter-spacing:.5px;

}

/* ==========================
   Image
========================== */

img{

    display:block;
    max-width:100%;

}

/* ==========================
   Fade Animation
========================== */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.hero h1,
.hero p,
.hero button,
section{

    animation:fadeUp .8s ease;

}

/* ==========================
   Responsive
========================== */

@media(max-width:992px){

.hero{

    text-align:center;

}

.hero h1{

    font-size:45px;

}

}

@media(max-width:768px){

.hero{

    min-height:520px;

}

.hero h1{

    font-size:36px;

}

section h2{

    font-size:30px;

}

}

@media(max-width:576px){

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:15px;

}

button{

    width:100%;

}

.hero .flex{

    flex-direction:column;

}

}