/*=================================
 HERO SLIDER
==================================*/

.hero-section{

margin-top:20px;

}

#homeBanner{

border-radius:25px;

overflow:hidden;

box-shadow:0 15px 45px rgba(0,0,0,.15);

}

#homeBanner .carousel-item{

height:650px;

position:relative;

}

#homeBanner .carousel-item img{

width:100%;

height:650px;

object-fit:cover;

}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.25) 40%,
        rgba(0,0,0,0) 70%
    );
    z-index:1;
}

#homeBanner .carousel-caption{
    position:absolute;
    left:8%;
    top:50%;
    transform:translateY(-50%);
    right:auto;
    bottom:auto;
    max-width:520px;
    text-align:left;
    z-index:10;
}

#homeBanner .carousel-caption h5{

font-size:22px;

color:#FFD54F;

margin-bottom:15px;

}

#homeBanner .carousel-caption h1{

font-size:64px;

font-weight:800;

line-height:1.1;

color:#fff;

margin-bottom:20px;

}

#homeBanner .carousel-caption p{

font-size:20px;

color:#fff;

margin-bottom:30px;

}

.hero-btn{

display:inline-block;

padding:14px 35px;

background:#2E7D32;

color:#fff;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.hero-btn:hover{

background:#1B5E20;

color:#fff;

}

#homeBanner .carousel-control-prev,

#homeBanner .carousel-control-next{

width:5%;

}

#homeBanner .carousel-control-prev-icon,

#homeBanner .carousel-control-next-icon{

background-color:rgba(0, 0, 0, 0.95);

border-radius:50%;

width:50px;

height:50px;

background-size:24px;

box-shadow:0 8px 25px rgba(0,0,0,.25);

}

#homeBanner .carousel-indicators button{

width:20px;

height:5px;

border-radius:100%;

margin:0 6px;

background:#fff;

opacity:.6;

}

#homeBanner .carousel-indicators .active{

opacity:1;

background:#2E7D32;

}

/* Force Bootstrap horizontal slide */

.carousel-inner{
    overflow: hidden;
}


.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end{
    transform: translateX(100%) !important;
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start{
    transform: translateX(-100%) !important;
}
.hero-section{
    padding:0 !important;
    margin:0 !important;
    min-height:auto !important;
}

#homeBanner{
    margin:50px;
}

#homeBanner .carousel-item img{
    width:100%;
    height:650px;
    object-fit:cover;
    object-position:center;
}

#homeBanner .carousel-inner{
    overflow:hidden;
}

/* new css add*/
/* =========================================================
   MOBILE HOME BANNER - FINAL
========================================================= */

@media (max-width: 767px) {

    #homeBanner {
        width: 100% !important;

        margin: 0 !important;

        border-radius: 0 0 18px 18px !important;

        overflow: hidden !important;
    }

    #homeBanner .carousel-item {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }

    #homeBanner .carousel-item img {
        width: 100% !important;

        height: 250px !important;

        object-fit: contain !important;

        object-position: center !important;

        background: #f5f7f5 !important;
    }

    /* Hide caption because banner image itself contains design/text */

    #homeBanner .carousel-caption {
        display: none !important;
    }

    /* Keep only arrows */

    #homeBanner .carousel-control-prev,
    #homeBanner .carousel-control-next {
        width: 38px !important;
    }

    #homeBanner .carousel-control-prev-icon,
    #homeBanner .carousel-control-next-icon {
        width: 32px !important;
        height: 48px !important;

        background-color: rgba(0,0,0,.35) !important;
        background-size: 16px !important;

        border-radius: 20px !important;
    }

}
@media (max-width: 767px) {

    .category-section {
        padding: 22px 12px !important;
    }

    .category-section .section-heading {
        margin: 0 !important;
    }

    .category-section .section-heading span {
        padding: 7px 16px !important;

        margin-bottom: 8px !important;

        font-size: 13px !important;
    }

    .category-section .section-heading h2 {
        font-size: 25px !important;

        line-height: 1.1 !important;

        margin-bottom: 8px !important;
    }

    .category-section .section-heading p {
        font-size: 13px !important;

        line-height: 1.35 !important;

        margin: 0 auto !important;
    }

}

