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

:root{
   --blue:#3498db;
   --dark-blue:#2980b9;
   --red:#e74c3c;
   --dark-red:#c0392b;
   --black:#333;
   --white:#fff;
   --light-bg:#eee;
   --box-shadow:0 5px 10px rgba(0,0,0,.1);
}
:root{
    --pink:#A95C68;
}


* {
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    transition: .2s linear;
}
body {
  background: url('../images/ground.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

}
/**{
   font-family: 'Poppins', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border: none;
   text-decoration: none;
}*/

*::-webkit-scrollbar{
   width: 10px;
}

*::-webkit-scrollbar-track{
   background-color: transparent;
}

*::-webkit-scrollbar-thumb{
   background-color: var(--blue);
}

.btn,
.delete-btn{
   width: 100%;
   border-radius: 5px;
   padding:10px 30px;
   color:var(--white);
   display: block;
   text-align: center;
   cursor: pointer;
   font-size: 20px;
   margin-top: 10px;
}

header {
    position: fixed;
    top:0; left:0; right:0;
    background: url('../images/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1px 20px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    z-index: 1000;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

header .logo{
    font: 400 100px/1.2 'Great Vibes', Helvetica, sans-serif;
    font-size: 45px;
    color:#893F45;
    font-weight: bolder;
}

header .navbar a{
    font-size: 2rem;
    padding:0 1.8rem;
    color:#893F45;
}

header .navbar a:hover{
    color:var(--pink);
}


header .shopping a:hover{
    color:var(--pink);
}

header #toggler{
    display: none;
}

header .fa-bars{
    font-size: 3rem;
    color:#333;
    border-radius: .5rem;
    padding:.5rem 1.5rem;
    cursor: pointer;
    border:.1rem solid rgba(0,0,0,.3);
    display: none;
}
.shopping a{
    font-size: 2rem;
    padding:0 1.8rem;
    color:black;
    font-size: 3rem;
}

.profile-menu {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: none;
    list-style-type: none;
    margin: 10px 0 0;
    padding: 10px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 60px;
    z-index: 1;
}
.prof {
  position: relative;
  font-size: 2.5rem;
  color:#333;
  margin-left: 1.5rem;
}

.profile-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: none;
  background-color: transparent;
}
.shopping {
   font-size: 35px; 
}

.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  display: none;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.profile-dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  text-decoration: none;
  color: #333;
}

.prof:hover .profile-dropdown {
  display: block;
}

.menu-item {
    cursor: pointer;
    padding: 5px 0;
}

.profile:hover .profile-menu {
    display: block;
}
.btn{
   background-color: #e18e96;
   border: 1px solid #e18e96;
   cursor: pointer;
}

.btn:hover{
   background-color: dimgray;
}

.delete-btn{
   background-color: #7c6869;
}

.delete-btn:hover{
   background-color: gray;
}

