.rs-background-video-layer {
    z-index: 1 !important;
}
.rev-slidebg {
    z-index: 0 !important;
}
#ranifood_wrapper,
#ranifood-slider {
    height: 920px !important;
}

#ranifood-slider .rev-slidebg,
.rs-background-video-layer {
    height: 920px !important;
}
.bg-gradient-dark-transparent {
    background: #c7220e !important;
}
div#ranifood-slider_forcefullwidth {
    height: 920px !important;
}

.center-logo .navbar-left,
.center-logo .navbar-right {
    width: 36%;
}

@media only screen and (max-width: 1500px) {
    header .navbar-brand img {
        max-height: 62px !important;
    }
    .small-device {
        width: 260px !important;
    }
}
.vertical-counter::after {
    content: "+";
    margin-left: 6px;
    font-size: inherit;
    font-weight: inherit;
}
.text-light-gray1 {
    color: #f9f9f9 !important;
}

.bg-color-block {
    background: #00000063;
    padding: 33px;
    border-radius: 10px;
}
footer .footer-logo img {
    max-height: 75px !important;
}

.bg-red-extra-light {
    background: #fff3f3;
}

.container-ranifood {
    margin: 0 auto;
    width: 85%;
}
.bb-1 {
    margin-bottom: -1px;
}
.text-dark-red {
    color: #ff0001;
}
.hover-text a {
    color: #970606;
    opacity: 0.8;
}
.left-300px {
    margin-left: -400px !important;
}

red element.style {
    padding: 10px 20px;
    background: #970606;
    border-radius: 5px;
    color: #fff;
    margin-top: 10px;
}

/*Header*/
@media (min-width: 992px) {
    .custom-20 {
        flex: 0 0 11%;
        max-width: 11%;
    }

    .custom-50 {
        flex: 0 0 90%;
        max-width: 70%;
    }

    .custom-10 {
        flex: 0 0 10%;
        max-width: 10%;
    }
}

@media only screen and (min-width: 1280px) and (max-width: 1450px) {
    .rani-brand-header img {
        max-width: 60px;
    }
    .gold-brand-header img {
        max-width: 95px;
    }
    .center-logo .navbar-nav .nav-link {
        font-size: 16px !important;
    }
    .center-logo .navbar-left {
        width: 33%;
    }
    header .navbar-brand img {
        max-height: 50px !important;
    }
    .m-fs {
        font-size: 14px;
    }
}
@media only screen and (min-width: 1450px) and (max-width: 1650px) {
    .rani-brand-header img {
        max-width: 60px;
    }
    .gold-brand-header img {
        max-width: 95px;
    }
    .center-logo .navbar-nav .nav-link {
        font-size: 16px !important;
    }
    .center-logo .navbar-left {
        width: 35%;
    }
    header .navbar-brand img {
        max-height: 55px !important;
    }
    .m-fs {
        font-size: 15px;
    }
}

@media only screen and (min-width: 1080px) and (max-width: 1279px) {
    .rani-brand-header img {
        max-width: 55px;
    }
    .gold-brand-header img {
        max-width: 85px;
    }
    .center-logo .navbar-nav .nav-link {
        font-size: 14px !important;
    }
    .center-logo .navbar-left {
        width: 30%;
    }
    header .navbar-brand img {
        max-height: 45px !important;
    }
    .m-fs {
        font-size: 13px;
    }
}
.team-style-01 figure figcaption {
    padding: 30px 10px !important;
}
.btn.btn-large {
    font-size: 20px !important;
}
.btn {
    font-family: "Open Sans" !important;
}
.slider-title h2 {
    font-family: "Open Sans" !important;
}
a.slider-bottom-arrow {
    font-size: 22px !important;
    letter-spacing: 0px !important;
    line-height: 24px !important;
    padding-top: 20px !important;
}

.header-button a.nav-link {
    background: #ffffff57;
    border-radius: 25px;
}
.header-button a.nav-link:hover {
    background: #fff !important;
    color: #ff0001 !important;
    opacity: 1 !important;
}
.header-button a.nav-link:hover .fs-20 {
    color: #ff0001 !important;
}

