@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

*{
    top:0;
    bottom:0;
    left:0;
    left: 0;
    margin: 0;
    padding: 0;
}

body{
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
}

button {
    background: #32f4d0;
    color:#292f36;
    border: 0;
    border-radius: 3rem;
    padding: 0.5rem .8rem;
    font-family: 'Montserrat', sans-serif;

}

/* -----------------------------------------------------Header Start---------------------------------------- */
.logo{
    margin: 2rem;
    width: 70px;
}

h1{
    font-family: 'Montserrat', sans-serif;
    /* margin: 1rem; */
    /* text-align: justify; */
    font-size: 6.8vw;
    padding: 2rem 0rem 2rem 0rem;
}

span{
    font-style: oblique;
    color: #5449c2;
}

.disc{
    font-family: 'Montserrat', sans-serif;
    /* margin: 1rem; */
    /* text-align: justify; */
    font-size: 2.2vw;
    padding: 0.4rem;
    padding-bottom: 3rem;
    color: #656565;
}

.input-container {
    display: inline-flex;
    width: 85%; /* set the width of the group */
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 3rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
    background-color: white;
  }
  
  .input-container input {
    flex: 1; /* the input will grow/shrink to fit the container */
    min-width: 50px; /* set a min-width for the input */
    border: 0;
  }
  
  .input-container button {
    background: #32f4d0;
    color:#292f36;
    border: 0;
    border-radius: 3rem;
    padding: 0.5rem 1rem;
  }

  h3{
    font-family: 'Montserrat', sans-serif;
    color:#292f36;
  }

  .disclmr {
    padding: 1rem 2rem 0rem 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size:2.4vw ;
    font-weight:100;
    color:#acacac;
  }
.fphone{
    padding: 2.5rem 0rem 1.4rem 0rem;
    width:40vw;
}

.rewardstht{
margin: auto;
height:2rem;
width:12rem;
padding: 2rem 0rem 1.5rem 0rem;
}

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

/* -----------------------------------------------------Section mainInfo Start------------------------------------------------- */


.disc2{
    font-family: 'Montserrat', sans-serif;
    /* margin: 1rem; */
    /* text-align: justify; */
    font-size: 3.2vw;
    padding: 1.5rem 0.4rem 1.5rem 0.4rem ;
    color: #131415;
}
.disclmr2{
    padding: 0rem 2rem 0rem 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size:3vw ;
    font-weight:50;
    color:#acacac;
    justify-items: center;
}

.MainBox{
    display: grid;
    grid-template-columns: 70px 70px 70px;
    grid-gap:1.5rem;
    padding: 2rem 0rem 2rem 0rem;
    margin: auto;
    width: 70%;

}
.box{
    width: 18vw;
    height:18vw;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 2px 4px 0 rgba(136, 136, 136, 0.5);
  }

  .logo1{
    margin: auto;
    width: 12.5vw;
    height: 12.5vw;
    padding: 0.5rem;   
  }

.fphone1{
    width:40vw;
}
  .whyrecurr{
    margin: auto;
    height:2rem;
    width:11rem;
    padding: 3.5rem 0rem 1.5rem 0rem;
  }


  .disc3{
    font-family: 'Montserrat', sans-serif;
    /* margin: 1rem; */
    /* text-align: justify; */
    font-size: 3.2vw;
    padding: 0rem 2rem 1.5rem 2rem ;
    color: #131415;
}

.disclmr3{
    padding: 0rem 4rem 3.4rem 4rem;
    font-family: 'Montserrat', sans-serif;
    font-size:3vw ;
    font-weight:50;
    color:#acacac;
    /* justify-items: justify; */
    text-align: justify;
}

.notify{
    width:80vw;
}

.discover{
    width:60vw;
}
.whyrecurrdiscvr{
    margin: auto;
    height:2rem;
    width:16rem;
    padding: 4.5rem 0rem 1.5rem 0rem;
  }

.convinientstp{
    width:70vw;
}
.convinientstpultra{
    margin: auto;
    height:2rem;
    width:14rem;
    padding: 4.5rem 0rem 0rem 0rem;
}

/* -----------------------------------------------------Section mainInfo End------------------------------------------------- */

/* -----------------------------------------------------Security Start ------------------------------------------------- */
.rewardbtn{
    margin: auto;
    height:2rem;
    width:15rem;
    padding: 4.5rem 0rem 1.5rem 0rem;
}

.hwitwrkstxt{
    font-family: 'Montserrat', sans-serif;
    /* text-align: justify; */
    font-size: 4vw;
    padding:1rem 0.5rem 0.5rem 0.5rem ;
    color: #131415; 
}
.CashBackPartpic{
    width:75vw;

}
.howitworks{
    padding: 0rem 0rem 3rem 0rem;
    margin: auto;
    width: 100%;
}