.message{
   margin:10px 0;
   width: 100%;
   border-radius: 5px;
   padding:10px;
   text-align: center;
   background-color: #8f4963;
   color:var(--white);
   font-size: 20px;
}
.logincontainer{
  max-width: 440px;
  padding: 0 20px;
  margin: 170px auto;
}
.wrapper{
  width: 100%;
  background: #e18e96;
  border-radius: 5px;
  box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.1);
}
.wrapper .title{
  height: 90px;
  background: #e18e96;
  border-radius: 5px 5px 0 0;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper form{
  padding: 30px 25px 25px 25px;
  background: url('../images/bcgd.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.wrapper form .row{
  height: 45px;
  margin-bottom: 15px;
  position: relative;
}
.wrapper form .row input{
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 60px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  font-size: 16px;
  transition: all 0.3s ease;
}

.wrapper form .filebox{
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 60px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  font-size: 16px;
  transition: all 0.3s ease;
}

form .row input:focus{
  border-color: #e18e96;
  box-shadow: inset 0px 0px 2px 2px rgba(26,188,156,0.25);
}
form .row input::placeholder{
  color: #999;
}
.wrapper form .row i{
  position: absolute;
  width: 47px;
  height: 100%;
  color: #fff;
  font-size: 18px;
  background: #e18e96;
  border: 1px solid #e18e96;
  border-radius: 5px 0 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper form .pass{
  margin: -8px 0 20px 0;
}
.wrapper form .pass a{
  color: black;
  font-size: 17px;
  text-decoration: none;
}
.wrapper form .pass a:hover{
  text-decoration: underline;
}
.wrapper form .button input{
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding-left: 0px;
  background: #e18e96;
  border: 1px solid #e18e96;
  cursor: pointer;
}
form .button input:hover{
  background: #b48395;
}
.form-container form p{
   margin-top: 15px;
   font-size: 20px;
   color:var(--black);
}

.form-container form p a{
   color:var(--red);
}

.form-container form p a:hover{
   text-decoration: underline;
}
.wrapper form .signup-link{
  text-align: center;
  margin-top: 20px;
  font-size: 17px;
}
.wrapper form .signup-link a{
  color: #003153;
  text-decoration: none;
}
form .signup-link a:hover{
  text-decoration: underline;
}


.container{
   min-height: 120vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding:20px;
}
.profile-container{
   min-height: 120vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding:20px;
}

.profile-container .setprofile{
    padding: 20px;
    background-color: lavenderblush;
    box-shadow: var(--box-shadow);
    text-align: center;
    width: 500px;
    border-radius: 50px;
    height: 500px;
}
.profile-container .setprofile img{
   height: 150px;
   width: 150px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 5px;
}
.profile-ontainer .setprofile h3{
   margin:5px 0;
   font-size: 35px;
   color:#bb4359;
}

.profile-container .setprofile p{
   margin-top: 20px;
   color:var(--black);
   font-size: 20px;
}

.profile-container .setprofile p a{
   color:var(--red);
}

.profile-container .setprofile p a:hover{
   text-decoration: underline;
}
.container .profile{
    padding: 20px;
    background-color: lavenderblush;
    box-shadow: var(--box-shadow);
    text-align: center;
    width: 500px;
    border-radius: 250px;
    height: 500px;
}

.container .profile img{
   height: 150px;
   width: 150px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 5px;
}

.container .profile h3{
   margin:5px 0;
   font-size: 35px;
   color:#bb4359;
}

.container .profile p{
   margin-top: 20px;
   color:var(--black);
   font-size: 20px;
}

.container .profile p a{
   color:var(--red);
}

.container .profile p a:hover{
   text-decoration: underline;
}
.shpbtn {
    display: inline-block;
    margin-top: 3rem;
    background: #A95C68;
    color: #fff;
    padding: 0.5rem 2rem;
    cursor: pointer;
    font-size: 1.7rem;
    border-radius: 35px;
}
.shpbtn:hover {
    background-color: #8a7f8d;
}


.update-profile{
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding:20px;
}

.update-profile form{
   padding:20px;
   background-color: #e3c2cb;
   box-shadow: var(--box-shadow);
   text-align: center;
   width: 700px;
   text-align: center;
   border-radius: 5px;
}

.update-profile form img{
   height: 200px;
   width: 200px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 5px;
}

.update-profile form .flex{
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
   gap:15px;
}

.update-profile form .flex .inputBox{
   width: 49%;
}

.update-profile form .flex .inputBox span{
   text-align: left;
   display: block;
   margin-top: 15px;
   font-size: 17px;
   color:var(--black);
}

.update-profile form .flex .inputBox .box{
   width: 100%;
   border-radius: 5px;
   background-color: var(--light-bg);
   padding:12px 14px;
   font-size: 17px;
   color:var(--black);
   margin-top: 10px;
}

@media (max-width:650px){
   .update-profile form .flex{
      flex-wrap: wrap;
      gap:0;
   }
   .update-profile form .flex .inputBox{
      width: 100%;
   }
}