/* ************************************************************
:: Project: Hale Nature
:: Client: Hale Nature Private Limited
:: Developer: Apexx Private Limited
:: Developer URI: https://www.apexx.lk/
:: Version: 1.0.0
:: Created: 05 September 2024
:: Last modified: 05 September 2024
:: License: Proprietary
:: Copyright (c) 2024 Hale Nature and Apexx Private Limited. All rights reserved.
This software is a joint intellectual property of Hale Nature and Apexx Private Limited, and is licensed exclusively to "Hale Nature Private Limited" for use solely in connection with their website, https://www.halenature.lk.

Any use of this software that is not expressly authorized by this license is strictly prohibited and may result in copyright infringement.
The licensee agrees to indemnify and hold harmless Hale Nature and Apexx Private Limited from any and all claims, damages, liabilities, costs, andexpenses arising out of or in connection with any use of the software that is not in accordance with this license.
************************************************************
*
*
*
*
*
*/

@font-face {
  font-family: "Montserrat";
  src: url(../font/Montserrat/Montserrat-VariableFont_wght.ttf);
}
@font-face {
  font-family: "Handlee";
  src: url('/fonts/Handlee-Regular.ttf');
}
/**** Variables ****/
/**** Variables ****/
:root {
  --f-family: "Montserrat", sans-serif;
  --f-handlee: "Handlee", cursive; /* Add Handlee as a variable */
  --primary: #2c1708;
  --secondary: #fce3bf;
  --success: #a66f3e;
  --info: #f2a429;
  --warning: #72bf44;
  --danger: #fffbf2;
}
/**** Main Styles ****/
* {
  font-family: var(--f-family);
}
/* Specific Styles for Text */
.certificate {
  font-family: var(--f-handlee); /* Use Handlee font */
}
.our-certification {
  font-family: var(--f-family); /* Use Montserrat font */
}
/* .card-img-top {
  width: 288px;
  height:  441px;
} */

.text-color {
    color: var(--info);
}
.bg-img {
    width: 100%;
}
.chat-btn {
  right: 0;
  top: 0;
  z-index: 1;
  border-radius: 8px;
  padding: 10px 20px;
  transform: rotate(-90deg);
  transform-origin: right bottom;
}

.scrollToTopBtn {
  cursor: pointer;
  bottom: 4%;
  left: 30px;
  height: 50px;
  width: 50px;

}
@media (max-width: 767.98px) {
  .scrollTop {
    top: 47%;
    left: 10px;

  }
  .logo{
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .card-img-top {
    height: 170px !important;
  }
  .card-img-top {
    background-color:#FFFBF2
    ;
  }
  .card-img-top1 {
    background-color:#FFFBF2
    ;
  }
}
@media (max-width: 992px) {
  .card-img-top {
    height: 250px;
  }

}
.nav-link:hover {
text-shadow: 0 0 1px black;
}
.navbar-nav .nav-item .nav-link {
    font-size: 16px !important;
}
.home-search-box__filter::placeholder {
color: #ffffff;
opacity: 1;
text-align: center;
}
.rounded-card  {
    border-radius: 12% !important;
}
.cont-icon:hover {
border-radius: 5px;
background-color: #8B572A;
color: #8B572A;
}

.cont-icon{
height: 32px;
width: 32px;
transition: all 0.5s ease;
}

.head-icon{
height: 23px !important;
width: 23px !important;
}
.zoom-text {
display: inline-block;
transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
color: #fff;
}

.zoom-text:hover {
transform: scale(1.2);
color: #f7df97;
}

.effect:hover {
background-color: #ffc107;
}
.effect {
  transition: all 0.5s ease;
}
.cart-icon{
position: absolute;
top: 6px;
right: 95px;
}
.nav-active {
  font-weight: 800;
  color: #f2a429 !important;
}
.m-height {
  min-height: 300px;
}
.slider-hoverbtn {
    color: #2c1708 !important;
}
.hoverbtn {
    background: linear-gradient(to right, #f2a429, #f28d35); /* Initial gradient */
    transition: all 0.3s ease; /* Smooth transition */
    color: #2c1708 !important;
    border: none;
}

.hoverbtn:hover {
    background: linear-gradient(to right, #f28d35, #f2a429); /* Reverse gradient */
    color: #000; /* Change text color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add shadow effect */
    transform: scale(1.05); /* Slightly enlarge the button */
}
.gradient-btn {
    background: linear-gradient(to right, #f2a429, #f28d35); /* Gradient background */
    color: #2c1708; /* Text color */
    transition: all 0.3s ease; /* Smooth transition effect */

}

.gradient-btn:hover {
    background: linear-gradient(to right, #f28d35, #f2a429); /* Reverse gradient on hover */
    color: #000; /* Change text color on hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add shadow effect */
    transform: scale(1.05); /* Slightly enlarge the button */
}