@keyframes washin{
    0%{
        transform:skewY(20deg);
        transform: translateY(-300px);
        z-index: -1; 
    }
    100%{
        transform:translateY(0) ;
        z-index: -1;
    }
}



body{
    margin: 0;
    padding: 0;
}


.banner .text{
    padding: 0;
    background-size: cover;
    background: linear-gradient(to right,rgb(139, 24, 233),rgb(19, 239, 173) );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner{
    text-align: center;
    color: rgb(0, 0, 0);
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 60px;
    background:rgb(31, 33, 60);
    padding: 15px;
}

.topnav{
    display: flex;
    gap: 80px;
    justify-content: center;
    background-color: rgb(0, 0, 0);
    width: 100%;
}

.topnav a{
    font-family: 'Nunito Sans';
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    color: rgb(255, 255, 255);
    padding: 10px;
    transition: all 0.3s ;
}

.topnavcont svg,.topnavcont input{
    display: none;
}

.topnav:hover > a, .topnav:hover>.dropdown{
    opacity: 0.3;
}

.topnav:hover > a:hover, .topnav:hover>.dropdown:hover{
    opacity: 1;
    transform: translateY(-10px);
    color: rgb(30, 208, 95);
}

.dropdown{
    position: relative;
    display: inline-block;
    transition: all 0.3s ;
}

.dropdown a{
    display: inline-block;
}

.dropcontent {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    z-index: 1;
  }

  .dropcontent a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown:hover{
    color: rgb(87, 241, 85);
}


  .dropcontent a:hover {color:rgb(87, 241, 85)}

  .dropdown:hover .dropcontent {display: block;}

  .dropdown:hover .dropbtn {background-color: #3e8e41;}


.makebg{
    position: absolute;
    background: url(./images/ProductImg/Cosmetics/makebg.svg);
    background-repeat: no-repeat;
    z-index: -1;
    background-size: cover;
    height: 350px;
    animation:washin 1.5s ;
    width: 100%;
    overflow: visible;
}



.revHead{
    font-size: 100px;
    margin-top: 0px;
    font-weight: 400;
    font-family: 'poppins';
    color: #ffffff;
    text-align: center;
}


.tablewrapper{
    display: flex;
    place-content: center;
    overflow-x: auto;
}

table{
    margin-top: 10px;
    border-collapse: collapse;
    width: 80%;
    border: 1px black;
    font-family: 'poppins';
    background: transparent;
}

table tr th{
    padding: 10px;
    text-align:left;
    background-color: transparent;
    color: #ffffff;
    font-size: 20px;
    border-bottom:4px solid #ffffff; ;
}

table img{
    max-height: 200px;
    max-width: 140px;
    min-width: 100px;
    height: 20vh;
    width: 15vw;
}

table tr td{
    font-weight: 500;
    padding: 10px;
    border-bottom:4px solid #a852e9;
    font-size: 20px;
    background: transparent;
}

select{
    font-family: 'poppins';
    font-size: 15px;
    border-radius: 9px;
}

.btn{
    border-radius: 100%;
    height: 15px;
    width: 15px;
    border: 0;
    transition: 0.2s;
    flex-shrink: 0;
}

.pink{
    background-color: #ff75af;
}

.blue{
    background-color: rgb(0, 106, 255);
}

.black{
    background-color: black;
}

.red{
    background-color: red;
}

.purple{
    background-color: plum;
}

.b1{
    background-color: rgb(239, 239, 170);
}


.b2{
    background-color: rgb(238, 203, 106);
}

.b3{
    background-color:#C38272;
}

.b4{
    background-color:#CAA7A5;
}


.pal{
  margin-top: 2px;
}


.btn:hover{
    transform: scale(1.2);
    cursor: pointer;
}
.palwrapper{
    display: flex;
    gap: 10px;
    overflow:visible;
    height: 30px;
}
.pallete{
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: aliceblue;
    padding-left: 5px;
    padding-right: 5px;
    width: fit-content;
    overflow: hidden;
    height:30px;
    border-radius: 20px;
    transition: 0.5s;
}

.pallete:hover{
    height:100px;
    background-color: transparent;
}

.botnav{
    margin-top: 100px;
    display: flex;
    gap: 80px;
    justify-content: center;
    background-color: rgb(0, 0, 0);
    width: 100%;
}

.botnav a{
    font-family: 'Nunito Sans';
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    color: rgb(255, 255, 255);
    padding: 10px;
    transition: all 0.3s ;
}
#obutt{
    margin-top: 30px;
    padding: 20px;
    border-radius: 10px;
    border: 0;
    background-color:#a852e9 ;
    font-family: poppins;
    font-size: 18px;
    font-weight: 600;
    color: white;
    transition: 0.5s ;
}

#obutt:hover{
    transform: translateY(-15px);
    background-color: #4b31dc;
    color:   rgb(40, 211, 154);
    cursor:pointer;
 }
.buttoncontainer{
    display: flex;
    justify-content: center;
}


@media (max-width:750px){
    .botnav{
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .banner{
        position: relative;
        z-index: 4;
    }
    .topnav {
        padding:10px ;
        background-color: #ffffff;
        flex-direction: column;
        width:60% ;
        gap: 5px;
        padding-top: 10px;
        text-align: center;
        display: flex;
        position: absolute;
        transform: translateY(-400px);
        transition: 0.5s;
    }

    .topnav a{
        color: black;
    }

    .topnavcont svg{
        position: absolute;
        z-index: 5;
    }

    .topnavcont svg{
        padding: 2px;
        background-color: #ffffff;
        display: block;
        position: absolute;
        z-index: 2;
        left: 47%;
        transform: rotate(0deg);
        transition: 0.5s;
        border-radius: 50%;
    }

    .topnav .dropcontent{
        position: static;
    }


    .topnavcont svg:active{
        transform: rotate(0deg);
    }


    .topnavcont{
        position: relative;
        display: flex;
        justify-content: center;
        align-content: center;

    }

    .topnavcont input{
        display: none;
        position: absolute;
        left: 49%;
        z-index: 3;
    }


    .topnavcont input:checked~.topnav{
        transform: translateY(0);
    }

}



@media (max-width:600px){

    .makebg{
        height: calc(85vh + 20vw);

    }

    .revHead{
        font-size: 15vw;
    }


    table tr td:last-child{
        border-color: #ee1e75;
        margin-bottom:20vh ;
    }

    table tr td,table tr th{
        display: block;
    } 
}

@media (min-width:600px) and (max-width:950px){
    table tr th{
        color:  #a852e9;
    }

    
 
}