*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
        }
        /* Background Image  */
        .main{
            display: flex;
    /* align-items: center; */
    justify-content: center;
    background-image: url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-size: cover;
    width: 100%;
    height: 500px;
    background-position: 0 -6rem;
        }
        .tagline{
            text-align: center;
            font-size: 50px;
            color: white; 
        }

/* <!-- OverLay Effect --> */

        .card{
            margin-top: 100px;
            background-image: url(https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?q=80&w=688&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
            background-size: cover;
            border: 2px solid black;
            height: 400px;
            width: 400px;
            background-position: 0 -111px;
            overflow: hidden;
        }
        .box1{
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.327);
            opacity: 0;
            height: 0%;
            transition: all .3s linear;
           
        }
      
    .card:hover .box1{
       cursor: pointer;
       /* transform: translateY(-6px); */
       opacity: 1;
        height: 100%;
        }

  .txtcrd{
font-size: 20px;
font-weight: bold;

        }

        /* Overlay Effect using POstion */
        .pr-crd{
            margin: 100px auto;
            background-image: url(https://images.unsplash.com/photo-1580910051074-3eb694886505?q=80&w=765&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
            background-size: cover;
            border: 2px solid black;
            height: 500px;
            width: 400px;
            position: relative;
            overflow: hidden;
        }
        .box2{
            display: flex;
            align-items: center;
            justify-content: center;
            /* position: absolute; */
            background-color: rgba(0, 0, 0, 0.248);
            height: 100%;
            width: 100%;
            transition: all .3s linear;
            /* visibility: hidden; */
            opacity: 0;
            position: absolute;
            top: 0%;
            left: 0%;
transition: all 2s linear 0;     
   }
        .pr-crd:hover .box2{
         cursor: pointer;
         /* visibility: visible; */
         opacity: 1;
         height: 100%;
         
        }
        .buy{
            padding: 10px 20px;
            background-color: red;
            color: white;
            border: none;
            border-radius: 20px;
            transition: all .3s linear;
        }
        .buy:hover{
            cursor: pointer;
            transform: scale(.9);
        }
        

         /* Full Overlay Effect using POstion  */
        .pr-crd1{
            margin: 100px auto;
            background-image: url(https://images.unsplash.com/photo-1580910051074-3eb694886505?q=80&w=765&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
            background-size: cover;
            border: 2px solid black;
            height: 500px;
            width: 400px;
            position: relative;
            overflow: hidden;
        }

        .box3{
            display: flex;
            align-items: center;
            justify-content: center;
            /* position: absolute; */
            background-color:skyblue;
            height: 100%;
            width: 100%;
            transition: all .3s linear;
            /* visibility: hidden; */
            opacity: 0;
            position: absolute;
            top: 0%;
            left: 0%;
            transition: all 2s linear 0;     
         }
         
        .pr-crd1:hover .box3{
         cursor: pointer;
         /* visibility: visible; */
         opacity: 1;
         height: 100%;
         
        }