/* ========================================
   OPMA CARD SECTION
   ======================================== */

#OPMACardSection {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}


/* ========================================
   CARD GRID
   ======================================== */

#OPMACardSection .OPMACardGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}


/* ========================================
   CARD
   ======================================== */

#OPMACardSection .OPMACard {
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#OPMACardSection .OPMACard:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}


/* ========================================
   CARD IMAGE
   ======================================== */

#OPMACardSection .OPMACard img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}


/* ========================================
   CARD CONTENT
   ======================================== */

#OPMACardSection .OPMACardContent {
  padding: 20px;
}

#OPMACardSection .OPMACardContent h3 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.3;
}

#OPMACardSection .OPMACardContent p {
  margin: 0;
  line-height: 1.5;
}


/* ========================================
   BUTTON CONTAINER
   ======================================== */

#OPMACardSection .OPMACardButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 35px;
}


/* ========================================
   BUTTONS
   ======================================== */

#OPMACardSection #OPMACardMoreButton,
#OPMACardSection #OPMACardHideButton {
  padding: 12px 30px;
  border: 2px solid #002766;
  border-radius: 5px;
  background: transparent;
  color: #002766;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#OPMACardSection #OPMACardMoreButton:hover,
#OPMACardSection #OPMACardHideButton:hover {
  background: #002766;
  color: #ffffff;
}



/* ========================================
   HIDE BUTTON INITIALLY
   ======================================== */

#OPMACardSection #OPMACardHideButton {
  display: none;
}


/* ========================================
   TABLET
   ======================================== */

@media (max-width: 900px) {

  #OPMACardSection .OPMACardGrid {
    grid-template-columns: repeat(2, 1fr);
  }

}


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

@media (max-width: 600px) {

  #OPMACardSection {
    padding: 15px;
  }

  #OPMACardSection .OPMACardGrid {
    grid-template-columns: 1fr;
  }

  #OPMACardSection .OPMACard img {
    height: 210px;
  }

  #OPMACardSection .OPMACardButtons {
    flex-direction: column;
  }

  #OPMACardSection #OPMACardMoreButton,
  #OPMACardSection #OPMACardHideButton {
    width: auto;
  }

}