/* new css add */
@media (max-width: 767px) {

    .category-section {
        padding: 15px 10px !important;
    }

    .category-section .section-heading span {
        padding: 5px 12px !important;
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .category-section .section-heading h2 {
        font-size: 22px !important;
        margin-bottom: 5px !important;
        line-height: 1.1 !important;
    }

    .category-section .section-heading p {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .category-grid,
    .categories-grid {
        gap: 8px !important;
        padding: 0 5px !important;
    }

}

/* new css add */
/*=================================
 HERO SLIDER
==================================*/

.hero-section{

margin-top:20px;

}

#homeBanner{

border-radius:25px;

overflow:hidden;

box-shadow:0 15px 45px rgba(0,0,0,.15);

}

#homeBanner .carousel-item{

height:650px;

position:relative;

}

#homeBanner .carousel-item img{

width:100%;

height:650px;

object-fit:cover;

}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.25) 40%,
        rgba(0,0,0,0) 70%
    );
    z-index:1;
}

#homeBanner .carousel-caption{
    position:absolute;
    left:8%;
    top:50%;
    transform:translateY(-50%);
    right:auto;
    bottom:auto;
    max-width:520px;
    text-align:left;
    z-index:10;
}

#homeBanner .carousel-caption h5{

font-size:22px;

color:#FFD54F;

margin-bottom:15px;

}

#homeBanner .carousel-caption h1{

font-size:64px;

font-weight:800;

line-height:1.1;

color:#fff;

margin-bottom:20px;

}

#homeBanner .carousel-caption p{

font-size:20px;

color:#fff;

margin-bottom:30px;

}

.hero-btn{

display:inline-block;

padding:14px 35px;

background:#2E7D32;

color:#fff;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.hero-btn:hover{

background:#1B5E20;

color:#fff;

}

#homeBanner .carousel-control-prev,

#homeBanner .carousel-control-next{

width:5%;

}

#homeBanner .carousel-control-prev-icon,

#homeBanner .carousel-control-next-icon{

background-color:rgba(0, 0, 0, 0.95);

border-radius:50%;

width:50px;

height:50px;

background-size:24px;

box-shadow:0 8px 25px rgba(0,0,0,.25);

}

#homeBanner .carousel-indicators button{

width:20px;

height:5px;

border-radius:100%;

margin:0 6px;

background:#fff;

opacity:.6;

}

#homeBanner .carousel-indicators .active{

opacity:1;

background:#2E7D32;

}

/* Force Bootstrap horizontal slide */

.carousel-inner{
    overflow: hidden;
}


.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end{
    transform: translateX(100%) !important;
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start{
    transform: translateX(-100%) !important;
}
.hero-section{
    padding:0 !important;
    margin:0 !important;
    min-height:auto !important;
}

#homeBanner{
    margin:50px;
}

#homeBanner .carousel-item img{
    width:100%;
    height:650px;
    object-fit:cover;
    object-position:center;
}

#homeBanner .carousel-inner{
    overflow:hidden;
}

/* new css add*/
/* =========================================================
   MOBILE HOME BANNER - FINAL
========================================================= */

@media (max-width: 767px) {

    #homeBanner {
        width: 100% !important;

        margin: 0 !important;

        border-radius: 0 0 18px 18px !important;

        overflow: hidden !important;
    }

    #homeBanner .carousel-item {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }

    #homeBanner .carousel-item img {
        width: 100% !important;

        height: 250px !important;

        object-fit: contain !important;

        object-position: center !important;

        background: #f5f7f5 !important;
    }

    /* Hide caption because banner image itself contains design/text */

    #homeBanner .carousel-caption {
        display: none !important;
    }

    /* Keep only arrows */

    #homeBanner .carousel-control-prev,
    #homeBanner .carousel-control-next {
        width: 38px !important;
    }

    #homeBanner .carousel-control-prev-icon,
    #homeBanner .carousel-control-next-icon {
        width: 32px !important;
        height: 48px !important;

        background-color: rgba(0,0,0,.35) !important;
        background-size: 16px !important;

        border-radius: 20px !important;
    }

}
@media (max-width: 767px) {

    .category-section {
        padding: 22px 12px !important;
    }

    .category-section .section-heading {
        margin: 0 !important;
    }

    .category-section .section-heading span {
        padding: 7px 16px !important;

        margin-bottom: 8px !important;

        font-size: 13px !important;
    }

    .category-section .section-heading h2 {
        font-size: 25px !important;

        line-height: 1.1 !important;

        margin-bottom: 8px !important;
    }

    .category-section .section-heading p {
        font-size: 13px !important;

        line-height: 1.35 !important;

        margin: 0 auto !important;
    }

}

