.hanafi-hero{background:url("/assets/image/blog/hero-texture-1.webp") 0 0/cover no-repeat,linear-gradient(146deg,#fb8983 0,#8c3488 49%,#135cca 100%) 0 0/cover no-repeat;background-blend-mode:multiply}#introduction,#title,.intro-header{position:relative}.ayat{background:#e3ecfb;font-weight:700;font-size:20px;padding:1rem 2rem;border-radius:23px;color:var(--light-blue)}.intro-header{color:#fff;padding:2rem}.intro-header>h1{font-size:clamp(30px, 4vw, 45px);margin-top:70px;text-align:center;text-transform:capitalize}.intro-header .content{padding:3rem 0 5rem;margin-top:70px}.intro-header .content ul{width:280px;margin:auto}.intro-header .content ul li{display:flex;align-items:center;font-size:1.1rem;color:#fff;margin-bottom:15px}.intro-header .content ul li a{color:#fff}.intro-header .content ul li .icon{margin-right:15px;width:20px;height:20px}.intro-header .content ul li p{text-decoration:underline}.books{color:#000}#title{display:flex;justify-content:center}#title .leaf-left{position:absolute;left:0;top:50%;transform:translateY(-50%)}#title .leaf-right-green{position:absolute;right:0;top:0}#title .leaf-right-red{position:absolute;right:0;bottom:0}#title .title-container{padding:1rem;margin-top:80px;width:720px}#title .title-container h1{font-size:clamp(20px, 4vw, 40px);position:absolute;top:-40px;left:50%;margin:0;transform:translateX(-50%);padding:1rem 5rem}#title .title-container .ref{padding:1rem 2rem;border-radius:30px}#title .title-container .ref h2{font-size:clamp(18px, 5vw, 28px);font-weight:400;margin-bottom:20px}#title .title-container .ref p{font-size:20px;text-align:right;font-weight:700}#introduction .introduction-container .body>p,#title .title-container .body>p{margin:25px 0}#title .title-container .body ul{padding-left:2rem}#title .title-container .body ul p{padding-left:2rem;margin:25px 0}#title .title-container .body ul li{list-style-type:disc;margin:25px 0}#introduction{display:flex;justify-content:center;overflow:hidden}#introduction .leaf-bottom{position:absolute;bottom:-150px}#introduction .introduction-container{padding:1rem 1rem 15rem;width:720px}#introduction .introduction-container>h1{font-size:clamp(20px, 4vw, 40px);margin-bottom:20px;padding:1rem 5rem}.try-app-sec{background:url("/assets/image/hanafi/frame-2.webp") 0 0/cover no-repeat,0 0/cover no-repeat #e3ecfb}.try-app-wrapper{padding:1rem}.try-app-wrapper .app-info picture{margin-right:40px}.try-app-wrapper .app-info{display:flex;align-items:center;justify-content:center;padding:1rem 10rem}.try-app-wrapper .app-info h2{margin-bottom:20px}.try-app-wrapper .app-info p{margin-bottom:30px}.store{display:flex;align-items:center;gap:13px}.store img{width:120px}@media (max-width:1405px){#title .title-container h1{padding:1rem}}@media (max-width:1200px){.intro-header .content{padding:3rem 20rem}#title .title-container h1{padding:1rem 0;width:60%;top:-30px}#title .leaf-left{width:35%}#title .leaf-right-green{width:25%;top:60px}#title .leaf-right-red{width:25%}#introduction .leaf-bottom{width:45%}}@media (max-width:1010px){.intro-header>h1{margin-bottom:20px}.intro-header .content{padding:3rem 10rem;margin-top:30px}.intro-header .content ul li{align-items:flex-start}.intro-header .content ul li .icon{margin-right:10px}#introduction .leaf-bottom,#title .leaf-left,#title .leaf-right-green,#title .leaf-right-red{display:none}#title .title-container{padding:1rem;margin-top:80px;width:720px}#introduction .introduction-container>h1{display:block;width:80%;margin:auto;padding:1rem 3rem}#title .title-container .ref h4{margin-bottom:0}#introduction .introduction-container{padding:1rem 1rem 2rem}.try-app-wrapper .app-info picture{margin-right:20px}.try-app-wrapper .app-info{flex-direction:row;padding:1rem}}@media (max-width:750px){.intro-header .content{padding:3rem 2rem;text-align:center}#title .title-container h1{padding:1rem 0;width:80%;top:-30px}}@media (max-width:500px){.hanafi-hero{background:url("/assets/image/blog/hero-texture-1-small.webp") center/cover no-repeat,linear-gradient(146deg,#fb8983 0,#8c3488 49%,#135cca 100%) center/cover no-repeat}.intro-header .sub-title br{display:none}#introduction .introduction-container>h1{width:100%;padding:1rem}.try-app-sec{background:url("/assets/image/hanafi/frame-2-small.webp") center/cover no-repeat,center/cover no-repeat #e3ecfb}.try-app-wrapper .app-info picture{margin-right:0}.try-app-wrapper .app-info{flex-direction:column;text-align:center}}