/* =====================================================
   Sub-pages shared styles (documentation, terms, privacy, 404)
===================================================== */

body.sub-page{
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   overflow-x: hidden;
}

body.sub-page > .main_wrapper{
   flex: 1;
}

body.sub-page .mm-section{
   padding: 120px 0 20px;
}

/* Scroll-to-top arrow */
body.sub-page #scrollUp{
   position: fixed;
   right: 2%;
   top: 100%;
   width: 30px;
   height: 45px;
   line-height: 45px;
   font-size: 24px;
   background: var(--bottom-nav-bg);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--primary-color);
   border-left: 1px solid var(--primary-color);
   color: var(--white-color);
   text-align: center;
   border-radius: 4px;
   z-index: 999;
   transition: .5s;
   text-decoration: none;
}
body.sub-page #scrollUp.active{
   top: calc(100% - 110px);
}
body.sub-page #scrollUp:hover{
   color: var(--primary-color);
}
body.sub-page #scrollUp img{
   animation: mymove 1s ease-in 0s infinite alternate;
   display: inline-block;
   position: relative;
}

/* Card */
body.sub-page .doc-card{
   background: var(--card-bg);
   border-radius: 10px;
   border-bottom: 5px solid var(--primary-color);
   padding: 50px 25px;
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
}
body.sub-page .doc-card h1{
   color: var(--white-color);
   font-size: 2rem;
   margin-bottom: 20px;
}
body.sub-page .doc-card p{
   color: rgba(255,255,255,.7);
   font-size: 1.1rem;
   line-height: 1.7;
   margin-bottom: 30px;
}
body.sub-page .doc-list{
   list-style: disc;
   text-align: center;
   padding: 0 20px;
   margin: 20px 0;
}
body.sub-page .doc-list li{
   color: rgba(255,255,255,.8);
   font-size: 1rem;
   line-height: 1.8;
   margin-bottom: 10px;
   display: list-item;
}
body.sub-page .doc-btn{
   display: inline-block;
   width: fit-content;
   padding: 10px 30px;
   border: 2px solid var(--white-color);
   border-radius: 8px;
   color: var(--white-color);
   font-size: var(--small-font-size);
   font-weight: 500;
   text-decoration: none;
   transition: .3s;
   margin-top: 15px;
}
body.sub-page .doc-btn:hover{
   background: var(--primary-color);
   border-color: var(--primary-color);
   color: var(--white-color);
}
body.sub-page .doc-btn i{
   margin-inline-start: 6px;
}

/* Home icon (hidden on desktop, shown on mobile) */
body.sub-page .home-icon-link{
   display: none;
   cursor: pointer;
   transition: .3s;
   line-height: 1;
}
body.sub-page .home-icon-link .home-icon{
   width: 22px;
   height: 22px;
   color: var(--white-color);
   transition: .3s;
}
body.sub-page .home-icon-link:hover .home-icon{
   color: var(--primary-color);
}

/* Responsive */
@media(max-width:768px){
   body.sub-page .doc-card{padding:30px 18px;margin:0 16px}
   body.sub-page .doc-card h1{font-size:1.5rem}
   body.sub-page .doc-list li{font-size:.92rem}
   body.sub-page .lets-talk-btn{display:none}
   body.sub-page .home-icon-link{display:block}
   body.sub-page #scrollUp{display:block!important}
}
@media(max-width:480px){
   body.sub-page .doc-card{padding:24px 14px;margin:0 12px}
   body.sub-page .doc-card h1{font-size:1.3rem}
   body.sub-page #scrollUp{display:block!important}
}