/*
Template Name: Eco Mart
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/

/*********************center_home****************/
.carousel-caption{
text-align:left;
background:#0000005e;
padding:30px 30px;
bottom: 9rem;
left: 10%;
width:40%;
color:#fff;
 }
.carousel-indicators{
bottom:0; 
 }
.center_home .carousel-indicators [data-bs-target] {
 background-color: #f7ba01;
}
/*********************center_home_end****************/

/*********************prod****************/

#deal .carousel-indicators {
bottom: -50px;
}
#deal .carousel-indicators [data-bs-target] {
background-color: #f7ba01;
}
#deal {
padding-bottom:50px;
}
.deal_1r2im2{
border-top:1px solid #f7ba0121;
margin-top:20px;
padding-top:15px; 
 }
.deal_1r2im2 .progress-bar {
background: #ebebeb; 
border-radius: 30px;
}
.deal_1r2im2 .progress {
background-color: #f7ba01;
height: 8px;
overflow: hidden;
border-radius: 30px;
}
.deal_1r2im2 ul li{
background:#000;
width:45px;
height:45px;
line-height:1.2em;
border-radius:3px;
padding-top:8px;
font-size:12px;
 }
.deal_1r2{
border-top:1px solid #f7ba0121;
margin-top:20px;
padding-top:20px; 
 }
 
.deal_1li1{
background:#1d428994;
top:0;
padding:50px 0px 0px 30px; 
 }
.deal_1li2{
top:0;
right:0;
padding:130px 30px 0px 0px;
 }
.deal_1li2 h6{
width:110px;
height:110px;
line-height:1.2em;
border-radius:50%;
padding-top:40px;
 }
/*********************prod_end****************/

/*********************prod_o****************/
.prod_o1 .nav-tabs{
width:50%;
margin-left:auto;
margin-right:auto;
padding-top:15px;
padding-bottom:15px;
border-radius:50px;
 }
.prod_o1 .nav-link{
border:none; 
font-weight:bold;
color:#000;
background:none;
border-radius:0;
padding-left:25px;
padding-right:25px;
font-size:15px;
 }
.prod_o1 .nav-link:hover{
color:#f7ba01!important; 
 }
.prod_o1 .active{
color:#f7ba01!important; 
background:none!important;
border-radius:0;
 }
 
.arrive {
background-image: url(../img/23.jpg);
background-position: center;
}
.arrive_m{
background:#0000005e;
padding-top:100px;
padding-bottom:100px; 
 }
/*********************prod_o_end****************/


@media screen and (max-width : 767px){
.center_home img{
min-height:300px; 
 }
.carousel-caption {
text-align: center;
left:0;
width:100%;
bottom:50px;
padding:10px;
}
.carousel-caption .font_50{
font-size:26px; 
 }
.carousel-caption br{
display:none;
 }
.deal_1li2 {
top: 0;
right: 0;
padding: 200px 30px 0px 0px;
}
.deal_1r1l{
text-align:center;
margin-top:15px;
margin-bottom:15px; 
 }
.deal_1r1r{
text-align:center!important; 
 }
.deal_1r2im {
margin-bottom:15px; 
 }
.prod_o1 .nav-tabs{
width:100%; 
 }
.prod_o1 .nav-link {
padding-left: 10px;
padding-right: 10px;
}
.blog_h1i {
text-align:center;
margin-bottom:15px;
 }
.blog_h1i p{
 text-align:left;
 }
 }


@media (min-width:576px) and (max-width:767px) {

 }
@media (min-width:768px) and (max-width:991px) {
.center_home img{
min-height:500px; 
 }
.carousel-caption .font_50{
font-size:38px; 
 }
.carousel-caption{
width:50%;
 }
.carousel-caption br{
display:none;
 }
.prod_2i2 h6{
font-size:12px; 
 }
.deal_1r{
margin-top:15px; 
 }
.prod_o1 .nav-tabs{
width:70%; 
 }
 }

@media (min-width:992px) and (max-width:1200px) {
.carousel-caption .font_50{
font-size:38px; 
 }
.deal_1r2im2 ul li{
margin-bottom:5px; 
 }
.deal_1li2 {
padding: 200px 30px 0px 0px;
}
.prod_o1 .nav-tabs{
width:60%; 
 }
 }
@media (min-width:1201px) and (max-width:1255px) {
.carousel-caption .font_50{
font-size:45px; 
 }
 }


/* =========================================
   MODERN CAROUSEL ARROWS
========================================= */

#center .custom-carousel-control {
  width: 70px;
  height: 70px;

  top: 50%;
  bottom: auto;

  transform: translateY(-50%);

  opacity: 1;

  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.3s ease;
}


