* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
  }
  body {
    background-color: rgb(19, 2, 23);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  #navbar {
    /* border:2px solid rgb(216, 16, 16); */
    background-color: rgb(19, 2, 23);
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 90px;
    width: 1374px;
   
  }
  .logo img {
    width: 120px;
    border-radius: 7px;
  }
  
  .navbar {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  .navbar ul {
    width: 100%;
    display: flex;
  }
  
  .navbar ul li a {
    text-decoration: none;
    color: white;
    padding: 8px 15px;
    width: 100%;
  }
  
  .navbar ul li {
    list-style: none;
  }
  
  #search {
    width: 330px;
    height: 30px;
    background-color: rgba(255, 0, 0, 0);
    border: 1px solid white;
    text-align: center;
    color: white;
  }
  
  /* button{
      background-color: rgb(11, 11, 11);
      color: rgb(255, 252, 252);
      font-size: 16px;
      border-radius: 9px;
      padding: 6px 34px;
      cursor: pointer;
      border: 1px solid white;
      
    } */
  .loginbtn {
    height: 40px;
    border: 1px solid white;
    border-radius: 7px;
    background-color: rgba(47, 1, 1, 0);
    color: white;
    padding: 6px 15px;
  }
  .loginbtn:hover {
    background-color: rgb(149, 93, 206);
  }
  
  .loginbtn>a{
    color: aliceblue;
      text-decoration: none;
    
  }
  
  
  .plan {
    height: 40px;
    border: 1px solid white;
    background-color: rgb(149, 93, 206);
    color: rgb(16, 15, 15);
    /* font-size: 16px; */
    border-radius: 9px;
    padding: 6px 15px;
    width: 25%;
  }
  .plan:hover {
    background-color: rgb(175, 163, 163);
  }
  .parent {
    /* border: 1px solid red; */
    display: flex;
    gap: 15px;
    margin-left: 100px;
  }
  
  li>a:hover {
    box-shadow: 1px 1px 10px rgb(149, 79, 169);
    border-bottom: 2px solid white;
    width: 100%;
  }








  #first{
    /* border: 2px solid rgb(221, 3, 3); */
    width: 100%;
    background-color: rgb(92, 18, 161);
    position: relative;
    top: 100px;
    text-align: center;

  }






  .slide {
    position: relative;
    top: 100px;
    margin-left: 125px;
    /* border: 2px solid white; */
    height: 500px;
  }
  .slide > img {
    z-index: -1;
  }
  /* #watch {
    z-index: 1;
    margin-top: -900px;
  } */
  
  #previous {
    color: rgb(0, 0, 0);
    font-size: 2rem;
  }
  #previous:hover {
    box-shadow: 1px 1px 10px rgb(238, 234, 239);
  }
  #next {
    color: rgb(9, 9, 9);
    font-size: 2rem;
  }
  #next:hover {
    box-shadow: 1px 1px 10px rgb(238, 234, 239);
  }





  #live {
    margin: 50px 100px 30px 50px;
    color: antiquewhite;
    
  }
  .live {
    /* border: 1px solid white; */
    display: grid;
    padding: 20px;
    justify-content: space-between;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
      rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
     
  }
  .live > div >img{
    border-radius: 7px;
    width: 310px;
    
  }

  .live > div >h4{
    color: aliceblue;
  }
  
  .live > div {
    transition: all 0.5s;
  }
  .live > div:hover {
    transform: scaleX(1.1);
    z-index: 2;
  }





  #second{
    /* border: 2px solid rgb(221, 3, 3); */
    width: 100%;
    background-color: rgb(19, 2, 23);
    /* position: relative; */
    top: 100px;
    text-align: center;
    margin-top: 10px;
    

  }




  #Headlines{
    margin: 30px 100px 30px 50px;
    color: antiquewhite;
    
  }
  .Headlines{
    /* border: 1px solid white; */
    display: grid;
    padding: 20px;
    justify-content: space-between;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
      rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
     
  }
  .Headlines > div >img{
    border-radius: 7px;
    width: 310px;
    
  }

  .Headlines> div >h4{
    color: aliceblue;
  }
  
  .Headlines > div {
    transition: all 0.5s;
  }
  .Headlines > div:hover {
    transform: scaleX(1.1);
    z-index: 2;
  }




  #T20{
    margin: 30px 100px 20px 50px;
    color: antiquewhite;
    
  }
  .T20{
    /* border: 1px solid white; */
    display: grid;
    padding: 20px;
    justify-content: space-between;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
      rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
     
  }
  .T20 > div >img{
    border-radius: 7px;
    width: 310px;
    
  }

  .T20> div >h4{
    color: aliceblue;
  }
  
  .T20 > div {
    transition: all 0.5s;
  }
  .T20 > div:hover {
    transform: scaleX(1.1);
    z-index: 2;
  }





  #delhi{
    margin: 30px 100px 20px 50px;
    color: antiquewhite;
    
  }
  .delhi{
    /* border: 1px solid white; */
    display: grid;
    padding: 20px;
    justify-content: space-between;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
      rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
     
  }
  .delhi > div >img{
    border-radius: 7px;
    width: 310px;
    
  }

  .delhi> div >h4{
    color: aliceblue;
  }
  
  .delhi > div {
    transition: all 0.5s;
  }
  .delhi > div:hover {
    transform: scaleX(1.1);
    z-index: 2;
  }





  #third{
    /* border: 2px solid rgb(221, 3, 3); */
    width: 100%;
    background-color: rgb(19, 2, 23);
    /* position: relative; */
    top: 100px;
    text-align: center;
    margin-top: 10px;
    

  }











  
  #covid{
    margin: 30px 100px 20px 50px;
    color: antiquewhite;
    
  }
  .covid{
    /* border: 1px solid white; */
    display: grid;
    padding: 20px;
    justify-content: space-between;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
      rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
     
  }
  .covid > div >img{
    border-radius: 7px;
    width: 310px;
    
  }

  .covid> div >h4{
    color: aliceblue;
  }
  
  .covid > div {
    transition: all 0.5s;
  }
  .covid > div:hover {
    transform: scaleX(1.1);
    z-index: 2;
  }



  #editor{
    margin: 30px 100px 20px 50px;
    color: antiquewhite;
    
  }
  .editor{
    /* border: 1px solid white; */
    display: grid;
    padding: 20px;
    justify-content: space-between;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
      rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
     
  }
  .editor > div >img{
    border-radius: 7px;
    width: 310px;
    
  }

  .editor > div >h4{
    color: aliceblue;
  }
  
  .editor > div {
    transition: all 0.5s;
  }
  .editor > div:hover {
    transform: scaleX(1.1);
    z-index: 2;
  }




  #fourth{
    /* border: 2px solid rgb(221, 3, 3); */
    width: 100%;
    background-color: rgb(19, 2, 23);
    /* position: relative; */
    top: 100px;
    text-align: center;
    margin-top: 10px;
    

  }





  #must {
    margin: 50px 100px 0px 50px;
    color: antiquewhite;
  }
  .must {
    /* border: 1px solid white; */
    display: grid;
    padding: 30px;
    justify-content: space-between;
    grid-template-columns: repeat(10, 1fr);
    /* gap: 20px; */
    
  }
  
  .must img {
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
      rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }
  .must >div >h4{
    color: aliceblue;
  }




  hr{
    color: white;
    opacity: 1;
    border-top: .5px solid rgb(6, 6, 6);
    /* width: 90%; */
    margin:20px auto;
  }




  #parent {
    display: flex;
    border:0px solid red;
    color: white;
    justify-content: space-between;
    margin: 40px 0px;
  }
  
  #parent > div:nth-child(1) {
    border:0px solid blue;
    display: flex;
    padding: 20px;
    width: 33%;
    justify-content: space-between;
  
  }
  
  #parent > div:nth-child(2) {
    border: 0px solid green;
    display: flex;
    padding: 20px;
    width: 28%;
    justify-content: space-between;
  
  }
  #parent > div:nth-child(1) img {
    height:35px;
  }
  
  #parent > div:nth-child(2) img {
    height: 30px;
  }
  
  #foot2{
    display: flex;
    gap: 20px;
    /* justify-content: space-between; */
    margin-left: 20px;
  }
  
  #foot2 > a {
  color: aliceblue;
  text-decoration: none;
  }
  
  #foot2 >span{
    color: aliceblue;
  }
  
  #foot2 >a:hover{
    color: rgb(134, 15, 147);
  }
  #foot3{
    display: flex;
    justify-content: space-around;
  }
  
  h6{
    color: aliceblue;
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  #foot3{
    /* border: 1px solid white; */
    margin: 50px 100px 0px 50px;
  }
  #foot3>div>p{
    color: rgb(127, 128, 130);
    margin-bottom: 1rem;
  }
  
  #foot3>div>p:hover{
    color: rgb(134, 15, 147);
    cursor: pointer;
  }
  
  #foot4{
    /* border: 1px solid white; */
    margin: 50px 100px 50px 50px;
  }
  #foot4>p{
    color: rgb(127, 128, 130);
  }