﻿body,ul,li,h1,h2,h3,h4,h5,h6,p {
    padding:0;
    margin:0;
}
:root {
    --primary-color-nd: #1a594c;
    --gold-color-nd: #967231;  
    --bg-color-nd: #faf9f7;    
}
       
@font-face {
      font-family: 'Modam-Regular';
    src: url('../font/Modam-Regular.woff2') format('woff2'),
        url('../font/Modam-Regular.woff') format('woff'),
        url('../font/Modam-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IranNastaliq';
    src: url('../font/IranNastaliq.woff2') format('woff2'),
        url('../font/IranNastaliq.woff') format('woff'),
        url('../font/IranNastaliq.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
	font-family: 'Linearicons-Free';
	src:url('../font/Linearicons-Free.eot?w118d');
	src:url('../font/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
		url('../font/Linearicons-Free.woff2?w118d') format('woff2'),
		url('../font/Linearicons-Free.woff?w118d') format('woff'),
		url('../font/Linearicons-Free.ttf?w118d') format('truetype'),
		url('../font/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {
  background: #faf9f7;
  font-family: 'Modam-Regular';
}
body::-webkit-scrollbar {
    width:0.6em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
      background: #1c5a4d;
  border-radius:5px;
  outline: 1px solid rgba(0, 166, 147, 0.00);
}

.lnr{font-family:Linearicons-Free;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.lnr-home:before{content:"\e800"}.lnr-apartment:before{content:"\e801"}.lnr-pencil:before{content:"\e802"}.lnr-magic-wand:before{content:"\e803"}.lnr-drop:before{content:"\e804"}.lnr-lighter:before{content:"\e805"}.lnr-poop:before{content:"\e806"}.lnr-sun:before{content:"\e807"}.lnr-moon:before{content:"\e808"}.lnr-cloud:before{content:"\e809"}.lnr-cloud-upload:before{content:"\e80a"}.lnr-cloud-download:before{content:"\e80b"}.lnr-cloud-sync:before{content:"\e80c"}.lnr-cloud-check:before{content:"\e80d"}.lnr-database:before{content:"\e80e"}.lnr-lock:before{content:"\e80f"}.lnr-cog:before{content:"\e810"}.lnr-trash:before{content:"\e811"}.lnr-dice:before{content:"\e812"}.lnr-heart:before{content:"\e813"}.lnr-star:before{content:"\e814"}.lnr-star-half:before{content:"\e815"}.lnr-star-empty:before{content:"\e816"}.lnr-flag:before{content:"\e817"}.lnr-envelope:before{content:"\e818"}.lnr-paperclip:before{content:"\e819"}.lnr-inbox:before{content:"\e81a"}.lnr-eye:before{content:"\e81b"}.lnr-printer:before{content:"\e81c"}.lnr-file-empty:before{content:"\e81d"}.lnr-file-add:before{content:"\e81e"}.lnr-enter:before{content:"\e81f"}.lnr-exit:before{content:"\e820"}.lnr-graduation-hat:before{content:"\e821"}.lnr-license:before{content:"\e822"}.lnr-music-note:before{content:"\e823"}.lnr-film-play:before{content:"\e824"}.lnr-camera-video:before{content:"\e825"}.lnr-camera:before{content:"\e826"}.lnr-picture:before{content:"\e827"}.lnr-book:before{content:"\e828"}.lnr-bookmark:before{content:"\e829"}.lnr-user:before{content:"\e82a"}.lnr-users:before{content:"\e82b"}.lnr-shirt:before{content:"\e82c"}.lnr-store:before{content:"\e82d"}.lnr-cart:before{content:"\e82e"}.lnr-tag:before{content:"\e82f"}.lnr-phone-handset:before{content:"\e830"}.lnr-phone:before{content:"\e831"}.lnr-pushpin:before{content:"\e832"}.lnr-map-marker:before{content:"\e833"}.lnr-map:before{content:"\e834"}.lnr-location:before{content:"\e835"}.lnr-calendar-full:before{content:"\e836"}.lnr-keyboard:before{content:"\e837"}.lnr-spell-check:before{content:"\e838"}.lnr-screen:before{content:"\e839"}.lnr-smartphone:before{content:"\e83a"}.lnr-tablet:before{content:"\e83b"}.lnr-laptop:before{content:"\e83c"}.lnr-laptop-phone:before{content:"\e83d"}.lnr-power-switch:before{content:"\e83e"}.lnr-bubble:before{content:"\e83f"}.lnr-heart-pulse:before{content:"\e840"}.lnr-construction:before{content:"\e841"}.lnr-pie-chart:before{content:"\e842"}.lnr-chart-bars:before{content:"\e843"}.lnr-gift:before{content:"\e844"}.lnr-diamond:before{content:"\e845"}.lnr-linearicons:before{content:"\e846"}.lnr-dinner:before{content:"\e847"}.lnr-coffee-cup:before{content:"\e848"}.lnr-leaf:before{content:"\e849"}.lnr-paw:before{content:"\e84a"}.lnr-rocket:before{content:"\e84b"}.lnr-briefcase:before{content:"\e84c"}.lnr-bus:before{content:"\e84d"}.lnr-car:before{content:"\e84e"}.lnr-train:before{content:"\e84f"}.lnr-bicycle:before{content:"\e850"}.lnr-wheelchair:before{content:"\e851"}.lnr-select:before{content:"\e852"}.lnr-earth:before{content:"\e853"}.lnr-smile:before{content:"\e854"}.lnr-sad:before{content:"\e855"}.lnr-neutral:before{content:"\e856"}.lnr-mustache:before{content:"\e857"}.lnr-alarm:before{content:"\e858"}.lnr-bullhorn:before{content:"\e859"}.lnr-volume-high:before{content:"\e85a"}.lnr-volume-medium:before{content:"\e85b"}.lnr-volume-low:before{content:"\e85c"}.lnr-volume:before{content:"\e85d"}.lnr-mic:before{content:"\e85e"}.lnr-hourglass:before{content:"\e85f"}.lnr-undo:before{content:"\e860"}.lnr-redo:before{content:"\e861"}.lnr-sync:before{content:"\e862"}.lnr-history:before{content:"\e863"}.lnr-clock:before{content:"\e864"}.lnr-download:before{content:"\e865"}.lnr-upload:before{content:"\e866"}.lnr-enter-down:before{content:"\e867"}.lnr-exit-up:before{content:"\e868"}.lnr-bug:before{content:"\e869"}.lnr-code:before{content:"\e86a"}.lnr-link:before{content:"\e86b"}.lnr-unlink:before{content:"\e86c"}.lnr-thumbs-up:before{content:"\e86d"}.lnr-thumbs-down:before{content:"\e86e"}.lnr-magnifier:before{content:"\e86f"}.lnr-cross:before{content:"\e870"}.lnr-menu:before{content:"\e871"}.lnr-list:before{content:"\e872"}.lnr-chevron-up:before{content:"\e873"}.lnr-chevron-down:before{content:"\e874"}.lnr-chevron-left:before{content:"\e875"}.lnr-chevron-right:before{content:"\e876"}.lnr-arrow-up:before{content:"\e877"}.lnr-arrow-down:before{content:"\e878"}.lnr-arrow-left:before{content:"\e879"}.lnr-arrow-right:before{content:"\e87a"}.lnr-move:before{content:"\e87b"}.lnr-warning:before{content:"\e87c"}.lnr-question-circle:before{content:"\e87d"}.lnr-menu-circle:before{content:"\e87e"}.lnr-checkmark-circle:before{content:"\e87f"}.lnr-cross-circle:before{content:"\e880"}.lnr-plus-circle:before{content:"\e881"}.lnr-circle-minus:before{content:"\e882"}.lnr-arrow-up-circle:before{content:"\e883"}.lnr-arrow-down-circle:before{content:"\e884"}.lnr-arrow-left-circle:before{content:"\e885"}.lnr-arrow-right-circle:before{content:"\e886"}.lnr-chevron-up-circle:before{content:"\e887"}.lnr-chevron-down-circle:before{content:"\e888"}.lnr-chevron-left-circle:before{content:"\e889"}.lnr-chevron-right-circle:before{content:"\e88a"}.lnr-crop:before{content:"\e88b"}.lnr-frame-expand:before{content:"\e88c"}.lnr-frame-contract:before{content:"\e88d"}.lnr-layers:before{content:"\e88e"}.lnr-funnel:before{content:"\e88f"}.lnr-text-format:before{content:"\e890"}.lnr-text-format-remove:before{content:"\e891"}.lnr-text-size:before{content:"\e892"}.lnr-bold:before{content:"\e893"}.lnr-italic:before{content:"\e894"}.lnr-underline:before{content:"\e895"}.lnr-strikethrough:before{content:"\e896"}.lnr-highlight:before{content:"\e897"}.lnr-text-align-left:before{content:"\e898"}.lnr-text-align-center:before{content:"\e899"}.lnr-text-align-right:before{content:"\e89a"}.lnr-text-align-justify:before{content:"\e89b"}.lnr-line-spacing:before{content:"\e89c"}.lnr-indent-increase:before{content:"\e89d"}.lnr-indent-decrease:before{content:"\e89e"}.lnr-pilcrow:before{content:"\e89f"}.lnr-direction-ltr:before{content:"\e8a0"}.lnr-direction-rtl:before{content:"\e8a1"}.lnr-page-break:before{content:"\e8a2"}.lnr-sort-alpha-asc:before{content:"\e8a3"}.lnr-sort-amount-asc:before{content:"\e8a4"}.lnr-hand:before{content:"\e8a5"}.lnr-pointer-up:before{content:"\e8a6"}.lnr-pointer-right:before{content:"\e8a7"}.lnr-pointer-down:before{content:"\e8a8"}.lnr-pointer-left:before{content:"\e8a9"}

        .hero-section {
            height: 260vh; 
            position: relative;
          
        }

        .sticky-wrapper {
            position: sticky;
            top: 0;
            height: 100vh;
            align-items: center;
            justify-content: center;min-height:550px;
        }

        .banner-wrapper {
            position: relative;
            min-height:550px;
            width:100%;
            aspect-ratio: 16 / 9;
            height:100vh;
            overflow: hidden;
            background: #fff;
        }

            .banner-wrapper img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .sketch-layer {
            z-index: 2;
            mask-image: linear-gradient(to bottom, black calc(100% - var(--reveal, 0%)), transparent calc(115% - var(--reveal, 0%)));
            -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--reveal, 0%)), transparent calc(115% - var(--reveal, 0%)));
        }

        .content-section {
         padding:60px 0 0 0;
        }

        .grid-container {
           max-width:90%;
           margin:0 auto;
           padding:50px 0 40px 0;
        }

          .info-overlay {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 10;
    color: #2c3e50;
    text-align: right;
    pointer-events: none;
  }

  .info-overlay h1 {
    margin: 0;
    font-size: 2.5rem;
    opacity: calc(1 - var(--progress, 0));
    transform: translateY(calc(var(--progress, 0) * -20px));
  }

@font-face {
    font-family: 'IranNastaliq';
    src: url('../font/IranNastaliq.ttf') format('truetype');
}
.ti-web{
    font-family: 'IranNastaliq';
    color:#1c5a4d;
    font-size:40px;
    line-height:40px;
}


.ti-en{
  color: #876c35;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
    padding-top: 12px;
}
.ti-en span{
    font-weight:bold;
}

header{
   height: 69px;
    position: relative;
    z-index: 9999999;
}

.img-responsive{
    width:100%;
}
.bt-m-mg{
    background-image: url('../images/bn8888u.png');
    height:550px;
    position:relative;
    background-size:100% 100%;
}
.image-compare-container {
    position: relative;
    width: 100%;
    line-height: 0;
 
}

.image-compare-container img {
    width: 100%;
    height: 100%;
    transition: opacity 2s ease-in-out;

}

.image-after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.image-before {
    position: relative;
    z-index: 2;
    opacity: 1;
}


.is-active .image-before {
    opacity: 0;
}
/*.bt-m-mg:before{
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(250 249 247) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
    position: absolute;
    bottom: -2px;
    height: 200px;
    content: "";
    width: 100%;
    z-index: 99;
}*/

.p-cl{
    text-align:center;
     color: var(--primary-color-nd);
  font-family: 'IranNastaliq';
    font-size:52px;
    position:absolute;
    width:100%;top:0;
    z-index:99999;
}


.c-ic{
    display: block;
    margin: 0 auto 16px auto!important;
    width:54px!important;
    height:auto!important;
}
.logo-nd{
    position:absolute;
    right:15px;
    width:65px;
}
.head-ce{
    max-width:90%;
    margin:0 auto;
    position:relative;
    padding:8px 0;
}
.right-nd{
    float:right;
}
.clear{
    clear:both
}
.list-lng{
    text-align:left;
}
.list-lng li a{
  color: #1c5a4d;
  padding:21px 4px 0 4px;
    display: block;
    position:relative;
}
.list-lng li a:before{
position: absolute;
    width: 4px;
    height: 4px;
    background-color: #1c5a4d;
    border-radius: 50%;
    content: "";
    top: 31px;
    right: -3px;
}
.link-ce{
margin: 0 auto;
    text-align: center;
    color: var(--gold-color-nd);
    width: 169px;
    height: 48px;
    border-radius: 38px;
    display: block;
    line-height: 47px;
    font-size: 17px;
    margin-top:24px;
    font-family: 'Modam-Regular';
    border: 1px solid  var(--gold-color-nd);
     position:relative;
     -webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
    background: #faf9f7;
}
.link-ce:hover{
    background-color:#1c5a4d;
    color:#fff;
    border: 1px solid #1c5a4d;
}
.link-ce:hover:before{
    bottom:-21px;
}
.link-ce:before{
    position: absolute;
    width: 100%;
    background-image: url(../images/bt.png);
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    left: 0;
    height: 22px;
    bottom: -19px;
       -webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.col-nd{
    width:12.5%;
    float:right;
    text-align:center;
    color:#1c5a4d;
    position:relative;
}
.col-nd:before{
background-color: #ece5d5;
    position: absolute;
    height: 43px;
    width: 1px;
    bottom: 29px;
    left: -2px;
    content: "";
}
.col-nd:nth-child(8):before{
    display:none;
}
.col-nd a{
      color:#1c5a4d;
      font-weight:bold;
      font-size:14px;
}
.img-br{
    display:block;
    margin:0 auto;
}
.br-88{
    display:block;
    margin:16px auto;
}
.dv-container-nd{
    max-width:90%;
    margin:0 auto;
}


.hafez-menu-container {
    direction: rtl;
    width: 100%;
 
}

.hafez-menu-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap; /* در مانیتورهای کوچک‌تر آیتم‌ها می‌شکنند */
    gap: clamp(16px, 1vw, 40px); /* فاصله هوشمند بین آیتم‌ها */
    list-style: none;
    margin: 0 auto;
    max-width: 1600px; /* جلوگیری از پخش شدن بیش از حد در مانیتور Ultra-wide */
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 120px; /* اجازه رشد و کوچک شدن منعطف */
    max-width: 180px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.menu-item:hover {
    transform: translateY(-5px);
}
.logo-ft-ce{
    width:80px;
    display:block;
    margin:0 auto;
  
}
.bc-lg-ce-ft{
    position:relative;
     max-width:600px;
     margin:32px auto 0 auto;
}
.bc-lg-ce-ft:before{
  background-image: url(../images/op.png);
    position: absolute;
    top: 25px;
    left: 0px;
    content: "";
    max-width: 600px;
    height: 39px;
    width: 100%;
    background-size: 100% 100%;
}
.icon-wrapper {
    /*width: clamp(40px, 6vw, 73px); 
    height: clamp(40px, 6vw, 80px);*/
        width: clamp(40px, 11vw, 87px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:8px;
}
.icon-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.divider {
    width: 68px;
    height: 13px;
    margin: 8px 0 16px 0;
    position: relative;
    background-image: url('../images/55li.png');
    background-size:100% 100%;
}

.menu-text {
    font-weight: bold;
    color: var(--primary-color-nd);
    text-align: center;
    font-size: clamp(0.75rem, 1.3vw, 1.38rem);
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 2000px) {
    .hafez-menu-list {
        max-width: 2200px;
    }
    .menu-text {
        font-size: 1.7rem;
    }
    .p-cl{
        font-size:58px;
    }
}

@media (max-width: 768px) {
    .hafez-menu-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 10px;
    }
    .menu-item {
        max-width: 100%;
    }
}

.img-br {
    width: 64px;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
    cursor: pointer;
}

/*.col-nd:hover .img-br{
    filter: 
        grayscale(0) 
        opacity(1) 
        drop-shadow(0 0 12px rgba(150, 114, 49, 0.11)) 
        drop-shadow(0 0 25px rgba(150, 114, 49, 0.11));
    
    transform: translateY(-5px) scale(1.05);
}*/
.bird-wrap{

    position:absolute;

    inset:0;

    z-index:6;

    pointer-events:none;

    overflow:hidden;
}
.bird{
    position: absolute;
    left: 67%;
    top: 15%;
    width: 25px;
    height: auto;
    opacity: 0;
    color: #000;
    filter: blur(.1px);
    transform-origin: center;
}
.bird-2{
    top:18%;
    left:70%;
}
.bird path{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
}
.hafezieh-story.fly .bird{
    animation:
        birdFlight 4s ease-out forwards;
    opacity:1;
}
.hafezieh-story.fly .wing-left{

    transform-origin:right center;

    animation:
        wingLeft .45s ease-in-out infinite alternate;
}
.hafezieh-story.fly .wing-right{
   transform-origin:left center;
    animation:
        wingRight .45s ease-in-out infinite alternate;
}
@keyframes birdFlight{

    0%{

        opacity:0;

        transform:
            translate(0,0)
            scale(.8);
    }

    10%{

        opacity:.7;
    }

    50%{

        transform:
            translate(120px,-80px)
            scale(.95);
    }

    100%{

        opacity:0;

        transform:
            translate(260px,-180px)
            scale(1.05);
    }
}
@keyframes wingLeft{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(-18deg);
    }
}

@keyframes wingRight{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(18deg);
    }
}
.hafezieh-story.fly .bird{
    animation: birdFlight 6s ease-out forwards;
}
a:hover{
    text-decoration:none;
}
.hafezieh-story{
    position: relative;
    overflow: hidden;
    min-height: 690px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:32px;

}
.hybrid-image,
.watercolor-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 88%;
    margin-top: 117px;

}
.hybrid-image{
    z-index:1;
    animation: slowZoom 16s ease-in-out infinite alternate;
}

