@charset "utf-8"; /*Eric Meyer's*/ html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} body{margin:0; line-height: 0;} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;} audio,canvas,progress,video{display:inline-block; vertical-align:baseline} audio:not([controls]){display:none;height:0} [hidden],template{display:none} a{background-color:transparent; transition:linear .2s;}/*color:#069; */ a:active,a:hover{outline:0;}/* color:#06C;*/ abbr[title]{border-bottom:1px dotted} /* b,strong{font-weight:bold} */ dfn{font-style:italic} h1{font-size:2em;margin:0.67em 0} mark{background:#ff0;color:#000} small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sup{top:-0.5em}sub{bottom:-0.25em} img{border:0; display: block;} svg:not(:root){overflow:hidden} figure{margin:1em 40px} hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0} pre{overflow:auto} code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em} button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0} button{overflow:visible} button,select{text-transform:none} button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer} button[disabled],html input[disabled]{cursor:default} button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} input{line-height:normal} input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0} input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto} input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em} form{margin:0;} legend{border:0;padding:0} textarea{overflow:auto} optgroup{font-weight:bold} table{border-collapse:collapse;border-spacing:0;} td,th,ol,ul,li{padding:0; margin:0;} ul,ol{padding-right:30px;} p{margin:0;} h1,h2,h3,h4{font-weight:normal; padding:0px; margin:0;} textarea, input[type="text"], input[type="button"], input[type="submit"] { -webkit-appearance: none; border-radius: 0; } a{color:inherit;} /* CSS Document */ @font-face { font-family: IRANSansR; font-style: normal; font-weight: normal; src: url('includes/fonts/IRANSansXFaNum-Regular.woff') format('woff'), url('fonts/IRANSansXFaNum-Regular.woff2') format('woff2'); } @font-face { font-family: IRANSansM; font-style: normal; font-weight: 500; src: url('includes/fonts/IRANSansXFaNum-Medium.woff') format('woff'), url('fonts/IRANSansXFaNum-Medium.woff2') format('woff2'); } @font-face { font-family: IRANSansB; font-style: normal; font-weight: bold; src: url('includes/fonts/IRANSansXFaNum-Bold.woff') format('woff'), url('includes/fonts/IRANSansXFaNum-Bold.woff2') format('woff2'); } @font-face { font-family: 'VazirmatnB'; src: url('includes/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face{ font-family: 'lalezar'; src: url('includes/fonts/Lalezar.woff') format('woff'); src: url('includes/fonts/Lalezar.ttf') format('truetype'); font-weight: normal; } ::-moz-selection{background:rgba(0,0,0,0.1)} :root{ --radius7:7px; } /*** Default CSS ***/ .drtl{direction:rtl;}.dltr{direction:ltr;}.FloatR{float:right;}.FloatL{float:left;} .clr,.clear{clear:both;}.Tright{text-align:right;}.Tleft{text-align:left}.Tjustify{text-align:justify;}.Tcenter{text-align:center;} .Ared{ color: red;}.red{color:#990e00;} .green{color:#009B00;} .orange{color:#f7941e;}.yellow{ color: #ffef85 !important;} /*** End Default CSS ***/ html,body{ width:100%; height:100%; padding:0px; margin:0px; line-height:25px; font-family:'IRANSansR'; font-size:15px; color:#333; direction:rtl;} *{ box-sizing:border-box; text-decoration:none;} a, button{ transition:all linear 0.2s; cursor:pointer;} .ltr{ direction: ltr; display: inline-block;} .main{ max-width: 1100px; margin:auto; padding: 0 20px;} @media only screen and (min-width:1400px){ .main{ max-width: 1300px;} } @media only screen and (max-width:768px){ html,body{ font-size: 18px; line-height:30px;} } .flexbox{ display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap;} .en_font{ font-family:tahoma !important;} .more,.more2,.green_bt{ font-family: "VazirmatnB"; width: max-content; min-width: 120px; padding: 8px; margin:auto; font-size:15px; background: #fe5619; color:#fff; text-align:center; text-shadow: 1px 1px 0px rgba(99,99,99,0.8); border:none; border-radius: 7px !important; display:block; transition:all linear .2s;} .more:hover{ background:#6c6c6c; text-shadow:none;} .more2{ width: 100%; max-width: max-content; margin: 0 !important; background: transparent; color: #ff5c01; border:1px solid #ff5c01; text-shadow: none;} .more2:hover{ background: #ff5c01; color: #fff;} .green_bt{ width: max-content; /*line-height: 40px;*/ padding: 8px 15px; margin: 20px auto 0; background: #00b076;} .green_bt i,.more i{ margin-right: 5px; font-size: 12px;} .green_bt:hover{ background:#008a5c;;} #hide_overflow{ position: relative; overflow: hidden;} b,strong{ font-family:'VazirmatnB'; font-weight: normal;} .s_title{ max-width: max-content; margin: 0 5px 0px; font-family: "VazirmatnB"; font-size: 30px; line-height: 45px; text-align: right; color: #fe5619;} .ti_desc{ margin: 5px 5px 30px 5px; font-size: 18px; line-height: 30px; text-align: right;} .dis_block{ display: block !important;} @media only screen and (max-width:768px){ .more,.more2,.green_bt{ padding: 10px 12px; font-size:18px;} } /** navigator **/ #navigator{ padding: 20px 0 20px; color:#333; font-size:13px; line-height: 24px;} #navigator i{ padding:0 5px; color:#ff5c01; font-size: 10px; vertical-align:middle; text-shadow:none;} #navigator a{ color:#333; display: inline-block; transition:all linear 0.3s;} #navigator a:hover{ color:#ff5c01 !important;} #navigator.wh_them,#navigator.wh_them a{ color: #fff;} /** top video **/ #top_video{ max-height:calc(100vh - 84px); position: relative; background: white; display: block;} #top_video video{ width: 100%; display: block;} .videotxt{ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; right: 0; left: 0; bottom: 0;} #hero-title{ width: 100%; font-family: VazirmatnB; font-size: 60px; line-height: 75px; text-align: center; color: #fe5619;position: absolute; bottom: 30%; display: block;} .hero_sub{ position:absolute; bottom: 17%; z-index:100; left:0; right:0; display:block; text-align:center; color:white; font-size:30px; line-height: 40px; font-family:'IRANSANSR'} @media only screen and (max-width: 768px){ #hero-title{ font-size: 35px; line-height: 50px;} .hero_sub{ font-size: 20px; line-height: 30px; bottom: 12%;} } /** slider **/ #indexSlider{ width: 100%; background: #eee;} .InSlide{ position: relative;} #indexSlideBox{ position: relative; overflow: hidden;} #indexSlideBox .title{ max-width: 600px; width: 100%; padding: 40px; background: rgba(179, 179, 179, 0.7) url(images/background/map.png); background-size: cover !important; background-position: center !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position:absolute; right: 40px !important; top: 40px; text-align:center; opacity: 0; text-align: right; border-radius: var(--radius7); transition: all 2s;} #indexSlideBox .title > div{ margin-top: 20px; color: #2f2f2f; font-size: 18px; line-height: 32px;} #indexSlideBox .title h2,#indexSlideBox .title h3{ line-height:61px; color: #2f2f2f; font-size: 46px; font-family: "VazirmatnB";} #indexSlideBox .title h2{ color:#fff; font-size: 30px; line-height: 45px;} #indexSlideBox .title .more{ max-width: max-content; width: auto; margin-top:40px; padding:10px 20px; background:#ff5c01; color:#fff; font-size:13px; font-family: "VazirmatnB"; text-shadow:1px 1px 0px rgba(99,99,99,0.8); display:inline-block; transition:all linear .2s;} #indexSlideBox .title .more:hover{ background:#6c6c6c; text-shadow:none;} #indexSlideBox .title.opa{opacity: 1} .indexSlideImg{ width: 100%; position: absolute; opacity: 0; transition: all 1s linear;} .indexSlideImg img{ max-width: 100%; width:100%; height: 100%; object-fit: cover; margin: auto; position: absolute; display: block; } .indexSlideImg.pre{ opacity: 0;transition:all linear 0.3s;transform: scale(1)} .indexSlideImg.next{ opacity:0;transition:all linear 0.3s;transform: scale(1) } .indexSlideImg.show{ opacity:1;z-index:90;transition:all linear 0.3s;} .indexSlideImg.show img{ animation: slideShow 10s linear 1 0s;-o-animation: slideShow 10s linear 1 0s;-moz-animation: slideShow 10s linear 1 0s;-webkit-animation: slideShow 10s linear 1 0s;} .indexSlideArrow{ width: 96px; height: 96px; margin: auto; text-align: center; font-size: 46px; color: #fff; position: absolute; bottom: 15px; cursor: pointer; display:block; z-index:100; transition: all linear 0.2s;} .indexSlideArrow:hover{ left: 10px !important;} .indexSlideArrow i{ position: absolute; top:0; bottom:0; left:0; right:0; text-shadow: 1px 1px 1px #000; transition:all linear 0.2s; animation;} .indexSlideArrow img{ width: 60px;} #indexLeftSlide{ left: 20px; } #indexRightSlide{ right: 0px; } #indexSlideBtn{ width:100%; margin-top: 30px; position:absolute; bottom:15px; text-align: center;z-index: 100;} #indexSlideBtn>span{ width: 20px; height: 2px; margin: 0 1px; background: rgba(37,29,18,.5); display: inline-block; cursor: pointer; } #indexSlideBtn>span.indexSlideActive{ background: rgba(255,255,255,.5); } .triangle{ display: block; position: absolute; left: 0; bottom:0; opacity: 1; z-index: 90;} .triangle img{ display: block;} .row_1, .row_1 p{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block;} .row_2,.row_3,.row_4{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .row_3{ -webkit-line-clamp: 3;} .row_4{ -webkit-line-clamp: 4;} .slideshow_type{display:inline-block;white-space:nowrap;} .slideshow_type::after{content:"";display:inline-block;width:1px;height:1em;vertical-align:-0.2em;background:currentColor;margin:0 .1em 0 .2em;animation: caretBlink 1s steps(1) infinite;} .slideshow_type.done::after{opacity: 0;animation: none;width: 0;margin: 0;content: "";} @keyframes caretBlink { 50% { opacity:0; } } @media (prefers-reduced-motion: reduce){.slideshow_type::after{ animation:none }} .slideshow_type.done::after{opacity:0; animation:none; width:0; margin:0; content:"";} .slid_bg{background: white;} @-moz-keyframes slideShow { 0% {-moz-transform:scale(1);} 10% {-moz-transform:scale(1.02)} 20% {-moz-transform:scale(1.04)} 30% {-moz-transform:scale(1.04)} 40% {-moz-transform:scale(1.08)} 50% {-moz-transform:scale(1.04)} 70% {-moz-transform:scale(1.04)} 80% {-moz-transform:scale(1.04)} 90% { -moz-transform:scale(1.04)} 100% {-moz-transformm:scale(1.04)} } @-webkit-keyframes slideShow { 0% {-webkit-transform:scale(1);} 10% {-webkit-transform:scale(1.02)} 20% {-webkit-transform:scale(1.04)} 30% {-webkit-transform:scale(1.04)} 40% {-webkit-transform:scale(1.04)} 50% {-webkit-transform:scale(1.04)} 60% {-webkit-transform:scale(1.04)} 70% {-webkit-transform:scale(1.04)} 80% {-webkit-transform:scale(1.04)} 90% {-webkit-transform:scale(1.04)} 100% {-webkit-transform:scale(1.04)} } @media only screen and (max-width: 1350px){ #indexSlideBox .title{ bottom: 40px;} } @media only screen and (min-width: 881px){ #indexSlider,.indexSlideImg, #indexSlideBox{ height: Calc(100vh - 84px);} } @media only screen and (max-width: 880px){ /* #indexSlider,.indexSlideImg, #indexSlideBox{ height: 500px;} */ /* .indexSlideImg{ display: flex; align-items: flex-end;} */ .indexSlideImg img{ height: initial; position: static;} #indexSlideBox .title{ max-width: 100%; width: 100%; min-height: 348px; padding: 20px; ; background-color: #373737; border-radius: 0; position: relative; top: 0; right: inherit !important; bottom: inherit !important;} #indexSlideBox .title h3{ font-size:30px; line-height:45px;} #indexSlideBox .title h2{ font-size: 20px; line-height: 35px;} #indexSlideBox .title .more{ margin-top: 15px;} .triangle{ width: 100px;} .indexSlideArrow{ width: 45px; height: 45px; left: 5px !important; bottom: 5px;} .indexSlideArrow img{ width: 45px;} #indexSlideBox .title > div{ color: #fff;} } /** next trip **/ .daytxt{ background-color: black; color: white; padding: 7px 5px; text-align: center; position: absolute; top:-30px;} .daytxt.bg_col1{ background-color:#abafd6;} .daytxt.bg_col2{ background-color: #72a080;} .title_style{ font-family: VazirmatnB; font-size: 16px; padding-top: 40px;} .leader{ padding-top: 7px; font-size: 14px;} .moreinfo{ font-family: VazirmatnB; font-size: 11px; display: block; text-align: center; margin-top: 7px; border: 1px solid black; line-height: 32px;} .map{ width:35%; height:auto;} .chip{ line-height: 42px; border:1px solid rgba(255,255,255,.1); padding:0 12px; cursor:pointer; user-select:none} .chip.active{background:#fe5619; color: white;} .filters{ display:flex; gap:10px; flex-wrap:wrap; padding: 20px 0; margin-bottom: 20px;} .pad7top{ padding-top: 7px;} /* --- Motion Tokens --- */ :root{ --in-dur: .45s; --out-dur: .28s; --stagger-step: 70ms; /* هر کارت 70ms دیرتر */ } /* کارت‌ها: حالت پایه + هاور */ #grid .panel{ transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; will-change: transform, opacity; opacity: 1; /* پیش‌فرض */ border-radius: var(--radius7); overflow: hidden;} #grid .panel:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.12);} /* حالت‌های انیمیشن */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px) scale(.98);} to { opacity: 1; transform: translateY(0) scale(1);} } @keyframes fadeDown { from { opacity: 1; transform: translateY(0) scale(1);} to { opacity: 0; transform: translateY(8px) scale(.98);} } /* وقتی کارت ظاهر می‌شود */ #grid .panel.anim-in{ animation: fadeUp var(--in-dur) ease both; animation-delay: calc(var(--i, 0) * var(--stagger-step));} /* وقتی کارت محو می‌شود */ #grid .panel.anim-out{ animation: fadeDown var(--out-dur) ease both;} /* چیپ فیلتر: حالت فعال با موشن کوچک */ #filters .chip{ transition: background-color .2s ease, border-color .2s ease, transform .12s ease; cursor: pointer; user-select: none; background-color: #e1e0e0; border-radius: var(--radius7);} #filters .chip:active{ transform: scale(.98);} #filters .chip.active{ background:rgb(254 86 25);} /* پیام خالی: ورود/خروج نرم */ #empty{ opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;} #empty.show{ opacity: 1; transform: translateY(0);} /* احترام به کاهش موشن کاربر */ @media (prefers-reduced-motion: reduce){ #grid .panel, #filters .chip, #empty{ transition: none !important; animation: none !important;} } /*** tours ****/ .sub_more{ align-items: flex-start;} .sub_more .s_title{ max-width: Calc(100% - 230px); width: 100%;} .sub_more .more{ width: max-content; margin: 0 auto 0 0; background: transparent; color: #fe5619; border: 2px solid #fe5619; text-shadow: none;} .sub_more .more i{ padding-right: 5px; font-size: 14px; position: relative; top: 2px;} .more.mob_butt{ display: none;} .rel_box:hover .more{ background: #fe5619; color: #fff; text-shadow: 1px 1px 0px rgba(99,99,99,0.8);} .rel_box{ width: 100%; margin: 80px 0;} .rel_box h2{ margin: 0 0 25px; color: #fff; font-family: "VazirmatnB"; font-size: 46px; line-height: 61px;} .rel_box .date_bold{color:#00ffad; font-family: "IransansB";} .rel_info,.trip_title{ width: calc(100% - 70px); padding: 10px 20px; position: absolute; bottom: 50px; left: 0; z-index: 10; font-size: 13px; background: rgba(179, 179, 179, 0.3) url(images/background/map.png); background-size: cover !important; background-position: center !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 0 7px 7px 0;} .last_second .rel_info{ max-width: 525px;} .rel_items .rel_info{ width: calc(100% - 20px);} .rel_main{ justify-content: center; /*overflow: hidden;*/ transition: all .5s linear;} .rel_main .rel_items{ width: Calc(33.33% - 14px); height: 470px; margin: 0 0 20px 20px; background-size: cover !important; background-position: center !important; color: #fff !important; text-shadow: 0 0 10px rgba(0,0,0,.6); position: relative; text-align: right; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--radius7); /*overflow: hidden;*/ z-index: 2;} .rel_main .rel_items:nth-child(3n),.rel_main .rel_items:last-child{ margin-left: 0;} .rel_items .rel_name{ font-family: "VazirmatnB"; font-size: 22px; line-height: 36px;} .rel_box .rel_items .lable{position: absolute; right: 10px; top: 10px; font-size: 11px; font-family: "IransansB"; padding: 0 10px 0; text-shadow: none; border-radius: 3px;} .rel_items .yellow{background-color: #ecd01a; color:rgb(21, 20, 16) !important; top: -12px !important; right: 8px !important; z-index: 2;} .rel_items .red{ background-color: #f03333; color:rgb(255, 255, 255) !important;} .rel_items .orange{ background-color: #fe5619; color:rgb(255, 255, 255) !important;} .rel_items .green{ background-color: #00ffad; color:rgb(21, 20, 16) !important;} .rel_items .cost{ font-family: "VazirmatnB"; font-size: 26px; line-height: 40px; text-align: left;} .rel_items .cost b{ font-size: 18px;} .rel_items .discount{ font-size: 19px;} .rel_items .discount .real{ color: #cacaca;} .rel_items .discount .off{ background: #dd304e;} .img_leader{ color: #fff; position: absolute; left: 10px; top: 10px; font-family: "IransansB"; font-size: 13px; text-shadow: 0 1px 2px #000; display: flex; align-items: flex-end;} .img_leader img{ width: 50px !important; height: inherit !important; margin-right: 5px; border: 5px solid #fff; border-radius: var(--radius7); display: block;} .rel_box .rel_main a:first-of-type{position: relative;} .special_tour{border: 3px solid #ecd01a;} .lable2{position: absolute; right: 10px; top: 10px; font-size: 11px; font-family: "IransansB"; padding: 0 10px 0; text-shadow: none; border-radius: 5px;} .special_tour .lable2{ right: 0px; top: -30px !important;background-color: #afe2f8; color:rgb(21, 20, 16);} .new_to{right: 0px; top: -30px !important; background-color: #a6d07d; color:rgb(21, 20, 16);} .experience{background: #222222; padding: 1px 0;} .mar20t{ margin-top: 20px;} /*last_second*/ .last_second{background: #de314e; padding: 1px 0;} .last_second .s_title,.last_second .ti_desc{ width: 100%; color: #fff;} .countdown2 { width: 100%; margin: 10px 0; color: #fff; font-family: "IransansB"; font-size: 13px; direction: ltr; text-align: left;} .countdown2 .countbox,.countdown2 .num_day{ width: 30px; height: 30px; padding: 5px; background: #fff; color: #de314e; border-radius: 3px; text-shadow: none; text-align: center; display: inline-block; vertical-align: middle;} .countdown2 .num_day{ min-width: 52px;} .countdown2 .num_day span{ width: max-content; height: initial; padding: 0; margin-left: 3px; background: none;} .offroad-swiper { display: block !important; overflow: hidden; position: relative; max-width: 100%; /* حداکثر عرض اسلایدر برای نمایش تک‌تایی بهینه در دسکتاپ */ margin: 0 auto; padding: 10px 0;} .offroad-swiper .rel_items.swiper-slide { width: 100% !important; flex-shrink: 0;} .offroad-next, .offroad-prev { color: #fff !important;} .offroad-next::after, .offroad-prev::after { font-size: 24px;} .last_second .swiper-button-next, .last_second .swiper-button-prev{ height: 50px !important; background: #ffffff92; border-radius: 50%; transition: all linear 0.2s;} .last_second .swiper-button-next:hover, .last_second .swiper-button-prev:hover{ background: #fff;} .last_second .swiper-button-next i, .last_second .swiper-button-prev i{ font-size: 20px;} .green_word{color:#00ffad; font-weight: bold;} .date_title{font-size: 18px; color: white; padding-right: 15px;} .filled{ width: 250px; height: 70px; margin: auto; color: #de314e; position: absolute; top: 30%; left: 0; right: 0; text-align: center; border: 2px solid #fff; border-radius: 5px; transform: rotate(-15deg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 50;} .filled span{ font-family: tahoma; font-weight: bold; font-size: 45px; -webkit-text-stroke: 1px #fff; } .filled::after{ content: ""; width: 265px; height: 85px; border: 5px solid #de314e; border-radius: 5px; position: absolute; display: block;} @media only screen and (min-width: 1025px){ .shadow_box::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; border-radius: var(--radius7); z-index: 1; transition: all linear 0.3s;} .rel_main .shadow_box:hover:before{ background: rgba(0,0,0,0.3);} } @media only screen and (max-width: 870px){ .rel_main .rel_items{ width: Calc(50% - 10px);} .rel_main .rel_items:nth-child(3n){ margin-left: 20px;} .rel_main .rel_items:nth-child(2n){ margin-left: 0;} } @media only screen and (max-width: 768px){ .rel_main.for_resp .rel_items{ width: 100%; margin: 0 0 20px !important;} .sub_more .s_title{ max-width: 100%;} .sub_more .more{ display: none;} .more.mob_butt{ display: block;} } /*** tours ****/ /**map**/ #iran_map{ background: #eeefef;} #iran_map .s_title:first-of-type{padding: 0 0 30px;} .map_bg{ padding: 80px 0; background: url(images/background/map_bg.webp); background-position: bottom !important; background-size: cover !important;} .map_d{width: 63%; display: inline-block;} .panelbox{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; text-align: center;} .map_d .panel{ padding: 15px; background: #f8f8f8; box-shadow: 0px 0px 3px #e0e0e0; border-radius: 15px; position: relative;} .label_panel{background-color: #afe2f8; color: black; padding: 7px 5px; text-align: center; position: absolute; top:-15px} .titr_panel{ margin-bottom: 10px; font-family: "VazirmatnB"; font-size: 14px;} .titr_panel i{ width: 40px; height: 40px; margin-left: 8px; background: #ff6925; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;} .mtn_panel{ padding: 8px 0; color: gray; font-size: 14px; line-height: 23px; text-align: right; border-top: 1px solid #f4f4f4;} .mtn_panel i{ width: 40px; margin-left: 8px; text-align: center;} .mtn_panel > span{ width: calc(100% - 48px); display: block;} @media only screen and (max-width: 1024px){ .panelbox{ grid-template-columns: repeat(2,1fr);} } @media only screen and (max-width: 700px){ .panelbox{ grid-template-columns: repeat(1,1fr);} .map{ width: 100%; margin-bottom: 20px;} .map_d{ width: 100%;} .map_bg{ background-position: right bottom !important; } } /**map**/ /*** banner ***/ #banner{ background-position: center !important; background-size: cover !important; position: relative; overflow: hidden;} #banner::after{ content: ""; width: 50%; height: 530px; border-right: 7px solid white; background: rgba(179, 179, 179, 0.3) url(images/background/map.png); background-size: contain !important; background-position: center !important; position: absolute; left: 0; top: 0; z-index: 1;backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #banner img{ width: 100%; height: 530px; object-fit: cover;} #banner .main{ height: 530px; position: absolute; left: 0; right: 0; top: 0;} .left_bann{ width: 50%; height: 100%; padding: 0 50px 0 50px; color: #fff; text-shadow: 1px 1px 10px #000000a1; position: absolute; left: 0; display: flex; flex-direction: column; justify-content: center; z-index: 2;} .left_bann .s_title{ text-shadow: none; color: #72a080; margin: 0 0 30px; background-color: white; padding: 0px 10px 0; border-radius: var(--radius7);} .left_bann h2{ margin-bottom: 10px; font-family: "VazirmatnB"; font-size: 31px; line-height: 46px;} .left_bann .more{ margin: 20px 0 0;} #banner .main .left_bann span{font-size: 13px;} .boldtxt{ width: 210px; padding-top: 6px; font-size: 14px; color: white; font-family: VazirmatnB; text-align: right;} .link_side{ width: Calc(100% - 210px); text-align: right; gap: 5px;} .link_side a{ padding: 5px 10px; background: #597d64; border: 1px solid rgba(0, 0, 0, 0.074); color: white; font-size: 14px; text-shadow: 1px 1px 1px black; display: inline-block;} @media only screen and (max-width: 768px){ .left_bann{ width: 100%; padding: 20px; background: #373737 url(images/background/map.png); background-size: cover !important; background-position: center !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: static; display: block;} .left_bann .s_title{ background-color: transparent; color: #ffef85;} #banner img{ height: auto;} #banner .main{ height: auto; padding: 0; position: relative; top: -9px;} #banner::after{ content: none;} .link_side{ width: 100%; margin-top: 10px;} } @media only screen and (max-width: 450px){ .link_side a{ width: 100%;} } /*** banner ***/ /*** other trip ***/ #othertrip{ margin: 80px 0;} .top_sec{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;} .for_all > a{ background-size: cover !important; background-position: center !important; position: relative; border-radius: var(--radius7); overflow: hidden; display: block;} .for_all > a img{ width: 100%; height: 300px; object-fit: cover; display: block;} .for_all > a .img_box{ display: block; position: relative;} .for_all > a h3{ padding: 10px 20px; background: #edf2f2; color: #333; font-size: 15px; line-height: 25px;} .for_all.top_sec h3{ background: rgba(179, 179, 179, 0.3) url(images/background/map.png); background-size: 300px !important; background-position: center !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff !important; position: absolute; bottom: 30px; left: 0; font-family: "VazirmatnB"; font-size: 22px; line-height: 36px; text-shadow: 0 0 10px rgba(0,0,0,.6);} .for_all.down_sec h3{ font-family: "VazirmatnB"; font-size: 16px;} .down_sec{ margin-top: 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;} .down_sec > a img{ height: 130px;} @media only screen and (min-width: 1025px){ .for_all > a .img_box::after{ content: "مشاهده جزئیات"; width: 100%; background: transparent; color: #fff; font-family: "VazirmatnB"; font-size: 0; opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 5; transition: all linear 0.2s;} .for_all > a:hover .img_box::after{ background: rgba(179, 179, 179, 0.3); background-size: cover !important; background-position: center !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; opacity: 1;} } @media only screen and (max-width: 1024px){ .down_sec{ grid-template-columns: repeat(3, 1fr);} } @media only screen and (max-width: 768px){ .for_all{ grid-template-columns: repeat(2, 1fr) !important;} .for_all > a img{ height: 250px !important;} .down_sec.for_all > a img{ height: 200px !important;} .for_all.down_sec h3{ font-size: 19px; line-height: 29px;} } @media only screen and (max-width: 600px){ .for_all{ grid-template-columns: repeat(1, 1fr) !important;} .down_sec{ grid-template-columns: repeat(2, 1fr) !important;} .down_sec.for_all > a img{ height: 130px !important;} } /*** other trip ***/ /** map **/ #map{ margin: 60px 0;} #mapbox{ width: 100%; max-width: 370px; position: relative;} #mapbox img{ width: 100%;} #mapbox .point{ width: 8px; height: 8px; background: #ff5c01; border-radius: 100%; position: absolute; animation: light 2.5s ease 0s normal none infinite running; display: block;} .point.l1{ top: 10%; left: 10%;} .point.l2{ top: 20%; left: 19%;} .point.l3{ top: 50%; left: 50%;} .point.l4{ top: 80%; left: 70%;} .point.l5{ top: 30%; left: 75%;} .point.l6{ top: 25%; left: 50%;} .point.l7{ top: 30%; left: 19%;} .point.l8{ top: 55%; left: 20%;} @keyframes light { 0% { opacity: 1; box-shadow: 0px 0px 4px #857b7b;} 55% { opacity: 0.3; box-shadow: none; } 100% { opacity: 1; box-shadow: 0px 0px 4px #857b7b;} } /** map **/ /** statistics **/ .statistics{ margin-top: 40px; display: grid; grid-template-columns: repeat(5,1fr); gap: 0 20px;} .statistics > .s_item{ padding: 50px 0; font-size: 24px; line-height: 39px; font-family: "VazirmatnB"; text-align: center; border-left: 1px solid rgba(128, 128, 128, 0.393);} .statistics > .s_item i{ font-size: 22px;} .statistics > .s_item:last-child{ border-left: none; border-bottom: none;} .statistics > .s_item b{ padding-bottom: 10px; font-size: 40px; line-height: 50px; text-align: center; display: block;} @media only screen and (max-width: 1024px){ .statistics{ grid-template-columns: repeat(3,1fr); gap: 20px;} .statistics > .s_item:nth-child(3n){ border-left: none;} } @media only screen and (max-width: 768px){ .statistics{ grid-template-columns: repeat(2,1fr);} .statistics > .s_item:nth-child(3n){ border-left: 1px solid rgba(128, 128, 128, 0.393);} .statistics > .s_item:nth-child(2n){ border-left: none;} } @media only screen and (max-width: 450px){ .statistics{ grid-template-columns: repeat(1,1fr); gap: 0;} .statistics > .s_item{ padding: 30px 0; border-bottom: 1px solid rgba(128, 128, 128, 0.393); border-left: none !important;} } .road-trip-animation{ margin: 120px 0 40px 0; direction: rtl;} .road-container{ position: relative; margin: 0 auto; background: #b8b8b8; padding: 35px 0; text-align: center;} .stats-text { max-width: max-content; margin: auto; color: #000; font-size: 1.5rem; position: relative; top: -65px; opacity: 0;} .stats-text strong { color: #ea551f;} .road { width: 100%; height: 10px; position: absolute; top: 50%; transform: translateY(-50%);} .lane-marks { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background-image: linear-gradient(90deg, #fff 50%, transparent 50%); background-size: 80px 10px; animation: drive 2s linear infinite;} .bus-icon { width: 100%; position: absolute; top: -80px; left: 100%;} .start_anim .bus-icon{ animation: move 8s linear 1 forwards;} .start_anim .stats-text{ animation: show 8s linear 1 forwards;} .start_anim .airplane{ animation: move_plane 8s linear 1 forwards;} .bus-icon img{ width: 180px; position: relative; left: 100px; float: left; animation: bounce 0.5s infinite alternate;} .airplane{ position: absolute; left: -200px; top: -180px;} @keyframes drive { from { background-position: 0 0; } to { background-position: 80px 0;} } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-2px); } } @keyframes move { from { left: 100%; } to { left: 0;} } @keyframes move_plane { from { width: 0; left: -200px; } to { width: 300px; left: 100%;} } @keyframes show { 95% { opacity: 0;} 100% { opacity: 1;} } @media only screen and (max-width: 850px){ .road-trip-animation{ margin: 100px 0 100px 0;} .stats-text{ top: 50px;} .start_anim .bus-icon{ animation: move 8s linear 1 forwards;} .start_anim .stats-text{ animation: show 8s linear 1 forwards;} .bus-icon img{ position: static; margin: auto; float: none;} .airplane{ top: -160px;} @keyframes move_plane { from { width: 0; left: -200px;} to { width: 250px; left: 100%;} } } /** why us **/ #why_us{ margin: 80px 0 40px;} .whybox{ margin: 30px 0 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; align-items: center;} .whybox > div{ position: relative; padding: 50px;} .whybox > div span{ position: relative; display: block; z-index: 1;} .whybox > div h3{ margin-bottom: 5px; font-family: "VazirmatnB"; font-size: 21px; line-height: 35px;} .whybox > div i{ content: "1"; width: 100%; color: #d8d8d8; position: absolute; top: 65%; left: 0; right: 0; transform: translateY(-50%); font-family: "VazirmatnB"; font-size: 135px; font-style: normal; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;} @media only screen and (max-width: 768px){ .whybox{ grid-template-columns: repeat(1,1fr);} } /** testimonials **/ #testimonial{ margin: 80px 0;} #testimonial .swiper-slide{ height:auto !important; padding: 30px 50px 0;} .tedad_safar{font-family: VazirmatnB; color: #fe5619; float: left;} /* .swiper-slide.one{ background: #90936c;} .swiper-slide.two{ background: #397d97;} .swiper-slide.three{ background: #a79581;} .swiper-slide.four{ background: #4e4e4e;} */ .wrap-opi{display: flex;flex-wrap: wrap;height: 100%!important;align-items: center;} .wrap-opi > img{ width: 100px; height: 100px; border: 10px solid #fff; border-radius: var(--radius7); position: absolute; right: 16px; top: -10px; z-index: 5;} .wrap-opi .quote{ position: absolute;top: -4px; right: 0; color: #ff5c01; z-index: 10; font-size: 20px;} .wrap-opi > div{ width:100%; min-height: 255px; background:#f4f4f4; background-size: cover !important; background-position: center !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align:right;padding: 50px;font-family: IRANSansR;font-size: 15px; line-height: 25px; color: #000; text-shadow: none; font-weight: normal; border-radius: var(--radius7); position: relative; z-index: 4;} .wrap-opi .swiper-title{ font-family:'VazirmatnB'; font-size:15px; line-height:30px; margin-top: 15px;} .wrap-opi .swiper-title b{ padding-bottom: 5px; font-size: 21px; line-height: 35px; display: inline-block; font-weight: normal;} #testimonial .swiper-button-next, #testimonial .swiper-button-prev{top: 20px!important;height: 100%!important; transition: all .3s!important;} .arrow{ margin: auto; font-size: 40px; color: #fe5619; text-align: center; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: block;} .swiper-button-next,.swiper-container-rtl .swiper-button-prev{ background-image: none !important;} @media only screen and (max-width: 850px){ .wrap-opi { align-items: flex-start;} .wrap-opi > div{ padding: 50px 20px 20px;} #testimonial .swiper-button-next, #testimonial .swiper-button-prev{display: none!important;} .wrap-opi > img { width: 80px; height: 80px; right: 39px; top: -8px;} #testimonial .swiper-slide { padding: 30px 20px 0;} } @media screen and (min-width: 785px) { #testimonial .swiper-button-next, #testimonial .swiper-button-prev{ display: none!important;} #testimonial .swiper-container:hover .swiper-button-next,#testimonial .swiper-container:hover .swiper-button-prev{display: block!important;} } #our_team{ margin: 80px 0;} .team_bt{ max-width: 500px; margin: 15px auto auto;} .team_bt a{ width:48%; background:#fff; color:#333; text-shadow:none; border:2px solid; position:relative; overflow:hidden; z-index:0; transition:color .4s ease; display: block;} .team_bt a:first-child{ color:#fe5619; border-color:#fe5619;} .team_bt a:last-child{ color:#000; border-color:#000;} .team_bt a::before{ content:""; position:absolute; inset:-1px; background:transparent; transform:scaleX(0); transform-origin:right; transition:transform .25s ease; z-index:-1;} .team_bt a:first-child::before{ background:#fe5619; } .team_bt a:last-child::before{ background:#000; } .team_bt a:hover{ color:#fff; background: #fff; text-shadow: 1px 1px 0px rgba(99,99,99,0.8);} .team_bt a:hover::before{ transform:scaleX(1);} /** blog in index **/ #fromblog{ margin: 60px 0;} #fromblog:hover .more{ background: #fe5619; color: #fff; text-shadow: 1px 1px 0px rgba(99,99,99,0.8);} #for_blog img{ width: 100%; background: #5A5A5A; object-fit: cover; display: block;} #for_blog .title a{ color: #fff;} #for_blog .title a:hover{ opacity: 0.6;} #r_box{ width: calc(100% - 624px);position: relative; overflow: hidden; border-radius: var(--radius7);} #r_box h3{ padding: 10px 20px; background: rgba(179, 179, 179, 0.3) url(images/background/map.png); background-size: 300px !important; background-position: center !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff !important; position: absolute; bottom: 30px; left: 0; font-family: "VazirmatnB"; font-size: 22px; line-height: 37px; text-shadow: 0 0 10px rgba(0,0,0,.6);} #r_box img{ height: 297px;} #l_box{ width: 584px;} #l_box .blogitem{ margin-bottom: 6px; color: #000; display: block;} #l_box .blogitem:last-child{ margin-bottom: 0;} .matn_blog_short {width: 68%;padding:10px 0 010px;text-align: right;float: right;} #l_box .sp_img{ margin-left: 15px; position: relative; border-radius: var(--radius7); display: inline-block; overflow: hidden;} #l_box img{ width: 150px; height: 95px; background: #5A5A5A;} #l_box h3{ width: calc(100% - 165px); margin: 0; color: #050505; font-family: 'VazirmatnB'; font-size: 15px;} .flex_box,.flex_box1{ display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; align-items:center;} .align_start{ align-items: flex-start;} .align_center{ align-items: center;} .flex_box1{ align-items: stretch;} .flex_box1 > a{ width: Calc(33.33% - 20px); margin: 0 0 0 30px; color: #ffffff; display: block;} .flex_box1 > a:last-child{ margin: 0 !important;} .sec_title > a {color: #333;;} .sec_title > span > a:visited {color: #333 !important;} @media only screen and (min-width: 1025px){ .flex_box1 > a::after,#l_box .sp_img:after{ content: "مشاهده جزئیات"; width: 100%; background: transparent; color: #fff; font-family: "VazirmatnB"; font-size: 0; opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 15; transition: all linear 0.2s;} .flex_box1 > a:hover::after,#l_box .sp_img:hover:after{ background: rgba(179, 179, 179, 0.3); background-size: cover !important; background-position: center !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; opacity: 1;} } @media only screen and (max-width: 900px){ #r_box{ margin-bottom: 20px;} #r_box, #l_box{ width: 100%;margin: 0;} } @media only screen and (max-width: 798px){ #r_box{ margin-bottom: 20px; margin-right: 0;} #r_box, #l_box{ width: 100%;} #l_box h3{ font-size: 18px; line-height: 30px;} } @media only screen and (max-width: 624px){ #r_box img{ height: 300px;} #l_box h3,#l_box img{ width: 100%;} #l_box .sp_img{ margin: 0;} #l_box img{ height: 180px;} #l_box .blogitem{ margin-bottom: 15px;} #l_box .blogitem:nth-child(3){ margin-bottom: 0;} .main > .flex_box1{ margin-top: 20px;} #for_blog .title {display: block !important;} .res_f16{ font-size: 16px !important;}.res_f17{ font-size: 17px !important; line-height: 29px !important;} .matn_blog_short{margin: auto;width: 100%;} .sec_title > span > a:visited {color: #333 !important;} } /** events **/ .events { padding: 80px 0; background: #fdf8f5; position: relative; overflow: hidden; z-index: 1;} .events > .flexbox{ flex-direction: row-reverse;} .events::after{ content: ""; position: absolute; width: 70%; height: 800px; right: 0; top: -48%; background: rgb(0, 0, 0); border-radius: 50% 0 0 50%;} .events::before{ content: ""; position: absolute; width: 30%; height: 700px; right: -155px; bottom: 0; background: rgb(0, 0, 0); border-radius: 0 0 0 50%;} .events:nth-of-type(odd)::before, .events:nth-of-type(odd)::after{ background: #ff5c01;} .events:nth-of-type(odd) .see_all{ background: #ff5c01;} .events:nth-of-type(odd) > .flexbox{ flex-direction: row;} .events:nth-of-type(odd) .leftslide{ margin: 0 auto 0 0;} .events:nth-of-type(odd)::after{ right: inherit; left: 0; border-radius: 0 50% 50% 0;} .events:nth-of-type(odd)::before{ right: inherit; left: -155px; border-radius: 0 0 50% 0;} .rightslide{ width: 400px; padding-bottom: 80px; position: relative; z-index: 5;} .rightslide h2{ margin: 20px 0; font-size: 70px; line-height: 70px;} .rightslide h2 span{ margin-top: 10px; color: #ff5c01; font-family: "VazirmatnB"; font-size: 55px; line-height: 70px; display: block;} .rightslide h2 b{ font-family: "lalezar";} .top_logon{ max-width: max-content; padding: 8px 45px 8px 15px; background:#f5f0ed; font-family: "IRANSansB"; font-size: 13px; border-radius: 25px; position: relative;} .top_logon i{ width: 35px; height: 35px; line-height: 35px; background: #ff5c01; color: #fff; position: absolute; right: 3px; top: 2.5px; text-align: center; border-radius: 50%;} .even_txt{ color: gray; font-family: "IRANSansM"; } .event_items{ margin: 30px 0;} .type_item{ padding: 15px; margin-bottom: 10px; background: #fff; box-shadow: 0px 0px 3px #e0e0e0; border-radius: 15px;} .type_item:hover i{ background: #ffe7da; color: #ff5c01;} .type_item i{ width: 55px; height: 55px; line-height: 55px; background: #eee; font-size: 20px; text-align: center; border-radius: 15px; transition: all linear 0.2s;} .type_item > div{ width: calc(100% - 70px); margin-right: auto; position: relative; top: 2px;} .type_item > div span{ color: gray; font-family: "IRANSansM"; font-size: 13px; line-height: 25px;} .type_item h3{ margin-bottom: 5px; font-family: "IRANSansB";} .events:nth-of-type(odd) .type_item h3{ margin-top: 12px;} .dir_row{ width: 100%; flex-direction: row-reverse; position: absolute; left: 0; bottom: 0;} .see_all{ padding: 20px; background: #000; color: #fff; border-radius: 15px; text-align: center;} .see_all i{ margin-right: 5px; vertical-align: middle;} .see_all:hover,.events:nth-of-type(odd) .see_all:hover{ background: #6c6c6c;} .enjoy{ padding: 12px 15px; margin-right: auto; background: #fff; box-shadow: 0px 0px 3px #e0e0e0; border-radius: 15px;} .enjoy span{ margin-top: 5px; font-family: "IRANSansM"; color: gray; font-size: 12px; line-height: 22px; display: inline-block;} .en_user{ direction: ltr;} .en_user img{ width: 35px; border-radius: 50%; border: 1px solid #d6d6d6; position: relative;} .en_user img:nth-of-type(2){ right: 5px;} .en_user img:nth-of-type(3){ right: 10px;} .en_user span{ color: gray;} .leftslide{ width: calc(100% - 460px); padding: 10px; margin-left: auto; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* برای ساپورت بهتر در مرورگرهای سافاری */ background: rgba(7, 7, 7, 0.4); box-shadow: 0px 0px 5px #fff; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; border-radius: 25px; position: relative; z-index: 10;} .leftslide > a{ height: 380px; background-position: center !important; background-size: cover !important; position: relative; border-radius: 25px; overflow: hidden;} .leftslide > a:first-child{ grid-column: 1 / -1;} .leftslide .event_info{ padding: 20px; background: #000; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); color: #fff; position: absolute; bottom: 0; left: 0; right: 0;} .event_info i.e_icon{ width: 55px; height: 55px; line-height: 55px; margin-left: 20px; background: #000; color: #ff5c01; font-size: 20px; text-align: center; box-shadow:0px 0px 5px #ffffffba; border-radius: 15px; transition: all linear 0.2s;} .event_info > span{ width: 45px; height: 45px; line-height: 47px; margin-right: auto; background: #333333cf; text-align: center; border-radius: 50%; transition: all linear 0.2s;} .event_info > span:hover{ background: #ff5c01;} .event_info h4{ font-family: "IRANSansB"; font-size: 16px; transition: all linear 0.2s;} .event_info h4:hover{ color: #ff5c01;} .event_info .txt{ color: #b9b9b9; font-family: "IRANSansM"; font-size: 14px; line-height: 25px; } .event_info > div{ width: calc(100% - 130px);} @media only screen and (max-width: 1024px){ .rightslide{ width: 100%; background: #fdf8f5; padding-bottom: 20px; z-index: 10;} .leftslide{ width: 100%;} .events{ padding-bottom: 0;} /* .events > .main{ padding: 0;} */ .events::after{ left: 0; top: -48%;} .events::before,.events::after{ display: none;} .events:last-of-type{ padding-bottom: 60px !important;} .events:nth-last-child(1 of .events) { padding-bottom: 80px !important;} .dir_row{ position: static;} } @media only screen and (max-width: 700px){ .leftslide{ grid-template-columns: repeat(1,1fr);} .rightslide h2{ font-size: 45px; line-height: 65px;} } @media only screen and (max-width: 450px){ .enjoy{ width: 100%; text-align: center;} .see_all{ width: 100%; margin-top: 10px;} .en_user{ justify-content: center;} } /*Why*/ .why{ margin: 80px 0;} .why .sec_main{ max-width:900px; margin:auto; padding:10px 0; overflow: hidden; position: relative;} .sec_title{ text-align: center; font-size: 19px; line-height: 33px; font-family: 'VazirmatnB'; text-align:right; display:inline-block;} .sec_title span{ padding-right: 25px; position:relative; display: inline-block;} .sec_title span:before{ content:""; width:16px; height:3px; background:#ff5c01; position:absolute; right:0; top:13px; margin:auto; display:block;} .sec_main .sec_title i{color:#ff5c01; padding-left:10px; padding-right:10px;} .sec_main .sec_title span:before{height:10px; width:10px;} .sec_main .sec_title b{ color:#ff5c01;} .sec_main a{ color: #1267c2;} .sec_main a:hover{ opacity: 0.7;} .sec_main .whytxt{ margin-bottom:30px; padding:10px 30px; transition:linear .2s;} .why .whytxt:hover{background:rgba(255,255,255,0.5);} @media only screen and (max-width: 700px){ .sec_title{ font-size: 21px; line-height: 35px;} } /******************************* show more seo text **************************************/ .add_bt{ background:#fff; color:#FFF; position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:14px; cursor:pointer; z-index: 3; transition: all .5s linear; } .add_bt i{ padding-right: 5px; color: #ff5c01; font-size: 16px; vertical-align: middle; transition: all .5s linear;} .add_bt:before{ content:""; height:100px; background: -moz-linear-gradient(90deg, rgb(12, 6, 6) 10%, rgba(242,242,242,0.05) 99%, rgba(242,242,242,0.05) 100%, rgba(0,0,0,0.05) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.05)), color-stop(0%, rgba(242,242,242,0.05)), color-stop(1%, rgba(242,242,242,0.05)), color-stop(90%, rgba(242,242,242,1))); /* safari4+,chrome */ background: -webkit-linear-gradient(90deg, rgba(255,255,255,0.9) 10%, rgba(242,242,242,0.05) 99%, rgba(242,242,242,0.05) 100%, rgba(0,0,0,0.05) 100%); /* safari5.1+,chrome10+ */ background: -o-linear-gradient(90deg, rgba(255,242,255,0.9) 10%, rgba(242,242,242,0.05) 99%, rgba(242,242,242,0.05) 100%, rgba(0,0,0,0.05) 100%); /* opera 11.10+ */ background: -ms-linear-gradient(90deg, rgba(255,255,255,0.9) 10%, rgba(242,242,242,0.05) 99%, rgba(242,242,242,0.05) 100%, rgba(0,0,0,0.05) 100%); /* ie10+ */ background: linear-gradient(0deg, rgba(255,255,255,0.9) 10%, rgba(242,242,242,0.05) 99%, rgba(242,242,242,0.05) 100%, rgba(0,0,0,0.05) 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#f2f2f2',GradientType=0 ); /* ie6-9 */ position:absolute; left:0; right:0; bottom:36px; display:block;} .add_bt .addButton{ padding: 5px 10px; font-family:'VazirmatnB'; font-size: 15px; line-height: 28px; color: #ff5c01; transition: all .5s linear; border-radius: 5px 5px 0 0; display: inline-block;} .add_bt.open{ background:transparent; bottom:-10px; margin: 20px auto 0 auto; color:#FFF;} .add_bt.open i{ transform: rotateX(180deg);} .add_bt .addButton:hover{ opacity:0.6;} .add_bt.open:before{ display:none;} /******************************* /show more seo text **************************************/ /************************************************** tourlist ***************************************************/ #top_head h1{ margin-bottom: 5px; font-family: "VazirmatnB"; font-size: 26px; line-height: 41px;} .groupbox{ margin-bottom: 60px; gap: 20px; align-items: stretch;} .groupbox .panel{ width: calc(25% - 15px); border: 1px solid #eee;} .groupbox .panel img{ width: 100%; height: 270px; object-fit: cover;} .panel .calendar{ background: #fff; position: absolute; top: 0; left: 0; right: 0; display: none;} .bott_side{ padding: 15px 15px 75px} .bott_side .item{ margin: 0 0 0 5px; font-size: 12px;} .big_date{ padding: 15px 15px 8px; font-family: "VazirmatnB"; font-size: 21px; line-height: 35px; } .rate_star{ margin-bottom: 10px; font-family: "VazirmatnB"; font-size: 16px;} .rate_star i{ color: #f4d320; font-size: 15px;} .bott_side h2{ margin-bottom: 17px; font-family: "VazirmatnB"; font-size: 21px; line-height: 35px;} /* .bott_side a{ display: block;} */ .bott_side h2 a:hover{ color: #ff5c01;} .bott_side .text{ min-height: 69px; margin-top: 15px; font-size: 14px; line-height: 23px;} .bott_side .more{ margin: 20px 0 0 auto;} .on_image{ position: relative; display: block;} .on_image h2{ width: calc(100% - 30px); font-family: "VazirmatnB"; font-size: 21px; line-height: 35px; bottom: 20px;} .morebox{ position: absolute; left: 15px; right: 15px; bottom: 15px;} .morebox .more{ max-width: 100%; width: Calc(50% - 4px); margin: 20px auto 0 !important;} .morebox .green_bt{ margin-right: auto;} .title_box{ height: 35px; margin-bottom: 10px; position: relative;} .other_date{ padding: 3px 8px; background: #fff; font-size: 12px; border: 1px solid #f9f9f9; border-right: 3px solid #ff5c01; box-shadow: 0 0 11px #f9f9f9; position: absolute; bottom: 0; left: 0; right: 0; cursor: pointer;} .other_date:hover{ text-decoration: underline;} .other_date i{ margin-left: 5px; color: #ff5c01; font-size: 15px;} .mar0bt{ margin-bottom: 0 !important;} .mar5bt{ margin-bottom: 5px;} .filter_type{ gap: 10px;} .trip_filter{ margin-right: auto;} .trip_filter a{ padding: 5px 12px; margin-right: 5px; background: #fff; font-size: 13px; line-height: 25px; border: 2px solid transparent; border-radius: var(--radius7); display: inline-block; position: relative;} .trip_filter a:hover,.trip_filter a.active{ border: 2px solid #ff5c01;} .trip_filter a::after{ content: ""; width: 1px; height: 15px; border-left: 1px solid #ccc; position: absolute; top: 10px; left: -6px; display: inline-block;} .trip_filter a:last-child::after{ display: none;} .trip_filter span{ font-size: 13px;} /*popup other option*/ .other_trips{ width: 100%; height: 100%; padding-top: 44px; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; display: none; z-index: 100000; overflow: auto;} .other_trips .title_box{ height: 70px;} /* .other_trips .groupbox .panel > a{ display: block !important;} */ .other_trips .panel .calendar{ position: static !important; display: block !important;} .top_line{ background: #f4f4f4; position: fixed; top: 0; left: 0; right: 0; align-items: center; z-index: 100;} .top_line span{ padding: 0 20px; font-family: "VazirmatnB"; font-size: 16px;} .top_line .close{ padding: 7px 20px; margin-right: auto; font-size: 30px; transition: all linear 0.2s; cursor: pointer;} .down_close{ padding: 10px; background: #f4f4f4; position: fixed; left: 0; bottom: 0; right: 0; text-align: center; display: block; transition: all linear 0.2s; cursor: pointer; z-index: 10;} .down_close span{ transition: all linear 0.2s;} .down_close:hover span,.top_line .close:hover{ opacity: 0.5;} .pop_title{ margin: 10px 0 20px; font-size: 30px; line-height: 40px; display: block;} .i_txt{ margin: 20px 0 10px; font-size: 16px;} .scroll{ overflow-y: scroll; position: fixed; width: 100%; left: 0px; top: 0px;} /** swich input **/ #exist{ line-height: 42px; padding: 0 12px; background: #f4f4f4; border-radius: var(--radius7); cursor: pointer;} #exist:has(#sw:checked) { background: #ffbb98;} #exist .lab1{ padding-left: 7px; cursor: pointer;} .switch { position: relative; display: inline-block; width: 42px; height: 23px; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider{ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .switch .slider:before{ position: absolute; content: ""; height: 15px; width: 15px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } .switch input:checked + .slider{ background-color: #ff5c01; } .switch input:checked + .slider:before { -webkit-transform: translateX(19px); -ms-transform: translateX(19px); transform: translateX(19px); } .switch input:checked{ background: #ffbb98;} /* Rounded sliders */ .switch .slider.round { border-radius: 34px; } .switch .slider.round:before { border-radius: 50%; } @media only screen and (max-width: 1024px){ .groupbox .panel{ width: calc(50% - 10px);} } @media only screen and (max-width: 768px){ .trip_filter{ width: 100%; margin: 10px 0;} .trip_filter a{ margin: 0 0 0 5px;} .filter_type .filters{ width: 100%; padding-bottom: 11px;} } @media only screen and (max-width: 600px){ .groupbox .panel{ width: 100%;} } /* calendar */ .trip_cal > div{ display: flex; align-items: stretch; justify-content: center;} .trip_cal > div:first-child{ margin-bottom: 5px; background: #fff; color: #000; border-bottom: 3px solid #fe5619;} .trip_cal > div:first-child > div{ width: 14.28%; margin: 2px 10px 5px; background: transparent; font-size: 15px; line-height: 22px;} .trip_cal > div > div{ width: 14.28%; margin: 3px; background: #f4f4f4; font-size: 14px; line-height: 26px; text-align: center; border: 3px solid transparent; border-radius: 5px; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box;} .trip_cal > div b{ font-family: "IRANSansB"; position: relative; top: 1px;} .trip_cal .d_holy{ background: #fff6f6; color: #d50500;} .trip_cal .d_tour{ border-color:#ff5c01;} .trip_cal > div > div span{ font-size: 12px; line-height: 22px; display: block;} /********************************************************** trip ********************************************************/ .nxt_tour{ padding: 15px 15px 15px 0; margin: 0 0 20px; background-image: linear-gradient(to left, #e4e4e4, #ebebeb, #f1f1f1, #f8f8f8, #ffffff); color:#ff5c01; font-size: 18px; line-height: 30px; border-radius: 7px; align-items: center;} .nxt_tour .green_bt{ margin: 0 auto 0 0;} #top_trip{ margin-bottom: 20px;} #top_trip > div{ width: Calc(50% - 10px);} #top_trip .trip_right{ margin-left: auto;} .trip_right > span{ position: relative; border-radius: var(--radius7); display: block; overflow: hidden;} .trip_right img.cover{ width: 100%; height: 500px; object-fit: cover;} .trip_title{ color: #fff; text-shadow: 0 0 10px rgba(0,0,0,.6); border-radius: 0 7px 7px 0;} .trip_title .trip_name{ font-family: "VazirmatnB"; font-size: 31px; line-height: 46px;} .lbl_box{ margin-bottom: 15px;} .label_star{ padding: 3px 10px; margin: 2px 0; background: #fff1e9; color: #ff5c01; font-family: "VazirmatnB"; font-size: 12px; line-height: 22px; border-radius: 15px; border: 1px solid #ffd2b9; display: inline-block;} .label_star i{ position: relative; top: 1px;} .wallet{ max-width: max-content; width: 100%; padding: 5px; margin: 2px auto 2px 0; background: #f4f4f4; text-shadow: none; font-size: 12px; line-height: 18px; align-items: center; border-radius: 5px; z-index: 10;} .wallet > div{ margin-right: 10px;} .wallet img{ width: 34px; display: block;} .wallet span{ color: #ff5c01; font-family: "VazirmatnB"; font-size: 11px; display: inline-block;} .wallet span span{ font-size: 12px;} .wallet.on_form{ margin: 5px auto auto; background: #ffe8dc; color: #333; text-align: center; text-shadow: none !important;} .wallet.on_form span{ color: #ff5c01;} @media only screen and (max-width: 500px) { .lbl_box{ justify-content: flex-end;} .wallet{ max-width: 100%;} .wallet > div{ width: calc(100% - 50px);} } .tour_info{ padding: 20px 25px; font-size: 13px; line-height: 25px; color: #fff; position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; text-shadow: 0 0 10px rgba(0,0,0,.6);} .tour_info .trip_name{ font-family: "VazirmatnB"; font-size: 31px; line-height: 46px;} .tour_info .loc{ margin-bottom: 4px;} .tour_info .tour_ti{ margin-top: 4px;} .tour_type{ margin-top: 7px; font-size: 12px; line-height: 24px;} .tour_type span{ display: inline-block;} .tour_type span::after{ content: "|"; padding: 0 5px; color: #fff;} .tour_type span:last-child::after{ display: none;} .last_buy{ padding: 10px 20px; margin: 20px 0; background-image: linear-gradient(to left, #f4f4f4, #f7f7f7, #f9f9f9, #fcfcfc, #ffffff); font-family: "VazirmatnB"; border-radius: 0 7px 7px 0;} .last_buy i{ color: #ff5c01;} .shadowin::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .6) 100%); z-index: 1; transition: all linear 0.3s;} .trip_left{ padding: 0 50px 0 0;} .trip_left .rate_star{ margin: 25px 0;} .trip_left .cost{ margin-right: auto; font-family: "VazirmatnB"; font-size: 36px;} .trip_left .cost b{ font-size: 20px;} .discount{ font-size: 18px; line-height: 32px; text-align: left;} .discount .real{ color: #a2a2a2; text-decoration: line-through;} .discount .off{ padding: 3px 5px; margin-right: 5px; background: #ff5c01; color: #fff; border-radius: 7px; text-shadow: 1px 1px 0px rgba(99,99,99,0.8); direction: ltr; display: inline-block;} .discount .off i{ font-size: 14px; line-height: 25px;} .next_date{ font-family: "IRANSansM"; font-size: 12px; color: #ff5c01; border-bottom: 1px dashed #ff5c01;} .next_date:hover{ opacity: 0.6;} .other_butt{ margin: 0 0 15px 0; align-items: flex-end;} .other_butt .discount{ margin-bottom: 20px;} .trip_left .green_bt{ width: 100%; padding: 7px 15px; margin: 10px auto 20px; font-size: 18px; border-radius: 10px;} .trip_item{ display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;} .trip_item span{ padding: 15px; background: #fff; box-shadow: 0px 0px 10px #e0e0e0; border-radius: 10px; position: relative; display: inline-block;} .trip_item span i{ color: #ff5c01;} .included{ width: 100%; padding: 15px; margin: 20px 0 0; background: #fff; box-shadow: 0px 0px 3px #e0e0e0; border-radius: 10px; position: relative; display: inline-block;} .included > b{ margin-bottom: 5px; font-size: 21px; line-height: 35px; display: block;} .trip_right .included, .theme_mob{ padding: 10px; background: #f4f4f4;} .theme_mob{ margin-bottom: 20px; display: none;} #fix_next .book_icon{ margin: 0 0 0 5px; font-size: 18px;} @media only screen and (max-width: 768px){ .trip_item{ grid-template-columns: repeat(2,1fr);} #top_trip > div{ width: 100%;} .trip_right img.cover{ height: 350px; border-radius: 7px;} .trip_left{ padding: 30px 0 0;} #fix_next{ width: 100%; margin: 0; line-height: 65px; font-size: 22px; border-radius: 0; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;} #fix_next i{ font-size: 18px; position: relative; top: 2px;} .padd_foot{ padding-bottom: 90px !important;} .theme_mob{ display: block;} .trip_right .included,.shadowin::before{ display: none;} .trip_right .trip_title{ width: 100%; margin-bottom: 20px; background: #373737 url(images/background/map3.png); position: static; border-radius: 7px;} } #online_res{ padding: 40px 0; background: #f4f4f4; text-align: center;} #online_res .s_title{ margin: auto; color: #333;} #online_res .flexbox{ margin: 30px 0 0; gap: 20px;} #online_res .flexbox > div{ width: Calc(25% - 15px); display: flex; align-items: center; font-family: "VazirmatnB"; font-size: 18px; line-height: 30px; text-align: right;} #online_res .flexbox > div div{ width: calc(100% - 70px);} #online_res i{ width: 60px; height: 60px; margin-left: 10px; background: #333; color: #fff; font-size: 30px; border-radius: 100%; display: inline-flex; flex-direction: column; justify-content: center; align-items: center;} @media only screen and (max-width: 800px){ #online_res .flexbox > div{ width: Calc(50% - 15px);} } @media only screen and (max-width: 600px){ #online_res .flexbox{ justify-content: center;} #online_res .flexbox > div{ width: 100%; max-width: 250px} #online_res .flexbox > div div{ width: auto;} .nxt_tour b{ width: 100%;} .nxt_tour .green_bt{ margin: 10px 0 0;} } #itinerary{ margin: 60px 0;} #itinerary .s_title{ margin-bottom: 15px;} .map_left,.map_left2{ width: Calc(50% - 10px); margin-right: auto; border-radius: var(--radius7); overflow: hidden;} .map_left iframe,.map_left2 iframe{ width: 100%; height: 100%; min-height: 500px; border: none;} .plan_column,.plan_column2{ width: Calc(50% - 10px); padding: 50px; background: #f4f4f4; border-radius: var(--radius7);} .plan_column > div,.plan_column2 > div{ padding: 0 15px 10px 0; border-right: 2px solid #333; position: relative;} .plan_column > div:last-child,.plan_column2 > div:last-child{ padding-bottom: 0;} .plan_column .b_titr,.plan_column2 .b_titr{ font-size: 16px; line-height: 30px; display: inline-block;} .plan_column .location,.plan_column .flag,.plan_column2 .location,.plan_column2 .flag{ width: 18px; height: 27px; padding-bottom: 5px; background: #f4f4f4; color: #fe5619; position: absolute; right: -10px; top: 0; text-align: center; display: flex; justify-content: center; align-items: flex-end;} .plan_column .flag{ top: inherit; bottom: 0;} .i_arrow{ height: 25px; width: 25px; background: #ff6925; color: #fff; position: absolute; left: 0; top: 0; cursor: pointer; border-radius: 50%; display: flex !important; flex-direction: column; justify-content: center; align-items: center; transition: all linear 0.2s;} .i_arrow:hover{ background: #ff6925;} .in_title{ margin-bottom: 10px; font-size: 19px; line-height: 34px; display: block;} .activity{ padding: 10px; margin-top: 10px; background: #fbfbfb; border: 1px solid #eee; border-radius: 7px;} .activity > div{ margin-bottom: 5px; color: gray; font-size: 13px;} .activity > div i{ width: 25px; height: 25px; line-height: 25px; margin-left: 3px; background: #ff6925; color: #fff; font-size: 13px; border-radius: 7px; text-align: center;} .activity > div:last-child{ margin-bottom: 0;} /**popup**/ #pop_itinerary{ padding: 70px 0; background: #adddff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; display: none;} #pop_itinerary .close_pop{ position: absolute; left: 20px; top: -46px; font-size: 40px; cursor: pointer;} #pop_itinerary > .main{ position: relative;} .map_left2{ width: Calc(100% - 520px);} .plan_column2{ width: 500px; max-height: calc(100vh - 140px); background: #fff; overflow-y: auto; scroll-behavior: smooth;} .plan_column2 .b_titr{ padding: 10px 20px; margin-bottom: 10px; background: #ffbb98; border-radius: var(--radius7);} .plan_column2 .location,.plan_column2 .flag{ background: #fff; top: -8px;} .plan_column2 .flag{ top: inherit; bottom: 0;} .plan_column2 > div{ padding: 0 15px 25px 0;} /* custom-scroll */ .plan_column2{ scrollbar-width: thin; /* auto | thin | none */ scrollbar-color: #bbb #eee;} /* Chrome / Edge / Safari */ .plan_column2::-webkit-scrollbar{ width:10px; } .plan_column2::-webkit-scrollbar-track{ background:#eee; border-radius:5px;} .plan_column2::-webkit-scrollbar-thumb{ background:#bbb; border-radius:5px;} .plan_column2::-webkit-scrollbar-thumb:hover{ background:#999;} /* هایلایت روز مقصد در پاپ‌آپ*/ .plan_column2 .is-current{ border-right-color: #ff6925;} .plan_column2 .is-current .location{ color: #ff6925;} @media only screen and (max-width: 1024px){ #pop_itinerary{ bottom: inherit; top:100%; display: block !important; transition: all linear 0.4s;} #pop_itinerary.show{ top: 0;} .plan_column2{ width: 100%;} .map_left2{ display: none;} } @media only screen and (max-width: 768px){ .map_left,.plan_column{ width: 100%;} .map_left{ margin-top: 20px;} .map_left iframe{ height: 300px; min-height: inherit;} } #trip_bottom{ margin-bottom: 40px;} .r_side{ width: calc(100% - 320px); margin-left: auto;} .r_side .text_body{ max-width: 100%;} .r_side .text_body p{ text-align: right !important;} .r_side .text_body strong{ font-family: "IRANSansR" !important;} .leftfix{ width: 300px; background: #373737; color: #fff; border-radius: 7px; transition: all linear 0.2s;} .leftfix .green_bt{ width: 100%;} .leftfix img{ width: 100%; height: 220px; border-radius: 7px; object-fit: cover !important;} .inner_sec{ padding: 20px;} .fix_cost{ margin-bottom: 10px; font-family: "VazirmatnB"; font-size: 18px; line-height: 28px; } .fix_cost > div .cost{ font-size: 31px; line-height: 45px;} .costtxt{ margin-left: auto;} .gift{ margin-bottom: 10px; font-size: 10px; line-height: 18px;} .gift i{ margin-left: 3px; color: #ff6925; position: relative; top: 1px; text-align: center; border-radius: 3px;} .gift a{ color: #ff6925; border-bottom: 1px dashed #ff6925;} /* .fix_cost span{ font-size: 18px;} */ .t_details{ padding-top: 10px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;} .t_details > div{ margin-bottom: 10px; position: relative; padding-right: 20px;} .t_details > div::before{ content: ""; width: 8px; height: 8px; background: #fe5619; font-size: 20px; position: absolute; right: 0; top: 8px;} @media only screen and (max-width: 1024px){ .r_side{ width: 100%;} .leftfix{ width: 100%; margin-top: 30px; position: static !important;} .leftfix img{ height: 300px;} } .common{ margin: 60px 0;} .r_side > .common:first-child{ margin-top: 0;} .r_side > .common:last-of-type{ margin-bottom: 0;} .sub_trip{ margin-bottom: 10px; font-family: "VazirmatnB"; font-size: 22px; line-height: 36px;} .sub_trip i{ margin-left: 5px; color: #ff6925;} .glance{ display: grid; grid-template-columns: repeat(2,1fr); gap: 5px;} .glance > div{ padding: 10px 15px; border-bottom: 1px solid #ddd;} .glc_sub{ font-size: 14px; display: inline-block;} .glc_sub i{ width: 35px; height: 35px; line-height: 35px; margin-left: 5px; background: #ff6925; color: #fff; text-align: center; font-size: 20px; border-radius: 5px;} .glance a.link, .glance a.link i{color:rgba(3,70,142,1.00); transition:linear .2s;} .glance a.link:hover{color:rgba(36,62,90,1.00);} .other_link a{ color:#016ae0; transition:all linear 0.2s;} .other_link a:hover{ opacity:0.7;} .comma span::after{content:"،"; padding-left:2px;} .dish .comma span::after{padding-left:0;} .comma span:last-child::after{display:none;} .glance .levelt img{ max-width:40px; display:inline-block;} @media only screen and (max-width: 550px){ .glance{ grid-template-columns: repeat(1,1fr);} } /**** Carousel Album ****/ .no_effect_5 .slick-track{ width: 100% !important; transform: translate3d(0px, 0px, 0px) !important; display: flex; justify-content: center; direction: rtl;} /* .no_effect_1 .slick-dots, .no_effect_3 .slick-dots, .no_effect_5 .slick-dots{ display: none;} */ .no_effect_5 .slick-list{ padding: 0 !important;} .carousel{ direction: ltr; overflow: hidden;} .slick-dots{ display: none !important;} .album_carousel{ margin: 60px 0;} .album_carousel .team-members{ width: 100%; margin-bottom: 0 !important; margin: 0 auto; display: flex; justify-content: center;} .album_carousel .team-item{ cursor: grab; /**min-height: 419px !important;**/ width: 157px !important; text-align: center; margin: 5px !important; background-color: #fff; border: 1px solid #eee; transition: all linear 0.2s;} .album_carousel .team-item:hover img{ transform: scale(1.1,1.1);} .album_carousel .team-item-img{ width: 100%; display: block; position: relative; transition: all linear .2s;} .album_carousel .team-item-img img{ width: 100%; display: block; transition: all linear .2s;} .album_carousel .team-item{ width: 250px !important; margin: 0 15px !important; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,.1); overflow: hidden;} .album_carousel .slick-next:before,.album_carousel .slick-prev:before{ font-size: 25px !important;} .album_carousel .slick-prev,.album_carousel .slick-prev:focus,.album_carousel .slick-next,.album_carousel .slick-next:focus{ width: 50px; height: 50px; background: #fff; border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,.4); z-index: 10;} .album_carousel .slick-prev{ right: 25px; left: inherit;} .album_carousel .slick-next{ left: 25px; right: inherit;} .album_carousel .slick-arrow:hover{ background: rgb(231, 231, 231);} .album_carousel .slick-slide img{ width: 100%; height: 270px; margin: 0; object-fit: cover; object-position: top; display: block;} .album_carousel .slick-next:before,.album_carousel .slick-prev:before{ content:"\f060"; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size: 40px; color: #ff6925;} .album_carousel .slick-prev:before{ content: "\f061" !important;} .album_carousel .trip_title{ font-size: 12px; bottom: 30px;} .album_carousel .trip_title > b{ font-size: 14px;} @media only screen and (max-width: 600px){ .album_carousel .team-item{ width: 270px !important;} .album_carousel .slick-slide img{ height: 300px;} .album_carousel .slick-prev,.album_carousel .slick-next{ width: 50px; height: 50px;} .album_carousel .slick-next:before,.album_carousel .slick-prev:before{ font-size: 20px !important;} .album_carousel .slick-prev{ right: 10px; } .album_carousel .slick-next{ left: 10px;} } /********************************** Carousel Daily ***********************************/ .catering_flow{ overflow: inherit;} #catering{ margin-top: 25px !important;} #catering .each_day{ padding: 15px; background: #fff; box-shadow: 0px 0px 3px #e0e0e0; border-radius: 15px; position: relative;} .each_day > b{ width: 65px; height: 50px; margin: auto; color: #000; padding: 5px; font-size: 20px; background: #f4f4f4; border-radius: 10px; position: absolute; top: -25px; left: 0; right: 0; display: flex; align-items: center; justify-content: center;} .each_day > div{ padding: 10px 0; border-bottom: 1px dashed #ccc;} .each_day > div:last-of-type{ padding-bottom: 0; border: none;} .each_day > div i{ width: 35px; height: 35px; line-height: 35px; margin-left: 5px; color: #ff6925; text-align: center; font-size: 20px; border-radius: 5px;} #catering .team-item{ width: 305px !important; min-height: 260px !important; margin: 0 4px !important; background-color: #fff; text-align: right; cursor: grab; transition: all linear 0.2s;} #catering .team-item:hover{ box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);} #catering.team-members{ width: 100% !important; margin: 0 auto; display: block !important; direction: rtl;} #catering .slick-list{ padding: 26px 0 5px !important;} #catering .slick-track{ display: flex; margin: 0;} #catering .slick-next,#catering .slick-prev{ height: 40px; width: 40px; background: #ff6925; border-radius: 50%; box-shadow: 0px 0px 3px #e0e0e0; z-index: 10;} .no_effect_3{ margin: 0;} #catering.team-members .slick-prev:before { content: "\f053" !important; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size: 20px; color: #fff; } #catering.team-members .slick-next:before { content:"\f054" !important; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size: 20px; color: #fff; } @media only screen and (max-width: 1400px){ #catering.team-members{ width: 600px !important;} } @media only screen and (min-width: 1024px){ #catering .slick-next,#catering .slick-prev{ right: inherit; top: 0; left: 5px;} #catering .slick-next{ left: 50px;} } @media only screen and (max-width: 1024px){ #catering .slick-next { right: -45px !important;} #catering .slick-prev{ left: -45px !important; right: inherit !important;} } @media only screen and (max-width: 768px){ #catering.team-members{ width: 305px !important; } } @media only screen and (max-width: 450px){ #catering.team-members{ width: 270px !important; } } #summary{ width: calc(100% - 6px); margin: 40px 0 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 30px 10px;} #summary > div{ padding: 25px 15px 15px; background: #f4f4f4; box-shadow: 0px 0px 3px #e0e0e0; border-radius: 15px; border: 1px solid #e0e0e0; position: relative;} #summary > div b{ padding: 5px 10px; margin-bottom: 10px; background: #dedede; position: absolute; top: -19px; right: 20px; border-radius: 7px; display: block;} #summary > div b i{ color: #ff6925;} #summary > div > span{ margin-right: 20px; font-size: 13px; display: block;} #summary > div > span::before{ content: "\f111"; margin-left: 5px; color: #ff6925; font-size: 5px; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; } @media only screen and (max-width: 550px){ #summary{ grid-template-columns: repeat(2,1fr);} } .itembox{ padding: 20px; margin: 20px 0; border: 1px solid #ddd; border-radius: var(--radius7); position: relative;} .listitem{ padding: 0 8px; background: #fff; color:#333; font-family: "VazirmatnB"; font-size:14px; position: absolute; top: -15px; right: 10px;} .tools{ padding-right:15px; padding:0; font-size:0; gap:5px;} .tools li{ min-width:90px; padding:3px 8px; background:#f4f4f4; color:#333; font-size:13px; text-align:center; border-radius: var(--radius7); display:inline-block;} .tools li a{ color:#143075; transition:all linear 0.2s} .tools li a:hover{ opacity:0.7;} .tools li a:before{ content: "\f0c1"; padding-left:3px; font-family: "Font Awesome\ 5 Free"; font-weight: 900; font-size:11px;} #other_trip{ width:100%;} #other_trip tr td{ padding:7px; line-height:25px; font-size:13px; border-bottom:1px solid #ccc;} #other_trip tr:last-child td{ border-bottom:none;} #other_trip td:last-child{ border-left:none;} #other_trip td a{ color:#316087; display:block; transition:all linear 0.3s;} #other_trip td:hover a{ color:#1C3E93;} #other_trip tr:first-child td{ padding:5px; color:#ff5c01; font-size:13px; font-family:"VazirmatnB"; background:white; white-space:nowrap;} #other_trip tr:nth-child(2n-1){ background:#f4f4f4;} #other_trip tr{ transition:all linear 0.3s;} #other_trip tr:hover{ background:#E4E4E4;} #other_trip td:nth-child(4) span{ direction:ltr; display:inline-block;} @media only screen and (max-width: 768px) { #other_trip{ max-width:500px; margin:auto;} #other_trip tr:first-child{ display:none;} #other_trip tr{ margin-bottom:20px; background:#f4f4f4 !important; border-radius: var(--radius7); overflow: hidden; display:block;} #other_trip tr td{ text-align:center; border:none; display:block;} #other_trip tr td:first-child{ padding:9px 5px; background:#373737; color:#fff; font-size:16px; text-shadow:1px 1px 2px #000;} #other_trip tr td:before{ padding-left:5px; font-family:VazirmatnB; font-size: 14px;} #other_trip tr td:nth-child(2){ color:#333; font-size:14px;} #other_trip td a{ color:#316087;} #other_trip tr td:nth-child(1):before{ content:"کد:";} #other_trip tr td:nth-child(2):before{ content:"عنوان:";} #other_trip tr td:nth-child(3):before{ content:"روز شروع:";} #other_trip tr td:nth-child(4):before{ content:"تاریخ:";} #other_trip tr td:nth-child(5):before{ content:"مدت:";} #other_trip tr td:nth-child(6):before{ content:"ظرفیت:";} #other_trip tr td:nth-child(7):before{ content:"قیمت:";} } #questions a{ color:#316087; transition:all linear 0.3s;} #questions a:hover{ color:#143075;} #suggest .flexbox{ margin: 20px 0 0;} #suggest .each_sug{ width: Calc(25% - 15px); margin-left: 20px; border-radius: var(--radius7); overflow: hidden;} #suggest .each_sug:last-child{ margin-left: 0 !important;} #suggest .each_sug img{ width: 100%; height: 180px; object-fit: cover; display: block;} #suggest .noflow{ position: relative;} #suggest h3{ padding: 5px 10px; background: #313131b0; color: #fff; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; font-size: 14px; line-height: 26px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block;} @media only screen and (max-width: 1024px) { #suggest .each_sug{ width: Calc(50% - 10px); margin: 0 0 20px 20px;} #suggest .each_sug:nth-child(2n){ margin-left: 0;} } @media only screen and (max-width: 500px) { #suggest .each_sug{ width: 100%; margin: 0 0 20px;} } /** account info **/ #acc_info .col_txt{ color: #ff5c01;} #acc_info table{ margin: 20px 0;} #acc_info table tr:first-child td{ background: #373737 !important; color: #fff; font-size: 14px; text-shadow: 1px 1px 0px #333;} #acc_info table td{ padding: 4px 10px; background: #fff; line-height: 28px; text-align: center; border: 1px solid #eee;} .ltr{ direction: ltr; display: inline-block;} @media only screen and (max-width: 768px){ #acc_info table{ max-width: 500px; width: 100%; margin: 20px auto;} #acc_info table tr:first-child{ display: none;} #acc_info table td{ width: 100% !important; padding: 7px 10px !important; border-top: none; display: block;} #acc_info table td:first-child{ background: #373737; color: #fff; font-family:'VazirmatnB';} #acc_info table td:before{ padding-bottom: 4px; color: #ff5c01; font-family:'VazirmatnB'; display: block;} #acc_info table td:nth-child(1):before{ content: "بانک"; color: #fff; display: inline-block} #acc_info table td:nth-child(2):before{ content: "شماره حساب"} #acc_info table td:nth-child(3):before{ content: "شماره کارت"} #acc_info table td:nth-child(4):before{ content: "شماره شبا";} #acc_info table td:nth-child(5):before{ content: "صاحب حساب";} } /*album*/ #album_box { padding: 0 20px; margin: 0 0 40px 0; position: relative; overflow: hidden; width: 100%; } #galleryBox { display: flex; gap: 10px; padding: 0; margin: 0; list-style: none; transition: transform 0.5s ease-out; will-change: transform;} #galleryBox li { flex: 0 0 auto; height: 280px; background-size: cover !important; background-position: center !important; position: relative; border-radius: 7px; overflow: hidden; cursor: pointer; transition: all 0.2s linear;} #nex_button, #pre_button { width: 40px; height: 40px; line-height: 44px; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); z-index: 999; border-radius: 50%; text-align: center; cursor: pointer; opacity: 0.8;} #nex_button { left: 22px; } #pre_button { right: 22px; } #nex_button:hover,#pre_button:hover{ background: #fff; opacity: 1; } #galleryBox:after{ content:''; clear:both; display:block;} #galleryBox li:before{ content:"\f00e"; color:#fff; position:absolute; top:50%; right:0; left:0; transform: translateY(-50%); font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size:30px; text-align: center; visibility:hidden; opacity:0; transition:all linear 0.5s; display: block;} #galleryBox li:hover{ /*-webkit-filter: grayscale(0); Safari 6.0 - 9.0 filter: grayscale(0);*/ opacity:0.7;} #galleryBox li:hover:before{ visibility:visible; opacity:1;} #galleryBox li:hover:after{ visibility:hidden; opacity:0;} #galleryShow{ max-width: 100%; max-height: 100%; padding:0 10px 10px 10px; background: rgba(0,0,0,.88); position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; transform-origin: 50% 0; opacity: 0; visibility: hidden; transition: all .5s linear; z-index: 9999; } #galleryShowClose{ padding:10px 50px; color: #FFF; font-size: 30px; line-height: 30px; cursor: pointer; transition: all .3s linear; position:relative; z-index:13;} #galleryShowClose:hover{ opacity:0.5;} #galleryShowImg{ overflow: hidden; margin-top: 5px; opacity: 1; transition: all .8s linear; text-align:center;} #galleryShowImg > span{ position:relative; display:inline-block;} #galleryShowImg > span > div{ position:absolute; bottom:5px; left:5px; margin:auto; padding:3px 15px; text-shadow:1px 1px 1px #000; background:rgba(0,0,0,0.5); color:#fff; font-size:13px; display:inline-block;} #galleryShowImg > span > div:empty{ display:none;} #galleryShowImg img{ max-width: 100%; max-height:530px; margin:auto; border-radius: var(--radius7); display: block;} #galleryShowImg i{ width: 50%; height:100%; padding-top:22%; margin: auto; font-size: 36px; color: #FFF; text-shadow: 0px 1px 2px #000; position: absolute; top: 0; bottom: 0; z-index: 12; cursor: pointer; transition: all .3s linear; opacity: 0;} #galleryShowImg i:hover{ opacity:0.5;} #leftGallerySlide{ padding-left:20px; left: 0; text-align:left;} #rightGallerySlide{ padding-right:20px; right: 0; text-align:right;} #galleryShowInfo{ margin-top: 10px; color: #c2c2c2; text-align: center; } #galleryShowTxt{ padding-bottom:5px; line-height: 30px; font-size: 14px; font-family:'VazirmatnB'} #galleryShowdetail{ line-height: 18px; font-size: 12px; } #galleryShow.active{ opacity: 1; visibility: visible; } .pic_title{ width: 100%; padding: 10px 15px; background: #000000a9; color: #fff; position: absolute; left: 0; right: 0; bottom: 0; text-align: right; display: block; z-index: 5;} .pic_title b{ font-size: 16px; display: block;} .pic_title div{ font-size: 12px;} #morePic{ width:150px; margin:20px auto 30px; display:none;} @media only screen and (max-width: 1000px){ #galleryBox{ width:auto !important;} #galleryBox li{ width:50% !important; height:280px;} #galleryBox li:before{ padding-top:115px;} #galleryBox li:after{ padding-top:150px;} #galleryBox li.disnone{ display:none;} #galleryBox li > div{ border-left:6px solid #fff;} #morePic{ display:block;} #nex_button,#pre_button{ display:none !important;} } @media only screen and (max-width: 768px){ #leftGallerySlide, #rightGallerySlide{ opacity:0.5 !important;} #galleryShowImg i{ padding-top:35%;} } @media only screen and (max-width: 550px){ #galleryBox li{ width:100% !important; display:block;} } @media only screen and (max-width: 400px){ #galleryShowImg i{ padding-top:40%;} } /*album*/ /*leader*/ .tourleader img{ width: 150px; margin: auto; border-radius: 50%; display: block;} .tourleader > div{ width: calc(100% - 230px); margin: 0 50px 0 30px; position: relative;} .tourleader > div b{ margin-bottom: 5px; font-size: 16px; line-height: 30px; display: block;} .tourleader i { color: #ff5c01; font-size: 20px; position: absolute;} .tourleader i.q_left { bottom: 6px; left: -25px;} .tourleader i.q_right { top: 6px; right: -28px;} .tourleader .sometrip{ color: gray; font-size: 12px; text-align: left;} @media only screen and (max-width: 550px){ .tourleader > div{ width: 100%; margin: 10px 30px 0;} .tourleader > div b{ text-align: center;} } /********************************************************** trip_order ********************************************************/ .sec_head{ width: 100%; background: #fff; border-bottom: 1px solid #D5D3DA; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1); position: fixed; top: 0; z-index: 200;} .logo_col img{ max-width: 40px; width: 100%; margin: 5px 0;} .head_title{ padding: 0 20px; margin-right: 20px; font-size: 13px; border-right: 1px solid #ccc;} .levels{ margin: 0 auto; display: none;} .sec_head .levels{ display: flex;} .levels > div{ color: #999; font-family: "VazirmatnB"; font-size: 14px; line-height: 28px;} .levels > div.active{ color: #000;} .levels > div:after{ content: "\f053"; padding: 0 15px; color: #555; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size: 12px; display: inline-block;} .levels > div:last-child:after{ display: none;} .levels .num{ margin-left: 5px; display: inline-table;} .call{ font-family: "VazirmatnB"; font-size: 21px;} .call i{ font-size: 15px;} @media only screen and (max-width: 768px){ .sec_head .levels{ display: none !important;} .levels{ margin: 5px 0 10px; display: flex;} .call{ margin-right: auto;} } #order_head{ margin-bottom: 20px;} #order_head h1{ margin-bottom: 5px; font-family: "VazirmatnB"; font-size: 41px; line-height: 55px;} #right_side{ width: calc(100% - 330px); margin-left: auto;} #left_side{ width: 300px; padding: 15px; background: #373737; border-radius: 7px;} #left_side .green_bt{ width: 100%;} /* #left_side button{ width: max-content; height: 40px; padding: 5px 15px; margin: 20px auto 0;} #left_side button i{ margin-right: 5px; font-size: 12px;} */ .each_point{ padding: 5px 0; position: relative;} .each_point:after{ content: ""; width: 100%; height: 1px; border-top: 1px dashed #656565; position: absolute; top: 50%; display: block;} .each_point span{ padding: 0 5px 0 0; margin-right: auto; background: #373737; color: #fff; font-family: "VazirmatnB"; position: relative; z-index: 1;} .each_point span b{ font-size: 16px;} .each_point > div{ padding: 0 0 0 8px; background: #373737; color: #fff; font-size: 13px; position: relative; z-index: 1;} .each_point i{ width: 20px;} .view_trip{ margin: 0 0 30px; border-radius: var(--radius7); overflow: hidden;} .view_trip img{ max-width: 300px; width: 100%; height: 220px; object-fit: cover;} .view_trip > div{ width: calc(100% - 300px); padding: 10px 15px; background: #f4f4f4;} .view_trip h2{ font-family: "VazirmatnB"; font-size: 21px; line-height: 35px;} .view_trip .item{ margin: 0 0 0 5px; font-size: 12px;} .left_view{ display: flex; flex-direction: column; justify-content: space-between;} .left_view .rate_star{ margin: 0;} .allbox{ margin-bottom: 40px; gap: 20px;} .pass_info h2{ margin-bottom: 5px; font-size: 21px; line-height: 35px; font-family: "VazirmatnB";} .each_field,.check_feild,.extra > div{ width: Calc(50% - 10px);} .each_field .tiny,.others .caption{ padding: 0 8px; background: #ffff; position: relative; top: 10px; right: 7px; font-size: 13px; display: inline-block;} .input_style input,.input_style select,.others input, .others select{ width: 100%; height: 40px; padding: 5px; background: transparent; border: 1px solid #ddd; border-radius: var(--radius7);} .f_check{ display: flex; flex-direction: column; justify-content: flex-end;} .threebox{ display: grid; grid-template-columns: repeat(3, auto); gap: 5px;} .w100{ width: 100% !important;} .check_feild{ width: 100%;} .check_feild input{ position: relative; top: 1px;} .check_feild a{ color: #fe5619;} .extra{ width: 100%; gap: 20px; align-items: flex-end;} #left_side .wallet{ max-width: 100%; background: #000; color: #fff; font-size: 10px; position: relative; top: 8px;} .gift_sec{ align-items: flex-start;} .gift_shop{ width: 100%; padding: 5px 0 5px 35px; background: #ffe8dc; text-align: right; align-items: center; border-radius: 7px;} .gift_icons{ width: 40px; height: 50px; line-height: 56px; position: relative; right: 0; border-left: 2px dashed #ff5c01; text-align: center; display: inline-block;} .gift_icons i{ color: #ff5c01; font-size: 20px;} .gift_shop > div{ width: Calc(100% - 50px); margin-right: auto; line-height: 28px;} .gift_shop > div span{ font-size: 16px; color: #ff5c01; display: block;} .gift_shop a{ color: #0059ca !important; border-bottom: 1px dashed #333;} @media only screen and (max-width: 900px) { .dis_box{ width: 100%;} .gift_shop{ margin-bottom: 30px;} } /*code takhfif*/ #NatijeTakhfif{ margin: 10px auto 0;} .off_box{ display: flex;align-items: center;margin-top: 10px;} #count-takhfif{line-height: 35px; font-size: 13px; background:#ff5c01; color:white; border:none; padding:0 10px; font-family:'VazirmatnB'; text-shadow: 1px 1px 0px rgba(99,99,99,0.8); margin-right: 4px; border-radius: 7px; cursor: pointer;} .wrong-code{color:#ff6b6b;font-size: 13px;margin-top: 5px;} .correc-code{color:#57e27a;font-size: 13px;margin-top: 5px;} .correc-code span{ font-family: 'IRANSansB';color: #57e27a;} .correc-code i,.wrong-code i{ font-size: 9px;} .red_i{ color: #ff6b6b !important;} .dis_box{ margin-top: 20px; padding-bottom: 10px; align-items: flex-end;flex-wrap:wrap; color: #fff; width:100%;text-align: right; border-bottom: 1px solid #777;} .dis_titr{font-size: 15px;color: #fff;font-family: "VazirmatnB"} .dis_titr i{font-size: 20px;color: #ff5c01} .offtxt{ font-size: 13px;} #numCode{width: 25%;border: 1px solid #ddd;height: 35px;min-width: 160px;font-family: tahoma; border-radius: 7px;} @media only screen and (max-width: 1024px){ .view_trip img,.view_trip > div{ max-width: 100%; width: 100%;} .view_trip h2{ margin-bottom: 10px;} .left_view .rate_star{ margin: 0 0 10px;} } @media only screen and (max-width: 850px){ #right_side{ width: 100%;} #left_side{ width: 100%; margin: 20px auto 40px;} .allbox{ gap: 20px 5px; margin: 0;} .each_field{ width: Calc(50% - 2.5px);} } @media only screen and (max-width: 500px){ .each_field{ width: 100%;} } /**hamrahan**/ .others{ display: grid; grid-template-columns: repeat(7,auto); gap: 5px;} .others .sex{ width: 75px;} #hamrahan .green_bt{ width: 230px;} .num_of{ width: 68px; padding: 3px 10px; font-family: 'VazirmatnB'; font-size: 16px; line-height: 30px; text-align: center; background: #fff; position: absolute; right: 15px; top: -25px; z-index: 4;} #hamrahan .each_person{ margin: 60px 0; padding: 15px; background: #fbfbfb; border: 1px solid #ffcdbb; position: relative; z-index: 5; border-radius: var(--radius7);} #hamrahan .each_person:last-of-type{ margin-bottom: 0;} .others .caption{ background: #fbfbfb;} .specs { max-width: max-content; padding: 5px 10px; background: #ffe5d6; border-radius: var(--radius7);} .specs i{ margin-left: 5px; color: #fe5619;} .resulton b{font-size:21px; line-height:36px;} @media only screen and (max-width: 1024px){ .others{ grid-template-columns: repeat(3,auto)} } @media only screen and (max-width: 600px){ .others{ grid-template-columns: repeat(2,auto)} } @media only screen and (max-width: 400px){ .others{ grid-template-columns: repeat(1,auto)} } /*Submited - trip_order */ .notmatched{font-size:15px;} .notmatched > div{font-size:18px; padding-bottom:20px;} .prefactor{max-width:900px; margin: 80px auto 0; padding:20px; background: #f9f9f9; border-radius: 7px;} .prefactor .title{ margin-bottom: 10px; font-size: 21px; line-height: 31px;} .payby{font-size:13px; text-align:center;} .grayb{background:#999 !important; border-color:#666 !important; transition:.2s linear;} .grayb:hover{background:#666 !important;} .buynow1{font-size:16px; padding-top:5px;} .buynow1 form{display:inline-block !important;} .submited{background:#f4f4f4;} #mainbg{ color:#333; margin-top: 15px;} .tablesub{display:table; width:100%; font-size:14px; margin:auto; border-collapse:collapse;} .tablesub > div{display:table-row; border-bottom:1px solid #E0E0E0;} .tablesub a{color:#069;} .tablesub a:last-child{width:100% !important;} .tablesub .rcell{display:table-cell; background:#f4f4f4; padding:5px; width:130px;} .card .rcell{display:table-cell; background:#faf9f2; padding:5px; max-width:50px; text-align:right;} .tablesub .topcell{display:table-cell; padding:5px;} .tablesub .lcell{display:table-cell; padding:5px; background:#FFF; text-align:right;} .submited a.button, .gotobank a.button{display:inline-block; font-size:15px; text-align:center; line-height:normal;} .submited #navigator{ padding: 70px 0 20px;} .wallet{ max-width: 310px; width: 100%; padding: 3px; background: rgba(0,0,0,0.3); color: #fffdff; text-shadow: 1px 1px 1px #000 !important; text-shadow: none; position: relative; font-size: 12px; line-height: 22px; align-items: center;} .wallet > div{ width: Calc(100% - 40px); margin-right: auto;} .wallet img{ width: 34px; display: block;} .wallet span{ color: #ffbe99; font-family: "samimBold"; font-size: 11px; display: inline-block;} .wallet span span{ font-size: 12px;} .wallet.on_form{ margin: 5px auto auto; background: #ffe8dc; color: #333; text-align: center; text-shadow: none !important;} .wallet.on_form span{ color: #ff5c01;} @media only screen and (max-width: 900px) { .tablesub .rcell, .card .rcell{max-width:none; width:22%;} .whocalls div:last-child{opacity:1 !important ;} .wallet{ margin: auto;} } @media only screen and (max-width: 540px) { .tablesub > div{ margin-bottom: 10px; display: block; border-radius: 7px; border:none; overflow: hidden;} .tablesub .rcell{ background: #e2e2e2; border-bottom:1px solid #E0E0E0;} .tablesub .rcell, .tablesub .lcell{width:100%; display:block; text-align:center;} } .whocalls{margin:25px auto 0; background:url(images/background/sup.png) repeat-x; padding-bottom:20px; text-align:right !important;} .whocalls:hover img{transform:rotateY(180deg);} .whocalls:hover div:last-child{opacity:1;} .whocalls > div{position:relative; width:50%; border-right:3px solid #FF9900; margin:auto;} .whocalls div:last-child{font-size:14px; background:#FFF; opacity:.7; transition:linear .2s; padding:5px;} .whocalls img{border-radius:100%; width:100px; position:relative; right:-50px; top:30px; transition:linear .3s; border:3px solid #FF9900;} .whocalls i{color:#0C6; padding:5px; font-size:22px;} .gotobank{font-size:15px; background:#FFF; padding: 20px; line-height:34px; border-radius: 20px; text-align: right;} .gotobank span b{color:#00b076; font-size:20px;} .resulton b{font-size:18px; line-height:34px;} .relativeBox{ position: relative; padding-bottom: 0 !important;} #orderFixedBtn{ margin-top: 10px; padding-bottom: 10px; } #orderFixedBtn.fixed{ margin-top: 0; background: #deffe6; position: fixed; width: 100%; bottom: 0; left: 0; z-index: 999; } #orderFixedBtn.fixed button{ margin-left: 0; margin-top: 10px; display: inline-block;} #orderFixedSpan{ color: #000;} #orderFixedBtn.fixed #orderFixedSpan{ color: #bf0f0f;} .orderDisplay{ display: none; } @media only screen and (max-width: 870px) { #orderFixedBtn{ padding-top: 0; } #orderFixedSpan { display: block; } } @media only screen and (max-width: 600px) { #orderFixedSpan { display: none; } .orderDisplay{ display: block; } } /************************************* search ****************************************/ /**** search box ****/ #search_box{ color: #444;} #search_box ul{ padding: 0; margin: 0; text-align:right; border-radius:0;} #search_tab{ font-size: 0; overflow: hidden; } #search_tab li{ width: 150px; padding: 8px 3px; color: #FFF; margin-left: 2px; text-align:center; background: #999; border-radius: 7px 7px 0 0; border:1px solid #A6A6A6; font-size: 15px; text-shadow: 0px 1px 2px #000; display: inline-block; cursor: pointer; transition: all .3s linear; font-family:'IRANSansR';} #search_tab li:hover{ background: #ff5c01; border:1px solid #ff5c01;} #search_tab li.active{ background: #ff5c01; border:1px solid #ff5c01;} #search_res{ padding: 10px; border: 1px solid #d7d7d7; overflow: hidden; border-radius: 7px 0 7px 7px;} .search.bg_gray{ padding:0 15px 50px;} #search_tab{ margin:20px 0; font-size: 0; font-family:'VazirmatnB';} #search_res{ padding: 10px; border: 1px solid #d7d7d7; overflow: hidden; } /* search tour form */ #sear_tourf, #sear_blogf{ padding: 30px 0; background: #f4f4f4; border: 1px solid #E5E5E5; color: #444; margin-bottom:0; border-radius: 7px;} #sear_tourf ul{ padding:0; margin:0; font-size: 0; text-align: center; } #sear_tourf li{ height: 40px; line-height: 40px; padding: 0 5px; font-size: 14px; display: inline-block; position: relative; z-index: 2; }/*overflow: hidden;*/ #sear_tourf li:nth-child(1){ overflow: visible !important; } #sear_tourf input[type="text"]{ max-width: 220px; width:100%; height: 40px; padding: 2px 5px; border: 1px solid #cacaca;border-radius: 5px; font-family:IRANSansR; font-size: 14px; background: transparent; display: block; position: relative; z-index: 1; } #sear_tourf select{ width: 60px; height: 40px; text-align: center; border: 1px solid #cacaca; font-family: IRANSansR; border-radius: 5px; font-size: 14px; background: transparent; display: inline-block; } #sear_tourf input[type="submit"], #sear_blogf input[type="submit"]{ width: 110px; height: 40px; text-align: center; border-radius: 5px; border:1px solid #4aa180; color: #4aa180; font-family: IRANSansR; font-size: 14px; background: transparent; display: inline-block; cursor: pointer; transition: all .3s linear; } #sear_tourf button, #sear_blogf button{ width: 50px; height: 40px; text-align: center; font-size: 14px; border-radius: 5px; background: transparent; border:1px solid #4aa180; color: #4aa180; display: inline-block; cursor: pointer; transition: all .3s linear; vertical-align:top;} #sear_tourf input[type="submit"]:hover, #sear_blogf input[type="submit"]:hover, #sear_tourf button:hover, #sear_blogf button:hover{ background:#4aa180; color:#fff; text-shadow: 1px 1px 2px #000;} @media only screen and (max-width: 740px) { /* responsiv */ #sear_tourf ul{ max-width: 450px; margin: auto; } #sear_tourf li:nth-last-child(1),#sear_tourf li:nth-last-child(2){ margin-top: 30px; } } @media only screen and (max-width: 510px) { /* responsiv */ #sear_tourf ul{ max-width: 250px; } #sear_tourf li:nth-last-child(3){ margin-top: 15px; } #sear_tourf select{ width: 85px; } #sear_tourf li:nth-last-child(1),#sear_tourf li:nth-last-child(2){ margin-top: 15px; } #sear_tourf input[type="submit"]{ width: 165px; } } .Searchpg{ font-size: 13px; text-align:right; float:left; margin: 10px 0;} .Searchpg a{ color: #069; } .Searchpg a:hover{ color: #f93; } .Searchpg i{ margin: 0 3px; position: relative; top: 1px; } /* box for search res */ #TabTour .filtercontent{ width:100%; float:none;} #TabTour .filtercontent:before{ content:""; clear:both; display:block;} #TabTour .filtercontent .contentbox span.found{ color: #1a9253; background-color: #CF0;} #TabTour .filtercontent .contentbox h2 a{ color:#316087; font-size:16px;} #TabTour .filtercontent .contentbox h2 a:hover{ color:#143075;} #TabTour .filtercontent .each{ margin-bottom: 20px;} .tsearch_tit{color:#ff5c01; font-size: 16px; margin: 10px 0 10px; font-family:IRANSansR;} .tsearch_tit i{font-size: 20px;} .tsear_nores{clear:both; line-height:26px; font-size:15px; display:block;} /* search blog form */ #sear_blogf ul{ font-size: 0; text-align: center; } #sear_blogf li{ height: 40px; line-height: 40px; padding: 0 5px; font-size: 14px; display: inline-block; position: relative; overflow: hidden; z-index: 2; } #sear_blogf ul:nth-child(1) li:nth-child(1),#sear_blogf ul:nth-child(1) li:nth-child(2){ overflow: visible !important; } #sear_blogf ul:nth-child(1) li span{ line-height: 38px; background: #f4f4f4; position: absolute; top: 1px; left: 10px; display: block; transition: all .3s linear; z-index: -1; } #sear_blogf ul:nth-child(1) li span.no_place{ padding: 0 5px; line-height: 20px; font-size: 12px; color: #b7b7b7; top: -10px; z-index: 2; } #sear_blogf input[type="text"]{ width: 230px; height: 37px; padding: 2px 5px; border: 1px solid #cacaca; border-radius: 5px; font-family: IRANSansR; font-size: 14px; background: transparent; border-radius: 5px; display: block; position: relative; z-index: 1; } #sear_blogf select{ width: 70px; height: 37px; text-align: center; border: 1px solid #cacaca; font-family: IRANSansR; font-size: 14px; background: transparent; border-radius: 5px; display: inline-block; } #sear_blogf ul:nth-child(1) select{ width: 120px; } #sear_blogsub{ text-align: center; margin-top:10px;} #sear_blogsub i{ vertical-align:middle;} .tres_code{color:rgba(127,127,127,1.00); font-size:12px !important;} @media only screen and (max-width: 670px) { #search_tab li{ width: 50%; margin-left:0; border-radius:0;} #search_res{border-top:none;} .tsearch_tit, .Searchpg{float:none;} } @media only screen and (max-width: 810px) { #sear_blogf ul{ max-width: 520px; margin: auto; } #sear_blogf li{ margin-bottom: 15px; } #sear_blogf ul:nth-child(1) input{ width: 245px; } #sear_blogf ul:nth-child(1) select{ width: 245px; } } @media only screen and (max-width: 580px) { #sear_blogf ul{ max-width: 275px; text-align: right; } #sear_blogf ul:nth-child(1) input{ max-width: 265px; width:100%;} #sear_blogf ul:nth-child(1) select{ width: 265px; } } @media only screen and (max-width: 320px) { /* responsiv */ #sear_blogf ul{ text-align: center; } #sear_blogf li{ display: block; } #sear_blogf ul:nth-child(1) input{ width: 100%; } #sear_blogf ul:nth-child(1) select{ width: 100%; } #sear_blogf ul:nth-child(2) li{ height: auto; } #sear_blogf ul:nth-child(2) span{ display: block; } } /* table result for news search */ #TabNews table{ width: 100%; font-size: 14px; border-collapse: collapse; clear:both;} #TabNews tr:nth-child(1){ background: #f4f4f4 !important; } #TabNews tr:nth-child(1) td{ padding: 3px 5px !important; } #TabNews tr{ transition: all .3s linear; } #TabNews .ini_sbody td{ padding: 12px 5px !important; text-align: left !important; } #TabNews .ini_sbody span{ background-color:#CF0;} #TabNews tr:hover + .ini_sbody{ background: rgba(255, 153, 51, 0.22) !important; } #TabNews tr:hover{ background:#F4F4F4;} #TabNews td{ padding: 5px 5px; border: 1px solid #ddd; } #TabNews td:nth-child(1),#TabNews td:nth-child(3),#TabNews td:nth-child(4),#TabNews td:nth-child(5){ text-align: center; } #TabNews td:nth-child(3){ width: 40px;} #TabNews a{ color: #ff5c01; } #TabNews a:hover{ opacity: 0.7;} @media only screen and (max-width: 650px) { /* responsiv */ #TabNews table,#TabNews table tbody,#TabNews table tr,#TabNews table td{ display: block !important; } #TabNews table{ margin: 5px auto; } #TabNews tr:first-child{ display: none !important; } #TabNews tr{ height: auto; margin-bottom: 5px; } #TabNews td{ width: 100%; padding: 5px 10px; text-align: right !important; border-top: none !important; } #TabNews td:before{ font-size: 14px; color: #ff5c01; } #TabNews td:nth-child(1){ font-size: 17px; background: #f4f4f4; text-align: center !important; } #TabNews td:nth-child(1):before { content: "ردیف: "; color: #444; } #TabNews td:nth-child(2):before { content: "عنوان: "; } #TabNews td:nth-child(3):before { content: "کد: "; } #TabNews td:nth-child(4):before { content: "تاریخ انتشار: "; } #TabNews .ini_sbody td{ background: transparent; } #TabNews .ini_sbody td:before{ display: none !important; } #TabNews a{ display: inline-block; } } /************************************* news ****************************************/ #head_img{ padding: 15px 15px 0;} #head_img > .main{ max-width: 900px; padding: 0;} #head_img .top_layer{ width: 100%; position: relative;} #head_img .img_info{ width: 100%; line-height: 28px;} .glass_sub{ position: relative; display: inline-block;} .img_info span{ display: block; font-size: 14px;} .img_info img{ width: 100%; border-radius: var(--radius7); display: block;} .without .trip_title{ width: 100%; color: #000 !important; text-shadow: none; position: static;} @media only screen and (max-width: 768px) { .img_info .trip_name, .RightMain .trip_name{ font-size: 23px; line-height: 35px;} } @media only screen and (max-width: 500px) { .img_info img{ height: 250px; object-fit: cover !important; object-position: center !important;} } #news .bgslider{ min-height:400px;} .bgslider { height:Calc(100vh - 200.4px); overflow:hidden; position:relative; background-repeat:no-repeat;} .bgslider img{ width:100%;} .b_gray{ background: #fbfbfb;} .bg_gray { padding: 50px 15px 50px; background: #f4f4f4;} .bg_gray .main > div, .bg_gray .newsbody{ padding: 20px 0; } /*.coverinfo .infotr{position:absolute; top:20%; text-align:center; padding:20px; line-height:30px; left:0; right:0; width:100%; margin:auto;} .coverinfo .infotr h1{ display:block !important; line-height:45px; font-family:'VazirmatnB'; padding-top:15px; color:#FFFFFF; text-shadow: 1px 1px 1px #000;} .coverinfo .infotr span{color:#FFFFFF; display:block; font-size:18px; padding-top:15px; text-shadow: 1px 1px 1px #000;}*/ .coverinfo .infotr span.cap1, .coverinfo .infotr span.cap2{padding:7px 10px 7px; font-size:14px;} .newsbody{ max-width:900px; padding:40px 30px 40px 30px; margin:auto; display:block; font-size:15px; line-height:26px;} .text_body{ max-width:900px; margin: auto;} .newsbody .example1,.text_body .example1{ color: #888888; position: relative; bottom: 6px; font-size: 13px; font-style: italic; text-align: center; display: block; background: white;} .newsbody img,.text_body img,.altimg img{max-width:100%; height:auto; margin:15px auto 10px; border-radius: var(--radius7); display:block;} .newsbody h3,.text_body h3{ margin: 40px 0 10px; line-height:32px; font-family:'VazirmatnB'; font-size:18px; border-bottom:3px solid #ff5c01; display:inline-block;} .newsbody h2,.text_body h2{ max-width: max-content; padding: 5px 15px; margin: 40px 0 10px; line-height: 35px; font-family: 'VazirmatnB'; font-size:21px; background: #fff2ec; border-radius: var(--radius7); border-right: 3px solid #ff6925;} .toptxt{font-size:13px; color:#939393; padding-bottom:10px;} .toptxt i{font-size:13px; color:#ff5c01;} .newsbody ul, .newsbody ol,.text_body ul, .text_body ol{ padding-right:30px;} .newsbody a,.text_body a{ color:#1152B5; transition:all linear 0.2s;} .newsbody a:hover,.text_body a:hover{ color:#ff5c01;} .newsbody a.button{ color:#ff5c01;} .newsbody a.button:hover{ color:#fff;} .newsbody table,.text_body table{ width:100%; margin:10px 0; text-align:center;} .newsbody table tr td,.text_body table tr td{ padding:3px 5px; background:#F8F8F8; border:1px solid #fff; transition:all linear .2s;} .newsbody table tr:nth-child(2n-1) td,.text_body table tr:nth-child(2n-1) td{ background:#eee; border-color:#fff;} .newsbody table tr:first-child td,.text_body table tr:first-child td{ background:#2c3e50; color:#fff; font-size:16px;} .newsbody iframe{ margin: 20px auto 10px; display: block;} .newsbody video{ width: 100%; border-radius: var(--radius7); display: block;} .newsbody .related-tours{ margin-bottom: 15px; padding: 5px; font-size: 15px; line-height: 30px; font-family: "VazirmatnB"; border-bottom: 1px solid #ff5c01; position: relative; display: block; cursor: pointer;} .newsbody .related-tours strong{ font-size: 16px; line-height: 30px;} .newsbody .related-tours::after{ content: "\f053" !important; position: absolute; left: 0; top: 5px; color: #ff5c01; font-family:"Font Awesome\ 5 Free"; font-weight:900; display: block; transition: all linear 0.2s;} .newsbody .related-tours.show::after{ transform: rotate(-90deg);} .newsbody .hide{ padding: 0 15px 20px 0; color: #333; display: none;} .newsbody strong,.shorttxt strong{ font-size: 17px;} .pad10b{ padding-bottom: 10px;} .borderBot{ position:relative; border-bottom:2px solid #ff5c01; bottom:-42px;} #attrac_box{ font-family:'VazirmatnB'; font-size: 16px; line-height: 30px; background:#f4f4f4; color:#313131; border: 1px dashed #a2b5d4; border-left:none; border-right:none; padding:5px 30px 5px 15px; display:inline-block; position:relative; float:left; text-align:right;} #attrac_box i{ font-size:37px; position:absolute; top:-20px; right:-22px; background:white; border-radius:50%; padding:4px; line-height:30px; color:#ff5c01;} #attrac_box > div{ display: inline-block; padding:0 5px 0; border:none; background:none; text-shadow:none; margin:0;} #attrac_box > div a{ color: #ff5c01;} #attrac_box .attr_txt{ display: inline-block;} @media only screen and (max-width: 768px) { #attrac_box i{ right:-10px;} } #shortlink{ max-width: max-content; font-size: 12px; line-height: 24px; align-items: center;} #shortlink #copy{ padding: 5px 10px; margin: 3px; background: #ffeade; color: #333; font-size: 12px; line-height: 24px; text-align: center; border-radius: 5px; display: inline-block; transition: all linear .2s; cursor: pointer;} #shortlink #copy i{ padding-left: 3px; vertical-align: middle;} #shortlink #copy:hover{ background: #ffd9c4} #shortlink .en_font{ margin: 0 5px 0 10px; font-size: 12px; line-height: 24px; letter-spacing: 1px;} @media only screen and (max-width: 380px){ #shortlink{ max-width: 100%; text-align: center; display: block;} #shortlink #copy{ max-width: 100px; width: 100%; padding: 5px; margin-top: 10px;} } /*** fehreste blog ***/ .top_list{ margin: 20px 0;} .top_list ul{ padding-right: 20px;} .top_list ul li a{ color: #045c91;} .top_list ul li a:hover,.top_list ul li::marker{ color: #ff5c01 !important;} /*button effect*/ .example2{ max-width: max-content; margin: 20px auto auto; padding:10px 30px; font-size:19px;font-family:'VazirmatnB'; text-align: center; display: block; position: relative; text-decoration: none; color: #fff !important; text-transform: capitalize; background-color: #ff5c01; min-width: 265px; border-radius: 6px; overflow: hidden; transition: all 0.2s linear 0s;} .example2 a{ color: #fff !important;} .example2 i{ vertical-align:middle;} .example2::before { content: "\f053"; font-family:"Font Awesome\ 5 Free"; font-weight:900; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0px; height: 100%; width: 30px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50% 0 0 50%; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right center; transform-origin: right center; transition: all 0.2s linear 0s;} .example2::after{ content: "\f360"; text-indent: 0; padding-right:5px; font-family:"Font Awesome\ 5 Free"; font-weight:900; vertical-align:middle; display:inline-block;} .example2:hover{ text-indent:30px;} .example2:hover:before{ transform: scale(1,1); text-indent: 0;} .example2:hover:after{ text-indent: 0;} @media only screen and (max-width: 600px) { #head_img img,#head_img .img_info{ width: 100%; padding: 0;} #head_img img{ margin-bottom: 20px;} } @media only screen and (max-width: 300px) { .example2{ padding:10px 20px; font-size:19px; min-width: 200px;} } /*end button effect*/ /** iframe **/ .h_iframe-aparat_embed_frame{position:relative;} .h_iframe-aparat_embed_frame .ratio {display:block;width:100%;height:auto;} .h_iframe-aparat_embed_frame iframe {padding:15px 0; position:absolute;top:0;left:0;width:100%; height:100%; border:none;} .p_header{ position: fixed; top: 0; z-index: 300; width: 100%; } /* The progress container (grey background) */ .progress-container { width: 100%; height: 3px; background: none ; } /* The progress bar (scroll indicator) */ .progress-bar { height: 4px; background: #ff5c01; width: 0%; } /*___ tour mortabet ___*/ /* 1 tour bashe */ #mortabet_box{ padding: 40px 0 40px;} #mortabet_box .tourbox{ float:none; margin:auto;} .tourbox a{ position: relative; display: block;} .tourname{ font-family: "VazirmatnB"; font-size: 14px;} .tourname b{ margin-bottom: 5px; font-size: 21px; line-height: 35px;} .tourname .more{ margin: 10px 0 0;} .tourname.trip_title{ padding: 10px 15px; bottom: 20px;} .tourbox .trip_title{ width: 50%;} .tourbox img{ width: 100%; height: 300px; object-fit: cover !important;} /* 2 ya bishtar az 2 tour bashe */ #mortabet_box .title1{ margin-bottom: 15px; font-size: 16px; color: #15426A; font-family: 'VazirmatnB'; line-height: 30px; padding-bottom: 5px; } #mortabet_box .title1 i{ color: #fe5619;} #mortabet_slide{ position: relative; } #mortabet_slide h2{ padding: 0; margin: 0; } #mortabet_slide>div{ overflow: hidden; position: relative; } #mortabet_slide ul{ padding: 0; margin: 0; text-align: center; font-size: 0; transition: all .8s linear; } #mortabet_slide li{ width: 50%; padding: 0 5px; font-size: 14px; text-align: right; display: inline-block; overflow: hidden; vertical-align: middle;} #mortabet_slide li a{ display: block; position: relative;} #mortabet_slide li a img{ max-width: 100%; width: 100%; height: 250px; margin: auto; object-fit: cover; display: block; } #mortabet_slide .mortabet_arrow{ width: 40px; line-height: 40px !important; font-size: 30px !important; text-align: center !important; background: rgba(187, 187, 187, 0.3); color: #FFF; position: absolute; top: 0; bottom: 0; z-index: 9; cursor: pointer; transition: all .3s linear; display: none;} #mortabet_slide .mortabet_arrow i{ width: 40px; height:40px; line-height: 40px !important; margin: auto !important; text-align:center; color:#fe5619; position: absolute; top: 0; bottom: 0; display:block;} #next_tour{ padding-left: 3px; right: 5px; } #pre_tour{ padding-right: 3px; left: 5px; } #mortabet_slide .mortabet_arrow:hover{ background: rgba(0,0,0,.7); } @media only screen and (max-width: 750px) { #mortabet_slide li{ width: 100%;} .tourname.trip_title{ width: 95%;} } /***** comment ********/ #matlab_comm .container{ padding-top:60px; } .comment{ width: 95%; margin-bottom: 50px; line-height: 15px; position: relative; } #comment_header{ font-family:'VazirmatnB'; font-size: 21px; line-height: 36px; } .comm_img{ margin-left: 10px; font-size: 32px; color: #fb8686; text-align: center; position: absolute; } .comm_img i{ width: 28px; background:#ff5c01; line-height:28px; font-size:11px; color:#fff; position:relative; right: 10px; bottom: 5px; border-radius:50%; } .comment_info{ padding: 5px 0px; color: #aaaaaa; font-family: 'IRANSansR'; font-size: 13px; } .comment_info i{ margin-right: 10px; color: #a6a6a6; display: inline-block; } .comment_info div{ display: inline-block; } .comment_info div:first-child{ padding-left: 3px; } .comment .comm_box{ padding-right: 50px; } .comment_txt{ padding: 5px 0px; font-family: 'IRANSansR'; font-size: 15px; line-height: 28px; text-align: justify; text-justify: auto; } .comment_ans{ margin: 15px 60px 0px 0px; } .comment_ans .comm_img{ margin:0; background:none; font-size: 25px; text-align:left; } .comment_ans .comm_img i{ color:#ff5c01; background:none; font-size:12px; position:relative; right: 12px; bottom: 3px;} .comm_reply{ color: #aaaaaa; line-height: 30px; font-size: 15px; display: inline-block; cursor: pointer; transition: all .2s linear; } .comm_reply i{ margin-left: 2px; } .comm_reply:hover{ color: #ff5c01; } /******* form ersale nazar **********/ #comform_header{ margin: 15px 0px 10px 0px; color: #444444; font-size: 18px; line-height: 30px; } #comform_header span{ font-size: 12px; color: #9D9B9B; font-family: 'IRANSansR';} #cancel_reply{ padding: 0px 10px 0px 0px; color: #ff5c01; cursor: pointer; font-size: 18px; display: none; transition: all .3s linear; } #cancel_reply:hover{ color: #b91217; } #comment_form label{ line-height: 25px; padding: 0 3px 5px; font-size: 14px; color: #696969; display: block; font-family: 'IRANSansR'; } #comment_form label i{ margin-right: 3px; font-size: 9px; color: #ff5c01; position: relative; top: -3px; } #comment_form textarea{ min-width: 100%; max-width: 100%; min-height: 130px; max-height: 130px; line-height:28px; margin-bottom: 15px; padding: 5px 10px; background: #f4f4f4; border: 1px solid #e1e3e4; font-family: 'IRANSansR'; font-size: 15px; border-radius:var(--radius7); transition: all .3s linear; } #comment_form .comf_float{ width: 50%; float: right; } #comment_form .comf_float:first-child{ padding: 0px 0px 0px 10px; } #comment_form .comf_float:nth-child(2){ padding: 0px 10px 0px 0px; } #comment_form input[type="text"]{ width: 100%; height: 40px; padding: 5px 10px; background: #f4f4f4; border: 1px solid #e1e3e4; font-family: 'IRANSansR'; font-size:15px; border-radius:var(--radius7); transition: all .3s linear; } #comment_form input[type="text"]:hover,#comment_form textarea:hover, #comment_form input[type="text"]:focus,#comment_form textarea:focus{ box-shadow: 0 6px 8px -6px rgba(0,0,0,.4); border-color:#ccc; } #comment_form .ltext{ font-family: IRANSansR !important; } #matcom_sub{ text-align: right; padding-bottom: 25px; } #matcom_sub .more{ margin-top: 20px;} #matcom_sub #pasokh_sub{ display: none; } @media only screen and (max-width:700px){ /************ responsive matlab 700 px *****************/ #comment_form .comf_float{ width: 100%; float: none; } #comment_form .comf_float:first-child{ padding: 0px; margin-bottom: 10px; } #comment_form .comf_float:nth-child(2){ padding: 0px; } .comm_img{ margin-top: -10px; font-size: 30px; } .comm_img i{ width:30px; line-height:30px; right:0; bottom:-3px;} .comment .comm_box{ padding-right: 35px; } .comment_ans{ margin: 15px 5px 0px 0px; } .comment_ans .comm_img{ font-size: 30px; } .comment_ans .comm_img i{ right:0;} } @media only screen and (max-width:500px){ /************ responsive matlab 500 px *****************/ .comment_info{ line-height: 25px; } .comment_ans .comm_img i{ bottom:0;} } .vtours{ display:inline-block; width:49%; position:relative; transition:linear .4s; vertical-align: top;} .vtours:nth-of-type(1){ margin-left: 2%;} .vtours img{ margin: 0; display:block; width:100%; height: 240px; object-fit: cover; border:5px solid white;} .vtours b{position:absolute; bottom:5px; right:5px; padding:8px 10px 5px; background:rgba(0,0,0,.5); left:5px;} .vtours b span{font-size:15px; font-family:'VazirmatnB'; color:white; display:inline-block; padding-left:3px;} .vtours:hover{opacity:.8;} #news .vtours:hover{ opacity:1;} #news .vtours a:hover{ opacity:0.7;} .shorttxt{ padding: 15px 0 0;} .vije{ margin: 40px 0 0; font-size:0; background:#f2f2f2; padding: 20px !important; border-radius: var(--radius7);} .v_news .title,#mortabet_box .title{ margin-bottom: 10px; font-size: 26px; line-height: 36px; visibility: visible;} .v_news .title i,#mortabet_box .title i{ margin-left: 5px; color: #ff5c01;} .v_news .vtours b{ text-align:center;} .tagsin{font-size:0; text-align:right;} .tagsin a{display:inline-block; font-size:13px; padding:5px 10px; margin:0 5px 5px 0; background:#2e3434; color:#FFFFFF; border-radius: var(--radius7);} .tagsin a:hover{opacity:.8; color:white;} @media only screen and (max-width:1210px){ .coverinfo .infotl{ margin:auto 20px;} } @media only screen and (max-width:900px){ .vtours{ width:100%; margin:10px 0; display:block;} .vtours img{ border-bottom:none;} .vtours b{ padding:10px; background:rgba(0,0,0,.8); position:static; border:5px solid white; border-top:none; display:block;} .vtours b a.button{ bottom:15px; left:15px; margin-top:5px;} .tl_vije .vtours b{ position:absolute; bottom: 0; left: 0; right: 0; border:none;} .tl_vije .vtours b a.button{ height:34px; margin:auto; top:0px; left:9px; bottom:0;} } @media only screen and (max-width:450px){ #t_cover{ max-height:400px; height:400px !important;} .isdore{ max-height:230px !important;} .vtours b{ text-align:center;} .vtours b a.button{ max-width:200px; margin:5px auto auto auto !important; position:static; display:block !important;} } @media only screen and (max-width:370px){ .contenttl .tab{ width:380px; max-width:100%;} .contenttl .tab:after{ content:""; clear:both; display:block;} .contenttl .tab span{ width:Calc( 50% - 3px); padding:0 3px; line-height:35px; float:right; margin:0;} .contenttl .tab span:first-child{ margin-left:6px;} .contenttl .tab span i{ display:none;} } /** rating **/ .stars img{ width:auto !important; height: 11px !important; display: block !important; float: none !important;} .stars i{color:#F7BB06 !important; font-size:25px; vertical-align:middle;} .stars span{font-size:14px; display:inline-block; margin-top:10px; } #star1,#star2,#star3,#star4,#star5{width:85px; background:url(images/symbol/stars.png) no-repeat; height:15px;} #star1{background-position:0px 0} #star2{background-position:0px -15px} #star3{background-position:0px -30px} #star4{background-position:0px -45px} #star5{background-position:0px -60px;} .results{ padding:8px 20px; margin-top:0 !important; font-size:15px; background: #f4f4f4; color: #333 !important; border-radius: 7px;} .results i{ margin-left:2px; color:#333 !important} .results a{ text-shadow: none;} .rate_box{ margin-top: 0 !important; padding:8px 15px; background: #fff;} .b_dark{ background: #F4F4F4; direction: ltr; text-align: right;} .rate_text{ margin:0 0 0 15px !important; display:inline-block; direction:rtl; font-size:12px !important;} .rate_text b{ font-size:15px} .stars .gray{ color:gray !important;} #head_img .stars{ min-height: 50px; margin-bottom: 10px;} #head_img #wantstar{ margin: 0 10px 0 0 !important; color: #333; text-shadow: none; border: none; border-bottom: 3px solid #fc3; border-radius: 0;} #head_img #wantstar:hover{ background: transparent; color: #fe5619; border-color: #fe5619;} #head_img #showstar{ align-items: flex-end; } #head_img .rating{ text-align: right;} #head_img .rating > label{ color: #ccc;} @media only screen and (max-width: 580px){ #head_img .stars{ min-height: 86px;} } /** end rating **/ /* writer */ #news_att i{ font-size: 17px; } #news_nev img{vertical-align:middle; } #news_nev{ min-height: 85px; padding: 12px 105px 12px 10px; margin-top: 15px; font-size: 14px; background: #fff6f2; position: relative; border-radius: var(--radius7);} #news_nev p{display:inline-block;} #n_nimg{ width: 95px; margin: auto; background: #FFF; border-left: 1px solid #ffd9cb; position: absolute; top: 0; bottom: 0; right: 0; overflow: hidden; } #n_nimg img{ max-width: 75px;max-height: 75px; margin: auto; border-radius: 50%; position: absolute; top: 0; bottom: 0; right: 10px; overflow: hidden; } #n_nname{ padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ffd9cb;} #news_nev b{ margin: 0 5px; } #news_nev i, #enddate i{ color: #ff5c01; margin-left: 3px; } #enddate{font-size: 14px;} /* share link */ #newsshare{ padding: 0; } #newsshare li{ height: 40px; line-height: 40px; font-size: 14px; color: #5b5b5b; display: inline-block; vertical-align: middle;} #newsshare a{ width: 40px; font-size: 19px; text-align: center; border-radius: 10px; color: #FFF; display: block; opacity: .8; } #newsshare i{ line-height: 40px; display: block; } #newsshare .sharerf{ background-color: #45619D; } #newsshare .sharerg{ background-color: #D73D32; } #newsshare .sharert{ background-color: #34abe0; } #newsshare a:hover{ opacity: 1; } /* share link */ /************************************* services ****************************************/ /*.navigator{font-size:13px; color:#ff5c01; padding-bottom:20px; line-height:20px;} .navigator a{color:#fff; display:inline-block; padding-left:5px;} .navigator a:hover{opacity:.5;} .navigator i{color:#ff5c01; vertical-align:middle;} .newstitle #navigator{ padding-top:20px; text-shadow:1px 1px 2px #000;}*/ .h_title{ font-size: 26px; line-height: 40px; font-family: 'VazirmatnB';} .pad15top{ padding-top: 15px !important;} .under_serv{ padding-top:8px;} .under_serv div{ display:inline-block;} .under_serv div:after{ content:"/"; margin: 0 5px; color:#333;} .under_serv div:last-child:after{display:none;} .under_serv a{ padding:5px 0; font-size:16px; color:#333; display:inline-block; transition:all linear 0.3s;} .under_serv a:hover{ color:#ff5c01;} .under_serv a.active{ color:#ff5c01; cursor:default;} .under_serv a.active:hover{ color:#ff5c01 !important;} .bgslider{ min-height:400px; height:auto !important;} .bgslider .infotr{ background: rgba(0,0,0,0.4);} #servisePic{ height:350px;border-bottom: 5px solid #171717; background-size:cover !important; background-position:50% 50% !important; position:relative; text-align:center; text-shadow: 1px 1px 1px black;} #servisePic h1{ padding:15px 10px 15px; line-height:40px; color:#F3F1E9; font-size:30px;} /***#servisePic #in_pic .explain{ padding-bottom:20px; line-height:25px; color:#fff; font-size:16px;}***/ #servisePic #in_pic{ background:rgba(64,56,54,0.7); position:absolute; left:0; right:0; bottom:0; } #servisePic #in_pic h1{ padding:15px 10px 15px; line-height:40px; color:#F3F1E9; font-size:30px;} .infotr .under{ padding-top:8px; text-shadow:1px 1px 1px black;} .infotr .under div{ display:inline-block;} .infotr .under div:after{ content:"/"; margin: 0 5px; color:#F3F1E9;} .infotr .under div:last-child:after{display:none;} .infotr .under a{ padding:5px 10px; font-size:16px; color:#fff; display:inline-block; transition:all linear 0.3s;} .infotr .under a:hover{ color:#CBCBCB;} .infotr .under a.active{opacity:.5; cursor:default;} .infotr .under a.active:hover{ color:#fff !important;} .tournav, .tournav a{ color:#fff !important; text-shadow:1px 1px 1px #000 !important;} /* #weblog{ padding: 20px; box-shadow: none; border: none;} */ #weblog > h2{ padding:15px 0 10px; font-size:30px; line-height:40px; border-bottom: 5px solid rgba(224, 224, 222, 0.5);} .main #RightBox{ width:Calc(100% - 270px); margin-left:20px; float:right;} .main #RightBox .RightMain a{ display:block; transition:all linear 0.2s;} .main #LeftBox{ width:250px; margin-top:20px; float:right;} .columnbox{ display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;} #RightBox .RightMain{ padding: 15px 15px 65px; background:#fff; text-align:center; position:relative; box-shadow: 0 6px 8px -6px rgba(0,0,0,.4); border: 1px solid#e1e3e4; border-radius: var(--radius7); overflow:hidden; transition:linear .3s;} #RightBox .RightMain:hover{ background:#f4f4f4;} #RightBox .RightMain:hover .button{ background:#ff5c01; border-color:#ff5c01; color:#fff; text-shadow:1px 1px 1px #333;} #RightBox .RightMain > div:first-child{ margin-bottom: 10px;} #RightBox .RightMain > div:first-child a{ position:relative;} #RightBox .RightMain > div:first-child img{ width:100%; height: 280px; object-fit: cover; object-position: center; border-radius: var(--radius7); display:block;} #RightBox .width100s{ padding-bottom: 55px; display: flex; align-items: flex-end;} #RightBox .width100s > div:last-child{ width:100% !important; padding-left:0; float:none !important;} #RightBox .RightMain > div:last-child h2{ margin:0 !important; line-height:31px; font-size:17px; font-family:'VazirmatnB'; position:relative;} #RightBox .RightMain > div:last-child h2:before{ right:-10px;} .suptitr{font-size:13px; color:gray; line-height:10px; display:inline-block;} #RightBox .RightMain > div:last-child h2 a{ color:#333;} #RightBox .RightMain > div:last-child h2 a:hover{ color:#ff5c01;} #RightBox .RightMain > div:last-child .matn{ padding-right:0; line-height:25px; font-size:14px;} #RightBox .RightMain > div:last-child .more{ position: absolute; bottom: 15px; right: 0; left: 0;} .RightMain .without .trip_name{ text-align: center !important;} #MaxChr{ width:20px; display:inline-block;} #RightBox #paging ul{ margin: 20px 0 50px 0; padding:0; font-size: 0; text-align: left !important;} #RightBox #paging ul li{ width: 45px; height: 45px; line-height: 45px; margin:0 0 3px 3px; background: #f4f4f4; font-size: 16px; text-align: center; transition: all 0.3s linear; display: inline-block; font-family:'IRANSansR'; border-radius: var(--radius7);} #RightBox #paging ul li:hover{ background:#D3D3D3;} #RightBox #paging ul li a{ color:#2c3e50; display:block;} #RightBox #paging ul li.active{ background:#ff5c01; text-shadow:1px 1px 2px #000;} #RightBox #paging ul li.active a{ color:#fff;} #RightBox #paging ul li i{ font-size:13px; line-height:45px;} #RightBox .paging{ font-size:13px; text-align:left; margin-bottom:10px;} #RightBox .paging i{ vertical-align:middle;} #RightBox .paging span{ color:#ababab;} #RightBox .paging a{ color:#ff5c01; transition:all linear 0.2s;} #RightBox .paging a:hover{ opacity:0.6;} #label{ padding:10px; font-size:0;} #LeftBox .tags h3{ font-size: 24px; line-height: 40px; padding: 10px 5px 10px 10px; margin-top:0; font-family:'VazirmatnB';} #LeftBox .tags > div{ font-size:0;} #LeftBox .tags a, #label a{ display:inline-block; padding:5px 10px; margin:5px 0 0 5px; background:#f4f4f4; color: #2c3e50; font-size: 13px; text-align:center; border-radius: var(--radius7); transition: all linear 0.2s;} #LeftBox .tags a:hover, #label a:hover{ background:#D3D3D3;} #LeftBox .tags a.active{ background:#ff5c01; color:#fff; text-shadow:1px 1px 1px #000;} #LeftBox .tags a.active:hover{ color:#fff;} #LeftBox .tags a.active span{ color:#fff;} #LeftBox .tags a span{ color:#ff5c01; font-size:12px;} #LeftBox .tags h3 i{ color:#ff5c01; font-size:17px;} .RightMain::after{ content:""; clear:both; display:block;} .coverinfo .infotr{ position:absolute; padding:20px 32px; line-height:30px; bottom:0; left:0; right:0; width:100%; margin:auto;} .coverinfo .infotr h1{ display:block !important; font-size:26px; line-height:40px; font-family:'VazirmatnB'; color:#FFFFFF; text-shadow: 1px 1px 1px #000; position:relative;} .coverinfo .infotr span{color:#FFFFFF; display:block; font-size:14px; text-shadow: 1px 1px 1px #000;} .coverinfo .infotr span.cap1, .coverinfo .infotr span.cap2{padding:7px 10px 7px; font-size:14px;} @media only screen and (max-width: 1400px){ .columnbox{ grid-template-columns: repeat(2,1fr);} } @media only screen and (max-width: 1000px){ .main #RightBox, .main #LeftBox{ width:100%; margin-bottom:30px; border-left:none; float:none;} #LeftBox .tags{ max-width:450px; margin:auto; text-align:center;} #LeftBox .tags h3{ padding:10px !important; border-bottom:2px solid #ff5c01;} #LeftBox .tags a{ margin-left:0; display:block;} #LeftBox .tags a:last-child{ border-bottom:none;} #RightBox #paging ul{ text-align:center !important;} #RightBox .RightMain:hover{ background:none;} } @media only screen and (max-width: 780px){ #weblog > h2{ text-align:center;} #navigator{ text-align:center; padding:20px 0 !important;} .tournav{text-align:right !important; padding-right:10px !important} #RightBox{ margin-left:0 !important;} #RightBox #paging ul{ margin-bottom:40px; text-align:center !important;} #RightBox .paging{text-align:center; background:#E5E4E4; padding:5px; margin-bottom:10px;} } @media only screen and (max-width: 700px){ .coverinfo .infotr h1{ font-size:20px; line-height:33px;} .columnbox{ grid-template-columns: repeat(1,1fr);} } @media only screen and (max-width: 450px){ #RightBox #paging ul li{ width:40px; height:40px; line-height:40px;} } /*abut us **/ #co_team{ background:#242d39; border-radius: var(--radius7); overflow: hidden;} #hamm_imgbox{ position: relative; margin:auto; display:flex; display: -webkit-flex; display:-ms-flex; flex-wrap:wrap;} .hamm_teamimg{ width:25%; cursor: pointer; position: relative; overflow: hidden; border-top:4px solid transparent; display:flex; display: -webkit-flex; display:-ms-flex; justify-content: center; align-items: center; color:#fff; font-size:20px; line-height:30px; text-align:center; } .hamm_teamimg span{ padding:0 8px; color:#fff; font-size:20px; line-height:30px; text-align:center; display:block;} .hamm_teamimg span i{ font-size:30px; display:block;} .hamm_teamimg{ background:#242d39; border-color:#242d39;} .hamm_teamimg img{ max-width: 100%; display: block; } .hamm_teamimg:before{ content: ""; width: 0; height: 0; margin: auto; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 60px solid #222222; position: absolute; left: 0px; right: 0px; bottom: -65px; z-index: 1; transition: all .2s linear; } .hamm_team_active:before{ bottom: -15px !important; } #hamm_infobox{ width: 100%; background: #222222; position:relative; z-index: 2; overflow: hidden; transition: all .2s linear; } .hamm_infoimg{ width: 33%; padding: 0px 30px 0px 0px; margin-left: 30px; direction: ltr; text-align: left; float: right; } #hamm_infobox img{ width: 100%; max-width: 400px; height: auto; display: block; border-radius: var(--radius7); } .hamm_info{ width: 100%; height: 100%; display: none; } .hamm_infotxt{ padding: 20px; line-height: 30px; } .hamm_infotxt div{ padding-left: 30px; margin-bottom: 10px; } .hamm_infotxt div:nth-child(1){ color: #FFFFFF; font-size: 18px; font-family: "VazirmatnB"; } .hamm_infotxt div:nth-child(2){ color: #88867e; font-size: 13px; } .hamm_infotxt div:nth-child(3), .part div:nth-child(2){ margin-top: 25px; font-size: 15px; font-family: IRANSansR; text-align: justify; text-justify: auto; color: #eaeaea; } .hamm_infotxt div:nth-child(4){ margin-top: 15px; color: #FFFFFF; font-size: 15px; font-family: IRANSansR; text-align: justify; text-justify: auto; } .hamm_infotxt div:nth-child(4) i{ margin-left: 10px; color: #ff4f4f; font-size: 20px; display: inline-block; position: relative; top: 3px; } #hamm_infoclose{ position: absolute; z-index: 2; left: 30px; top: 30px; cursor: pointer; color: #FFFFFF; font-size: 30px; } #co_team.main{padding: 0px;} .about_title{position: relative; margin-bottom: 14px; color: #000;font-family: "VazirmatnB";font-size: 26px;line-height: 40px;margin-top: 36px;} .t_socials a { display:inline-block; padding:3px; color: #fff; font-size:24px; transition:linear .2s;} .t_socials a:hover, .loglink a:hover {opacity:.5;} .t_socials a.twt{color:#00c4f8;} .t_socials a.insta{color:#d83060;} .t_socials a.linkd{color:#0077b5;} .t_socials a.file_txt{color:#f0a20c; font-size:20px !important;} .t_socials a.file_txt2{color:#fcd06f; font-size:20px !important;} .social_in{ display:inline-block; position:relative; top:5px;} .dis_inline{ display: inline-block;} .loglink a{ margin-bottom:4px; display:inline-block; padding:3px; font-size:22px; transition:linear .2s;} .loglink a{color:#FFFFFF; font-size:15px; display:inline-block; border:1px solid #ff4f4f; border-radius:5px; padding:6px;} .loglink i{color:#ff4f4f; padding-left:8px; font-size:20px;} @media only screen and (max-width:1200px){ .hamm_teamimg span{ font-size:15px; line-height:26px;} } @media only screen and (max-width:900px){ /************ responsive info box 900 px *****************/ .hamm_teamimg span{ font-size:20px; line-height:30px;} .hamm_teamimg span i{ margin-bottom:5px;} #hamm_infobox img{ display: none; } .hamm_infotxt div{ padding: 0px 30px; } .hamm_teamimg{ width:33.33%; } .hamm_teamimg{ border-top:4px solid #242d39;} .socials a{ font-size:34px; margin-left:10px;} } @media only screen and (max-width:768px){ #about_txt{ font-size:18px; line-height:32px;} } @media only screen and (max-width:600px){ /************ responsive info box 600 px *****************/ .hamm_teamimg:before{ border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #222222; } } @media only screen and (max-width:450px){ /************ responsive info box 450 px *****************/ .hamm_teamimg:before{ border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #222222; } .hamm_teamimg span{ font-size:15px; line-height:26px;} .hamm_teamimg span i{ font-size:20px; margin-bottom:0;} } /*********************************************************** destination *********************************************************/ /*Related Articles*/ .related{margin-top:25px; position:relative;} .related ul{font-size:0; padding:0; line-height:0; overflow:hidden;} .related div{font-size:21px; color: #444444; line-height:35px; padding:5px 10px 10px;} .related ul li{display:inline-block; width:24%; text-align:center; height:240px; background-size:cover !important; background-position: center !important; transition:linear .2s; font-size:15px; margin:.5%; border-radius:5px 5px 0 0; position:relative; line-height:25px;} .related ul li:hover span,.related ul li:hover h4{max-height:100%; background:rgba(0,0,0,.8);} .related ul li span,.related ul li h4{ margin: 0; display:block; position:absolute; bottom:0px; right:0px; left:0px; background:rgba(0,0,0,.6); padding:5px; max-height:35px; color:#FFF; text-shadow:1px 1px 1px black; overflow:hidden; -webkit-transition: max-height .2s; -moz-transition: max-height .2s; -ms-transition: max-height .2s; -o-transition: max-height .2s; transition: max-height .2s; transition:linear .2s; } .related ul li h4 a{ color: #fff; font-family: "IRANSansR"; font-weight: normal; position: static !important;} #relateheigth{ transition: all .5s linear; text-align:center;} .related ul li i{color:#F60; padding-left:5px;} .related ul li a{position:absolute; top:0; bottom:0; left:0; right:0;} #curtain,#curtain2,#cm_curtain{ padding:3px 0; margin: -43px auto 0 auto; color:#FFF; text-align:center; font-size:14px; border-bottom: 3px solid #ff5c01; cursor:pointer; text-shadow:1px 1px 1px black; background: white; background: -webkit-linear-gradient(transparent, white); background: -o-linear-gradient(transparent, white); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(transparent, white); background: linear-gradient(transparent, white); position: relative; z-index: 3; transition: all .5s linear; } #curtain i,#curtain2 i, #cm_curtain i{ padding-right: 4px; color:#FFF; position: relative; top: 2px; transition: all .5s linear; } #curtain b,#curtain2 b, #cm_curtain b{ padding:10px; border-radius:3px 3px 0 0; line-height:26px; font-family:"IRANSansR"; font-weight: normal; background:#ff5c01; transition: all .5s linear;} #curtain b:hover,#curtain2 b:hover{opacity:.9;} #curtain.open,#curtain2.open{ margin: 20px auto 0 auto; color:#FFF; text-shadow:none; border-bottom: 3px solid #ACACAC;} #curtain.open b,#curtain2.open b{background:#ACACAC;} #curtain.open i,#curtain2.open i{transform: rotateX(180deg);} @media only screen and (min-width: 40px) and (max-width: 730px) { .related ul li span,.related ul li h4{max-height:100%; background:rgba(0,0,0,.8);} .related ul li{width:49%; height:250px;} } @media only screen and (min-width: 40px) and (max-width: 500px) { .related ul{margin:0; width:100%; padding:0;} .related ul li{width:98%; height:300px; display:block; margin:auto; margin-bottom:15px;} } /*Related Articles*/ /*_______________ comment ________________________*/ #comment{ margin:10px auto;} #comment #matlab_com{ margin-bottom:0;} #comment_box{ overflow:hidden; transition:all linear .6s;} #cm_curtain{ margin:10px auto auto; border-bottom:none; background:rgba(249,249,249,0.6);} #cm_curtain b{ border-radius:3px; display:inline-block;} #cm_curtain b:hover{ opacity:0.7;} #matlab_com{ padding: 30px 0px; margin-bottom: 30px; background: #f9f9f9; border: 1px solid #e5e5e5; border-radius: 7px} #matlab_com .contain{ padding: 0 20px; } .commt{ margin-bottom: 20px; line-height: 15px; position: relative; } #comment_head{ margin-bottom: 20px; color: #444444; font-size: 21px; font-family: VazirmatnB; line-height: 35px; padding-right:20px;} .com_box{ margin-top: 20px; padding: 10px 5px; background: #FFF; font-family: IRANSansR; border: 1px solid #ededed; border-radius: 5px; } .commt_info{ padding: 5px 25px 5px 5px; color: #aaaaaa; border-bottom: 1px dotted #ededed; font-size: 13px; position: relative; } .commt_info i{ margin-right: 10px; color: #a6a6a6; display: inline-block; } .com_img{ margin: auto !important; font-size: 17px !important; color: #ff5c01 !important; text-align: center; position: absolute; right: 5px; top: 0px; } .commt_info div{ display: inline-block; padding-bottom:5px;} .commt_info div:first-child{ padding-left: 3px; } .commt_txt{ padding: 5px 10px; font-size: 15px; color: #444444; line-height: 35px; text-align: justify; text-justify: auto; } .commt_ans{position: relative; margin-right:20px;} .commt_ans .com_box{ margin-top: 2px; } .ans_img{ margin: auto !important; font-size: 21px !important; color: #CCCCCC !important; text-align: center; position: absolute; right: 5px; top: 0px; } .com_reply{ padding: 0 10px; color: #aaaaaa; line-height: 30px; font-size: 15px; display: inline-block; cursor: pointer; transition: all .2s linear; } .com_reply i{ margin-left: 2px; } .com_reply:hover{ color: #ff5c01; } #NatijeSubmit{ padding: 10px 0; color: #02a449;} #NatijeSubmit:empty{ display: none;} /******* form ersale nazar **********/ #comform_head{ margin: 15px 0 5px 0; color: #444444; font-family: VazirmatnB; font-size: 14px; line-height: 29px; } #comform_head span{font-size: 13px; color:#9D9B9B; font-family: IRANSansR;} #cancel_rep{ padding: 0px 10px 0px 0px; color: #ff4f4f; cursor: pointer; font-size: 14px; display: none; transition: all .3s linear; } #cancel_rep:hover{ color: #b91217; } #comment_fm ul{ font-size: 0; padding: 0; margin: 0; } #comment_fm li{ width: 50%; height: 45px; line-height: 45px; padding: 0 5px; margin-bottom: 10px; font-size: 14px ; color: #767676; display: inline-block; position: relative; z-index: 2; } #comment_fm li:nth-child(1){ width: 100%; height: 150px; } #comment_fm li:nth-child(2){ float:right;} #comment_fm>ul>li:nth-last-child(2){ width: 66.666%; height: 165px; } #comment_fm>ul>li:nth-last-child(1){ width: 33.333%; height: 165px; overflow: hidden; } #comment_fm li span{ line-height: 43px; background: #f9f9f9; position: absolute; top: 1px; right: 10px; display: block; transition: all .3s linear; z-index: -1; } #comment_fm li.ans_li span{ background: #fff; } #comment_fm li span i{ font-size: 10px; } #comment_fm li span.no_place{ padding: 0 5px; line-height: 20px; font-size: 12px; color: #b7b7b7; top: -10px; z-index: 2; } #comment_fm input,#comment_fm textarea{ width: 100%; height: 45px; padding: 2px 5px; border: 1px solid #e2e2e2; border-radius: 5px; font-family: IRANSansR; font-size: 14px; background: transparent; display: block; position: relative; z-index: 1; } #comment_fm textarea{ height: 150px; resize: none; } #comment_fm .ltr{ font-family: Tahoma !important; } #matcm_sub{ text-align: left; padding: 0 0 10px 5px; } #matcm_sub input[type="submit"]{ width: 150px; margin-top: 25px; padding: 0px 30px; font-size: 15px; border-radius: 3px; font-family: IRANSansR; text-shadow: 0px 1px 3px #000; background: #ff5c01; border: none; color: #FFFFFF; cursor: pointer; transition: all .3s linear; display: inline-block; } #matcm_sub input[type="submit"]:hover{ background: #102048;} #matcm_sub #pasokh_sub{ display: none; } @media only screen and (max-width: 500px) { #comment_fm li{ width: 100%;} } .des_listbg{ padding-top: 60px; background: #373737;} .des_side{ padding-bottom: 60px;} .des_side > h2{ margin-bottom: 15px; color: #fff; font-family: "VazirmatnB"; font-size: 35px; line-height: 50px;} .des_box{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;} .des_each{ padding-top: 150px; background-size: cover !important; background-position: center !important; position: relative; border-radius: var(--radius7);} .des_each.shadow_box:before{ background: rgba(0,0,0,0.3);} .des_each > div{ height: 370px; padding: 0 10px 10px; overflow-y: auto; position: relative; display: flex; flex-direction: column-reverse;} .des_info{ padding: 10px 20px; position: absolute; top: 20px; left: 0; right: 0; text-align: center; z-index: 10; } .des_info b{ margin-bottom: 10px; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,.6); font-size: 26px; line-height: 40px; display: block;} .des_info .txt{ margin-top: 7px; color: #fff; text-shadow: 0 0 3px rgb(0, 0, 0);} .for_line{ position: relative; display: inline-block;} .for_line i{ color: #ffa281; font-size: 20px;} .for_line::after,.for_line::before{ content: ""; height: 1px; width: 55px; border-top: 1px solid #ffa281; position: absolute; top: 50%; left: 30px; transform: translateY(-50%); display: block;} .for_line::after{ left: inherit; right: 30px;} .des_point{ padding: 10px; gap: 5px; backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(10px); text-shadow: 1px 1px 1px #333; position: relative; border-radius: var(--radius7); z-index: 5;} .des_point a{ min-width: 75px; padding: 2px 5px; background: transparent; color: #fff; font-size: 12px; border: 1px solid #ffffff4f; border-radius: var(--radius7); text-align: center;} .des_point a:hover{ background: #ffffff73;} .loc_title{ width: 100%; font-size: 14px; color: #fff;} .loc_title i{ margin-left: 5px;} @media only screen and (max-width: 1024px){ .des_box{ grid-template-columns: repeat(2,1fr);} } @media only screen and (max-width: 600px){ .des_box{ grid-template-columns: repeat(1,1fr);} } #des_banner{ min-height: 350px; padding: 70px 0 35px; background: #373737; position: relative; display: flex; flex-direction: column; justify-content: center;} #des_banner > .main{ width: 100%; margin: 0 auto auto; position: relative;} /* #des_banner::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 1; } */ #des_banner #navigator{ padding: 20px !important; margin: auto; position: absolute; top: 0; right: 0; left: 0; text-align: right !important; z-index: 4;} .des_ti{ max-width: max-content; padding: 10px 0ک font-size: 13px; background: url(images/background/map3.png); background-size: cover !important; background-position: center !important;} .des_inbox{ padding: 0; margin: auto; position: relative; z-index: 5;} .des_inbox h1{ margin-bottom: 10px; color: #fff; font-size: 35px; line-height: 45px; font-family: "VazirmatnB"; text-shadow: 0 0 10px rgba(0,0,0,.6);} .des_inbox .txt{ font-size: 16px; line-height: 28px; color: #fff; text-shadow: 1px 1px 2px #000; } #des_vid{ width: 200px; height: 130px; margin-right: auto; background: #000000a6; border-radius: 7px; display: flex; align-items: center; justify-content: center; transition: all linear 0.2s; cursor: pointer; position: relative;} #des_vid:hover{ background: #000;} #des_vid i{ color: #fff; font-size: 50px; transition: all linear 0.2s;} #des_vid:hover i{ color: #fe5619; font-size: 60px;} #des_vid > span{ margin: 5px auto auto; position: absolute; top: 100%; left: 0; right: 0; color: #fff; font-size: 12px; line-height: 22px; text-align: center; text-shadow: 0 0 10px rgba(0,0,0,.6); display: block;} #des_pop{ width: 100%; height: 100%; padding: 0 15px; background: rgba(0, 0, 0, .4); position: fixed; top: 0; left: 0; right: 0; bottom: 0; text-align: center; display: none; z-index: 10001;} #des_pop > div{ height: 100%; align-items: center; justify-content: center} #des_pop .popbox { max-width: 1000px; width: 100%; padding: 30px; background: gray; background-size: cover !important; background-position: 50% 50% !important; border-radius: 10px; position: relative; z-index: 10} #des_pop .popbox video{ max-height: 550px; margin: auto; display: block} .closeform { padding: 5px 10px; color: #fff; position: absolute;left: 0; top: 0; font-size: 25px; cursor: pointer; transition: all linear .2s} .closeform:hover{ color: #000} #back_cover { width: 100%; height: 100%; background: #0000008f; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; z-index: 9; cursor: pointer;} @media only screen and (max-width: 1024px){ .des_inbox h1{ font-size: 30px; line-height: 40px;} .des_inbox .txt{ font-size: 15px; line-height: 28px;} } @media only screen and (max-width: 768px){ #des_banner{ min-height: 400px;} .des_inbox{ display: block;} #des_vid{ margin: 40px 0 0;} #des_pop .popbox video{ max-height: initial; width: 100%;} } #sec_menu{ margin: 30px 0; gap: 10px; justify-content: center;} #sec_menu a{ min-width: 80px; padding: 8px 10px 4px; background: #ffe5d6; border-bottom: 2px solid transparent; text-align: center; display: block; position: relative;} #sec_menu a:hover{ border-color: #fe5619;} #sec_menu a i{ margin-bottom: 5px; color: #fe5619; font-size: 25px; display: block;} @media only screen and (max-width: 1100px){ #sec_menu{ flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;} #sec_menu a{ min-width: max-content; padding: 8px 20px 4px; } } .top_list.des_list{ margin: 20px 0 0;} .top_list.des_list ul{ padding: 0;} .top_list.des_list ul li{ margin: 4px 0 4px 10px; font-family: "VazirmatnB"; display: inline-block;} .top_list.des_list ul li::before{ content: ""; width: 8px; height: 8px; padding-left: 7px; background: #fe5619; border-radius: 50%; display: inline-block; vertical-align: middle;} .go_up.des_list{ margin: 0; position: relative; top: -25px} .des_list ul li{ padding: 10px; background: #fff; border-radius: 7px; box-shadow: 0px 0px 3px #e0e0e0;} /*@media only screen and (max-width: 768px){ .top_list.des_list ul li{ padding: 10px; margin: 0 0 5px; background: #f4f4f4; border: 1px solid #ccc; border-radius: 7px; display: block;} .top_list.des_list ul li::before{ display: none;} }*/ /****** Style Star Rating Widget *****/ .rating { border: none; padding:0; margin:auto; display: block; direction: ltr; } .rating > input { display: none; } .rating > label:before { margin: 3px 0; font-size: 1.5em; font-family:"Font Awesome\ 5 Free"; font-weight: 900; display: inline-block; } .rating > #s1, .rating > #s5{ position:relative;} .rating > #s1:before{ content: "\f556";} .rating > #s2:before{ content: "\f119";} .rating > #s3:before{ content: "\f11a";} .rating > #s4:before{ content: "\f118";} .rating > #s5:before{ content: "\f599";} .rating > .half:before { content: "\f089"; position: absolute; } .rating > label { color: #fff; font-size: 25px; cursor: pointer; transition: all linear 0.2s;} .tripline img{width:30px; height:auto} /***** CSS Magic to Highlight Stars on Hover *****/ .rating > input:checked ~ label, /* show gold star when clicked */ .rating:not(:checked) > label:hover, /* hover current star */ .rating:not(:checked) > label:hover ~ label { color: #F6BE04 !important; } /* hover previous stars in list */ .rating > input:checked ~ #s5 .mouth, .rating > input:checked ~ #s1 .l_eye, .rating > input:checked ~ #s1 .r_eye, .rating:not(:checked) > #s5:hover .mouth, .rating:not(:checked) > #s1:hover .l_eye, .rating:not(:checked) > #s1:hover .r_eye, .rating:not(:checked) > label:hover ~ #s5 .mouth, .rating:not(:checked) > label:hover ~ #s1 .l_eye, .rating:not(:checked) > label:hover ~ #s1 .r_eye{ background:#F6BE04 !important;} .rating > input:checked + label:hover, /* hover current star when changing rating */ .rating > input:checked ~ label:hover, .rating > label:hover ~ input:checked ~ label, /* lighten current selection */ .rating > input:checked ~ label:hover ~ label { color: #F6BE04 !important; } #givestar button{ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: none; font-size:13px; position:relative; top:4px; color:#413F3F; transition:linear .2s; left:5px; border-radius:3px; background:#fc3; min-width: 120px; padding: 0 0 1px 0; float:left; margin-right:15px; margin-left:-5px; } #wantstar{color:#413F3F; border:1px solid #fc3; transition:linear .2s; border-radius:3px; padding:5px; color: #fff; text-shadow: 1px 1px 1px #333; cursor:pointer;} #wantstar:hover{background:rgba(243,182,0,0.50);} #givestar button:hover{background:#F3B600; cursor:pointer;} #givestar{transition: visibility 0s, opacity 0s linear;} .des_inbox .stars{ height: 40px; margin: 20px auto 20px; color: #fff; text-shadow: 1px 1px 1px #333; text-align: right;} .des_inbox .stars img{width:40px; height:auto;} .des_inbox .stars i{color:#F7BB06 !important;} .des_inbox .results i{ color:#333 !important} .des_inbox .stars span{font-size:13px; display:inline-block; margin-top:4px;} span.results{font-size: 14px !important; margin:0 !important; display:inline !important; color:#519B08; text-shadow: none;} span.results a{ margin-right:10px; color: #e44a21;} span.results a:hover{ opacity: 0.6;} /****** Style Star Rating Widget *****/ .destins{ width: calc(100% - 40px) !important; font-size:0; padding: 0 !important; text-align:right; position: absolute !important; left: 0; right: 0; bottom: -100px; z-index: 11;} .destins li{display:inline-block; background-size:cover !important; background-position:center; position:relative; height:100%; border-radius: 7px; box-shadow: 0 0 7px #000; text-align: center; overflow:hidden;} .destins li img{ height: 100%; width: 100%; margin: auto; position: absolute; top: -50%; left: -50%; right: -50%; bottom: -50%; z-index: 1; opacity: 1; transition:linear .4s;} .destins li div.info_side{ width: calc(100% - 120px); padding: 15px; background: rgba(0, 0, 0, 0.72); color: #fff; height:100%; font-size: 15px; text-align: right;} .destins li div.info_side h3{ min-height: 60px; margin-bottom: 20px; color: #bfbfbf; font-family: "VazirmatnB"; font-size: 20px; line-height: 30px;} .destins li div.info_side a{background:#ff5c01; border:1px solid #ff5c01; font-size:15px; display:block; margin:10px; padding:5px; color:#FFF; font-family:'VazirmatnB'; text-shadow:1px 1px 1px #000000; transition:all linear .2s;} .destins li div.info_side a:hover{background:#6c6c6c; border-color: #6c6c6c;} .info_side .d_right{ width: 60px;} .d_right > div{ line-height: 20px; padding-right: 5px; border-right: 2px solid #ff5c01;} .d_right > div b{ font-size: 15px; display: block;} .d_right > div span{ margin-top: 3px; font-size: 13px; display: block;} .info_side .d_left{ width: calc(100% - 60px); text-align: left;} .d_left b{ display: block;} .d_left > span{ margin-top: 2px; font-size: 13px; line-height: 21px; border-radius: 5px; display: inline-block;} .d_cost{ font-size: 18px !important;} .d_cost span{ font-size: 13px;} .on_pic{ position: relative; z-index: 4;} .des_date{ width: 120px; padding: 10px; background: #ff5c01; color: #fff; text-shadow: 0 0 0 #333; display: flex; flex-direction: column; justify-content: space-between;} .des_date b{ font-size: 25px; line-height: 40px; display: block;} .show_more{ height: 100%; width: 100%; margin: auto; background: #ff5c01; color: #fff; font-family:'VazirmatnB'; font-size: 20px; position: absolute; top: -50%; left: -50%; right: -50%; bottom: -50%; opacity: 0; transition:linear .2s; z-index: 10; display: flex; align-items: center; justify-content: center;} .show_more:hover{ opacity: 1;} .padd_t100{ padding-top: 100px !important;} .destionsAv1 li{ width:100%; max-width: 400px;} .destionsAv2 img{width:100% !important; height:auto !important;} .destionsAv1 img{ width:100% !important; height:auto !important;} .destionsAv3 li{width:33%; margin-left:.5%;} .destionsAv2 > li{width:49%; margin-left:1%;} .destionsAv3 li:nth-of-type(3n){margin-left:0;} .destionsAv2 li:nth-of-type(2n){margin-left:0;} @media only screen and (max-width: 1024px) { .destins{ position: relative !important;} } .bg_tour{ background-size: cover !important; background-position: center !important; position: relative;} .bg_tour::after{ content: ""; background: #000000; background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.92) 8%, rgba(0, 0, 0, 0) 71%); position: absolute; left: 0; right: 0; top: 0; bottom: 0;} .tellme{ max-width: 600px; width: calc(100% - 30px); margin: 0 auto; padding: 15px; background: #fff; box-shadow: 0px 0px 3px #e0e0e0; border-radius: 15px; position:relative; top: -80px; z-index: 5;} .tell_sub{ max-width: max-content; padding: 12px 30px; margin: auto; font-family: "VazirmatnB"; font-size: 35px; line-height: 45px; border-bottom: 1px solid #ddd; position: relative;} .tell_sub i{ margin-right: 20px; color: #ff5c01; vertical-align: middle;} .tell_sub::after{ content: ""; width: 25px; height: 25px; margin: auto; background: #ff5c01; border-radius: 50%; border: 10px solid #fff; position: absolute; left: 0; right: 0; bottom: -13px; display: block;} .tellme form{ margin: 30px auto 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 20px 40px;} .tellme form input,.tellme form select,.tellme form button{ width: 100%; height: 45px; padding: 5px; border: 2px solid #ddd; border-radius: 7px;} .tellme form input:focus{ border-color: #ff5c01; outline:none} .tellme form button{ background: #ff5c01; color: #fff; font-family: "VazirmatnB"; font-size: 17px; border-color: #ff5c01;} .tellme form button:hover{ background: #373737; border-color: #373737;} .tellme form .tiny{ padding: 2px 5px; font-family: "VazirmatnB";} .tellme form > div:last-child{ display: flex; align-items: flex-end;} @media only screen and (max-width: 768px){ .pad130bt{ padding-bottom: 130px !important;} } @media only screen and (max-width: 600px){ .tellme form{ grid-template-columns: repeat(1,1fr);} } /* .tellme:after{ content:""; background:rgba(255,255,255,0.7); position:absolute; top:0; left:0; right:0; bottom:0; display:block;} .tellme > div{background:rgba(255,255,255,.8); padding:10px; position:relative; z-index:1;} */ .onlineact2 form { margin-top: 12px; text-align: center;} .onlineact2 select, .onlineact2 input{ border:1px solid #CCC; max-width:250px; width:100%; padding:5px;} .onlineact2 .formtop>div>div:first-child{display:inline-block; font-size:14px; background:#464748; width:100%; border:1px solid #464748; padding:5px; border-radius:3px 3px 0 0; font-family:'VazirmatnB'; color:#FFF; text-shadow:1px 1px 1px #000000;} .onlineact2 .formtop>div>div:nth-child(2){display:block; font-size:14px; background:rgba(255,255,255,.85); padding:5px; border:1px solid #FFFFFF; border-top:none;} .onlineact2 .formtop>div:nth-child(1){width:24%} .onlineact2 .formtop>div{width:25%; vertical-align:top; display: inline-block; text-align: center; margin-left: 0.25%;} .onlineact2 button[type="submit"]{ background: #ff5c01; display: block; padding: 5px 15px 5px; margin:10px auto auto; color: WHITE; font-family: "VazirmatnB"; font-size:15px; text-shadow: 1px 1px 1px #333; border: none; border-radius: 0; transition: linear .2s;} .onlineact2 button[type="submit"]:hover{ opacity: 0.8;} .onlineact2 button i{ padding-right: 5px; font-size: 12px; } .tellme .onlineact2{border:5px solid #fed100; border-left:none; border-right:none; text-align: center;} .tellme .onlineact2 #num{width:60px; text-align: center;} .tellme .onlineact2 .formtop > div{ margin-bottom:5px;} .tellme .onlineact2 .title{position:absolute; top:-70px; font-size:36px; color:#333; font-family:'VazirmatnB';} .tellme .onlineact2 .title i{transform:rotate(30deg); color:#fed100; text-shadow:2px 1px 0px #333333;} @media only screen and (max-width: 935px){ .onlineact2 .formtop > div { width: 49.3% !important;} } @media only screen and (max-width: 575px){ .onlineact2 .formtop > div{ display: block; width: 100% !important;} } .inpic{ height:750px; position:relative; background-size:cover !important; background-attachment: fixed !important; background-position: center !important; display: flex; flex-direction: column; justify-content: center;} .inpic .main{ width: 100%;} .inpic .main_vid{ width: Calc(50% - 10px); margin: 0 auto 0 0;} .inpic #video{ margin: auto; position: relative; z-index: 10;} .inpic #video video{ width: 100%; max-height: 550px; margin: auto; background: #373737; display: block;} .inpic:after{ content:""; background:rgba(0,0,0,0.5); position:absolute; top:0; right:0; bottom:0; left:0;} #list_in{ flex-direction: row-reverse;} #list_in .top_list{ width: Calc(50% - 10px); padding: 20px; margin: 0 0 0 20px; background: #ffffffd4; border-radius: 10px; position: relative; z-index: 5;} #part1{ padding-top: 70px;} .parts{ position:relative; padding:0 5px 9%; padding-bottom:50px; background-size:cover !important; background-attachment: fixed !important;} .parts .des_title{ font-size:35px; text-align:right; padding:45px 32px 10px; line-height:60px; color:#FFF; text-shadow:2px 0px 1px #000000;} .parts ul{display:block; margin:0px auto 0px; font-size:0; z-index:11111;} .parts ul li:first-child{border-radius:0; border:none; margin:0; color:#FFF; padding:5px 30px 5px; width:200px; background:#1c1d1e;} .parts ul li{display:inline-block; text-align:center; font-size:15px; text-shadow:1px 1px 1px #000; margin:1px 0px 1px; background:rgba(255,255,255,.8); margin-left:1px;}/*background:#174671;border-top:1px solid #2E5781; border-left:1px solid #2E5781; border-bottom:1px solid #2E5781; */ .parts ul li a{display:inline-block; padding:5px 30px 5px; color:#000; text-shadow:none;} .parts ul li a:hover{ background:#FFF} .parts ul li a span{ position:relative; right:0; transition:all linear 0.2s;} .parts ul li a:hover span{ right:15px;} .backg{padding: 15px 0 30px; background: #f8f7ee; background: -moz-linear-gradient(top, #f8f7ee 2%, #fbfaf4 12%, #fcfbf7 17%, white 29%); background: -webkit-gradient(left top, left bottom, color-stop(2%, rgba(248,247,238,1)), color-stop(12%, rgba(251,250,244,1)), color-stop(17%, rgba(252,251,247,1)), color-stop(29%, rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(248,247,238,1) 2%, rgba(251,250,244,1) 12%, rgba(252,251,247,1) 17%, rgba(255,255,255,1) 29%); background: -o-linear-gradient(top, rgba(248,247,238,1) 2%, rgba(251,250,244,1) 12%, rgba(252,251,247,1) 17%, rgba(255,255,255,1) 29%); background: -ms-linear-gradient(top, rgba(248,247,238,1) 2%, rgba(251,250,244,1) 12%, rgba(252,251,247,1) 17%, rgba(255,255,255,1) 29%); background: linear-gradient(to bottom, #f8f7ee 2%, #fbfaf4 12%, #fcfbf7 17%, white 29%); border-top:1px solid #E5E5E5; } .destination .tour i{font-size:55px;} .destination .tour .info i,.destination .tcategory i{ font-size:18px;} .destination .tcategory{ margin: 40px 0;} .destination .tcategory i{ color: #ff5c01;} .destination .tcategory .title{ color: #444444; font-family: 'VazirmatnB'; font-size: 16px; line-height: 30px;} .informme .title{position:static !important; font-size:18px !important; text-shadow:none !important; color:#292929 !important;} .informme .title i{padding-left:5px;} .informme .buynow1{padding:5px 25px 5px;} .padd50t{ padding-top: 50px;} .back_top{ width: 30px; height: 30px; line-height: 30px; margin-top: 20px; background: #ddd; text-align: center; display: block; border-radius: 7px; cursor: pointer; transition: all linear 0.2s;}/* back to top safhe maghsad */ .back_top:hover{ background: #ff5c01; color: #fff;} .back_top::after{ content: "\f106"; font-family:"Font Awesome\ 5 Free"; font-weight:900;} .back_top:first-of-type{ display: none;} @media only screen and (max-width: 1200px) { .parts ul li a:hover{ padding-right:30px;} } @media only screen and (max-width: 870px) { .destionsAv3 li{ width:49%; margin-left:0;} .destionsAv3>li:nth-of-type(1){margin-left:2%;} } @media only screen and (max-width: 800px) { #part1 { padding-top: 20px;} .parts{ background-position:top !important;} } @media only screen and (max-width: 610px) { .parts .des_title{ padding-top:60px; text-align:center;} .parts ul{ max-width:250px; padding:0; margin-bottom:30px;} .parts ul li{ display:block; width:auto !important;} .parts ul li a{ padding:5px 0; display:block;} .parts ul li a:hover{padding-right:0; } .destins>li{ width:100% !important;} .inpic{ min-height:400px; height: inherit; background-attachment: scroll !important;} .inpic .main_vid{ width: 100%; margin-top: 30px;} .inpic #video{ margin: auto;} .inpic #video video{ max-height: 380px; margin: auto;} #list_in{ padding: 0; flex-direction: row;} #list_in .top_list{ width: 100%; padding: 15px; margin: 20px;} .parts .on_shadow{ position:relative; z-index:900;} .parts{background-size:auto !important; border-bottom:3px solid #FFFFFF;} .destination .shadow{ background:rgba(0,0,0,0.6); position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; z-index:11;} .destins li img{width:100%; height:auto !important;} } @media only screen and (max-width: 820px) { .destionsAv2 img{width:auto !important; height:100% !important;} } @media only screen and (max-width: 420px) { .destins li img{width:auto; height:100% !important;} .destionsAv1 img{ height:auto !important; width:auto !important; } } /*** FAQ ***/ .faq_des{ background: #f4f4f4; padding: 20px;} .faq_des h3{ margin-top: 0;} .each_ques{ margin-bottom: 15px; padding: 5px; font-size: 16px; line-height: 30px; font-family: "VazirmatnB"; border-bottom: 1px solid #ff5c01; position: relative; display: block; cursor: pointer;} .each_ques::after{ content: "\f053" !important; position: absolute; left: 0; top: 5px; color: #ff5c01; font-family:"Font Awesome\ 5 Free"; font-weight:900; display: block; transition: all linear 0.2s;} .each_ques.show::after{ transform: rotate(-90deg);} .ans_ques{ padding: 0 15px 20px 0; color: #888; display: none;} /* majid about */ .matnbody{ padding-right:10px; font-size:14px; text-align:justify; } .titr_1{ padding:0 3px 10px 0; font-size: 26px; color: #333333;font-family: 'VazirmatnB'; line-height: 40px;} .titr_1 i{ padding-left:5px; color:#ff5c01;} .matn_about{ font-size:15px; text-align:justify; line-height:29px;} .matn_about a{color:#069;} .matn_about a:hover{color:#09C;} .aboutshort{background:#F0F0F0; padding:10px;} /* majid wtourtype */ .titr_2{ margin: 15px 0 5px 0; color:#192053; font-size: 16px; display: block;} .titr_2 i{ color:#ff5c01; font-size:14px;} .box_type{ padding: 20px} .box_type img{ max-width:100%; margin:10px auto; display:block;} .form_mrg{ margin:40px 0 20px 0;} .butt_close{ padding: 5px 15px 5px; color: #ff5c01; background:#fff; font-size: 13px; border: 1px solid #ff5c01; border-radius: 3px; transition:all 0.2s linear; } .butt_close:hover{ color: #FFFFFF !important; text-shadow: 1px 1px 1px #333333; background: #ff5c01; border: 1px solid #ff5c01;} .mw700{ max-width: 700px;} .box_type .imgtop { width: 100% !important; max-width: 700px !important;} /************************************* faq ****************************************/ #question_box{ margin: 20px 0 40px;} #question_box .txt{ font-size:16px;} #question > div i{ margin-left:7px; color:#ff5c01; font-size:20px;} #question > div{ margin-bottom:15px; line-height:28px; color:#316087; font-family:'VazirmatnB'; font-size:14px; cursor:pointer; transition:all linear.3s;} #question > div:hover{ color:#ff5c01;} #question > div > div{ padding-right:15px; color:#333; font-family:'IRANSansR'; font-size:14px; display:none;} #question > div i{ font-size:14px; position:relative; top:1px;} /*404 and Error*/ .errorbg, #construction{background:url(images/background/balloon2.png) no-repeat scroll top; background-size:cover !important;} .errorblock{width:960px; margin:auto; padding-top:40px;} .lefttxt{float:left; line-height:35px; color:#46261b; border-radius:10px; width:60%; padding:20px; font-size:25px; margin-top:20px;} .lefttxt a{color:#333; transition:all 0.3s;}.lefttxt a:hover{color:#CB5645;} .lefttxt input{padding:6px; border:1px solid #FFF; font-size:15px; border-radius:5px;} .lefttxt input:last-child{background:#ff5c01; color:#FFF; border:none; transition:all 0.2s;} .lefttxt input:last-child:hover{background:#CB5645; cursor:pointer;} .lefttxt > div{font-size:30px; line-height:42px; color:#ff5c01;} .lefttxt > span{padding-right:20px; font-size:17px;} .lefttxt .circlet{ border-radius:200px; background:#ff5c01; color:#8fd0d4; border:2px solid #ff5c01; display:inline-block; width:40px; height:40px; line-height:40px;} .lefttxt .circlet span{padding-top:20px;} .lefttxt .circlet i{margin-top:10px;} .rowt{display:table; padding-bottom:10px;} .rowt div:last-child{display:table-cell; vertical-align:middle; padding-right:10px;} .designed{color:#FFF; font-size:13px; padding:10px; border-radius:5px 0px 0px 5px; text-align:left; width:100px; background:#FFF; margin-top:10px;} .designed a{color:#378E93; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);} @media only screen and (min-width: 40px) and (max-width: 767px) { .errorblock{width:90%; padding-top:0px; margin:auto;} .lefttxt{float:none; width:100%; padding:0;} } /** contact **/ .half_after{ position: relative;} .half_after:after{ content: ""; width: 50%; height: 100%; background: #fff; position: absolute; right: 0; top: 0; bottom: 0; display: block; z-index: 5;} #half_box #co_form{ width: 50%; padding-left: 30px; background: #fff;} #co_form{ padding-bottom: 40px; position: relative; z-index: 10;} .c_title{ padding:20px 0; color:#333; font-family: 'VazirmatnB'; line-height: 28px; font-size: 20px;} .c_title i{ color:#ff5c01; position: relative; top: 2px;} #co_form iframe{width:100%;} #co_form form ul{ font-size:0; padding:0; margin:0 0 10px 0;} #co_form form .part_one li{ width:calc(50% - 5px); margin-left: 10px; display:inline-block;} #co_form form .part_one li:nth-child(2n){ margin-left: 0;} #co_form form ul input{ width:100%; height:45px; padding:0 5px; font-family: 'IRANSansR'; font-size:14px; color:#333; border:1px solid #ccc; border-radius: var(--radius7); vertical-align:bottom;} #co_form form .part_two li{ width:100%; display:inline-block; vertical-align:top;} #co_form form .part_two li:nth-child(2){ width: 100%;} #co_form form .part_two li textarea{ width:100%; height:76px; padding:0 5px; color: #333; font-family: 'IRANSansR'; font-size:15px; border:1px solid #ccc; resize:none; border-radius: var(--radius7); display: block;} #co_form form .part_two input[type="submit"]{ margin-top:10px; color:#fff; font-family: "VazirmatnB"; font-size:15px; border: none} .contact_info{ width: 50%; padding: 10px 30px 30px 0;} .co_box_info .txt_color{ color: #ff5c01; font-size: 16px;} .co_box_info > div{ margin-bottom: 10px;} .co_box_info > div a:hover{ color: #ff5c01;} .font17{ font-size: 15px;} @media only screen and (max-width:900px){ #half_box #co_form,.contact_info{ width: 100%; padding: 0; background: transparent;} .half_after:after{ display: none;} } @media only screen and (max-width:500px){ #half_box #co_form{ margin-bottom: 30px;} #co_form form ul{ margin: 0 !important;} #co_form form .part_one li{ width: 100%; margin: 0 0 10px !important;} } .pad20bt{ padding-bottom:20px;} #contact{ padding-bottom: 40px;} #contact .c_title{ padding:20px 0; color:#333; font-family: 'VazirmatnB'; line-height: 28px; font-size: 21px;} #contact .c_title i{ color:#ff5c01; position: relative; top: 2px;} #contact iframe{width:100%;} #contact form ul{ font-size:0; padding:0; margin:0 0 5px 0;} #contact form #part_one li{ width:33%; display:inline-block;} #contact form #part_one li:nth-child(2){ margin:0 0.5%;} #contact form ul input{ width:100%; height:40px; padding:0 5px; font-family: 'IRANSansR'; font-size:14px; color:#333; border:1px solid #ccc; vertical-align:bottom;} #contact form #part_two li{ width:66.5%; display:inline-block; vertical-align:top;} #contact form #part_two li:nth-child(2){ width: 33%; margin-right: 0.5%; position:relative;} #contact form #part_two li:last-child{ position:relative;} #contact form #part_two li textarea{ width:100%; height:76px; padding:0 5px; color: #333; font-family: 'IRANSansR'; font-size:15px; border:1px solid #ccc; resize:none; display: block;} #contact form #part_two input[type="submit"]{ margin-top:35px; color:#fff; font-family: "VazirmatnB"; font-size:14px; border: none} ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ direction:rtl !important; text-align:right; } ::-moz-placeholder { /* Firefox 19+ */ direction:rtl !important; text-align:right; } :-ms-input-placeholder { /* IE 10+ */ direction:rtl !important; text-align:right; } :-moz-placeholder { /* Firefox 18- */ direction:rtl !important; text-align:right; } .dis_none{ display: none;} @media only screen and (max-width:940px){ #contact{ text-align:center;} #contact form ul{ margin:0;} #contact form #part_one li{ width:100%; margin-bottom:7px;} #contact form #part_one li:nth-child(2){ margin:0 0 7px 0;} #contact form #part_one, #contact form #part_two{ max-width:450px; margin:auto; text-align:center;} #contact form #part_two li{ width:100%; margin-bottom:7px;} #contact form #part_two li:nth-child(2){ margin:0 0 7px 0 !important;} #contact form #part_two input[type="submit"]{ margin: 10px 0 0;} } /****************************************** footer ******************************************/ #footer{ padding: 50px 0 0; background-color: #e0e0e0;} .top_footer{ margin-bottom: 20px; display: grid; grid-template-columns: repeat(4,auto); gap: 20px; font-size: 14px;} .top_footer > div h3{ margin-bottom: 5px; font-family: "VazirmatnB"; font-size: 16px; line-height: 30px;} .top_footer > div > a{ margin-bottom: 5px; display: block;} .top_footer > div > a:hover,.copyright a:hover{ color: #ff5c01;} .top_footer > div > a::before{ content: "\f053"; padding-left: 5px; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size: 9px; display: inline-block;} .top_footer > div:last-of-type img{ max-width: 145px; margin-right: auto;} .top_footer > div:last-of-type a::before{ display: none;} .socials{ margin-right: auto;} .socials a{ margin-right: 10px; color: #ff5c01; font-size: 25px;} .call_us{ font-family: "VazirmatnB"; font-size: 16px; line-height: 30px;} .copyright{ padding: 10px 0; margin-top: 10px; border-top: 1px solid #bababa;} .copyright > div{ width: 50%; font-size: 12px; line-height: 18px;} .copyright .left{ direction: ltr; font-family: "tahoma";} @media only screen and (max-width: 768px){ .top_footer{ grid-template-columns: repeat(2,auto);} .top_footer > div:last-of-type img{ margin-right: 0;} } @media only screen and (max-width: 500px){ .top_footer{ grid-template-columns: repeat(1,auto);} .top_footer > div{ text-align: center;} .top_footer > div > a{ padding: 10px; border: 1px solid #d0d0d0; border-radius: var(--radius7);} .top_footer > div:last-of-type a{ border: none;} .top_footer > div:last-of-type img{ margin: auto;} .call_us,.socials,.copyright > div{ width: 100%; text-align: center; justify-content: center;} .socials a{ margin: 8px 8px 0;} } /* --- Reset / tokens --- */ *,*::before,*::after{box-sizing:border-box} :root{ /* Light theme */ --bg:#ffffff; /* header background */ --bg-sub:#ffffff; /* submenu / sheet bg */ --page:#ffffff; /* page bg */ --txt:#000; /* primary text */ --muted:#000000; /* secondary text */ --brand:#ffffff; /* accent */ --hover:#f4f4f4; /* hover bg */ --border:rgba(2,6,23,.08); --ring: 0 0 0 3px rgba(255, 255, 255, 0.25); --shadow:0 8px 24px rgba(2,6,23,.08); --sheetTop: 0px; /* موبایل: فاصلهٔ شیت از بالای صفحه (ارتفاع هدر) */ } /* body{margin:0;font:16px/1.6 system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;background:var(--page);color:var(--txt)} */ /* --- Top thin bar --- */ .topbar{ position:relative; /* قبلاً sticky بود */ background:var(--bg); /*border-bottom:4px solid var(--border);*/ z-index:10001; /* می‌تونی حتی حذفش کنی */ font-family: "IRANSansR"; } .topbar__in{ margin:auto;display:flex;align-items:center;gap:12px;padding:6px 0; border-bottom: 1px solid #ddd;} .topbar__links{margin-inline-start:auto;display:flex;gap:18px} .topbar__link{font-size:12px;color:#3e3e3e;background-color: #8080801f; padding: 0 5px 0;} .topbar__link:hover{color:var(--txt)} /* Header: bulletproof با fixed */ .header{ position: fixed; top: var(--headerTop, 0px); /* مقدار رو با JS ست می‌کنیم */ left: 0; right: 0; z-index: 9998; transition: transform .25s ease, box-shadow .2s ease, top .25s ease; background-color: white; font-family: "IRANSansB"; font-weight: normal; font-size: 16px; border-bottom: 1px solid #ddd; } .header--hidden{ transform: translateY(-110%); } /* اسپیسر زیر هدر که ارتفاع هدر را جبران می‌کند */ .header-spacer{ height: var(--headerH, 0px); } .nav{margin:auto;display:flex;align-items:center;gap:16px;padding:12px 0} .scrolled .nav{ padding:5px 0} .brand{display:flex;align-items:center;gap:10px;font-family:'VazirmatnB'; font-size: 23px; color: #3e3e3e;} .brand__logo{width:28px;height:28px;background:linear-gradient(135deg,var(--brand),#60a5fa)} .brand #logo{ width: 50px;} .scrolled .brand #logo { width: 37px;} .scrolled .brand{ font-size: 23px;} /* Primary links (desktop) */ .nav__primary{display:flex;gap:6px;margin-inline:auto; align-items: center;} .nav__item{position:relative; list-style: none;} .nav__btn{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;border:0;background:transparent;color:var(--txt); border-radius: var(--radius7);} .nav__btn:hover,.nav__btn[aria-expanded="true"]{background:var(--hover)} .nav__btn:focus{outline:none;box-shadow:var(--ring)} .nav__btn i{ font-size: 10px;} .s_form{ width: 200px; height: 39px; position: relative; display: block; overflow: hidden;} .s_form input{ width: 100%; height: 100%; padding: 5px 10px 5px 55px; font-size: 13px; position: absolute; top: 0; right: 0; border: 1px solid #ccc; border-radius: 25px; transition: all linear 0.2s; outline: none;} .s_form button{ width: 50px; height: 100%; background: transparent; color: #333; position: absolute; top: 0; left:0; border: none; display: block;} .s_form button i{ vertical-align: middle; transition: all linear 0.2s;} .s_form button:hover i{ color: #fe5619;} .s_form input:focus{ border-color: #fe5619;} /* Utilities */ .nav__utils{display:flex;gap:20px;align-items:center} .btn{ margin-left: 10px; color:#fff; padding: 7px 12px; background: #fe5619; color: #fff; font-size: 14px; border-radius: 26px; display: inline-block;} .btn--cta{background:var(--brand);border-color:transparent;color:#fff;} .phone{display:flex;align-items:center;gap:8px;white-space:nowrap; font-size: 20px;} .phone a{direction:ltr} /* --- Desktop mega menups --- */ /* FULL-WIDTH desktop mega menup */ .menup{ position: fixed; /* بجای absolute */ left: 0; right: 0; /* کل عرض ویووپرت */ top: var(--menupTop, 72px); /* با JS مقداردهی می‌کنیم */ background: rgb(255 255 255 / 78%); background-size: cover !important; background-position: center !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--txt); border-top: 1px solid var(--border); box-shadow: var(--shadow); padding: 24px 0; /* پدینگ بیرونی؛ محتوا وسط میاد */ display: none; width: 100vw; /* مهم: تمام‌عرض */ height: 100vh; border-radius: 0; /* گوشه‌های صاف مثل هدر */ z-index: 70; /* زیر شیت موبایل (z=80) و کمتر از هدر (z=60) لازم نیست چون زیر هدر شروع می‌کنه */ } .menup[data-open="true"]{ display: block; } .close_tab{ width: 30px; height: 30px; line-height: 30px !important; background: #fff; position: absolute; left: 35px; top: 20px; font-size: 21px; border-radius: 50%; text-align: center; cursor: pointer; box-shadow: 0px 0px 2px #b3b3b3;} .close_tab:hover{ opacity: 0.6;} /* محتوا وسط با حداکثر عرض */ .menup__grid{ margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; align-items: start; padding: 0 24px; /* حاشیه داخلی کناری */ } .grid2{ grid-template-columns: 2fr 1fr;} /* این مورد دیگه لازم نیست اگر قبلاً داشتی */ /* .menup{ min-width:680px } ← حذف */ .last_col{ background-size: cover !important; background-position: center; height: 300px; width: 100%; border-radius: var(--radius7);} .menup__col h4{margin:6px 0 10px;font-size:17px;color:#fe5619; font-family: "VazirmatnB";} .menup__link{max-width: max-content; display:flex;gap:10px;padding:8px;color:var(--txt); font-size: 14px;} .menup__link:hover,.menup__col h4 a:hover{ color: #fe5619;} .pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:#eef6ff;color:#0c4a6e;font-size:12px;border:1px solid var(--border)} .muted{color:var(--muted);font-size:14px} /* --- Mobile --- */ .burger{display:none;} .burger button{ width: 40px; height: 40px; line-height: 39px; border:1px solid var(--border);background:#373737;color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius7);} /* Main mobile drawer (first level) */ .drawer{ /* قبلاً display:none بود */ max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: max-height .32s ease, opacity .24s ease, transform .32s ease; background: var(--bg); border-top: 1px solid var(--border); will-change: transform, opacity; } /* وقتی باز است */ .drawer[aria-hidden="false"]{ max-height: 75vh; /* ارتفاع قابل‌اسکرول زیر هدر */ opacity: 1; transform: translateY(0); } .drawer__list{ padding: 0; margin: 0;} .drawer__list > li{border-bottom:1px solid var(--border)} /* آیتم‌ها برای انیمیشن پله‌ای */ .drawer__btn{ opacity: 0; /* شروع پنهان؛ با JS انیمیت می‌کنیم */ transform: translateY(8px); } .drawer__btn:hover{background:var(--hover)} /* Keyframes مشترک با سطح ۲ هم می‌تونه یکی باشه */ @keyframes fadeUp{ from{ transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Second-level sheet (mobile) – slides from RIGHT and starts below header */ /* Second-level sheet (mobile) */ .sheet { position: fixed; right: 0; left: 0; top: var(--sheetTop, 0); /* متغیر از JS پر میشه */ width: 100vw; height: calc(100vh - var(--sheetTop, 0)); background: var(--bg-sub); color: var(--txt); transform: translateX(100%); transition: transform .28s ease; z-index: 9999; display: flex; flex-direction: column; box-shadow: var(--shadow); } .sheet[data-open="true"]{ transform:translateX(0) } .sheet__header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--bg)} .sheet__back{padding:8px 12px;border: none;background:#f4f4f4;color:var(--txt);cursor:pointer; border-radius: var(--radius7);} .sheet__title{ margin: 0; font-family: "VazirmatnB"; font-size: 16px;} .sheet__close{margin-inline-start:auto;padding:8px 12px;border:1px solid var(--border);background:none;color:var(--txt); border-radius: var(--radius7);cursor:pointer;font-size:18px;line-height:1} .sheet__close i{ position: relative; top: 1px;} .sheet__back i{ position: relative; top: 2px;} .sheet__scroller{overflow:auto;padding:12px 12px 28px} .sheet__section{margin:14px 0} .sheet__section h4{margin:6px 0 8px;font-size:13px;color:var(--muted); font-family: "VazirmatnB"; font-size: 16px;} .sheet__link{display:block;padding:12px 10px;} .sheet__link:hover{background:var(--hover)} @media (max-width: 900px){ .topbar{display:none} /* تاپ‌بار در موبایل مخفی */ .nav{gap:12px} .nav__utils{margin-inline-start:auto} .burger{display:block} .header{top:0;} /* چون تاپ‌بار نیست، هدر بچسبد بالا */ .phone{font-size:15px} .menup{display:none !important} /* پنل دسکتاپ در موبایل نباشد */ .burger{display:block} .nav__primary{display:none} } /* اصلاح ظاهر دکمه‌های سطح 1 دراور */ .drawer__btn{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:16px 18px; /* ریست پیش‌فرض مرورگر */ -webkit-appearance:none; appearance:none; background:transparent; /* یا var(--bg) اگر بخوای پس‌زمینه سفید باشه */ border:0; box-shadow:none; color:var(--txt); cursor:pointer; /* برای انیمیشن پله‌ای که گذاشتیم */ opacity:0; transform:translateY(8px); } .drawer__btn:hover{ background:var(--hover); } .drawer__btn:focus{ outline:none; box-shadow: var(--ring); } a.drawer__btn{ color: #fe5619;} /* Demo body */ @media only screen and (max-width: 768px){ .brand{ font-size: 18px;} .brand #logo{ width: 35px;} }