body{
    /* overflow: hidden; */
    margin:0%;
    padding:0%;
    /* background-color: rgb(44, 19, 56); ; */
}
#top_container{

/* position: relative; */
text-align: center;

margin-top: -65px;
height: 50%;


}
#top_container>h1{
   position: absolute;
   top:200px;
    left:19%;
   font-family: "GT Haptik Medium", sans-serif;;
   font-size:54px ;
   color:white;
   filter:grayscale(5%);
   
   font-weight: 400;
   line-height: 54px;
   max-width: 700px;
   
}
#top_container>h1>em{
   color: #e57cd8;
}
#top_container>img{
  
   width:100%;
   height:auto;
   
  
}
#div_a{
    
     position:sticky; 
     top:80px;
  display: flex; ;
 width:100%;
margin-top: 0px;
 
}
#a1{
    background-color: rgb(44, 19, 56);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: default;
    text-decoration: none;;
    color: #FFF3ED;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    min-width: 280px;
    padding: 15px 17.5px;
    
}
 
#a2{
    background-color: #fff3ed;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: default;
    color: #2c1338;
    border-right: 1px solid rgba(86,66,96,0.1);
    text-decoration: none;;
   
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    min-width: 280px;
    padding: 15px 17.5px;
}
#a3{
    background-color: #fff3ed;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: default;
    color: #2c1338;
    border-right: 1px solid rgba(86,66,96,0.1);
    text-decoration: none;;
   
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    min-width: 280px;
    padding: 15px 17.5px;
}
#a4{
    background-color: #fff3ed;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: default;
    color: #2c1338;
    border-right: 1px solid rgba(86,66,96,0.1);
    text-decoration: none;;
    
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    min-width: 280px;
    padding: 15px 17.5px;
}
/* a{
    text-decoration: none;;
    color: #FFF3ED;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    min-width: 280px;
    padding: 15px 17.5px;
} */
#time_tracking{
    /*  /* IE 9 */
    background-color: rgb(44, 19, 56); 
    margin-top: -31px;
    text-align: center;
   
}
#time_tracking>h2{
    padding-top: 80px;
    font-family: "GT Haptik Medium", sans-serif;;
    font-size: 38px;
    line-height: 48px;
    color:#e57cd8;
    font-weight: 400;
    
}
#time_tracking>p{
    font-weight: 400;
    font-size: 16px;
    font-family:Inter, sans-serif; ;
    line-height:24px ;
    color:#fce5d8;
    padding-bottom: 160px;;
   
}
#track_img{
  
   /* z-index:- 1; */
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%); */
    /* border-bottom:100px solid red ; */
       /* transform: skewY(5deg)  ;
    transform-origin: top left;    */
   
  
    display:grid;
    grid-template-columns: repeat(2,1fr);
    height:2000px;
    /* border-bottom: 100px solid white transparent; */
    
}
#track_img>div>h4{
  text-align: left;
  margin-left: 60px;
  font-family: "GT Haptik Medium", sans-serif;
  font-size: 24px;
  font-weight:400 ;
  line-height:32px ;
  color:#e57cd8 ;
}
#track_img>div>p{
    text-align: left;
  margin-left: 60px;
 
  font-family: "GT Haptik Medium", sans-serif;
  font-size: 20px;
  font-weight:400 ;
  line-height:24px ;
  color:#fce5d8;
  max-width:600px;
}
img{
    width:80%;
}
#track_1{
  
   
   margin-bottom: 20px;;
   
}

#track_1>p{
margin-bottom: 0px;
}




#app{
  
  /* position: absolute; */
   
   
   transform: skewY(5deg);
   transform-origin: top left;
    /* border-top: 150px solid blue;; */
    display: flex;;
    background-color: #FCE5D8;
    margin-top: -110px;;
}

