/* ==========================================================================
   🎯 د مهارتونو د برخې پوره اصلاح شوی او ثابت CSS سټایل (Skills Section)
   ========================================================================== */

/* 📦 د کارتونو عمومي کانتینر او ګریډ سیسټم */
.skills-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

/* 🛡️ د هرې کټګورۍ لوی کارت (Card) */
.skills-category {
    background: var(--second-bg-color, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    padding: 25px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
}

/* ✨ پر کارت باندې د موږک وړلو (Hover) انیمیشن */
.skills-category:hover {
    transform: translateY(-8px);
    border-color: var(--main-color, #00abf0);
    box-shadow: 0 10px 25px rgba(0, 171, 240, 0.15);
}

/* 🏷️ د هرې کټګورۍ عمومي سرلیک */
.category-title {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--text-color, #fff);
    border-bottom: 2px solid var(--border-color, rgba(255, 255, 255, 0.1));
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.skills-category:hover .category-title {
    color: var(--main-color, #00abf0);
    border-bottom-color: var(--main-color, #00abf0);
}

/* 🔹 د هر ځانګړي مهارت بکس (Skill Box) */
.skill-box {
    margin-bottom: 22px;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.3s ease; /* 🛑 یوازې رنګ په ارامه تغیر کوي، دلته padding-left لرې شو */
}

/* 🔥 پر بکس د هاور پر مهال یوازې رنګ راځي او متن ثابت پاتې کېږي */
.skill-box:hover {
    background: rgba(0, 171, 240, 0.05);
}

.skill-box:last-child {
    margin-bottom: 0;
}

/* ℹ️ د نوم او آیکن قطار */
.skill-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.skill-name {
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color, #fff);
    transition: color 0.3s ease;
}

.skill-box:hover .skill-name {
    color: var(--main-color, #00abf0);
}

/* 📝 د متن د خطونو پوره سیده کول (Justified) */
.skill-desc {
    font-size: 13px;
    opacity: 0.75;
    margin: 8px 0 16px 0;
    line-height: 1.6;
    text-align: justify;         /* 🛑 متن له دواړو خواوو څخه پوره سیده او موازي ساتي */
    text-justify: inter-word;    
    word-break: normal;          
    hyphens: auto;               
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* 📉 د ګراف لاین او فیصدي عمومي کانتینر */
.progress-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 12px;
}

/* د پرمختګ لاین (ګراف) چوکاټ */
.progress-line {
    position: relative;
    height: 8px;
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

/* د لاین ډکېدونکې برخه */
.progress-line span {
    height: 100%;
    background: var(--main-color, #00abf0);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    box-shadow: 0 0 10px var(--main-color, #00abf0);
}

/* 📊 د فیصدي بکس */
.skill-percentage {
    font-weight: 600;
    font-size: 13px;
    color: var(--main-color, #00abf0);
    background: rgba(0, 171, 240, 0.1);
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 171, 240, 0.2);
    min-width: 48px;
    text-align: center;
    display: inline-block;
}
.skill-box:hover .skill-percentage {
    transform: scale(1.05);
    background: var(--main-color, #00abf0);
    color: #fff;
}

/* 📱 رېسپانسیو (موبایل سکرین) */
@media (max-width: 768px) {
    .skills-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .skills-category {
        padding: 20px;
    }
    .skill-desc {
        text-align: justify; /* په موبایل کې هم منظم پاتې کېږي */
    }
}

/* 📝 د متن د خطونو پوره سیده کول او د کلمو ترمنځ د فاصلې اصلاح */
.skill-desc {
    font-size: 13px;
    opacity: 0.75;
    margin: 8px 0 16px 0;
    line-height: 1.6;
    
    /* 🛑 د خطونو د سیده کولو او د فاصلو د کنټرول نوي اصول */
    text-align: justify;         /* متن له دواړو خواوو څخه پوره سیده او موازي کوي */
    text-justify: inter-word;    /* د کلمو ترمنځ د فاصلو وېش په سټنډرډ ډول ساتي */
    word-break: normal;          /* کلمې په بې‌ځایه ځایونو کې نه ماتوي */
    
    /* ⚡ د کلمو د بې حده غځېدو د مخنیوي لپاره (ترڅو لوی خالي ځایونه جوړ نشي) */
    hyphens: auto;               
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* 📉 د ګراف لاین او فیصدي عمومي کانتینر */
.progress-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 12px;
}

/* د پرمختګ لاین (ګراف) چوکاټ */
.progress-line {
    position: relative;
    height: 8px;
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

/* د لاین ډکېدونکې برخه */
.progress-line span {
    height: 100%;
    background: var(--main-color, #00abf0);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    box-shadow: 0 0 10px var(--main-color, #00abf0);
}

/* 📊 د فیصدي بکس */
.skill-percentage {
    font-weight: 600;
    font-size: 13px;
    color: var(--main-color, #00abf0);
    background: rgba(0, 171, 240, 0.1);
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 171, 240, 0.2);
    min-width: 48px;
    text-align: center;
    display: inline-block;
}