/* ===========================================================
   OFFICIAL WEBSITE
   ALIREZA REZAVI
   Version 1.0
===========================================================*/

/*=========================================================
ABOUT PAGE
=========================================================*/

.about-page{

    padding:100px 0 50px;

    background:#111;

    text-align:center;

}


.biography{

    background:#141414;

}


.biography p{

    max-width:850px;

    margin:0 auto 50px;

    text-align:justify;

    line-height:2.5;

    font-size:19px;

    color:#d7d7d7;

}


.author-photo{

    max-width:900px;

    margin:0 auto 70px;

}


.author-photo img{

    width:100%;

    border-radius:10px;

    box-shadow:0 20px 40px rgba(0,0,0,.45);

}


.back-home{

    padding:40px 0 90px;

    text-align:center;

}



/*=========================================================
MOBILE
=========================================================*/

@media(max-width:900px){

.biography p{

    font-size:18px;

    line-height:2.3;

}

}

/*=========================================================
ABOUT BUTTON
=========================================================*/

.about-button{

    display:inline-block;

    margin-top:35px;

    padding:14px 32px;

    border:1px solid #b99768;

    color:#ece8df;

    font-size:17px;

    border-radius:50px;

    transition:.35s;

}


.about-button:hover{

    background:#b99768;

    color:#ffffff;

    transform:translateY(-3px);

}

/*=========================
RESET
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

@font-face {
    font-family: 'Estedad';
    src: url('fonts/Estedad-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Estedad';
    src: url('fonts/Estedad-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Estedad';
    src: url('fonts/Estedad-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

html{

    scroll-behavior:smooth;

}



body{

     direction:rtl;

    background:#0f0f10;

    color:#ece8df;

    font-family:"Estedad",sans-serif;

    line-height:2;

    overflow-x:hidden;

    letter-spacing:0;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;
  h1{
    font-weight:700;
}

h2{
    font-weight:500;
}

h3{
    font-weight:700;
}

p{
    font-weight:400;
}

.book h4{
    font-weight:500;
}
}



/*=========================
IMAGES
=========================*/

img{

    display:block;

    max-width:100%;

}



/*=========================
LINKS
=========================*/

a{

    color:inherit;

    text-decoration:none;

}



/*=========================
CONTAINER
=========================*/

.container{

    width:min(1180px,92%);

    margin:auto;

}



/*=========================
HEADINGS
=========================*/

h1{

    font-size:clamp(42px,6vw,82px);

    font-weight:700;

    letter-spacing:1px;

}



h2{

    font-size:clamp(18px,2vw,28px);

    font-weight:400;

    color:#c9b28b;

}



h3{

    font-size:clamp(34px,4vw,48px);

    text-align:center;

    margin-bottom:18px;

}



p{

    font-size:18px;

    color:#cfcfcf;

}



/*=========================
DECORATIVE LINE
=========================*/

.line{

    width:90px;

    height:2px;

    background:#9f845d;

    margin:0 auto 50px;

}



/*=========================
SECTION
=========================*/

section{

    padding:100px 0;

}



/*=========================
HERO
=========================*/

.hero{

    position:relative;

    width:100%;

    height:clamp(420px,92vh,900px);

    overflow:hidden;

}



.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

}



/* لایه تیره */

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.35),

        rgba(0,0,0,.55),

        rgba(0,0,0,.78)

    );

}



/* متن روی تصویر */

.hero-content{

    position:absolute;

    left:50%;

    bottom:9%;

    transform:translateX(-50%);

    width:min(900px,90%);

    text-align:center;

    z-index:10;

}



.hero-top{

    display:inline-block;

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:13px;

    color:#b59768;

    margin-bottom:20px;

}



.hero h1{

    margin-bottom:12px;

}



.hero h2{

    margin-bottom:30px;

}



.hero p{

    font-size:22px;

    max-width:760px;

    margin:auto;

    color:white;

}


/*=========================================================
ABOUT
=========================================================*/

.about{

    background:#141414;

}

.about p{

    max-width:900px;

    margin:0 auto 22px;

    text-align:justify;

    text-justify:inter-word;

    font-size:19px;

    line-height:2.3;

    color:#d7d7d7;
}



/*=========================================================
STATS
=========================================================*/

.stats{

    background:#101010;

}

.stats .container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

}

.stat{

    text-align:center;

}

.number{

    font-size:clamp(42px,5vw,70px);

    font-weight:700;

    color:#b99768;

    margin-bottom:10px;

}

.text{

    font-size:18px;

    color:#d9d9d9;

}



/*=========================================================
BOOKS
=========================================================*/

.books{

    background:#151515;

}

.books-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:30px;

}



.book{

    transition:.35s;

}



.book:hover{

    transform:translateY(-10px);

}



.book-cover{

    overflow:hidden;

    border-radius:8px;

    background:#232323;

    box-shadow:0 20px 40px rgba(0,0,0,.45);

}



.book-cover img{

    width:100%;

    aspect-ratio:2/3;

    object-fit:cover;

    transition:.45s;

}



.book:hover img{

    transform:scale(1.06);

}



.book h4{

    margin-top:18px;

    text-align:center;

    font-size:18px;

    font-weight:500;

}



/*=========================================================
BUY LINKS
=========================================================*/

.buy{

    background:#101010;

}

.buy-links{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

.buy-links a{

    width:min(700px,95%);

    padding:18px;

    text-align:center;

    border:1px solid #8c7450;

    transition:.3s;

    font-size:18px;

}

.buy-links a:hover{

    background:#8c7450;

    color:white;

}



/*=========================================================
QUOTE
=========================================================*/

.quote{

    background:#181818;

}

.quote blockquote{

    max-width:900px;

    margin:auto;

    text-align:center;

    font-size:clamp(28px,3vw,42px);

    line-height:2;

    color:#f3f3f3;

}



/*=========================================================
FOOTER
=========================================================*/

footer{

    background:#0b0b0b;

    padding:50px 20px;

    text-align:center;

    color:#999;

    border-top:1px solid #222;

}



/*=========================================================
TABLET
=========================================================*/

@media(max-width:1100px){

.books-grid{

grid-template-columns:repeat(4,1fr);

}

}



/*=========================================================
MOBILE
=========================================================*/

@media(max-width:900px){

.stats .container{

grid-template-columns:1fr;

gap:50px;

}

.books-grid{

grid-template-columns:repeat(2,1fr);

gap:20px;

}

section{

padding:70px 0;

}

.about p{

font-size:18px;

}

.buy-links a{

font-size:16px;

padding:16px;

}

.hero h1{

font-size:52px;

}

.hero p{

font-size:18px;

}

}
/*=========================================================
CONTACT
=========================================================*/

.contact{

    background:#111;

    padding:90px 0;

    border-top:1px solid #222;

}

.contact-text{

    text-align:center;

    max-width:700px;

    margin:0 auto 45px;

    color:#cfcfcf;

}

.socials{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:28px;

}

.socials a{

    width:120px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    color:#ece8df;

    transition:.3s;

}

.socials a:hover{

    transform:translateY(-6px);

}

.socials img{

    width:42px;

    height:42px;

    object-fit:contain;

    transition:.3s;

}

.socials a:hover img{

    transform:scale(1.12);

}

.socials span{

    font-size:15px;

    color:#d7d7d7;

}



/* Mobile */

@media(max-width:700px){

.socials{

gap:24px;

}

.socials a{

width:90px;

}

.socials img{

width:34px;

height:34px;

}

}