/* Single source of truth for clearing the fixed navbar. --nav-height is
   set at runtime (see layouts/app.blade.php) to the navbar's real rendered
   height. Every page's content is pushed down exactly once, here — do not
   also add margin-top/nav-height offsets to individual hero/header sections
   below, or the two will stack and leave a visible gap. */
main {
    padding-top: var(--nav-height, 145px) !important;
}

/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 99999;
    
 }

 #spinner.show {
     transition: opacity .8s ease-out, visibility 0s linear .0s;
     visibility: visible;
     opacity: 1;
 }

 .back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
    color: azure;
}
/*** Spinner End ***/


/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}
/*** udushushanyo twa facebook nutundi ***/
.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    color: rgb(178, 228, 174);
}
/*** End of udushushanyo twa facebook nutundi ***/
.btn.border-secondary {
    transition: 0.5s;
}

.btn.border-secondary:hover {
    background: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
}

/*** Topbar Start ***/
.fixed-top {
    transition: 0.5s;
    background: var(--bs-white);
    border: 0;
}

.topbar {
    padding: 20px;
    border-radius: 230px 100px;
}

.topbar .top-info {
    font-size: 15px;
    line-height: 0;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.topbar .top-link {
    font-size: 15px;
    line-height: 0;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.topbar .top-link a {
    letter-spacing: 1px;
}

.topbar .top-link a small:hover {
    color: var(--bs-secondary) !important;
    transition: 0.5s;
}

.topbar .top-link a small:hover i {
    color: var(--bs-primary) !important;
}
/*** Topbar End ***/

/*** Navbar Start ***/
.navbar .navbar-nav .nav-link {
    padding: 10px 15px;
    font-size: 16px;
    transition: .5s;
}

.navbar {
    border-bottom: 1px solid rgb(222, 233, 223);
}

@media (min-width: 992px) {
    .navbar {
        height: 100px;
    }
}

/* Below the lg breakpoint the navbar collapses into the hamburger menu.
   The fixed 100px height above is desktop-only (single-row bar); on mobile
   the menu must be allowed to grow with its content and needs its own
   solid background, otherwise the expanded list renders with no backdrop
   and overlaps whatever is behind the fixed navbar (e.g. the hero image). */
@media (max-width: 991.98px) {
    .navbar {
        height: auto;
    }

    #mainNavbar .navbar-collapse {
        background-color: #ffffff;
        margin-top: 10px;
        padding: 10px 15px 15px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    /* Sub-menus (About, Products, Services) still open on tap via Bootstrap's
       dropdown JS; just give them the same solid, rounded look as desktop
       instead of floating with no background. */
    .navbar .nav-item .dropdown-menu {
        border: 0;
        border-radius: 8px !important;
        background: var(--bs-light) !important;
        margin: 4px 0 10px 10px;
    }
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.fixed-top.bg-white .navbar .navbar-nav .nav-link:hover,
.fixed-top.bg-white .navbar .navbar-nav .nav-link.active {
    color: rgb(0, 156, 8);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    vertical-align: middle;
    margin-left: 8px;
}

@media (min-width: 1200px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        transition: .5s;
        opacity: 0;
    }
}

.dropdown .dropdown-menu a:hover {
    background: rgb(0, 156, 8);
    color: white;
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light) !important;
    border-radius: 10px !important;
    transition: .5s;
    opacity: 1;
}

#searchModal .modal-content {
    background: rgba(255, 255, 255, .8);
}
/*** Navbar End ***/

