:root{--pc:#555;--pdc:#333;--plc:#888}
@font-face {font-family:ku;src:url('https://fonts.gstatic.com/s/notokufiarabic/v21/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2')}
body{font-family:ku;;margin:0;padding:0;background-color:#f1f1f1}
p,h2,h3,h4,li{unicode-bidi:plaintext;text-align:start;user-select:none}
p,h2,h3,h4{color:var(--pc)}
ul{list-style-type:none;padding:0;margin:0}
a{color:#fff;text-decoration:none}
input,button,textarea{font-family:ku;border:none}
.container{width:100%;max-width:1000px;margin:0 auto}
/*mobile */
@media(min-width:1px)and (max-width:1024px){
    .container{width:calc(100% - 24px);margin:0 12px;}
}

.btn{background-color:var(--pc);padding:6px 12px;color:white;float:left;border-radius:6px;font-size:14px;opacity:1;transition:opacity 300ms}
.btn:hover{opacity:0.8;transition:opacity 300ms}

/* MARK:boxstyle */
.box{background-color:white;border-radius:8px;box-shadow:0 0 8px #bbb}

/*MARK:NAVBAR */
nav{background-color:var(--pc);overflow:hidden;padding:12px 12px 0 12px;border-bottom:2px solid #ddd;}
nav a>img{width:50px;height:50px;background-color:white;border-radius:50%;padding:2px}
nav ul{float:right}
nav ul>li{float:right}
nav ul>li{border:none;align-content:end;text-align:center;color:white;margin:0;min-width:50px;height:50px;padding:0 12px 18px 12px;position:relative;opacity:0.8;transition:opacity 300ms}
nav ul>li:not([selected]):hover{opacity:1;transition:opacity 300ms}
nav ul>li[selected]{opacity:1}
nav li>a:not(li[selected]>a){cursor: pointer}
nav ul>li[selected]::before{content:'';height:4px;width:100%;position:absolute;background-color:white;bottom:0;left:0}
h2{margin:12px}
@media(min-width:1px)and (max-width:450px){
    nav{padding:12px 0 0 0;position:fixed;top:0;left:0;width:100%;z-index:1}
    nav ul>li{font-size:14px;height:30px;padding:0 6px 18px 6px}
    nav a>img{width:40px;height:40px;margin-top:-4px}
}


/*MARK:POST-SLIDER */
.content h2{margin:64px 4px 24px 0;padding:0 8px;border-right:8px solid var(--pc)}
.post-slider ul{display:flex;flex-direction:column;flex-wrap:wrap;background-color:white;overflow-x:auto;height:250px}
ul::-webkit-scrollbar{height:12px}
ul::-webkit-scrollbar-track{background-color:#eee;border-top:1px solid #ddd;}
ul::-webkit-scrollbar-thumb{background-color:#ccc}
li.appcard:first-child{margin-right:8px}
li.appcard:last-child{margin-left:8px;border-left:none;}
li.appcard{width:300px;float:left;height:220px;padding:16px;overflow:hidden;border-left:1px solid #ddd;}
li.appcard>img{width:70px;height:70px;float:right;border-radius:16px;overflow:hidden;box-shadow:0 0 4px #aaa;}
li.appcard>h4{width:100%;float:right;padding-top:8px;margin:0}
li.appcard>p{width:100%;height:100px;font-size:15px;padding:0;overflow:hidden}


/*MARK:POSTS */
article{text-align:center;align-content:center;margin-bottom:64px}
ul.posts{overflow:hidden}
ul.posts li{background-color:white;width:calc(100% / 2 - 12px);height:450px;float:left;margin:8px 6px;border-radius:8px;overflow:hidden;box-shadow:0 0 4px #aaa;position:relative}
ul.posts img{width:100%}
ul.posts h3{padding:0;margin:12px 12px 8px 12px;font-size: 22px}
ul.posts p{margin:0 12px;color:var(--pc);height:130px;overflow:hidden}
ul.posts li>a button{position:absolute;left:12px;bottom:12px;background-color:var(--pc);padding:4px 8px;border-radius:6px;opacity:1;transition:opacity 300ms}
ul.posts li>a button:hover{opacity:0.8;transition:opacity 300ms}
/*mobile */
@media(min-width:524px)and (max-width:630px){
    ul.posts li{background-color:white;width:calc(100% - 12px);height:500px}
}
@media(min-width:1px)and (max-width:525px){
    ul.posts li{background-color:white;width:calc(100% - 12px);height:450px}
}


/* MARK:grid-content */
.grid-content{display:grid;grid-template-columns:calc(70% - 24px) 30%;column-gap:24px;padding:75px 0}

/* MARK:POST*/
.post{overflow:hidden;margin-bottom:32px}
.post>h2{margin:12px;background-color:white}
.post>img{width:100%}
.post>p{padding:0 12px;font-size:18px}
.post>ul{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;height:310px}
.post>ul img{height:300px}
.post>h4{margin:0;padding:12px}
.post>a{display:block;width:fit-content;margin:32px auto 64px auto;cursor:pointer;scale:1;transition:scale 300ms}
.post>a:hover{scale:1.1;transition:scale 300ms}

/*mobile */
@media(min-width:1025px){
    .grid-content{column-gap:12px}
    aside>.sugges>ul li{margin:8px 0}
}
@media(min-width:850px)and (max-width:1024px){
    .grid-content{grid-template-columns:calc(70% - 12px) 30%;column-gap:12px;}
}
@media(min-width:700px)and (max-width:849px){
    .grid-content{display:block}
    aside>.sugges>ul li{width:calc((100% / 3) - 12px);float:left;margin:8px 6px;}
    aside>.sugges>ul{overflow:hidden}
}
@media(min-width:600px)and (max-width:699px){
    .grid-content{display:block}
    aside>.sugges>ul li{width:calc((100% / 2) - 12px);float:left;margin:8px 6px;}
    aside>.sugges>ul{overflow:hidden}
}
@media(min-width:1px)and (max-width:599px){
    .grid-content{display:block}
    aside>.sugges>ul li{width:calc(100% - 12px);margin:8px auto;}
    aside>.sugges>ul{overflow:hidden}

}

/* MARK:ASIDE*/
aside{height:fit-content}
aside>.sugges>h3{
    margin-top:0;
    border-right:6px solid var(--pc);
    padding:6px 8px;
}
aside>.sugges{
    background-color:white;
    padding:8px 12px;
    box-shadow:0 0 8px #aaa;
    border-radius:8px;

}

aside>.sugges>ul li{height:150px;overflow:hidden;box-shadow:0 0 4px #aaa;border-radius:8px;scale:1;transition:scale 300ms}
aside>.sugges>ul li:last-child{width:100%}
aside img{width:100%;height:100%;object-fit:cover;}
aside .btn{display:block;text-align:center;width:100%;margin-top:24px;padding:6px 0;float:none}
aside>.sugges>ul li:not(:last-child):hover{scale:1.05;transition:scale 300ms}
aside>.sugges>ul li:last-child{box-shadow:none;height:fit-content;}


/* MARK:FORM */
input,textarea{outline:none;font-size:16px;unicode-bidi:plaintext;text-align:start;color:#666;padding:8px 12px}
.contact{min-height:500px;height:calc(100% - 371px)}
.contact .form{width:100%;margin:100px auto 0 auto;max-width:550px;position:relative}
.contact .form>.fields{background-color:white;border-radius:8px;overflow:hidden;box-shadow:0 0 4px #ddd}
.red{background-color:#ff6b6b}
.green{background-color:#6cdb5d}
.contact .form #w{position:absolute;top:-45px;color:white;font-size:14px;padding:4px 12px;border-radius:6px;opacity:0;transition:opacity 300ms}
.contact .form #w[active]{opacity:1;transition:opacity 300ms}
.contact .form>.fields>*::placeholder{color:#999}
.contact .form>.fields>input{width:100%;background-color:transparent;border-bottom:1px solid #ddd;padding:12px}
.contact .form>.fields>input:disabled{background-color:#fafafa;}
.contact .form>.fields>textarea{border:none;resize:none;width:100%;padding:8px 12px;min-height:200px}
.contact .form>input[type="submit"]{background-color:var(--pc);color:white;width:100px;border-radius:4px;text-align:center;margin:24px 0;padding:4px;opacity:0.9;transition:opacity 300ms}
.contact .form>input:not(:disabled):hover{opacity:1}
.contact .form>input:disabled{opacity:0.7}
.contact .form[loading]::before{content:'';display:block;width:90px;height:90px;border:4px solid var(--pc);opacity:0.8;border-right-color:transparent;border-radius:50%;position:absolute;top:calc(50% - 45px);left:calc(50% - 45px);animation-name:loading;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:linear}
@keyframes loading{0%{rotate:0deg}100%{rotate:360deg}}
h2.right-border{margin:64px 0 24px 0;padding:0 8px;border-right:8px solid var(--pc)}
/* mobile */
@media(min-width:450px)and (max-width:690px){
    .container>h2{margin-top:45px}
    .contact{height:calc(100% - 368px)}
}
@media(min-width:401px)and (max-width:450px){
    .container>h2{margin-top:90px}
    .contact{height:calc(100% - 331px)}
}
@media(min-width:319px)and (max-width:400px){
    .container>h2{margin-top:100px}
    .contact{height:calc(100% - 333px)}
}
@media(min-width:1px)and (max-width:320px){
    .container>h2{margin-top:100px}
    .contact{height:calc(100% - 329px)}
}

/* MARK:FOOTER */
footer{width: 100%;background-color:var(--pdc);overflow:hidden;height:75px;align-content: center;border-top:4px solid var(--pc)}
footer ul{float:right;width:fit-content;padding:2px 0px}
footer ul li{float:left;margin:0 12px;opacity:0.8;transition:opacity 300ms}
footer ul li:hover{opacity:1;transition:opacity 300ms}
footer ul li a{cursor:pointer}
footer div{overflow:hidden;align-content:center}
footer p{float:left;width:fit-content;opacity:0.6;font-size:12px;margin:0;padding:8px 0;color:white}
/*mobile */
@media(min-width:1px)and (max-width:690px){
    footer{font-size:14px;height:fit-content}
    footer ul{margin:12px auto 40px auto;float:none}
    footer p{float:none;margin: 0 auto;font-size:10px}
}
@media(min-width:1px)and (max-width:400px){
    footer{font-size:12px}
    footer ul{margin-bottom:32px}
    footer ul li{margin:0 8px}
}
@media(min-width:1px)and (max-width:320px){
    footer{font-size:10px}
    footer ul{margin-bottom:32px}
    footer ul li{margin:0 6px}
    footer p{font-size:8px}
}

iframe{width:-webkit-fill-available;margin-top:24px;width:-moz-available}