* {
  margin: 0;
  padding: 0;
}
.theft{
    padding: 50px 10% 0;
}
.theft h3{
    text-align: center;
    padding-bottom: 50px;
    color: #2E0E50;
}
.theft-box{
    display: flex;
    gap: 30px;
}
.theft-card{
    width: 50%;
    background: #BEB4C95E;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}
.theft-card img{
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.theft-info{
    padding: 20px;
}
.theft-info h4{
    text-align: center;
    color: #5C1E92;
    font-weight: 700;
    padding-bottom: 10px;
}
.theft-info p{
    color: #735E8A;
    font-size: 20px;
}
.loss{
    display: flex;
    gap: 50px;
    padding: 40px 10% 40px 0px;
    background: #BEB4C95E;
    margin: 50px 10% 0 0;
    align-items: center;
    border-radius: 30px;
}
.loss img{
    width: 40%;
}
.prevention h4{
    font-size: 30px;
    color: #2E0E50;
    padding-bottom: 20px;
}
.prevention p{
    font-size: 20px;
    color: #735E8A;
    line-height: 35px;
}
.analytics{
    text-align: center;
    padding: 50px 10%;
}
.analytics h3{
    color: #2E0E50;
    padding-bottom: 10px;
}
.analytics p{
    color: #735E8A;
    padding: 0px 26% 10px;
}
.track{
    display: flex;
    gap: 30px;
    text-align: left;
}
.track-card{
    background: linear-gradient(110.49deg, #130622 19.95%, #361256 67.64%, #5C1E92 107.08%, #19082C 156.61%, #130622 183.21%);
    box-shadow: 0px 100px 80px 0px #00000012;
    padding: 30px;
    color: #ffffff;
    border-radius: 15px;
}
.track-card li{
    font-size: 20px;
    padding-bottom: 20px;
}
.protection {
  background: linear-gradient(
    110.49deg,
    #130622 19.95%,
    #361256 67.64%,
    #5c1e92 107.08%,
    #19082c 156.61%,
    #130622 183.21%
  );
  box-shadow: 0px 100px 80px 0px #00000012;
  justify-content: center;
  color: #ffffff;
  padding: 50px 10% 20px 10%;
  margin: 50px 0;
  text-align: center;
  border-radius: 15px;
}
.protection h3{
    padding-bottom: 10px;
}
.protection p{
    font-size: 18px;
    padding: 0px 30% 20px;
}
.info{
    display: flex;
    gap: 20px;
}
.retail-left, .retail-right{
    background: #BEB4C95E;
    box-shadow: 0px 10px 15px 0px #0000001A;
    box-shadow: 0px 4px 6px 0px #0000001A;
    padding: 20px 40px;
    width: 50%;
    text-align: left;
    border-radius: 12px;
}
.title{
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 10px;
}
.title img{
    width: 20%;
}
.retail-left li, .retail-right li{
    font-size: 20px;
}
.features {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 50px 8%;
}
.box img {
  width: 20%;
  padding-bottom: 10px;
}
.box p {
  color: #5c1e92;
  font-size: 18px;
  font-weight: 600;
}
.implement {
  background: #beb4c95e;
  display: flex;
  gap: 50px;
  border-radius: 26px;
  margin: 0px 10% 50px;
  align-items: center;
}
.implement img {
  width: 50%;
}
.implement-detail h4 {
  color: #5c1e92;
  font-size: 35px;
  font-weight: 600;
  padding-bottom: 30px;
}
.implement-detail p {
  color: #735e8a;
  padding-bottom: 30px;
}
button {
  align-items: center;
}


@media (max-width: 1024px) {
    .theft{
        padding: 50px 5% 0;
    }
    .implement{
        margin: 50px 5%;
    }
    .implement-detail h4{
        font-size: 25px;
    }
    .theft-info h4{
        font-size: 20px;
    }
    .theft-info p{
        font-size: 17px;
    }
    .loss{
        margin: 50px 5% 0 0;
    }
    .loss img{
        width: 40%;
    }
    .prevention h4{
        font-size: 20px;
    }
    .prevention p{
        font-size: 17px;
        line-height: 30px;
    }
    .analytics{
        padding: 50px 5% 0;
    }
    .analytics p{
        padding: 0px 15% 30px;
    }
    .track{
        gap: 10px;
    }
    .track .title{
        font-size: 20px;
    }
    .track-card li{
        font-size: 17px;
        padding-bottom: 20px;
    }
    .protection {
      padding: 50px 5% 20px 5%;
    }
    .protection h3{
        font-size: 20px;
        padding-bottom: 10px;
    }
    .protection p{
        font-size: 18px;
        padding: 0px 30% 30px;
    }
    .info{
        display: flex;
        gap: 20px;
    }
    .retail-left, .retail-right{
        background: #BEB4C95E;
        box-shadow: 0px 10px 15px 0px #0000001A;
        box-shadow: 0px 4px 6px 0px #0000001A;
        padding: 20px 40px;
        width: 50%;
        text-align: left;
        border-radius: 12px;
    }
    .title{
        gap: 20px;
        padding-bottom: 10px;
    }
    .title img{
        width: 15%;
    }
    .retail-left li, .retail-right li{
        font-size: 18px;
        line-height: 25px;
    }
    .features {
      padding: 50px 5% 0;
    }
    .box p {
      font-size: 15px;
    }
  }
  @media (max-width: 768px) {
    .track-card{
        padding: 15px;
    }
    .track-card li{
        font-size: 15px;
        padding-bottom: 5px;
    }
    .title img{
        width: 20%;
    }
    .protection p{
        font-size: 15px;
        padding: 0px 25% 20px;
    }
    .implement img{
        width: 50%;
    }
    .implement-detail h4{
      padding-top: 10px;
        padding-bottom: 10px;
    }
    .implement-detail p{
        padding-bottom: 0px;
    }
    button{
        margin-bottom: 10px;
    }
  }
  @media (max-width: 426px) {
    .theft-box{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .theft-card{
        width: 100%;
    }
    .loss{
       flex-direction: column;
       padding: 40px;
       margin: 50px 5% 0;
    }
    .loss img{
        width: 100%;
    }
    .track{
        display: grid;
    }
    .info{
        flex-direction: column;
    }
    .protection p{
        padding: 0px 10% 20px;
    }
    .retail-left, .retail-right{
        width: 100%;
    }
    .features {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .implement{
        flex-direction: column;
        text-align: center;
        padding: 40px;
      }
      .implement img{
        width: 100%;
    }
  }