@keyframes slowZoom{
    from{ transform:scale(1); }
    to{ transform:scale(1); }
}


.watercolor-image{
    z-index:3;
    opacity:1;

    filter:blur(0px) brightness(1);
    transition: all 6.2s ease;
    will-change: opacity, transform, filter;
}

.watercolor-image.reveal{
    opacity:0;

    filter:blur(0px) brightness(1);
    pointer-events:none;
}
.pool-ripple{
position: absolute;
    z-index: 2;
    left: 39%;
    bottom: 29px;
    width: 22%;
    height: 27%;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background: repeating-radial-gradient(circle, rgba(255, 255, 255, .12) 0, rgba(255, 255, 255, .12) 3px, transparent 4px, transparent 14px);
}

.hafezieh-story.active .pool-ripple{
    opacity:.6;
    animation: ripple 8s linear infinite;
}

@keyframes ripple{
    from{ background-position:0 0; }
    to{ background-position:0 180px; }
}

.light-pass{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    opacity:0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,.20) 50%,
        transparent 60%
    );
}

.hafezieh-story.active .light-pass{
    opacity:.8;
    animation: lightPass 10s linear infinite;
}

@keyframes lightPass{
    from{ transform:translateX(-130%); }
    to{ transform:translateX(130%); }
}
.quote-box{
    position:absolute;
    top:36px;
    left:50%;
    transform:translate(-50%,40px);
    z-index:10;
    width:min(900px,90%);
    text-align:center;
    opacity:0;
    transition: all 1.4s ease;
    will-change: transform, opacity;
}

