* {
    box-sizing: border-box;
}
body {
    margin: 0;
    line-height: 1.6;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#header-out {
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #edf2f7;
}
#header-both {
    width: 1242px;
    height: 80px;
    display: flex;
    justify-content: space-between;
}
#header-left {
    display: flex;
    align-items: center;
}
.zg-branding a{
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-style: normal;
    font-weight: normal;
    font-size: 28px;
    line-height: 1.2;
    font-family: Capriola, sans-serif;
    text-transform: capitalize;
    color: #357df2;
}
.menu-label-icon svg {
    position: relative;
    margin-right: 5px;
    top: 1px;
}
.logo-image {
    display: flex;
}
.logo-image img{
    margin-right: 17px;
    width: 45px;
    height: 45px;
}
.site-title {
    margin: 0;
}
#header-right ul{
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
}
#header-right>ul>li>a {
    position: relative;
}
#header-right>ul>li>a:hover:after {
    -webkit-transform: scale(1, 1) translate(50%, 0);
}
#header-right>ul>li>a:after {
    content: '';
    width: calc( 100% - 1.2em);
    position: absolute;
    bottom: 0px;
    height: 2px;
    right: 50%;
    background: currentColor;
    -webkit-transform: scale(0, 0) translate(-50%, 0);
    transform: scale(0, 0) translate(-50%, 0);
    transition: color .0s ease-in-out, -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out, color .0s ease-in-out;
    transition: transform .2s ease-in-out, color .0s ease-in-out, -webkit-transform .2s ease-in-out
}
.menu-item {
    list-style-type: none;
}
.menu-item a{
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.6em calc(0.6em);
    color: rgb(39, 159, 251);
    font-size: 17px;    
}



#container {
    width: 100%;
    display: flex;
    justify-content: center;
}
#main-board {
    width: 1242px;
}
#for-pc-mac {
    padding-top: 102px;
    width: 100%;
    display: flex;
    justify-content: center;
}
#for-pc-mac h1{
    font-size: 34px;
    margin-top: 0;
    margin-bottom: 15px;
}
#overvw {
    margin-bottom: 34px;
}
#overvw-detail {
    font-size: 17px;
    margin-top: 0;
    margin-bottom: -2px;
}
#overvw h2{
    margin-top: 0;
    margin-bottom: 13px;
    font-size: 28px;
}
#overvw-detail span {
    text-decoration: underline;
    color: #193c61;
    cursor: pointer;
}
#downbtn-for-pc {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}
#downbtn-for-pc button{
    border: none;
    z-index: 1;
    gap: 9px;
    width: 300px;
    text-decoration: none;
    font-size: 19px;
    display: flex;
    justify-content: center;
    color: white;
    border-radius: 45px;
    padding-top: var(--global-kb-spacing-xxs, 0.5rem);
    padding-right: var(--global-kb-spacing-xxs, 0.5rem);
    padding-bottom: var(--global-kb-spacing-xxs, 0.5rem);
    padding-left: var(--global-kb-spacing-xxs, 0.5rem);
    margin-top: var(--global-kb-spacing-sm, 1.5rem);
    box-shadow: rgb(0 0 0) 0px 35px 65px -8px;
    background: linear-gradient(135deg, rgb(1, 5, 12) 0%, rgb(4, 82, 131) 76%, rgb(1, 5, 12) 100%) !important;
}
#downbtn-for-pc button:hover {
    cursor: pointer;
}
.svg-icon-download {
    top: 2px;
    position: relative;
}
.svg-icon-download svg {
    width: 19px;
    height: 19px;
}
#intro-img {
    width: 100%;
    display: flex;
    justify-content: center;
}
#inner-intro img {
    width: 1024px;
    height: 576px;
}
.set-width-full {
    display: flex;
    justify-content: center;
    width: 100%;
}
.set-stepbtn {
    font-size: 17px;
    color: #ffffff;
    width: 100%;
    padding-top: var(--global-kb-spacing-xxs, 0.5rem);
    padding-bottom: var(--global-kb-spacing-xxs, 0.5rem);
    margin-right: var(--global-kb-spacing-5xl, 10rem);
    margin-left: var(--global-kb-spacing-5xl, 10rem);
    text-align: center;
    border-radius: 45px;
    margin-top: 0;
    background-color: #2b6cb0;
}
.descr {
    font-size: 17px;
    margin-top: 0;
    margin-bottom: 32px;
}
.require-list {
    list-style: none;
}
.req-svg-icon-list {
    padding: 0;
}
.kb-svg-icon-wrap {
    margin-right: 10px;
}
.set-svg-size {
    top: 2px;
    position: relative;
    width: 16px;
    height: 16px;
}
.tiny-title h2 {
    font-size: 28px;
}
.little-tiny-title h2 {
    font-size: 20px;
}
#min-require h2{
    margin-bottom: 0;
}
.kt-svg-icon-list-text {
    font-size: 17px;
}
.useway-list {
    list-style: none;
}
.kt-svg-icon-list {
    padding: 0;
}
#conclusion-detail p {
    font-size: 17px;
}
#menu-container>ul>li>a, #footer-bottom>ul>li>a {
    color: #4a5568;
}


