/* ====== FONT ====== */
@font-face {
    font-family: 'fa-lightX';
    src: url('fonts/fa-light-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'fa-lightX';
    src: url('fonts/fa-light-300.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

/* ====== Base ====== */
body{
    margin:0;
    font-family:'fa-light', Calibri, Arial, sans-serif;
    font-weight: 300;
    background:#f1f3f4;
    color:#333;
    font-size:16px; /* +2 */
}

/* ====== Header ====== */
header{
    background:#1aa260;
    color:#fff;
    padding:15px;
}
.container{
    max-width:1100px;
    margin:auto;
    padding:0 15px;
}
.header-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo{font-size:22px;font-weight:900} /* +2 */
nav a{
    color:#fff;
    text-decoration:none;
    margin-right:15px;
    font-size:16px; /* +2 */
    font-weight:900;
}

/* ====== Tabs ====== */
.tabs{
    display:flex;
    background:#fff;
    border-radius:12px;
    margin-top:20px;
    overflow:hidden;
    border:1px solid #dfe6e1;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.tab-btn{
    flex:1;
    padding:12px;
    border:none;
    font-family:'fa-light', Calibri, Arial, sans-serif;
    background:#fff;
    cursor:pointer;
    font-size:16px; /* +2 */
    font-weight:900;
}
.tab-btn.active{
    background:#1aa260;
    color:#fff;
}

/* ====== Tab Box ====== */
.tab-box{
    background:#fff;
    border:1px solid #dfe6e1;
    border-radius:14px;
    padding:20px;
    margin-top:15px;
    box-shadow:0 4px 10px rgba(0,0,0,.06);
}

/* ====== Fade animation ====== */
.tab-content{
    display:none;
    animation:fade .3s ease;
}
.tab-content.active{display:block}
@keyframes fade{
    from{opacity:0;transform:translateY(5px)}
    to{opacity:1;transform:none}
}

/* ====== Search ====== */
.search-box{
    text-align:center;
    margin-bottom:25px;
}
.search-box input{
    width:100%;
    max-width:400px;
    padding:12px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:16px; /* +2 */
    font-weight:300;
    margin-bottom:15px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.search-box button{
    background:#1aa260;
    color:#fff;
    border:none;
    padding:12px 35px;
    border-radius:6px;
    cursor:pointer;
    font-family:'fa-light';
    font-weight:900;
    display:inline-block;
    font-size:16px; /* +2 */
}

/* ====== App Item ====== */
.app-item{
    background:#fff;
    border-radius:12px;
    padding:15px;
    margin-bottom:15px;
    display:flex;
    gap:15px;
    align-items:center;
    border:1px solid #eef2ef;
    transition:.2s;
}
.app-item:hover{
    box-shadow:0 3px 8px rgba(0,0,0,.06);
}
.app-icon{
    width:60px;
    height:60px;
    background:#ddd;
    border-radius:12px;
}
.app-info{flex:1}
.app-title{font-size:18px;font-weight:900} /* +2 */
.app-desc{
    font-size:15px; /* +2 */
    color:#666;
    margin-top:5px;
    line-height:1.6;
    font-weight:300;
}
.download-btn{
    background:#1aa260;
    color:#fff;
    text-decoration:none;
    padding:10px 15px;
    border-radius:6px;
    font-size:16px; /* +2 */
    font-weight:900;
}

/* ====== Highlight ====== */
.highlight{
    background:#e7f5ed;
    border-color:#1aa260;
}

/* ====== Footer ====== */
footer{
    background:#fff;
    padding:15px;
    text-align:center;
    font-size:15px; /* +2 */
    color:#666;
    margin-top:30px;
    font-weight:300;
}

/* ====== Desktop center ====== */
@media(min-width:900px){
    .tabs,.app-list{
        max-width:800px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* ====== Mobile ====== */
@media(max-width:600px){
    .app-item{flex-direction:column;align-items:flex-start}
    .download-btn{align-self:stretch;text-align:center}
}

/* ====== App Page ====== */
.app-header{
    background:#fff;
    border-radius:14px;
    padding:20px;
    margin-top:20px;
    display:flex;
    gap:20px;
    border:1px solid #dfe6e1;
    box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.app-header .app-icon{
    width:90px;
    height:90px;
    border-radius:18px;
}
.app-header .app-main{flex:1}
.app-header .app-title{font-size:22px;font-weight:900;} /* +2 */
.app-header .app-short-desc{
    font-size:16px; /* +2 */
    color:#666;
    margin:10px 0;
    font-weight:300;
}
.app-header .download-btn{
    padding:12px 30px;font-size:17px;border-radius:8px;display:inline-block;font-weight:900; /* +2 */
}

/* ====== Sections ====== */
.section{
    background:#fff;
    border-radius:14px;
    padding:20px;
    margin-top:20px;
    border:1px solid #dfe6e1;
}
.section-title{
    font-size:18px; /* +2 */
    font-weight:900;
    margin-bottom:10px;
    border-bottom:1px solid #eee;
    padding-bottom:5px;
}

/* ====== Info Table ====== */
.info-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:10px;
    font-size:16px; /* +2 */
}
.info-item{
    background:#f7f9f8;
    padding:10px;
    border-radius:8px;
    font-weight:300;
}

/* ====== Screenshots ====== */
.screenshots{
    display:flex;
    gap:10px;
    overflow-x:auto;
}
.screenshot{
    width:160px;
    height:300px;
    background:#ddd;
    border-radius:12px;
    flex-shrink:0;
}

/* ====== Contact Page ====== */
.contact-box{
    background:#fff;
    border-radius:14px;
    padding:25px;
    margin-top:25px;
    border:1px solid #dfe6e1;
    box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.page-title{
    font-size:20px; /* +2 */
    font-weight:900;
    margin-bottom:10px;
}
.page-desc{
    font-size:16px; /* +2 */
    color:#666;
    margin-bottom:20px;
    line-height:1.8;
    font-weight:300;
}
.form-group{
    margin-bottom:15px;
}
.form-group label{
    display:block;
    font-size:16px; /* +2 */
    margin-bottom:5px;
    font-weight:900;
}
.form-group input,
.form-group textarea{
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid #ccc;
    font-size:16px; /* +2 */
    font-weight:300;
    box-sizing:border-box;
}
.form-group textarea{
    resize:none;
    height:120px;
}
.submit-btn{
    background:#1aa260;
    color:#fff;
    border:none;
    padding:12px 35px;
    border-radius:8px;
    font-size:17px; /* +2 */
    font-weight:900;
    cursor:pointer;
}
.contact-info{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:15px;
}
.contact-info .info-item{
    background:#f7f9f8;
    border-radius:10px;
    padding:15px;
    font-size:16px; /* +2 */
    font-weight:300;
}

/* ====== Mobile Contact ====== */


.app-item {
    background:#fff;
    border-radius:12px;
    padding:15px;
    margin-bottom:15px;
    display:flex;
    gap:15px;
    align-items:center;
    border:1px solid #eef2ef;
    transition:.2s;
    cursor: pointer; /* اضافه شد */
}

.app-item:hover {
    box-shadow:0 3px 8px rgba(0,0,0,.06);
}


.app-wide-image{
    margin:15px 0;
    text-align:center;
}

.app-wide-image img{
    max-width:100%;
    height:auto;
    max-height: 200px;
    border-radius:12px;
    display:inline-block;
}


@media(max-width:600px){
    .contact-box{
        padding:20px;
    }
}