/* ==============================================================
! HERO
============================================================== */

.expertise-hero {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==============================================================
! COVER BG (FOR EACH CATEGORY)
============================================================== */

.hero-director{
    background:
        linear-gradient(
            rgba(0,0,0,0.6),
            rgba(0,0,0,0.6)
        ), url("/assets/images/expertise-cover/director.jpg");
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 24%; /* Change this */
}

.hero-cinematographer{
    background:
        linear-gradient(
            rgba(0,0,0,0.6),
            rgba(0,0,0,0.6)
        ), url("/assets/images/expertise-cover/cinematographer.jpg");
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 36%; /* Change this */
}

.hero-editor{
    background:
        linear-gradient(
            rgba(0,0,0,0.6),
            rgba(0,0,0,0.6)
        ), url("/assets/images/expertise-cover/editor.jpg");
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 91%; /* Change this */
}

.hero-colorist{
    background:
        linear-gradient(
            rgba(0,0,0,0.6),
            rgba(0,0,0,0.6)
        ), url("/assets/images/expertise-cover/colorist.jpg");
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 15%; /* Change this */
}

.hero-vfx{
    background:
        linear-gradient(
            rgba(0,0,0,0.6),
            rgba(0,0,0,0.6)
        ), url("/assets/images/expertise-cover/vfx.jpg");
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 24%; /* Change this */
}

/* ==============================================================
! HERO TEXT
============================================================== */

.expertise-text h1 {
    text-align: center;
    color: #fff;
    /* padding: 0px 0px 0px; */
    font-size: 6rem;
    padding: 40px 20px 15px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.expertise-text p {
    margin: 0 auto;
    max-width: 640px;
    text-align: center;
    color: #fff;
    line-height: 1.7;
    padding: 0px 50px 20px;
    font-size: 1rem;
}

/* ========= TABLET ========= */
@media (max-width: 1024px){
    .expertise-text h1 {
        font-size: clamp(3.5rem, 7vw, 4.5rem);
    }

    .expertise-hero {
        height: 30vh;
    }
}

/* ========= PHONE ========= */
@media (max-width: 600px){
    .expertise-text h1 {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }

    .expertise-hero {
        height: 20vh;
    }
}

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

/* Button Container */
.expertise-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  width: 100%;
  /* max-width: 1800px; */
  margin: 0 auto;
}

/* Buttons */
.expertise-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 46px;              /* Fixed height */
  font-size: 1rem;         /* Fixed font size */
  font-weight: 500;
  padding: 0;               /* No padding */
  margin: 0;                /* No gap */

  color: #fff;
  background: #002a66;
  /* border: 1px solid #002a66; */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);

  text-decoration: none;
  text-align: center;
  white-space: nowrap;

  transition: all 0.2s ease;
}

/* Remove double borders */
.expertise-btn:not(:nth-child(1)) {
  border-left: none;
  /* border-top: none; */
}

/* Active Button */
.expertise-btn.active {
    background: #fff;
    color: #002a66;
    border: 2px solid #002a66;
}

/* Hover (Optional) */
.expertise-btn:hover {
  background: #fff;
  color: #002a66;
  border: 2px solid #002a66;
}

/* ========= TABLET ========= */
@media (max-width: 1024px){
    .expertise-btn{
        /* width: 120%; */
        height: 55px;
    }
}

/* ==============================================================
! CONTAINER (FOR WORKS ONLY)
============================================================== */

.expertise-container {
    width: 100%;
    max-width: 1430px;
    margin: 0 auto;
}

/* ==============================================================
! WORKS LIST
============================================================== */

.expertise-list {
    padding: 40px 10px 40px;
}