.counter-bg {
    position: relative;
    background-image: url("../images/banner2.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 350px;
    display: flex;
    align-items: center; /* VERTICAL CENTER */
}

.counter-bg .bg-overlay {
    position: absolute;
    inset: 0;
    background: rgb(255 47 47 / 80%);
    z-index: 1;
}

/* content overlay er upor thakbe */
.counter-bg .container {
    position: relative;
    z-index: 2;
    text-align: center; /* text middle */
}

.product-section-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.product-section-title h2 {
    padding: 10px 35px;
    background: linear-gradient(to bottom, #ff3b3b, #d80000);
    color: #ffffff;
    text-transform: uppercase;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 35px;
    font-weight: 800;
    letter-spacing: 2px;
    border-radius: 12px;
    text-align: center;
    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.35),
        0 6px 12px rgba(0, 0, 0, 0.25);
    text-shadow: 2px 2px 2px #0404048a;
}

.tab-style-08 a img {
    border-radius: 20px;
    box-shadow: 2px 2px 2px 2px #5d020238;
}

.product-slide .swiper-slide {
    image-rendering: #ccc;
    min-width: 261px;
    max-width: 230px;
    border-radius: 8px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    border: 1px solid #ff111117;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 21%,
        rgba(235, 235, 235, 1) 100%
    );
}
.product-slide .swiper-slide img {
    color: transparent;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    filter: none;
}
.swiper-slide {
    transition: transform 0.4s ease;
}

.swiper-slide:hover {
    transform: translateY(-6px) scale(1.04);
}

.bottom-image {
    background-image: url(../images/rf/page-bg.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: bottom right;
}

footer
    .col-lg-5.fs-16.text-center.text-lg-end.last-paragraph-no-margin.text-end,
footer
    .col-lg-5.fs-16.text-center.text-lg-end.last-paragraph-no-margin.text-end
    a {
    color: #8b8b8b57 !important;
}

/*.border-radius-right{*/
/*  border-radius: 0px 0px 40px 0px;*/
/*}.border-radius-left{*/
/*  border-radius: 0px 0px 0px 60px;*/
/*}*/

/*.footer .col-lg-5.fs-16.text-center.text-lg-end.last-paragraph-no-margin.text-end {*/
/*    color: red;*/
/*}*/

/* ==============================
   MOBILE HEADER FIX (NO HTML CHANGE)
   ============================== */
@media (max-width: 1024px) {
    .navbar .navbar-nav .nav-link {
        font-size: 13px;
    }

    .navbar .navbar-nav li {
        padding: 10px 0px;
    }
    .navbar .navbar-nav .nav-link {
        padding: 15px 0px;
    }

    .navbar > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    a.slider-bottom-arrow {
        font-size: 18px !important;
    }

    .counter-number {
        font-size: 4rem;
    }
}

@media (max-width: 768px) {
    .quickview-image {
        height: 300px;
        background-size: 88% !important;
    }

    .qv-title {
        margin: 30px 0 8px;
    }

    .qv-actions {
        padding-bottom: 30px;
    }

    footer .container {
        padding-top: 50px !important;
    }
    .menu-order {
        padding-right: 25px !important;
    }
    .clients-style-04 .col {
        border: none !important;
        text-align: center;
    }
    .slider-title {
        bottom: -265px;
    }
    #ranifood-slider .rev-slidebg,
    .rs-background-video-layer {
        height: 650px !important;
    }
    .slider-title h2 {
        padding-left: 32px;
        font-size: 26px !important;
    }
    #ranifood_wrapper,
    #ranifood-slider {
        height: 520px !important;
    }
    div#ranifood-slider_forcefullwidth {
        height: 520px !important;
    }
    a.slider-bottom-arrow {
        font-size: 22px !important;
        line-height: 15px !important;
        padding-top: 4px !important;
        font-size: 17px !important;
    }
    .distribution-map .map-point {
        width: 58px !important;
        height: 20px !important;
    }
    .distribution-map .map-point h2 {
        font-size: 11px !important;
    }
    .world-shipment {
        padding-top: 50px !important;
    }
    /* ✅ Center logo perfectly */
    .clients-style-04 .client-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .singleMock img {
        max-width: 65% !important;
    }
    .mpt-4 {
        padding-top: 60px !important;
    }
    .mpb-3 {
        padding-bottom: 30px !important;
    }
    .about-right span {
        font-size: 16px;
        margin-bottom: 5px !important;
    }
    .about-right p {
        line-height: 22px;
        color: #000;
        text-align: justify;
    }
    .about-right h1 {
        font-size: 26px;
        line-height: 30px;
        margin-bottom: 11px;
    }
    .header-icon {
        max-width: 150px;
        border-right: 3px solid #ff0001;
    }
    .outside-box-left-17 {
        margin-left: 0vw !important;
    }
    .brandDot {
        width: 100px;
        height: 100px;
    }

    .brandDot .dotInner {
        width: 80px;
        height: 80px;
    }

    .cats {
        grid-template-columns: repeat(5, 1fr);
    }

    .slider-bg {
        clip-path: ellipse(1000% 88% at 51% 0%) !important;
    }

    #ranifood_wrapper {
        height: 604px !important;
        background: none !important;
    }

    #ranifood-slider {
        height: 593px !important;
    }
    .rev_slider .tp-caption {
        margin-top: -225px !important;
    }
    .tp-static-layer {
        display: none !important;
    }

    header .rf-header .custom-20 {
        background: #fff;
        height: 89px;
        margin: 10px 0px !important;
    }
    .header-icon {
        max-width: 100px;
    }

    .rani-brand-header img {
        padding-left: 0px !important;
    }
}
/* Mobile controls: catalog + toggler */
.mobile-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Mobile catalog button */
.catalog-btn-mobile {
    display: none;
    padding: 8px 12px;
    border-radius: 8px;
    background: #e10000;
    color: #fff !important;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
}

