*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
  }
   .banner{
    height: 100vh;
    width: 100%;
    background-image: url(/assets/img/landing/khelobackground.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
  } 
   .main{
    width: 50%;
    height: 80vh;
    top: 50px;
    margin-bottom: 10%;
    position: relative;
  
  } 
   .text{
    padding: 10px;
    margin: 10px;
  } 
  .text>img{
    width: 100%;
  }
.eighteen{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    } 
     .eighteen>img{
     width: 40%;
    }
    .button{
      position: absolute;
      bottom: 120px;
      left: 0px;
     display: flex;
     justify-content: center;
     align-items: center;
      width: 100%;

      height: auto;
      border: none;
      cursor: pointer;
    }
    .bottom-button{
        display:flex;
        justify-content: space-between;
        padding-bottom : 5px;
    }
    .singlebutton{
        width: 90%;
    }
    @media screen and (max-width:1250px) {
        .button{
          bottom: 25%;
          left: 20px;
          margin-left: 0;
        }
        .main{
          width: 80%;
        }
        .button>a>img{
            width: 90%;
          }
      }
       @media screen and (max-width:900px) {
        .button{
          bottom: 38%;  
         }
         .main{
          width: 90%;
        }
        .button>a>img{
          width: 90%;
        }
      } 
      @media screen and (max-width:800px) {
        .button{
          bottom: 42%; 
           left: 20px;
        }
        .main{
          width: 90%;
        }
         .button>a>img{
          width: 95%;
        } 
      }
      @media screen and (max-width:670px) {
        .main{
          width: 100%;
        }
        .button{
          bottom: 47%;
          width: 35%; 
          left: 36%; 
        }
        .button>a>img{
          width: 80%;
        }
      }
      @media screen and (max-width:549px) {
        .main{
          width: 100%;
        }
        .button{
          bottom: 56%;
          width: 37%;
        }
        .button>a>img{
          width: 80%;
        } 
      }
      @media screen and (max-width:450px) {
        .main{
          width: 100%;
        }
        .button{
          bottom: 66%;
        }
        .button>a>img{
          width: 85%;
        }
      }