/* ----- Variables ----- */
:root {
  --pink: #E37F90;
  --pink-dark: #d06c7c;
  --cream-bg: #FDFAF9;
}

@font-face {
  font-family: 'Remora';
  src: url("../css/fonts/Remora_Sans_W2_Light_2.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Remora Bold';
  src: url("../css/fonts/Remora_Sans_W5_Bold_3.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Silybrown';
  src: url("../css/fonts/Silybrown.otf") format("opentype");
  font-display: swap;
}

body {
  font-family: 'Remora', sans-serif;
  background-color: var(--cream-bg);
  color: #333;
}

/* ----- Section title ----- */
.section-title {
  font-family: 'Remora Bold', sans-serif;
  text-transform: uppercase;
  margin-bottom: 47px;
  margin-top: 175px;
  color: #E37F90;
  -webkit-text-stroke: 2px #E37F90;
  font-weight: 900;
  font-size: 4rem;

     /* soft pastel bubble */

    text-shadow:
    2px 0 0 #fff,
   -2px 0 0 #fff,
    0 2px 0 #fff,
    0 -2px 0 #fff,
    
    2px 2px 0 #fff,
   -2px -2px 0 #fff,
    2px -2px 0 #fff,
   -2px 2px 0 #fff,
  
    4px 4px 0 rgba(227,127,144,0.5),
    0 4px 6px rgba(0,0,0,0.1);
}

@media (max-width : 1117px) {
  .section-title {
    text-transform: uppercase;
    margin-bottom: 34px;
    margin-top: 119px;
  }

  .hiring-img {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .section-title {
    text-transform: uppercase;
    margin-bottom: 34px;
    margin-top: 100px;
    font-size: 2rem;
  }
}

/* ----- Melty shapes ----
.melty-top img,
.melty-bottom img {
  display: block;
  width: 100%;
  height: auto;
}- */

/* ----- Hiring cards grid ----- */
.hiring-card {
  position: relative;
  overflow: hidden;
  font-family: 'Remora', sans-serif;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  margin: 0;
  width: 100%;
  margin-top: 4px;
}

.hiring-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 0;
}

.hiring-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* Image inside card */
.hiring-img {
  width: 45%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}


.hiring-card:hover .hiring-img {
  transform: scale(1.05);
}

/* Overlay for title + button */
.hiring-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none; 
}

.hiring-overlay h3 {
  color: var(--pink);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3rem;
  text-shadow:
    
     2px  0   0 #fff,
    -2px  0   0 #fff,
     0   2px  0 #fff,
     0  -2px  0 #fff,
    
     2px  2px  0 #fff,
    -2px -2px  0 #fff,
     2px -2px  0 #fff,
    -2px  2px  0 #fff,
    
     4px  4px  0 rgba(227,127,144,0.5),
   
     0    4px  6px rgba(0,0,0,0.1);
}

.postuler-btn {
  pointer-events: auto;
  background-color: var(--pink);
  color: #fff;
  padding: 0.6rem 1.5rem;
  text-transform: uppercase;
  border: none;
  border-radius: 2rem;
  transition: background 0.3s ease;
}

.postuler-btn:hover {
  background-color: var(--pink-dark);
}

.hiring-section .row.justify-content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 45px;
}


.hiring-card {
  max-width: 600px;    
  width: 100%;
  margin: 2rem 0;      
}


.hiring-img {
  width: 100% !important;
  height: auto;
  object-fit: cover;
}


.melty-top img {
  margin-bottom: -2px; 
}
.melty-bottom img {
  margin-top: -2px;    
}