.quote-box.show{
    opacity:1;
    transform:translate(-50%,0);
}
input:focus,input:active,input:focus-visible{
    outline:none!important;
}
.search-bx {
    border-radius: 90px 90px 90px 90px !important;
    width: 194px;
    float: left;
    border: 1px solid rgba(28, 90, 77, 0.80);
    height: 39px;
    position: absolute;
    top: 18px;
    left: 16px;
}

.btn-se {
    width: 30px;
    padding: 0px 5px;
    height: 39px;
    background: none;
    position: relative;
    position:absolute;
    left:8px;
    border: none;
}
.btn-se:before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 27 27' fill='none'%3E%3Cpath d='M11.1666 21.25C16.7355 21.25 21.2499 16.7355 21.2499 11.1667C21.2499 5.59779 16.7355 1.08333 11.1666 1.08333C5.59771 1.08333 1.08325 5.59779 1.08325 11.1667C1.08325 16.7355 5.59771 21.25 11.1666 21.25Z' stroke='%23185848'/%3E%3Cpath d='M18.5 18.5L25.8333 25.8333' stroke='%23185848' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    width: 20px;
height: 20px;
content:"";
display: block;
    left: 0px;
    position: relative;
    top:-2px;
}
.tx-se {
    border: none;
    background: none;
    width: 90%;
    height: 39px;
    float: right;
    direction: rtl;
    line-height: 40px;
    padding-right: 16px;
    border-radius: 10px;
    direction: rtl;
    font-size: 11px;
}
   #search-acan{
  background:none;
  border:none;
    display:none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 27 27' fill='none'%3E%3Cpath d='M11.1666 21.25C16.7355 21.25 21.2499 16.7355 21.2499 11.1667C21.2499 5.59779 16.7355 1.08333 11.1666 1.08333C5.59771 1.08333 1.08325 5.59779 1.08325 11.1667C1.08325 16.7355 5.59771 21.25 11.1666 21.25Z' stroke='%232f685d'/%3E%3Cpath d='M18.5 18.5L25.8333 25.8333' stroke='%232f685d' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        width:22px;
        height:22px;
        background-position:center;
        background-repeat:no-repeat;
      position: absolute;
      left:16px;
        top:17px;
    }