#app>div:nth-child(1){
    transform: skewY(-5deg);
    transform-origin: top left;
    margin-top: 110px;
    text-align: left;
    margin-left: 70px;;
}
 #app>div:nth-child(1)>h2{
    font-size:38px ;
    font-family: "GT Haptik Medium", sans-serif;;
    font-weight:400 ;
    color:#2c1338
    ;
    line-height:48px ;
 }
 #app>div:nth-child(1)>p{
    font-size:18px ;
    font-family: "GT Haptik Medium", sans-serif;;
    font-weight:400 ;
    color:#2c1338
    ;
    line-height:24px ;
    max-width: 700px;;
    margin-bottom: 60px;
 }
 #app>div:nth-child(1)>a{
    font-family: "GT Haptik Medium", sans-serif;
    font-size: 1rem;
    padding: 14px 35px;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 26px;
    border: 0px;
    cursor: pointer;
    transition: background-color 150ms linear 0s, color 150ms linear 0s;
    background-color: rgb(44, 19, 56);
    color: rgb(255, 243, 237);
    
 }
#app>div:nth-child(2){
    transform: skewY(-5deg);
    transform-origin: top left;
    width:35%
}
#reporting{
    text-align: center;
    width:100%;;
    background-color: #2C1338;
    margin-top: -35px;;
}
#reporting>h2{
font-size: 38px;
font-family: "GT Haptik Medium", sans-serif;;
font-weight: 400;
line-height: 48px;
color:#e57cd8;
padding-top: 150px;
}
#reporting>p{
    font-size: 18px;
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 24px;
    color:#fce5d8
}
#reporting>div{
    margin-top: 100px;;
    display: grid;
    grid-template-columns: repeat(2,1fr);
  
    width:100%; 
}

#reporting>div>div>img{
    width:65%
}
#reporting>div>div>h4{
   font-size: 24px;
   font-family: "GT Haptik Medium", sans-serif;;
   font-weight: 400;
   line-height: 32px;;
   color:#e57cd8
  
}
#reporting>div>div>p{
    font-size: 15px;
   font-family:Inter, sans-serif;
   font-weight: 400;
   line-height: 22px;;
   color:#fce5d8;
   max-width: 400px;
   text-align: center;
   margin-left: 100px;
   padding-bottom: 50px;
}
#user{
   
    width:100%;
    background-color: #412A4C;
    margin-top: -33px;;
    text-align: center;
    padding-bottom: 100px;;
}
#user>h2{
    font-size: 38px;
    font-family: "GT Haptik Medium", sans-serif;;
    font-weight: 400;
    line-height: 48px;
    color: #e57cd8;
  padding-top: 40px;
}
#user>p{
    font-size:20px ;
    font-family:Inter, sans-serif; ;
    font-weight:400 ;
    line-height:30px ;
    color:#fce5d8 ;
    padding-bottom: 110px;
}

#user_img{
    width:90%;
    background-color: #2C1338;
    display: flex;;
   margin-left: 65px;
}

#user_img>div>img{
    width:85%;
    margin-left: 60px;
    
}
#user_img>div:nth-child(1)>h3{
    font-size: 32px;
    font-family: "GT Haptik Medium", sans-serif;;
    font-weight: 400;
    line-height: 42px;;
    color:#e57cd8;
    max-width: 700px;
}
#user_img>div:nth-child(1)>p{
    font-size: 16px;
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 24px;;
    color:#fce5d8;
   padding-right: 45px;
}
#user_img>div:nth-child(1){
    padding-left: 80px;
    padding-top: 80px;
}
#user_img>div:nth-child(1)>a{
   
    margin-right: 72%;
    display: flex;
}
#user_img>div:nth-child(1)>a>div{
    width:0;
    height:0;
    border-top:4px solid transparent;
    border-left: 7px solid white;
    border-bottom:4px solid transparent ;
     margin-top: 7px;
    margin-left: 10px; 
   
}

