* {
    box-sizing: border-box;
    /*! width: 500px; */
}

        @font-face {
    font-family: 'IranNastaliq';
    src: url('fonts/IranNastaliq.eot');
    src: url('fonts/IranNastaliq.eot?#iefix') format('embedded-opentype'),
         url('fonts/IranNastaliq.woff2') format('woff2'),
         url('fonts/IranNastaliq.woff') format('woff'),
         url('fonts/IranNastaliq.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
  font-family: 'Vazir';
  src: url('fonts/Vazir.woff2') format('woff2'),
       url('fonts/Vazir.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}




html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background: url() no-repeat center top #4d1115;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    color: #242424;
    direction: rtl;
    line-height: 2;
}

@media screen and (max-width:800px){

    body{
    font-size:12px;
    }
}

img {
border : 0px;
}

p.tips{
padding:0px 0 7px 0;
text-align:justify;
margin:0px;
line-height:17px;
border-bottom:1px #cebf91 dashed;
}
input,textarea,fieldset
{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background:#FFF none repeat scroll 0 0;
	border:1px solid #BBB;
	font-size:11px;
	margin:0px 0px 0px 0;
	padding:5px 5px 5px 5px;
	font-family:Tahoma, Geneva, sans-serif;
}



h2{
color:#2d7513;
padding:0px 0 5px 0;
margin:0px;
font-size:12px;
font-weight:bold;
}
a.read_more{
display:block;
color:#855f35;
float:right;
font-style:italic;
margin:5px 0 0 0;
text-decoration:none;
font-size:12px;
}
a:hover.read_more{
text-decoration:underline;
}

img.left_icon{
float:left;
padding:0px 15px 0px 0px;
}
img.right_icon{
float:right;
padding:0px 0px 0px 15px;
}
.clear{
clear:both;
}
a {
text-decoration: none;
color: #354049;
}
a:hover {
text-decoration: none;
color: #FF3516;
}
#main_container{
width:960px;
height:auto;
margin:auto;
padding:0px;
/*! position:relative; */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.top_leafs{
position:absolute;
top:0px;
right:-15px;
z-index:200;
}
@media screen and (max-width:800px){
    
.leafs_img {
	height: 200px;
    }
}

#header{
width:100%;
height:273px;
margin:0px;
padding:0px;
background:url('Header2.jpg') no-repeat center top;
display: flex;
  justify-content: center;
  align-items: center;

/*! justify-items: center; */
}


.logo {
  
  width: 100%;
    /*! height: 300px; */
    /*! background-image: url('logo2.png'); */
    /*! background-repeat: no-repeat; */
    /*! background-position: center top; */
    display: flex;
    justify-content: center;
    align-items: center;
    
 
}

.img-logo {
    max-width: 100%;
    height: auto;
}


.text-logo {
    font-size: 40px;
    color: #7e5025;
    margin-bottom: 10px; /* اگر خواستی متن از پایین کمی فاصله داشته باشه */
}


@media screen and (max-width:800px){
    #header{
        height: 200px;
            }
            
 
    .text-logo {
    font-size: 30px;
               }
}

.logo a{
color:#7e5025;
text-decoration:none;
}

.main_top {
	width: 100%;
	text-align: center;
}

.other_fal {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
}

.fal_item {
	width: 230px;
}




/*-------------center_content-------------*/
#center_content{
width:100%;
background-color:#fff;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.left_content {
	width: 90%;
	display: flex;
	padding: 10px 10px 10px 10px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
}

.content_top{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}

.content_top h3{
border-bottom: 1px #555 solid;
font-size: 16px;
color: #b03408;
}


.content_right{
width:400px;
float:right;
padding-right:30px;

font :11px;
}

.content_right h3{
border-bottom: 1px #555 solid;
font-size: 14px;
color: #365d04;
margin-bottom: 1em;
}
.content_left{
width:300px;
float:left;
padding-left:30px;
font :11px;
}
.content_left h3{
border-bottom: 1px #555 solid;
font-size: 14px;
color: #365d04;
margin-bottom: 1em;
}


.right_content1{
width:220px;
float:left;
padding:0 10px 30px 30px;
}
.right_content1 img{
margin-top : 20px;
margin-bottom : 10px;
}
.right_content2{
width:220px;
float:left;
padding:0 10px 30px 30px;
}
.right_content2 img{
margin-top : 60px;
margin-bottom : 80px;
}
.right_content3{
width:220px;
float:left;
padding:0 10px 30px 30px;
}
.right_content3 img{
margin-top : 50px;
margin-bottom : 72px;
}

.bottom_content {
	width: 100%;
	/* background: url('bottom_bg1.jpg') no-repeat center top; */
	background-color: #000;
	display: flex;
	justify-content: center;
}

.photos_block{
padding:10px 0 10px 0;
}
.photo_box{
width:114px;
height:111px;
float:left;
display:block;
text-align:center;
margin:0 18px 0 0;
position:relative;
background:url('photo_bg.gif') no-repeat center;
}
img.photo{
padding:6px 0 0 0;
}
a.view{
float:right;
padding:4px 6px 0 0;
text-decoration:none;
color:#706443;
}
.tip_box{
clear:both;
float:left;
width:290px;
padding:0 0 15px 0;
}
.news_box{
clear:both;
float:left;
width:290px;
padding:5px 0 5px 0;
}
.date_box{
width:47px;
height:49px;
float:left;
text-align:center;
line-height:25px;
font-weight:bold;
background:url('date_bg.gif') no-repeat center;
}
span.day{
color:#855f35;
}
span.month{
color:#fef8e5;
}
.news_content{
width:230px;
float:left;
padding:0 0 0 10px;
}

