/* Gerneral Rules ----------------------------------- */

body {
  background-color: #17082a;
  margin: 0px;
}

a:link {
  text-decoration: none;
  /* So no link underline  */
}

:root {
  font-family: "Actor", sans-serif;
}

/* a:hover{
  background-color: #ccbcf3;
} */

/* -------------------------------------End of General Rules */

/* Home Header ST------------------------------- */

.header-img {
  width: 100%;
  height: auto;
  border-radius: 12vw;
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: -1.5vw;
  z-index: -2000;
}

.Gradient_Rect {
  width: 100%;
  height: 104vw;
  position: absolute;
  top: 50vw;
  background: linear-gradient(180deg, rgba(23, 8, 42, 0) 0%, #17082a 100%);
  z-index: -1999;
}

.Header-Spacebox {
  height: 45vw;
  width: 100%;
  margin: 0vw;
  padding: 0vw;
}

.Header-Home {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 105vw;
  margin: 0vw;
  padding: 0vw 10vw;
}

/* Movie Name */
.Header-Home > h1 {
  font-size: 11vw;
  color: #ffffff;
  text-align: left;
  margin: 3vw 0vw;
  padding: 0vw;

  letter-spacing: 0.3vw;
  font-style: normal;
  font-weight: normal;
}

/* Movie Calsification */
.Header-Home > h2 {
  font-size: 5.5vw;
  color: #ffffff;
  opacity: 0.5;
  text-align: left;
  margin: 3vw 0vw;
  padding: 0px;

  font-style: normal;
  font-weight: normal;
  /* line-height: 25px; */
  letter-spacing: 0.38px;
}

/* Description Button */
.Header-Home > a {
  width: 100%;
  height: 15%;
  background-color: #6644b8;
  color: #ffffff;
  border-radius: 5vw;
  text-align: center;
  font-size: 6vw;
  margin: 5vw 0vw 0vw 0vw;
  line-height: 16vw;
  z-index: 500;

  letter-spacing: 0.38px;
  font-style: normal;
  font-weight: normal;
}

.Header-Home > a:hover {
  background-color: #8868d3;
  cursor: pointer;
}

.Header-Home > a:active {
  background-color: #a68ce4;
}

/* -------------------------------Home Header End */

/* Reaction Section St --------------------------------- */

.reaction-section {
  display: flex;
  justify-content: space-between;
  padding: 7vw 10vw;
  margin: 0px;
}

.reaction-section > a {
  font-size: 6vw;
  width: 24%;
  height: 19vw;
  background-color: #210f37;
  border-radius: 6vw;
  text-align: center;
  line-height: 20vw;
}

.reaction-section > a:hover {
  background-color: #3d245c;
  cursor: pointer;
}

.reaction-section > a:active {
  background-color: #593980;
}

.Download_icon,
.Share_icon {
  color: #ffffff;
}

.Love_icon {
  color: #a73a7b;
}

/* -----------------------------------End of Reaction Section */

/* St of Rating Box ----------------------------------------- */

.Rating-Box {
  background-color: #210f37;
  border-radius: 6vw;
  height: 36vw;
  margin: 0vw 4vw;
  padding: 8vw;

  font-style: normal;
  letter-spacing: 0.38px;
}

.Top_Rating {
  display: flex;
  justify-content: space-between;
  margin: 0vw 0vw 5vw 0vw;
}

.Sub_Rating {
  display: flex;
  justify-content: space-between;
  margin: 4vw 0vw;
}

.Top_Rating_Stars {
  color: #f79e44;
  font-size: 6vw;
  display: flex;
  justify-content: space-between;
  width: 60%;
}

.Box_star:hover {
  font-size: 6.5vw;
  color: #eba967;
  /* text-shadow:2px 2px #805dac; */
}

.Box_star:active {
  font-size: 6vw;
  color: #b86717;
  /* text-shadow:none; */
}

/* .Mask_Rec{
  background-color:#815325;
  position: absolute;
  top:12vw;
  left: 30vw;
  height: 15vw;
  width: 30vw;

} */

.Top_Rating_Value {
  color: #f79e44;
  font-size: 6vw;
  margin: 0vw;
}

.Sub_Rating_Subject {
  color: #ffffff;
  opacity: 0.7;
  font-size: 5vw;
  margin: 0vw;
}

.Sub_Rating_Value {
  color: #ffffff;
  font-size: 5vw;
  margin: 0vw;
}

/* -----------------------------------------------End of Rating Box  */

/* Start of Location& Time Box ----------------------------------------- */

.Location-Time_Box {
  background-color: #210f37;
  border-radius: 6vw;
  height: 50vw;
  margin: 4vw 4vw;
  padding: 8vw;
  font-style: normal;
  letter-spacing: 0.38px;
  font-weight: normal;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
}

.Location-Time_Box_Icon {
  color: #f79e44;
  font-size: 6vw;
  margin: 0vw 4vw 5vw 0vw;
}

.Location-Time_Box_Subject {
  color: #ffffff;
  opacity: 0.7;
  font-size: 5vw;
  margin: 0vw 0vw 4vw 0vw;
  width: 84%;
  text-align: left;
}

/* -------------------------------------------------------End of Location& Time Box */

/* Start of Responsive for IPAD width:600px ---------------------------------------*/
@media (min-width: 600px) and (max-width: 999px) {
  .header-img{
    top:-28vw;
  }

  .Gradient_Rect{
    top:20vw;
  }
  
  
  .Header-Spacebox {
    height: 0;
  }

  .Header-Home {
    height: 101vw;
  }
}
/* -----------------------------------End of  Responsive Deisgn for IPAD width:768px -*/

/* Start of Responsive for Desktop:1000px ---------------------------------------*/

@media (min-width: 1000px) {
  .header-img {
    top: -55vw;
  }

  .Gradient_Rect {
    top: -5vw;
  }

  .Header-Spacebox {
    height: 0vw;
  }

  .Header-Home {
    height: 40vw;
  }

  .Header-Home > h1 {
    font-size: 7vw;
  }

  .Header-Home > h2 {
    font-size: 4.5vw;
  }

  .Header-Home > a {
    width: 36%;
    height: 8vw;
    border-radius: 2vw;
    font-size: 3vw;
    line-height: 8vw;
  }

  .reaction-section {
    justify-content: flex-start;
    padding: 5vw 10vw;
  }

  .reaction-section > a {
    width: 13%;
    height: 10vw;
    font-size: 4vw;
    border-radius: 3vw;
    line-height: 10vw;
    margin: 0vw 2vw 0vw 0vw;
  }

  .Rating-Box {
    border-radius: 4vw;
    height: 19vw;
    padding: 4vw;
    width: 36vw;
    float: left;
  }

  .Top_Rating {
    margin: 0vw 0vw 2vw 0vw;
  }

  .Top_Rating_Stars {
    font-size: 4vw;
    width: 65%;
  }

  .Box_star:hover {
    font-size: 4.5vw;
  }

  .Top_Rating_Value {
    font-size: 4vw;
  }

  .Sub_Rating {
    margin: 1vw 0vw;
  }

  .Sub_Rating_Value {
    font-size: 3vw;
  }

  .Sub_Rating_Subject {
    font-size: 3vw;
  }

  .Location-Time_Box {
    border-radius: 4vw;
    height: 19vw;
    margin: 0vw 4vw;
    padding: 4vw;
  }

  .Location-Time_Box_Icon {
    font-size: 4vw;
    margin: 0vw 4vw 1.5vw 0vw;
  }

  .Location-Time_Box_Subject {
    font-size: 3vw;
    margin: 0vw 0vw 0vw 0vw;
    width: 60%;
    text-align: left;
  }
}

/* -----------------------------------End of  Responsive Deisgn for Desktop:1000px -*/