@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap");

/* HOW TO MAKE A COMMENT IN VSCODE---CTRL-> / */
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
/* css variables */
/* gloabal styles starts here */
:root {
--primary: #ddd;
--dark: #333;
--darkorange: darkorange; /*main color*/
--white: #fff;
--darkgodenrod: darkgoldenrod;
--fadedwhite: #bbbbbb;
--blue: #047aed;
--backgroundd: #2c3e50;
--blackish: #131313;
--pureblack: #000000;
--gradient1: linear-gradient(to right, rgba(8, 97, 138, 0.267), #575154);
--backgroundgrad1: -webkit-linear-gradient(to right, #fcb045, #790824d0, #0d72c5);
--backgroundgrad2: linear-gradient(to right, #fcb045, #e61616, #e9c70a);
--colorgradient: linear-gradient(to top, #ff0844 0%, #ee410c 100%);
--colorgradient3: linear-gradient(to top, #ff087b 0%, #ed1a52 100%)
--grdnt: linear-gradient(to right, rgba(153, 49, 153, 0.267), #a0477b);
--formshadow: 0 3px 10px rgba(0, 0, 0, 0.7); /*0 horizontal offset, 3px vertical offset, 10px blur,color :rgba() */
--gridshadow: 0 1px 5px rgba(104, 104, 104, 0.8);
--box-shadow1: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
--box-shadow2: 0 4px 8px 0 rgba(167, 78, 140, 0.9),
    0 6px 20px 0 rgba(0, 0, 0, 0.9);

}

/* -------content section */
.box1{
text-align: center;
width: 50%;
height: auto;
margin: 100px auto;

}
.container table{
width: 100%;
text-align:center;
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
border: 1px solid slateblue;
outline: none;

}
/* FOR SMALLER SCREENS/DEVICES SUCH AS PHONES */
@media screen and (max-width: 992px) {
    .container table{
        margin-bottom: 60px;
    }
}

.container table thead{
background: black;
}
.container table thead th{
padding: 5px;
color: white;
text-transform: capitalize;
font-size: 16px;
}
.container table .table_bottom{
background-color: slateblue;
}
.container table tr .tdata1{
padding: 2px;
font-size: 17px;
color: black;
border-bottom: 2px solid slateblue;
}
.thd{
border-right: 2px solid slateblue;
}
.container table .trow2{
padding: 2px;
font-size: 17px;
color: black;
border-bottom: 2px solid steelblue;
}
.container table tr td:nth-child(1){
padding: 0;
}
.container table tr td input[type="number"]{
width: 50px;
padding: 4px 5px;
outline: none;
font-size: 17px;
border: 1px solid slateblue;
}
/* -----------styling download button */
.row{
margin: 15px auto;
}
.download-btn{
background: dodgerblue;
color:white;
padding: .8rem 1.5rem;
font-size:1.5rem;
text-decoration: none;
border-radius:5px;

}
.download-btn:hover{
color: black;
}

/* -------------APPLYING BLUR EFFECT ON SOME TEXT TO HIDE FULL CONTENT */
.blur{
color: transparent;
text-shadow: 0 0 7px rgba(0,0,0,0.8);
}


    .send-btn{
          background: slateblue!important;
          border-color: slateblue;
          color: white!important;
      }
      .send-btn:hover{
        background: steelblue!important;
      }
      .send-btn:hover{
        background: slateblue;
        border-color: slateblue;
      }

      .crc li::marker{
        color: slateblue;
        font-size: 30px;
      }
        .whatsup{
            color: rgb(18, 236, 109);
            background: transparent;
            padding: 12px;
            text-align: center;
            border-radius: 50%; 
            position: fixed;
            left: 40px;
            bottom: 5px;
            cursor: pointer;
            transition: opacity 0.5s;

            animation: scaleup 4s ease-in-out infinite;
        }
             @keyframes scaleup {
            0%{
                transform: scale(1.3);
            }
            50%{
                transform: scale(1);
            }
            100%{
                transform: scale(1.3);
            }
        }

        .guide{
            border-radius: 7px;
            padding : 14px 14px;
        }
        .guide p{
            padding: 10x;
        }

        .hand{
            color: slateblue;
            position: absolute;
            left:50px;
            animation: scaledown 4s ease-in-out infinite;
        }
        
        @keyframes scaledown {
            0%{
                transform: scaleY(1.3);
            }
            50%{
                transform: scale(1);
            }
            100%{
                transform: scaleY(1.3);
            }
        }