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

*{
  font-family:'Nunito',sans-serif;
}

body{
     background-color: #696944d8;
     background-image: url(images/1.jpg);
}
.paymentbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 5% auto;
    background-color: rgba(192, 246, 231, 0.89);
    width: 80%; 
    max-width: 600px; 
    padding: 25px;
    border-radius: 10px;
    box-sizing: border-box; 
    margin-top: 10%;
  }
  
  .paymentbox img {
    width: 100%; 
    max-width: 300px;
    object-fit: cover; 
  }

header{
    position:fixed;
    top:0; left:0 ; right :0;
     z-index: 1000;
     background: #1f3b4090;
     display:flex;
     align-items: center;
     justify-content: space-between;
     padding: 1.2rem 10% ;
}

header .logo{
     font-size: 1.5rem;
     font-weight: bolder;
     color: #fff;
     text-transform: uppercase;
     text-decoration: none;
}

header .logo span{
     color:#00f7ff;
     font-size: 1.5rem;
}

header .navbar a{
     color:#fff;
     font-size: 1.2rem;
     margin:0 .6rem ;
     text-transform: uppercase;
     padding-left:0px ;
     text-decoration: none;
}

header .logo a:hover{
     color:#00f7ff;
}

header .icons i{
     font-size: 1.5rem;
     color:#fff;
     cursor: pointer;
     margin-right: 2rem;

}

header .icons i:hover{
     color:#93e4e4;
}

header .navbar a:hover{
    color: #93e4e4;
}

header .search-bar{
     position:absolute;
     top:100%;left:0;right:0;
     padding:0.5rem;
     background: #22364086;
     border-top: .1rem solid rgba(255,255,255,.2);
     display: flex;
     align-items: center;
     z-index: 1000;
     clip-path: polygon(0 0,100% 0,100% 0,0 0);
}

header .search-bar.active{
     clip-path: polygon(0 0, 100% 0,100% 100%,0 100%);
}

header .search-bar #search-bar{
    margin-top: 0.5%;
     width:100%;
     padding:0.5rem;
     text-transform: none;
     color:#333;
     font-size: 1.3rem;
     border-radius: .5rem;
}

header .search-bar label{
     color:#fff;
     cursor:pointer;
     font-size: 3rem;
     margin-left: 1.5rem;
}

header .search-bar label:hover{
     color:var(--orange);
}

#menu-bar{
     color: #fff;
     border: 1rem solid #fff;
     border-radius: .5rem;
     font-size: 3rem;
     padding:5rem 1.2rem;
     cursor: pointer;
     display: none;
}
@media (max-width:1200px){
     html{
     font-size: 55%;
}}

@media (max-width:991px){
header{
     padding: 2rem;
}
section{
     padding: 2rem;
}
}
@media (max-width:768px){
     #menu-bar{
          display: initial;
     }
     header .navbar{
          position: absolute;
          top: 100%;right:0;left:0;
          background:#333 ;
          border-top: .1rem solid rgba(255,255,255,.2);
          padding: 1rem 2rem;
          clip-path: polygon(0 0,100% 0,100% 0,0 0);
     }
     header .navbar.active{
          clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
     }

     header .navbar a{
          display: block;
          margin: 1.5rem 0;
          border-radius: .5rem;
          padding:1.5rem;
          background: #222;

     }
}
@media (max-width:450px){
     html{
     font-size: 50%;
}}