.singleBox{
 display: flex;
 margin: 1.2rem;
 padding: 0rem 0rem 0rem 0.34rem;
 flex-direction: row;
}
.numBox{
display: flex;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: #5449c2;
  color: white;
  justify-content: center;
}

.numstp{
    margin: auto;
    width: 50%;
    font-family: 'Montserrat', sans-serif;
    font-size: 3.3vw;
    /* padding: 1.8vw; */
}

.stps{
    display: flex;
    font-family: 'Montserrat', sans-serif;
    /* text-align: justify; */
    font-size: 3.4vw;
    padding:.6rem 0.5rem 0.15rem 0.5rem ;
    color: #131415; 
    text-align: center;
}

.securityPartpic{
    padding:0rem 0rem 0rem 0rem ;
    width:40%;
}

/* -----------------------------------------------------Security End------------------------------------------------- */

/* -----------------------------------------------------Footer Start ------------------------------------------------- */
footer{
    background-color: #292f36;
    padding: 1.5rem 0rem 0rem 0rem;
}
.footernote1{
    font-family: 'Montserrat', sans-serif;
    /* margin: 1rem; */
    /* text-align: justify; */
    font-size: 4.2vw;
    padding: 1.5rem 2.5rem 1.5rem 2.5rem ;
    color: #ffffff;
}
.footernote2{
    font-family: 'Montserrat', sans-serif;
    /* margin: 1rem; */
    /* text-align: justify; */
    font-size: 3.2vw;
    padding: .5rem 2.5rem 1.5rem 2.5rem ;
    color: #aeafb3;
}
.input-containerfooter-of{
    padding: 0.5rem 0rem 2rem 0rem ;
}

.input-container-of {
    display: inline-flex;
    width: 85%; /* set the width of the group */
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 3rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
    background-color: white;
  }
  
  .input-container-of input {
    flex: 1; /* the nput will grow/shrink to fit the container */
    min-width: 50px; /* set a min-width for the input */
    border: 0;
  }
  
  .input-container-of button {
    background: #32f4d0;
    color:#292f36;
    border: 0;
    border-radius: 3rem;
    padding: 0.5rem 1rem;
  }

.h5styles{
        width: 273px;
        height: 19px;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 300;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.04px;
        text-align: justify;
        color: #ffffff;
        padding: 0rem  0rem  0.4rem  0rem;   
}
.cmpnyreg{
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0.5rem  0.5rem  0.5rem  2rem;   
}

.logofoot{
    margin: auto;
    width: 13.5vw;
    height: 12.5vw;
    padding: 0rem  0rem  0.5rem  0rem;   
}

.cmpnyrout{
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0.5rem  0.5rem  0.5rem  0rem;   
}

/* -----------------------------------------------------Footer End ------------------------------------------------- */


/* -----------------------------------------------------Media Queries------------------------------------------------- */
/* -----------------------------------------------------Start------------------------------------------------- */

