/* =====================================================
   SPECIAL PICKS CONTAINER
===================================================== */
.special-picks-container {
  width: 100%;
  height: auto;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
}

.text-header {
  text-align: center;
  font-size: 1.4rem;
  color: red;
  margin: 0;  
}

/* =====================================================
   SPECIAL PICKS BASE STYLES
===================================================== */
.special-picks-items,
.special-picks-items1,
.special-picks-items2,
.special-picks-items3 {
  width: 100%;
  height: 250px;
  background: yellow;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.special-picks-items img,
.special-picks-items1 img,
.special-picks-items2 img,
.special-picks-items3 img {
  width: 100%;
  height: auto;
}

/* Overlay filter */
.filter-bg1 {
  width: 100%;
  height: 250px;
  background: black;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
}

/* =====================================================
   SHARED CONTAINER BASE
===================================================== */
.special-picks-ctn,
.special-picks-ctn1,
.special-picks-ctn2,
.special-picks-ctn3 {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  color: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin-top: 100px;
  z-index: 10;
}

.special-picks-ctn {
  align-items: flex-start;
}
.special-picks-ctn1,
.special-picks-ctn3 {
  align-items: flex-end;
}
.special-picks-ctn2 {
  align-items: flex-start;
}

/* =====================================================
   HEADINGS STYLES
===================================================== */
.special-picks-ctn h2,
.special-picks-ctn1 h2,
.special-picks-ctn2 h2,
.special-picks-ctn3 h2 {
  font-size: 2.2rem;
  font-family: 'MonteCarlo', cursive;
  font-weight: 400;
  margin: 0;
}

.special-picks-ctn h2 {
  color: #F9B4EE;
  padding-left: 5px;
}
.special-picks-ctn1 h2 {
  color: #C1E95B;
  padding-right: 10px;
}
.special-picks-ctn2 h2 {
  color: #F9DBB4;
  padding-left: 5px;
}
.special-picks-ctn3 h2 {
  color: #DAFB86;
  padding-right: 10px;
}

.special-picks-ctn h1,
.special-picks-ctn1 h1,
.special-picks-ctn2 h1,
.special-picks-ctn3 h1 {
  font-size: 2.5rem;
  margin: 0;
  margin-top: -25px;
}

/* =====================================================
   BUTTON STYLES
===================================================== */
.sp-btn,
.sp-btn1,
.sp-btn2,
.sp-btn3 {
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  width: 130px;
  padding: 5px;
  border-radius: 20px;
  margin-top: 10px;
}

.sp-btn {
  background: #F9B4EE;
  color: black;
}
.sp-btn1 {
  background: #C1E95B;
  color: #2F3F06;
}
.sp-btn2 {
  background: #F9DBB4;
  color: #714811;
}
.sp-btn3 {
  background: #283409;
  color: #DAFB86;
}

/* =====================================================
   SCROLL ANIMATION
===================================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(80px);
  transition: all 0.8s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   MEDIA QUERIES
===================================================== */

/* ========== Extra Small Devices (Phones) ========== */
@media (min-width: 250px) and (max-width: 400px) {
    .special-picks-container {
      flex-direction: column;
      align-items: center;
      padding-bottom: 10px;
    }
    
    .text-header {
      text-align: center;
      font-size: 1.4rem;
      color: red;
    }
}

/* ========== Small Devices (Phones to Tablets) ========== */
@media (min-width: 400px) and (max-width: 767.98px) {
    .special-picks-container {
      flex-direction: column;
      align-items: center;
      padding-bottom: 10px;
    }
    
    .text-header {
      text-align: center;
      font-size: 1.4rem;
      color: red;
    }
}

/* ========== Medium Devices (Tablets) ========== */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Add styles if needed */
}

/* ========== Large Devices (Desktops) ========== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .special-picks-container {
    padding-bottom: 10px;
  }

  .text-header {
    font-size: 1.8rem;
    color: yellow;
  }
}

/* ========== Extra Large Devices (Large Desktops) ========== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .special-picks-container {
    margin-bottom: 30px;
  }

  .items-container {
    width: 70%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 220px 220px;
    gap: 5px;
  }

  .text-header {
    font-size: 1.8rem;
    color: red;
  }

  .special-picks-items,
  .special-picks-items1,
  .special-picks-items2,
  .special-picks-items3 {
    height: auto;
    margin-top: 10px;
  }

  .special-picks-items img,
  .special-picks-items1 img,
  .special-picks-items2 img,
  .special-picks-items3 img {
    width: 105%;
    margin-top: -100px;
  }

  .special-picks-ctn,
  .special-picks-ctn1,
  .special-picks-ctn2,
  .special-picks-ctn3 {
    margin-top: 60px;
    padding: 0 20px;
  }

  .filter-bg1 {
    height: 100%;
    opacity: 0.6;
  }
}

/* ========== XXL Devices (Very Large Screens) ========== */
@media (min-width: 1400px) {
  .special-picks-container {
    margin-bottom: 30px;
  }

  .items-container {
    width: 90%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 300px 300px;
    gap: 5px;
  }

  .text-header {
    font-size: 1.8rem;
    color: red;
  }

  .special-picks-items,
  .special-picks-items1,
  .special-picks-items2,
  .special-picks-items3 {
    height: auto;
    margin-top: 10px;
  }

  .special-picks-items img,
  .special-picks-items1 img,
  .special-picks-items2 img,
  .special-picks-items3 img {
    width: 105%;
    margin-top: -100px;
  }

  .special-picks-ctn,
  .special-picks-ctn1,
  .special-picks-ctn2,
  .special-picks-ctn3 {
    margin-top: 130px;
    padding: 0 25px;
  }

  .filter-bg1 {
    height: 100%;
    opacity: 0.6;
  }
}