.about_text {

	padding: 40px;
	color: white;
}

@media screen and (max-width: 800px) {
  .about_text {
    padding: 20px !important;
  } }

.about_text a {
	text-decoration : none ; 
	color:#66542B
}
.about_text a:hover {
	text-decoration : none ; 

}



        .page {
        	position: relative;
        }
            
        .poem-desktop {
        display: flex;
        justify-content: space-evenly;
        text-align: center;
        font-family: 'IranNastaliq', sans-serif;
        font-size: 26px;
        line-height: 3;
            
    }
        
        
        .poem-mobile {
        font-family: 'IranNastaliq', sans-serif;
        font-size: 25px;
        display: block;
        line-height: 2;
        text-align: center;
    }
        
         @media (max-width: 768px) {.poem-desktop { display: none; }}
         @media (min-width: 769px) {.poem-mobile { display: none; }}
         
        .title_fal {
        	/* display: block; */
        	/* flex: ; */
        	position: relative;
        	/* display: flex; */
        	width: 100%;
        	/* height: 100px; */
        	/* top: 100px; */
        	text-align: center;
        	font-family: 'IranNastaliq', sans-serif;
        	font-size: 30px;
        }
        
        .column {
            width: 48%;
        }


        .signature {
        	margin-top: 50px;
        	font-size: 18px;
        	max-width: 800px;
        	border-radius: 20px;
        	background: white;
        	position: relative;
        	padding: 20px;
        	border: 3px #ccc dashed;
        
        }
        	@media (max-width: 480px) {
            .signature { font-size: 16px;margin-top: 50px; }}      /* موبایل کوچک */
        

        
        /*.page {
            	 padding: 50px;
            	background: white;
            	width: 600px;
        }
        	@media (max-width: 480px) {.page { padding: 5px; }}*/     /* موبایل کوچک */
.taavil-title {
	color: #8e2023;
	font-weight: bold;
	text-align: right;
	top: 0;
	margin: 0;
	padding: 0 var(--block-gap);
	inset-inline-start: var(--block-gap);
	-webkit-transform: translateY(-50%);
	transform: translateY(-60%);
	position: absolute;
	right: 30px;
	background: white;
} 

.poem-title {
	font-size: 24px;
	text-align: center;
	color: #8e2023;
	font-weight: bold;
	top: -25px;
	margin: 0;
	position: absolute;
	background: white;
	z-index: 20;
	left: 50%;
	transform: translateX(-50%);
	background-color: white;
	width: 120px;
}
	

.poem-box {
    max-width: 800px;
    /*margin: 40px auto;*/
    border-radius: 20px;
    overflow: hidden;
    /*! box-shadow: 0 15px 40px rgba(0,0,0,0.15); */
    background: white;
    position: relative;
    border: 3px #ccc dashed;
}

.poem-content {
    padding: 20px;
    position: relative;
    max-height: 520px;          /* فقط ۴-۵ بیت اول نشون می‌ده */
    transition: max-height 1s ease;
    background: white;
}

.poem-content.full {
    max-height: 4000px;         /* همه غزل باز می‌شه */
}

.fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(transparent, white 80%);
    pointer-events: none;
    transition: opacity 0.8s;
}

.poem-content.full .fade-overlay {
    opacity: 0;
}

.show-more {
	position: absolute;
	bottom: 20px;
	right: 0%;
	transform: translateX(-10%);
	background: rgb(142, 32, 35);
	color: white;
	border: none;
	border-radius: 50px;
	font-family: 'vazir', sans-serif;
	cursor: pointer;
	/*! box-shadow: 0 8px 25px rgba(0,0,0,0.3); */
	z-index: 10;
	transition: all 0.4s;
	font-size: 15px;
	font-weight: 600;
	padding: 10px;
}

#fal-number { font-feature-settings: "ss02" !important; }

.show-more:hover {
    background: #654321;
    transform: translateX(-15%) scale(1.08);
}

.poem-content.full .show-more {
    display: none;
}

/* موبایل: کمی کوچیک‌تر */
@media (max-width: 768px) {
    .poem-content { padding: 20px; max-height: 460px; }
    .show-more {font-size: 12px;padding: 8px;}
}

    .playBtn {
        background: rgb(142, 32, 35);
        color: white;
        border: medium;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 15px;
        cursor: pointer;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 6px 20px;
        transition: 0.4s;
        outline: none;
        transform: scale(1.1);
    }
    
    @media (max-width: 768px) {.playBtn {width: 35px;height: 35px; }}

    .audio-player {
        text-align:center;
        margin-top:80px;
        position: absolute;
        z-index: 999;
        left: 10px;
        bottom: 10px;
    }
    
.menu-hafez {
	display: flex;
	height: 100px;
	max-width: 100%;
	width: 960px;
	justify-content: center;
	background: linear-gradient(to bottom, #8e2023 50%, #fff 50%);
}

  @media (max-width: 800px) {
.menu-hafez {
  height: 50px;
  background: linear-gradient(to bottom, #000 50%, #fff 50%);
    }
}
.bg-menu {
	background: image-set;
	background: url('Menu-bg.png') no-repeat center;
	width: 100%;
  background-size: contain;
  display: flex;
align-items: center;
justify-content: center;
}