@media (min-width:961px)  { 
    
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

    *{
        top:0;
        bottom:0;
        left:0;
        left: 0;
        margin: 0;
        padding: 0;
    }
    
    button {
        background: #32f4d0;
        color:#292f36;
        border: 0;
        border-radius: 3rem;
        padding: 0.5rem 1rem;
        font-family: 'Montserrat', sans-serif;
    
    }
    
    /* -----------------------------------------------------Header Start---------------------------------------- */
    .logo{
        display: flex;
        margin: 2rem;
        width: 70px;
        justify-self:flex-start;
        padding: 1rem 0rem 0rem 3rem;
    }
    
    h1{
        font-family: 'Montserrat', sans-serif;
        /* margin: 1rem; */
        /* text-align: justify; */
        font-size: 3vw;
        padding: 2rem 0rem 1rem 0rem;
    }
    br {
        display: none;
    }
    
    span{
        font-style: oblique;
        color: #5449c2;
    }
    
    .disc{
        font-family: 'Montserrat', sans-serif;
        /* margin: 1rem; */
        /* text-align: justify; */
        font-size: 1vw;
        padding:3rem 7rem 3rem 7rem;
        padding-bottom: 3rem;
        color: #656565;
    }
    
    .input-container {
        display: inline-flex;
        width: 45%; /* set the width of the group */
        box-sizing: border-box;
        padding: 0.5rem;
        border-radius: 3rem;
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
        background-color: white;
      }
      
      .input-container input {
        flex: 1; /* the input will grow/shrink to fit the container */
        min-width: 50px; /* set a min-width for the input */
        border: 0;
      }
      
      .input-container button {
        background: #32f4d0;
        color:#292f36;
        border: 0;
        border-radius: 3rem;
        padding: 0.25rem 0.5rem;
      }
    
      h3{
        font-family: 'Montserrat', sans-serif;
        color:#292f36;
        font-size: 1.25vw;
      }
    
      .disclmr {
        padding: 2rem 2rem 2rem 2rem;
        font-family: 'Montserrat', sans-serif;
        font-size:1vw ;
        font-weight:100;
        color:#acacac;
      }
    .fphone{
        padding: 2.5rem 0rem 1.4rem 0rem;
        width:17vw;
    }
    
    .rewardstht{
    margin: auto;
    height:2rem;
    width:100%;
    padding: 2rem 0rem 1.5rem 0rem;
    }
    
    /* -----------------------------------------------------Header End------------------------------------------------- */
    
    /* -----------------------------------------------------Section mainInfo Start------------------------------------------------- */
    
    .mainInfo{
    display: grid;
    grid-template-columns:1fr 1fr;
    }
   .arrangement1{
    padding: 4rem 2rem 4rem 6rem;
    order: 1;
   }
   .arrangement2{
    padding: 4rem 2rem 4rem 2rem;
    order: 2;
   }
   .arrangement3{
    padding: 4rem 2rem 4rem 2rem;
    order: 3; 
    }
    .arrangement4{
    padding: 4rem 6rem 4rem 2rem;
    order: 4;
    }
    
    .arrangement5{
    padding: 4rem 6rem 4rem 6rem;
    order: 6;
    }

    .arrangement6{
     padding: 4rem 2rem 4rem 5rem;   
     order: 5;
    }

    .arrangement7{
        padding: 4rem 2rem 4rem 4rem;   
        order: 7;
    }

    .arrangement8{
        padding: 4rem 6rem 4rem 4rem;
        order: 8;
        
    }

    .arrangement9{
      padding: 4rem 6rem 4rem 4rem;
      order: 10;

    }
    .arrangement10{
        padding: 4rem 2rem 4rem 4rem;   
        order: 9; 
    }
    
    .disc2{
        font-family: 'Montserrat', sans-serif;
        /* margin: 1rem; */
        /* text-align: justify; */
        font-size: 1.5vw;
        padding: 1.5rem 0.4rem 1.5rem 0.4rem ;
        color: #131415;
    }
    .disclmr2{
        padding: 0rem 2rem 0rem 2rem;
        font-family: 'Montserrat', sans-serif;
        font-size:1vw ;
        font-weight:100;
        color:#acacac;
        justify-items: center;
    }
    
    .MainBox{
        display: grid;
        grid-template-columns: 6.5vw 6.5vw 6.5vw ;
        grid-gap: 1rem;
        padding: 2rem 0rem 1rem 6rem;
        margin: auto;
        width: 70%;
    
    }
    .box{
        width: 6vw;
        height:6vw;
        text-align: center;
        border-radius: 10px;
        box-shadow: 0 2px 4px 0 rgba(136, 136, 136, 0.5);
      }
    
      .logo1{
        margin: auto;
        width: 4vw;
        height: 4vw;
        padding: 0.5rem;   
      }
    
    
      .whyrecurr{
        margin: auto;
        height:2rem;
        width:100%;
        padding: 3.5rem 0rem 1.5rem 0rem;
      }
    
    
      .disc3{
        font-family: 'Montserrat', sans-serif;
        /* margin: 1rem; */
        /* text-align: justify; */
        font-size: 1.5vw;
        padding: 0rem 2rem 1.5rem 2rem ;
        color: #131415;
    }
    
    .disclmr3{
        padding: 0rem 4rem 2rem 4rem;
        font-family: 'Montserrat', sans-serif;
        font-size:1vw ;
        font-weight:50;
        color:#acacac;
        /* justify-items: justify; */
        text-align: justify;
    }
    
    .fphone1{
        width:15vw;
    }
    .notify{
        width:30vw;
    }
    
    .discover{
        width:25vw;
    }
    .whyrecurrdiscvr{
        margin: auto;
        height:2rem;
        width:100%;
        padding: 4.5rem 0rem 1.5rem 0rem;
    
      }
    
    .convinientstp{
        width:35vw;
    }
    .rewardbtn{
        margin: auto;
        height:2rem;
        width:100%;
        padding: 4.5rem 0rem 1.5rem 0rem;
    }
    
    /* -----------------------------------------------------Section mainInfo End------------------------------------------------- */
    
    /* -----------------------------------------------------Security Start ------------------------------------------------- */
    .secondarySec{
     display: grid;
     grid-template-columns:1fr 1fr; 
    }
    .CashBackPartpic{
        padding:3rem 0rem 0rem 0rem ;
        width:35vw;
    }
    .secArrangement1{
        order: 1;
        padding: 4rem 2rem 2rem 4rem;   
    }

    .secArrangement2{
        order: 2;
        padding: 4rem 2rem 2rem 4rem;   

    }

    .secArrangement3{
        padding: 0rem 2rem 8rem 4rem;   
        order: 4;
    }

    .secArrangement4{
        padding: 0rem 2rem 8rem 4rem;   
        order: 3;
    }
    .convinientstpultra{
        margin: auto;
        height:2rem;
        width:100%;
        padding: 1rem 0rem 1rem 0rem;
    }
    .hwitwrkstxt{
        font-family: 'Montserrat', sans-serif;
        /* text-align: justify; */
        font-size: 2vw;
        padding:1rem 0.5rem 0.5rem 0.5rem ;
        color: #131415; 
    }
    .howitworks{
        padding: 0rem 0rem 3rem 0rem;
        /* margin: auto; */
        width: 100%;
    }
    
    .singleBox{
     display: flex;
     margin: 1.2rem;
     padding: 0rem 0rem 0rem 0.34rem;
     /* flex-direction: row; */
    }
    .numBox{
      display: flex;
      width: 4vw;
      height: 4vw;
      border-radius: 10px;
      background-color: #5449c2;
      color: white;
      justify-content: center;
    }
    
    .numstp{
        margin: auto;
        width: 10vh;
        font-family: 'Montserrat', sans-serif;
        font-size: 1vw;
    }
    
    .stps{
        font-family: 'Montserrat', sans-serif;
        /* text-align: justify; */
        font-size: 1.16vw;
        padding:0.5rem 0.5rem 0.5rem 0.5rem ;
        color: #131415; 
    }
    
    .securityPartpic{
        padding:3rem 0rem 0rem 0rem ;
        width:18vw;
    }
    
    /* -----------------------------------------------------Security End------------------------------------------------- */
    
    /* -----------------------------------------------------Footer Start ------------------------------------------------- */
    footer{
        padding: 2.5rem 0rem 0rem 0rem;
        background-color: #292f36;
    
    }
    .footerpt1{
        display: grid;
        grid-template-columns: 46vw 48vw;
    }
    .footernote1{
        font-family: 'Montserrat', sans-serif;
        /* margin: 1rem; */
        /* text-align: justify; */
        font-size: 1.8vw;
        /* padding: 1.5rem 2.5rem 1.5rem 2.5rem ; */
        color: #ffffff;
    }
    .footernote2{
        font-family: 'Montserrat', sans-serif;
        /* margin: 1rem; */
        /* text-align: justify; */
        font-size: 1vw;
        padding: .5rem 2.5rem 1.5rem 2.5rem ;
        margin: 0rem 0rem 1rem 0rem;
        color: #aeafb3;
    }
    .input-containerfooter-of{
        padding: 2.5rem 0rem 1.5rem 0rem ;
    }

    .input-container-of {
        display: inline-flex;
        width: 85%; /* set the width of the group */
        box-sizing: border-box;
        padding: 0.5rem;
        border-radius: 3rem;
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
        background-color: white;
      }
      
      .input-container-of input {
        flex: 1; /* the nput will grow/shrink to fit the container */
        min-width: 50px; /* set a min-width for the input */
        border: 0;
      }
      
      .input-container-of button {
        background: #32f4d0;
        color:#292f36;
        border: 0;
        border-radius: 3rem;
        padding: 0.25rem 0.5rem;
      }

    .h5styles{
            width: 273px;
            height: 19px;
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            font-weight: 300;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: 0.04px;
            text-align: justify;
            color: #ffffff;
            padding: 0rem  0rem  0rem  0rem;   
    }

    .cmpnyreg{
        display: flex;
        flex-direction: column ;
        text-align: left;
        padding: 0.5rem  0.5rem  0.5rem  4rem;   
    }
    
    .logofoot{
        margin: auto;
        width: 5vw;
        height: 4vw;
        padding: 0rem  0rem  0.5rem  0rem;   
    }
    .down{
        display: grid;
        grid-template-columns:40vw 15vw 15vw 15vw;
    }
    
    .cmpnyrout{
        display: flex;
        justify-content: space-evenly;
        /* text-align: center; */
        /* padding: 0.5rem  0.5rem  0.5rem  0rem;    */
    }
    
    /* -----------------------------------------------------Footer End ------------------------------------------------- */

}
/* -----------------------------------------------------End------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ */