@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
  width: 100%;
  font-family: "Open Sans", sans-serif;
  overflow-x: hidden;
}

header {
  min-height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
  padding-bottom: 0;
}

/* Background image fix */
header img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

header .absolute.inset-0 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Overlay fix */
.inset-0.absolute {
  position: absolute;
}

/* Top Content - Responsive */
.topContent {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  z-index: 10;
}

#signInBtn {
  background-color: #c1171f;
  color: #ffffff;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  white-space: nowrap;
}

#signInBtn:hover {
  background-color: #a71920;
  cursor: pointer;
}

/* Heading Section */
.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
  z-index: 10;
}

/* Form Section */
.formWithBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 20px auto 0;
  gap: 12px;
  padding: 0 16px;
  z-index: 10;
}

#startBtn {
  background-color: #c1171f;
  color: #fff;
  font-size: 16px;
  border-radius: 6px;
  border: none;
  padding: 16px 22px;
  font-weight: 600;
  cursor: pointer;

  /* IMPORTANT */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: background-color .2s;
}

.startIcon {
  width: 1.2em;   /* icon follows text size */
  height: 1.2em;
  flex-shrink: 0;
  transition: transform .25s ease;
}

#startBtn:hover {
  background-color: #e1252e;
}

/* Fix for very small screens */
@media (max-width: 480px) {
  .topContent {
    padding: 0 12px;
    margin-top: -10px;
  }
  #signInBtn {
    padding: 5px 12px;
    font-size: 12px;
  }
.centerr{
  text-align: center;
}
  #startBtn{
    font-size: 14px;
    padding: 10px 16px;
    width: 100%;
  }

  #startBtn .startIcon {
  width: 16px;   /* keeps it small */
  height: 16px;
}
  
  .heading h1 {
    font-size: 24px !important;
    line-height: 1.2;
  }
  
  .heading h2 {
    font-size: 14px !important;
  }
  
  .formWithBtn {
    width: 95%;
    gap: 10px;
  }
  
  #startBtn {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .relative.w-full {
    width: 100%;
  }
}

/* Extra small screens (under 345px) */
@media (max-width: 345px) {
  header {
    justify-content: flex-start;
    padding-top: 20px;
  }

 
  
  .topContent {
    margin-top: 10px !important;
    padding: 0 10px;
    position: relative;
    top: 0;
  }
  .centerr{
  text-align: center;
}
  
  #signInBtn {
    padding: 4px 10px;
    font-size: 11px;
  }
  
  .heading {
    margin-top: 20px;
  }
  
  .heading h1 {
    font-size: 20px !important;
  }
  
  .heading h2 {
    font-size: 12px !important;
  }
  
  .formWithBtn {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 15px;
  }
  
  .relative {
    width: 100%;
  }
  
  #startBtn {
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }
  
  input {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
  
  label {
    font-size: 12px !important;
    top: 10px !important;
  }
}

/* Mobile Responsive */
@media (min-width: 481px) and (max-width: 640px) {
  .formWithBtn {
    flex-direction: column;
    width: 90%;
    gap: 16px;
  }
  
  .topContent {
    padding: 0 16px;
  }
  .centerr{
  text-align: center;
}
  #startBtn {
    width: 100%;
    text-align: center;
  }
  
  .heading {
    padding: 0 16px;
  }
  
  svg {
    height: 60px;
    width: 60px;
  }
}

/* Tablet Responsive */
@media (min-width: 641px) and (max-width: 1024px) {
  .formWithBtn {
    width: 80%;
  }
  .topContent{
    padding: 0 24px;
  }

  svg {
    height: 100px;
    width: 100px;
  }
  .centerr{
    text-align: center;
  }
}

