/*HOME PAGE CSS*/

.herobanner{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    height: 550px;
    margin-top: 10px;
    border-radius: 10px;
    border-width: 2px;
    border-color: transparent;
    border-style:dotted;
    border-spacing: 3px;
    animation-name: borderclr;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
}

/*we use borderclr keyframe for effect otherwise use other effect of singlerun*/
@keyframes borderclr {
    25%{border-top-color: aqua;border-bottom-color: yellow;border-right-color: lime;border-left-color: black;}
    50%{border-top-color: black;border-bottom-color: lime;border-right-color: aqua;border-left-color: yellow;}
    75%{border-top-color: yellow;border-bottom-color: aqua;border-right-color: black;border-left-color: lime;}
    100%{border-top-color: lime;border-bottom-color: black;border-right-color: yellow;border-left-color: aqua;}
}
@keyframes singlerun {
    25%{border-top-color: yellow;}
    50%{border-right-color: yellow;}
    75%{border-bottom-color: yellow;}
    100%{border-left-color: yellow;}
}
.herobanner img{
    filter: brightness(100%);
    filter: contrast(100%);
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.card{
    width: 90%;
    margin-left: 70px;
    margin-top: 40px;
    position: relative;
    padding: 3px;
    background-color: rgb(5, 5, 5);
}
.card1{
    width: 40%;
    height: 280px;
    background-color: black;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    margin: 15px;
    margin-left: 100px;
    margin-right: 500px;
    box-shadow: 15px 15px 20px rgb(251, 255, 29);
    animation-name: card;
    animation-duration: 40s;
    animation-iteration-count: infinite;
  
}
.card1 h1{
   padding-left: 20px;
   padding-top: 20px;
    color: white;
    animation-name: cardh;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    
}
.card1 p{
    color: white;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 18px;
    font-size: larger;
    font-style: normal;
    font-weight: 600;
    animation-name: cardp;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    
 }
.card2{
    width: 40%;
    height: 280px;
    background-color: black;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    margin: 15px;
    margin-left: 620px;
    box-shadow: 15px 15px 20px rgb(251, 255, 29);
    animation-name: card;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    }
    .card2 h1{
        padding-left: 20px;
        padding-top: 20px;
        color: white;
        animation-name: cardh;
        animation-duration: 40s;
        animation-iteration-count: infinite;
    }
    .card2 p{
        color: white;
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 18px;
    font-size: larger;
    font-style: normal;
    font-weight: 600;
    animation-name: cardp;
    animation-duration: 40s;
    animation-iteration-count: infinite;
     }
.card3{
    width: 40%;
    height: 280px;
    background-color: black;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    margin: 15px;
    margin-left: 100px;
   margin-right: 500px;
   box-shadow: 15px 15px 20px rgb(251, 255, 29);
   animation-name: card;
    animation-duration: 40s;
    animation-iteration-count: infinite;
}
.card3 h1{
    padding-left: 20px;
    padding-top: 20px;
    color: white;
    animation-name: cardh;
    animation-duration: 40s;
    animation-iteration-count: infinite;
}
.card3 p{
   color: white;
   padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 18px;
    font-size: larger;
    font-style:normal;
    font-weight: 600;
    animation-name: cardp;
    animation-duration: 40s;
    animation-iteration-count: infinite;
}


.card4{
    width: 40%;
    height: 280px;
    background-color: black;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    margin: 15px;
    margin-left: 620px;
    box-shadow: 15px 15px 20px rgb(251, 255, 29);
    animation-name: card;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    }
    .card4 h1{
        padding-left: 20px;
        padding-top: 20px;
        color: white;
        animation-name: cardh;
        animation-duration: 40s;
        animation-iteration-count: infinite;
    }
    .card4 p{
        color: white;
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 18px;
    font-size: larger;
    font-style: normal;
    font-weight: 600;
    animation-name: cardp;
    animation-duration: 40s;
    animation-iteration-count: infinite;
     }



@keyframes card {
    25%{background-image: linear-gradient(yellow,black,black,yellow);box-shadow: -5px -5px 10px rgb(0, 247, 255);}
    50%{background-image: radial-gradient(white,aqua,magenta);box-shadow: 15px 15px 25px yellow;}
    75%{background-image: linear-gradient(aqua,pink,aqua);box-shadow: -5px -5px 10px rgb(9, 255, 0);}
    100%{background-image: radial-gradient(aqua,yellow,black);box-shadow: 15px 15px 10px white;}
}
@keyframes cardh {
    25%{color:rgb(207, 2, 2) ;}
    50%{color: black}
    75%{color: black;}
    100%{color: white;}
}
@keyframes cardp {
    25%{color: white;}
    50%{color: black;}
    75%{color: rgb(228, 0, 114);}
    100%{color: black;}
}







  /*ABOUT PAGE CSS*/





.aboutme{
    width: 70%;
    margin-left: 150px;
    background-color: aqua;
    border-radius: 20%;
    padding: 3%;
    animation-name: aboutbg ;
    animation-duration: 130s;
    animation-iteration-count: infinite;
}
@keyframes aboutbg {
     25%{background-image: linear-gradient(yellow,aqua,white);}
     50%{background-image: radial-gradient(black,blue,magenta);}
     75%{background-image: linear-gradient(white,black,red);}
     100%{background-image: radial-gradient(white,aqua,yellow);}
}
.aboutme summary{
    font-size: xx-large;
    font-weight: bold;
    font-style: normal;
    margin: 20px;
    animation-name: aboutsm ;
    animation-duration: 130s;
    animation-iteration-count: infinite;
}
@keyframes aboutsm {
    25%{color:black ;}
    50%{color: lime;}
    75%{color: magenta;}
    100%{color: red;}
}
.aboutme b{
    font-size: xx-large;
    font-weight: 700;
    font-style:normal; 
    margin: 30px;
    animation-name: aboutname ;
    animation-duration: 130s;
    animation-iteration-count: infinite;
}
@keyframes aboutname {
    25%{color: red;}
    50%{color: black;}
    75%{color: lime;}
    100%{color: black;}
}
.aboutme p{
    font-size: large;
    font-weight: 600;
    font-style:italic;
    margin-top:30px;
    animation-name: aboutp ;
    animation-duration: 130s;
    animation-iteration-count: infinite;
}
@keyframes aboutp {
    25%{color: black;}
    50%{color: white;}
    75%{color: lime;}
    100%{color: magenta;}
}
.aboutme img{
    width: 200px;
    height: 170px;
    float: left;
    margin: 13px;
    border-radius: 10px;
    animation-name: aboutimg ;
    animation-duration: 130s;
    animation-iteration-count: infinite;
}
@keyframes aboutimg {
    25%{width: 210px;height: 180px;float: right;}
    50%{width: 280px;height: 250px;border-radius: 20px;float: right;}
    75%{width: 200px;height: 150px;float: left;}
    100%{width: 300px;height: 310px;float: left;border-radius: 5px;}
}

.aboutcard{
    width: 80%;
  background-color: black;
  position: relative;
  margin-left: 10%;
  margin-bottom: 50px;
  border: 5px;
  border-style:dotted;
  animation-name: aboutcardbg;
  animation-duration: 30s;
  animation-iteration-count: infinite;

}
@keyframes aboutcardbg {
    25%{border-radius: 10px;border-color: aqua;}
    50%{border-radius: 20px;border-color: magenta;}
    75%{border-radius: 40px;border-color: yellow;}
    100%{border-radius: 30px;border-color: lime;}
}
.aboutcard div{
    width: 470px;
    background-color: black;
    margin-left: 50px;
    margin: 20px;
    margin-top: 50px;
    margin-bottom: 60px;
   display: flex;
   display: inline-flex;
   flex-wrap: wrap;
   box-shadow: 5px 5px 10px black;
   border-bottom-left-radius: 30px;
   border-top-right-radius: 30px;
   animation-name: aboutcarddivshadow;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}
@keyframes aboutcarddivshadow {
     25%{box-shadow: 10px 10px 10px white;}
     50%{box-shadow: -5px -5px 10px aqua;}
     75%{box-shadow: 10px 10px 10px lime;}
     100%{box-shadow: -5px -5px 10px yellow;}
}

.why{
    font-size: xx-large;
    font-weight: bold;
    font-style: normal;
    padding: 20px;
    color: white;
    margin-bottom: 10px;
    text-underline-offset: 10px;
    text-decoration:underline magenta 5px;
    text-transform: uppercase;
}
.aboutcard header{
    font-weight: bold;
    font-style: normal;
    font-size: x-large;
    margin-left: 20px;
    padding: 15px;
    color: white;
    text-underline-offset: 5px;
    text-decoration:underline aqua 3px;
}
.aboutcard li{
    list-style-type:square;
    margin: 15px;
    color: white;
    font-size: larger;
    font-weight: 400;
    text-transform: capitalize;
}
.aboutcard p{
   padding: 20px;
   color: white;
   font-size: larger;
   font-family:cursive;
   font-weight: 400;
   font-style: normal;
   text-transform: capitalize;
}

.aboutcard img{
    width: 130px;
    height: 90px;
    float: right;
    border-radius: 5px;
}



   /*PRODUCT PAGE CSS*/



.prmenu{
    width: 300px;
 margin-left: 70px;
 margin-bottom: 40px;
}
.prmenu summary{
    width: 100px;
    color: black;
    font-size: xx-large;
    font-weight: bold;
    font-style: normal;
    margin-left: 50px;
    margin-bottom: 10px;
    list-style-type: none;
    background-color: yellow;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 0px 25px white;
    animation-name: menusummary;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes menusummary {
    25%{box-shadow: 0px 0px 25px white;}
    50%{box-shadow: 0px 0px 25px black;}
    75%{box-shadow: 0px 0px 25x black;}
    100%{box-shadow: 0px 0px 25px lime;}
}

.prmenu a{
    width: 200px;
    color: black;
    display: block;
    margin-left: 100px;
    padding: 5px;
    font-size: large;
    font-weight: 700;
    text-decoration: none;
    background-color: rgb(255, 255, 255);
    border-radius: 30px;
    margin-top: 3px;
    text-align: center;
}




/*PRODUCT PAGE IDOL CSS*/




.heading{
    font-size:60px;
    font-weight: 700;
    color: rgb(67, 255, 255);
    text-align: center;
    text-shadow: 0px 0px 50px;
    margin-top: 50px;
    margin-top: 100px;
    animation-name: plcldecorname;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes plcldecorname {
     25%{color: white;}
     50%{color: yellow;}
     75%{color: lime;}
     100%{color: magenta;}
}

.idolpl{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 60px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    background-color: white;
}
.idolpl div{
     width: 325px;
     height: 325px;
     margin: 30px;
     overflow:hidden;
     font-size:x-large;
     font-weight: bolder;
     text-align: center;
}
.idolpl div:hover{
    border-radius: 30px;
    transition: 1.2s;
}
.idolpl img{
    width: 100%;
    height: 100%;
    transition: 2.3s;
}
.idolpl img:hover{
    transform: scale(1.2,1.2);
    transition: 1.2s;
    border-radius: 30px;
}

.idolpl video{
    width: 100%;
    height: 100%;
    transition: 2.3s;
}
.idolpl video:hover{
    transform: scale(1.1,1.1);
    transition: 1.2s;
}



/*idol page available order form css*/

.formheading{
    font-size:xx-large;
    font-weight: 700;
    color: rgb(67, 255, 255);
    text-align: center;
    text-shadow: 0px 0px 50px;
    margin-top: 60px;
    margin-top: 100px;
    animation-name: plcldecorname;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.orderavailableform{
    width: 500px;
    margin-left: 380px;
    background-image: linear-gradient(rgb(60, 255, 0),aqua,magenta);
    padding: 20px;
    border-radius: 10%;
    margin-bottom: 40px;
    animation-name: availableformbg;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
@keyframes availableformbg {
    25%{background-image: linear-gradient(aqua,white,yellow);border-radius: 10px;box-shadow: -8px -8px 10px white;}
    50%{background-image: radial-gradient(magenta,lime,black);border-radius: 15%;box-shadow: 8px 8px 10px white;}
    75%{background-image: linear-gradient(yellow,red,lime,orange,aqua,magenta,black);border-radius: 10px;box-shadow: -8px -8px 10px white;}
    100%{background-image: radial-gradient(aqua,lime,black);border-radius: 15%;box-shadow: 8px 8px 10px white;}
}

.orderavailableform th{
    width: 150px;
    padding: 12px;
    font-size: larger;
    font-weight: 700;
    text-align: center;
}
.orderavailableform td{
    width: 300px;
    height: 25px;
    padding: 12px;
}
.orderavailableform td input{
    padding: 10px;
    width: 250px;
    border-collapse:collapse;
    border-spacing: 0px;
    font-size: medium;
    border-radius: 10px;
}
.orderavailableform td select{
    width: 100px;
    padding: 8px;
}

.orderavailableform input:hover{
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right:none;
    border-width: 0px;
    border: none;
    border-color: transparent;
    font-weight: 500;
}
.orderavailableform button[type="reset"]{
    margin-right: 20%;
}

/*custom idol form css...........*/
.ordercustomform{
    width: 500px;
    margin-left: 380px;
    background-image: linear-gradient(rgb(60, 255, 0),aqua,magenta);
    padding: 20px;
    border-radius: 10%;
    margin-bottom: 40px;
    animation-name: availableformbg;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}


.ordercustomform th{
    width: 150px;
    padding: 12px;
    font-size: larger;
    font-weight: 700;
    text-align: center;
}
.ordercustomform td{
    width: 300px;
    height: 25px;
    padding: 12px;
}
.ordercustomform td input{
    padding: 10px;
    width: 250px;
    border-collapse:collapse;
    border-spacing: 0px;
    font-size: medium;
    border-radius: 10px;
}
.ordercustomform td select{
    width: 100px;
    padding: 8px;
}

.ordercustomform input:hover{
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right:none;
    border-width: 0px;
    border: none;
    border-color: transparent;
    font-weight: 500;
}
.ordercustomform button[type="reset"]{
    margin-right: 20%;
}



/*Idol page Custom genasha idol form*/
/*Here we adjust same availableform just aplpy inline css for @keyframes name,duration and iteration-count in html tag and make following background effect.*/

@keyframes customformbg {
    25%{background-image: linear-gradient(aqua,white,yellow);border-radius: 10px;box-shadow: -8px -8px 10px white;}
    50%{background-image: linean-gradient(aqua,aqua,black);border-radius: 15%;box-shadow: 8px 8px 10px white;}
    75%{background-image: linear-gradient(yellow,magenta,lime);border-radius: 10px;box-shadow: -8px -8px 10px white;}
    100%{background-image: linear-gradient(lime,lime,black);border-radius: 15%;box-shadow: 8px 8px 10px white;}
}




/*Plaster Page Order form*/


.plasterform{
    width: 80%;
   margin-left: 10%;
   margin-right: 10%;
    margin-bottom: 30px;
    background-color: white;
}
.plasterform table{
    width: 70%;
    padding: 20px;
    margin-left: 20%;
    margin-right: 20%;
}
.plasterform table tr{
    padding: 50px;
}
.plasterform legend{
   color: rgb(11, 14, 14);
   font-size: large;
   font-weight: 800;
   margin: 2px;
   margin-top: 30px;
   text-align: left;
}
.plasterform tr td input{
    width: 68%;
    padding: 4px;
    margin-left: 10%;
    font-size: large;
    font-weight: 400;
}
.plasterform input:hover{
    border-top: none;
    border-left: none;
    border-right: none;
    border-width: 2px;
    border-bottom-color: aqua;
}

.plastersubmitbtn{
    width: 68%;
    padding: 7px;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
    font-size: large;
    box-shadow: 3px 3px 5px;
    font-weight: 500;
    border-radius: 9px;
    background-color: yellow;
    color: black;
}
.plastersubmitbtn:hover{
    width: 68%;
    padding: 8px;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
    font-size: large;
    font-weight: 500;
    border-radius: 9px;
    background-color: lime;
    color: black;
    box-shadow: 5px 5px 12px;
}

.plasterform input[type="radio"]{
    width: 100px;
    height: 20px;
    margin-top: 10px;
    margin-bottom: -5px;
    margin-right: -20px;
}
.plasterform input[type="checkbox"]{
    width: 100px;
    height: 20px;
    margin-top: 10px;
    margin-bottom: -5px;
    margin-right: -20px;
}
.plasterform td{ 
    font-weight: 600;
}






/*class of btn*/

.btn{
    width: 150px;
    padding: 8px;
    border-radius: 9px;
    box-shadow: 3px 3px 5px;
    font-size: larger;
    font-weight: 500;
    margin-top: 20px;
    background-color: white;
}
.btn:hover{
    box-shadow: 5px 5px 12px;
    background-color: rgb(95, 255, 95);
    color: black;
}
.danger{
    width: 100px;
    padding: 10px;
    border-radius: 100%;
    box-shadow: 2px 2px 3px;
    font-size: large;
    font-weight: 400;
    margin-top: 20px;
    background-color: white;
}
.danger:hover{
    box-shadow: 3px 3px 8px;
    background-color: rgb(253, 3, 3);
    color: white;
    font-weight: 400;
}




/*PRODUCT PAGE PLASTER CSS* Here we adjust idolpl class and manage same plaster div to p.o.p suplier div/
/*we aply idolpl class on plaster suplier div or page then we adjust it by idolpl class but in below case*/
/*----below case we modify overflow img property as well as margin of div because in case of overflow:hidden no problem of margin*/
/*But in case of overflow:visisble (its by default visible if you not mentioned) its size increase outside then we adjust the margin*/




/*PRODUCT PAGE DECORATION CSS*/

.decoration{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 60px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    background-image: linear-gradient(#f2f2f2,black 20%,lime,black,aqua,black,yellow,black,magenta,black);
}
.decoration div{
     width: 275px;
     height: 275px;
     margin: 40px;
     margin-left: 60px;
     overflow:visible;
}
.decoration div:hover{
    border-radius: 60px;
    transition: 1.3s;
}
.decoration img{
    width: 100%;
    height: 100%;
    transition: 2s;
}

.decoration img:hover{
    transform: scale(1.3,1.3);
    transition: 1.2s;
    border-radius: 30px;
}




/*Contact Page form with images css........*/



.memberdiv{
   width: 80%;
   height:700px;
   background-size: 100% 100%;
   margin-left: 10%;
   margin-right: 10%;
   margin-top: 30px;
   margin-bottom: 80px;
   background-color: transparent;
}

.memberdiv1{
   width: 50%;
   height: 90%;
   margin-top: 5%;
   margin-bottom: 5%;
   float: left;
   padding: -5%;
   overflow: hidden;
   background-size: 100% 100%;
}
.memberdiv1 img{
    transition: 50s;
    width: 50%;
    height: 50%;
    margin: 25%;
}

.memberdiv1 img:hover{
    transform: scale(3,2); 
    transition-duration: 0.00001s; 
    overflow: hidden;
    border-radius: 45%;
}
.memberdiv2{
width: 50%;
height: 100%;
float: right;
background-color: transparent;
}
.memberdiv2 form table{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 3%;
}
.memberdiv2 tr{
    width: 100%;
}
.memberdiv2 td{
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 1px;
    padding: 15px;
}
.memberdiv2 td label{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding: 7px;
    font-size: larger;
    font-weight: 450;
    font-style:normal;
    color: rgb(255, 255, 255);
   
}

.memberdiv2 td span{
    margin-left: 10%;
    margin-top: 5px;
}
.memberdiv2 ::placeholder{
    color: lime;
    font-size: small;
    font-weight: 300;
}

.memberdiv2 input{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding: 8px;
    margin-bottom: 2px;
    background-color: transparent;
    color: aqua;
    font-size: large;
    font-weight: 500;
    border-width: 0.3px;
    border-top: none;
    border-right: none;
    border-left-width: 3px;
}

.memberdiv2 select{
    border: 1px;
    padding: 3px;
     width: 15%;
     background-color: black;
     color: aqua;
     font-size:large;
     font-weight: 600px;
 }

.memberdiv2 select option{
   border: 0px;
   padding: 3px;
    width: 15%;
    background-color: black;
    color: aqua;
    font-size:large;
    font-weight: 600px;
}

.memberdiv2 button{
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10px;
    padding: 5px;
    font-size: x-large;
    font-weight: 550;
    color: yellow;
    border-width: 0px;
    border: none;
    background-color: transparent;
}
.memberdiv2 button:hover{
    background-color: rgb(3, 255, 255);
    color: black;
    box-shadow: 0px 0px 20px lime;
    border-radius: 20%;
}
.checkbox{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10px;
    color: aqua;
    font-size: medium;
    font-weight: 400;
}
.checkbox input{
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.memberdiv2 a{
    padding-top: 5px;
    margin-left: 30%;
    font-size: small;
    text-align: center;
    color: white;
}

/*Contact page ratereview css.......*/


.ratestardiv{
    width: 40%;
    height: 60px;
    margin-left: 32%;
    margin-right: 28%;
    margin-top: -2%;
    margin-bottom: 20px;
    background-color: transparent;
    position: relative;
    font-size: x-large;
    font-weight: 800;
}
.ratestar{
   width: 40px ;
   height: 40px;
   margin: 4%;
   border-radius: 20px;
   background-color: transparent;
   display: inline-block;
}
.ratestar img{
    border-radius: 20px;
    background-color: transparent;
}
.ratestar img:hover{
    transform: scale(1.3,1.3)rotate(360deg);
    transition-duration: 0.7s;
   box-shadow: 0px 0px 12px white;
}
#ratereview{
   font-size: x-large;
   font-weight: 600;
   text-shadow: 0px 0px 5px magenta;
   color: white;
   text-align: center;
   margin-left: 42%;
   margin-top: 30px;
   text-overflow: clip;
   animation-name: reviewratespan;
   animation-duration: 1s;
   animation-iteration-count: infinite;
}
@keyframes reviewratespan {
    0%{font-weight: 200;}
    100%{font-weight:600;}
}


/* contact page iframe for google map*/

.googlemap{
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
    height: 500px;
    margin-bottom: 30px;
    margin-top: 2%;
    position: relative;
}
.googlemap iframe{
    width: 100%;
    height: 100%;
    filter: brightness(100%);
   position: absolute;
}




/* for password eye icon color change*/
::-ms-reveal{
    filter:contrast(100%);
    filter: invert(100%);
    background-color:white;

}

/*LogIn Form css*/

.logindiv{
    width: 50%;
    height: 100%;
    margin-left: 25%;
    margin-right: 25%;
    margin-bottom: 100px;
    background-color: transparent;
    }
    .logindiv form table{
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 3%;
    }
    .logindiv tr{
        width: 100%;
    }
    .logindiv td{
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
        margin-top: 1px;
        padding: 15px;
    }
    .logindiv td label{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        padding: 7px;
        font-size: larger;
        font-weight: 450;
        font-style:normal;
        color: rgb(255, 255, 255);
       
    }
    
    .logindiv td span{
        margin-left: 10%;
        margin-top: 5px;
    }
    .logindiv ::placeholder{
        color: lime;
        font-size: small;
        font-weight: 300;
    }
    
    .logindiv input{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        padding: 8px;
        margin-bottom: 2px;
        background-color: transparent;
        color: aqua;
        font-size: large;
        font-weight: 500;
        border-width: 0.3px;
        border-top: none;
        border-right: none;
        border-left-width: 3px;
    }
    
    .logindiv button{
        width: 50%;
        margin-left: 25%;
        margin-right: 25%;
        margin-top: 10px;
        padding: 5px;
        font-size: x-large;
        font-weight: 550;
        color: white;
        border-width: 0px;
        border: none;
        background-color: transparent;
    }
    .logindiv button:hover{
        background-color: aqua;
        color: black;
        box-shadow: 0px 0px 20px yellow;
        border-radius: 20%;
    }

    .logindiv a{
        padding-top: 4px;
        margin-left: 30%;
        font-size: small;
        text-align: center;
        color: white;
    }


    /*formheading1 we create because color same not good...*/

    

    .formheading1{
        font-size:x-large;
        font-weight: 700;
        color: rgb(67, 255, 255);
        text-align: center;
        text-shadow: 0px 0px 50px;
        margin-top: 60px;
        margin-top: 100px;
        animation-name: plcldecorname1;
        animation-duration: 10s;
        animation-iteration-count: infinite;
    }
    @keyframes plcldecorname1 {
        25%{color: white;}
        50%{color: yellow;}
        75%{color: lime;}
        100%{color: magenta;}
   }

   



/*Media query  for android*/







   @media screen and (max-device-width: 720px) {

    /*Home page css.................*/

    .herobanner{
        width: 84%;
        margin-left: 13%;
        margin-right: 3%;
        height: auto;
        margin-top: 1px;
        border-width: 0.6px;
    }

    .card{
        width: 90%;
        margin-left: 10%;
        margin-right: 10%;
        padding: 2px;
    }
    .card1{
        width: 90%;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
        margin-left: 5%;
        margin-right: 5%;
        box-shadow: 5px 5px 10px rgb(251, 255, 29);
     
    }
    .card1 h1{
       padding-top: 15px;
       font-size: x-large;
        
    }
    .card1 p{
        color: white;
        padding: 5%;
        font-size: medium;
        font-weight: 500;
     }
     .card2{
        width: 90%;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
        margin-left: 5%;
        margin-right: 5%;
        box-shadow: 5px 5px 10px rgb(251, 255, 29);
     
     
    }
    .card2 h1{
       padding-top: 15px;
       font-size: x-large;
        
    }
    .card2 p{
        color: white;
        padding: 5%;
        font-size: medium;
        font-weight: 500;
     }


     .card3{
        width: 90%;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
        margin-left: 5%;
        margin-right: 5%;
        box-shadow: 5px 5px 10px rgb(251, 255, 29);
      
    }
    .card3 h1{
       padding-top: 15px;
       font-size: x-large;
        
    }
    .card3 p{
        color: white;
        padding: 5%;
        font-size: medium;
        font-weight: 500;
     }
    
    
     .card4{
        width: 90%;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
        margin-left: 5%;
        margin-right: 5%;
        box-shadow: 5px 5px 10px rgb(251, 255, 29);
    }
    .card4 h1{
       padding-top: 15px;
       font-size: x-large;
        
    }
    .card4 p{
        color: white;
        padding: 5%;
        font-size: medium;
        font-weight: 500;
     }
     @keyframes card {
        25%{background-image: linear-gradient(yellow,black,black,yellow);box-shadow: -5px -5px 7px rgb(0, 247, 255);}
        50%{background-image: radial-gradient(white,aqua,magenta);box-shadow: 5px 5px 7px yellow;}
        75%{background-image: linear-gradient(aqua,pink,aqua);box-shadow: -5px -5px 7px rgb(9, 255, 0);}
        100%{background-image: radial-gradient(aqua,yellow,black);box-shadow: 5px 5px 7px white;}
    }
    

    /*About page css............*/

    .aboutme{
        width: 90%;
        margin-left: 7%;
        margin-right: 3%;
        border-radius: 5%;
        padding: 3%;
    }

    .aboutme summary{
        font-size: x-large;
    }
    .aboutme b{
        font-size: x-large;
    }
    .aboutme p{
        font-size: larger;
        margin-top:5px;
        font-weight: 800;
        padding: 10px;
    }
    .aboutcard{
        width: 90%;
      margin-left: 10%;
      margin-bottom: 1px;
      border: 3px;
    }
    .aboutcard div{
        width: 94%;
        margin-left: 4%;
        margin-right: 2%;
         margin-bottom: 40px;
        margin-top: -4px;
       box-shadow: 3px 3px 7px black;
       border-bottom-left-radius: 20px;
       border-top-right-radius: 20px;
       animation-duration: 12s;
    }
    @keyframes aboutcarddivshadow {
         25%{box-shadow: 5px 5px 5px white;}
         50%{box-shadow: -5px -5px 10px aqua;}
         75%{box-shadow: 5px 5px 5px lime;}
         100%{box-shadow: -5px -5px 10px yellow;}
    }
    
    .why{
        font-size: x-large;
        padding: 2px;
        margin-top: 10px;
        padding-bottom: 18px;
        text-align: center;
    }
    .aboutcard header{
        font-size: large;

        color: white;
        text-underline-offset: 5px;
        text-decoration:underline aqua 3px;
    }
    .aboutcard li{
        list-style-type:square;
        margin: 15px;
        color: white;
        font-size: larger;
        font-weight: 400;
        text-transform: capitalize;
    }
    .aboutcard p{
       padding: 20px;
       color: white;
       font-size: large;
      font-weight: 200;
      font-style:oblique;
      font-family: 'Times New Roman', Times, serif;
    }
    
    .aboutcard img{
        width: 80px;
        height: 70px;
        float: right;
        border-radius: 5px;
        padding: 4px;
    }
    

    /*Product Page css.........*/


     /*PRODUCT PAGE CSS*/



.prmenu{
    width: 50%;
 margin-left: 10%;
 margin-bottom: 40px;
}
.prmenu summary{
    width: 100px;
    margin-left: 10%; 
}


.prmenu a{
    width: 120%;
    margin-left: 50%;
    padding: 6px;
    margin-top: 4px;
}

 /*plaster and idol clay start.....*/

    .heading{
        font-size:25px;
    }
    .idolpl{
        background-color: transparent;
    }
    .idolpl div{
         width: 86%;
         height: 300px;
        margin-left: 7%;
        margin-right: 7%;
        color: white;

    }
    .idolpl img:hover{
        transform: scale(1.3,1.3);
        transition: 0.4s;
    }
    
    .idolpl video{
        width: 100%;
        height: 100%;
        transition: 2.3s;
    }
    .idolpl video:hover{
        transform: scale(1.1,1.1);
        transition: 0.4s;
    }
    
    /*idol page available order form css*/

.formheading{
    font-size:larger;
    margin-top: 25px;
    text-align: center;
    margin-bottom: 17px;
}

.orderavailableform{
    width: 80%;
    height: auto;
    margin-left: 10%;  
}

.orderavailableform th{
    width: 40%;
    padding: 6px;
    font-size: large;
    font-weight: 700;
    text-align: center;
}
.orderavailableform td{
    width: 60%;
    height: 25px;
}
.orderavailableform td input{
    padding: 10px;
    width: 100%;
}

.orderavailableform button[type="reset"]{
    width: 30%;
    float: right;
    border-radius: 100%;
    margin-top: -5px;
    
}
.orderavailableform button{
    width: 90%;
    margin-left: 5%;
    align-items: right;
    margin-top: 40px;
}

/*order custom form css.......*/


.ordercustomform{
    width: 90%;
    height: auto;
    margin-left: 5%;  
}

.ordercustomform th{
    width: 40%;
    margin-left: -15px;
    padding: 6px;
    font-size: medium;
    font-weight: 700;
    text-align: center;
}
.ordercustomform td{
    width: 60%;
    height: 25px;
}
.ordercustomform td input{
    padding: 10px;
    width: 99%;
    margin-left: -10px;
    margin-right: 1%;
}
.ordercustomform textarea{
    width: 100%;
}

.ordercustomform button[type="reset"]{
    width: 30%;
    float: right;
    margin-top: -5px;
    border-radius: 100%;
    
}
.ordercustomform button{
    width: 90%;
    margin-left: 2%;
    align-items: left;
    margin-top: 40px;
}



/*Plaster Page Order form*/


.plasterform{
    width: 90%;
   margin-left: 5%;
   margin-right: 5%;
}
.plasterform table{
    width: 90%;
    padding: 20px;
    margin-left: 5%;
    margin-right: 5%;
}
.plasterform legend{
   color: rgb(11, 14, 14);
   font-size: medium;
   font-weight: 600;
   margin-top: 10px;
}
.plasterform tr td input{
    width: 90%;
    margin-top: 5;
    margin-left: 10%;
}

.plastersubmitbtn{
    width: 80%;
    padding: 6.5px;
    margin-left: 5%;
    font-weight: 900;
    margin-top: 30px;
}
.plastersubmitbtn:hover{
    width: 90%;
    padding: 7px;
    margin-top: 30px;
    margin-bottom: 5%;
    margin-left: 5%;
    font-weight: 500;
}

.plasterform input[type="radio"]{
    font-size: medium;
    font-weight: 300;
  
}
.plasterform input[type="checkbox"]{
    width: 20px;
    height: 20px;
    margin-top: 10px;
    margin-bottom: -5px;
    margin-right: 5px;
    margin-left: 10px;
}
.plasterform span{
    font-size: small;
    margin-left: 10%;
}



/*Contact Page form with images css........*/



.memberdiv{
    width: 98%;
    height:700px;
    background-size: 100% 100%;
    margin-left: 1%;
    margin-right: 1%;
 }
 
 .memberdiv1{
    width: 0%;
    height: 0%;
    margin-top: 0%;
    margin-bottom: 0%;
 }
 
 .memberdiv2{
    width: 100%;
    float: left;
 }
 .memberdiv2 form table{
     width: 95%;
     margin-left: 2.5%;
     margin-right: 2.5%;
 }

 .memberdiv2 td label{
     font-size: medium;
 }
 
 .memberdiv2 td span{
     font-size: smaller;
     font-weight: 100;
 }
 
 .memberdiv2 input{
     width: 88%;
     margin-left: 7%;
     margin-right: 5%;
     margin-bottom: 2px;
   
 }
 
 #passwordspan{
    font-size: x-small;
 }
 #availablecontactspan{
    font-size: x-small;
 }
 #availablenamespan{
    font-size: x-small;
 }
 #passwordmatchspan{
    font-size: x-small;
 }
 #emailspan{
    font-size: x-small;
 }
 .memberdiv2 select{
      width: 21%;
  }

 .checkbox{
     margin-top: 5px;
     color: aqua;
     font-size: x-small;
 }
 .checkbox input{
     width: 20px;
     height: 20px;
     margin-right: 8px;
 }
 
 .memberdiv2 a{
     padding-top: 15px;
     margin-left: 20%;
     font-size: xx-small;
 }
 


 /*Contact page ratereview css.......*/


.ratestardiv{
    width: 90%;
    height: 10px;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 20px;
    background-color: transparent;
    position: relative;
    font-size: x-large;
    font-weight: 800;
}
.ratestar{
   width: 10% ;
   height: 30px;
   margin: 3.5%;
}
#ratereview{
   font-size: medium;
   margin-left: 25%;
   margin-top: 40px;
}


/* contact page iframe for google map*/

.googlemap{
    width: 85%;
    margin-left: 10%;
    margin-right: 5%;
    height: 250px;
    margin-bottom: 5px;
}

/*Login page css........*/

.logindiv{
    width: 90%;
    height: auto;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 10px;
    }
    .logindiv form table{
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .logindiv td{
        width: 100%;
        margin-top: 1px;
        padding: 15px;
    }
    .logindiv td label{
        font-size: medium;
        font-weight: 250;  
    }  
    
    .logindiv input{
        width: 90%;
        margin-left: 10%;
        margin-right: 0%;
        font-size: medium;
    }
    .logindiv a{
        padding-top: 4px;
        margin-left: 20%;
        font-size: x-small;
        text-align: center;
        color: white;
    }
    #u{
    font-size: smaller;
    font-weight: 200;
    }
    #p{
        font-size: smaller;
        font-weight: 200;
    }
    /* for password eye icon color change*/
::-ms-reveal{
    filter:contrast(100%);
    filter: invert(100%);
    background-color:white;

}
   }