:root {
  --bs-danger: #11BF19 !important;

  --bs-danger-rgb: 17, 191, 25 !important;

  --bs-font-sans-serif: "Arial", sans-serif !important;

  --bs-link-color-rgb: #074d09;
 

  --bs-link-hover-color-rgb: 18, 191, 24;

  
}


body {
  
font-family: 'Montserrat', Arial, sans-serif;
}



a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline;
}

a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

/* .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #11BF19;
  --bs-btn-border-color: #11BF19;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #074d09;
  --bs-btn-hover-border-color: #074d09;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #074d09;
  --bs-btn-active-border-color: #074d09;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #11BF19;
  --bs-btn-disabled-border-color: #11BF19;
} */

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1a1a1a;
  --bs-btn-border-color: #1a1a1a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #11bf19;
  --bs-btn-hover-border-color: #11bf19;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #11bf19;
  --bs-btn-active-border-color: #11bf19;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1a1a1a;
  --bs-btn-disabled-border-color: #1a1a1a;
}






.btn-outline-danger {
  --bs-btn-color: #1a1a1a;
  --bs-btn-border-color: #1a1a1a;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #1a1a1a;
  --bs-btn-hover-border-color: #1a1a1a;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fffeff;
  --bs-btn-active-bg: #1a1a1a;
  --bs-btn-active-border-color: #074d09;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #1a1a1a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #1a1a1a;
  --bs-gradient: none;
}

.form-control::placeholder {
   color: rgb(177, 174, 174); /* Set the color to gray */
}


/* .loginbtn,
.joinbtn {
	border-radius: 15px 0 !important;
} */

.joinbtn i {
  color: #fffeff;
}

.facebookbtn {
  background: #3b5998 !important;
}
footer a {
  color: #fffeff;
}

footer a:hover {
  color: #59718b;
}

footer img {
  width: 60%;
}
.icon {
  width: 25px;
}

.accordion-button:focus {
  box-shadow: none;
}

.payment-option.selected {
  background-color: #343a40;
  color: white;
  border-color: #343a40;
}

.loginbtn {
  background-color: #fffeff;
  color: #11BF19;
  border: 1px solid #11BF19;
}

.loginbtn:hover {
  background-color: #11BF19;
  color: #fffeff;
}

.loginbtn:hover i {
  background-color: #11BF19;
  color: #fffeff;
}

.page-item.active .page-link {
  color: #fffeff !important;
  background-color: #11BF19 !important;
  border-color: #11BF19;

  box-shadow: none;
}

.page-item.active .page-link:hover {
  color: #fffeff !important;
  background-color: #11BF19 !important;
  border-color: #11BF19;
}

.card {
  display: flex !important;
  flex-direction: column !important;

  height: 100% !important;
}

.card img {
  height: 200px !important;
  object-fit: cover;
}

/* Customize the carousel control buttons and center them */

.carousel {
  position: relative;
}

.carousel-control-prev,
.carousel-control-next {
  background-color: #fffeff;
  border: 1px solid #fffeff;
  border-radius: 5%;
  width: 40px;
  height: 60px;
  font-size: 24px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 600px) {
  .carousel-control-prev,
  .carousel-control-next {
    background-color: #fffeff 00;
    border: 0px solid #fffeff 00;
    border-radius: 5%;
    width: 40px;
    height: 60px;
    font-size: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel-item {
    height: 100%;
  }

  .carousel-control-next {
    margin-right: -30px;
  }
  .carousel-control-prev {
    margin-left: -30px;
  }
}

.nav-pills .nav-link.active {
  background-color: #11BF19;
  color: #fffeff !important;
}

.nav-link.active i {
  color: #fffeff !important;
}

.nav-link:hover i {
  color: #fffeff !important;
}

@media print {
  div #resultContainer {
    display: block !important;
  }

  .container {
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .copyright {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #couponId {
    display: block !important;
  }

  #google-center-div {
    display: none !important;
  }

  header,
  footer,
  aside,
  nav,
  form,
  iframe,
  .menu,
  .hero,
  .adslot {
    display: none !important;
  }

  .google-ad {
    display: none !important;
  }
  .adsbygoogle .adsbygoogle-noablate {
    display: none !important;
  }
  ins {
    display: none !important;
  }

  #aswift_1_host {
    display: none !important;
  }
  #aswift_2_host {
    display: none !important;
  }
  #aswift_3_host {
    display: none !important;
  }

  .left-side-rail-edge {
    display: none !important;
  }
  .right-side-rail-edge {
    display: none !important;
  }

  .right-side-rail-edge {
    display: none !important;
  }

  .left-side-rail-dismiss-btn {
    display: none !important;
  }

  .right-side-rail-dismiss-btn {
    display: none !important;
  }

  svg {
    display: none !important;
  }
}