#case{
  
    width:100%;
    display: flex;;
    margin-top: 40px;
   
}
#case>div{
  
    background-color: #FCE5D8;
    width:24%;
    margin:0px 58.5px;
    height:180px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#case>div>p{
    font-family:Inter, sans-serif; ;
    font-size:15px ;
    font-weight:400 ;
    color:#2c1338;
    line-height:24px ;
    padding:10px 20px;
   
}
#case>div>a{
    font-family:"GT Haptik Medium", sans-serif;
    font-size:15px ;
    font-weight:400 ;
    color:#e57cd8;
    line-height:24px ;
  
}
#last{
   display: flex; 
    background-color:#2C1338;
    padding-left: 100px; 

   

}


#last_1{
  
    flex-direction: row;
    background-color: #412A4C;;
    margin-top: 200px;
    width:60%;
    height: 500px;;
  
}
#last_1>div:nth-child(1)>h2{
    font-size: 38px;
    font-family: "GT Haptik Medium", sans-serif;;
    color: #fce5d8;
    font-weight: 400;
    line-height: 48px;
    margin-left: 100px;
    margin-bottom: 10px;
    margin-top: 20px;
}
#last_1>div:nth-child(1){
   
    text-align: left;
    padding-right: 50px;
    margin-bottom: 40px;
}
#last_1>div:nth-child(1)>p{
    font-size: 16px;
    font-family:Inter, sans-serif;;
    color:#fce5d8;
    font-weight: 400;
    line-height: 24px;
    max-width: 400px;
    margin-left: 50px;
}
#last_1>div:nth-child(1)>div>button{
    margin-right: 20px;
    padding-left: 10px;
    margin-top: 30px;
    width: 100%;
    -webkit-box-pack: center;
    justify-content: center;
}
#btn_g{
    font-family: "GT Haptik Medium", sans-serif;
  font-size: smaller;
  background: white;
  border: none;
  color: rgb(44, 19, 56);
  width: 286px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 52px;
  cursor: pointer;
  border-radius: 50px;
}
#btn_a{
    font-family: "GT Haptik Medium", sans-serif;
    font-size: smaller;
    background: white;
    border: none;
    color: rgb(44, 19, 56);
    /* width: 216px; */
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 52px;
    cursor: pointer;
    border-radius: 50px;
}
#btn_a>svg{
    width: 40px;
}
#last_1>div:nth-child(2)>button{
    border-radius: 25px;
    width:73%;
    margin-right: -15px;

}
#last_1>div:nth-child(2)>p{
    max-width: 450px;
    margin-left: 50px;
}
#last_1>div>button>svg{
    width:40px;
   
}
#last_1>div>div{
    display: flex;
   
    margin-left: 50px;
}
#last_1>div>div>button>img{
   
    width:15%;
    position: relative;;
    overflow: hidden;
}
/* #last_1>div>div>button:nth-child(1){
    border-radius: 25px;;
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
    height: 52px;
}  */
#btn_m{
    font-family: "GT Haptik Medium", sans-serif;
    font-size: smaller;
    background: white;
    border: none;
    color: rgb(44, 19, 56);
    width: 100%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 52px;
    cursor: pointer;
    border-radius: 50px;
    margin-left: 55px;
    padding-left: 130px;
    margin-bottom: 60px;
}
#last_2{
    
    background-color: #FCE5D8;;
   width:50%;
   
   margin-top: 300px;;
   margin-right: 180px;;
   height:470px;
}
#last_2>h3{
font-size: 32px;
font-family: "GT Haptik Medium", sans-serif;;
font-weight: 400;
line-height: 42px;;
color:#2c1338;
margin-top: 40px;
margin-bottom: 30px;
margin-left: 50px;
}
#last_2>p{
    font-size: 16px;
    font-family: Inter, sans-serif;;
    font-weight: 400;
    line-height: 24px;
    color:#2c1338;
    max-width:300px;
    margin-left: 50px;
    margin-bottom: 50px;
}
#last_2>a{
    font-family: 'GT Haptik Medium',sans-serif;
    font-size: 1rem;
    padding: 14px 35px;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 26px;
    border: 0;
    cursor: pointer;
    transition: background-color 150ms linear,color 150ms linear;
    background-color: #E57CD8;
    color: #FFF;
    margin-left: 50px;
  
}