.header {
  position: sticky;
  top: 0;       /* stick to the top */
  z-index: 1000; /* stay above other content */
}
a {
    text-decoration: none;
}
.btn-primary {
    background-color: #025a42; 
    min-width: 120px; 
    font-size: 1rem;
    text-decoration: none;
}
.btn-primary:hover {
    background-color: #053226; /* darker green on hover */
    color: white;
}

#about-us-area{
    /* background-color: #dee0ca; */
    min-height: 100px;
    color: white;
}
#about-us-area p{
    text-align: justify;
    margin :10px;
    font-size: 1.1rem; 
    line-height: 1.6;
}

form{
    opacity: 0.8;
}
.carousel,
.carousel-inner,
.carousel-item {
    height: 50vh; /* 100% viewport height */
}
/* Make images fill half width and full height, keep aspect ratio with object-fit */
/* .carousel-item .row {
    height: 100%;
} */
/* .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
} */

.favorite-button{
    background-color: #03503b; 
    font-size: 0.9rem;
    opacity: 0.85;    
}

.favorite-button:hover {
    background-color: #011913;     /* darker green on hover */
    color: white;
}
.product-detail-area .product-description {
    background-color: #e7f0ed;
}

.product-info {
    display: flex;
    flex-direction: column;
    height: 100%; /* Make sure it stretches full height */
}

.product-info .btn {
    margin-top: auto; /* Push button to bottom */
}
.aboutUs {
    background-color: #275649;
}
.vision {
    background-color: #3b514b;
    opacity: 0.8;
}
.contactUs {
    background-color: #2f5349;
}
.collection {
    background-color: #2f5349;
}
.frozen-search{
    background-color: #7f8583;
    /* position:sticky;
    top:0;
    z-index:2000; */
}
.frozen-component{
    position:sticky;
    top:0;
    z-index:2000;
}

#register-form {
    border: none;
}
.nav-link {
  position: relative;
  display: inline-block;
  color: white;  /* default text color */
  transition: color 0.4s ease;  /* smooth text color change */
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffd87d;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.nav-link:hover {
  color: #ffd87d;   /* text color change on hover */
}

.nav-link:hover::after {
  transform: scaleX(1);   /* underline animation */
}
/* textarea{
    overflow: auto;
        height: 100%;
    width: 100%;
    resize: none;
}
.form-col{
   flex: 0 0 50%
} */
 .icon-group a{
    color: white;
 }
 
 .search-input::placeholder{
    color:white;
    opacity: 0.7;
    font-style: italic;
 }
 /* .search-input{
    color: white;
 } */
h3 {
    font-family:'Test The Future', sans-serif;
    font-size: 35px;
    line-height: 1.2em;
    color: #025a42;    
}
h2 {
    font-family:'Test The Future', sans-serif;
    font-size: 55px;
    line-height: 1.2em;
    color: white;    
}
.carousel-fade .carousel-item {
  transition: opacity 1s ease-in-out;
}
.caption-below-img {
  transition: opacity 1s ease-in-out;
}

#carousel-main,
#carousel-main .carousel-item {
  height: 90vh; /* Full viewport height */
}
.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover; 
}
.center-caption {
    color: white;
    /* color:#025a42; */
    /* text-shadow: 1px 1px 4px rgba(0,0,0,0.7); */
}
.center-caption h1{
    font-size: 60px;
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.animate-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}
.text-start{
    text-align: left;
}

.carousel-btn, .carousel-btn {
    background-color:white; 
    min-width: 100px; 
    font-size: 0.8rem;
    color: black;
}
.carousel-btn:hover {
    background-color: #b0a68e; /* darker green on hover */
    color: rgb(34, 32, 32);
}

.carousel-indicators.top-indicators {
  top: 10px;              /* distance from top */
  bottom: auto;           /* disable default bottom position */
}
/* Bigger buttons */
.carousel-indicators [data-bs-target] {
  width: 20px;
  height: 20px;
  border-radius: 50%;     /* circle */
  margin: 0 6px;
}

/* Default button color */
.carousel-indicators [data-bs-target] {
  background-color: #999;  /* gray or any color */
}

/* Active button color */
.carousel-indicators .active {
  background-color: #ffb404; /* orange highlight */
}

.banner-text{
  position: absolute;
  top: 10%;          /* adjust distance from top */
  left: 50%;
  transform: translateX(-50%);  /*center horizontally */
  color: black;      /* text color */
}

.banner-text h1, h3{
  font-size: 2rem;   /* adjust size */
  font-weight: bold; /* optional */
  /* text-shadow: 1px 1px 4px black; optional for readability */
}

.category-link{
    color: #053226;
    font-size: 1.3rem;
}
.new-tag{
    position: absolute;
    top:0%;
    right:0%;
    background-color: #999;
    color: white;
}
.category-link:hover{
    color: #c09226;
}

.add-favorite{
    background-color: #03503b;
    /* opacity: 0.8; */
    color:white;
    border: none;
    padding: 0.3em 0.8em; 
    display: none;
}

.add-favorite:hover{
    background-color: #020f0c;
    color:white;
}
.product-name, .product-price{
    color: #053226;
    font-size: 18px;
}
.remove-button{

    background-color: goldenrod;
    /* opacity: 0.8; */
    color:white;
    border: none;
    padding: 0.3em 0.8em; 
    display: none;
}

.remove-button:hover {
    background-color: #221801;
    color:white;
}
.product-card:hover .add-favorite {
    display: block;
    
}

.product-card:hover .remove-button{
    display: block;

}

.icon-favorite-numer {
  position: absolute;
  top: -8px;      /* move up */
  right: -8px;    /* move to the right */
  background: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  padding: 4px 8px;
  line-height: 1;
}

.required-mark{
    color: rgb(158, 18, 18);
}
.error-style{
    color:  rgb(158, 18, 18); 
    font-size: 15px;
    font-style: italic;
}

.user-menu {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.user-dropdown {
  position: absolute;
  top: 120%;  /* appears below the icon */
  right: 0;
  background: rgb(5, 36, 5);
  
  border: 1px solid #ddd;
  border-radius: 6px;
  display: none;
  min-width: 100px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  z-index: 1000;
}

.user-dropdown .dropdown-item {
  display: block;
  padding: 10px 14px;
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.user-dropdown .dropdown-item:hover {
  background: #f5f5f5;
}

/* Keep open when hovering icon OR dropdown */
.user-menu:hover .user-dropdown {
  display: block;
}