* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto Slab", serif;
}

h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 60px;
}

/* BUTTON STYLING STR */
.btn-class {
  background-color: #bd1220;
  border: 2px solid #bd1220;
  color: white;
  padding: 5px 20px 5px 20px;
  transition: all 0.3s ease-in-out;
}
.btn-hover:hover {
  background: none;
  color: #bd1220;
  border: 2px solid #bd1220;
}

/* BUTTON STYLING END */
.globle_red_color {
  color: #c32d37;
}
.yellow-text {
  color: #ffb120;
}
/* ==========TOP BAR STR========== */
.sm-text {
  font-size: 12px;
}
@media (max-width: 1140px) {
  .d-d-none {
    display: none;
  }
}

.menu-img-width {
  width: 20%;
}
/* TOP BAR END============================ */

/* 404 BG  */
.bg-content {
  background-image: url(../img/bg-content-bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #ece3d2;
}
/* 404 BG  */

/* #navbarSupportedContent ul li a {
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
} */

/* .overlap {
  background-color: #ded4c1;
  height: 20vh;
  color: #ded4c1;
  border: 2px solid black;
} */

/* NAVBAR HOVER STR  */

.navbar-nav .nav-link {
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #bd1220 !important;
}

/* Navbar Link Default */
.navbar-nav .nav-link {
  color: black;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Hover + Active Color */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #bd1220 !important;
}

.hover-link-nav {
  color: #ffb120 !important;
  transition: all 0.3s ease;
}
.hover-link-nav:hover {
  color: #bd1220 !important;
}

/* NAVBAR HOVER END  */

.container-fluid a img {
  width: 70%;
}

/* HERO VIDEO STR  */
.video-background {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* 🔹 Add overlay using ::after */
.video-background::after {
  /* content: "";
  position: absolute; */
  /* top: 0;
  left: 0; */
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* <-- overlay color (black with 50% opacity) */
  z-index: 1;
}

.video-background > * {
  position: relative;
  z-index: 2;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1; /* piche rahe */
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures video fills the section */
}

.video-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* overlay color and opacity */
  z-index: 1;
}

/* Content on top of overlay */
.video-background .content {
  /* position: relative; */
  z-index: 2;
  /* color: white;
  text-align: center;
  top: 50%; */
  /* transform: translateY(-50%); */
}

/* #navbarSupportedContent ul li a {
  color: white;
} */
/* HERO VIDEO END  */

.affiliate-bg {
  background-image: url(../img/our_affliate-bg.webp);
}

/* ========== WHY CHOOSE SECTION STR ========== */
.toppp-div {
  width: 80%;
}
.top-img {
  width: 60%;
  margin-top: -200px;
}

/* .border-div {
  border: 3px solid #bd1220;
  height: 70%;
  position: absolute;
  right: 209px;
  width: 28%;
} */

/* ========== WHY CHOOSE SECTION END ========== */

/* cow section  */

/* .four-img img {
  width: 15%;
  height: 200px;
} */
/* .sec-1 img {
  width: 200px;
  height: auto;
} */

.choose-cat-bgg {
  background-image: url(../img/choose-categories-bgg.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon-bg img {
  transition: transform 0.5s ease;
}

.icon-bg img:hover {
  transform: scale(1.05);
}

@media (max-width: 767px) {
  .icon-bg {
    width: 100px;
    height: 100px;
  }
}
.icon a {
  background-color: white !important;
  padding: 6px;
  border-radius: 50%;
}
.icon a i {
  color: black;
  font-size: 20px;
}

/* second last  */
.get-in-touch-bg {
  background-image: url(../img/get-in-touch-bg.webp);
  background-position: center;
  background-size: cover;
}
.second-last img {
  width: 74%;
}
.form-int input {
  width: 45%;
  height: 40px;
  outline: none;
}

.form-int textarea {
  width: 45%;
  height: 80px;
  outline: none;
}

.form-int .both {
  width: 91%;
}
.checkbox img {
  width: 40%;
}
form input {
  outline: none;
}

@media (min-width: 768px) {
  .left-side {
    height: 70vh;
  }
}

/* footer start  */

.left-side {
  background-image: url(images/Rectangle\ 43553.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 70vh;
  background-size: cover;
}

/* TOP BANNER IMAGE STYLING STR===========================================  */
.banner-bg {
  position: relative;
  background-image: url(../img/top-banner-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 250px;
  z-index: 1;
  overflow: hidden;
}

.choose-bgg {
  background-image: url(../img/choose-us-bgg.webp);
  background-color: #f0e7d6;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000080;
  z-index: 2;
}

.banner-bg > * {
  position: relative;
  z-index: 3;
}
/* TOP BANNER IMAGE STYLING END ========================================== */
.bg-warning {
  margin-bottom: 0 !important;
}

.navbar {
  margin-top: 0 !important;
}
/* gpt  */

@media (max-width: 768px) {
  .tab-pane .row {
    flex-direction: column;

    align-items: center;
  }

  .tab-pane img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
  }

  .tab-pane .text-content {
    text-align: center;
  }
}

/* 🧭 Remove blue highlight/focus from Bootstrap pill tabs and images */
a,
a:focus,
a:active,
.nav-link,
.nav-link:focus,
.nav-link:active,
.pill-tab,
.pill-tab:focus,
.pill-tab:active,
img,
img:focus,
img:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background-color: transparent !important;
}

/* Optional: remove default Bootstrap active background on nav-pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: transparent !important;
  color: inherit !important;
}

.mail_id input {
  background: none !important;
  border: 1px solid rgba(34, 34, 34, 1);
  outline: none;
}

.custom-input::placeholder {
  color: black; /* change placeholder color */
  opacity: 1; /* make sure it's fully visible */
  outline: none !important;
}

.custom-input:focus-visible {
  outline: none !important; /* remove blue outline */
}

/* About Quality Ethnic Foods Inc. Section Str  */
.ethic-food {
  background-image: url(../img/about-our-meat-bgg.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #f0e7d6;
}

.card {
  overflow: visible !important;
  position: relative;
}

.carousel-item {
  overflow: visible !important;
}

.card img {
  width: 80px;
  height: 80px;
 /*  margin: -40px auto 0; */
  display: block;
  margin:auto;
  margin-top: 12px;
}
.my-card-h {
  background-color: #ded4c1 !important;
  color: #222222;
  transition: all 0.3s ease;
}

.my-card-h:hover {
  background-color: #222222e5 !important;
  color: #ffffff;
}

/* Allow slides to overflow */
.card-carl .splide__track,
.splide__list,
.card-carl {
  overflow-y: visible !important;
}
/* .card-carl .splide__track,
.splide__list,
.card-carl {
  overflow-x: hidden !important;
} */

/* Make card allow overflow */
/* .card-carl .card {
  overflow: visible !important;
  position: relative;
} */

/* About Quality Ethnic Foods Inc. Section End  */

/* FOOTER INPUT QUERY STR */
@media (max-width: 767px) {
  .input-query {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 2560px) {
  .input-query {
    display: flex;
  }
}
/* FOOTER INPUT QUERY END */

@media (max-width: 659px) and (min-width: 425px) {
  /* body {
    background: red;
  } */
}

@media (max-width: 575px) {
  .abd-hamza {
    margin-top: 180px;
    /* padding-left: 69px; */
  }
}