@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} 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{font-weight:normal; padding:0px; margin:0;} textarea, input[type="text"], input[type="button"], input[type="submit"], input[type="number"], input[type="email"], input[type="tel"] { -webkit-appearance: none; border-radius: 0; }/**resize code for ios**/ @font-face{ font-family: 'B_titr'; src: url('includes/fonts/TitrBold.ttf') format('truetype'); font-weight: bold; } ::-moz-selection{background:rgba(0,0,0,0.1)} * { box-sizing: border-box; } *:focus, *:active, a:active, a:focus, input:focus, input:active { -moz-outline-style: none; outline:none; outline: 0; } /* light blue at 80% opacity */ html { -webkit-tap-highlight-color: transparent; } html, body{ width:100%; height:100%; padding:0; margin:0;} body{ direction:rtl; font-size:15px; font-family:'sans-serif'; line-height:28px; color:#333333;} .main{max-width:1320px; margin:auto; display:block; padding:0 15px;} .flexbox,.flexbox1{ display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; align-items:center;} @media only screen and (max-width: 1200px){ .main{max-width:720px;} } @media only screen and (max-width: 768px){ .main{max-width:630px;} } @media only screen and (max-width: 650px){ .main{max-width:480px;} } a{text-decoration:none; transition:all linear 0.2s;} b, strong,h1,h2,h3,h4{ font-weight:bold;} .green{color:#393;}.orange{color:#E18700;}.red,.Ared{color:#C30;} .ltr, .ltext{ direction: ltr; display: inline-block;} .en_bold{ font-weight:bold;} .menu_shomare > .ltext {font-family: sans-serif;} /* 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:#930;} .Agreen{color:#360;} .Aorange{color:#f7941e;} /***** hide input number spinner ****/ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /*iframe */ .h_iframe-aparat_embed_frame{position:relative; margin:10px auto;} .h_iframe-aparat_embed_frame .ratio {display:block;width:100%;height:auto;} .h_iframe-aparat_embed_frame iframe {position:absolute;top:0;left:0;width:100%; height:100%;} #back_up{ width: 45px; height: 45px; line-height: 43px; text-align: center; background: rgba(75, 0, 130,.7); color: #FFF; font-size: 18px; position: fixed; bottom: 10px; right: 10px; border-radius:100%; z-index: 999; cursor: pointer; transition: all .3s linear;} #back_up:hover{ background: rgba(75, 0, 130,1);} .more_bt{ min-width:48%; background: #00a694; text-shadow: 1px 1px 1px rgba(0,0,0,.5); line-height:30px; padding:10px 10px; margin-top:20px; color:#fff; font-size:16px; text-align:center; display:block; transition:all linear 0.2s; font-weight: bold;} .more_bt:hover{ background: #005e53;} .fix_button{ width:100%; padding:10px 15px; background:#f5f3f6; position:fixed; bottom:0; left:0; right:0; margin:auto; border-top:1px solid #CDCDCD; border-bottom:1px solid #CDCDCD; opacity:0; visibility:hidden; z-index:1000;} .fix_button a{ margin-top:auto;} .title{ margin:0 0 25px; font-weight: bold; font-size:29px; line-height:50px; text-align:center;} .bodybg{ background: var(--sand);} .pbtm_40{padding-bottom: 40px!important;} .ptop_20{padding-top: 20px;} .mbtm_10{margin-bottom: 10px!important;} .fnt_29{font-size: 29px!important;} .fnt_38{font-size: 38px!important;} .pos_rel{position: relative;z-index: 1;} .x_stl{font-family: tahoma; font-weight: bold; } #navigator{ padding:20px 15px; color:#333; font-size:12px;} #navigator i{ padding:0 5px; color:#d07821; vertical-align:middle; text-shadow:none; display:inline-block;} #navigator a{ color:#333; transition:all linear 0.3s;} #navigator a:hover{ color:#d07821 !important;} :root{ --turquoise:#00a694; --turquoise-700:#007E7C; --accent:#d07821; --sand:#F9FAFB; --ink:#2E2E2E; --slate:#5E6A71; --white:#ffffff; --card:#FFFFFF; --muted:#F7F7F7; --radius:18px; --shadow:0 10px 24px rgba(15,23,42,.08); } /*********************************************** header ***********************************************/ #topline{ padding:15px 0 10px; background:#00a694; color:#fff; font-size:0;} #topline .member a{ margin-left:25px; color:#fff; font-size:13px; line-height:23px; display:inline-block;} #topline .member a:hover, #topline .social a:hover{ color:#373737;} #topline .member a:first-child i{ position:relative; top:2px;} #topline .social{ margin-right:auto;} #topline .social a{ margin-right:12px; color:#fff; font-size:15px; display:inline-block; vertical-align:middle;} #topline .social a svg{ position:relative; top:2px;} header{ position: fixed; top: 0; left: 0; right: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 2px solid var(--turquoise); z-index: 1000; transition:all linear 0.2s;} #menu{ position:relative;} .gap{ height: 70px;} .brand{display:flex;align-items:center;gap:12px} .logo{width:40px; border-radius:50%;} .brand .co_name{font-size:18px;margin:0;color: #d07821; font-weight: bold;} #menu .logo img{ width: 100%; display:block;} #menu nav{ width:calc(100% - 250px); margin-right:auto; text-align: left;} #menu nav ul{ padding:0; margin:0; font-size:0;} #menu nav ul li a{ padding:5px 10px; color:#000; font-size:15px; display:block; cursor:pointer;} .ax_safhe_aval a {color:rgb(10, 10, 10); font-size:16px; display:block; cursor:pointer;} #menu nav ul li:hover > a{ color:#d07821;} #menu nav > ul > li{ font-weight: bold; display:inline-block;} #menu nav > ul > li > a.active{ background:#f5f5f5;} #menu nav > ul > li:last-child a{ padding: 10px 16px; margin-right: 10px; border-radius: 12px; background: var(--turquoise); color: #fff; font-weight: 600; text-shadow: 0 0 1px black; box-shadow: var(--shadow); transition: .2s; display: inline-block;} #menu nav > ul > li:last-child a:hover{ background: var(--turquoise-700);} #menu nav > ul > li:last-child .phone{ display: none;} #menu nav > ul > li > a{ padding:20px;} #menu nav > ul > li > a i{ color:#FFFFFF; padding-left: 5px; position: relative; top: 3px;} .menu_shomare > b{top:inherit !important; font-weight: normal;} #menu nav > ul > li i.fa-angle-down{ color: #d07821; padding: 0 3px 0 0; font-size: 14px; vertical-align: middle; transition: all linear 0.2s;} #menu nav > ul > li.sub_menu{ position:relative;} #menu nav > ul > li.sub_menu .arrow{ width: 0; height: 0; position:absolute; top:calc(100% - 12px); left:0; right:0; margin:auto; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 12px solid #f5f5f5; display:block; opacity:0; visibility:hidden; transition:all linear .2s; z-index:101;} #menu nav > ul > li.sub_menu > a{ cursor: default;} #menu nav > ul > li.sub_menu::after{ content: ""; width: 0; height: 0; margin: auto; border-bottom: 10px solid var(--accent);; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; bottom: 0; left: 0; right: 0; visibility: hidden; opacity: 0; display: block; transition: all linear 0.2s;} #menu nav > ul > li.sub_menu:hover:after{ visibility: visible; opacity: 1;} #menu nav ul ul{ min-width:150px; padding: 10px; background: var(--accent); position: absolute; top:100%; right: 0; opacity: 0; visibility: hidden; border: 1px solid #E3E3E3; border-top: none; border-radius: 12px; transition: all linear 0.2s; /*transform: scaleX(0);*/ z-index: 100;} #menu ul ul li { width:100%; font-size: 12px; text-align: center; display: block; position: relative; white-space:nowrap;} #menu ul ul li a { color: #fff; font-size: 15px; font-weight: bold; padding:6px; text-shadow: 0 0 1px black;} #menu ul ul li a:hover{ color: #c1fff8;} /* #menu ul ul li a:hover{ opacity:0.6; color:#3D3D3D;} */ #menu ul ul li a.active{ background: #4B00821f;} #menu ul ul li span{ color:#d07821;} #menu ul ul li i { margin-left: 3px; color: #fff; font-size: 12px; vertical-align: baseline;} #menu ul > li:hover > ul, #menu nav > ul > li.sub_menu:hover > .arrow{ opacity:1; visibility:visible;} #menu #menu_bar{ line-height: 45px; color:#d07821; position:absolute; left:0; top:0; font-size:30px; text-align: left; cursor:pointer; display:none;} #menu .call_us{ display: none;} .fix_head{ width:100%; background:#fff; position:fixed; top:0; left:0; right:0; z-index:1000;} @media only screen and (min-width:1201px){ #menu nav{ display:block !important;} } @media only screen and (max-width:1200px){ header{ padding: 5px 0;} #menu nav{ width:100%; margin-top: 10px; text-align: right; display:none;} #menu nav > ul > li{ display:block;-webkit-tap-highlight-color: rgba(255, 255, 255, 0); } #menu nav ul li a{ padding:15px 10px; border-bottom: 1px solid #EFEFEF; font-size: 17px; } #menu nav > ul > li:last-child{margin-bottom: 20px; font-size: 15px; text-align: center;} #menu nav > ul > li:last-child a{ padding:15px 10px; margin:20px 0px; border-bottom: none;} #menu nav > ul > li:last-child .desk{ display: none;} #menu nav > ul > li:last-child .phone{ display: block;} #menu nav > ul > li:nth-last-child(2) a{ border-bottom: none;} #menu nav > ul > li.sub_menu .arrow{ display:none;} #menu #menu_bar{ display:block; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);width: 50px; } #menu nav ul ul{ position:static; visibility:visible; opacity:1;} #menu .trip_type{ position:static;} #menu nav ul ul{ padding: 0; border: none;} #menu ul ul li{ width:100%; display:block; white-space:normal; text-align: right;} #menu ul ul li a{ padding:6px 15px; border:none; font-size:14px; font-family:sans-serif;} #menu ul ul li .trip_type a:hover, #menu ul ul li a:hover{ color:#333;} #menu .call_us{ display: block;} } .fara_header{padding: 10px 16px !important;margin-right: 10px; border-radius: 12px;background: var(--turquoise);color: #fff !important;font-weight: 600;text-shadow: 0 0 1px black;box-shadow: var(--shadow);transition: .2s;display: inline-block;} .fara_header:hover{ background: var(--turquoise-700);} .chevron img{ width:30px; display: block; position: absolute; left: 0; right: 30px; bottom:35px; opacity: .2; animation: 2.5s ease 0s normal none infinite running chevloop2; z-index: 100;} @-webkit-keyframes chevloop2{ 0% { opacity: 0; bottom: 35px; } 55% { opacity: 1; } 100% { opacity: 0; bottom: 12px; } } @-moz-keyframes chevloop2 { 0% { opacity: 0; bottom: 35px; } 55% { opacity: 1; } 100% { opacity: 0; bottom: 12px;} } @-o-keyframes chevloop2 { 0% { opacity: 0; bottom: 35px; } 55% { opacity: 1; } 100% { opacity: 0; bottom: 12px;} } @keyframes chevloop2 { 0% { opacity: 0; bottom: 35px; } 55% { opacity: 1; } 100% { opacity: 0; bottom: 12px;} } /*********************************************** index ***********************************************/ /** banner **/ #banner{ /**height: calc(100vh - 106px);**/ padding: 50px 0; background:linear-gradient(180deg, #ffffff, #f6fbfb); color: #000; position: relative; overflow: hidden;} #banner > .main{ /*max-width: 1250px;*/ flex-direction: row-reverse;} #banner .img_black{ width: 400px; margin-right: auto; display: block;} #ban_box{ width: Calc(100% - 500px); padding:0 0 0 50px; margin: 0; text-align: justify; position: relative; z-index: 10; } #ban_box h1{ margin-bottom: 8px; font-weight: bold; font-size: 33px; line-height: 50px; display: inline-block;} #ban_box .more_bt{ display: inline-block;} .black_t{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;} .black_t:after{ content: ""; width: 100%; height: 30px; background: url("images/background/edge_down_compressed.png") repeat-x scroll 0% 100% / cover; display: block;} .btn2:hover,.btn-outline:hover{ background: var(--turquoise-700); color: #fff; text-shadow: 0 0 1px black;} .btn2{ min-width: 80px; text-align: center; display: inline-block; padding: 6px 16px; border-radius: 12px; border:1.5px solid var(--turquoise); background: var(--turquoise); text-shadow: 0 0 1px black; color: #fff; font-weight: 600; box-shadow: var(--shadow); transition: .2s; /* Hero */} .btn2.bt_border{ border-color: var(--accent);} .btn-outline{ background:transparent;color:var(--turquoise); text-shadow: none;} .hero{padding:64px 0 36px;} .hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center} .hero h2{font-size:34px;line-height:1.3;margin:0 0 10px; text-align: right;} .tagline{font-size:14px;color:var(--slate);margin:0 0 18px} .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px} .badge{display:inline-flex;align-items:center;gap:8px;background:var(--muted);padding:8px 12px;border-radius:999px;font-size:20px;color:#334155;margin-bottom:10px;font-weight: bold;border: 2px solid #d07821;} .hero-card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow);border: 2px solid #d07821;} .hero-illus{aspect-ratio:4/3;border-radius:16px;background:var(--turquoise);display:grid;place-items:center;border-top:4px solid var(--accent);border-bottom:4px solid var(--accent);color:white} .illus-stack{display:grid;gap:10px} .illus-row{display:flex;gap:10px} @media only screen and (max-width:1024px){ #banner{ height: auto;} } @media only screen and (max-width:768px){ #banner > .main{ flex-direction: row;} #ban_box{ width: 100%; max-width: 100%;padding: 0 20px;} #banner .img_black{ height: 250px; max-width: 250px; width: 70%; margin: 30px auto auto; object-fit: cover; object-position: top;} } @media only screen and (max-width:450px){ #banner .img_black{ width: 100%;} } /* about */ .commongap{margin: 0px 0 60px 0;} .section-title{font-size:22px;margin:0 0 18px;position:relative;padding-bottom:8px} .section-title:after{content:"";position:absolute;right:0;bottom:0;width:64px;height:3px;background:var(--accent);border-radius:3px} .grid{display:grid;gap:18px} .card{background:var(--card);border-radius:16px;padding:18px;box-shadow:var(--shadow);border:1px solid #E6E6E6;border-top:4px solid var(--accent)} .card h3{margin:0 0 8px;font-size:18px} .card.course-card{ padding:18px 18px 75px;} .txtcard a{ color: var(--turquoise);} .txtcard p{ margin: 10px 0;} .mart15{ margin-top: 15px;} .meta{font-size:12px; line-height: 22px; color:#64748b} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} /* Courses */ .course-card{ position: relative;} .course-card .btn2{ position: relative; z-index: 15;} .course-card .meta{display:flex;justify-content:space-between} .course-card .actions{display:flex;gap:8px;margin-top:10px; position: absolute; bottom: 20px; left: 20px; right: 20px;} .course-card img{ width: 100%; height: 190px; object-fit: cover;} .tag{ height: 24px; line-height: 15px; display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.2px} .tag.online{background:rgba(0,156,154,.1);color:#007E7C;border:1px solid #009C9A;margin: 5px 0 7px 0;} .tag.offline{background:rgba(201,119,43,0.1);color:#8A541E;border:1px solid var(--accent)} .cover_all{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10;} .card .cost{ margin:0 auto 0 0; display: flex !important; flex-direction: column; justify-content: center; text-align: left;} .card .discount i{ top: 0 !important;} /* Table */ .table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)} .table th,.table td{padding:14px;border-bottom:1px solid #f1f5f9;text-align:right;font-size:14px} .table th{background:#f8fafc;color:#334155;} .avatar img{ width: 100%; width: 50px; height: 50px; border-radius: 50%; display: block; } /* Responsive */ @media (max-width:1200px){ .table thead{ display: none;} .table tr{ padding: 15px; border-bottom: 1px solid #ddd;} .table tr,.table td{ text-align: center; display: block;} .table td:last-child{ border: none;} .table td::before{ padding-left: 5px; color: var(--accent); font-weight: bold;} .table td:nth-child(1){ background: var(--turquoise); color: #fff; text-shadow: 0 0 1px #000; text-align: center; font-weight: bold;} .table td:nth-child(2):before{ content: "زمان:";} .table td:nth-child(3):before{ content: "وضعیت:";} .hero-wrap{grid-template-columns:1fr} .cols-3,.cols-4{grid-template-columns:1fr} } .ax_safhe_aval{ max-width: 495px; width: 100%;margin-bottom: 35px;} .img_asli{ padding: 1px; margin-right: auto;;height: 242px;background-color: #d6d9de;position: relative;} .asli_text_line_2{font-weight: bold;font-size: 20px;line-height: 25px;padding: 0 19px 0 0;} .asli_text{margin-right: 20px;padding: 0 8px;margin-top: 22px;border-radius: 15px;background-color: #d69a5f;margin-bottom: 10px;font-weight: bold;font-size: 14px;line-height: 27px;display: inline-block;} .txt_asli_2{background-color: none;} .asli_text_2{ margin-right: auto;;height: 178px;background-color: #00a694; position: relative;} .list_asli ,.list_asli2{margin: 10px auto;direction: rtl;font-size: 15px;font-family: 'sans-serif';line-height: 28px;} .list_asli .fa-angle-left::before{content: "\f104"; color: #d07821;position: relative;top: 3px;} .whatsapp_tel_asli{color: #007507;} .img_tel_asli{ color: white; padding:8px 20px 6px 20px;direction: ltr;text-align: center;width: inherit;left: 0;margin: auto;display: block;width: max-content; position: absolute;background-color: #11d0bc; border: 1px solid #038e7f; border-radius: 5px; right: 0;bottom: 21px;line-height: 18px;} .img_tel_asli:hover{background-color: #05ac9b;} .button_img_asli{color: white;padding: 6px;background-color: #d07821;display: inline-block;border-radius: 20px;font-size: 13px;line-height: 19px; position: relative;width: max-content;bottom: 30px;} .txt_asli_en{color: white; text-shadow: 1px 1px 5px black; font-weight: bold;direction: ltr;text-align: center;width:max-content;font-size: 23px;position: absolute;top: 70px; right: 0;left: 0;margin: auto;} .txt_asli_payin{padding: 10px 5px 10px 5px; background-color: #d07821; color: white;} .img_circle{ display: block; height: 150px;width: 150px;background-color: #bbb;border-radius: 100%;;border: 6px solid #d07821; margin: auto;} .img_asli_circle{position: absolute;left: 10px;z-index: 1;bottom: -83px;left: 3%;} .txt_asli_en i {font-size: 10px; color:#d07821 ;} /** slider **/ #indexSlider{ width: 500px; background: #eee; border-top: 4px solid var(--accent); border-bottom: 4px solid var(--accent); border-radius: 16px;} .InSlide{ position: relative;} #indexSlideBox{ position: relative; overflow: hidden;} #indexSlideBox .title{ margin-left: 10px; background: #444; position:absolute; right: 70px !important; top: 60px; text-align:center; opacity: 0; border-radius: 5px; transition: all 2s;} #indexSlideBox .title > div{ padding: 10px 15px; margin:auto; text-align:right; display:inline-block;} #indexSlideBox .title > div > div{ margin-bottom:6px; color:#fff; font-size:13px;} #indexSlideBox .title h1{ line-height:50px; color:#fff; font-size:35px; font-family:lalezar;} #indexSlideBox .title span{ width:100px; margin-top:20px; background:#e8bb31; color:#fff; padding:6px; text-shadow:1px 1px 0px rgba(99,99,99,0.8); display:inline-block; transition:all linear .2s; border-radius:5px; font-size:14px;} #indexSlideBox .title span: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%; margin: auto; 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;} .indexSlideArrow{ width: 60px; margin: auto; text-align: center; font-size: 46px; color: #fff; position: absolute; top: 0; bottom: 0; cursor: pointer; display:block; z-index:100;} .indexSlideArrow:hover i{ opacity:1;} .indexSlideArrow i{ width: 50px; height: 50px; line-height: 50px; background: #fff; color: #616161; font-size: 35px; margin: auto; position: absolute; top:0; bottom:0; left:0; right:0; opacity:0.3; transition:all linear 0.2s;} #indexLeftSlide{ left: 0px; } #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);} @media only screen and (min-width: 1201px){ #indexSlider,.indexSlideImg,#indexSlideBox{ height:500px;} } @media only screen and (max-width: 1200px){ #indexSlider{ margin-top: 40px;} #indexSlider{ width: 100% !important; max-width: 500px;} /* #indexSlider,.indexSlideImg,#indexSlideBox{ height:400px;} #indexSlideBox .title h1,#indexSlideBox .title > div > div{ padding:0 10px;}*/ .indexSlideArrow i{ display:none;} } @media only screen and (max-width: 550px){ /* #indexSlider,.indexSlideImg,#indexSlideBox{ height:250px;} #indexSlideBox .title h1{ font-size:30px; line-height:40px;} #indexLeftSlide{ width:30px; left: 0; } #indexRightSlide{ width:30px; right: 0; } #indexSlideBox .title a{ font-size:23px;}*/ } @media only screen and (max-width:1200px){ #banner > .flexbox{flex-direction: column;} #ban_box{width: 100% !important; order: -1;} } @media only screen and (max-width:580px){ .asli_text_2{height: auto; padding-top: 232px;} .img_asli{height: auto;padding-bottom: 54px;} .img_asli_circle{top: 239px;left:0; right: 0; margin: auto;width: max-content;} .txt_asli_en{top: 128px; right: 0;left: 0;margin: auto;bottom: inherit;} .img_tel_asli{padding: 8px;display: block; left: 0; right: 0; margin: auto; max-width: max-content;} } @media only screen and (max-width:650px){ #download .flexbox > div{ width: 100%; margin: 0 0 20px;} } .banner_titr{direction: ltr; left: 30px; position: absolute;font-family: sans-serif;font-weight: bold;font-size: 17px;} .banner_list{list-style-type:circle} .list_asli{padding: 18px 43px 5px 0;} .list_asli2{padding: 5px 35px 5px 0;} .t_law{margin: 80px 40px 20px 40px;} .law_txt{ margin-right: 42px;} .t_course{margin: 60px 0 25px;} .t_dore{text-align: start;} @media only screen and (max-width:650px){ .law_txt{margin-right: 4px !important;} .t_law{margin: 80px 0 0 25px;} } /** our courses **/ .gold_border{ border-color:#ffcb00 !important;} #courses .courseBox .imgBox .offer, .c_items .offer, .leftInfo .offer{ background:#f5c156; padding:2px 10px; color:#313131; position:absolute; right:3px; top:3px; z-index:20; font-size: 10px; font-family: samimbold; border-radius: 30px; line-height:18px;} .imgBox .offer i, .c_items .offer i, .leftInfo .offer i{color:#f7ff00;} .imgBox .offer2, .c_items .offer2, .leftInfo .offer2{background:#67f5c8 !important;} .box_img .c_type .c_icon, .c_items .c_icon, .leftInfo .c_icon{ font-size:8px; color:#19f750;} .box_img .c_type .s_icon, .c_items .s_icon, .leftInfo .s_icon{ font-size:4px; color:#19f750;} #main_course .flexbox > div > a:after, .each_course .box_img:after, #p_course .leftInfo:after{ content:""; background: linear-gradient(to bottom,rgba(0, 0, 0, 0.27) 0%,rgba(101,100,96,0) 35%,rgba(101,100,96,0) 45%,rgba(0, 0, 0, 0.8) 100%); position:absolute; top:0; left:0; right:0; bottom:0; display:block; z-index:10;} #main_course .course_time, .box_img .co_info, .leftInfo .course_time{ font-size: 12px; padding-left:100px; color:#fff; position:absolute; right:15px; bottom:6px; z-index:20; font-weight: bold;} #main_course .course_time span, .box_img .co_info span, .leftInfo .course_time span{ margin-left:20px; display:inline-block;} #main_course .course_time i, .box_img .co_info i, .leftInfo .course_time i{ padding-left:3px; color: #fd6464; font-size:8px;} .registerBox .cost_off .origin, .card .cost_off .origin{ text-decoration: line-through; color: gray; line-height: 15px;} .cost_off .discount, #courses .courseBox .courseInfo .cost .discount, .registerBox .discount,.card .discount{font-weight: bold; color: black; font-size: 14px;} .registerBox .discount i, .card .discount i{ width:20px; height:20px; line-height:20px; text-align:center; color:#bd2548; font-size:13px; border-radius:50%; display:inline-block; top: -3px; position:relative;} .imgBox .c_type .c_icon, .c_items .c_icon, .leftInfo .c_icon{ font-size:8px; color:#19f750;} .imgBox .c_type .s_icon, .c_items .s_icon, .leftInfo .s_icon{ font-size:4px; color:#19f750;} #main_course .courseInfo, .each_course .registerBox{ padding:13px; background:#f9f9f9; border-top:1px solid #f1f1f1;} #main_course .courseInfo .cost, .registerBox .cost, .card .cost{margin-top:5px; color:#727475; font-size:12px; display:inline-block;} .tourbox .more_bt, #main_course .courseInfo .more_bt{ font-weight: bold; margin:0 auto 0 0; background:#00a694; min-width: 120px; padding: 3px 10px; color:#FFF; border-color:#68b78e; display:inline-block; font-size: 14px;} .tourbox .more_bt:hover, #main_course .courseInfo .more_bt:hover{ opacity:0.8;} .back_to{ padding:0 0 3px; color:#fff; font-weight: bold; font-size:12px; text-shadow:1px 1px 1px #333; border-bottom:2px solid #d07821; display:inline-block; transition:all linear 0.2s;} .back_to:hover{ opacity:0.7;} .back_to span{ color: #d07821; padding-left: 4px; font-size: 20px; font-family: tahoma; font-weight: bold; font-style: normal; vertical-align: top; display:inline-block; position:relative; top:-2px;} .bg_white{ color:#333; text-shadow:none;} #courses .courseBox .imgBox .c_type, .c_items .c_type, .leftInfo .c_type{text-align:center; padding:0px 10px; color:#fff; position:absolute; left:3px; bottom:7px; text-shadow:1px 1px 1px #333; z-index:20; font-size:12px; font-family: samimbold;} #relate_course .flexbox > div{ width:Calc(25% - 15px); padding:3px; margin:0 0 20px 20px;} #relate_course .flexbox > div:last-child, #relate_course .flexbox > div:nth-child(4n){ margin-left:0;} #relate_course .flexbox > div > h3 a{ padding:15px; color: #000; font-family: "Samim"; font-size: 16px; line-height: 26px; text-align:center; display: block; transition: all linear 0.2s;} #relate_course .flexbox > div > h3 a:hover{ color:#d07821;} #relate_course .flexbox > div > h3 i{ color:#00a694; vertical-align:middle;} #relate_course .flexbox > div > a{ height:190px; background-size:cover !important; background-position:center !important; display:block; transition: all linear .2s;} #relate_course .flexbox > div > a:hover{ opacity: 0.7;} .flex_align{ align-items: stretch;} @media only screen and (max-width:1200px){ #relate_course .flexbox > div{ width:Calc(50% - 30px);} #relate_course .flexbox > div:nth-child(2n){ margin-left:0;} } @media only screen and (max-width:768px){ #relate_course .flexbox > div{ width:100%; margin-left:0 !important} } #instagram{ padding: 80px 0; color: #fff; background: url(images/background/insta_bg.jpg); background-position: center !important; background-size: cover !important; font-weight: bold; font-size: 35px; line-height: 60px; text-align: center;} #instagram i{ font-size: 80px; display: block;} #instagram div{ margin: 30px 0;} #instagram .more_bt{ min-width: 180px; margin: 0; display: inline-block;} /**courselist filtering **/ .chip{ line-height: 42px; border:1px solid rgba(255,255,255,.1); padding:0 12px; cursor:pointer; user-select:none} .chip.active{background:#d07821; color: white;} .filters{ display:flex; gap:10px; flex-wrap:wrap; padding: 20px 0; margin-bottom: 20px;} .text_dore{padding: 15px;color: #292929;font-size: 13px;line-height: 24px;min-height: 81px;} /* --- 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; /* پیش‌فرض */} #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;} #filters .chip:active{ transform: scale(.98); } #filters .chip.active{ background:#d07821;} /* پیام خالی: ورود/خروج نرم */ #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;} } @media only screen and (max-width: 768px){ #main_course .panel{ width: 100%;} } /**other activity**/ #other_act{ padding:60px 0 100px; background:#1f2630; color:#fff;} #other_act .title{ display:block !important; text-align:center !important;} #other_act .title span{ color:#d07821;} #co_logo{ max-width:1000px; margin:auto; justify-content:center; align-items:flex-start;} #co_logo > div{ width:45%; position:relative;} #co_logo .dv_border{ width:10%; position:relative; top:50px;} #co_logo .dv_border:after{ content:""; width:400px; height:2px; margin:auto; background:#d07821; position:absolute; top:0px; right:-148px; left:0; display:block;} #co_logo .dv_border span{ width:60px; background: #1f2630; color:#d07821; font-family:tahoma; font-size:50px; font-weight:bold; text-align:center; position:absolute; top:-16px; left:0; right:0; margin:auto; display:inline-block; z-index:10;} #co_logo .co_logo{ width:100px; height:100px; padding:20px; margin:auto auto 83px; background:#fff; position:relative; border-radius:50%; display:block;} #co_logo .co_logo img{ width:100%; display:block; transition:all linear 0.2s;} #co_logo > div:first-child .co_logo{ margin-right:auto;} #co_logo .text{ min-height:127px; padding:0 0 15px; color:#333; font-size:14px; text-align:justify;} #co_logo .whitebox{ padding:30px 15px 15px; background:#fff; position:relative; text-align:center;} #co_logo .whitebox:before{ content:""; height:60px; width:2px; margin:auto; background:#d07821; position:absolute; top:-60px; right:0; left:0; display:block;} #co_logo .whitebox h2 a{ margin-bottom:10px; font-weight: bold; font-size:20px; color:#333; display:block; transition:all linear 0.2s;} #co_logo .whitebox h2 a:hover{ color:#d07821;} #co_logo .site_pic{ display:block;} #co_logo .site_pic img{ width:100%; display:block;} #co_logo .site_pic:hover, #co_logo .co_logo img:hover{ opacity:0.7;} #co_logo .square1{ width:10px; height:10px; background:#f5c156; position:absolute; top:50px; left:0; transform:rotate(20deg);} #co_logo .square2{ width:15px; height:15px; background:#e6616b; position:absolute; top:135px; left:50px; transform:rotate(10deg);} #co_logo .square3{ width:20px; height:20px; background:#5cd3ad; position:absolute; top:70px; left:110px; transform:rotate(40deg);} #co_logo > div:first-child .square1{ top:inherit; bottom:-22px; left:inherit; right:0;} #co_logo > div:first-child .square2{ top:inherit; bottom:-80px; left:inherit; right:80px;} #co_logo > div:first-child .square3{ top:inherit; bottom:-30px; left:inherit; right:150px;} @media only screen and (max-width:1200px){ #co_logo{ display:block;} #co_logo > div{ width:100%;} #co_logo > div:first-child{ margin-bottom:60px;} #co_logo .co_logo{ margin:auto auto 70px;} #co_logo .whitebox:before{ right:0 !important; left:0 !important; margin:auto;} #co_logo .dv_border{ display:none;} #co_logo .text{ min-height:inherit;} } /*********************************************** course ****************************************************/ .trip_txt{ max-width:800px; padding-top:30px;} .course_title{ padding:15px 0 15px; font-weight: bold;; font-size:22px; line-height:43px; text-align: right;} .course_title .x_stl, #course_tb .x_stl{ color:#d07821; padding-left:4px; font-size:20px; vertical-align:middle;} .course_title .ex_txt{ font-family: sans-serif; font-size: 16px; line-height: 28px; font-weight: normal; display: inline-block;} #courseInfo{ margin:0 0 30px; background:#373737; color:#fff;} #courseInfo .rightInfo{ width:50%; padding:0 80px; font-size:14px; line-height:25px;} #courseInfo .rightInfo .txt{ font-size:17px; line-height:30px;} #courseInfo .rightInfo .items{ width:100%; border-bottom:1px dashed #666666; display:table;} #courseInfo .rightInfo .items i{padding-right: 10px; color:#d07821} #courseInfo .rightInfo .items:last-of-type { border: none;} #courseInfo .rightInfo .items > div{ padding:8px 10px; display:table-cell;} #courseInfo .rightInfo .items > div:first-child{ width:120px; font-weight: bold;; font-size:15px; border-left:1px dashed #666666;} #courseInfo .rightInfo .more_bt{ min-width: 100%; margin: 10px auto 10px 0; background: #00a694; color: #FFF; border-color: #68b78e; display: inline-block;} #courseInfo .rightInfo .more_bt:hover{ opacity:0.8;} #courseInfo .leftInfo{ min-height:470px; width:50%; background-position:center !important; background-size:cover !important; background-repeat:no-repeat !important; position:relative;} .leftInfo.gold_border{ border:3px solid #ffcb00 !important;} #show_video{ padding-left:80px; background:#373737; display:flex; display:-webkit-flex; display:-ms-flexbox; align-items:center;} #show_video video{ width:100%;} .all_cost .o_cost{ margin-left:15px; text-decoration:line-through; font-size:12px; color:#CACACA;} .all_cost .c_cost i{ vertical-align:middle; padding-right:5px !important;} @media only screen and (min-width:1600px){ #p_course #courseInfo .rightInfo{ padding-right:230px;} #show_video{ padding-left:230px;} } @media only screen and (min-width:1500px){ #p_course #courseInfo .rightInfo{ padding-right:180px;} #show_video{ padding-left:180px;} } @media only screen and (min-width:1400px){ #p_course #courseInfo .rightInfo{ padding-right:130px;} #show_video{ padding-left:130px;} } @media only screen and (max-width:1024px){ #courseInfo .rightInfo, #courseInfo .leftInfo{ width:100%;} #courseInfo .leftInfo{min-height: 250px; background-position:50% 20% !important;} #courseInfo .rightInfo{ padding:40px 80px 40px;} #show_video{ padding-left:0;} } @media only screen and (max-width:500px){ #courseInfo .rightInfo{ padding:40px 20px 40px;} #consult #courseInfo .rightInfo{ padding:80px 20px 40px;} #courseInfo .rightInfo .items > div:first-child{width: 99px;} } .navigate a{font-size: 12px; color: white;} .navigate a:hover{ color:#d07821;} .navigate i{padding: 0 7px; font-size: 10px; color:#d07821;} .commonBox{ margin:60px 0;} .commonBox:nth-of-type(odd){ flex-direction:row-reverse;} .commonBox > div{ width:100%; text-align:justify;} .commonBox > div:first-child{ padding:0 30px;} .commonBox > div:first-child img{ width:100%; max-width:500px; margin:auto; display:block;} #evidence .flexbox{ align-items:flex-start;} #evidence .evidance_pic{ margin-top: 20px;} #evidence .evidance_pic img{ max-width:500px; width:100%; display:block;} #evidence .text{ width:calc(80% - 25px);} #syllabus > div{ width:75%;} @media only screen and (max-width:1200px){ .commonBox{ padding-bottom:30px; border-bottom:2px solid #d07821;} #syllabus > div{ width:100%;} } @media only screen and (max-width:768px){ #evidence .evidance_pic, #evidence .text{ width:100%;} #evidence .text{ margin-bottom:15px;} } /* fix nav course */ .courseNav ul{ font-size:0; padding:0; text-align:center;} .courseNav ul li{width:20%; display:inline-block; position:relative; vertical-align:bottom; z-index:2 !important;} .courseNav ul li a{font-size:14px; padding:6px 0; font-weight: bold; color:#0F0F0F; border-bottom:3px solid #ddd; position:relative; display:inline-block; width:100%; text-align:center;} .courseNav ul li a.active{border-bottom:3px solid #d07821;} .courseNav ul li a.active::after{content:""; right: calc(50% - 5px); position:absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #4B0082; bottom:-7px; } .courseNav ul li a:hover{border-bottom:3px solid #d07821; cursor:pointer; transition:linear .2s;} .courseNav ul.addnav{ background:#fff; margin-top:0; position:fixed; top:0; right:0; left:0; font-size:0; text-align:center; z-index:99; transition:all 0.3s linear;} #spacing{ height:50px;} .anchor{ padding-top:40px;} .register a{ padding:3px; color:#fff !important; text-shadow: 1px 1px 1px #333;} .register a span{ width:125px; padding:4px; background:#00a694; font-weight: bold; display:inline-block; transition: linear .2s;} .register a span:hover{ opacity:0.8;} #FixNav{height: 51px;} @media only screen and (max-width:1200px){ #FixNav{ display:none;} } .sylbs{ padding:15px; justify-content: space-between; align-items:flex-start; background: rgba(233,233,233,1.00); border:1px solid rgba(220,220,220,1.00); margin-bottom: 7px;} .sylbs > div:nth-of-type(1){max-width: 240px;width: 20%; padding:0 0 0 15px; text-align: center;} .sylbs > div video{ width:100%; height:auto; vertical-align:middle;} .sylbs > div:nth-of-type(2){ width: 80%;display: flex; flex-direction: column;} .no_video > div{ width:100% !important; max-width:100% !important; text-align:right !important; margin-bottom:0 !important; padding:0 !important;} .info_crs{ width:100%; margin-bottom:7px;} .info_crs > p:first-child{ padding-left:30px; color: #333; font-weight: bold; font-size:18px; line-height:30px;} .info_crs > p:first-child i{color: #d07821; font-size: 23px; margin-left: 8px;} .info_crs > p:nth-child(2){margin-top: 20px;font-weight: bold;font-size: 20px;color: black;} .info_crs >div> p i{color: #518985; font-size: 23px; margin-left: 5px;} .info_crs >div> p {font-size: 13px;} .dtls_crs{ font-size:14px;} .dtls_crs i{height: 7px; width: 7px; display: inline-block;} .dtls_crs p i{color:#2A73CC; margin-left: 10px;} .dtls_crs a{display: block; margin:5px; color: #363b42; font-size: 13px;} .dtls_crs a:hover{color: #0275d8;} .pos_box{ position:relative;} .pos_box .continue{ padding:10px; position:absolute; top:10px; left:10px; font-size:18px; color:#d07821; display:none; cursor:pointer;} @media only screen and (max-width:768px){ .sylbs > div:nth-of-type(1){ width:100%; max-width:100%; padding:5px 0 5px; text-align:right;} .sylbs > div video{ max-width:210px;} .sylbs > div:nth-of-type(2){ width:100%;} .txt_flow .info_crs > p:first-child, .txt_flow .dtls_crs p{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .txt_flow .info_crs > p:first-child{ padding-left:30px;} .txt_flow .continue{ transform:rotate(180deg);} .pos_box .continue{ display:block;} .info_crs{ position:relative; z-index:5; cursor:pointer;} } /** account info **/ #acc_info{ max-width: 800px; margin: 30px auto; font-size: 15px; line-height: 28px;} #acc_info .col_txt{ color: #00a694;} #acc_info table{ margin: 10px 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{ width: inherit !important; padding: 4px 10px; background: #fff; line-height: 28px; text-align: center; border: 1px solid #eee;} #acc_info table td span { color: #333 !important;} .ltr{ direction: ltr; display: inline-block;} .bt_whats{ padding: 5px 10px; background: #0cc143; color: #fff; display: inline-block;} .bt_whats b{ color: #fff !important;} .bt_whats i{ padding-left: 5px; font-size: 20px; position: relative; top: 2px;} .what_mob{ display: none;} @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-weight: bold;} #acc_info table td:before{ padding-left: 4px; color: #00a694; font-weight: bold; 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: "صاحب حساب";} .what_mob{ display: none;} } .menu_shomare > .ltext {font-family: sans-serif;} #course_tb{ margin:70px auto;} #course_tb table{ width:100%; margin:auto; color:#000;} #course_tb table tr:first-child{ color:#d07821; font-weight: bold;;} #course_tb table tr:first-child td{ font-size:17px !important;} #course_tb table td{ padding:2px 5px; font-size:14px; border-bottom:1px solid #ddd; text-align:center;} #course_tb table td:nth-child(1){ width:100px;} #course_tb table td:nth-child(2){ width:20%;} #course_tb table td:nth-child(3){ width:20%;} #course_tb table td:nth-child(4){ text-align:right;} #course_tb table td a{ color:#1b1bf2; transition:all linear .2s;} #course_tb table td a:hover{ opacity:0.6;} #course_tb table .more_bt{ width:150px; min-width:150px; padding: 5px; margin:0 auto 0 0; color:#fff; font-size:14px; line-height:26px;} #course_tb table .more_bt:hover{ opacity:1;} @media only screen and (max-width:1200px){ #course_tb table tr, #course_tb table td{ width:100% !important; border-bottom:none; display:block;} #course_tb table tr:first-child{ display:none;} #course_tb table tr{ margin-bottom:40px;} #course_tb table td{ padding:5px;} #course_tb table td:nth-child(4){ text-align:center;} #course_tb table td:first-child{ color:#d07821; border-bottom:2px dashed #d07821;} #course_tb table .more_bt{ padding:8px 5px; margin:auto; min-width:100%;} } #element{ padding:0 0 50px; justify-content:center; align-items:stretch;} #element > div{ width:Calc(20% - 8px); padding:20px; margin:0 0 10px 10px; background:#eee;} #element > div:last-child{ margin-left:0;} #element div > div:first-child{ color:#333; font-weight: bold; font-size:16px; line-height:30px;} #element div > div:last-child{ font-size:13px;} #element > div i{ margin-bottom:10px; color:#d07821; font-size:20px;} @media only screen and (max-width:1200px){ #element > div{ width:Calc(50% - 5px);} #element > div:nth-child(2n){ margin-left:0;} } @media only screen and (max-width:650px){ #element > div{ width:100%; max-width:350px; margin:0 0 20px !important; display:flex; display:-webkit-flex; display:-ms-flexbox; align-items:center;} #element > div i{ margin:0 0 0 30px; font-size:35px;} } /*********************************************** manshor ****************************************************/ #rules{ padding-bottom:100px;} #rules .main{ max-width:1000px;} #rules .title .titleBox h2{ margin-top:50px; font-size:29px;} .blogtxt{ font-size:15px; line-height:27px;} .blogtxt h3{ margin:55px 0 15px; background:rgba(0, 0, 0, 0.1) !important; color:rgba(22,36,70,1.00) !important; font-weight: bold;} .blogtxt a{ color:#1b1bf2; transition:all linear 0.2s;} .blogtxt a:hover{ opacity:0.7;} .blogtxt ul, .main_destiny ol{ padding-right:30px;} .blogtxt img{ max-width:100%; height:auto; margin:10px 0; display:block;} .blogtxt .example1{ font-size:13px; color:#5E5E5E; text-align:center; display:block; position:relative; bottom:5px;} .blogtxt table{ max-width:100%;} @media only screen and (max-width:1200px){ #rules .main{ max-width:720px; margin:auto;} } @media only screen and (max-width:768px){ #rules .main{ max-width:630px;} } @media only screen and (max-width: 650px){ #rules .main{max-width:480px;} } /** 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 {position:absolute;top:0;left:0;width:100%; height:100%; border:none;} /********************************************complaint ****************************************/ #contact .c_title{ padding:20px 0; color:#333; font-weight: bold; line-height: 24px; font-size: 18px;} #contact .c_title i{ color:#d07821; vertical-align:middle;} #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,#contact form ul .button{ width:100%; height:40px; padding:0 5px; font-family: 'sans-serif'; font-size:14px; color:#333; border:1px solid #ccc; vertical-align:bottom;} #contact form #part_two li{ width:33%; display:inline-block; vertical-align:top;} #contact form #part_two li:nth-child(2){ margin:0 0.5%; text-align:center;} #contact form #part_two li:nth-child(2) iframe{ width:304px; 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: 'sans-serif'; font-size:15px; border:1px solid #ccc; resize:none;} #contact form #part_two .button{ margin-top:35px; background:#d07821; color:#fff; font-size:17px; border:1px solid #d07821; border-radius:0; transition:all linear 0.3s;} #contact form #part_two .button:hover{ background:#E75655;} ::-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; } @media only screen and (max-width:940px){ #contact{ text-align:center;} #contact form ul, #cooperation ul{ margin:0;} #contact form #part_one li, #cooperation ul:first-child li{ width:100%; margin-bottom:7px;} #contact form #part_one li:nth-child(2), #cooperation ul:first-child li:nth-child(2), #cooperation ul:nth-child(2) li:nth-child(2){ margin:0 0 7px 0;} #contact form #part_one, #contact form #part_two, #cooperation{ max-width:450px; margin:auto; text-align:center;} #contact form #part_two li, #cooperation ul:nth-child(2) li{ width:100%; margin-bottom:7px;} #contact form #part_two li:nth-child(2), cooperation ul:nth-child(2) li:nth-child(2){ margin:0 0 7px 0 !important;} #contact form #part_two li:nth-child(2) iframe, #cooperation ul:nth-child(2) li:nth-child(2) iframe{ margin:0; position:static; vertical-align:inherit;} #contact form #part_two .button, #cooperation input[type="submit"]{ margin-top:0;} .g-recaptcha > div{ margin:auto;} } /************************** about us ***************************/ .title .titleBox{ z-index: 2;position: relative;} .title h2.titleBox{ font-size:23px;} .title .titleBox span{ color: #00a694;} .title .titleBox:after{ content:""; position: absolute; bottom: 10px; left: 0; right: 0; height: 10px; background:rgba(0, 0, 0, 0.12); z-index: 1;} .h_title{ margin-bottom:30px; color:rgba(22,36,70,1.00); font-weight: bold; font-size:40px; line-height:50px; position:relative; display: inline-block;} .h_title span{ position:relative; z-index:2;} .h_title:after{ height:14px; background:rgba(0, 0, 0, 0.1); bottom:3px;} #p_about, #rules{ background:rgba(193, 206, 204, 0.49); color:#000;} #p_about .title .titleBox h3, #rules .title .titleBox h2{ color:rgba(22,36,70,1.00); font-size:29px; position:relative; z-index:2;} #p_about .title .titleBox::after, #rules .title .titleBox::after{ bottom:10px; background:rgba(0, 0, 0, 0.1);} #p_about .title, #rules .title{ text-align:right; display:inline-block;} /*#p_about video{ max-width:400px; width:100%;}*/ #managers{ padding:50px 0 80px 0;} #managers .main{ margin:auto;} #managers .flexbox{ padding:20px; margin-bottom:20px; background:#fff; color:#000; border-top: 4px solid var(--accent); border-radius: 16px; align-items:flex-start;} #managers .flexbox > div a{ color:rgba(0,36,255,1.00);} #managers .flexbox > div a:hover{ opacity:.7;} #managers .flexbox > div .name{ padding:0 0 10px; font-weight: bold;; font-size:17px;} #managers .flexbox > div .text{ font-size:15px; text-align:justify;} #managers .resume{ width:140px; padding:8px 5px; margin:10px 0 0; background:#d07821; color:#fff !important; text-shadow: 1px 1px 1px #333; text-align:center; display:block;} #managers .resume i{ margin-left:5px; font-size:20px;} @media only screen and (max-width:1200px){ #p_about .main{ margin: auto;} #managers .main{ max-width:720px;} } @media only screen and (max-width:768px){ #managers .main{ max-width:630px;} } @media only screen and (max-width: 650px){ #managers .main{max-width:480px;} } /** team **/ #our_team{ padding:0 0 100px 0;} #our_team .title{ margin-bottom:5px;} #our_team .teamtxt{ margin-bottom:15px;} #co_team{ background:#d07821;} #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; border-left:1px solid #e1e7e6; } #hamm_imgbox > div:nth-last-child(2){ border-left:none;} .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;} .b_sales{ background:#d03939; border-color:#ff5757;} .b_financ{ background:#aeaeae; border-color:#d9d9d9;} .b_adviser{ background:#96b981; border-color:#c5e1b4;} .b_formula{ background:#257343; border-color:#257343;} @media only screen and (max-width:900px){ .b_sales{ min-height:150px;} } .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 #222; 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; } .hamm_info{ width: 100%; height: 100%; display: none; } .hamm_infotxt{ padding: 20px; line-height: 30px; } .hamm_infotxt div{ padding-right: 30px; margin-bottom: 10px; } .hamm_infotxt div:nth-child(1){ color: #fff; font-size: 17px; font-weight: bold;; } .hamm_infotxt div:nth-child(2){ color: #88867e; font-size: 15px; } .hamm_infotxt div:nth-child(3), .part div:nth-child(2){ margin-top: 25px; font-size: 15px; font-family: sans-serif; text-align: justify; text-justify: auto; color: #fff; } .hamm_infotxt div:nth-child(4){ margin-top: 35px; color: #FFFFFF; font-size: 15px; font-family: sans-serif; text-align: justify; text-justify: auto; } .hamm_infotxt div:nth-child(4) i{ margin-left: 10px; color: #00a694; font-size: 20px; display: inline-block; position: relative; top: 3px; } #hamm_infoclose{ position: absolute; z-index: 2; left: 30px; top: 30px; cursor: pointer; color: #fff; font-size: 30px; } #about_txt { max-width: 900px; padding: 50px 10px !important; margin: auto !important; text-align: justify; text-justify: auto; font-size: 18px; color:#000; font-family: sans-serif !important; } #about_txt a:hover{ color: #444444 !important; } #about_txt .history{ padding-right:20px; margin:30px 0; border-right:2px dotted #00a694;} #about_txt .history .date_circle{ padding:10px; margin-bottom:20px; background:#00a694; color:#fff; position:relative; border-radius:100%; display:inline-block;} #about_txt .history .date_circle:before{ content:""; height:2px; width:68px; position:absolute; top:0px; right:-20px; border-top:2px dotted #00a694; display:block;} .socials a { display:inline-block; padding:3px; font-size:24px; transition:linear .2s;} .socials a:hover, .loglink a:hover {opacity:.5;} .socials a.twt{color:#00c4f8;} .socials a.insta{color:#d83060;} .socials a.linkd{color:#0077b5;} .socials a.file_txt{color:#f0a20c; font-size:20px !important;} .socials a.file_txt2{color:#fcd06f; font-size:20px !important;} .loglink a{ margin-bottom:4px; display:inline-block; padding:3px; font-size:22px; transition:linear .2s;} .loglink a{color:#FFFFFF; font-size:14px; display:inline-block; border:1px solid #00a694; border-radius:5px; padding:6px 10px;} .loglink i{color:#00a694; 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:50%; } .hamm_teamimg{ border-top:4px solid #d07821;} .socials a{ font-size:34px; margin-left:10px;} } @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;} } #story, #our_values{ padding-bottom:100px;} #story .main, #our_values .main{ max-width:1000px;} #our_values .text h3{ background:rgba(0, 0, 0, 0.1) !important; color:rgba(22,36,70,1.00) !important;} @media only screen and (max-width:1200px){ #story .main, #our_values .main{ max-width:720px;} } @media only screen and (max-width:768px){ #story .main, #our_values .main{ max-width:630px;} } @media only screen and (max-width: 650px){ #story .main, #our_values .main{max-width:480px;} } /**************** Services *****************/ #top_line{ background:#373737;} #top_line ul{ padding:0; margin:0; font-size:0;} #top_line ul li{ line-height:30px; display:inline-block;} #top_line ul li a{ padding:5px 20px 0; color:#fff; font-size:12px; display:inline-block; transition: all linear 0.2s;} #top_line ul li a:hover, #top_line ul li a.active{ color:#ee6366;} #top_line ul li.serv_active{ min-width:75px; margin-left:30px; position:relative; background:#00a694; text-shadow:1px 1px 1px #333; border-radius:2px 0 0 2px;} #top_line ul li.serv_active a{ font-size:14px;} #top_line ul li.serv_active a:hover{ color:#fff;} #top_line ul li.serv_active:after{ content:''; width:0; height:0; position:absolute; left:-15px; border-top: 20px solid transparent; border-right: 16px solid #00a694; border-bottom: 19px solid transparent; z-index:100;} #banner_serv{ background-size:cover !important; background:#00a694; background-position:50% 40% !important; color:#fff; position:relative; text-shadow: 1px 1px 1px #000;} #banner_serv.nopic{ background:#00a694;} #banner_serv .ser_title{ margin-top: 20px; font-size:25px; color:#BBB8B8;} #banner_serv .ser_title a, #banner_serv .ser_title h1{ display: inline-block; color:#fff; font-weight: bold;font-size: 32px; text-align: right; line-height: 55px;} #banner_serv .ser_title h1{ color:#BBB8B8;} #banner_serv .ser_txt{ line-height:28px; font-size:15px;} #serv_box{ padding: 0 15px 20px 15px;} #serv_box:after{ content:""; clear:both; display:block;} #serv_box #right{ width:75%; padding-left:40px; float:right;} #serv_box #right .each_box{ padding:20px 0; color:#000; border-bottom:1px solid #DDD;} #serv_box #right .each_box > a{ position: relative; display: block;} /***#serv_box #right .each_box:nth-last-of-type(1){ border:none;}***/ #serv_box #right img{ max-width:100%; display:block;} #serv_box #right .titr{ padding: 50px 0 10px 0; color:#000; display:block; transition:all linear .2s;} #serv_box #right .titr:hover{ color:#00a694;} #serv_box #right h2{ line-height:38px; font-weight: bold; font-size:23px;} #serv_box #right .more{ text-align:left;} #serv_box #right .more a, #about .more a, .button{ width:140px; margin-top:20px; line-height:50px; background:#d07821; color:#fff; font-size:15px; text-shadow:1px 1px 1px #333; text-align:center; border:none; display:inline-block; transition:all linear.2s;} #serv_box #right .more a:hover, #about .more a:hover, .button:hover{ background:#ad5f10;} .little_pic{ position: absolute; right: 0; bottom: -35px; color: #6c6161; font-size: 13px; align-items: flex-end;} .little_pic img{ width: 75px; height: 75px; object-fit: cover; border: 5px solid #fff; display: block;} .little_pic div{ padding: 0 10px 5px 0;} #paging{ padding:20px 0; margin:0; font-size:0;} #paging li{ width:35px; height:35px; margin:0 0 5px 5px; line-height:37px; background:#eee; font-weight: bold; font-size:15px; text-align:center; border-radius:2px; display:inline-block; transition:all linear .2s;} #paging li:hover{ background:#ccc;} #paging li i{ vertical-align:middle;} #paging li a{ color:#000; display:block;} #paging li.p_active{ background:#FBB5B6} .news_info{ padding-top:10px; font-size:0;} .news_info span{ color:#666; font-size:13px;} .news_info span a{ color:#666; transition:all linear 0.2s;} .news_info span a:hover{ color:#00a694;} .news_info span:after{ content:"/"; padding:0 5px; color:#00a694; display:inline-block;} .news_info span:last-child:after{ content:"";} #serv_box #left{ width:25%; padding-top:20px; float:left;} #serv_box #left form{ width:100%; margin-bottom:40px; height:35px; opacity:1; visibility:visible;} #serv_box #left form i{ font-size:16px; vertical-align:middle;} .tag_head{ padding-bottom:10px; margin-bottom:20px; color:#000; font-size:18px; font-weight: bold; border-bottom:3px solid #d07821;;} #tags{ font-size: 0;} #tags a{ min-width:100px; padding:5px 10px 5px 17px; margin: 4px 0 4px 8px; background:#f3f3f3; color:#000; position: relative; font-size:14px; border-right:3px solid #d07821; display:inline-block; transition:all linear .2s;} #tags a:hover{ border-color:#00a694; opacity:0.7;} #tags a span{ font-size:13px; color:#00a694;} #tags a.active{ background:#D1E6FD; border-right: 3px solid #00a694;} #tags a:after{ content: "\f053"; font-family: "Font Awesome\ 5 Free"; font-weight: 900; font-size: 11px; position: absolute; left: 5px; top: 5px; color: #00a694; display: block;} #news_tags{ padding:70px 0 75px; text-align:right;} #news_tags .tag_head{ display:inline-block;} #news_tags .main{ max-width:850px; padding:0 20px;} @media only screen and (max-width: 900px){ #serv_box #right, #serv_box #left{ width:100%; float:none;} #serv_box #right{ padding-left:0;} #serv_box #right #paging{ padding-bottom:40px; text-align:center; border-bottom:1px solid #ddd;} #serv_box #left{ max-width:400px; padding-top:40px; margin:auto;} } @media only screen and (max-width: 600px){ #serv_box #right .short_txt{ text-align:justify;} } /**************** News *****************/ #related{ padding:30px 0; background:#eee;} #related #fourbox{ margin:30px 0 10px; border:none;} #news{ max-width:850px; margin:auto; padding:30px 20px 50px;} #news .navigate{ padding:0; list-style:none;} #news .navigate, #news .navigate a{ color:#333;} #news .navigate a:hover{ color: #d07821;} #news img, #main_pic img{ max-width:100%; height:auto; margin:10px auto; display:block;} #news .rutitr{ color:#666; font-style: italic;} #news h1{ padding:5px 0 10px 0; color:#000; font-weight: bold; font-size:29px; line-height:50px;} #link_news{ margin-bottom:10px; color:#b3b3b3; font-size:12px; font-weight: bold;;} #link_news a{ margin-left:13px; color:#b3b3b3; display:inline-block;} #link_news a:hover{ color:#00a694;} #link_news a i, #link_news > span i{ margin-left:3px;} #link_news > span{ margin-left:13px; display:inline-block;} #news .short{ padding-bottom:15px; color:#000; font-style:italic; border-bottom:1px solid #ddd;} #newsbody{ padding-top:20px; color:#000;} #newsbody p, #about_course .text p, .trip_txt p, #newsbody li, .blogtxt li, #our_values .text li, #about_course li, .trip_txt li{ margin-bottom:20px;} #newsbody h3, .blogtxt h3, #our_values .text h3, #about_course h3, .trip_txt h3, #explain_box h3{ padding: 5px 10px 5px; margin:50px 0 15px; background: #f9f9f9; color:#000; line-height:35px; font-weight: bold; font-size:21px; border-right: 3px solid #00a694; display:inline-block;} #newsbody img, #about_course img, .trip_txt img, #explain_box img{ max-width:100%; height:auto; margin:10px auto; display: block;} #newsbody video, #explain_box video{ width: 100%; margin: 10px auto; display: block;} #newsbody a, #about_course a, .trip_txt a, #explain_box a, .t_seo a{ color:#0A0ADD; transition:all linear .2s;} #newsbody a:hover, #about_course a:hover, .trip_txt a:hover, #explain_box a:hover, .t_seo a:hover{ opacity: 0.7;} #newsbody .example1, #about_course .example1, .trip_txt .example1, #explain_box .example1{ margin-bottom:10px; color: #888888; position: relative; bottom: 10px; font-size: 13px; font-style: italic; text-align: center; display: block;} #newsbody table, #about_course table, .trip_txt table, #explain_box table{ width:100%; margin:10px 0; text-align:center;} #newsbody table tr td, #about_course table tr td, .trip_txt table tr td, #explain_box table tr td{ padding:3px 5px; background:#F8F8F8; border:1px solid #fff; transition:all linear .2s;} #newsbody table tr:nth-child(2n-1) td, #about_course table tr:nth-child(2n-1) td, .trip_txt table tr:nth-child(2n-1) td, #explain_box table tr:nth-child(2n-1) td{ background:#eee; border-colr:#fff;} #newsbody table tr:first-child td, #about_course table tr:first-child td, .trip_txt table tr:first-child td, #explain_box table tr:first-child td{ background:#373737; color:#fff; font-size:16px;} #newsbody h2, #about_course h2{ padding: 5px 10px 5px; margin: 50px 0 15px; background: #f9f9f9; color: #000; line-height: 35px; font-weight: bold; font-size: 23px; display: inline-block; border: 1px dashed #ddd;} #explain_box{ padding: 15px 20px; margin: 0 0 20px; background: #f7f7f7; text-align: justify; border: 1px solid #ddd;} #explain_box h1{ font-weight: bold; font-size: 22px; line-height: 32px; margin-bottom: 15px;} #explain_box h1 i{ color: #d07821; vertical-align: middle; padding-left: 5px;} #explain_box ul li, #explain_box ol li{ margin-bottom: 10px;} @media only screen and (max-width: 1200px) { #newsbody h3, .blogtxt h3, #our_values .text h3, #about_course h3, .trip_txt h3{ margin:35px 0 15px;} } /***** responsive table code 216,192 *****/ @media only screen and (max-width: 768px) { .tb_scroll > div{ overflow-x: scroll; overflow-y: visible;} .tb_scroll > div table{ margin-top:10px;} .tb_scroll > div table td{ white-space:nowrap;} .tb_scroll::before{ content:'جدول را به راست و چپ بکشید.' url("images/icon/swipe-helper.gif"); padding-bottom:10px; display: block; text-align: center; font-size: 16px; border:1px solid #E2E2E2; color:#333; border-radius: 5px; margin-top: 10px; } } /***** responsive table code 216,192 *****/ #newsbody #label{ margin-top:20px; font-size:0;} #newsbody #label a{ padding:2px 8px; margin:0 0 4px 4px; background:#eee; color:#333; font-size:13px; border-radius:2px; display:inline-block; transition:all linear .2s;} #newsbody #label a:hover{ background:#ddd;} #newsbody #label i{ margin-left:10px; font-size:16px; display:inline-block;} .search_paging{ padding-top:20px;} .search_paging span{ color:#a2a2a2;} .search_paging a{ color:#00a694; transition:all linear .2s;} .search_paging a:hover{ opacity:0.6;} .search_paging i{ vertical-align:middle;} #p_service .search_paging{ padding-top:10px;} @media only screen and (max-width: 900px){ .search_paging{ text-align:center;} } @media only screen and (max-width: 768px){ #news{ font-size:17px; line-height:32px;} #newsbody h3{ font-size:19px; line-height:35px;} #newsbody #label a, #newsbody .example1{ font-size:15px;} } /*** fehreste blog ***/ .top_list{ margin: 20px 0;} .top_list ul{ padding-right: 20px; list-style: square !important;} .top_list ul li{ padding-right: 0 !important; margin-bottom: 5px !important;} .top_list ul ul li{ padding-right: 3px !important;} .top_list ul ul li::marker { content: " □ "; font-size: 12px; color: #d07821} .top_list ul li::before{ display: none;} .top_list ul li a{ color: #08499c;} .top_list ul li a:hover,.top_list ul li::marker{ color: #d07821 !important; } .top_list ul li::marker{ font-size: 17px;} /*Quote*/ .n_quote{clear:both;} .n_quote img{margin:5px !important; width:20px;} .n_quote img:last-child{float:left;} .n_quote div{ width:85%; margin:auto; padding:15px; direction: ltr; text-align: justify;} .n_quote div p{ margin-bottom:0 !important; max-width: max-content;} .quote_left{position: absolute;left: -14px;} .quote_right{position: absolute;bottom: 16%;right: -5%;} @media only screen and (max-width:600px){ .n_quote div{ width:98%;} } /*/Quote*/ /** rating **/ .stars{ max-width:300px; width:100%; min-height:100px; margin:5px 0 20px; text-align:left;} .stars img{width:40px; height:auto; float:left;} .stars i{color:#F7BB06 !important; font-size:18px; vertical-align:middle;} .stars i.fgray{ color: #ddd !important;} .stars i.fa-star-half{ width: 19px;} .stars i.fa-star-half:after{ content: "\f005"; font-family:"Font Awesome\ 5 Free"; font-weight:900; margin: auto; color: #ddd; position: relative; left: -21px; z-index: 5;} .stars i.fa-star-half:before{ position: relative; z-index: 10;} .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;} /****** Style Star Rating Widget *****/ .rating { border: none; padding:0; margin:7px 0 0; text-align:center; direction:ltr; display:inline-block; } .rating > input { display: none; } .rating > label:before { font-size: 30px; display: inline-block; font-family:"Font Awesome\ 5 Free"; font-weight:900; } .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; font-family:"Font Awesome\ 5 Free"; font-weight:900; } .rating > label { color: #d07821; cursor:pointer; display:inline-block; } /***** 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: #FFD700; } /* hover previous stars in list */ .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: #FFED85; } #wantstar{ padding:0 0 3px; border:none; border-bottom:3px solid #fc3; font-weight: bold;; font-size:13px; transition:linear .2s; cursor:pointer;} #wantstar:hover{background:transparent; opacity:0.6;} #givestar{transition: visibility 0s, opacity 0s linear;} #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;} #givestar button:hover{background:#F3B600; cursor:pointer;} .results{ margin-top:10px; font-size:15px; background: #00a694; padding:8px 20px; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #333;} .results i{ margin-left:4px; color:#fff;} .rate_box{ padding:8px 15px; background:#eee;} .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;} /** end rating **/ /*writer*/ #matend_txt{ margin:20px 0;} #matend_txt p{ margin-bottom:0;} .writer{display:table; width:100%; background:#eee; padding:20px; color:#000; border-right:3px solid #00a694;} .writer > a{font-size:18px; display:inline-block; padding-bottom:5px;} .writer p{font-size:13px; margin:0; line-height:26px;} .writer div:after{content:""; clear:both; display:block;} .writer div:first-child{width:145px; display:table-cell; padding: 0 0 0 20px;} .writer div:first-child img{width:100%; margin:0 !important; border-left:1px dashed #B5B5B5; padding-left:20px;} .writer div:last-child{display:table-cell; vertical-align:top; width:Calc(100% - 145px);} .end{ margin-top: 7px; margin-bottom:0; line-height:23px; font-size:12px; } @media only screen and (max-width:768px){ .writer{ display:block;} .writer div:first-child{width:100%; padding:0 0 15px; border-bottom:1px dashed #B5B5B5; display:block;} .writer div:first-child img{ max-width:145px !important; border:none;} .writer div:last-child{ width:100%;} } /***** comment ********/ #matlab_comm{ padding: 50px 0px; background:#eee; } #matlab_comm .container{ padding: 0px 30px; padding-top:20px; max-width:850px; margin:auto; } .comment{ width: 95%; margin-bottom: 50px; line-height: 15px; position: relative; } #comment_header{ margin-bottom: 30px; color: #000; font-weight: bold; font-size: 29px; line-height: 55px; } .comm_img{ margin-left: 10px; font-size: 32px; color: #fb8686; text-align: center; position: absolute; } .matlab_kh{ padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #cccccc; color: #000; font-size: 15px; line-height:26px; font-style: italic; text-align: justify; text-justify: auto; } @media only screen and (max-width:768px){ .matlab_body, .matlab_kh, .matlab_box .matlab_body, .ser_link div{ font-size:18px; line-height:32px;} } .comm_img i{ width: 28px; background:#00a694; line-height:28px; font-size:11px; color:#fff; position:relative; right: 10px; top: 15px; bottom: 5px; border-radius:50%; } .comment_info{ padding: 5px 0px; color: #aaaaaa; font-family: 'sans-serif'; 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{ background: #e7e7e7; border: 1px dashed #999; padding: 15px 50px 15px 15px; } .comment_txt{ padding: 5px 0px; font-family: 'sans-serif'; font-size: 15px; line-height: 28px; text-align: justify; text-justify: auto; color:#000; } .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 .x_style{ padding : 5px; display: inline-block; font-family: tahoma; font-weight: bold;} .comment_ans .comm_img i{ color:#00a694; 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: #00a694; } /******* 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: 'sans-serif';} #cancel_reply{ padding: 0px 10px 0px 0px; color: #00a694; 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: 'sans-serif'; } #comment_form label i{ margin-right: 3px; font-size: 9px; color: #00a694; 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: #fff; border: 1px solid #D5D5DD; border-radius:5px; font-family: 'sans-serif'; font-size: 15px; 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: #fff; border: 1px solid #D5D5DD; border-radius:5px; font-family: 'sans-serif'; font-size:15px; 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: 0px 0px 5px #00a694; border-color:#00a694; } #comment_form .ltext{ font-family: sans-serif !important; } #matcom_sub{ text-align: right; padding-bottom: 25px; } #matcom_sub #pasokh_sub{ display: none; } #NatijeSubmit{ color:#268e22;} @media only screen and (max-width:1000px){ /************ responsive matlab 1000 px *****************/ #matlab_comm .container{ padding:20px 30px 0; } } @media only screen and (max-width:700px){ /************ responsive matlab 700 px *****************/ #comment_form .comf_float, #matcom_sub .button{ 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; top: 20px;} .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 *****************/ #matlab_comm .container{ padding: 20px 20px; } .comment_info{ line-height: 25px; } .comment_ans .comm_img i{ top: 15px; bottom:0;} } /*ghabli badi*/ #matlab_prenext{ margin: 20px 0; } #matlab_prenext > div{ background:#eee; margin-bottom:5px;} #matlab_prenextbox1{ width: 100%; position: relative; overflow: hidden; border-right:3px solid #d07821; } #matlab_prenextbox2{ width: 100%; position: relative; overflow: hidden; text-align:left; border-left:3px solid #d07821; } #matlab_prenext a{ padding: 8px 10px; line-height: 27px; display: block; color: #000; font-size: 15px; transition: all .3s linear; position: relative; } #matlab_prenext a b{ color:#333;} #matlab_prenext a i{ margin: 0px 6px; vertical-align:middle; font-size:17px; color:#00a694; } #relate_course{ padding:80px 0 20px;} #relate_course .flexbox > div > h3 i{ color:#00a694;} #relate_course .flexbox > div{ width:Calc(50% - 10px);} #relate_course .flexbox > div:nth-child(2n){ margin-left:0;} @media only screen and (max-width:768px){ #relate_course .flexbox > div{ width:100%;} } /** news on mobile **/ .dis_none{ display: none;} #main_pic{ max-width: 850px; margin: auto; padding: 0 20px 0;} .padbt0{ padding-bottom: 0 !important;} .padtop0{ padding-top: 0 !important;} #newsbody ul{ list-style: none;} #newsbody ul li{ padding-right: 15px; position: relative;} #newsbody ul li:before{ content: "\f0c8"; margin-left: 8px; color: #d07821; position: absolute; right: 0; top: 0; font-size: 8px; font-family: "Font Awesome\ 5 Free"; font-weight: 900; vertical-align: middle;} @media only screen and (max-width:768px){ .mob_none{ display: none;} .mob_show{ display: block;} #main_pic{ padding: 0;} .w_write{ margin: 20px 0; align-items: stretch; display: flex;} .w_write img{ width: 70px; height: 70px !important; object-fit: cover; margin: 0 !important;} .w_write .w_name{ display: flex; align-items: center;} .w_write .w_name > div{ padding-right: 10px; margin-right: 10px; font-weight: bold; font-size: 14px; line-height: 25px; border-right: 1px solid #eee;} .w_name #date_shamsi{ font-size: 13px; color: #b3b3b3;} #newsbody ul{ list-style: none;} #newsbody ul li{ position: relative;} #newsbody ul li:before{ content: "\f0c8"; margin-left: 8px; color: #d07821; font-size: 8px; font-family: "Font Awesome\ 5 Free"; font-weight: 900; vertical-align: middle;} } /************************************************************** courselist ***********************************************************/ /****sort****/ .between2{height:3px; background:#00a694;} .glance .title, .trips .title{ padding-bottom:15px; padding-top:20px; transition:linear .2s; margin:auto; text-align:right; font-size:29px; color:#333333; font-weight: bold; line-height:55px; } .glance .title i{color:#00a694; transition:linear .2s;} .introduce .navigator a, #banner_serv .navigator a{color:#fff; transition:linear .2s;} .navigator{font-size:12px; padding-top:5px;} .introduce .navigator, #banner_serv .navigator{color:#FFF; font-size:12px;} .navigator a{color:#d07821; transition:linear .2s;} .navigator{color:#666666; transition:linear .2s;} .introduce .navigator a:hover{color:#d07821;} .navigator a:hover{color:#d07821 !important;} .navigator i{color:#d07821; padding:0 3px; font-size:10px;} .introduce{ position:relative; overflow:hidden; background:#00a694; } .introduce > div{ padding:20px 40px 25px 15px; color:#FFF; text-align:justify; margin:auto !important;} #banner_serv .main{ padding: 20px 40px 25px 15px; color: #FFF; text-align: justify; margin: auto !important;} .introduce div h1.b_title{ margin-top: 20px; display:block; font-weight: bold; font-size:29px; text-align:right; line-height:55px;} .glance{}/*margin:20px auto 20px;*/ .glance .rows{float:right; width:72.3%;} .glance .rows100, .glance .rows100p{width:100% !important;} .glance .rows100 .leftcontent .content span:last-child{width:36.1% !important;} .glance .rows100 .head span:last-child{width:26.2% !important;} /*For VIsa Tourlist*/ .glance .rows100visa .leftcontent .content span:last-child{width:100% !important; text-align:right;} .glance .rows100visa .head span:last-child{width:71.7% !important;} .glance .rows .each{ border:1px solid #FFFFFF; border-bottom:1px dashed #999; transition:linear .2s;} .glance .rows .each:after, .glance:after{display:block; content:""; clear:both;} .glance .rows .each:hover{border:1px dashed #999; border-top:1px solid #FFF; background:#F7F7F7;} .glance .rows .head{ font-weight: bold;; font-size:0;} .glance .rows .head span{ display:inline-block; width:10%; background:#EFEFEF; margin:0 0 0 0.25%; padding:5px; text-align:center; color:#242424; font-size:14px; border:1px solid #CCC; } .glance .rows .head span:first-child{width:28%; text-align:right;} .glance .rows .head span:nth-child(2){width:35%; text-align:right;} .glance .rows .head span:last-child{width:16%; margin:0;} .glance .calendar{float:left; background:#EFEFEF; padding:10px;} .glance .rows .righttitle{float:right; width:28%; padding:3px;} .glance .rows .righttitle a{display:block;} .glance .rows .righttitle a{color:#069; transition:linear .2s;} .glance .rows .righttitle a:hover{color:#396;} .mode{font-size:0; color:#FFF; position:relative;} .mode a{display:inline-block; margin-left:5px; width:50px; height:35px; font-size:12px; padding:5px; border-top:none; background:#00a694; text-align:center;} .notactive{background:#CDCDCD !important; transition:all .2s linear;} .notactive:hover{background:#97D0B0 !important;} .rows .grouplist{padding:7px; background:#00a694; margin-bottom:3px; border-radius:3px; color:#FFF; text-shadow: 1px 1px 1px #333333; border-bottom:1px solid #00a694;} .rows .grouplist i{color:#0F3;} .leftcontent{width:72%; float:right;} .leftcontent .content{border-bottom:1px solid #E0E0E0; transition:linear .2s; font-size:0;} .leftcontent .content:hover{background:#EFEFEF;} .leftcontent .content:last-child{border-bottom:none;} .leftcontent .content span{padding:3px; display:inline-block; width:15.2%; text-align:center; margin:0 0 0 .1%; font-size:14px; vertical-align:top;} .leftcontent .content span a{color:#069; transition:linear .2s;} .leftcontent .content span a:hover{color:#396;} .leftcontent .content span:first-child{width:48.5%; text-align:right;} .leftcontent .content span:nth-child(3){width:13.6%;} .leftcontent .content span:last-child{width:22.4%; text-align:center; direction:ltr; margin:0;} /*** Calendar *****/ .calendar .tabledate{border-collapse:separate;} .calendar b.thismonth { font-size: 25px; line-height: 55px;} .calendar b:last-child::before { content: "/"; display: inline-block; padding: 0 5px 0; font-size: 15px;} .calendar .tabledate thead tr td{color:#FFFFFF; text-shadow: 1px 1px 1px BLACK; font-size:15px; /**background:url(images/symbols/head.png);*/ background:linear-gradient(90deg, rgb(28, 117, 128) 0%, rgb(38, 39, 55) 44%); height:42px; background-repeat:no-repeat; background-position:center; background-size:cover;} .calendar .tabledate td {height: 40px; width: 40px; border-bottom:5px solid #fff; transition: all 0.2s ease 0s;} .calendar .headt td{ padding:5px 0; background:#fff; font-weight: bold;; font-size: 14px; color: #1d6e7a;} .calendar .circle { padding: 5px 0; background:#535353 !important; border-color: #535353 !important; color: #fff !important;} .calendar .samplec { border-bottom: 5px solid #d07821 !important;} .calendar .guide .samplec {padding-top:15px;} .calendar .guide { width:100%; text-align:right; max-width:300px; margin-top:5px;} .calendar .guide span{ padding:3px; vertical-align:middle; font-size:13px;} .calendar .guide div{display:inline-block; width:35px; height:30px; vertical-align:middle;} .calendar .guide span:before{ content: ""; width: 20px; margin-left: 4px; display: inline-block;} .calendar .guide span:first-child:before{ height: 5px; background: #d07821;} .calendar .guide span:last-child:before{ height: 20px; position: relative; top: 5px; background: #535353;} .calendar .line{height:1px !important; background:#CCC !important;} .calendar .heightpic{height:15px !important;} .calendar .data{font-size:14px; background:#fff;} .calendar .bottom{line-height:0 !important; height:10px !important;} .monthsn span:last-child:before{content:"/"; display:inline-block; padding:0 0 0 5px;} #moreInfo{ margin-bottom:40px; padding: 10px 30px 30px; background:#eee;} .trips .title{ padding-bottom:0;} .trips .title i{ color:#00a694;} .trips > span{display:block;} .trippack{ float:right; width:32%; margin-right:2%; background:#fff; margin-top:25px; padding:3px; text-align:center; transition:linear .3s; position:relative; } .trippack span{font-size:13px;} .trippack > span{ display:block;} .trippack a div{background-size:cover !important; height:260px;} .trippack h2{font-size:13px; font-weight:100; margin:0; min-height: 65px; border-bottom: 1px solid #efedec; margin-top:10px; color:#5B5B5B;} .trippack h2 a{color:#333; display:block; transition:linear .2s; font-size:15px; font-weight: bold;;} .trippack h2 a:hover{color:#d07821;} .trippack a.button_c{background:#00a694; display:block; color:#FFF; padding:3px; margin-top:5px; text-shadow: 1px 1px 1px #333; transition:linear .2s;} .trippack img{width:100%;} .trippack .span_dis{ display:inline-block;} .trippack:hover a.button_c, .trippack a.button_c:hover{ opacity:.8;} div.trippack:nth-of-type(3n-2) {margin-right: 0px;} @media only screen and (max-width: 1250px){ .introduce > div, .jashnmatn .main{margin: 0 10px 0;} } @media only screen and (max-width: 1200px){ .introduce > div, #banner_serv .main{ padding:20px 15px 20px;} .glance .rows{width:100%;} .glance .calendar{display:none;} .trippack, div.trippack:nth-of-type(3n-2){width:49%; margin-right:2%;} div.trippack:nth-of-type(2n-1) { margin-right: 0px;} } @media only screen and (max-width: 800px){ .trippack a div{height:260px;} .trippack, div.trippack:nth-of-type(3n-2){width:100%; margin-right:0;} .trippack .imgbox span{font-size:14px;} .trippack h2{min-height: 100%;} } @media only screen and (max-width: 700px){ .glance .rows .head{display:none;} .glance .rows .righttitle{background:#E8E8E8; border:1px solid #D6D6D6; color:#333; padding:5px;} .glance .rows .leftcontent::before{ font-family:"Font Awesome\ 5 Free"; font-weight:900; content: "\f0d7"; font-size:26px; color:#D6D6D6; display:block; line-height:5px; } .glance .rows .righttitle, .leftcontent .content span:first-child, .leftcontent{float:none; width:100%; text-align:center; display:block;} .leftcontent .content span, .leftcontent .content span:nth-child(3), .leftcontent .content span:last-child, .glance .rows100 .leftcontent .content span:last-child{display:inline-block; text-align:center; width:auto !important;} .leftcontent .content span:last-child:after, .leftcontent .content span:nth-child(3):before{content:"-"; padding:0 0px 0 5px;} .glance .rows100 .leftcontent .content span:nth-child(3):before{display:none;} .glance .rows .each, .glance .rows .each:hover{border:none; background-color:transparent;} .rows .grouplist{text-align:center;} .leftcontent .content:hover{background-color:transparent;} .leftcontent .content{padding:10px 0 10px;} .leftcontent .content span a{display:inline-block; padding:3px 5px; border-radius:3px; background:#EFEFEF; border:1px solid #EFEFEF;} } .soldout, .limited{position:absolute; top:-10px; right:-10px; width:110px; transform:rotate(20deg); height:110px; background:url(images/icon/soldout.png);} .limited{background:url(images/icon/limited.png);} .soldout:after, .limited:after, .limited:before{font-size:21px; position:absolute; font-family:BHoma; color:#FFF; text-shadow:1px 1px 1px #666666;} .limited:after{content:'محدود'; top:62px; right:32px;} .limited:before{content:'ظرفیت'; top:37px; right:32px; font-size:18px;} .soldout:after{content:'تکمیل'; top:50px; right:32px;} .trippack .soldout:after, .trippack .limited:after{content:'تکمیل'; font-size:18px; top:35px; right:0; left:0;} .trippack .limited:after{content:'محدود'; font-size:18px; top:47px; right:0; left:0;} .trippack .limited:before{content:'ظرفیت'; font-size:17px; top:23px; right:0; left:0;} /*Selected Tours*/ .pointer:hover{cursor:pointer;} .tselected{ background:#fff; padding:25px 0 60px;} .tselected .main > span{ display:block; color:#333;} .tselected img{line-height:10px;} .tselected .title{margin:auto; font-size:29px; text-align:right; color:#fff; font-weight: bold; line-height:55px; padding-bottom:5px;} .tselected .title i{ color:#00a694;} .inaglance .title i, .tableres2 .title i, .tableresw .title i, .needed .title i, .contactinfo .title i{color:#fff;} .tourbox{ float:right; margin-right:6%; width:47%; overflow:hidden; margin-top:25px; border:3px solid white; } .tselected .main::after, .trips::after{ content: ""; clear: both; display: block;} div.tourbox:nth-of-type(2n-1) {margin-right: 0px;} .tourbox img{width:100%; height:340px; object-fit:cover; transition:linear .2s;} .tourbox:hover img{opacity:.9;} .tourbox div{display:table; width:100%; padding:5px 10px 5px; background:#FFF; font-size:14px;} .tourbox span{display:table-cell;} .tourbox > span{text-align:right;} .tourbox > a{line-height:0; display:block;} .tourbox span:first-child a, .tourbox h2{ color:#333; font-weight: bold; font-size: 16px; line-height: 26px; display:block; transition:linear .2s; margin:0; } .tourbox span:first-child a{text-overflow:ellipsis; white-space:nowrap; max-width:390px; overflow:hidden;} @media only screen and (max-width: 1200px){ .tourbox img{ height:200px;} .tourbox span{display:block;} .tourbox{text-align:center;} .tourbox span:last-child{margin:10px 0 10px;} .tourbox span:first-child a{text-overflow:clip; white-space:normal; max-width:none; overflow:visible;} } .tourbox span:first-child a:hover{color:#d07821;} .tourbox span:first-child{color:#666; font-size:11px;} .tourbox span:last-child{text-align:left; vertical-align:middle;} /* .tourbox span:last-child a{display:inline-block; border:1px solid #15426A; padding:2px 13px 2px; border-radius:5px; font-size:13px; color:#15426A; transition:linear .2s;} .tourbox:hover span:last-child a{border:1px solid #FF8000; color:#D98200; text-shadow: none;} .tourbox span:last-child a:hover{color:#FFFFFF !important; text-shadow: 1px 1px 1px #333333; background:#F93;} */ @media only screen and (max-width: 1200px){ .tourbox span:last-child{text-align:center;} } @media only screen and (max-width: 530px){ .tourbox span{display:block; text-align:center !important;} } @media only screen and (max-width: 768px){ .tourbox{ float:none; margin-right:0px; width:100%; } } /**new page**/ #courselist .bannerInfo{ width:Calc(100% - 300px); padding-left:20px;} #courselist #starBox{ width:300px; margin-right:auto;} #courselist #starBox .stars{ margin-bottom:9px;} #courselist #starBox #wantstar:hover{ color:#fc3;} #courselist #starBox .rate_box{ background:#575757;} @media only screen and (max-width: 1200px){ #courselist .bannerInfo{ width:100%; padding-left:0px;} #courselist #starBox{ width:100%; margin:20px 0 0; text-align:right;} #courselist #starBox .stars{ text-align:right;} } #main_course{ padding:50px 0 40px; background:#fff;} #main_course .title{ color:#333;} #main_course .flexbox{ justify-content:center;} #main_course .flexbox > div{ width:Calc(33.333% - 13.333px); padding:3px; margin:0 0 30px 20px; background:#fff;} #main_course .flexbox > div:last-child, #main_course .flexbox > div:nth-child(3n){ margin-left:0;} #main_course .flexbox > div > a{ height:190px; background-size:cover !important; background-position:center !important; position:relative; display:block;} #main_course .flexbox > div > a:hover{ opacity:0.7;} #main_course .flexbox > div h3 a{ padding:15px; color:#333; font-weight: bold;; font-size:17px; display:block;} #main_course .flexbox > div h3 a:hover{ color:#d07821;} #main_course .flexbox > div h3 a i{ vertical-align:middle; color:#d07821;} #main_course .course_time{ padding:0;} .each_course{ padding:20px;} .each_course .flexbox1{ align-items:stretch; justify-content:Right;} .each_course h2 a{ margin-bottom:10px; font-weight: bold; font-size:19px; line-height:29px; text-align:right; color:#fff; text-shadow:1px 1px 1px #333; display:block;} .each_course h2 a:hover{ opacity:0.6;} .each_course h2 i{ color:#f4b75a; vertical-align:middle; margin-left:3px; font-size:16px;} .c_items h3 a:hover{ color:#d07821;} .each_course .c_items{ width:Calc(33.333% - 13.333px); margin:0 0 20px 20px; background:#fff; border:1px solid #ddd;} .each_course .c_items:last-child, .each_course .c_items:nth-child(3n){ margin-left:0;} .each_course .box_img{ height:190px; width:100%; position:relative; background-position:center !important; background-size:cover !important; display:block; transition:all linear 0.2s;} .each_course .box_img:hover{ opacity:0.8;} .box_img .co_info{ padding-left:0;} .box_img .co_info span{ margin-left:10px;} .c_items h3 a{ min-height:27px; margin:10px 13px 10px; color:#333; font-weight: bold;; font-size:14px; display:block;} /*.c_items h3 a:before{ margin-left:3px; font-size:11px; font-family:"Font Awesome\ 5 Free"; font-weight:900; content: "\f053"; color:#4B0082;} */ .each_course .more_bt2{ min-width:auto; width:auto; padding:5px 0 2px; line-height:18px; margin:auto; background:transparent; font-size:11px; font-family:sans-serif; border-bottom: 1px solid #fff; display:block; float:left;} .each_course .more_bt2:hover{ opacity:0.6;} .each_course .registerBox{ min-height:75px; align-items:center;} .each_course .registerBox .more_bt{ width:110px; min-width:inherit; margin:0 auto 0 0 !important; padding:5px 10px;} @media only screen and (max-width: 1200px){ #main_course .flexbox > div{ width:Calc(50% - 10px);} #main_course .flexbox > div:nth-child(3n){ margin-left:20px;} #main_course .flexbox > div:last-child, #main_course .flexbox > div:nth-child(2n){ margin-left:0;} .each_course .c_items{ width:Calc(50% - 10px);} .each_course .c_items:nth-child(2n){ margin-left:0;} .each_course .c_items:nth-child(3n){ margin-left:20px;} .each_course .c_items:last-child{ margin-left:0;} .each_course .flexbox1{ justify-content:center;} .each_course .registerBox .more_bt{ width:170px;} } @media only screen and (max-width: 768px){ #main_course .flexbox > div{ width:100%; margin-left:0 !important;} .each_course .c_items{ width:100%; margin:0 0 30px !important;} .each_course .c_items:last-child{ margin-bottom:0 !important;} } @media only screen and (max-width: 450px){ .each_course .registerBox, .each_course .registerBox span{ display:block; text-align:center;} .each_course .registerBox .more_bt{ width:100%; margin:10px auto auto !important;} } #about_course{ padding:100px 0;} #about_course .text{ font-size:16px; line-height:30px; text-align:justify;} #about_course .main{ max-width:1000px;} @media only screen and (max-width: 1200px){ #about_course .main{ max-width:720px;} } @media only screen and (max-width: 768px){ #about_course .main{ max-width:630px;} } @media only screen and (max-width: 650px){ #about_course .main{max-width:480px;} } #our_mentors{ padding:100px 0; background:#F5F5F5;} #our_mentors .main{ max-width:1170px;} #our_mentors #mentorsBox{ padding-top:25px; position:relative;} #our_mentors .flexbox{ background:#fff; padding:5px; margin-bottom:20px;} #our_mentors .flexbox > div:first-child{ width:150px;} #our_mentors .flexbox > div:first-child img{ width:100%; display:block;} #our_mentors .flexbox > div:last-child{ width:Calc(100% - 180px); margin-right:auto;} #our_mentors .flexbox > div:last-child h3{ margin-bottom:10px; font-size:17px; font-weight: bold;} #our_mentors .flexbox > div:last-child .mentor_ex{ font-size:15px;} #our_mentors .square1{ width:10px; height:10px; background:#f5c156; position:absolute; top:-80px; left:0; transform:rotate(20deg);} #our_mentors .square2{ width:15px; height:15px; background:#e6616b; position:absolute; top:-25px; left:50px; transform:rotate(10deg);} #our_mentors .square3{ width:20px; height:20px; background:#5cd3ad; position:absolute; top:-120px; left:110px; transform:rotate(40deg);} #our_mentors .square4{ width:10px; height:10px; background:#f5c156; position:absolute; bottom:-32px; right:0; transform:rotate(20deg);} #our_mentors .square5{ width:15px; height:15px; background:#e6616b; position:absolute; bottom:-90px; right:80px; transform:rotate(10deg);} #our_mentors .square6{ width:20px; height:20px; background:#5cd3ad; position:absolute; bottom:-40px; right:150px; transform:rotate(40deg);} @media only screen and (max-width: 1200px){ #our_mentors .main{ max-width:720px;} } @media only screen and (max-width: 768px){ #our_mentors{ padding:60px 0;} #our_mentors .flexbox{ padding:25px 10px;} #our_mentors .flexbox > div:first-child{ width:100%; margin-bottom:10px;} #our_mentors .flexbox > div:first-child img{ max-width:150px; width:100%; margin:auto;} #our_mentors .flexbox > div:last-child{ width:100%; text-align:center;} #our_mentors .flexbox{ margin-bottom:40px;} #our_mentors #mentorsBox{ padding-top:40px;} #our_mentors .main{ max-width:630px;} } @media only screen and (max-width: 650px){ #our_mentors .main{max-width:480px;} } /************************************************************** contact ***********************************************************/ #label_banner { height: calc(100vh - 302px); padding: 40px 30px; line-height: 30px; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: cover !important; } #label_name div { display: inline-block; font-size: 22px !important; color: #444444; } #label_name h1 { padding: 15px 0px; margin: 0px; font-size: 22px !important; font-weight: normal; color: #797979; display: inline-block; } #label_name span { padding: 0px 3px; font-size: 34px !important; color: #c0c0c0; display: inline-block; } #contact_form{ width: 50%; padding: 50px 20px 45px; float: right; } #contact_head{ line-height: 33px; margin: 0px 0px 25px 0px; font-size: 23px; font-weight: bold; color: #444444; } .contact_both{ width: Calc(50% - 5px); margin:0 0 0 10px; float: right; } #contact_form form > div .last_div{ margin-left:0;} .contact_all{ padding: 8px 0px;} #contact_sub{ padding: 8px 10px; } #contact_box label{ padding: 5px 5px; line-height: 20px; font-size: 15px; display: block; } #add_khc{ float: right; } #contact_sub{ float: left;} #contact_box .activity{ min-height:60px; background:#fafafa; border:1px solid #ccc; border-radius:5px; display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; align-items:center;} #contact_box .activity label{ display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; align-items:center;} #contact_box .activity label:last-child{ padding-left:0;} #contact_box .activity .other_put{ width:220px; display:none;} @media only screen and (max-width:780px){ #contact_sub,#add_khc{ float: none; text-align: center !important;} } #add_khla{ padding: 0px; cursor: pointer; display: inline-block !important; } #contact_form i{ font-size: 7px; color: #f6332d; position: relative; top: -2px; left: -2px; } #contact_box input[type="text"],#contact_box select,#contact_box textarea{ width: 100%; padding: 5px 10px; line-height: 25px; font-family: sans-serif; font-size: 15px !important; background: #fafafa; border: 1px solid #cccccc; overflow: hidden; display: block; transition: all .3s linear; } #contact_box input[type="text"]:hover,#contact_box select:hover,#contact_box textarea:hover, #contact_box input[type="text"]:focus,#contact_box select:focus,#contact_box textarea:focus{ border: 1px solid rgba(0,126,214,.5); box-shadow: 0px 0px 5px #007ed6; } #contact_box textarea{ min-height: 200px; max-height: 200px; resize:none; } #contact_sub{ text-align: left; } #contact_sub input{ width: 150px; padding:10px; font-weight: bold; font-size: 15px; border: 1px solid #00a694; background: #00a694; color: #FFFFFF; cursor: pointer; transition: all .3s linear; } #contact_sub input:hover{ background: #2472cb; border: 1px solid #2472cb; } #contact_info{ width: 50%; padding: 50px 20px 20px; font-size: 15px; color: #444444; float: left; background: #f5f5f5; } #coninfo_head{ margin-bottom: 15px; font-size: 23px; line-height:33px; font-weight: bold; color: #444444; } .coninfo_color{ font-size: 16px; font-weight: bold; color: #d07821; } #coninfo_txt div{ margin-bottom: 15px; } #coninfo_txt div div{ margin-bottom: 0px; display: inline-block; } #coninfo_txt div a{ color: #444;} #contact_info .fa-paper-plane-o{color:#007ed6 !important; font-size:19px;} #google_map iframe{ width: 100%; margin-top: 10px; height: 500px; } #contact_ansa{ color: #006699; transition: all .3s linear; } #contact_ans div{ font-size: 16px !important; line-height: 30px; clear: both; } #contact_ans a{ color: #006699; transition: all .3s linear; } #contact_ans a:hover,#contact_ansa:hover{ color: #797979; } @media only screen and (max-width:950px){ /************ responsive footer for 780 px *****************/ #contact_form{ width: 100%; padding: 50px 20px; float: none; } #contact_info{ width: 100%; padding: 50px 20px; float: none; } } @media only screen and (max-width:500px){ /************ responsive footer for 780 px *****************/ .contact_both{ width: 100%; margin:0; float: none; } } /* Footer */ .foot_grid{ display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr} .en_txt{ margin:0 0 10px; font-size: 18px; line-height: 25px;} footer{padding:36px 0;background:#0f172a;color:#e2e8f0;margin-top:40px} footer a{color:#a7f3d0} #menu nav > ul > li > a i{top: 0;} .mentorx .main{ padding: 5px 0 0; margin-top: 10px; border-top:1px solid #364356;} .mentorx .main > div{ float:right; width:30%; font-size:12px; color: #64748b;} .mentorx a{ color: #64748b; font-size:12px; display:inline-block;} .mentorx a:hover{ color:#d07821;} .mentorx{padding:5px 0 5px 0;} .mentorx #copyright{ text-align:left; float:left; width:70%; font-size:12px; font-family:tahoma; color: #64748b;} @media only screen and (max-width: 768px){ .mentorx #copyright, .mentorx .main > div{ width:100%; text-align:center;} .foot_grid{ grid-template-columns: 1fr; text-align: center;} } /*slider for opinion*/ #opinion{ padding:80px 0 30px} #opinion.padd_consult{ padding:50px 0 0} .swiper-container{margin: 40px 0;} .swiper-slide{ height:auto !important; background: linear-gradient(90deg, rgb(28, 117, 128) 0%, rgb(38, 39, 55) 44%) ;border-radius: 5px;} .wrap-opi{display: flex;flex-wrap: wrap;height: 100%!important;align-items: center;} .wrap-opi img{width: 60%; height:100%; object-fit:cover; border-top-right-radius: 5px;border-bottom-right-radius: 5px;} .wrap-opi > div{width:40%;text-align:right;padding:30px;font-family: sans-serif;font-size: 14px; color: white; text-shadow:1px 1px 1px black;} .wrap-opi .swiper-title{ font-weight: bold; font-size:19px; line-height:27px; margin-bottom: 15px;} .wrap-opi .swiper-title span{ font-size:13px;} .swiper-button-next, .swiper-button-prev{top: 20px!important;height: 100%!important; transition: all .3s!important;} @media only screen and (max-width: 1000px){ .wrap-opi{ height:auto !important;} .wrap-opi img{width: 100%; height:auto; border-bottom-right-radius: 0px;border-top-left-radius: 5px;} .wrap-opi > div{width:100%;padding:20px 30px 30px;min-height: 250px;} } @media screen and (min-width: 785px) { .swiper-button-next, .swiper-button-prev{ display: none!important;} .swiper-container:hover .swiper-button-next{display: block!important;} .swiper-container:hover .swiper-button-prev{display: block!important;} } @media only screen and (max-width: 785px){ .swiper-button-next, .swiper-button-prev{display: block!important;} } /*our mentors*/ .row-gray{ padding:75px 0; background: rgb(59,55,56); background: radial-gradient(circle, rgba(59,55,56,1) 0%, rgba(25,25,25,1) 100%);} .row-gray .title{ color:#fff;} .box-cell{padding-top: 15px;} .box-cell > div{display: flex; margin:0 15px 25px; flex-wrap: wrap;} .box-cell > div > div:first-child{width:50%;position: relative;line-height: 0;} .box-cell > div > div:last-child{ width: 50%;padding-right: 20px;line-height: 0;display: flex;flex-direction: column;} .box-cell p{line-height: 30px;color:#fff; padding-top: 30px;} .box-cell span{font-weight: bold;font-size: 22px; color: white; line-height: 30px;} .box-cell b{display: block; padding-top: 15px; font-size: 17px; color:rgba(219,219,219,1.00); line-height: 25px;} .box-cell > div > div:nth-child(2) a{font-family:sans-serif; width: 120px;} .box-cell > div > div:first-child >a{position: absolute;top: 0;left: 0;width: 100%;height: 100%} .box-cell > div > div:nth-child(2) a i{margin-right: 4px;} .box-cell img{width: 100%;} .box-cell .aligntxt{ align-items:center;} .box-cell .aligntxt .title{ text-align:right;} #mentors .box-cell p{ padding-top:0;} #mentors .box-cell > div > div:nth-child(2) a{ width:200px; min-width:200px; font-weight: bold;} .w_team img{ width:85%; margin:auto; display:block;} #mentors .main{ position:relative; z-index:5;} #mentors .square1{ width:10px; height:10px; background:#f5c156; position:absolute; bottom:15px; left:35px; transform:rotate(20deg);} #mentors .square2{ width:15px; height:15px; background:#e6616b; position:absolute; bottom:-75px; left:85px; transform:rotate(10deg);} #mentors .square3{ width:20px; height:20px; background:#5cd3ad; position:absolute; bottom:-26px; left:140px; transform:rotate(40deg);} @media only screen and (max-width:1200px){ .box-cell > div{width: 100%;margin: 25px 0} .box-cell > div{flex-direction: column;justify-content: center;align-items: center;} .box-cell > div > div:last-child{margin-top: 15px;width: 100%;padding-right: 0;} .box-cell span{line-height: 50px;} .box-cell > div > div:first-child{width: 100%} } .opinions{padding: 100px 0; background: rgba(228,228,228,1.00);} .opinions .title span{ color:#d07821;} .opinions .tribox{display: flex; flex-wrap: wrap; padding-top: 30px; justify-content:center;} .opinions .tribox > div{padding: 30px; font-size: 17px; position: relative;} .opinions .tribox > div > div{position: absolute; top: -40px; left: 20px;} .opinions .tribox > div > div > img{border-radius: 50%; width: 100px; height:100px; object-fit:cover;} .opinions .tribox > div i:last-child{text-align: left;} .quote{background: white; margin: 1%;} .quote i{color: rgb(253, 217, 78); font-size: 30px; display: block;} .quote b{display: block; text-align: center; padding: 15px 0;} .quote span{display: block; text-align: left; font-size: 12px; font-family: Samim; font-weight:normal;} .cstars{text-align: center; padding-top: 30px; font-size: 0;} .cstars i{font-size: 20px; padding: 10px; display: inline-block; color: rgba(255,104,107,1.00); border-bottom:1px solid rgba(122,122,122,.5);} .opinions .tribox > div.small{ width:31%;} .opinions .tribox > div.big{ width:62%;} @media only screen and (max-width:1200px){ .opinions .tribox{ justify-content:center;} .opinions .tribox > div.small, .opinions .tribox > div.big{ width:100%;} .w_team img{ margin:0 0 30px;} } @media only screen and (max-width:790px){ .quote{background: white; width: 100%; max-width: 400px; margin-bottom: 50px;} .xastronaut{width: 90px;} .top_course .picbox{min-height: 150px;} .w_team img{ width:100%;} } /*Animated BG*/ #canvas{ background-color: #1C232D; color: #172333; width: 100%; height: 100%; position: absolute; opacity:1 } #canvas2{ background-color: #b7ebff; width: 100%; height: 100%; position: absolute; opacity:1 } @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) } } .waveWrapper { overflow: hidden; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } .waveWrapperInner { position: absolute; width: 100%; overflow: hidden; height: 100%; background-image: linear-gradient(to top, #86377b 20%, #27273c 80%); } .bgTop { z-index: 15; opacity: 0.5; } .bgMiddle { z-index: 10; opacity: 0.75; } .bgBottom { z-index: 5; } .wave { position: absolute; left: 0; width: 200%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom; } .waveTop { background-size: 50% 100px; } .waveAnimation .waveTop { animation: move-wave 6s; -webkit-animation: move-wave 6s; -webkit-animation-delay: 2s; animation-delay: 2s; } .waveMiddle { background-size: 50% 120px; } .waveAnimation .waveMiddle { animation: move_wave 20s linear infinite; } .waveBottom { background-size: 50% 100px; } .waveAnimation .waveBottom { animation: move_wave 30s linear infinite; } .xastronaut{ transform: translatey(0px); animation: float 6s ease-in-out infinite; margin: auto; display: block; margin-top: 20%;} @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0px); } } /*** online payment ***/ #page1{ background:rgba(193, 206, 204, 0.49);} #page1 .h_title{ font-size:35px; line-height:60px;} #page1 .h_title:after{ height:11px; background:rgb(255, 233, 233); bottom:6px;} #page1 .old_mem{ padding:5px 10px; display:inline-block; background:#bfcecb; color:rgb(22, 36, 70); transition:all linear 0.2s;} #page1 .old_mem a{ color:#0632FF;} #page1 .old_mem a:hover{ text-decoration:underline; opacity:.7;} #information_form{ padding-bottom:70px;} #main_online{ max-width:950px; margin:auto;} #onlinePay{ margin: 15px auto 0 auto; display: flex; } #onlinePayRight{ width: calc(100% - 250px); padding-left: 35px; } #onlinePayLeft{ width: 250px; padding-top:28px;} .onlinePayFlex{ display: flex; } .onlinePayFlex>div{ width:33.333%; } .onlinePayFlex.wh2x > div{ width:66.66%;} .onlinePayHead{ width: 100%; font-size: 14px; color:#d07821; padding:0 5px; font-weight: bold;} .onlinePayHead i{ margin-left:5px; font-size:20px;} .onlinePayInput{ min-height:50px; padding:0 5px; margin-bottom: 10px; font-size: 0; border-bottom: 4px solid #bfcecb; display: block;} #onlinePayRight input, .form_box input,#onlinePayRight select{ width: 100%; border:1px solid #fff;max-width:100%;font-size: 14px; height: 40px;padding: 0 5px; background: #fff;} .onlinePayInput label{ width:49%; background:#fff; display: inline-block; font-size: 13px; border: 1px dashed #b9b9b9;padding: 5px 10px; cursor:pointer;} .onlinePayInput label:last-child{ margin-right: 2%;} .w-40{ min-width: 150px!important;} #citySectionLegal{ font-size: 14px;} #citySectionLegal .txt{ padding-top: 7px; display: block;} #buycost div{ margin-bottom:6px;} #buycost div div:first-child{ padding:5px; background:#bfcecb; color:#333; text-align:right; font-weight: bold;} #buycost div > i{ color:#129333; font-size:23px; position:relative; top:1px;} #buycost div div:last-child{ padding:0 5px;} #buycost div:last-child div:first-child{ background:#82d8a7;} #onlinePayButton{ max-width: 300px; width:100%; padding:3px; margin: 5px auto; text-align: center; background: #35ac68; color: WHITE; transition: linear .2s; border: solid 1px #00a694; display: flex;justify-content: center;align-items: center;line-height: 35px;font-size: 16px; text-shadow:1px 1px 1px rgba(0,0,0,.7); font-weight: bold;} #onlinePayButton i{ margin-right: 10px;} #onlinePayButton:hover{ background:#2472cb;} .w-add{width: 200%!important;} .w_hlf{ width:50% !important;} .no_code .w_hlf{ width:100% !important;} .input_off input{ background: #ffe9e9; border:1px dashed #d07821 !important;} .input_off{width: 40%!important; /**min-width: 350px;**/} #NatijeTakhfif{margin-bottom: 10px;/**min-width: 350px;width: 60%;**/} #checkrule{ padding-top:15px; text-align:center; font-size:14px;} #checkrule input[type='checkbox']{ -webkit-appearance:none; width:16px; height:16px; background:white; border:1px solid #00a694; vertical-align:middle;} #checkrule input[type='checkbox']:checked { background: #00a694;} #checkrule a{ color:#df4e39;} #checkrule a:hover{ color:#d11c02;} #count-takhfif{background:#f34f4e; color:white; border:none; padding:5px 10px; font-weight: bold; font-size: 13px; margin-right: 4px;cursor: pointer;} .wrong-code{color:red;font-size: 14px;margin-right:10px;margin-top: 5px;} .correc-code{color:#ff014a;font-size: 14px;margin-right:10px;margin-top: 5px;} .content-member{display: none;} .member-code {width:320px;border-radius: 5px;margin:25px auto 0 auto;;background:white; border:1px solid #ddd;padding: 12px 20px 10px 20px;} .member-code input{max-width: 180px;width: 100%;height: 30px;padding: 0 5px;border: 1px solid#ddd;border-radius: 3px;margin-right:4px} .member-code label{font-size: 14px;} .member-code a{font-size: 14px;color:#d07821;text-decoration: none;display: inline-block;} .member-code .check-member{width: 130px;margin:25px auto 15px auto;padding: 5px;text-align: center;background:#43bc61;color:WHITE;text-shadow: 1px 1px 1px#333;border-radius: 3px;transition: linear .2s;border: solid 1px#2E9447;display: flex;justify-content: center;align-items: center;cursor: pointer} .member-code i{margin-right: 10px;} .btn{max-width: 330px;height: 47px;width: 100%;line-height: 35px;padding: 5px;text-align: center; background: #00a694;color: #fff;font-size: 16px;text-shadow: 1px 1px 1px rgba(0,0,0,.7);font-weight: bold; border: 1px solid #00a694;display: block;transition: all linear 0.2s;} #onlinePay input[type="checkbox"],#onlinePay input[type="radio"]{ height: 12px!important; width: 12px!important; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 1px solid #A5A6A4!important; background:#FFFFFF; vertical-align:middle; cursor:pointer;} #onlinePay input[type="radio"]{ border-radius:50%;} #onlinePay input:checked{ background: #00a694; border: 1px solid #00a694;} .green { color: #35ac68 !important;} @media only screen and (max-width: 1200px){ #onlinePayRight input, .form_box input{ width:100%; max-width:100%;} #onlinePay ,#onlinePayLegal{ display: block; } #onlinePayRight{ width: 100%; padding-left: 0; } #onlinePayLeft{ width: 100%; padding-top:0;} #selectItem{ display:flex; display:-webkit-flex; display:-ms-flexbox;} } @media only screen and (max-width: 768px){ .member-code{width: 290px;} .onlinePayFlex{ display: block; } .input_off,#NatijeTakhfif,.onlinePayFlex>div{ width: 100% !important;} #onlinePayRight select{ max-width:100%;} .w-add, .w_hlf, .w-40{width: 100%!important;} .onlinePayInput label {width:49%; padding: 5px 20px;} #page1 .h_title { font-size: 30px; line-height: 50px;} } /************* pish faktor css **********/ #email_mess{ height:Calc(100vh - 302px); padding-top:50px; font-weight: bold; font-size:18px; line-height:32px;} #email_mess > div{ align-items:flex-start;} #email_mess > div i{ width:50px;} #email_mess > div div{ width:calc(100% - 50px);} #email_mess i{ color:#d07821; font-size:30px;} #bpishfaktor{ padding: 15px 0; margin: auto; line-height: 20px; font-size: 14px; } #bpishfaktor .title b::before{ height:51px; width:1px; border-right:1px dashed #d07821; right:30px; top:100%;} #bpishfaktor .title span{ color:#900; font-size:13px; padding-right:10px;} #bpish_head{ padding: 10px 0; margin-bottom: 10px; border-bottom: 4px solid #d07821; align-items:flex-end; } .printing{ display:none;} /**print**/ @media print { .printing{ display:block !important;} } #bpishfaktor td > span:first-child{color: #d07821;} #bpish_head img{ width:150px; display: block;} #bpish_head .x_stl{ color:#d07821; font-size:30px;} #bpish_date{ margin-right:auto;} #bpish_date label{width: 40px;display: inline-block;} #bpish_date input{ width: 45px; padding: 0 5px; font-size: 14px; text-align: center; border: 1px solid #444444; background: #f1f1f1; } #bpish_titr{ padding: 0 5px; line-height:30px; text-align: center; font-size: 19px; color: #444444; font-weight: bold; } #bpishfaktor table{width: 100%;margin: 5px 0;} #bpishfaktor td{ padding: 8px; font-size: 15px; vertical-align: middle; border: 1px solid #c2c2c2; } #bpish_buyer input{ padding: 0 5px; font-size: 14px; background: #f6f6f6; border: 1px solid #C2C2C2; } #bpish_buyer tr:first-child td{ width: 72px; text-align: center; background:#e2e4e9; } #bpish_seller tr:first-child td:first-child{ width: 72px; background:#e2e4e9;} #bpish_seller td:nth-child(1){ } #bpishfaktor td:nth-child(1){ width:55%;} #bpish_seller td:nth-last-child(2){ } #bpish_seller tr:nth-child(3) td:last-child b{ font-family:sans-serif; display:inline-block; direction:ltr;} #bpish_buyer td:last-child input{ width: 107px;} #bpish_buyer tr:nth-child(2) td:nth-child(1) input{ width: 505px;} #bpish_buyer tr:nth-child(2) td:nth-child(2) input{ width: 70px;} #bpish_buyer tr:nth-child(3) td:nth-child(1) input,#bpish_buyer tr:nth-child(4) td:nth-child(1) input{ width: 656px;} #bpish_buyer label{ width: 70px;display: inline-block;} #bpish_services tr:first-child{ height: 35px;background:#e2e4e9;} #bpish_services tr:nth-child(2){height: 35px;} #bpish_services tr:first-child td{ font-size: 15px !important;} #bpish_services td{ padding: 0 !important; text-align: center;} #bpish_services input,#bpish_services textarea{ height: 30px; min-height: 30px; padding: 5px; text-align: center; background: transparent; font-size: 13px; border: none; } #bpish_services td:nth-child(4), #bpish_services td:nth-child(6) , #bpish_services td:nth-child(7) , #bpish_services td:nth-child(8) {background: none;} #bpish_services tr:last-child td{padding: 5px 3px !important;} #bpish_services tr:nth-child(1) td:nth-child(1){text-align: center;padding-right: 5px !important;} #bpish_services td:nth-child(1) textarea{width: 98% !important;text-align: centercenter;} #bpish_services td:nth-child(1){width:35%;} #bpish_services td:nth-child(2),#bpish_services td:nth-child(2) input{width: 13%} #bpish_services td:nth-child(3),#bpish_services td:nth-child(3) input, #bpish_services td:nth-child(4),#bpish_services td:nth-child(4) input, #bpish_services td:nth-child(6),#bpish_services td:nth-child(6) input{width: 13%} #bpish_services td:nth-child(3),#bpish_services td:nth-child(3), #bpish_services td:nth-child(4),#bpish_services td:nth-child(4), #bpish_services td:nth-child(6),#bpish_services td:nth-child(6){width: 13%} #bpish_services td:nth-child(5),#bpish_services td:nth-child(5) input{width: 13%} #bpish_services td:nth-child(7),#bpish_services td:nth-child(7) input{width: 20%} #bpish_services tr:last-child td{padding: 5px !important;} #bpish_services tr:last-child td:last-child{font-weight: bold;font-size: 15px !important;} #bpish_txt{ font-family: Tahoma;font-size: 12px;} #bpish_txt input{ width: 25px; background: #f6f6f6; border: 1px solid #C2C2C2; text-align: center; } .text-alarm{font-size: 15px; line-height: 28px;} .underTable{ margin-top:10px; line-height:22px; font-size:12px; text-align:right;} #maliat{ display: none;} .form_bott{ margin-bottom:20px; display:flex; display:-webkit-flex; justify-content:center;} .form_bott button{ margin:inherit !important;} #bpishfaktor .print{ width:100px; height:47px; line-height:33px; margin-left:3px; padding:0px 3px; background:rgba(170,186,199,.5); color:rgba(33,69,98,1.00); font-weight: bold;; font-size:16px; border:1px solid rgba(170,186,199,1.00); display:flex;align-items: center;justify-content: center; text-align:center; transition:all linear 0.2s; cursor:pointer;} #bpishfaktor .print:hover{ opacity:0.7;} #bpishfaktor .print i{ padding-left:6px; font-size:14px;} #bpishfaktor .h_title, #p_receipt .h_title{ font-size:24px; line-height:42px;} #bpishfaktor .h_title::after, #p_receipt .h_title::after{ bottom:8px; height:10px;} #comment11{ width: 100%; margin-top: 10px; padding: 5px; border: 1px solid #c2c2c2; resize: vertical; background: #f6f6f6; font-size: 13px; font-family: Tahoma; } .login button, a.button2{ max-width:330px; height:47px; width:100%;line-height:35px; padding:5px; margin:auto; text-align:center; background:#00a694; color:#fff; font-size:16px; text-shadow: 1px 1px 1px rgba(0,0,0,.7); font-weight: bold; border:1px solid #00a694; display:block; transition:all linear 0.2s;} .login button:hover, a.button2:hover{ background:#2472cb;} @media only screen and (max-width: 1200px){ #bpishfaktor tr, #bpishfaktor tr td{ width:auto !important; font-size:14px; text-align:center !important; display:block;} #bpishfaktor tr td{ border-top:none;} #bpish_buyer tr:first-child td, #bpish_seller tr:first-child td{ background:#d07821 !important; color:#fff; font-weight: bold; font-size:15px;} #bpish_services tr:first-child{ display:none;} #bpish_services tr{ height:auto !important;} #bpish_services tr:nth-child(2):before{ content:"شرح خدمات"; background:#d07821; color:#fff; display:block; padding:5px 0; font-size:15px; font-weight: bold;} #bpish_services tr td:before{ padding-left:3px; color:#d07821;} #bpish_services tr td:nth-child(1):before{ content:"نام دوره:";} #bpish_services tr td:nth-child(2):before{ content:"تعداد:";} #bpish_services tr td:nth-child(3):before{ content:"مبلغ واحد:";} #bpish_services tr td:nth-child(4):before{ content:"ارزش افزوده";} #bpish_services tr td:nth-child(5):before{ content:"مبلغ تخفیف:";} #bpish_services tr td:nth-child(6):before{ content:"مبلغ نهایی:";} #bpish_head img, #bpish_date{ float:none;} } @media only screen and (max-width: 420px){ #bpish_head { flex-wrap: wrap; display: flex; justify-content: center; } } /************* /pish faktor css **********/ /*****/ #p_receipt h1{ margin-bottom:15px; font-weight: bold; font-size:21px; line-height:31px;} #receipt{ max-width:800px; margin:50px 0 80px; padding:35px 10px; border-top:3px solid #d07821; border-bottom:3px solid #d07821;} #receipt .success{ font-weight: bold;} #receipt .success i{ color:#00a694; font-size:28px;} .pass_info{ margin-bottom:70px;} #pass_code{ margin:10px 0 20px;} #pass_code div{ margin-bottom:10px;} #pass_code div span{ font-size:15px; line-height:23px; font-weight: bold; display:block;} #pass_code div input{ max-width:250px; width:100%; height:40px; padding:0 5px; border:1px solid #ddd;} #pass_code .more_bt{ max-width:250px; min-width:250px; padding:5px; margin-top:0; border:1px solid #00a694} .user_txt{ padding:3px 0;} .user_txt i{ color:#d07821;} .pass_active{ margin-top:10px; color:#00a694; font-size:17px; font-weight: bold;} @media only screen and (max-width: 768px){ #pre_factor #navigator, #email_mess{ max-width:630px;} .pass_info{ text-align:center;} .pass_info .more_bt{ margin:auto;} } @media only screen and (max-width: 650px){ #pre_factor #navigator, #email_mess{max-width:480px;} } /*404 and Error*/ .errorbg, #construction{background:url(images/background/space.png) no-repeat scroll top; background-size:cover;} .errorblock{max-width:960px; margin:auto; padding-top:40px;} .lefttxt{ max-width:650px; margin:auto; line-height:45px; color:#46261b; border-radius:10px; padding:20px; font-size:25px;} .lefttxt a{color:#fff; transition:all 0.3s;}.lefttxt a:hover{color:#d07821;} .lefttxt input{padding:6px; border:1px solid #FFF; font-size:15px; border-radius:5px;} .lefttxt input:last-child{background:#d07821; color:#FFF; border:none; transition:all 0.2s;} .lefttxt input:last-child:hover{background:#d07821; cursor:pointer;} .lefttxt > div{font-size:30px; line-height:42px; color:#d07821;} .lefttxt > span{padding-right:20px; font-size:17px;} .lefttxt .circlet{float:right; border-radius:200px; background:#d07821; color:#8fd0d4; border:2px solid #d07821; display:inline-block; width:40px; height:40px; line-height:40px;} .lefttxt .circlet span{padding-top:20px;} .lefttxt .circlet i{margin-top:8px; color:#fff;} .rowt{display:table; padding-bottom:10px;} .rowt div:last-child{display:table-cell; vertical-align:middle; padding-right:10px; color:#fff;} .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%; margin: auto;} .lefttxt{float:none; width:100%; padding:0;} } /*** sitemap & rss ***/ .sitemap{ margin:40px 0 0; padding-bottom:20px;} .sitemap li, .box_tour li{ padding:5px; font-weight: bold;} .sitemap li ul li{ font-family:sans-serif;} .sitemap a, .box_tour li a{ color:#036; transition:all linear 0.2s;} .sitemap a:hover, .box_tour li a:hover, .box_tour a:hover{ color:#d07821;} .titr_1{ margin-bottom:15px; font-weight: bold; font-size:20px; line-height:30px;} .titr_1 i{ color:#d07821; margin-left:5px;} .box_tour{ margin:30px 0 0;} .box_tour a{ color:#000;} /*** crm.cfm ***/ .utab_banner{ background: radial-gradient(circle, rgb(9, 18, 31) 0%, rgb(19, 54, 93) 100%); flex-direction: row-reverse;} .u_info{ width: 50%; padding: 60px 120px; color: #fff; position: relative;} .u_info h1{ margin-bottom: 20px; color: #fff; font-weight: bold; font-size: 29px; line-height: 55px; display: block; transition: all linear 0.2s;} .u_info .text{ font-size: 17px; line-height: 30px;} .utab_banner .more_bt{ width: 100%; padding: 14px 10px; margin-top: 35px; font-size: 20px; line-height: 32px; cursor: pointer; display: inline-block;} .utab_banner .u_pic{ min-height: 500px; width: 50%; background-size: cover !important; background-position: 50% 50% !important; position: relative; z-index: 1;} .u_txt{ color: #d07821;} #sec_ban{ flex-direction: row; align-items: stretch;} #sec_ban .u_pic img{ width: 100%; height: 100%; object-fit: cover; display: block;} #sec_ban .u_info{ padding: 60px 80px;} #sec_ban .u_info ul li{ margin-bottom: 8px; list-style: none;} #sec_ban .u_info a{ color: #d07821; text-decoration: underline; transition: all linear .2s;} #sec_ban .u_info a:hover{ opacity: .7;} @media only screen and (min-width: 791px){ #sec_ban .u_pic{ min-height: 550px;} } @media only screen and (max-width: 1024px){ .utab_banner > div{ width: 100% !important;} .utab_banner .u_info, #sec_ban .u_info{ padding: 40px 60px 60px;} } @media only screen and (max-width: 790px){ .utab_banner .u_pic{ min-height: 400px;} } @media only screen and (max-width: 550px){ .utab_banner .u_pic{ min-height: 270px; background-position: 50% 80% !important;} .utab_banner .u_info, #sec_ban .u_info{ padding: 40px 20px 60px;} } @media only screen and (max-width: 400px){ .utab_banner .u_pic{ min-height: 220px; background-position: 50% 80% !important;} } .utab_help{ padding: 60px 0; background: #f5f5f5;} .utab_help h2{ margin-bottom: 20px; font-weight: bold; font-size: 29px; line-height: 50px;} #u_help{ padding: 70px 50px; background:#d2e3f2; text-align: center; color: #232323 !important; position:relative; overflow:hidden;} #u_help .u_info{ width: 530px; padding: 0 20px 10px 20px; margin: auto; text-align: right;} #u_help .u_info h1, #u_help ul{ color: rgba(43,43,43,1.00);} #u_help ul li, .utab_help ul li{ margin-bottom: 5px; list-style: none;} #u_help ul li:before,.utab_help ul li:before, #sec_ban ul li:before{ content: "\f00c"; margin-left: 8px; color: #d07821; font-family: "Font Awesome\ 5 Free"; font-weight: 900; vertical-align: middle; display: inline-block;} .h_icon{ position: absolute;} .h_icon1{ left:0; top:0} .h_icon2{ left:10px; bottom:-15px;} .h_icon3{ right:10%; bottom:-10px;} .h_icon4{ left:30%; top:-30px} .h_icon5{ right:0;} .h_icon1 img{ width: 130px;} .h_icon2 img{ width: 220px;} .h_icon3 img{ width:230px;} .h_icon4 img{ width: 110px;} .h_icon5 img{ width: 150px;} @media only screen and (max-width: 1024px){ .h_icon1 img{ width: 80px;} .h_icon2 img{ width: 170px;} .h_icon3 img{ width: 180px;} .h_icon4 img{ width: 60px;} .h_icon5 img{ width: 90px;} .h_icon2{ bottom:-38px;} .h_icon3{ bottom:-72px;} } /* we team */ #we_team{ padding: 70px 0px 90px; background:url(images/background/boat.jpg); background-repeat: no-repeat !important; background-size: cover !important; background-attachment:fixed !important; background-position: 50% 50% !important; transition: all .2s linear; } #we_team ul{ padding: 0px; margin: 0px; text-align: center; } #we_team li{ margin: 0px 10px; display: inline-block; overflow: hidden; } .teamimg{ margin-bottom: 7px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: relative; overflow: hidden; cursor: pointer; } .team_hover{ background: #444444; opacity: .5; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; transition: all .1s linear; } #we_team img{ width: 100px; max-width: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; display: block; } .team_triangle{ width: 0; height: 0; margin: auto; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 35px solid #f5f5f5; position: relative; bottom: -35px; transition: all .2s linear; } #tcomment_box{ width: 900px; margin: -10px auto 0px auto; position: relative; } #team_comment{ width: 850px; margin: auto; padding: 15px 0px 10px 0px; font-size: 17px !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; transition: all .2s linear; position: relative; overflow: hidden; } .user_comment{ line-height: 30px !important; margin: auto; padding: 0px 5px; text-align: justify; text-justify: auto; font-family: "sans-serif" !important; font-size: 15px; position: absolute; color: #333; left: 20px; right: 20px; opacity: 0; transition: all .2s linear; } .uc_border{ width: 40px; margin: 10px auto 5px auto; border-top: 1px solid #ccc; } .uc_name{ line-height: 25px !important; text-align: center; font-size: 14px !important; color: #aaaaaa; } .uc_name span{ color: #444; font-size: 13px; font-family:"sans-serif"; } .uc_name span > b{ font-weight: bold;; font-size: 16px; color: #333;} .uc_name a{ color: #aaaaaa; display: block; transition: all .3s linear; } .uc_name a:hover{ color: #ff2f2f !important; } #next_tcomment,#pre_tcomment{ height: 100%; width:40px; color: #FFFFFF; font-size: 40px !important; margin: auto; position: absolute; top: 0px; bottom: 0px; cursor: pointer; transition: all .3s linear; opacity: 0; } #next_tcomment{ right: 0px; } #pre_tcomment{ left: 0px; } #next_tcomment:hover,#pre_tcomment:hover{ color: #d07821; opacity: 1; } #tcomment_box:hover #next_tcomment,#tcomment_box:hover #pre_tcomment{ opacity: 1; } #next_tcomment i,#pre_tcomment i{ height:40px; top: 0; bottom: 0; margin: auto; position: absolute;} #next_tcomment i{ right:0;} #pre_tcomment i{ left:0;} .testi_title{ margin-bottom: 30px !important; text-align: center !important; display: block !important;} .testi_title span{ color: #00a694;} .padd30bt{ padding-bottom: 30px !important;} @media only screen and (max-width:950px){ /************ responsive jomle moshtarian for 950 px *****************/ #team_resul{ width: 125px; margin: auto; overflow: hidden; } #we_team ul{ width: 375px; margin: auto; } #we_team ul.five_user{ width: 625px; } #we_team ul.four_user{ width: 500px; } #we_team li{ width: 100px; } #tcomment_box{ width: 90%; } #team_comment{ width: 100%; } #next_tcomment,#pre_tcomment{ width: 40px; height: 40px; font-size: 24px !important; top: -95px; bottom: auto; display: block; opacity: 1; } #next_tcomment i,#pre_tcomment i{ width: 40px; height: 40px; line-height: 40px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #444444; } #next_tcomment i:hover, #pre_tcomment i:hover, #next_tcomment:hover,#pre_tcomment:hover{ color:#fff !important; opacity: 1;} } #popup,#popup1{ background: rgba(0,0,0,0.7); position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; z-index: 1000;} #popup .flexbox,#popup1 .flexbox{ height: 100%; align-items: center; justify-content: center; position: relative;} #popup .flexbox #for_area ,#popup1 .flexbox #for_area1{ position: absolute; top: 0; left: 0; right:0; bottom: 0; z-index: 100;} #popup .formBox,#popup1 .formBox{ max-width: 350px; width: Calc(100% - 40px); padding: 20px; background: #fff; position: relative; z-index: 200;} #popup .formBox .txt,#popup1 .formBox .txt{ margin-bottom: 10px; font-weight: bold; font-size: 17px; line-height: 30px;} #popup .formBox .txt i,#popup1 .formBox .txt i{ margin-left: 5px; color: #d07821; font-size: 22px;} #popup .close_pop,#popup1 .close_pop{ position: absolute; left: 20px; top: 20px; font-size: 35px; color: #fff; cursor: pointer; transition: all linear .2s; z-index: 200;} #popup .close_pop:hover,#popup1 .close_pop:hover{ color: #ff6a6a;} #popup form input,#popup1 form input{ width: 100%; height: 45px; padding:0 10px; margin-bottom: 5px; font-size: 17px; border: 1px solid #eee; display: block;} #popup form button,#popup1 form button{ width: 100%; height: 45px; line-height: inherit; margin-top: 0; border: 1px solid #00a694;} #popup form button:hover,#popup1 form button:hover{ border-color:#00a694;} .call_me{ max-width: 500px; padding: 10px; margin: 20px 0 0; border-top: 2px solid #00a694; border-bottom: 2px solid #00a694;} .call_me .call_user{ height: 125px; width: 125px; border-radius: 100%; background: url(images/team/Apool-Asadi.jpg); background-size: cover !important; background-position: center !important; border: 4px solid #00a694;} .call_me .more_bt{ min-width: 100%; margin: auto; font-size: 20px; padding: 15px 10px;} .call_me .call_butt{ width: Calc(100% - 150px); margin-right: auto;} @media only screen and (max-width:350px){ .call_me{ justify-content: center;} .call_me .call_butt{ width: 100%; margin-top: 10px;} } #fix_call{ width: 100%; padding: 20px 10px; position: fixed; bottom: 0; left: 0; right: 0; font-size: 22px; display: none; z-index: 100;} @media only screen and (max-width:768px){ #fix_call{ display: block;} .foot_padd{ padding-bottom: 70px;} } /*** about mentorx landing ***/ #about_mentor h2{ padding-bottom: 7px; margin-bottom: 25px; font-weight: bold; font-size: 26px; line-height: 40px; border-bottom: 2px solid #d07821; display: block;} #about_mentor h2 span{ color: #d07821;} #about_mentor .routing .level{ width: 50%; padding: 30px 40px 40px; position: relative;} #step_route{ border-bottom: 1px solid #ddd; overflow: hidden;} .routing .img_a{ width: 100%; max-width: 300px; margin: 20px auto 20px 0; display: block;} .routing .img_b{ width: 150px; position: absolute; left: 0; top: 30px;} .routing .img_c{ width: 200px; position: absolute; left: 0; bottom: 50px; } .routing .img_d{ width: 110px; position: absolute; left: 0; top: 30px;} .routing .img_e{ width: 125px; position: absolute; left: 0; top: 70px;} .routing .img_f{ width: 137px; position: absolute; left: 0; top: 70px;} .bg_cover{ background: url(images/background/bg2.png); background-size: auto; background-size: contain; background-repeat: no-repeat; background-position: bottom; padding-bottom: 150px !important;} .padd145{ padding-top: 145px !important;} @media only screen and (max-width:768px){ #about_mentor .routing .level{ width: 100%;} .routing .img_b{ left: -15px;} .routing .img_c{ bottom: 0;} .routing .img_d{ top: 60px;} .routing .img_e, .routing .img_f{ left: -15px; top: 30px;} .bg_cover{ background-size: 800px;} } .main2{ max-width: 1200px; padding: 0 15px; margin: auto;} .main3{ max-width: 1300px; padding: 0 15px; margin: auto;} #about_mentor .frst_sec{ height: calc(100vh - 105px);} #about_mentor .xastronaut{ margin: 0 auto 0 0;} .bann_box{ width: 100%; position: relative; flex-direction: row-reverse;} .bann_box > div{ width: 50%; color: #fff; font-family: 'B_titr';} .bann_box h1{ margin-bottom: 10px; color: #fff; font-family: 'B_titr'; font-size: 45px; line-height: 50px; display: block; transition: all linear 0.2s;} .bann_box .txt{ margin-bottom: 5px;} .bann_box .chevron img{ right: 0;} .bann_box .chevron{ position: relative; margin-top: 70px; display: block;} #slogon{ padding: 35px 0; background: #f4f4f4;} #slogon .flexbox{ flex-direction: row-reverse;} #slogon img{ max-width: 170px; width: 100%; margin-right: auto; display: block;} #slogon > div > div{ width: Calc(100% - 240px); margin-left: auto; font-weight: bold; font-size: 20px; line-height: 35px;} @media only screen and (max-width:700px){ #about_mentor .frst_sec{ height: auto;} .bann_box{ padding: 80px 0 10px;} .bann_box > div{ width: 100%; text-align: center;} .bann_box .chevron{ margin-top: 80px;} .bann_box .chevron img{ left: 0; margin: auto;} #about_mentor .xastronaut{ margin: auto auto 20px !important;} #slogon > div > div{ width: 100%; text-align: center;} #slogon img{ margin: auto auto 20px;} } #ham_mem, #license, #value, #digital_srv, #all_srv, #projects, #about_mentor #education{ margin: 120px 0;} #mem_user{ align-items: stretch;} #mem_user > div{ width: 33.333%; padding: 0 5px; text-align: center;} #mem_user > div div{ margin: 5px 0;} #mem_user img{ width: 100%; max-width: 267px; margin: auto; display: block;} #mem_user h3{ margin-top: 15px; font-weight: bold; font-size: 16px; line-height: 25px;} #mem_user a{ max-width: 267px; width: 100%; padding: 5px 10px; margin-top: 5px; background: #F44F4E; color: #fff; display: inline-block; transition: all linear .2s;} #mem_user a:hover{ background: #d07821;} @media only screen and (max-width:700px){ #ham_mem, #license, #value, #digital_srv, #all_srv, #projects, #about_mentor #education{ margin: 70px 0;} #mem_user > div{ width: 100%; margin-bottom: 40px;} #mem_user > div:last-child{ margin-bottom: 0;} } #license{ overflow: hidden;} #license img{ height: 100px; margin: 0 50px; display: block; transition: all linear 0.2s;} #license .flexbox{ overflow: hidden; justify-content: center;} #value .p_center > .flexbox > div:first-child{ width: 40%;} #value .p_center > .flexbox > div:last-child{ width: 60%; padding-right: 40px;} #value div img{ width: 100%;} #value div i{ width: 40px; height: 40px; line-height: 40px; background: #d07821; color: #fff; font-size: 18px; text-align: center; vertical-align: middle; transition: all linear .3s;} #value .val_item:hover i{ background: transparent; color: #d07821; font-size: 28px;} #value .val_item{ padding-bottom: 20px; } #value .val_item div{ width: calc(100% - 55px); margin-right: auto;} #value .val_item div b{ color: #d07821;} @media only screen and (max-width:768px){ #value .p_center > .flexbox > div{ width: 100% !important;} #value .p_center > .flexbox > div:last-child{ margin-top: 20px; padding-right: 0;} #license .flexbox > div{ width: 100%;} #license img{ margin: auto !important;} .paddbt{ padding-bottom: 145px !important;} } @media only screen and (max-width:500px){ #value .val_item:nth-child(1){ align-items: stretch;} #value .val_item:nth-child(1) i{ margin-top: 8px;} } #digital_srv{ padding: 200px 0; background: #090214 url(images/background/bg_dark.png); background-attachment: fixed !important; background-position: 50% 0 !important; background-size: 75% !important; background-repeat: no-repeat; position: relative; overflow: hidden;} #digital_srv h2{ color: #fff;} #digital_srv h2 img{ width: 120px; display: inline-block; position: relative; top: 1px;} #digital_srv .top_course{ background-position: 50% 100% !important; background-size: cover !important;} #digital_srv .infobox .txt{ font-weight: bold;} .digi_txt{ color: #fff; font-weight: bold; font-size: 18px; line-height: 32px; text-shadow: 1px 1px 1px #000; display: block;} #digital_srv .movement{ max-width: 70px; margin: auto; position: absolute; left: 0; top: 105%; display: block; transform: rotate(35deg);} #digital_srv .movement.active{ animation: move 3s linear 1;} #digital_srv .main2{ padding: 20px 15px; background: #09021485;} .quote_txt{ margin-top: 20px; font-size: 22px; line-height: 35px;} .quote_txt i{ padding: 0 10px; color: #d07821; position: relative;} .quote_txt .q_right{ bottom: 5px;} .quote_txt .q_left{ top: 10px;} @keyframes move{ 0% { left: 15%; top: 100%; } 50% { left: 40%; top: 50%; } 100% { left: 75%; top: -70px; } } @media only screen and (max-width: 768px) { #digital_srv, #costumers{ padding: 70px 0;} #digital_srv{ background-attachment: scroll !important; background-position: 60% -50% !important; background-size: 1000px !important;} } #all_srv.full_hgt{ text-align: right;} #all_srv .txt b{ color: #d07821;} #all_srv .flexbox .run i{ display: inline-block; transition: all linear 0.5s;} #all_srv .flexbox .run i:nth-child(1),#all_srv .flexbox .run i:nth-child(3){ color: #ccc;} #all_srv .flexbox .run i:nth-child(1){ position: relative; left: -12px;} #all_srv .flexbox .run i:nth-child(3){ position: relative; right: 5px;} #all_srv .flexbox i.go_to{ left: 0;} #all_srv .flexbox > a:hover i.go_to{ position: relative; left: 130px; opacity: 0;} #costumers{ padding:100px 0; color:#4A4A4A; background:#eee;} #costumers .ilog_header{ padding-bottom:40px;} #costumersBox{ align-items: stretch;} #costumersBox .each_cost{ width:Calc(20% - 6px); padding:10px 0 20px; margin:3px; background:#fff; text-align:center;} #costumersBox .each_cost img{ width:100%; max-width:200px;} #costumersBox .each_cost a{ display:block; transition:all linear 0.2s;} #costumersBox .each_cost a.title{ padding:0 7px; margin-bottom:3px; color:#1181b9; font-weight: bold; font-size: 15px; line-height:26px; text-align: center;} #costumersBox .each_cost a:hover{ opacity:0.7;} #costumersBox .each_cost .cost_date{ padding:0 7px; font-size:12px; line-height: 20px; font-family:sans-serif;} #costumersBox #your_place{ padding:0;} #costumersBox #your_place > div{ width:100%; height:100%; background:url(images/logo/costumers/bg_logo.jpg); background-size:cover; color:#fff; font-weight: bold; font-size:20px; text-shadow:1px 1px 1px #333; justify-content:center; align-items:center;} @media only screen and (max-width: 768px) { #about_mentor #costumers{ padding: 70px 0;} #costumersBox .each_cost{ width:Calc(50% - 6px);} } #projects .flexbox{ align-items: stretch; justify-content: center;} #projects .flexbox > div{ width: Calc(20% - 4px); padding: 40px 20px; margin-left: 5px; background: #f4f4f4; text-align: center;} #projects .flexbox > div:last-child{ margin-left: 0;} #projects .flexbox img{ max-width: 125px; width: 100%; margin: auto; display: block;} #projects .flexbox b{ margin-top: 18px; padding-top: 8px; font-size: 16px; line-height: 28px; border-top: 1px solid #ddd; display: block;} @media only screen and (max-width: 768px) { #projects .flexbox > div{ width: Calc(50% - 2.5px); margin: 0 0 5px 5px;} #projects .flexbox > div:nth-child(2n){ margin-left: 0;} } #seo_tb{ padding: 0 0 100px;} #seo_tb table{ width: 100%; margin: 20px auto;} #seo_tb table tr:first-child{ color:#d07821; font-weight: bold;;} #seo_tb table tr:first-child td{ font-size:16px !important; white-space: nowrap;} #seo_tb table td{ padding:5px 5px; font-size:14px; border-bottom:1px solid #ddd; text-align:center;} #seo_tb table td:nth-child(2){ text-align: right;} #seo_tb table tr:nth-child(2n) td{ background: #f4f4f4;} #seo_tb table tr:last-child td{ background: #ffbcbc; font-weight: bold;; text-align: center; border-bottom: none;} #seo_tb table tr:last-child td:first-child{ text-align: left;} @media only screen and (max-width: 900px) { #seo_tb table{ max-width: 600px; margin: 20px auto auto;} #seo_tb table tr{ margin-bottom: 20px;} #seo_tb table tr,#seo_tb table td{ text-align: right !important; display: block;} #seo_tb table tr:first-child{ display: none;} #seo_tb table tr:last-child td{ background: #ffeaea; border-bottom:1px solid #ddd;} #seo_tb table tr td:last-child{ border-bottom: none;} #seo_tb table tr td:empty{ display: none;} #seo_tb table tr td:before{ padding-left: 3px; color: #d07821; font-weight: bold;} #seo_tb table tr td:nth-child(1){ background: #d07821; color: #fff; font-weight: bold; text-align: center !important;} #seo_tb table tr td:nth-child(1):before{ content: "ردیف"; color: #fff;} #seo_tb table tr td:nth-child(2):before{ content: "شرح کالا:";} #seo_tb table tr td:nth-child(3):before{ content: "تعداد:";} #seo_tb table tr td:nth-child(4):before{ content: "مبلغ واحد (ریال):"} #seo_tb table tr td:nth-child(5):before{ content: "مبلغ کل (ریال):"} #seo_tb table tr td:nth-child(6):before{ content: "تخفیف:"} #seo_tb table tr td:nth-child(7):before{ content: "جمع مالیات (ریال):"} #seo_tb table tr td:nth-child(8):before{ content: "مبلغ نهایی (ریال):"} #seo_tb table tr:last-child td:nth-child(1):before{ content: "";} #seo_tb table tr:last-child td:nth-child(2):before{ content: "مبلغ کل (ریال):"} #seo_tb table tr:last-child td:nth-child(3):before{ content: "تخفیف:"} #seo_tb table tr:last-child td:nth-child(4):before{ content: "جمع مالیات (ریال):"} #seo_tb table tr:last-child td:nth-child(5):before{ content: "مبلغ نهایی (ریال):"} } #foot_slogon{ padding: 30px 0; background: #d07821; color: #fff; font-weight: bold; font-size: 25px; line-height: 40px;} #f_contact{ padding: 30px 0; background: #f4f4f4;} #f_contact .flexbox > a{ color: #537BB9; font-size: 18px; display: inline-block; transition: all linear .2s;} #f_contact .flexbox > a:hover{ opacity: 0.7;} #f_contact .flexbox > a i{ width: 40px; height: 40px; line-height: 38px; margin-left: 5px; text-align: center; color: #d07821; border:2px solid #d07821; border-radius: 50%;} #f_contact .flexbox > div{ margin-right: auto;} #f_contact .flexbox > div a{ color: #333;} @media only screen and (max-width: 500px) { #f_contact{ text-align: center;} #f_contact .flexbox > a{ margin: auto auto 20px; display: block;} #f_contact .flexbox > div{ width: 100%;} } /**print**/ @media print { .noprint{display:none!important;} .full_hgt{ height: 100vh !important;} .p_center{ height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important;} .bg_cover{ padding-bottom: 0 !important;} /* #about_mentor .routing{ display: block;} #about_mentor .routing .level{ width: 100%; height: 100vh !important; position: static !important;} #about_mentor .routing .level img{ display: none;} */ #about_mentor .level .title{ margin-bottom: 0 !important; font-size: 18px; line-height: 28px;} #about_mentor .routing .level{ height: 100vh !important; padding: 0 15px; font-size: 13px; display: flex; flex-direction: column; border-right: 2px solid #ddd;} #about_mentor .routing .level .num_box{ width: 40px; height: 40px; line-height: 35px; font-size: 18px;} #about_mentor .routing .flex_align{ height: 100vh !important;} .routing .img_b{ width: 100px; top: 15px;} .routing .img_c{ width: 180px; bottom: inherit; top: 15px;} .routing .img_e{ width: 100px; top: -40px;} .routing .img_f{ width: 100px; top: -15px; } .routing .flex_align{ margin-bottom: 30px;} .routing .mrgbt0{ margin-bottom: 0 !important;} .padd145, .padd145_b{ padding-top: 100px !important;} .paddbt, .bg_cover{ padding-bottom: 0 !important;} .bann_box > div{ padding: 0 40px !important;} #slogon{ padding-right: 40px; padding-left: 40px;} #digital_srv{ padding: 0 !important; background-attachment: scroll !important;} #digital_srv .main2{ height: 100% !important;} .digi_txt{ position: relative; bottom: 60px;} #step_route, #routing_sec, #costumers{ padding: 0; border-bottom: none;} #step_route .main2, #costumers .main2{ height: Calc(100vh - 75px); padding: 20px 15px;} #seo_tb .main2{ height: Calc(100vh - 75px);} #route_first{ margin-top: 0;} }