/*** Hero Header ***/
.hero-header {
    background: linear-gradient(rgba(248, 223, 173, 0.1), rgba(248, 223, 173, 0.1)), url(../img/hero-img.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-item {
    position: relative;
}

.carousel-item a {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    background: linear-gradient(rgb(0, 156, 8), rgba(255, 181, 36, 0.7));
}

.carousel-control-next,
.carousel-control-prev {
    width: 30px;
    height: 30px;
    border-radius: 48px;
    border: 1px solid var(--bs-white);
    background: var(--bs-primary);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-next {
    margin-right: 20px;
}

.carousel-control-prev {
    margin-left: 20px;
}

.page-header {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgb(0, 121, 6)), url(../img/cart-page-header-img.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-header,
.page-header {
    /* Navbar clearance is now handled once, on <main> (see top of this file).
       Don't offset here too, or the gap doubles up. */
    margin-top: 0 !important;
}

/* Page title inside the header banner (e.g. "Who We Are") was using
   Bootstrap's .display-4, which renders at 3.5rem/56px on desktop.
   Scale it down site-wide. */
.page-header h1.display-4 {
    font-size: 1.5rem;
}
/*** Hero Header end ***/


/*** featurs Start ***/
.featurs .featurs-item .featurs-icon {
    position: relative;
    width: 120px;
    height: 120px;
}

.featurs .featurs-item .featurs-icon::after {
    content: "";
    width: 35px;
    height: 35px;
    background: var(--bs-secondary);
    position: absolute;
    bottom: -10px;
    transform: translate(-50%);
    transform: rotate(45deg);
    background: var(--bs-secondary);
    
}
/*** featurs End ***/


/*** service Start ***/
.service .service-item .service-content {
    position: relative;
    width: 250px; 
    height: 130px; 
    top: -50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}

/*** service End ***/


/*** Fruits Start ***/
.fruite .tab-class .nav-item a.active {
    background: var(--bs-secondary) !important;
}

.fruite .tab-class .nav-item a.active span {
    color: var(--bs-white) !important; 
}

.fruite .fruite-categorie .fruite-name {
    line-height: 40px;
}

.fruite .fruite-categorie .fruite-name a {
    transition: 0.5s;
}

.fruite .fruite-categorie .fruite-name a:hover {
    color: var(--bs-secondary);
}

.fruite .fruite-item {
    height: 100%;
    transition: 0.5s;
}
.fruite .fruite-item:hover {
    box-shadow: 0 0 55px rgba(0, 0, 0, 0.4);
}

.fruite .fruite-item .fruite-img {
    overflow: hidden;
    transition: 0.5s;
    border-radius: 10px 10px 0 0;
}

.fruite .fruite-item .fruite-img img {
    transition: 0.5s;
}

.fruite .fruite-item .fruite-img img:hover {
    transform: scale(1.3);
}
/*** Fruits End ***/


/*** vesitable Start ***/
.vesitable .vesitable-item {
    height: 100%;
    transition: 0.5s;
}

.vesitable .vesitable-item:hover {
    box-shadow: 0 0 55px rgba(0, 0, 0, 0.4);
}

.vesitable .vesitable-item .vesitable-img {
    overflow: hidden;
    transition: 0.5s;
    border-radius: 10px 10px 0 0;
}

.vesitable .vesitable-item .vesitable-img img {
    transition: 0.5s;
}

.vesitable .vesitable-item .vesitable-img img:hover {
    transform: scale(1.2);
}

.vesitable .owl-stage {
    margin: 50px 0;
    position: relative;
}

.vesitable .owl-nav .owl-prev {
    position: absolute;
    top: -8px;
    right: 0;
    color: var(--bs-primary);
    padding: 5px 25px;
    border: 1px solid var(--bs-secondary);
    border-radius: 20px;
    transition: 0.5s;

}

.vesitable .owl-nav .owl-prev:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.vesitable .owl-nav .owl-next {
    position: absolute;
    top: -8px;
    right: 88px;
    color: var(--bs-primary);
    padding: 5px 25px;
    border: 1px solid var(--bs-secondary);
    border-radius: 20px;
    transition: 0.5s;
}

.vesitable .owl-nav .owl-next:hover {
    background: rgb(0, 156, 8);
    color: rgb(0, 156, 8);
}
/*** vesitable End ***/


/*** Banner Section Start ***/
.banner .banner-btn:hover {
    background: var(--bs-primary);
}
/*** Banner Section End ***/


/*** Facts Start ***/
.counter {
    height: 100%;
    text-align: center;
    box-shadow: 0 0 30px rgb(0, 156, 8);
}

.counter i {
    font-size: 60px;
    margin-bottom: 25px;
}

.counter h4 {
    color: var(--bs-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.counter h1 {
    margin-bottom: 0;
}
/*** Facts End ***/


/*** testimonial Start ***/
.testimonial .owl-nav .owl-prev {
    position: absolute;
    top: -58px;
    right: 0;
    color: var(--bs-primary);
    padding: 5px 25px;
    border: 1px solid var(--bs-secondary);
    border-radius: 20px;
    transition: 0.5s;
}

.testimonial .owl-nav .owl-prev:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.testimonial .owl-nav .owl-next {
    position: absolute;
    top: -58px;
    right: 88px;
    color: var(--bs-primary);
    padding: 5px 25px;
    border: 1px solid var(--bs-secondary);
    border-radius: 20px;
    transition: 0.5s;
}

.testimonial .owl-nav .owl-next:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}
/*** testimonial End ***/


/*** Single Page Start ***/
.pagination {
    display: inline-block;
}
  
.pagination a {
    color: var(--bs-dark);
    padding: 10px 16px;
    text-decoration: none;
    transition: 0.5s;
    border: 1px solid var(--bs-secondary);
    margin: 0 4px;
}
  
.pagination a.active {
    background-color: var(--bs-primary);
    color: var(--bs-light);
    border: 1px solid var(--bs-secondary);
}
  
.pagination a:hover:not(.active) {background-color: var(--bs-primary)}

.nav.nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--bs-secondary) !important;
}
/*** Single Page End ***/


/*** Footer Start ***/
.footer .footer-item .btn-link {
    line-height: 35px;
    color: rgba(255, 255, 255, .5);
    transition: 0.5s;
}

.footer .footer-item .btn-link:hover {
    color: rgb(0, 156, 8)!important;
}

.footer .footer-item p.mb-4 {
    line-height: 35px;
}
/*** Footer End ***/

/*** Homepage "Latest News" carousel (auto-populated from Blog posts) ***/
.news-carousel .owl-item {
    padding: 4px 4px 8px;
}

.news-carousel .owl-nav {
    position: absolute;
    top: -64px;
    right: 0;
    display: flex;
    gap: 10px;
}

.news-carousel .owl-nav .owl-prev,
.news-carousel .owl-nav .owl-next {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(1, 129, 50, .08);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background .3s ease, color .3s ease;
}

.news-carousel .owl-nav .owl-prev:hover,
.news-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
    color: #fff;
}

.news-carousel {
    position: relative;
}

.news-carousel .owl-dots {
    text-align: center;
    margin-top: 6px;
}

.news-carousel .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 0 4px;
    background: rgba(1, 129, 50, .25);
    display: inline-block;
    border-radius: 50%;
    transition: background .3s ease;
}

.news-carousel .owl-dots .owl-dot.active span {
    background: var(--bs-primary);
}