.normal-box{ 
  position:fixed;
  background-color:#faf9f7;
  height:100%;
  z-index:999999999;
  width:100%;  
  top:0;
    background-image: url('../images/f-bc.png');
  box-shadow: none;
  background-color: #faf9f7;
        background-repeat: no-repeat;
    background-position: bottom;
}
.blak-box{
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background-color: black; 
  left: 0; top: 0; 
  opacity: 0.2;
  
}
.x-btn {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 3px;
    top: 8px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(28, 90, 77, 0.80);
    background-color: rgba(238, 238, 238, 0.00);
    border: none;
    margin-top: 1%;
    margin-right: 1%;
}
#toggle-search input[type="text"] {
 margin-bottom: 20px;
    width: 95%;
    border: none;
    padding: 15px 54px 15px 0;
    font-size: 14px;
    text-align: right;
    color: #000;
    border-radius: 0;
    background: transparent;
    outline: none;
    border-bottom: 1px solid #e7e0cd;
}
.text-ce-nd span{
    padding:0 16px;
}
footer{
    padding:30px 0 8px 0;
    position:relative;
  background-color: #1a594c; margin-top:92px;
}
footer:before{
    content: "";
    position: absolute;
    top: -64px;
    left: 0;
    right: 0;
    height: 65px;
    width: 100%;
    background-image: url(../images/fty.png);
    background-size: 100% 100%;
    z-index: 99;
}
.ft-ce{
    max-width:90%;
    margin:0 auto;
}
.logo-ft{
    width: 100px;
    float: right;
    position: relative;
    top: -8px;
}
.list-ft li a{
    color: #e1dac3;
    padding: 0 24px;
    position: relative;
    font-size: clamp(15px, 0.9vw, 22px);
}
.list-ft li:hover a{
    color: #f3d499;

}
.list-ft li a:before{
    position: absolute;
    width: 5px;
    height: 5px;
    background-color:#e1dac3;
    right: 8px;
    top: 9px;
    content: "";
    border-radius: 50%;
}
.d-flx-nd{
    padding:48px 0 0 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
       color: #185848;
    font-size:14px;
    max-width:680px;
    margin:0 auto;
}
.p-ads-ft svg{
    width:18px!important;
    height:18px!important;
}
.p-ads-ft{
    display:flex;
    align-items:center;
    column-gap:4px;
}
.lg-ce{
     display:block;
    margin:0 auto 8px auto;
    width:50px;
}
.lg-br-ce{
    display:block;
    margin:32px auto 0px auto;
    max-width:100%;
}
.power_by{
    padding:24px 0 40px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size: clamp(12px, 0.7vw, 15px);
    color:#e1dac3;
    direction:rtl;
    column-gap:4px;
}
.power_by a{
    color: #e1dac3;
}
.caption-nd {
    position: absolute;
    width: clamp(280px, 25vw, 550px);
    top: clamp(100px, 15vw, 200px); 
    left: 17%;
    z-index: 99999;
    font-size: clamp(18px, 1.8vw, 36px); 
    transition: opacity 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img-lg {
    width: 100%;
    max-width: clamp(180px, 22vw, 500px);
    height: auto;
}

.ti-web {
    font-family: 'IranNastaliq';
    color: #1c5a4d;
    font-size: clamp(28px, 2.5vw, 60px);
    line-height: 1.2;
}

.ti-wb {
    color: #2f685d;
    font-size: clamp(18px, 1.6vw, 34px);
    padding: clamp(6px, 0.8vw, 16px) 0;
}

.img-hd {
        display: block;
    margin: 0 auto;
    width: clamp(200px, 22vw, 500px);
    height: auto;
}

.ti-en {
 color: #876c35;
    text-align: center;
    font-size: clamp(12px, 1.3vw, 24px);
    letter-spacing: 1px;
    padding-top: clamp(6px, 0.8vw, 16px);
    width: 100%;
}

.ti-en span {
    font-weight: bold;
}
ul{
    list-style:none
}
.hafez-menu-list .menu-item:last-child{
    display:none!important;
}
@media (prefers-reduced-motion: reduce){
    *{
        animation:none !important;
        transition:none !important;
    }
}

@media only screen and (max-width:1320px){
 .head-ce {
    max-width:100%;
    margin: 0 auto;
    position: relative;
    padding: 8px 0;
}
 .main-menu nav > ul > li > a {
    display: block;
    line-height: 24px;
    padding: 17px 0px 0px 28px;
}
 .grid-container {
    max-width: 97%;
}
 .col-nd a {
    font-size: 14px;
}
 .hafezieh-story {
    min-height: 590px;
}
 .menu-text{
    font-size:13px;
}
    .hafezieh-story {
        min-height: 300px;
        height:70vh;
    }
    .p-cl {
    font-size: 38px;
}
    .c-ic {
    margin: 0 auto 16px auto !important;
    width: 35px !important;
}
    .hafez-menu-list {
    gap: clamp(8px, 0.5vw, 16px);

}
    .quote-box {

    top: 0px;
}
}

@media only screen and (max-width: 1100px){
    .hafez-menu-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px 10px;
    }
    .menu-item {
        max-width: 100%;
    }
    .menu-text{
        padding-bottom:8px;
    }
    
    .search-bx {
    display:none;
   
}
  .hafezieh-story {
        min-height: 420px;
        height:420px;
        position:relative;
        z-index:99;
    }

   .ft-ce {
    max-width:100%;
    text-align:center;
   
}
   .list-ft li a {
    padding: 0 16px;
}

}
@media only screen and (max-width: 990px){
    .banner-wrapper {
    min-height: 450px;
    height: 450px;
}
       .mobile-header--right svg path{
         stroke:var(--primary-color-nd);
     }
    .hero-section {
        min-height: 550px;
        height: 550px;
 
    }
    .content-section {
    padding: 0px 0 0 0;
}
    .grid-container {
    padding: 0px 0 40px 0;
    max-width:100%;
}
    .caption-nd {
    width: clamp(200px, 25vw, 550px);
    left: 7%;
}
    .ti-wb {
    font-size: clamp(15px, 1.6vw, 34px);
}
    .watercolor-image, .hybrid-image{
       display:none;
    }
    .hafezieh-story::before {
        content: "";
        background-size: cover;
        background-position: center;
        background-image: url(../images/end-btm2.jpg);
        position: absolute;
        top: 51px;
        left: 0;
        right: 0;
        bottom: 0;
        height: 83%;
        width: 100%;
        opacity: 1;
        z-index: -1;
}
    .quote-box {
        top: 0;
    }
    .logo-bx{
        position:absolute;
        width:100%;
        left:0;
    }
    .logo-nd{
        position:relative;
        margin:0 auto;
        display:block;
        right:0;
    }
    .list-ft li a{
        font-size:12px;
    }
        .head-ce {
        padding: 8px 9px;
    }
        .mobile-menu{
            position:relative;
            top:10px;
        }
        #search-acan{
    display:block;
}
}