/* search text highlight */

.highlighted {
  background-color: #ffbe2d;
  font-weight: bold;
}

/* Dropdown */

.nav-link {
  position: relative;

  overflow: hidden;
}
.nav-link::before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  transform: translate(-100%, 0) rotate(50deg);
  transform-origin: top left;
  transition: all 0.35s;
  background-color: #1a1a1a;

  z-index: -1;
  content: "";
}

.offcanvas-body .nav-link::before {
  background-color: transparent !important;
}
.offcanvas-body .nav-link:hover {
  color: #074d09 !important;
}
.offcanvas-body .nav-link:hover i {
  color: #074d09 !important;
}
.nav-link:hover {
  color: #fffeff !important;
  border-color: #11BF19;
  z-index: 1;
}
.nav-link:hover::before {
  transform: translate(0, 0);
}

.dropdown-menu a {
  text-decoration: none;
  color: #000000;
}
.dropdown-menu a .d-flex {
  transition: all 0.5s;
}
.dropdown-menu .col-md-auto a:hover .d-flex {
  background-color: var(--bs-tertiary-bg);
  color: #11BF19;
  box-shadow: 3px 3px #c9c8c8;
}

@media only screen and (min-width: 992px) {
  .dropdown-menu {
    width: 800px;
  }
  .dropdown:hover .dropdown-menu {
    display: flex;
  }
  .dropdown-menu.show {
    display: flex;
  }
}

.store-link:hover {
  color: #11BF19 !important;
}

.form-control:focus {
  border-color: #11BF19;
  outline: none !important;
  box-shadow: none !important;
}

.form-control-lg:focus {
  border-color: #11BF19;
  outline: none !important;
  box-shadow: none !important;
}

.newsbtn {
  background-color: #074d09 !important;
}

.form-check-input:checked ~ .form-check-label::before {
  background-color: #11BF19;
}

.form-check-input:checked {
  background-color: #11BF19;
  border-color: #11BF19;
}

.form-check-input:focus,
.form-select:focus {
  border-color: #11BF19;
  outline: 0;

  box-shadow: 0 0 0 0.25rem rgba(18, 191, 24, 0.25);
}

.card:hover {
  background-color: #c4f7c6 !important;
}

/* home page carousel  */

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 5px;

  margin-bottom: -50px !important;
}

.carousel-indicators button {
  background-color: #11BF19 !important;
}

.back-to-top-button {
  bottom: 20px !important;
  right: 10px !important;
  z-index: 999999 !important;
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.back-to-top-button.show {
  display: block !important;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 150px;
  }
}


.newsletter-footer{
  font-size: .8rem;
}

.newsletter-card:hover{

  background-color: transparent !important;

}



/* Webkit-based browsers (Chrome, Safari) autofill background  transparent*/
/* Chrome, Safari, Edge (WebKit-based browsers) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: transparent !important;
}

/* Firefox */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus,
input:-moz-autofill:active {
   
    background-color: transparent !important;
}



input:-internal-autofill-selected {
  
  background-image: none !important;
  background-color: transparent !important;
 
}


.hero-title{
  font-size: 45px !important;
  font-weight: 800;
  
}

@media screen and (max-width: 768px) {
  .hero-title{
    font-size: 30px !important;
    font-weight: 800;
    
  }
}


.hero-signup:hover{

  color: #074d09 !important;

}



/* Add to Home Screen Modal Styles */
#addToHomeScreenModal .modal-dialog {
  max-width: 90%;
  margin: 1.5rem auto;
}

#addToHomeScreenModal .modal-body i {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2rem; /* Adjust font size if needed */
  color: #11BF19; /* Match icon color with theme if desired */
}

#addToHomeScreenModal .modal-body p {
  display: flex;
  align-items: center;
  gap: 0.3rem; /* Space between icon and text */
}




/* Footer CLS Prevention Styles */


.footer-desktop,
.footer-mobile {
  contain: layout style;
  height: auto;
  min-height: 700px;
}

.logo-container {
  display: block;
  overflow: hidden;
  contain: strict;
}

.social-links,
.social-icons {
  contain: layout style;
}

.footer-section,
.mobile-section {
  contain: layout style;
}

/* Prevent text jump */
.list-unstyled {
  margin-bottom: 1rem;
}

/* Ensure smooth transitions */
.d-none {
  transition: none !important;
}



/* Optimize font loading */
.fw-semibold {
  font-display: swap;
}

/* Prevent layout shift from images */
img {
  aspect-ratio: attr(width) / attr(height);
}