footer {
    margin-top: 30px;
}
#fb-icon {
    padding: 9px 6px 6px 10px;
    background: #edf2f7;
    border-radius: 3px;
}
#twt-icon {
    padding: 9px 6px 6px 10px;
    background: #edf2f7;
    border-radius: 3px;
}
#prt-icon {
    padding: 9px 10px 6px 10px;
    background: #edf2f7;
    border-radius: 3px;
}
.mv-ltr-bit {
    margin-right: 4px;
}
#line-below {
    border-top: 1px solid #215387;
    display: flex;
    justify-content: center;
    padding-top: 14px;
}
#contact-method {
    margin-top: 140px;
}
.svg-iconset svg{
    width: 16px;
    height: 16px;
}
#copyright p{
    font-size: 17px;
    margin-bottom: -13px;
}
#copyright p a{
    color: #193c61;
}
.footer-social a{
    text-decoration: none;
}
#footer-vert-both {
    width: 1242px;
}
#footer-menu {
    padding: 0;
    margin-bottom: 0;
    display: flex;
}
#footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#footer-for-iOS-PC {
    display: flex;
    direction: rtl;
    padding: 0;
    margin-top: 0;
    margin-bottom: 30px;
}










.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3); /* set opacity */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 998;
  }
  
  .overlay.active {
    opacity: 1;
    visibility: visible;
  }

#btn-setting {
    display: none;
    height: 100%;
    align-items: center;
}
#btn-setting:hover {
    cursor: pointer;
}
/* main sidebar style */
.sidebar {
    position: fixed;
    top: 0;
    right: -100%; /* hiding out of window */
    width: 90%;
    height: 100%;
    background-color: #090c10;
    color: white;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    transition: right 0.3s ease;
    z-index: 999;
  }
  
  /* menu item style */
  .sidebar a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 1em 0.5em;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* sidebar active */
  .sidebar.active {
    right: 0; /* move into original window */
  }
  
/* .close-btn style */
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }



#mob-container {
    font-size: 17px;
    padding: 0 24px;
    display: none;
}
#front-logo {
    display: flex;
    justify-content: center;
    margin-top: 94px;
}
#front-logo img{
    width: 120px;
    height: 120px;
    border-radius: 90px 90px 90px 15px;
    box-shadow: -6px 15px 30px 3px #3182CE;
}
#apk-download-title {
    line-height: 1.5;
    margin-top: 13px;
    text-align: center;
}
#down-apk-detail p{
    text-align: center;
    font-size: 17px;
    margin-top: 0;
    margin-bottom: 32px;
    padding-top: 10px;
}
#btn-download-apk {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
#apkdownloadBtn {
    border: none;
    text-decoration: none;
    border-radius: 45px;
    gap: 0.5em;
    font-size: 18px;
    padding: 0.6em 1em;
    color: #ffffff;
    background-color: #2b6cb0;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#apkdownloadBtn>span>svg {
    width: 18px;
    height: 18px;
}
#svg-icon-ic_download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.bgclr-teal-flex {
    background-color: rgb(25 62 124);
    width: 100%;
    display: flex;
}
.set-width-half {
    margin: 0;
    padding: 8px;
    width: 50%;
    font-size: 17px;
    color: #ffffff;
    display: flex;
    justify-content: center;
}
.set-top-radius {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}
.bgclr-white-flex {
    width: 100%;
    display: flex;
}
.set-clr-teal {
    color: rgb(25 62 124);
}
.set-radius {
    border-radius: 8px;
}
#app-required {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
#app-required p{
    margin: 0;
    padding: 14px 16px;
    font-size: 17px;
    color: #ffffff;
    display: flex;
    justify-content: center;
}
.set-svg-icon>svg{
    width: 17px;
    height: 17px;
}
.icon-list-item {
    list-style: none;
}
.icon-list-item>span>svg {
    position: relative;
    top: 2px;
    margin-right: 8px;
}

.mid-tiny-title h2{
    font-size: 22px;
    margin-bottom: 0;
    border-bottom: 1px solid #193c61;
}
#whatiszangi {
    margin-bottom: 32px;
}
#apk-logo {
    display: flex;
    justify-content: center;
}
#apk-logo img{
    max-width: 100%;
}
.more-tiny-title h2{
    font-size: 20px;
}
#no-sim-needed>p>a, #file-sharing>p>a, #is-safe>p>a {
    font-style: italic;
    color: #193c61;
}
.set-margin-for-detail {
    margin-top: -16px;
    margin-bottom: 32px;
}
#images-for-useful {
    display: block;
}
.useful-outter {
    display: flex;
    justify-content: center;
    margin: 32px 0;
}
.useful-outter>img{
    width: 200px;
}
#advantage-of-zangi img {
    max-width: 100%;
}
.kt-inside-inner-col {
    padding: 8px;
    background-color: #EDF2F7;
    border-radius: 45px;
    box-shadow: rgba(0, 0, 0, 0.2) 15px 15px 15px 0px;
}
.title-for-android {
    text-align: center;
}
#how-to-detail-for-android {
    padding-top: 35px;
}
#how-to-detail-for-pc {
    padding-top: 32px;
}
.little-min-title {
    display: flex;
    padding-top: 24px;
}
.mini-icon {
    width: 30px;
    margin-right: 30px;
}
#conclusion-for-android {
    padding-top: 24px;
}





@media (max-width:768px) {
    #header-both, #footer-vert-both {
        width: 100%;
        padding: 0 24px;
    }
    .logo-image p{
        font-size: 24px;
    }
    #primary-menu {
        display: none !important;
    }    
    .menu-label-icon svg {
        top: 3px;
    }
    #footer-top {
        display: block;
        justify-content: center;
    }
    #footer-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #copyright p {
        text-align: center;
    }
    #footer-for-iOS-PC {
        justify-content: center;
    }
    .kt-svg-icon-list {
        padding: 20px;
        margin-top: 0;
    }
}