@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Josefin Sans", sans-serif;
}

#navbar{
    position: sticky;
    top:0;
    left:0;
    z-index: 100;
    padding: .5rem .5rem;
    box-shadow: 5px 5px 20px rgba(0,0,0,.5);
    background:black;
    }

    .navbar .navbar-brand{
        font-size: 40px;
        font-weight: 800px;
        color: green !important;
    }

    #navbarSupportedContent a{
        color: white;
        font-size: 25px;
        border-bottom: 2px solid transparent;
    }
   
    #navbarSupportedContent a:hover{
        border-bottom: 2px solid green;
;
    }

    #navbarSupportedContent button{
        background:green;
        font-size: 25px;
        border-radius: 15px;
    }


section{
    width :100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}



/*Home area*/

#home{
    background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,1)),url("back1_img.jpg");
    background-size: cover;
    background-position:center;
    flex-direction: column;
}

#home h1{
    font-size: 100px;
    color: rgb(1, 7, 1);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    letter-spacing: 3px;
    text-shadow: 0px 1px 0px rgb(77, 218, 77),
                 0px 2px 0px rgb(77, 218, 77),
                 0px 3px 0px rgb(77, 218, 77),
                 0px 4px 0px rgb(77, 218, 77),
                 0px 5px 0px rgb(77, 218, 77),
                 0px 6px 0px rgb(77, 218, 77),
               
}

#home p{
    font-size: 40px;
    color: white;
}

#home .input-group{
    width: 40%;
    height: 45px;

}

.btn-signin{
    background: green !important;
    color: white;
    padding: 5px 5px;
    border-radius: 2px;
    box-shadow: 2px 4px 5px rgba(0,0,0,0.3);

}


.about{
    background:steelblue;
}

.about h1{
    font-weight: 800px;
    font-size: 50px;
    color: wheat;
}

#about p{
    color:rgb(54, 12, 12);
}


#product{
    background: #e5e5e5;

}

#product h1{
    font-size: 50px;
    letter-spacing: 2px;
    font-weight: 700;

}


#product img{
    width: 200px;
    height: 200px;
  object-fit: cover;   /* crop nicely if ratio is different */
  margin: 0 auto;      /* center horizontally */
  display: block;
  padding-top: 25px;
  border-radius: 5px;
    
}

.card{
    width: 250px;
    height: 300px;
    background: #e5e5e5 !important;
    border: none !important;
    box-shadow: 15px 20px 20px rgba(0,0,0,0.3) ,inset 4px 4px 10px white;
    border-radius: 20px !important;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    margin: 20px 60px;
}

.card:hover{
    box-shadow: inset 5px 5px 10px rgba(0,0,0,0.3),
                inset -4px -4px 10px white;
                transition: .2s;
}






.card a{
color:white;
}







#contact img{
    height: 100%;

}

.box{
    width: 80% !important;
    margin-top: 10px;

}

form{
    display: flex;
    flex-direction: column;
}

#contact{
    background-color: gainsboro;
}

#contact input{
margin: 10px 0;

}

#contact textarea{
margin: 10px 0;

}

#contact .btn-signin{
    margin: 10px 0;
}

.row img{
    border-radius: 50px;
}

footer{
    width: 100%;
    height: 30px;
    text-align: center;
    background-color: green;
    color: white;
    padding: 3px;
}