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

body{
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-color: grey;
}
.contaner{ max-width: 100%;margin: 0 auto;padding: 0;z-index: 20;background-color:rgba(0, 0, 0, 0.4);}
.contaner_inner{ height: 100vh;display: flex;justify-content: center; align-items: center; ;vertical-align: middle;}

.box{ display: flex; }
.box .mobile_phone {width: 370px;}
.box .mobile_phone > img{width: 100%;}

.box .txt{margin-top:6%;padding-left: 2rem;text-align: center; }
.box .txt .logo{display: inline-block;width: 120px;margin:15px 0;text-align:center}
.box .txt .logo > img{width: 100%;}
.box .txt h3{margin: 0;padding:0;font-family: 'Hanuman', sans-serif;font-size:30px;color: #fff;text-shadow: 1px 2px 3px #000;}
.box .txt p{margin: 15px 0 0;padding:0;font-family: 'Hanuman', sans-serif;font-size:18px;line-height: 26px ;color: #fff;text-shadow: 1px 1px 2px #000;width:500px;}
.box .txt ul{display: inline-flex;;margin: 30px 0 15px 0;padding: 0;}
.box .txt ul li{width:145.53px;height:43.16px;margin:0 5px;list-style: none; }
.box .txt ul li:hover{opacity: 0.9;}
.box .txt ul li a > img{width: 100%;height:43.16px; }

.bg{position: absolute;top: -2%;left: -2%;right: -2%;bottom: -2%;height:100vh;display:inline-block;filter: blur(8px);-webkit-filter: blur(8px);background-image: url("../images_criminal/background.png");background-size: cover;background-position:center center;z-index: -1;}

@media only screen and (max-width:830px) {
  /* For tablets: */
  .contaner_inner{width: 80%;padding:0 10%;}
  .box .mobile_phone{text-align: center;}
  .box .mobile_phone > img{width: 50%;}
  .box { display: initial;}
  .box .mobile_phone {width: 100%;}
  .box .txt { margin-top: 0;padding-left: 0}
  .box .txt h3{font-size: 28px;}
  .box .txt p{font-size:16px;line-height: 26px ;color: #fff;width:100%;}
  .box .txt .logo{position: absolute;top:10px;left: 15px;width:80px;height:80px}
  .box .txt .logo > img{width: 100%;}
  .bg{position: absolute;top: 0;left: 0;right: 0;bottom: 0}
}

@media only screen and (max-width:415px) {
  /* For tablets: */
  .contaner_inner{width: 80%;padding:0 10%;}
  .box .mobile_phone{text-align: center;}
  .box .mobile_phone > img{width: 50%;}
  .box { display: initial;}
  .box .mobile_phone {width: 100%;}
  .box .txt { margin-top: 0;padding-left: 0}
  .box .txt h3{font-size: 22px;}
  .box .txt p{margin-top: 10px;font-size:12px;line-height: 22px ;color: #fff;width:100%;}
  .box .txt .logo{position: absolute;top:5px;left: 15px;width:62px;height:62px}
  .box .txt .logo > img{width: 100%;}
  .box .txt ul{margin: 0px 0 50px 0;padding: 0;}
  .bg{position: absolute;top: 0;left: 0;right: 0;bottom: 0}
}