/* new css add */
@media (max-width: 767px) {

    .category-section {
        padding: 15px 10px !important;
    }

    .category-section .section-heading span {
        padding: 5px 12px !important;
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .category-section .section-heading h2 {
        font-size: 22px !important;
        margin-bottom: 5px !important;
        line-height: 1.1 !important;
    }

    .category-section .section-heading p {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .category-grid,
    .categories-grid {
        gap: 8px !important;
        padding: 0 5px !important;
    }

}


/* =========================================================
   BAIL JI ORGANIC — FULL IMAGE BANNER V2
   Goal: uploaded banner must be visible COMPLETELY.
   No crop. No stretch. No forced 250/550px image height.
   ========================================================= */

.hero-section{
    width:100%;
    padding:18px clamp(10px,3vw,42px) 8px !important;
    margin:0 !important;
    background:transparent !important;
}

#homeBanner{
    width:100%;
    margin:0 !important;
    border-radius:28px;
    overflow:hidden;
    position:relative;
    background:rgba(255,250,239,.92);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:
        0 18px 55px rgba(24,55,29,.16),
        0 3px 12px rgba(24,55,29,.08);
}

/* IMPORTANT: preserve the uploaded image's natural aspect ratio. */
#homeBanner .carousel-inner{
    overflow:hidden;
    border-radius:inherit;
}

#homeBanner .carousel-item{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    position:relative;
    background:#f6f1e5;
}

#homeBanner .carousel-item img,
#homeBanner .carousel-item .banner-full-image{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#f6f1e5;
    aspect-ratio:auto !important;
}

/* The uploaded artwork is the hero.
   Don't darken it with a heavy gradient. */
#homeBanner .carousel-item::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 55%,
        rgba(10,34,16,.05) 100%
    );
}

/* Existing database title/subtitle become a very subtle glass label.
   If the artwork already contains its own text, it won't be covered. */
#homeBanner .carousel-caption{
    left:4%;
    right:auto;
    bottom:4%;
    top:auto;
    transform:none;
    max-width:min(440px,52%);
    padding:12px 16px;
    text-align:left;
    z-index:5;
    border:1px solid rgba(255,255,255,.58);
    border-radius:16px;
    background:rgba(255,250,239,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 28px rgba(0,0,0,.08);
}

#homeBanner .carousel-caption h1,
#homeBanner .carousel-caption h5,
#homeBanner .carousel-caption p{
    text-shadow:none !important;
}

#homeBanner .carousel-caption h1{
    color:#173f1d !important;
    font-size:clamp(20px,3vw,42px);
    line-height:1.05;
    margin:0 0 6px;
}

#homeBanner .carousel-caption p{
    color:#405244 !important;
    font-size:clamp(10px,1.25vw,15px);
    margin:0;
}

/* Premium glass arrows */
#homeBanner .carousel-control-prev,
#homeBanner .carousel-control-next{
    width:54px !important;
    height:54px !important;
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    margin:0 16px;
    border-radius:50%;
    opacity:1;
    z-index:10;
}

#homeBanner .carousel-control-prev{
    left:0;
}
#homeBanner .carousel-control-next{
    right:0;
}

#homeBanner .carousel-control-prev-icon,
#homeBanner .carousel-control-next-icon{
    width:48px !important;
    height:48px !important;
    border-radius:50%;
    background-color:rgba(255,255,255,.88) !important;
    background-size:17px !important;
    box-shadow:0 8px 24px rgba(0,0,0,.14);
    border:1px solid rgba(23,69,31,.10);
    transition:transform .25s ease,background .25s ease;
}

#homeBanner .carousel-control-prev:hover .carousel-control-prev-icon,
#homeBanner .carousel-control-next:hover .carousel-control-next-icon{
    transform:scale(1.08);
    background-color:#fff !important;
}

/* Elegant indicator pills */
#homeBanner .carousel-indicators{
    margin-bottom:13px;
    z-index:8;
}

