@font-face {
    font-family: 'poppins-bold';
    src: url('fonts/poppins/poppins-bold.ttf');

  }

:root{
    --basic-color:#2C609D;
    --font-family:'poppins-bold';
}
.logo{
  width: 12rem;
}
.header-btn{
    border: 2px solid var(--basic-color) !important;
    color:var(--basic-color);
}
.header-btn:hover{
    border: 1px solid var(--basic-color);
    background-color: var(--basic-color) !important;
    color:#ffffff !important;
}

/* Image Display */




  .main-img{
    display:flex;
    width:100%;
    height:250px;
    overflow:hidden;
    perspective: 600px;

  }
  .images{

    margin-top:.5rem;
  }

  .effect{
    animation:move .3s forwards;
  }
  @keyframes move{
    0%{
      transform:rotateY(0);
    }
    100%{
      transform:rotateY(360deg);
    }
  }

.list-product{
    margin: 0;
    padding: 0;
    float: left;
    font-family: var(--font-family);
}
.list-product li{
    margin: 0 0 0 20px;
    float: left;
    line-height: 35px;
    font-size: 18px ;
    font-family: var(--font-family);
}
.product-heading{
    color:var(--basic-color);
    font-family: var(--font-family);
}
.main-heading{
    color:var(--basic-color);
    font-family: var(--font-family);
}
.product-text{
    margin: 0 0 0 0px;
    font-size: 18px ;
    text-align: justify;
    font-family: var(--font-family);
}
.text-container{
    max-height: 200px;
}
.price-list:hover{
    background-color: #f9f9ff;
}
.single-item{
    background-color: #f5f5f5;
}
.footer-outer{
    background-color: #f5f5f5;
}
.search-banner{

    background: url('../images/new-slider.png');
    /* Control the height of the image */
    min-height: 380px;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Image Gallery */
.parent-container, .child-container {
    display: flex;
  }
.parent-container {
    width: 100%;
    justify-content: center;
    gap: 30px 30px;
  }
  .child-container {
    width: 30%;
    height: auto;
    gap: 30px 30px;
    flex-direction: column;
  }
  .child-container img {
    transition: all 1s ease-in-out 0s;
   box-shadow: 2px 2px 20px gray, inset 2px 2px 10px lightgray;
  }
  .child-container img:hover {
    box-shadow: 4px 4px 25px black, inset 2px 2px 2px 10px rgb(0, 0, 20);

  }

  .greeting {
    text-align: center;
    color: lightblue;
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
  }
  .fa-brands {
    font-size: 50px;
  }
  .greeting, .fa-brands {
    text-shadow: 2px 2px 10px lightgray;

  }
  /* Image Gallery */


  /* Below Code is for Time selector */