body {
  margin: 0;
  line-height: normal;
  font-family: 'Calibri', sans-serif;
  color: black;
  background-color: #f2f2f2;
} 

.container{
    max-width: 1000px;
}


.coverc{
    margin-top: 40px;
    width: 90%;
    height: auto;
    border-radius: 30px;
}
    
 .logo-icon {
  max-height: 27px;
  position: relative;
}   

.logo-icon2 {
  height: 35px;
  position: relative;
} 
    
.back-icon {
  height: 13px;
  position: relative;
  object-fit: contain;
}
    
.product {
    width: 100%;
    background-color: #fff;
    padding: 15px 25px 17px 25px;
    border-radius: 20px;
    position: relative; /* Keep relative positioning */
    max-width: 400px;
    text-align: left;

    /* Horizontal centering */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    cursor: pointer;
}

.product::after {
    content: "";
    display: table;
    clear: both;
}
.product:hover {
    box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
}

.product-left{
    float: left;
    width: 65%;
}
.product-right{
    float: left;
    width: 35%;
    text-align: right;
}

.charge-text{
    margin-top: 14px;
    font-size: 13px;
}

.text1{
    margin-top: 8px;
    font-size: 13px;
}

.text2{
    margin-top: 8px;
    font-size: 13px;
}

.message{
    font-size: 14px;
    color: red;
}

.deed{
    font-size:calc(14px + 1vw);
    font-weight: bold;
    margin-top: 30px;
}

.card{
    font-size:calc(12px + 0.4vw);
    margin-bottom: 15px;
}

.back-black{
    position:fixed;
    height: 30px;
    right: 1.5vw;
    top: 2.5vh;
    cursor: pointer;
}

.back-white{
    position:fixed;
    height: 20px;
    left: 2.5vw;
    top: 2vh;
    cursor: pointer;
    display: none;
}

@media(max-width:600px){
    .back-black{
        display: none;
    }
    .back-white{
        display: block;
    }
    
    .charge-text{
        margin-top: 12px;
        font-size: 11px;
    }

    .text1{
        margin-top: 8px;
        font-size: 11px;
    }
    
    .text2{
        margin-top: 8px;
        font-size: 11px;
    }
    
    .product {
        padding: 12px 22px 15px 22px;
        border-radius: 15px;
    }
    
    .coverb{
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .coverc{
        margin-top: -20px;
        width: 100%;
        height: auto;
        border-radius: 0;
    }
    
    .message{
        font-size: 12px;
    }
}

.homeinput{
    font-size:calc(12px + 0.2vw);
    padding: 15px 15px;
    max-width: 240px;
    width:90%;
    outline: none;
    border: none;
    border-radius: 30px;
    background-color: #fff;
    box-shadow: 0px 2px 12.7px rgba(171, 181, 204, 0.5) inset;
    color: #000;
}

.homeinput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #555;
  opacity: 1; /* Firefox */
}

.homebtn{
    font-size:calc(12px + 0.2vw);
    padding: 15px 15px;
    max-width: 240px;
    width:90%;
    outline: none;
    border:none;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    background: linear-gradient(180deg, #5587ff, #163587);
    color: white;
    /*font-weight: bold;*/
}

.homebtn:hover{
    color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

@media(min-width:370px){
    .homebtn{
        width:80%;
        padding: 10px 20px;
    }
    
    .homeinput{
        width:80%;
        padding: 13px 30px;
    }
}

input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* For Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }

  .checkPoint{
      color: #1a33bb !important;
      font-size:calc(13px + 0.2vw);
  }
  
  .checkPoint2{
      color: #1a33bb !important;
      font-size:calc(13px + 0.2vw);
  }