@charset "UTF-8";
/* font import */
@import url('https://fonts.googleapis.com/css2?family=Battambang&family=Moulpali&family=Raleway:wght@500&display=swap');

/* banner */
.container-fluid .row .col-8 .col-8{
  padding-left: 15px;
  padding-top: 15px;
}
.container-fluid .row .col-8 .col-4 img{
  padding-left: 15px;
}
.container-fluid .row .col-8 .col-8 h1{
  font-size: calc(0.1em + 2vw);
  font-family: 'Moulpali', sans-serif;
}
.container-fluid .row .col-8 .col-8 h2{
  font-size: calc(0.1em + 2vw);
  font-family:'Raleway', sans-serif;
}
/* banner animation */
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes slideIn {
  0% {transform: translateX(100%);}
  100% {transform: translateX(0);}
}

.container-fluid .row .col-8 .col-8 h1,
.container-fluid .row .col-8 .col-8 h2 {
  animation: fadeIn 5s ease-in-out;
}

.container-fluid .row .col-4 img {
  animation: slideIn 2s ease-in-out;
}

/*Product Card*/
.container .row .col .card{
    border-radius: 15px;
    transition: transform 0.3s ease-out; /* Adjust the time as needed */
}
.container .row .col .card:hover {
    box-shadow: #86b7fe 0px 0px 5px 0px;
    transform: scale(1.05);
}

.container .row .col .card .card-img-top {
    border-radius: 15px 15px 0px 0px ;
    /* height: 300px; */
  }

.container .row .col .card .card-body p{
    font-size: 20px;
    font-weight: normal;
    font-family: 'Raleway',sans-serif;
    text-decoration: underline;
    color: #0D5094
  }
.container .row .col .card .card-body a{
    font-size: 20px;
    font-weight: normal;
    font-family: 'Raleway',sans-serif;
    color: #0D5094
}
.range-container{
  margin-bottom: 5%;
}
.range-container .row h4{
  color: #0D5094;
    font-weight: bold;
    font-family: 'Raleway',sans-serif;
  }

.range-container .row p{
    font-weight: normal;
    font-family: 'Raleway',sans-serif;
  }
  


/* button */

.container .row .col .card .card-footer .btn{
    color: white; 
    background-color:#1E3A8D;
    border-radius: 10px;
}
.container .row .col .card .card-footer .btn:hover{
    color: #1E3A8D; 
    background-color:white;
    border-radius: 10px;
}

/* order form */

section #order-container {
  box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.2);
  border-radius: 15px;
  padding: 30px;
  font-family: 'Raleway',sans-serif;
  color: #2D2B7C;
  width: 30%;

}
/* For iPad size */
@media only screen and (max-width: 1400px) {
  section #order-container {
    width: 60%;
  }
}

/* For phone screen size */
@media only screen and (max-width: 480px) {
  section #order-container {
    width: 85%;
  }
}

.checkbox-quantity {
  margin-bottom: 10px;
  padding: 5px;
}

.checkbox-quantity .form-check {
  display: flex;
  align-items: center;
}
.checkbox-quantity .form-check .form-check-input {
  margin-right: 10px;
}

.quantity-input {
  margin-left: 10px;
}

.checkbox-quantity .form-check {
  display: flex;
  align-items: center;
}

.quantity-input {
  margin-left: 10px;
}
section #order-container .btn{
  color: white; 
   background-color:#1E3A8D;
}
section #order-container .btn:hover{
  color: #1E3A8D; 
  background-color:white;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 30px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #1F6DE0; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}