#homeBanner .carousel-indicators button{
    width:24px !important;
    height:4px !important;
    border:0;
    border-radius:99px;
    margin:0 3px;
    background:#fff;
    opacity:.65;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}

#homeBanner .carousel-indicators .active{
    width:38px !important;
    background:#2e7d32;
    opacity:1;
}

/* Mobile: still show the COMPLETE uploaded image.
   No forced 250px crop. */
@media(max-width:767px){
    .hero-section{
        padding:8px 7px 4px !important;
    }

    #homeBanner{
        border-radius:18px;
    }

    #homeBanner .carousel-item,
    #homeBanner .carousel-item img,
    #homeBanner .carousel-item .banner-full-image{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        object-fit:contain !important;
    }

    /* On small screens, image itself gets priority. */
    #homeBanner .carousel-caption{
        display:none !important;
    }

    #homeBanner .carousel-control-prev,
    #homeBanner .carousel-control-next{
        width:40px !important;
        height:40px !important;
        margin:0 6px;
    }

    #homeBanner .carousel-control-prev-icon,
    #homeBanner .carousel-control-next-icon{
        width:36px !important;
        height:36px !important;
        background-size:13px !important;
    }

    #homeBanner .carousel-indicators{
        margin-bottom:7px;
    }
}

/* Very small phones */
@media(max-width:420px){
    .hero-section{
        padding-left:4px !important;
        padding-right:4px !important;
    }

    #homeBanner{
        border-radius:14px;
    }

    #homeBanner .carousel-control-prev,
    #homeBanner .carousel-control-next{
        margin:0 3px;
    }
}


/*=================================
 HERO SLIDER
==================================*/

.hero-section{

margin-top:20px;

}

#homeBanner{

border-radius:25px;

overflow:hidden;

box-shadow:0 15px 45px rgba(0,0,0,.15);

}

#homeBanner .carousel-item{

height:650px;

position:relative;

}

#homeBanner .carousel-item img{

width:100%;

height:650px;

object-fit:cover;

}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.25) 40%,
        rgba(0,0,0,0) 70%
    );
    z-index:1;
}

#homeBanner .carousel-caption{
    position:absolute;
    left:8%;
    top:50%;
    transform:translateY(-50%);
    right:auto;
    bottom:auto;
    max-width:520px;
    text-align:left;
    z-index:10;
}

#homeBanner .carousel-caption h5{

font-size:22px;

color:#FFD54F;

margin-bottom:15px;

}

#homeBanner .carousel-caption h1{

font-size:64px;

font-weight:800;

line-height:1.1;

color:#fff;

margin-bottom:20px;

}

#homeBanner .carousel-caption p{

font-size:20px;

color:#fff;

margin-bottom:30px;

}

.hero-btn{

display:inline-block;

padding:14px 35px;

background:#2E7D32;

color:#fff;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.hero-btn:hover{

background:#1B5E20;

color:#fff;

}

#homeBanner .carousel-control-prev,

#homeBanner .carousel-control-next{

width:5%;

}

#homeBanner .carousel-control-prev-icon,

#homeBanner .carousel-control-next-icon{

background-color:rgba(0, 0, 0, 0.95);

border-radius:50%;

width:50px;

height:50px;

background-size:24px;

box-shadow:0 8px 25px rgba(0,0,0,.25);

}

#homeBanner .carousel-indicators button{

width:20px;

height:5px;

border-radius:100%;

margin:0 6px;

background:#fff;

opacity:.6;

}

#homeBanner .carousel-indicators .active{

opacity:1;

background:#2E7D32;

}

/* Force Bootstrap horizontal slide */

.carousel-inner{
    overflow: hidden;
}


.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end{
    transform: translateX(100%) !important;
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start{
    transform: translateX(-100%) !important;
}
.hero-section{
    padding:0 !important;
    margin:0 !important;
    min-height:auto !important;
}

#homeBanner{
    margin:50px;
}

#homeBanner .carousel-item img{
    width:100%;
    height:650px;
    object-fit:cover;
    object-position:center;
}

#homeBanner .carousel-inner{
    overflow:hidden;
}

/* new css add*/
/* =========================================================
   MOBILE HOME BANNER - FINAL
========================================================= */

