.progress-bar,.text-box P{font-family:IRANSANS_BOLD}.btn button,body{font-family:Graphik-Super;color:#fff}@font-face{font-family:Graphik-Super;src:url(/fonts/Graphik\ Arabic\ Super.otf);font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:IRANSANS_BOLD;src:url(/fonts/IRANSANS_BOLD.TTF);font-style:normal;font-weight:400;font-display:swap}body{background:#8f2617;background:linear-gradient(90deg,#8f2617 0,#b5554a 100%)}*{margin:0;box-sizing:border-box}::-webkit-scrollbar{width:13px}::-webkit-scrollbar-track{background:#b55549}::-webkit-scrollbar-thumb{background:#8d2516;border-radius:20px}.parent-2{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(16,1fr);gap:17px;padding:100px}.div-1{grid-column:span 6/span 6}.div-2{grid-column:span 2/span 2;grid-row:span 4/span 4;grid-column-start:7;width:300px!important}.div-3,.div-4,.div-5{grid-row:span 3/span 3}.div-3{grid-column:span 6/span 6;grid-row-start:2}.div-4,.div-5{grid-column:span 4/span 4;grid-row-start:5}.div-4{grid-column-start:5}.div-5{grid-column-start:1}.div-6{grid-column:span 8/span 8;grid-row:span 9/span 9;grid-row-start:8}.div-2,.div-3,.div-4,.div-5,.div-6,.div-7,.div-8,.div-9{border-radius:27px;padding:20px;backdrop-filter:blur(6px) saturate(128%);-webkit-backdrop-filter:blur(6px) saturate(128%);background-color:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.24);height:auto}.line-text{display:flex;align-items:center;gap:10px}.line-text span{width:340px;max-width:330px;height:6px;background-color:#8b1604;border-radius:10px;color:#fff}.div-2 img{border-radius:27px;margin:0 auto}.text-box P{font-size:.9rem;text-align:justify;padding:10px}.text-box{direction:rtl;text-align:start}.text-box h2{padding:5px}.progress-bar{display:flex;align-items:center;width:100%;height:25px;background:rgba(255,255,255,.15);border-radius:10px;overflow:hidden;margin-bottom:10px}.progress-bar span{display:flex;position:absolute;justify-content:center;align-items:center;right:50px;top:79px;color:#fff}.progress-text-htm-cs,.progress-text-java{align-items:center;display:flex;position:absolute}.progress-text-java{justify-content:center;top:113px!important}.progress-text-htm-cs{justify-content:center;top:150px!important}.progress-text-PHP{display:flex;align-items:center;justify-content:center;position:absolute;top:185px!important}.progress-fill{height:100%;background:linear-gradient(90deg,#8b1604,#8b1604);border-radius:10px;width:0%;animation:1.5s ease-out forwards fillProgress}.skill-card:first-child .progress-fill{animation-delay:.6s}.skill-card:nth-child(2) .progress-fill{animation-delay:.7s}.skill-card:nth-child(3) .progress-fill{animation-delay:.8s}.skill-card:nth-child(4) .progress-fill{animation-delay:.9s}.skill-card:nth-child(5) .progress-fill{animation-delay:1s}.skill-card:nth-child(6) .progress-fill{animation-delay:1.1s}.progress-text{font-size:.85rem;color:#8b1604;font-weight:700}@keyframes fillProgress{from{width:0%}to{width:var(--progress)}}h2{color:#dad5d5}.text-box ul{padding:15px}.text-box ul li{font-size:1.2rem;line-height:2}.div-6 h2{text-align:center}.items-box{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.item,.item-1,.item-2,.item-3,.item-4,.item-5{width:100%;height:350px;overflow:hidden;border-radius:10px;backdrop-filter:blur(6px) saturate(128%);-webkit-backdrop-filter:blur(6px) saturate(128%);background-color:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.24)}.item img:hover{overflow:auto;animation:4s linear forwards scrollMe}.item-2 img:hover{overflow:auto;animation:4s linear forwards scrollMe-2}.item-3 img:hover{overflow:auto;animation:4s linear forwards scrollMe-3}.item-4 img:hover{overflow:auto;animation:4s linear forwards scrollMe-4}.item-5 img:hover{overflow:auto;animation:4s linear forwards scrollMe-5}.btn button{position:absolute;top:310px;width:100%;height:40px;border:none;background:#8b1604}.btn button a{text-decoration:none;color:#fff}@keyframes scrollMe{from{transform:translateY(0)}to{transform:translateY(-76%)}}@keyframes scrollMe-2{from{transform:translateY(0)}to{transform:translateY(-79%)}}@keyframes scrollMe-3{from{transform:translateY(0)}to{transform:translateY(-87%)}}@keyframes scrollMe-4{from{transform:translateY(0)}to{transform:translateY(-76%)}}@keyframes scrollMe-5{from{transform:translateY(0)}to{transform:translateY(-82%)}}@media screen and (max-width:480px){.parent-2{display:flex;flex-direction:column;gap:20px;padding:20px}.div-2 img,.parent-2>div{width:100%}.div-2{width:100%!important}.items-box{display:flex;flex-direction:column;align-items:center}@keyframes scrollMe{from{transform:translateY(0)}to{transform:translateY(-70%)}}@keyframes scrollMe-2{from{transform:translateY(0)}to{transform:translateY(-76%)}}@keyframes scrollMe-3{from{transform:translateY(0)}to{transform:translateY(-82%)}}@keyframes scrollMe-4{from{transform:translateY(0)}to{transform:translateY(-69%)}}@keyframes scrollMe-5{from{transform:translateY(0)}to{transform:translateY(-77%)}}}@media screen and (min-width:768px) and (max-width:1024px){body{font-size:16px;padding:0;margin:0}.parent-2{margin:0 auto;display:flex;justify-content:center;flex-direction:column;gap:20px}.div-1,.div-2,.div-3,.div-4,.div-5,.div-6{width:100%!important;margin:0 auto;text-align:center}.items-box{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.btn button{position:absolute;left:0;width:100%;height:40px;color:#fff;border:none;background:#8b1604;font-family:Graphik-Super}.btn button a{text-decoration:none;color:#fff}}