@media only screen and (max-width: 760px){
    .banner-wrapper {
    min-height: 300px;
    height: 300px;
}
    .menu-text span{
        display:none;
    }
    .hero-section {
        min-height: 350px;
        height: 350px;
     
    }
    .hafez-menu-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 10px;
    }
    .logo-nd {
    width: 39px;
}
        .mobile-menu {
        top: 3px;
    }
        .caption-nd {
        width: clamp(160px, 15vw, 550px);
        top: clamp(100px, 15vw, 200px);
        left: 10px;
 
    }
        .img-lg {
    max-width: clamp(60px, 22vw, 500px);
}
        .ti-wb{
            font-size:10px;
        }
        .img-hd{
            width:100%;
        }
    .ti-en {
        font-size: 9px;
        letter-spacing: 0;
    }
    header {
    height: 40px;
}
        .menu-text {
        font-size: 12px;
    }
    .hafez-menu-list {
        gap:16px 0;
    }
    .divider {
    margin:0px 0 8px 0;
}
    .link-ce{
        display:none;
    }
    /*.text-ce-nd span{
        display:block!important;
    }*/
.p-cl {
        font-size: 29px;
        line-height: 53px;
    }
        .c-ic {
        margin: 0 auto 8px auto !important;
        width: 27px !important;
    }
        .hafezieh-story {
        min-height: 280px;
        height: 280px;
        position: relative;
        z-index: 99;
    }
            .hafezieh-story:before{
                opacity:1;
                        top: 51px;
        left: 0;
        right: 0;
        bottom: 0;
        height: 83%;
        width: 100%;
            }
            .hafez-menu-list .menu-item:last-child{
    display:flex!important;
}
      .list-ft li:nth-child(n+5) {
  display: none;
}
          .list-ft li a {
        padding: 0 0px;
    }
          .list-ft li a:before{
              display:none;
          }
          footer {
    padding: 24px 0 8px 0;
    margin-top: 0px;
}
  .power_by{
        display: block;
        line-height: 26px;
        padding: 11px 0;
        font-size: 11px;
          }
 .separator{
              display:none;
  }
     .head-ce {
        padding: 8px 0;
    }
  
         .p-cl {
 font-size: 25px;
        line-height: 34px;
    }
         .sticky-wrapper{
             position:initial
         }
         .caption-nd{z-index:99;}
         .img-mn{
             width:16px;
            
         }
         footer:before {

    top: -25px;
    left: 0;
    right: 0;
    height: 27px;
}
         .bc-lg-ce-ft {
    margin: 16px auto 0 auto;
}
         .logo-ft-ce {
    width: 48px;
}
         .bc-lg-ce-ft:before {
    top: 17px;
    left: 0px;
    height: 20px;
    width: 100%;
}
}