@media (max-width: 720px) {
  .movies{
    flex-wrap: nowrap;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .formWithBtn {
    width: auto;
  }
  
  
  .topContent {
    padding: 0 48px;
  }
}

/* ===== MOBILE MODE (NO SLIDER) ===== */

@media (max-width: 790px){

  .slider-wrapper{
    overflow: visible;
    padding: 0;
  }
  .centerr{
  text-align: center;
  font-size: 30px;
  margin-top: 50px;
}
.innerFooter{
  margin-top: 20px;
}
  .movies{
    flex-wrap: wrap;
    transform: none !important; /* stop sliding */
    justify-content: center;
  }

  .movie{
    flex: 0 0 calc(33.33% - 16px);
  }

  .nav{
    display: none; /* arrows hide */
  }
}

main {
  min-height: 100vh;
  width: 100%;
  background-color: black;
  position: relative;
  z-index: 1;
}


.forBg {
  position: relative;
  margin-top: -1px; 
  height: 30px;
  background: transparent;
  overflow: visible;
  z-index: 5;
}

.forBg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #922154, #E30A17, #A4245E);
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.forBg::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 20px;
  background: radial-gradient(ellipse, #00aaff, #0066ff, transparent);
  filter: blur(50px);
  border-radius: 50%;
  opacity: 1;
  pointer-events: none;
}

/* ================= SLIDER ================= */

.slider-wrapper{
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* movies row */
.movies{
  display: flex;
  gap: 24px;
  transition: transform 0.6s ease;
}

/* each movie = 5 visible */
.movie{
  flex: 0 0 calc((100% - 96px) / 5);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.movie img{
  width: 100%;
  display: block;
  border-radius: 8px;
}

.movie:hover{
  transform: scale(1.06);
  cursor: pointer;
}

/* ===== RESPONSIVE SLIDER ===== */

/* Desktop → 5 */
.movie{
  flex: 0 0 calc((100% - 96px) / 5);
}

/* <=1200px → 4 movies */
@media (max-width:1200px){
  .movie{
    flex: 0 0 calc((100% - 72px) / 4);
  }
}

/* <=900px → 3 movies */
@media (max-width:900px){
  .movie{
    flex: 0 0 calc((100% - 48px) / 3);
  }
}

/* <=640px → 2 movies */
@media (max-width:640px){
  .movie{
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

/* <=420px → 1 movie */
@media (max-width:420px){
  .movie{
    flex: 0 0 100%;
  }
}

/* NAV BUTTONS */

.nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  border: none;
  color: white;
  font-size: 28px;
  padding: 10px 16px;
  cursor: pointer;
  z-index: 5;
  border-radius: 6px;
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
}

/* LEFT hide */
.prev.hide{
  opacity: 0;
  transform: translate(-20px, -50%);
  pointer-events: none;
}

/* RIGHT hide */
.next.hide{
  opacity: 0;
  transform: translate(20px, -50%);
  pointer-events: none;
}

.prev{ left: 0; }
.next{ right: 0; }



/* Make reason images scale like movie slider */
.reason {
  flex: 0 0 calc((100% - 96px) / 5); /* same as movie default */
}

@media (max-width: 1200px) {
  .reason {
    flex: 0 0 calc((100% - 72px) / 4);
    min-height: auto; /* remove fixed min-height */
    height: auto;     /* let it shrink naturally based on content */
    padding: 15px; 
  }
  .reasons{
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .reason {
    flex: 0 0 calc((100% - 48px) / 3);
    min-height: auto; /* remove fixed min-height */
    height: auto;     /* let it shrink naturally based on content */
    padding: 15px; 
  }
  .reasons{
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .reason {
    min-height: auto; /* remove fixed min-height */
    height: auto;     /* let it shrink naturally based on content */
    padding: 15px;    /* optional: reduce padding for smaller screens */
  }
  .reasons{
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .reason {
    flex: 0 0 100%;
  }
  .reasons{
    flex-direction: column;
  }
}

.reason{
  min-height: 19em;
  position: relative;
  border-radius: 15px;
  padding: 20px 24px 20px 24px;
  box-sizing: content-box;
  background: linear-gradient(to bottom, #1f214f, #1F1221);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.reason h1{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 0.4lh;
}

.reason .text p{
  color: #e1e0eb;
}

/* Large screens - keep absolute */
.reason .pic {
  position: absolute;
  bottom: 10px;
  right: 20px;
  width: 80px; /* example */
}

@media (max-width: 920px) {
  .reason {
    min-height: auto;
    height: auto;
    padding: 15px;
    align-items: flex-start; /* text first, image below */
  }
  .reason .pic {
    position: relative; /* normal flow */
    bottom: auto;
    right: auto;
    align-self: flex-end;
    margin-top: 15px;   /* space between text and image */
    width: 60px;        /* scale image smaller */
    display: block;
  }
}

/* Small screens - below 640px */
@media (max-width: 640px) {
  .reason {
    min-height: auto;
    height: auto;
    padding: 15px;
    align-items: flex-start; /* text first, image below */
  }

  .reason .pic {
    position: relative; /* normal flow */
    bottom: auto;
    right: auto;
    align-self: flex-end;
    margin-top: 15px;   /* space between text and image */
    width: 60px;        /* scale image smaller */
    display: block;
  }
}