/* .ugra-category-banner-section {

  margin: auto;

  padding: 40px 20px;

  font-family: Arial, sans-serif;

  max-width: 1200px;

} */




.container {
  width: 100%;
  max-width: 1140px;
  padding: 0 24px;
  margin: auto;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    padding: 0 20px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* Large Screen */
@media (min-width: 1480px) {
  .container {
    max-width: 1420px;
  }
}

.ugra-category-layout .ugra-section-title {

  color: #da4f16 !important;

}



.ugra-category-banner-row {

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 40px;

}



/* ---------- FIRST ROW ---------- */

.first-row {

  display: flex;

  width: 100%;

  gap: 30px;

  align-items: stretch;

}



.ugra-category-banner-big {

  flex: 2;

  border-radius: 10px;

  overflow: hidden;

  position: relative;

}



.ugra-category-banner-big img {

  width: 100%;

  height: 100% !important;

  /* height: 56% !IMPORTANT; */

  /* aspect-ratio: 16 / 9; */

  /* object-fit: cover; */

  display: block;

  /* object-fit: fill; */

}



/* Two small boxes on the right */

.ugra-category-banner-small-group {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.ugra-category-banner-small {

  width: 100%;

  border-radius: 10px;

  overflow: hidden;

  position: relative;

  /* height: 100%; */

}



.ugra-category-banner-small img {

  width: 100%;

  /* max-width: 100%; */

  aspect-ratio: 16 / 9;

  object-fit: cover;

  display: block;

}



.ugra-category-banner-big h3,

.ugra-category-banner-small h3,

.ugra-category-banner-card h3 {

  position: absolute;

  bottom: 20px;

  left: 20px;

  font-size: 20px;

  color: white;

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

  padding: 10px 15px;

  border-radius: 5px;

  margin: 0;

}



/* ---------- SECOND ROW ---------- */

.second-row {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  justify-content: space-between;

}



.ugra-category-banner-card {

  width: calc(25% - 22.5px);
  /* 4 cards with 30px gap */

  border-radius: 10px;

  overflow: hidden;

  position: relative;

  background: #fff;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease;

}



.ugra-category-banner-card img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  display: block;

}



.ugra-category-banner-card:hover {

  transform: translateY(-5px);

}


.ucra-header-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    /*display: none !important;*/
}
/* ---------- RESPONSIVE ---------- */

@media (max-width: 1024px) {

  .ugra-category-banner-card {

    width: calc(50% - 15px);
    /* 2 cards per row */

  }

  .first-row {

    flex-direction: column;

  }

  .ugra-category-banner-small-group {

    flex-direction: row;

  }

}



@media (max-width: 600px) {

  .ugra-category-banner-card {

    width: 100%;

  }

  .ugra-category-banner-small-group {

    flex-direction: column;

  }

}