@media (max-width: 767px) {

    #homeBanner {
        width: 100% !important;

        margin: 0 !important;

        border-radius: 0 0 18px 18px !important;

        overflow: hidden !important;
    }

    #homeBanner .carousel-item {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }

    #homeBanner .carousel-item img {
        width: 100% !important;

        height: 250px !important;

        object-fit: contain !important;

        object-position: center !important;

        background: #f5f7f5 !important;
    }

    /* Hide caption because banner image itself contains design/text */

    #homeBanner .carousel-caption {
        display: none !important;
    }

    /* Keep only arrows */

    #homeBanner .carousel-control-prev,
    #homeBanner .carousel-control-next {
        width: 38px !important;
    }

    #homeBanner .carousel-control-prev-icon,
    #homeBanner .carousel-control-next-icon {
        width: 32px !important;
        height: 48px !important;

        background-color: rgba(0,0,0,.35) !important;
        background-size: 16px !important;

        border-radius: 20px !important;
    }

}
@media (max-width: 767px) {

    .category-section {
        padding: 22px 12px !important;
    }

    .category-section .section-heading {
        margin: 0 !important;
    }

    .category-section .section-heading span {
        padding: 7px 16px !important;

        margin-bottom: 8px !important;

        font-size: 13px !important;
    }

    .category-section .section-heading h2 {
        font-size: 25px !important;

        line-height: 1.1 !important;

        margin-bottom: 8px !important;
    }

    .category-section .section-heading p {
        font-size: 13px !important;

        line-height: 1.35 !important;

        margin: 0 auto !important;
    }

}

/* new css add */
@media (max-width: 767px) {

    .category-section {
        padding: 15px 10px !important;
    }

    .category-section .section-heading span {
        padding: 5px 12px !important;
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .category-section .section-heading h2 {
        font-size: 22px !important;
        margin-bottom: 5px !important;
        line-height: 1.1 !important;
    }

    .category-section .section-heading p {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .category-grid,
    .categories-grid {
        gap: 8px !important;
        padding: 0 5px !important;
    }

}


/* =========================================================
   BAIL JI ORGANIC — FULL IMAGE BANNER V2
   Goal: uploaded banner must be visible COMPLETELY.
   No crop. No stretch. No forced 250/550px image height.
   ========================================================= */

.hero-section{
    width:100%;
    padding:18px clamp(10px,3vw,42px) 8px !important;
    margin:0 !important;
    background:transparent !important;
}

#homeBanner{
    width:100%;
    margin:0 !important;
    border-radius:28px;
    overflow:hidden;
    position:relative;
    background:rgba(255,250,239,.92);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:
        0 18px 55px rgba(24,55,29,.16),
        0 3px 12px rgba(24,55,29,.08);
}

/* IMPORTANT: preserve the uploaded image's natural aspect ratio. */
#homeBanner .carousel-inner{
    overflow:hidden;
    border-radius:inherit;
}

#homeBanner .carousel-item{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    position:relative;
    background:#f6f1e5;
}

#homeBanner .carousel-item img,
#homeBanner .carousel-item .banner-full-image{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#f6f1e5;
    aspect-ratio:auto !important;
}

/* The uploaded artwork is the hero.
   Don't darken it with a heavy gradient. */
#homeBanner .carousel-item::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 55%,
        rgba(10,34,16,.05) 100%
    );
}

/* Existing database title/subtitle become a very subtle glass label.
   If the artwork already contains its own text, it won't be covered. */
#homeBanner .carousel-caption{
    left:4%;
    right:auto;
    bottom:4%;
    top:auto;
    transform:none;
    max-width:min(440px,52%);
    padding:12px 16px;
    text-align:left;
    z-index:5;
    border:1px solid rgba(255,255,255,.58);
    border-radius:16px;
    background:rgba(255,250,239,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 28px rgba(0,0,0,.08);
}

#homeBanner .carousel-caption h1,
#homeBanner .carousel-caption h5,
#homeBanner .carousel-caption p{
    text-shadow:none !important;
}

#homeBanner .carousel-caption h1{
    color:#173f1d !important;
    font-size:clamp(20px,3vw,42px);
    line-height:1.05;
    margin:0 0 6px;
}

#homeBanner .carousel-caption p{
    color:#405244 !important;
    font-size:clamp(10px,1.25vw,15px);
    margin:0;
}

