.apg-container {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    background-color: #727e7d4d;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 30px;
}
    @media (min-width: 768px) {
      .apg-container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 2.5rem;
      }
    }
    /* Sidebar */
    .apg-sidebar {
      flex-shrink: 0;
      color: white;
      max-width: 180px;
      position: static;
      top: auto;
      align-self: flex-start;
      box-sizing: border-box;
    }
.apg-sidebar h2 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: #00ff51;
}
    .apg-sidebar p {
      color: #d1d5db; /* gray-300 */
      font-size: 16px;
      margin: 0 0 1.5rem 0;
      line-height: 1.4;
    }
    .apg-order-button {
      background-color: #3e8e41;
      color: white;
      font-weight: 600;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
      font-size: 1rem;
      user-select: none;
      box-sizing: border-box;
    }
    .apg-order-button:hover,
    .apg-order-button:focus {
      background-color: #367a37;
      outline: none;
      box-shadow: 0 0 0 3px rgba(54, 122, 55, 0.6);
    }
    /* Slider container */
    .apg-slider-section {
      position: relative;
      flex-grow: 1;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 0.75rem;
      background-color: transparent;
    }
    .apg-slider {
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
    }
    .apg-slider-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
      will-change: transform;
      box-sizing: border-box;
    }
    /* Slide card */
    .apg-slide {
      background-color: white;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
      display: flex;
      flex-direction: column;
      cursor: pointer;
      flex-shrink: 0;
      box-sizing: border-box;
      outline-offset: 2px;
      transition: box-shadow 0.3s ease;
    }
    .apg-slide:focus,
    .apg-slide:hover {
      box-shadow: 0 4px 8px rgb(0 0 0 / 0.15);
      outline: none;
    }
    .apg-slide img {
      width: 100%;
      height: 140px;
      object-fit: cover;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      display: block;
      user-select: none;
    }
    .apg-slide h3 {
      font-weight: 600;
      font-size: 1rem;
      margin: 0.75rem 1rem 0.25rem 1rem;
      line-height: 1.2;
      flex-grow: 1;
      word-break: break-word;
    }
    .apg-slide button {
      margin: 0 1rem 1rem 1rem;
      background-color: #4f5c5b;
      color: white;
      border: none;
      border-radius: 0.375rem;
      padding: 0.25rem 0.75rem;
      font-size: 0.875rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
      align-self: flex-start;
      user-select: none;
    }
    .apg-slide button:hover,
    .apg-slide button:focus {
      background-color: #3e4a49;
      outline: none;
      box-shadow: 0 0 0 3px rgba(62, 74, 73, 0.6);
    }
    /* Gap between slides */
    .apg-slider-track > .apg-slide:not(:last-child) {
      margin-right: 1rem;
    }
    /* Navigation buttons */
    .apg-nav-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: #4f5c5b;
      color: white;
      border-radius: 9999px;
      padding: 0.75rem;
      box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
      cursor: pointer;
      border: none;
      user-select: none;
      transition: background-color 0.3s ease;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      line-height: 1;
    }
    .apg-nav-button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .apg-nav-button:hover:not(:disabled),
    .apg-nav-button:focus:not(:disabled) {
      background-color: #3e4a49;
      outline: none;
      box-shadow: 0 0 0 3px rgba(62, 74, 73, 0.6);
    }
    .apg-prev-button {
      left: 0.5rem;
    }
    .apg-next-button {
      right: 0.5rem;
    }
    /* Lightbox */
    #apg-lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      box-sizing: border-box;
    }
    #apg-lightbox.active {
      display: flex;
    }
    #apg-lightbox-content {
      position: relative;
      max-width: 900px;
      max-height: 80vh;
      width: 100%;
      box-sizing: border-box;
    }
    #apg-lightbox-img {
      width: 100%;
      height: auto;
      max-height: 80vh;
      border-radius: 0.5rem;
      display: block;
      margin: 0 auto;
      user-select: none;
    }
    #apg-lightbox-caption {
      color: white;
      text-align: center;
      margin-top: 1rem;
      font-size: 1.125rem;
      word-break: break-word;
    }
    #apg-lightbox-close {
      position: absolute;
      top: 0.25rem;
      right: 0.25rem;
      background: none;
      border: none;
      color: white;
      font-size: 2.5rem;
      line-height: 1;
      cursor: pointer;
      user-select: none;
      padding: 0;
      transition: color 0.3s ease;
    }
    #apg-lightbox-close:hover,
    #apg-lightbox-close:focus {
      color: #ccc;
      outline: none;
    }

