/* app section */
body section .app{
   width: 80%;
   background: linear-gradient(135deg, #F5BA5E, #FFD88A);
   margin: 50px auto;
   border-radius: 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 70px 50px 50px;
   box-shadow: 0 25px 60px rgba(122, 74, 18, 0.25);
   position: relative;
   overflow: hidden;
}

/* decorative glow */
body section .app::before{
   content: "";
   position: absolute;
   width: 300px;
   height: 300px;
   background: rgba(255,255,255,0.25);
   border-radius: 50%;
   top: -120px;
   left: -120px;
}

/* left side */
body section .app .app-left{
   width: 40%;
   position: relative;
   z-index: 1;
}

body section .app .app-left h3{
   font-size: 38px;
   font-weight: 800;
   color: #5C370C;
   padding-right: 20px;
}

body section .app .app-left p{
   color: #6B4A1F;
   font-size: 17px;
   letter-spacing: .5px;
   padding: 12px 0 20px;
   line-height: 30px;
}

body section .app .app-left img{
   padding: 8px 0;
   transition: transform .3s ease, box-shadow .3s ease;
}

body section .app .app-left img:hover{
   transform: translateY(-4px);
   box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

body section .app .app-left .apps{
   max-width: 52%;
}

body section .app .app-left .gs{
   max-width: 62%;
}

/* right side */
body section .app .app-right{
   width: 40%;
   text-align: center;
   position: relative;
   z-index: 1;
}

body section .app .app-right img{
   max-width: 95%;
   animation: floatApp 4s ease-in-out infinite;
}

/* floating animation */
@keyframes floatApp{
   0%,100%{ transform: translateY(0); }
   50%{ transform: translateY(-12px); }
}

/* tablet */
@media(max-width:786px){
   body section .app{
      padding: 50px 30px;
   }

   body section .app .app-left h3{
      font-size: 30px;
   }

   body section .app .app-right img{
      max-width: 100%;
   }
}

/* mobile */
@media(max-width:425px){
   body section .app{
      display: block;
      padding: 40px 20px;
      text-align: center;
   }

   body section .app .app-left,
   body section .app .app-right{
      width: 100%;
      margin: auto;
   }

   body section .app .app-left h3{
      font-size: 26px;
   }

   body section .app .app-left p{
      font-size: 15px;
   }
}