.catalog-btn-mobile i {
    margin-left: 6px;
}

/* Desktop catalog visible */
.catalog-desktop {
    display: block;
}

/* ===== Mobile Rules ===== */
@media (max-width: 991px) {
    /* show mobile catalog */
    .catalog-btn-mobile {
        display: inline-flex;
        align-items: center;
    }

    /* hide desktop catalog */
    .catalog-desktop {
        display: none;
    }

    /* navbar toggler spacing fix */
    .navbar-toggler {
        margin-left: 0 !important;
    }
}

.shop-filter .product-cb.active::after {
    opacity: 1 !important;
}

.btn-career:hover {
    color: #b02a37;
}

.job-title {
    line-height: 1.5;
}

.job-badge {
    background-color: rgba(230, 57, 75, 0.2);
    border-radius: 0.5rem;
    color: rgb(173, 43, 56);
    font-size: 0.875rem;
    padding: 4px 8px;
    font-weight: 700;
}

.job-post-details li {
    list-style: disc;
}

.career-form label {
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
}

.form-control::file-selector-button,
.form-control::-webkit-file-upload-button {
    padding: 12px 25px;
    margin: -12px -25px;
    -webkit-margin-end: 0.75rem;
    margin-inline-end: 0.75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--bs-border-width);
    border-radius: 0;
    transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.pagination p.small.text-muted {
    margin-right: 15px;
}

.pagination .active>.page-link {
    background-color: #870000;
    border-color: #870000;
    color: #fff !important;
}

.pagination .page-link {
    color: #000000;
}

@media (max-width: 720px) {
.home-slider{
  height: 400px !important;
}
.home-slider iframe {
  height: 400px !important;
} 
 
  /* slider wrapper height অনুযায়ী image/video cover */
#ranifood_wrapper,
#ranifood-slider,
#ranifood-slider .rev_slider,
#ranifood-slider .rev_slider ul,
#ranifood-slider .rev_slider ul li{
  height: 100% !important;
}

#ranifood-slider .rev-slidebg{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;

}/* ✅ Remove any extra spacing */
.home-slider,
.home-slider article.content,
#ranifood_wrapper,
#ranifood-slider{
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ Force the slider area to have a fixed visible height (change if you want) */
#ranifood_wrapper,
#ranifood-slider{
  height: 100vh !important;      /* full screen */
  height: 380px !important;
  overflow: hidden !important;
}

/* ✅ Make slide + layers fill the height */
#ranifood-slider .rev_slider,
#ranifood-slider .rev_slider ul,
#ranifood-slider .rev_slider ul li{
  height: 100% !important;
}

/* ✅ Fallback background image cover */
#ranifood-slider .rev-slidebg{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.heroSection {
    margin-top: 0px;
}
.home-slider {
        height: 333px !important;
    }
  .navbar-expand-lg>.rf-header {
        padding-right: 0;
        padding-left: 3px !important;
    }
    
    
}

.mobile-only {
  display: none;
}

/* Show only on mobile (max-width 767px) */
@media (max-width: 767px) {
  .mobile-only {
    display: block;
  }
  
  .welcome-section {
  padding: 80px 20px;

  text-align: center;
}

.welcome-content {
  max-width: 850px;
  margin: 0 auto;
}

.welcome-section h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #c40000; /* brand red feel */
  position: relative;
}

.welcome-section h3::after {
  content: "";
  width: 70px;
  height: 3px;

  display: block;
  margin: 12px auto 0;
}

.welcome-section p {
  font-size: 16px;
  line-height: 22px;
  color: #555;
}
}

@media (max-width: 991.98px){

  /* parent li full width */
  #navbarNav .navbar-nav,
  #navbarNav .nav-item{
    width: 100% !important;
  }

  /* parent link center */
  #navbarNav .nav-link{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* dropdown menu: under parent + centered */
  #navbarNav .dropdown-menu{
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    min-width: 100% !important;

    margin: 0 !important;
    padding: 8px 0 12px !important;

    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    text-align: center !important;   /* ✅ submenu items center */
  }

  /* dropdown items center */
  #navbarNav .dropdown-menu li{
    width: 100% !important;
    text-align: center !important;
  }

  #navbarNav .dropdown-menu a{
    display: block !important;
    width: 100% !important;
    padding: 10px 16px !important;
    text-align: center !important;
  }
}


#quote-form {
    width: 556px !important;
}