* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
:root{
--text-dark:#000;
--text-light: #7aa7a6;
--body-background:#ffff;
--body-foreground:#008080;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--dark-border:rgba(0,0,0,0.2);
   --soft-red: #c22a13;  
      --hover:#266b6a;
      --logo-font:"Cormorant Garamond", serif;
      --body-font: "Work Sans", sans-serif; 
      --heading-font: 'Playfair Display', serif;

}
h1,h2,h3,h4,h5,h6{
   font-family: var(--heading-font);
   letter-spacing:1px;
     
}
p,span,button,a,textarea{
   font-family: var(--body-font);
}
/* create vault section starts here */

.create-vault{
    width: 100%;
    min-height: 100vh;
    height: auto;
padding-top: 7rem;
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;


}
.create-vault .heading h1{
 
    font-size: 2.5rem;
    font-weight: 400;
    padding: 2rem 0rem;
    text-align: center;
}
.create-vault .new-legacy-item{
    width: 80%;
padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: flex;
flex-direction: column;
gap: 30px;
align-items: center;
margin-bottom: 5rem;
}

.create-vault .new-legacy-item .heading h5{
        font-size: 1.6rem;
      
    font-weight: 400;
}
.create-vault .new-legacy-item .form{
    width: 95%;

}
.create-vault .new-legacy-item .form form{

      display: flex;
    flex-direction: column;
    gap: 20px;
}
.create-vault .new-legacy-item .form form .label{
    display: flex;
    flex-direction: column;
gap: 10px;
font-size: 1.1rem;

}
.create-vault .new-legacy-item .form form .label input,.create-vault .new-legacy-item .form form .label select,.create-vault .new-legacy-item .form form .message textarea{
    height: 50px;
    border-radius: 10px;
    border: 1px solid var(--dark-border);
    padding: 0.5rem;
}
.create-vault .new-legacy-item .form form .label input:hover,.create-vault .new-legacy-item .form form .label select:hover,.create-vault .new-legacy-item .form form .message textarea:hover{
border-color: var(--body-foreground);
}
.create-vault .new-legacy-item .form form .label input:focus,.create-vault .new-legacy-item .form form .label select:focus,.create-vault .new-legacy-item .form form .message textarea:focus{
outline: none;
    border-width: 2px;
}
.create-vault .new-legacy-item .form form .label input::placeholder,.create-vault .new-legacy-item .form form .label select{
    font-size: 1rem;
}
.create-vault .new-legacy-item .form form .message{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
padding: 1rem 0rem;
}
.create-vault .new-legacy-item .form form .message .file-box{
display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    position: relative;
    border: 2px dashed var(--text-light);
    padding: 1rem;
}
.create-vault .new-legacy-item .form form .message .file-box input{
    position: absolute;
    z-index: 1;
background-color: var(--soft-red);
width: 100%;
height: 200px;
opacity: 0;
}
.create-vault .new-legacy-item .form form .message .file-box .file-info{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 10px;
}
.create-vault .new-legacy-item .form form .message .file-box .file-info .supported{
    font-size: 0.9rem;
}
.create-vault .new-legacy-item .form form .message .file-box .file-info i{
    color: goldenrod;

}
.create-vault .new-legacy-item .form form  label{
            font-size: 1.1rem;
    font-family: var(--heading-font);
    
}
.create-vault .new-legacy-item .form form .message .editing-tools{
    display: flex;
padding: 0rem 1rem;
gap: 15px;
flex-wrap: wrap;
align-items: center;
}
.create-vault .new-legacy-item .form form .message .editing-tools .color{
    border: none;
    background-color:var(--body-background);
}
.create-vault .new-legacy-item .form form .message .editing-tools button{
    all: unset;
   cursor: pointer;
   padding: 0.5rem;
 
}

.create-vault .new-legacy-item .form form .message .editing-tools button:hover{
    background-color: rgba(0,0,0,0.1);
}
.create-vault .new-legacy-item .form form .message textarea{
    height: 200px;
 resize: none;
 font-size: 1rem;

}
.create-vault .new-legacy-item .form form .code-textarea{
    display: none;
}
.create-vault .new-legacy-item .form form .receipients{

    display: flex;
    flex-direction: column;
    gap: 15px;
}
.create-vault .new-legacy-item .form form .receipients div{
    display: flex;
    gap: 10px;
}
.create-vault .new-legacy-item .form form .receipients div input{
  accent-color: var(--body-foreground);
}
.create-vault .new-legacy-item .form form .receipients .manage-recepients a{
    color: var(--body-foreground);
    text-decoration: none;
}
.create-vault .new-legacy-item .form form .receipients .manage-recepients a:hover{
     text-decoration: underline 1px solid var(--body-foreground);
     transition-duration: 0.5s;
}
.create-vault .new-legacy-item .form form .btns{
    display: flex;
    gap: 15px;
    padding: 1rem 0rem;
    flex-wrap: wrap;
 
}
.create-vault .new-legacy-item .form form .btns button{
    cursor: pointer;
font-size: 0.9rem;
    border: none;
    border-radius: 10px;
    border: 2px solid var(--body-foreground);

}
.create-vault .new-legacy-item .form form .btns button.save-vault{
    background-color: var(--body-foreground);
    color: var(--body-background);
        height: 45px;
    width: 150px;
}
.create-vault .new-legacy-item .form form .btns button.cancel{

 background-color: var(--body-background);
    color: var(--body-foreground);
        height: 45px;
    width: 100px;
   
}
.create-vault .new-legacy-item .form form .btns button.save-vault:hover{
    background-color: var(--hover);
    transition-duration: 0.5s;
}
.create-vault .new-legacy-item .form form .btns button.cancel:hover{
    background-color:rgba(0, 0, 0, 0.034);
    transition-duration: 0.5s;
}



/* create vault section ends here */
@media (max-width:445px) {
    .create-vault .new-legacy-item .form form .btns{
justify-content: center;
 
}
.create-vault .new-legacy-item .form form .btns button.cancel{

    width: 150px;
   
}
.create-vault .new-legacy-item .form form .label input::placeholder{
    font-size: 0.8rem;

}
}
@media (max-width:600px) {
 .create-vault .heading h1{
  
    font-size: 2rem;
  
}   
.create-vault .new-legacy-item .heading h5{
        font-size: 1.5rem;
      
    font-weight: 400;
}

}