#recomented{
    text-align: center;
    color: #0b1974;
    padding-top: 20px;
    padding-bottom: 20px;

}
.container{
    padding-top: 10px;
}
.card:hover{
    box-shadow:rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
#cardimg{
    height: 300px;
}
#bestsellingg{
    --c: #030d45;
    --b: .1em;    /* border length*/
    --d: 20px;    /* the cube depth */
    
    --_s: calc(var(--d) + var(--b));
    
    color: var(--c);
    border: solid #0000;
    border-width: var(--b) var(--b) var(--_s) var(--_s);
    background:
      conic-gradient(at left var(--d)  bottom var(--d),
        #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box,
      conic-gradient(at left var(--_s) bottom var(--_s),
        #0000 90deg,var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b))  border-box;
    transform: translate(calc(var(--d)/-1),var(--d));
    clip-path: 
      polygon(
       var(--d) 0%, 
       var(--d) 0%, 
       100% 0%, 
       100% calc(100% - var(--d)),
       100% calc(100% - var(--d)),
       var(--d) calc(100% - var(--d))
      );
    transition: 0.5s;
}
#bestsellingg:hover{
    transform: translate(0,0);
  clip-path: 
    polygon(
     0% var(--d), 
     var(--d) 0%, 
     100% 0%, 
     100% calc(100% - var(--d)), 
     calc(100% - var(--d)) 100%, 
     0% 100%
   );
}

#bestsellingbtn:hover{
    background-color: #0b1974;
    color: white;
}
#products{
    padding-top: 20px;  
    padding-bottom: 20px;
}
#sign_up{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding-top: 50px;
}

#signup_con{
    background-color: white;
    width: 380px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1{
    color: rgb(252, 47, 47);
    font-size: 30px;
}



#create{
    font-size: 12px;
}

#input{
    padding: 6px;
    margin-top: 10px;
    margin-left: 10px;
}
.details input{
   width: 335px;
}

.details{
    display: flex;
    flex-direction: column;
}

.check{
    display: inline-block;
}

#register_btn{
    text-decoration: none;
    padding: 10px 120px;
    border: 1px solid #0b1974;
    background: #0b1974;
    color: white;
    border-radius: 8px;
    margin-top: 20px;
}

#register_btn:hover{
    background: transparent;
    color: black;
    border: 1px solid black;
    transition: .5s;
}

.term a{
    color: rgb(5, 5, 142);
}

#privacy{
    color: rgb(5, 5, 142);
}

.signIn{
    display: block;
    color: black;
    position: absolute;
    top: 81%;
    display: flex;
    flex-direction: column;
}

.checkbox{
    width: 355px;
    margin-top: 10px;
}
.signIn p span a{
    color: black;
    margin-left: 6px;
}
#plans{
    background-color: rgb(126, 184, 234);
    height: 250px;
    color: black;
}
#btn{
background-color:#0b1974 ;
}
#btn:hover{
background-color: white;
color: #000;
}
#rowpre{
    position: relative;
}
#pre{
     
    transition: transform .2s;
}
#pre:hover{
    transform: scale(1.3);
}
#pricing{
    
  transition: transform .2s;
}
#pricing:hover{
    transform: scale(1.3);
}