/* Arrow circle */
#center .custom-carousel-arrow {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.45);

  border: 1px solid rgba(255, 255, 255, 0.55);

  color: #fff;

  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(5px);

  transition:
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* Font Awesome icon */
#center .custom-carousel-arrow i {
  font-size: 18px;
  line-height: 1;
}


/* Hover effect */
#center .custom-carousel-control:hover .custom-carousel-arrow {
  background: #f7ba01;

  color: #111;

  border-color: #f7ba01;

  transform: scale(1.08);

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


/* Left position */
#center .carousel-control-prev {
  left: 18px;
}


/* Right position */
#center .carousel-control-next {
  right: 18px;
}


/* Remove Bootstrap default icon */
#center .carousel-control-prev-icon,
#center .carousel-control-next-icon {
  display: none;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  #center .custom-carousel-control {
    width: 50px;
    height: 50px;
  }

  #center .custom-carousel-arrow {
    width: 40px;
    height: 40px;
  }

  #center .custom-carousel-arrow i {
    font-size: 14px;
  }

  #center .carousel-control-prev {
    left: 8px;
  }

  #center .carousel-control-next {
    right: 8px;
  }
}

.custom-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.custom-carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.custom-carousel-item {
  display: none;
  position: relative;
  width: 100%;
}

.custom-carousel-item.active {
  display: block;
}

.custom-carousel-item img {
  width: 100%;
  display: block;
}



.slider-bg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:blur(18px);
  transform:scale(1.15);
}

.slider-main{
  position:relative;
  z-index:2;

  width:100%;
  height:100%;

  object-fit:contain;
}

.slider-overlay{
  position:absolute;
  inset:0;
  z-index:3;

  background:linear-gradient(
      to top,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.70) 35%,
      rgba(0,0,0,.35) 65%,
      rgba(0,0,0,.10) 100%
  );
}

.slider-content1{
  position:absolute;
  inset:0;

  z-index:5;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;

  padding:40px;

  color:#fff;

  text-shadow:
      0 2px 8px rgba(0,0,0,.95),
      0 0 25px rgba(0,0,0,.9);
}

.slider-content {
  position: absolute;
  inset: 0;
  z-index: 5;

  display: grid;
  place-items: center;

  align-content: center;

  padding: 20px;

  color: #fff;
  text-align: center;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.95),
    0 0 25px rgba(0, 0, 0, 0.9);
}

.slider-content h1 {
  margin-bottom: 15px;
}

.slider-content p {
  margin-bottom: 20px;
}

.slider-content h6 {
  margin-top: 5px !important;
}

.deal_1r2 .carousel-control-prev,
.deal_1r2 .carousel-control-next {
  z-index: 20;
  width: 45px;
  height: 45px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
}

.deal_1r2 .carousel-control-prev {
  left: 5px;
}

.deal_1r2 .carousel-control-next {
  right: 5px;
}

.deal_1r2 .carousel-control-prev-icon,
.deal_1r2 .carousel-control-next-icon {
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  background-size: 55%;
  background-position: center;
  background-repeat: no-repeat;
}
.latest-articles-filter {
  width: 100%;
}

.latest-articles-filter .row {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.latest-articles-filter .form-select,
.latest-articles-filter .form-control {
  height: 45px;
}

.latest-articles-filter .input-group {
  width: 100%;
}

.poster-card {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  overflow: hidden;
}

.poster-image {
  width: 100%;
  aspect-ratio: 300 / 600;
  object-fit: cover;
  display: block;
}

.poster-card:hover .poster-image {
  transform: scale(1.01);
}

.poster-delete {
  position: absolute;
  top: 12px;
  right: 12px;

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  opacity: 0;
  transform: translateY(-8px);
  transition: all .25s ease;
}

.poster-card:hover .poster-delete {
  opacity: 1;
  transform: translateY(0);
}

.poster-delete:hover {
  background: #dc3545;
  transform: scale(1.1);
}

.poster-cardn {
  position: relative;
  width: 100%;
  max-width: 728px;
  margin: 0 auto;
  overflow: hidden;
}

.poster-imagen {
  width: 100%;
  aspect-ratio: 728 / 90;
  object-fit: cover;
  display: block;
}

.poster-cardn:hover .poster-imagen {
  transform: scale(1.02);
}

.poster-deleten {
  position: absolute;
  top: 10px;
  right: 10px;

  width: 36px;
  height: 36px;

  border: none;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  cursor: pointer;

  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(-8px);

  z-index: 10;
}

.poster-cardn:hover .poster-deleten {
  opacity: 1;
  transform: translateY(0);
}

.poster-deleten:hover {
  background: #dc3545;
  transform: scale(1.1);
}