*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: black;
    font-family: Arial, sans-serif;
}

header{
    position: fixed;
    top: 0;           
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    z-index: 1000;       
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}

.left-header{
    display: flex;
    align-items: center;
    gap: 30px;
}

.left-header img{
    width: 120px;
}

header ul{
    display: flex;
    gap: 20px;
    list-style: none;
}

header a{
    text-decoration: none;
    color: white;
    font-size: 14px;
}

.right-header{
    display: flex;
    gap: 20px;
    font-size: 20px;
}

/* HERO SECTION */
.main-hero{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Background Video */
.bg-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Dark Overlay */
.main-hero::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, black 20%, transparent 70%);
    top: 0;
    left: 0;
    z-index: -1;
}

.hero{
    padding-top: 80px;  /* height of header */
}
/* Hero Content */
.upper-hero{
    position: absolute;
    top: 35%;
    left: 60px;
    color: white;
    max-width: 500px;
}

.upper-hero h1{
    font-size: 60px;
    color: red;
}

.upper-hero p{
    margin: 20px 0;
    line-height: 1.6;
}

/* Buttons */
.btn{
    padding: 10px 25px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 15px;
}

.primary-btn{
    background-color: white;
    color: black;
    font-weight: bold;
}

.info-btn{
    background-color: rgba(255,255,255,0.3);
    color: white;
}
.main-hero>video{
    width: 100%;
    top: 0px;
}
.scroll-section{
  height: 300px;
  width: 100%;
 
}
.scroll-section h1{
color: white;
}

.scroll-mian{
  height: 250px;
  width: 100%;

  overflow-x: scroll;
  
 display: flex;
 align-items: center;
 gap: 20px;
 scrollbar-width: none;

}
.box{
  width: 250px;
  height: 150px;
  background-color:red;
   flex-shrink: 0;
}
.box1{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABYWfklg5D5btQoekHBjGHSFXDW_EezXrT97RnSaEwirkVnCt91QaQlcPWCxtfkSrW04hOcHguRrAMgyKTJzs2_PKkFkbs60DHC4.webp?r=05f);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}
.box2{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABTk_B0l_BvDJ7CQuWOAax9ZKSAe65vFGUMjAee8pcvuYXDFDvcnFaF8nOEuwxBg-TFKzHTqhdD3D7zlMsXSpA_BQTHf-ouBVNdwJIJvNQzUGje4WVrnptKL5Ywqu9hV7pg3A.webp?r=f34);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}
.box3{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABUWVF3ygMbBOZVkHcWyoVeNIuiag2c7kN7Vwlq6MqimdeYIdheTG7QlcRFQnAoqn_bTNsV4LSEYUdmtkIF-xf8gEgVBwC-ZKGUdcrhIvxdMCaOtEqdp51EVuSP8g8QXO7uLO.webp?r=4ab);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}
.box4{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABVbXUoTNkiWeGLsVtY9HIcuwl1a3-qGoR3UlqNqTqNaSBIYjd0DYeSO0mJcKaiMaH4AYtFRuqnHeuwcxSB3sofkfoh_zn_c9A80.webp?r=0e8);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}
.box5{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABc207nlnlHas2ih2KCtmvfXI7r25QFfoZ3iiLd3EEskxt_aOnRK6Le24iHHZSgtJ1xZWjCVjR3x6X6DK1sp7UFSY79GreZAZF6k.webp?r=73b);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}
.box6{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABZX1-tKR19w5uG9QJmMIEHLdRTGFMnuU4D62yW1VO261bWkrL-4tZekZL9QW8oKRMBxavV8n8e3kABEDKqNplG_nDAOF9ayKvIw.webp?r=18c);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}
.box7{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABXMlNt8lRlEH5nkoYUHkzaYFsKJJvQq-3wQ4-DyYWQmKlxu9qrynyD5cNZEHPowiQL9IPEPbTSBM9B-id8nR8QPVfL1P_CQjPOqe5ZsDbekwH5AVJbhS3v4gSBXhZb4qdcE6.webp?r=e8a);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}
.box8{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABTJf3e14TtZ2Z3216UaphDq5nf1SaFyC-0R59wDCSyGdNROqYPTHg8g8SU0kbcn61BMumEkghBN8r11S6_bhQvNJ4oQD4oECM-M.webp?r=e5d);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}
.box9{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABd-hr2-TdXUEamf_D6vpIxJwKZnueEgjHxa05fdGIYTOXwYvXtkrUhfvtySeRKLFhR7MDZG5cNAtmb52qROa-ZKOftFckYIuFKo.webp?r=4a4);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}
.box10{
  width: 250px;
  height: 270px;
  background-color:red;
  background-image: url(https://occ-0-4110-2186.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABcaxAOO875GJCdVuF0m1TZ3t7bpSuHTJByPn3R_IUKqnTVM3S9XmcC4-g-Ep1TblyvtA-xEjnx4TKXkxqIX8uBSLvyp-xQUUyfntLLUhwqlyTdsAomLuue-Df9gov2xymJYy.webp?r=62a);
  background-repeat: no-repeat;
  background-size: cover;
   flex-shrink: 0;
}