/* Premium glass arrows */
#homeBanner .carousel-control-prev,
#homeBanner .carousel-control-next{
    width:54px !important;
    height:54px !important;
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    margin:0 16px;
    border-radius:50%;
    opacity:1;
    z-index:10;
}

#homeBanner .carousel-control-prev{
    left:0;
}
#homeBanner .carousel-control-next{
    right:0;
}

#homeBanner .carousel-control-prev-icon,
#homeBanner .carousel-control-next-icon{
    width:48px !important;
    height:48px !important;
    border-radius:50%;
    background-color:rgba(255,255,255,.88) !important;
    background-size:17px !important;
    box-shadow:0 8px 24px rgba(0,0,0,.14);
    border:1px solid rgba(23,69,31,.10);
    transition:transform .25s ease,background .25s ease;
}

#homeBanner .carousel-control-prev:hover .carousel-control-prev-icon,
#homeBanner .carousel-control-next:hover .carousel-control-next-icon{
    transform:scale(1.08);
    background-color:#fff !important;
}

/* Elegant indicator pills */
#homeBanner .carousel-indicators{
    margin-bottom:13px;
    z-index:8;
}

#homeBanner .carousel-indicators button{
    width:24px !important;
    height:4px !important;
    border:0;
    border-radius:99px;
    margin:0 3px;
    background:#fff;
    opacity:.65;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}

#homeBanner .carousel-indicators .active{
    width:38px !important;
    background:#2e7d32;
    opacity:1;
}

/* Mobile: still show the COMPLETE uploaded image.
   No forced 250px crop. */
@media(max-width:767px){
    .hero-section{
        padding:8px 7px 4px !important;
    }

    #homeBanner{
        border-radius:18px;
    }

    #homeBanner .carousel-item,
    #homeBanner .carousel-item img,
    #homeBanner .carousel-item .banner-full-image{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        object-fit:contain !important;
    }

    /* On small screens, image itself gets priority. */
    #homeBanner .carousel-caption{
        display:none !important;
    }

    #homeBanner .carousel-control-prev,
    #homeBanner .carousel-control-next{
        width:40px !important;
        height:40px !important;
        margin:0 6px;
    }

    #homeBanner .carousel-control-prev-icon,
    #homeBanner .carousel-control-next-icon{
        width:36px !important;
        height:36px !important;
        background-size:13px !important;
    }

    #homeBanner .carousel-indicators{
        margin-bottom:7px;
    }
}

/* Very small phones */
@media(max-width:420px){
    .hero-section{
        padding-left:4px !important;
        padding-right:4px !important;
    }

    #homeBanner{
        border-radius:14px;
    }

    #homeBanner .carousel-control-prev,
    #homeBanner .carousel-control-next{
        margin:0 3px;
    }
}


/* =========================================================
   COMPACT BANNER — smaller without cropping the image
   ========================================================= */
.hero-section{
    padding:12px clamp(10px,3vw,30px) 6px !important;
}

#homeBanner{
    width:min(92%, 1280px) !important;
    margin:0 auto !important;
    border-radius:22px !important;
    padding: 0px 0px !important;
}

/* Keep complete uploaded image */
#homeBanner .carousel-item img,
#homeBanner .carousel-item .banner-full-image{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
}

/* Slightly smaller controls */
#homeBanner .carousel-control-prev,
#homeBanner .carousel-control-next{
    width:44px !important;
    height:44px !important;
    margin:0 10px !important;
}

#homeBanner .carousel-control-prev-icon,
#homeBanner .carousel-control-next-icon{
    width:40px !important;
    height:40px !important;
}

@media(max-width:767px){
    .hero-section{
        padding:6px 6px 4px !important;
    }

    #homeBanner{
        width:100% !important;
        border-radius:15px !important;
    }

    #homeBanner .carousel-item img,
    #homeBanner .carousel-item .banner-full-image{
        height:auto !important;
        object-fit:contain !important;
    }

    #homeBanner .carousel-control-prev,
    #homeBanner .carousel-control-next{
        width:34px !important;
        height:34px !important;
        margin:0 3px !important;
    }

    #homeBanner .carousel-control-prev-icon,
    #homeBanner .carousel-control-next-icon{
        width:32px !important;
        height:32px !important;
    }
}