a.demo-preview {
    color: #fff;
}
/*! CSS Used from: https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css */
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.fa-eye:before{content:"\f06e";}
.fa-cloud-download:before{content:"\f0ed";}
.fa-desktop:before{content:"\f108";}
/*! CSS Used from: Embedded */
h2{color:#111316;font-weight:700;margin:0;}
a{color:#010101;}
img{max-width:100%;}
.header-section{position:relative;overflow:hidden;}
.hero-header {
    position: relative;
    float: left;
    width: 100%;
    padding: 41px 0 22px;
}
.hero-header .cnblgg,.hero-header2 .cnblgg{text-align:center;}
.hero-header2{position:relative;float:left;width:100%;padding:60px 0 130px;}
.header2-section{position:relative;float:left;width:100%;background:#2a2a2a;margin-bottom: 30px;}
.header-logo{display:block;margin:0;}
.header-logo img{display:inline-block;max-width:100%;height:50px;}
p.header-snip2{display:block;width:80%;font-size:35px;font-weight:600;line-height:1.5em;margin:30px auto;text-align:center;}
.header-section p.header-snip2{color:#2c2c2c;}
.header-section .header-snip{color:#5b5b5b;font-size:18px;}
.header2-section .header-snip{color:#B9B9BA;}
.header2-section p.header-snip2{color:#e7e7e7;}
.header-snip{display:inline-block;line-height:1.8em;margin:18px 0 0;text-align:center;}
.hero-header2 .header-hero{display:block;margin:35px auto 0;text-align:center;}
.header-section .header-hero{display:block;margin:0 auto 100px;text-align:center;}
.header-hero a{display:inline-block;height:40px;font-size:14px;color:#fff;line-height:40px;padding:0 20px;margin:0 15px;border-radius:8px;}
.demo-btn{background:linear-gradient(45deg, #373fea, #362399);box-shadow:0px 0px 9px 4px rgb(96 30 201 / 26%);}
.demo-btn:hover{opacity:.8;}
.download-btn{background:linear-gradient(to right, #04a763, #1ec942);box-shadow:0px 0px 9px 4px rgb(30 201 66 / 37%);}
.download-btn:hover{opacity:.8;}
.header-hero a i{font-size:14px;margin:0 5px 0 0;}
.site-content{position:relative;float:left;width:100%;padding:45px 0 70px;}
.demo-wrap:hover .linked:before{content:"Edit";position:absolute;top:50%;font-size:13px;transform:translateY(-50%);left:0;right:0;margin:0 auto;background:#362399;color:#fff;border-radius:7px;width:140px;height:30px;z-index:111;text-align:center;line-height:30px;}
svg{vertical-align:middle;}
.demo .demo-wrap:hover .linked:after{background:rgb(10 10 10 / 33%);content:'';position:absolute;top:0;right:0;margin:0 auto;left:0;height:100%;width:100%;z-index:11;cursor:pointer;}
.demo-wrap .linked{display:block;position:relative;}
.power{position:relative;display:flex;justify-content:center;overflow:hidden;box-sizing:border-box;margin:0 auto;flex-wrap:wrap;}
.power-ico{display:flex;flex-direction:column;justify-content:center;margin:20px;padding:10px 0 10px;flex-wrap:wrap;position:relative;background:white;border-radius:5px;width:90.05px;align-content:center;box-shadow:0px 0px 6px 1px rgb(86 86 86 / 13%);}
.power-ico img{display:block;position:relative;overflow:hidden;margin:0 auto;width:45px;height:45px;box-sizing:border-box;}
.power-text{display:block;margin:10px auto 0;font-size:13px;color:#333;font-family:monospace;text-align:center;}
.main-header{display:block;text-align:center;margin:0 0 20px;}
.main-header h2{font-size:27px;margin:0 0 20px;}
.main-header p{font-size:16px;line-height:1.8em;padding:0 15%;}
.scroll{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;margin:0;}
.flex-item{display:flex;align-items:center;align-content:center;justify-content:space-between;background:#fff;overflow:hidden;margin:0 10px;}
.demo-title{color:#333;}
.demo-preview{display:block;padding:8px 15px;margin:10px 0;font-weight:400;background:#000;color:#ffffff;border-radius:5px;font-size:11px;}
.flex-item .demo-title{display:block;padding:8px 8px;margin:10px 0;font-weight:600;font-size:17px;}
a.demo-preview:hover{opacity:.8;}
.btd-flex-info{margin:0 15px;}
.btd-flex-img img{margin:0 auto;text-align:center;display:block;max-height:322px;}
.scroll .demo{position:relative;float:left;width:calc((100% - 80px) / 3);margin:40px 0 0;}
.demo-wrap{position:relative;width:100%;height:auto;border-radius:15px;overflow:hidden;margin:0;background:#fff;border:1px solid rgba(155,155,155,0.17);-webkit-transition:all .3s ease;transition:all 0.3s ease;box-shadow:0 0 9px rgb(0 0 0 / 8%);}
.demo-wrap:hover{-webkit-transform:translateY(-8px);transform:translateY(-8px);box-shadow:0 1px 2px 0 rgb(60 64 67 / 30%),0 2px 6px 2px rgb(60 64 67 / 15%);}
.demo-wrap img{position:relative;display:block;width:100%;height:auto;min-height:300px;object-fit:cover;object-position:center top;z-index:5;}
.btd-section{position:relative;display:block;box-sizing:border-box;overflow:hidden;float:left;width:100%;}
.btd-section.step1{background:rgb(34 250 63 / 0.04);}
.btd-section.step2{background:rgb(0 192 255 / 0.08);}
.btd-section.step3{background:rgb(217 157 255 / 0.12);}
.btd-section.step4{background:rgb(0 255 233 / 0.07);}
.btd-section.step5{background:rgb(255 162 157 / 0.12);}
.btd-section.step6{background:#ffffff;}
.btd-section.step7{background:rgb(255 253 157 / 0.15);}
.btd-flex{display:flex;gap:40px;justify-content:center;align-items:flex-start;padding:60px 0;}
.btd-flex-text{position:relative;display:block;font-size:25px;font-weight:bold;color:#000;}
.btd-flex-info{max-width:440px;color:#6c7d97;}
.btd-flex-snip{position:relative;display:block;font-size:15px;margin:10px 0 15px;}
.btd-flex-item{position:relative;display:block;margin:10px 0;}
.btd-flex-list{font-size:13px;}
span.svg{position:relative;display:inline-block;text-align:center;border-radius:50%;}
.btd-section span.svg{width:18px;height:18px;line-height:18px;background:rgb(61 255 0 / 0.21);}
.btd-section .svg svg{height:11px;width:11px;vertical-align:middle;fill:#24b000;}
.header-snip .svg svg{height:35px;width:35px;padding:8px;vertical-align:middle;}
.btd-section.step2 .svg svg{fill:#2970ee;}
.btd-section.step2 span.svg{background:rgb(0 176 255 / 0.21);}
.btd-section.step3 .svg svg{fill:#6b00b0;}
.btd-section.step3 span.svg{background:rgb(167 0 255 / 0.21);}
.btd-section.step4 .svg svg{fill:#00b0a0;}
.btd-section.step4 span.svg{background:rgb(0 186 146 / 0.22);}
.btd-section.step5 .svg svg{fill:#ee2929;}
.btd-section.step5 span.svg{background:rgb(255 0 0 / 0.21);}
.btd-section.step7 .svg svg{fill:#cbad17;}
.btd-section.step7 span.svg{background:rgb(255 213 0 / 0.21);}
.header-snip.nota{display:flex;justify-content:center;align-items:center;}
.new-ico{margin:0 10px;}
.lara{display:block;font-size:14px;text-transform:uppercase;margin:0 0 7px;color:#5b61e5;font-weight:600;}
.kotlin{display:flex;justify-content:center;align-items:center;}
.header-snip span.svg{background:rgb(202 239 255 / 10%);}
.header2-section .header-snip .svg svg{fill:#2970ee;}
.slide-in{font-size:3.3rem;position:absolute;bottom:1.8rem;left:0;display:block;width:100%;margin:0;padding:0;}
.slide-in .pointer{position:absolute;top:50%;left:50%;width:26px;height:42px;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border:2px solid #737373;border-radius:26px;-webkit-backface-visibility:hidden;}
.slide-in .pointer:after{position:absolute;top:5px;left:50%;width:4px;height:4px;margin-left:-2px;content:'';-webkit-transform:translateY(0) scaleY(1) scaleX(1) translateZ(0);transform:translateY(0) scaleY(1) scaleX(1) translateZ(0);-webkit-animation:scroll 1.5s -1s cubic-bezier(.68,-.55,.265,1.55) infinite;animation:scroll 1.5s -1s cubic-bezier(.68,-.55,.265,1.55) infinite;opacity:1;border-radius:100%;background-color:#737373;}
@media screen and (max-width: 1140px){
.header-section{background-position:center;background-attachment:inherit;}
}
@media screen and (max-width: 1040px){
.header-snip{padding:0 20px;}
.main-header p{padding:0 20px;}
}
@media screen and (max-width: 880px){
.scroll .demo{width:calc((100% - 40px) / 2);}
}
@media screen and (max-width: 640px){
    .hero-header {
        padding: 32px 0 4px;
    }
.hero-header2{padding:50px 0;}
p.header-snip2{font-size:26px;}
.header-snip.nota{flex-direction:column;}
.kotlin{margin:0 0 14px;flex-wrap:wrap;}
.new-ico{margin:0;width:100%;}
.header-logo img{max-height:60px;}
.header-snip{font-size:15px;}
.header-hero .purchase{margin-top:15px;}
.btd-flex{display:flex;align-items:center;flex-direction:column;}
}
@media screen and (max-width: 480px){
.demo-preview i:before{font-size:18px;}
.demo-preview{font-size:0;}
.main-header{margin:0 0 10px;}
.main-header p{padding:0;font-size:15px;}
.scroll .demo{width:100%;}
}