.allmovies-head{
  position: relative;
  width: 100%;
  height: clamp(100px, 25vw, 550px); 
  opacity: 98%;
  display: flex;
  flex-direction: column;
  font-size: 60px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  justify-content: flex-end;   /* move content to bottom */
  padding-bottom: clamp(5px, 2.5vw, 50px);       /* spacing from bottom */
}
.allmovies-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
  linear-gradient(
  to bottom,
  rgba(0,0,0,0) 60%,
  rgba(0,0,0,0.7) 80%,
  rgba(0,0,0,1) 100%
  ),
  linear-gradient(
    to right,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0) 8%
  ),
  linear-gradient(
    to left,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0) 8%
  );
  pointer-events: none;
}
.allmovies-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.allmovies-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.allmovies-heading{
    margin-left: clamp(20px, 5vw, 120px);
    font-size: clamp(25px, 3vw, 120px);
    z-index: 10;
}
.allmovies-subheading{
    margin-left: clamp(20px, 5.2vw, 120px);
    font-size: clamp(16px, 1vw, 28px);
    font-weight: 400;
    width: clamp(300px, 80vw, 600px);
    z-index: 10;
}
@media(max-width: 768px){
  .allmovies-head{
  position: relative;
  width: 100%;
  height: clamp(100px, 60vw, 650px); 
  opacity: 98%;
  display: flex;
  flex-direction: column;
  font-size: 60px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  justify-content: flex-end;   /* move content to bottom */
  padding-bottom: clamp(5px, 8vw, 50px);       /* spacing from bottom */
}
  .allmovies-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
  linear-gradient(
  to bottom,
  rgba(0,0,0,0.3) 40%,
  rgba(0,0,0,0.7) 60%,
  rgba(0,0,0,0.9) 80%,
  rgba(0,0,0,1) 100%
  );
  pointer-events: none;
}
.allmovies-heading{
    font-size: clamp(5px, 10vw, 120px);
    text-align: center;
    z-index: 10;
    margin: 0 auto;   /* important */
}
.allmovies-subheading{
    font-size: clamp(5px, 2.2vw, 28px);
    text-align: center;
    font-weight: 400;
    z-index: 10;
    margin: 0 auto;   /* important */
}
}

/* ---------------- CONTAINER (COLUMN) ---------------- */
.allmovies-container {
  display: flex;
  flex-direction: column; 
  gap: clamp(20px, 4vw, 50px);
  padding-top: clamp(20px, 4vw, 50px);
  padding-left: clamp(15px, 10vw, 250px);
  padding-right: clamp(15px, 10vw, 250px);
}

@media(max-width: 786px){
.allmovies-container {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 5vw, 50px);
  padding-top: clamp(8px, 3vw, 50px);
  padding-left: clamp(8px, 5vw, 250px);
  padding-right: clamp(8px, 5vw, 250px);
}
}

/* ---------------- CARD (ROW INSIDE) ---------------- */
.movie-card a {
  display: flex;              /* 👈 row inside */
  flex-direction: row;
  gap: clamp(8px, 2vw, 15px);
  text-decoration: none;
  color: inherit;
  background: #efebeb;
  border-radius: 10px;
  padding: clamp(15px, 2vw, 30px);
  align-items: center;
  transition: transform 0.2s ease;
}

.movie-card a:hover {
  transform: scale(1.02);
}

/* ---------------- IMAGE ---------------- */
.movie-card img {
  width: clamp(130px, 12vw, 250px);
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
}

@media(max-width: 768px){

.movie-card a {
  display: flex;           
  flex-direction: row;
  gap: clamp(8px, 1.5vw, 15px);
  text-decoration: none;
  color: inherit;
  background: #efebeb;
  border-radius: 10px;
  padding: clamp(10px, 1vw, 20px);
  align-items: center;
  transition: transform 0.2s ease;
}
.movie-card img {
  width: clamp(10px, 30vw,200px);
  height: auto;
  border-radius: 8px;   
  flex-shrink: 0;
}
}




/* ---------------- TEXT SIDE ---------------- */
.movie-info {
  display: flex;
  flex-direction: column;
  gap: clamp(1px, 0.5vw, 6px);
}
/* Title */
.movie-info h3 {
  margin: 0;
  font-size: clamp(24px, 2.5vw, 45px);
  color: #000000;
}
/* Meta */
.movie-meta {
  margin-top: clamp(10px, 0vw, 20px);
  font-size: clamp(18px, 5vw, 30px);
  color: #0000008A;
  display: flex;
  gap: clamp(4px, 1vw, 8px);
  flex-wrap:wrap;
  font-size: clamp(10px, 1vw, 900px);
  justify-content: flex-start;
}
.movie-genres{
margin-top: 20px;
font-size:  clamp(10px, 2vw, 600px); 
}
.movie-genres span {
  font-size: clamp(10px, 1.2vw, 600px);   
  color:#131110;
}
.dot{
  width: clamp(3px, 0.3vw, 600px);   
  height: clamp(3px, 0.3vw, 600px);
  background:#a4a29b;
  border-radius:50%;
}

@media(max-width: 768px){
/* ---------------- TEXT SIDE ---------------- */
.movie-info {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.8vw, 6px);
}
/* Title */
.movie-info h3 {
  margin: 0;
  font-size: clamp(3px,5vw,45px);
  color: #000000;
}
/* Meta */
.movie-meta {
  margin-top: clamp(2px, 0.8vw, 5px);
  font-size: clamp(18px, 3.5vw, 30px);
  color: #0000008A;
  display: flex;
  gap: 8px;
  flex-wrap:wrap;
  font-size: clamp(10px, 3vw, 900px);
  justify-content: flex-start;
}
.movie-genres{
margin-top: clamp(2px, 0.8vw, 5px);
}
.movie-genres span {
  font-size: clamp(10px, 3vw, 600px);   
}
.dot{
  width: clamp(3px, 0.3vw, 600px);   
  height: clamp(3px, 0.3vw, 600px);
  background:#a4a29b;
  border-radius:50%;
}

}