/* ςσρуяιgнт R.Saemi */ /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } /**************** FONTS ****************/ @font-face { font-family: 'iransans'; src: url('../assets/fonts/iransans/IRANSansWeb(FaNum).woff') format('woff'); } @font-face { font-family: 'HelveticaNeueB'; src: url('../assets/fonts/HelveticaNeue-Medium.woff') format('woff'); } /**************** Global Style ****************/ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: inherit; } strong { font-weight: bold; } img { vertical-align: middle; } .no-padding { padding-right: 0; padding-left: 0; } * a { text-decoration: none; color: inherit; } .container-fluid { overflow-x: hidden; } a:focus { text-decoration: none; outline: none; color: inherit; } *:focus { outline: none; } ul { list-style-position: inside; } a:hover { text-decoration: none; color: inherit; } body { overflow-x: hidden; font-family: 'iransans'; font-size: 15px; line-height: 32px; color: #000; } .wide { width: 1310px; margin: 0 auto; max-width: 100%; padding: 0 20px; } .sec-header { text-align: center; width: 800px; padding: 0 10px; max-width: 100%; margin: 0 auto; } .sec-title { position: relative; font-size: 40px; text-align: center; text-transform: uppercase; margin: 0; } .sec-title:before { content: ''; width: 87px; height: 13px; background: #e01921; display: block; margin: 0 auto 35px auto; } .sec-des { margin-top: 15px; /* letter-spacing: 0.5px; */ font-size: 16px; line-height: 25px; /* margin-bottom: 50px; */ text-align: center; color: #9a9a9a; } .sec-des:after { content: ''; width: 87px; height: 1px; border-bottom: 1px dashed #c3c1c1; display: block; margin: 7px auto 0 auto; } .icon-bg { background: url(../../images/icons.png); display: inline-block; } .basket-ico { width: 26px; height: 19px; background-position: -3px -27px; vertical-align: middle; } .search-toggle { width: 13px; height: 13px; background-position: -39px -3px; vertical-align: middle; cursor: pointer; } .pdf-down { width: 71px; height: 28px; background-position: -138px -534px; transition: all 0.3s ease } .office { background-position: -9px -58px; } .factory { background-position: -5px -154px } .read-more { width: 180px; height: 30px; line-height: 28px; text-align: center; text-transform: uppercase; color: #000; letter-spacing: 1px; font-size: 12px; position: relative; overflow: hidden; transition: all 0.3s ease; border: 1px solid #c1bfbf; } .read-more:after { content: attr(data-text); color: #e01921; position: absolute; top: -39px; right: 0; left: 0; margin: 0 auto; font-weight: bold; } .read-more:hover { line-height: 105px; } .bold-read-more { position: relative; margin: 0 auto; width: 165px; height: 58px; border: 1px solid rgba(255,255,255,0.3); border-radius: 5em; text-transform: uppercase; display: block; text-align: center; transition: all 0.3s ease; position: relative; direction: ltr } .bold-read-more:before, .bold-read-more:after { content: ''; width: 195px; height: 1px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); position: absolute; top: 25px; transition: all 0.3s ease; } .bold-read-more:before { left: -205px; } .bold-read-more:after { right: -205px; } .bold-read-more > span:first-child { width: 150px; height: 45px; background: #e01921; color: #fff; display: block; border-radius: 5em; margin: 5px auto; font-size: 12px; letter-spacing: 1px; line-height: 45px; transition: all 0.3s ease; overflow: hidden; position: relative; } .bold-read-more > span:first-child:after { content: attr(data-text); color: #fff; position: absolute; top: -39px; right: 0; left: 0; margin: 0 auto; font-weight: bold; } .bold-read-more:hover span:first-child { line-height: 122px; } .bold-read-more .dot { content: ''; position: absolute; top: 0; width: 58px; height: 56px; border-radius: 100%; transition: all 300ms ease; display: none; opacity: 0; } .bold-read-more .dot:after { content: ''; position: absolute; left: calc(50% - .4em); top: -.3em; height: 5px; width: 5px; background: #e01921; border-radius: 100%; border: 4px solid #e01921; /*box-shadow: 0 0 10px #fff;*/ } .new-read-more { width: 240px; height: 50px; border: 1px solid rgba(255,255,255,.3); border-radius: 5em; text-align: center; padding: 5px; margin-top: 30px; } .new-read-more span { color: #fff; background: #e01921; font-size: 15px; display: block; border-radius: 5em; height: 40px; line-height: 40px; transition: all 0.3s ease; } .new-read-more span:hover { color: #fff !important; background: #353535 !important; } .new-read-more img { position: inherit !important; display: inline-block !important; margin: 0 25px !important; } .bold-read-more:hover .dot, .bold-read-more:focus .dot { animation: atom 3s infinite linear; display: block; opacity: 1; } .fa-aparat { width: 18px; height: 18px; background: url(../../images/icons.png); background-position: -10px -368px; } .fa-aparat:hover { background-position: -35px -368px; } /*.bold-read-more:hover{ border: 1px solid #e01921}*/ @keyframes atom { 0% { transform: translateX(0) rotate(0); } 30% { transform: translateX(105px) rotate(0); } 50% { transform: translateX(105px) rotate(180deg); } 80% { transform: translateX(0) rotate(180deg); } 100% { transform: translateX(0) rotate(360deg); } } /**************** header ****************/ header { position: fixed; right: 0; left: 0; z-index: 15; background: rgba(255,255,255,1); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 29%, rgba(243,243,243,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(29%, rgba(250,250,250,1)), color-stop(100%, rgba(243,243,243,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 29%, rgba(243,243,243,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 29%, rgba(243,243,243,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 29%, rgba(243,243,243,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 29%, rgba(243,243,243,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0 ); height: 110px; transition: all 0.5s ease; } header .wide { transition: all 0.5s ease } header ul { list-style: none; display: inline-block; vertical-align: middle; } header ul li { display: inline-block; } header .top-menu { float: left; color: #a2a9b1; height: 44px; line-height: 44px; font-size: 11px; transition: all 0.5s ease; border-bottom: 1px solid #f2f2f2; overflow: hidden; } header .top-menu > div { display: inline-block; line-height: 10px; } header .top-menu .date { padding: 0 20px; border-left: 1px dotted #838383; margin-left: 20px; } header .top-menu .time { width: 70px; direction: ltr; } /*header .top-menu .basket-box { display: none }*/ header .top-menu .social { margin-right: 38px; /*margin-left: 13px;*/ } header .top-menu .social a { font-size: 18px; color: #a2a9b1; display: inline-block; position: relative; width: 35px; text-align: center; transition: all 0.3s ease; vertical-align: middle } header .top-menu .social a:hover { color: #e01921; } header .top-menu .social a:after { content: ''; position: absolute; width: 1px; height: 10px; border-left: 1px dotted #838383; left: 0; top: 4px; } header .top-menu .social .fa-paper-plane { font-size: 16px; } header .top-menu .basket-box .items-count { margin: 0 5px; display: none } header .top-menu .basket-box:hover .basket-ico { background-position: -62px -27px; } header .top-menu .login { font-size: 13px; padding: 0 17px; position: relative; transition: all 0.3s ease } header .top-menu .login:after, header .top-menu .login:before { content: ''; position: absolute; width: 1px; height: 10px; border-left: 1px dotted #838383; top: 4px; } header .top-menu .login:after { left: 0; } header .top-menu .login:before { right: 0; display: none } header .top-menu .login a:before { content: ''; background: url(../../images/icons.png) -39px -24px; width: 18px; height: 17px; display: inline-block; vertical-align: middle; margin-left: 8px; } header .top-menu .login:hover { color: #e01921; } header .top-menu .search { padding: 0 10px; } header .top-menu .search .search-box { position: fixed; right: 0; left: 0; top: 110px; display: none; background: #292986; text-align: center; padding: 20px; } header .top-menu .search .search-box input { width: 100%; height: 60px; margin: 0 auto; border-radius: 10px; font-size: 18px; background: #FFF; border: none; text-align: center; text-transform: uppercase; color: #292986; padding: 0 15px; text-align: right } header .top-menu .search .search-box input::placeholder { color: #292986; } header .top-menu .search .search-box .fa-times { position: absolute; left: 35px; top: 38px; font-size: 20px; color: #292986; } header .top-menu .search .search-box > div { right: 0; left: 0; display: block; max-width: inherit !important; width: 100% !important; font-size: 14px; } header .top-menu .language a { border-right: 1px dotted #838383; padding: 0 13px 0 8px; display: inline-block; transition: all 0.3s ease; } header .top-menu .language a:last-child { padding-left: 0; font-weight: bold; color: #83888e; cursor: default } header .top-menu .language a:first-child:hover { color: #e01921; font-weight: bold } header .bottom-menu { clear: both; } header .bottom-menu .logo { float: right; margin-top: -35px; } header .bottom-menu .menu { float: left; transition: all 0.5s ease; } header .bottom-menu .menu nav { padding: 0; } header .bottom-menu .menu ul li { padding: 0 11px; position: relative } header .bottom-menu .menu ul li a { font-size: 15px; line-height: 65px; position: relative } header .bottom-menu .menu ul li a:after { content: ''; width: 7px; height: 7px; border-radius: 50%; position: absolute; left: 0; right: 100%; margin: 0 auto; bottom: 10px; background: #e01921; transform: scale(0); transition: all 0.5s ease; opacity: 0; } header .bottom-menu .menu ul li a:before { content: ''; width: 7px; height: 7px; border-radius: 50%; position: absolute; right: 0; left: 100%; margin: 0 auto; bottom: 10px; background: #e01921; transform: scale(0); transition: all 0.5s ease; opacity: 0; } header .bottom-menu .menu ul li:before { content: ''; width: 0px; height: 2px; position: absolute; right: 0; left: 0; margin: 0 auto; bottom: 12.6px; border-bottom: 2px solid #e01921; transition: all 0.3s ease; } header .bottom-menu .menu ul li:hover a:after { transform: scale(1); right: 0; opacity: 1 } header .bottom-menu .menu ul li:hover a:before { transform: scale(1); left: 0; opacity: 1 } header .bottom-menu .menu ul li:hover:before { width: 100%; } header .bottom-menu .menu ul li:last-child { padding-left: 0; } header .dropdown-menu { top: 100%; right: -3px; border: none; padding: 0; margin: 0; border-radius: 0; background: #f3f3f3; border-radius: 0 0 10px 10px; text-align: right; min-width: 140px; } header .dropdown-menu li { display: block !important; padding: 0 !important } header .dropdown-menu li:before, header .dropdown-menu li a:before, header .dropdown-menu li a:after { display: none !important } header .dropdown-menu li a { font-size: 13px !important; border-bottom: 1px solid #e0dddd; line-height: 35px !important; } header .dropdown-menu li:last-child a { border-bottom: none; border-radius: 0 0 10px 10px; } header .dropdown-menu li a:after { display: none; } header .dropdown-menu > li > a:hover, header .dropdown-menu > li > a:focus { background: #e01921; color: #fff !important; } header .dropdown-submenu { position: relative; } header .dropdown-submenu .dropdown-menu { right: 100%; top: 0; min-width: 160px; border-radius: 0 } header .dropdown-submenu .caret { content: ''; display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: middle; border-right: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; vertical-align: middle; } header.scroll { /*height: 85px;*/ top: 0 !important; } /*header.scroll .wide { width: 100%; padding-left: 90px; }*/ /*header.scroll .bottom-menu .logo { transform: scale(0.8); margin-top: -4px; } header.scroll .bottom-menu .menu { margin-top: 10px; } header.scroll .top-menu { height: 0; } header.scroll .search-box { top: 85px !important; }*/ /**************** Banner ****************/ #Banner { margin-top: 110px; position: relative; } #Banner .item .wide { position: absolute; top: 0; bottom: 0; color: #ffffff; right: 0; left: 0; } #Banner .item > a { display: block; } #Banner .owl-carousel .owl-item { height: 540px; } #Banner .item a > img { max-width: inherit; transform: scale(1.15); transition: all 10s ease; position: absolute; left: -9999px; right: -9999px; margin: 0 auto; } #Banner .location-area { width: 440px; height: 107px; position: absolute; right: -500px; top: 35px; background: rgba(0,0,0,0.6); padding: 18px 20px; transition: all 1s ease; max-width: 100%; } #Banner .location-area.active { transform: translateX(100px); } #Banner .location-area ul { list-style: none; padding: 0 25px; } #Banner .location-area ul li { display: inline-block; font-size: 16px; letter-spacing: 2px; } #Banner .location-area ul li:first-child:after { content: "|"; color: #e73a2e; margin: 0 7px 0 10px; font-size: 20px; } #Banner .location-area h3 { border-top: 2px solid #e73a2e; padding: 10px 25px 0 25px; font-weight: bold; font-size: 19px; margin-top: 0; word-spacing: 2px; } #Banner .banner-des { position: absolute; bottom: 75px; text-align: center; color: #fff; width: 100%; } #Banner .banner-des h5 { font-size: 27px; word-spacing: 1px; text-transform: uppercase; letter-spacing: 1px; margin-top: 20px; margin-bottom: 35px; /*animation-delay: 0.5s;*/ text-shadow: 1px 0 10px #000; } #Banner .banner-des h3 { font-size: 40px; letter-spacing: 1px; margin-top: 10px; font-weight: bold; text-transform: uppercase; transition-delay: 0.1s; text-shadow: 1px 0px 10px #000; } /*#Banner .owl-item.active h5, #Banner .owl-item.active h3 { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; }*/ #Banner .owl-item.active h3 { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } #Banner .owl-item.active h5 { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } #Banner .banner-des .bold-read-more { transform: translateY(20px); opacity: 0; transition: all 01s ease; transition-delay: 0.9s; } #Banner .owl-item.active .bold-read-more { transform: translateY(0); opacity: 1 } #Banner .owl-item.active img { transform: scale(1) } #Banner .owl-controls { position: absolute; bottom: 30px; right: 0; left: 0; color: #e73a2e; font-size: 25px; padding: 0 40px; text-align: center; } #Banner .owl-controls .owl-dot { width: 15px; height: 15px; background: rgba(255, 255, 255, 0.20); display: inline-block; border-radius: 50%; margin: 0 3px; } #Banner .owl-controls .owl-dot.active { background: #fff; } #Banner .owl-controls .owl-next { float: right; } #Banner .banner-des strong { position: absolute; top: -125px; right: 0; left: 0; } #Banner .banner-des p { font-size: 16px; margin: 30px 0; } #Banner .banner-des p span { font-weight: bold; color: #61c3c9; } /****************About ****************/ #About { background: url(../../images/about-bg.jpg); background-attachment: fixed; text-align: center; } #About .about-text { width: 810px; margin: 0 auto; max-width: 100%; padding: 45px 15px; } #About .about-text .sec-des { color: #e01921; } #About .about-text .sec-des:after { border-bottom: 1px dashed #ffd9da; } #About .about-text p { font-size: 17px; margin-bottom: 75px; margin: 25px 0 70px 0; text-align: justify; text-align-last: center } #About .about-goal { background: url(../../images/about-bg-over.jpg); background-attachment: fixed; padding-top: 45px; height: 610px; position: relative; } #About .about-goal .sec-des { margin-bottom: 32px; } #About .about-goal:after { content: ''; position: absolute; right: 0; left: 0; bottom: 0; height: 235px; background: #61c3c9; } #About .about-goal .item { color: #fff; } #About .about-goal .item * { } #About .about-goal .item > a { display: inline-block; background: #f3f3f3; border-radius: 50%; border: 3px solid #fff; transition: all 0.3s ease; position: relative } #About .about-goal .item > a img { transition: all 0.3s ease } #About .about-goal .item > a img:nth-child(2) { position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0 } #About .about-goal .item h3 { font-size: 19px; margin-top: 35px; transition: all 0.3s ease; } #About .about-goal .item p { font-size: 13px; letter-spacing: 0.7px; color: #ffffffd9; line-height: 25px; transition: all 0.3s ease; } #About .about-goal .item p:after { content: '...'; display: block; letter-spacing: 3px; transition: all 0.3s ease; color: #ffffffd9; } #About .owl-item.active .item { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } #About .owl-item.active:nth-child(2) .item { animation-delay: 0.3s; } #About .owl-item.active:nth-child(3) .item { animation-delay: 0.6s; } #About .owl-item.active:nth-child(4) .item { animation-delay: 0.9s; } #About .item:hover > a { background: #61b2c9; } #About .about-goal .item:hover > a img:nth-child(1) { filter: brightness(100); transform: rotateY(180deg); opacity: 0.8; } /*#About .about-goal .item:hover > a img:nth-child(2) { opacity: 1 }*/ #About .item:hover h3, #About .item:hover p { color: #0e519d; } #About .item:hover p:after { letter-spacing: 7px; color: #0e519d; } /****************Product ****************/ #Product .small-logo { width: 92px; height: 92px; background-position: -14px -432px; position: absolute; right: 0; left: 0; margin: 0 auto; top: -45px; } #Product { height: 1600px; background: #ededed url(../../images/pattern.gif); position: relative; padding-top: 100px; } #Product:after { content: ''; height: 955px; width: 100%; position: absolute; bottom: 0; right: 0; left: 0; background: url(../../images/product-bg.jpg); background-attachment: fixed; } #Product .sec-title { color: #61c3c9; margin-bottom: 5px; font-weight: bold } #Product .sec-title:before { display: none; } #Product .owl-stage { transition: all 0s ease !important; } #Product .circle-product:before { content: ''; width: 1150px; height: 1150px; background: url(../../Images/BG-Circle.png); position: absolute; top: -60px; /* right: 0; */ left: -59px; /* margin: 0 auto; */ webkit-animation: spinny 15s linear infinite; animation: spinny 15s linear infinite; z-index: -1 } #Product .circle-product { width: 1032px; height: 1032px; background: #292986; border-radius: 50%; position: relative; margin: 0 auto; z-index: 2; margin-top: 35px; padding-top: 120px; transition: all 3s ease } #Product .circle-product:after { content: ''; width: 510px; height: 439px; background: url(../../images/icons.png) -181px 0px; position: absolute; right: 0; left: 0; margin: 0 auto; top: 226px; } #Product .circle-product .owl-stage { height: 915px; } #Product .circle-product .owl-item .item { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #Product .circle-product .owl-item.active .item { -webkit-animation-name: fadeIn; animation-name: fadeIn; } #Product .circle-product.active { background: #61b2c9; } /*#Product .circle-product .owl-item.active .product-item:nth-child(1) .product-des{-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } #Product .circle-product .owl-item.active .product-item:nth-child(2) .product-des{-webkit-animation-name: fadeInRight; animation-name: fadeInRight; } #Product .circle-product .owl-item.active .product-item:nth-child(3) .product-des{-webkit-animation-name: fadeInUp; animation-name: fadeInUp; }*/ #Product .circle-product .product-item { width: 516px; font-size: 12px; float: left; } #Product .circle-product .product-des { padding-left: 80px; line-height: 25px; padding-bottom: 20px; height: 396px; overflow: hidden; animation-duration: 1000ms; text-align: right; direction: rtl } #Product .circle-product h2 { font-weight: bold; color: #fff; font-size: 32px; margin-bottom: 15px; transition: all 0.3s ease } #Product .circle-product h2:hover { color: #292986 } #Product .circle-product h6 { font-weight: bold; font-size: 12px; margin-bottom: 0 } #Product .circle-product p { padding-left: 20px; margin: 5px 0; margin-bottom: -5px; font-size: 14px; } #Product .circle-product ul { list-style: none; line-height: 30px; margin-bottom: 15px; } #Product .circle-product ul li { position: relative; } #Product .circle-product ul li:after, #Product .circle-product ul li:before { content: ''; height: 1px; position: absolute; right: 0; top: 30px; } #Product .circle-product ul li:after { width: 70px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); } #Product .circle-product ul li:before { border-bottom: 1px solid rgba(255, 255, 255, 1); width: 12px; } #Product .circle-product .read-more { width: 140px; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; margin-left: 7px; } #Product .circle-product .pdf-down:hover { background-position: -138px -570px } #Product .circle-product img { max-width: inherit !important; } #Product .circle-product .product-item:nth-child(1) .product-des { padding-left: 125px; padding-right: 100px; } #Product .circle-product .product-item:nth-child(2) .product-des { padding-right: 175px; } #Product .circle-product .product-item:nth-child(3) { padding: 0; width: 100%; text-align: center; margin-top: -140px; position: relative; } #Product .circle-product .product-item:nth-child(3) .product-des { padding: 0; width: 430px; margin: 0 auto; text-align: right; padding-left: 30px; direction: rtl } #Product .circle-product .product-item:nth-child(3) .product-des h2 { font-size: 34px; margin-left: -30px; text-align: center } #Product .circle-product .product-item:nth-child(3) .product-des h6 { margin-left: -30px; } #Product .owl-nav > div { width: 105px; height: 105px; background: #61b2c9; border: 1px solid #fff; border-radius: 50%; display: inline-block; text-align: center; line-height: 125px; position: relative } #Product .owl-nav > div:before, #Product .owl-nav > div:after { content: ''; position: absolute; right: 0; left: 0; top: 0; bottom: 0; border-radius: 50%; border: 1px solid #fff; transform: scale(0.4); opacity: 0; transition: all 1s ease } #Product .owl-nav > div:hover:before, #Product .owl-nav > div:hover:after { transform: scale(1); opacity: 0.5 } #Product .owl-nav > div:hover:before { transition-delay: 0.3s } #Product .owl-controls { width: 710px; position: absolute; right: 0; left: 0; margin: 0 auto; bottom: 300px; } #Product .owl-controls .owl-next { float: right; } #Product .owl-controls .slider-right-btn { background-position: -61px -572px; } #Product .owl-controls .slider-left-btn { background-position: -17px -572px; } #Product .owl-controls .owl-prev { float: left; } #Product .owl-nav > div span { width: 25px; height: 40px; background: url(../../images/icons.png); display: inline-block; filter: brightness(100); } #Product .owl-nav > div.disabled span { filter: none; } #Product .product-video .video-toggle { z-index: 2; width: 210px; height: 210px; background: #e01921; border-radius: 50%; position: absolute; right: 0; left: 0; margin: 0 auto; top: 414px; text-align: center; } #Product .product-video .video-toggle .play-icon { width: 110px; height: 110px; border-radius: 50%; border: 2px solid #fff; background-position: -6px -622px;; margin-top: 50px; cursor: pointer; position: relative; z-index: 2 } #Product .video-box { background: rgba(0, 0, 0, 0.8); padding-top: 160px; text-align: center; top: -100%; transition: all 0.5s ease; } #Product .video-box.in { top: 0; } #Product .video-box .video { display: inline-block; position: relative; } #Product .video-box .video .close { position: absolute; right: 0; top: -40px; opacity: 1; font-size: 30px; color: #969494; text-shadow: none; } #Product .video-box video { max-width: 100%; } .logo-animate { position: absolute; top: -48px; left: 0; width: 100%; min-height: 260px; z-index: 1; } .circle-wave { position: absolute; z-index: 100; right: 50%; width: 0px; height: 0px; border: 1px solid #fff; opacity: 0; border-radius: 50%; animation: pulse 10s infinite; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; } .c2 { -webkit-animation-delay: 1s; animation-delay: 1s; } .c3 { -webkit-animation-delay: 2s; animation-delay: 2s; } .c4 { -webkit-animation-delay: 3s; animation-delay: 3s; } .c5 { -webkit-animation-delay: 4s; animation-delay: 4s; } .c5 { -webkit-animation-delay: 4s; animation-delay: 4s; } @keyframes pulse { 0% { width: 0; height: 0; margin-right: -75px; top: 100px; opacity: 0; } 70% { width: 0; height: 0; margin-right: -75px; top: 100px; opacity: 0; } 80% { width: 110px; height: 110px; margin-right: -55px; top: 100px; opacity: 0; } 90% { opacity: 0.5; } 100% { width: 200px; height: 200px; margin-right: -100px; top: 50px; opacity: 0; } } #Product .product-chart .chart-toggle { width: 107px; height: 107px; border: 1px solid #fff; border-radius: 50%; position: absolute; right: 0; left: 0; margin: 0 auto; top: 121px; cursor: pointer; z-index: 2; } #Product .product-chart .chart-toggle:before { content: ''; background: url(../../images/icons.png); width: 107px; height: 107px; position: absolute; right: 0; left: 0; bottom: 0; top: 0; background-position: -254px -454px; animation: chart 15s ease infinite; } #Product .product-chart .chart-toggle:hover:before { transform: rotate(-180deg) } #Product .product-chart .chart-toggle span { position: absolute; font-size: 23px; font-family: 'HelveticaNeueB'; font-weight: bold; letter-spacing: 1px } #Product .product-chart .chart-toggle span:nth-child(1), #Product .product-chart .chart-toggle span:nth-child(3) { right: 0; left: 0; margin: 0 auto; text-align: center } #Product .product-chart .chart-toggle span:nth-child(1) { top: 10px; } #Product .product-chart .chart-toggle span:nth-child(3) { bottom: 10px; } #Product .product-chart .chart-toggle span:nth-child(2) { top: 37px; right: 5px; } #Product .product-chart .chart-toggle span:nth-child(4) { top: 37px; left: 5px; } #Product .product-chart .chart-toggle .blue { color: #81c1d4; animation: blue 15s ease infinite; } #Product .product-chart .chart-toggle .white { color: #fff; animation: white 15s ease infinite; } #Product .chart-box { background: rgba(0, 0, 0, 0.8); padding-top: 120px; text-align: center; top: -100%; transition: all 0.5s ease; } #Product .chart-box.in { top: 0; } #Product .chart-box .close { position: absolute; right: 50px; top: 50px; opacity: 1; font-size: 30px; color: #969494; text-shadow: none; } #Product .chart-box img { margin: 0 auto } #Product .chart-box .carousel-control { background: none !important; width: 100px; font-size: 27px; padding-top: 19%; } @keyframes chart { 0% { transform: rotate(0) } 45% { transform: rotate(0) } 50% { transform: rotate(-180deg) } 60% { transform: rotate(-180deg) } 80% { transform: rotate(-180deg) } 95% { transform: rotate(-180deg) } 100% { transform: rotate(0) } } @keyframes blue { 0% { color: #81c1d4 } 45% { color: #81c1d4 } 50% { color: #fff } 60% { color: #fff } 80% { color: #fff } 95% { color: #fff } 100% { color: #81c1d4 } } @keyframes white { 0% { color: #fff } 45% { color: #fff } 50% { color: #81c1d4 } 60% { color: #81c1d4 } 80% { color: #81c1d4 } 95% { color: #81c1d4 } 100% { color: #fff } } .notactive { display: none; } #Product .product-text { margin-top: 40px; BOTTOM: -970PX; position: relative; z-index: 1; } #Product .product-text h3 span { display: block; text-align: center; text-transform: uppercase; color: #ffffff; font-size: 33px; line-height: 50px; } #Product .product-text h3 span:first-child { color: #61b2c9; font-weight: bold; font-size: 47px; letter-spacing: 1px; } @-webkit-keyframes spinny { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes spinny { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes move { from { -webkit-transform: translateX(100px); transform: translateX(100px); } to { -webkit-transform: translateX(-100px); transform: translateX(-100px); } } @keyframes shortmove { 0% { -webkit-transform: translateX(15px); transform: translateX(15px); } 100% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } } .chart-aarow { position: absolute; right: 0; left: 0; margin: 0 auto; display: inline-block; text-align: center; top: 60px; color: #fff } .chart-aarow > span { font-weight: bold; } .chart-aarow .arrows { position: relative; } .chart-aarow .arrows span { display: block; position: absolute; right: 0; left: 0; color: #fff } .chart-aarow .arrows .first { animation: arrows 3s linear infinite; } .chart-aarow .arrows .second { animation: arrows 3s linear infinite -1.5s; } @keyframes arrows { 0% { opacity: 0; transform: translate(0, -10px); } 10%, 90% { opacity: 0 } 50% { opacity: 0.7; transform: translate(0, 0px); } 100% { opacity: 0; transform: translate(0, 10px); } } /****************Manager ****************/ #Manager .wide { padding: 30px 15px 50px 15px; background: #fff; margin-top: -140px; position: relative; z-index: 2; } #Manager .manager-img { overflow: hidden } #Manager .manager-img a { display: block; position: relative; overflow: hidden; direction: ltr; text-align: right } #Manager .manager-img a:after { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } #Manager:hover .manager-img a:after { -webkit-animation: shine 1s; animation: shine 1s; } #Manager .wide .manager-info { padding: 40px 0 50px 55px; } #Manager .wide .manager-info h3 { color: #61b2c9; font-size: 40px; text-transform: uppercase; margin-bottom: 25px; } #Manager .wide .manager-info p { text-align: justify; font-size: 14px; line-height: 25px; letter-spacing: 0.5px; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } /**************** News ****************/ #News { clear: both; background: #d6e9ee; } #News .read-more { color: #61c3c9; border: 1px solid #fff; background: #ededed; font-style: normal; } #News .wide { background: #86c3d5 url(../../images/pattern.gif); padding: 75px 90px 180px 90px; } #News .event { direction: ltr; } #News .event .news-title { text-align: right; } #News .news-box { width: 480px; max-width: 100%; border-left: 1px solid rgba(255, 255, 255, 0.35); height: 360px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); } #News .news-title { font-size: 40px; color: #fff; font-weight: bold; position: relative; transform: translateY(-20px); } #News .news-title:after { content: ''; width: calc(100% - 150px); height: 1px; background: rgba(255, 255, 255, 0.35); position: absolute; left: 0; bottom: 11px; } #News .item .news-item .news-img { display: block; padding-right: 30px; padding-left: 50px; } #News .item img { transition: all 0.3s ease; max-width: 100%; } #News .news-item { text-align: right; } #News .news-item h3 { font-size: 16px; color: #fff; margin-top: 0; line-height: 25px; letter-spacing: 0.2px; height: 46px; margin-top: -5px; padding-left: 50px; margin-bottom: 25px; } #News .news-item p { padding-left: 50px; font-size: 14px; line-height: 25px; color: #000000; height: 105px; margin-top: 20px; text-align: justify; direction: rtl } #News .news-item .news-info { color: #688383; font-size: 11px; text-transform: capitalize; font-style: italic; padding-left: 50px; direction: rtl } #News .news-item .news-info span { margin-left: 20px; } #News .news-item .news-info span:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; color: #55727a; margin-left: 5px; font-size: 12px; } #News .news-item .news-info span.writer { text-transform: uppercase; } #News .news-item .news-info span.writer:before { content: "\f007"; } #News .news-item .news-info .date:before { content: "\f073"; } #News .news-item .news-info > a { float: left; } #News .news-item:hover img { filter: brightness(1.5); } @-webkit-keyframes arrow { 0% { transform: translateX(0); } 50% { transform: translateX(5px); } 100% { transform: translateX(0); } } #News .owl-controls { text-align: center; margin-top: 65px; } #News .owl-dot { width: 50px; height: 4px; display: inline-block; background: #dddddd; transition: all 0.3s ease; margin: 0 4px; } #News .owl-dot.active { background: #181617; } /****************Counter ****************/ #Counter { background: #f5f5f5; color: #393939; text-align: center; padding: 70px 0 65px 0; } #Counter .wide { padding: 0; } #Counter .owl-item:nth-child(2) .counter-item { margin: 0 auto; } #Counter .owl-item:nth-child(3) { direction: rtl; } #Counter .item { padding-top: 55px; text-align: left; } #Counter img { margin: 0 auto; margin-top: -55px; } #Counter .counter-item { width: 325px; border-top: 1px solid #dcdcdc; text-align: right; direction: rtl; } #Counter .counter-item .counter { font-size: 62px; letter-spacing: 3px; margin-bottom: 20px; margin-top: 15px; display: block; } #Counter .counter-item h4 { font-size: 26px; margin-top: 20px; margin-bottom: 5px; } #Counter .counter-item p { font-size: 13px; line-height: 25px; } /****************Agancy****************/ #Agancy { padding: 45px 0 65px 0; min-height: 720px; } #Agancy .wide { width: 1365px; } #Agancy .sec-title { font-weight: bold; font-size: 22px; color: #3ccad6; } #Agancy .sec-title:before { background: #eeeeee; margin-bottom: 20px; } #Agancy .sec-des { margin-top: 10px; font-size: 15px; } #Agancy .agancy-box { margin-top: 50px; position: relative } #Agancy .agancy-map { display: inline-block; position: relative; margin-top: 45px; } #Agancy .agancy-map-pic { } #Agancy .agancy-point { width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0 } #Agancy .agancy-point .point { position: absolute; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; animation-delay: 0.7s } #Agancy .agancy-point .point:nth-child(even) { animation-delay: 1.2s } #Agancy .agancy-point .point:nth-child(5) { animation-delay: 1.8s } #Agancy .agancy-point .point:nth-child(3) { animation-delay: 2.5s } #Agancy .agancy-point .point em { color: #010186; transition: all 0.5s ease; position: relative; z-index: 2; cursor: pointer } #Agancy .agancy-point .pakistan { right: 248px; bottom: 185px; } #Agancy .agancy-point .india { right: 229px; bottom: 166px; } #Agancy .agancy-point .spain { left: 343px; bottom: 212px; } #Agancy .agancy-point .portugal { left: 332px; bottom: 208px; } #Agancy .agancy-point .italy { left: 370px; bottom: 223px; } #Agancy .agancy-point .poland { left: 389px; bottom: 243px; } #Agancy .agancy-point .belgium { left: 359px; bottom: 286px; bottom: 239px; } #Agancy .agancy-point .point .pulse { background: rgba(224, 25, 33,0.5); border-radius: 50%; height: 14px; width: 14px; position: absolute; left: 10px; top: 10px; margin: 11px 0px 0px -12px; -webkit-transform: rotateX(55deg); -moz-transform: rotateX(55deg); -o-transform: rotateX(55deg); -ms-transform: rotateX(55deg); transform: rotateX(55deg); display: none } #Agancy .agancy-point .point .pulse:after { content: ""; border-radius: 50%; height: 40px; width: 40px; position: absolute; margin: -13px -13px 0 0; -webkit-animation: pulsate 1s ease-out; -moz-animation: pulsate 1s ease-out; -o-animation: pulsate 1s ease-out; -ms-animation: pulsate 1s ease-out; animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-box-shadow: 0 0 1px 2px #ec4b52; box-shadow: 0 0 1px 2px #ec4b52; } #Agancy .agancy-point .point.active .pulse { display: block } #Agancy .agancy-point .point.active em { transform: scale(1.6); color: #e01921; } #Agancy .agancy-point span.name { display: block; margin: 0 auto; color: #e01921; position: absolute; left: -25px; text-align: center; font-size: 12px; line-height: 20px; width: 55px; font-weight: bold; opacity: 0; margin-top: 20px; transition: all .3s ease; background: #fff; border-radius: 5px; box-shadow: 0 0 15px #00000036 } #Agancy .agancy-point .agancy-logo { width: 50px; height: 50px; background: #fff; position: absolute; border-radius: 50%; text-align: center; top: -50px; line-height: 50px; left: -20px; opacity: 0; transition: all 0.3s ease; display: none } #Agancy .agancy-point .belgium span.name { transform: translateY(-67px); } #Agancy .agancy-point .point.active span.name { opacity: 1; margin-top: 13px; } #Agancy .agancy-point .point.active .agancy-logo { opacity: 1 } #Agancy .agancy-point .tooltip { z-index: 10 } #Agancy .agancy-countries { position: absolute; left: 0; top: 0; background: #fff; width: 480px; padding-top: 50px; } #Agancy .agancy-countries .agancy-item { border-bottom: 1px solid #f0f0f0; padding: 5px 0 } #Agancy .agancy-countries .agancy-item .agancy-title { cursor: pointer } #Agancy .agancy-countries .agancy-item .agancy-title em { width: 30px; height: 30px; border: 1px solid #9fe5eb; color: #3ccad6; text-align: center; line-height: 30px; border-radius: 50%; font-size: 13px; } #Agancy .agancy-countries .agancy-item.active .agancy-title em:before { content: "\f068"; } #Agancy .agancy-countries .agancy-item .agancy-title h4 { display: inline-block; font-weight: bold; font-size: 12.5px; letter-spacing: 0.5px; vertical-align: middle; margin: 0; margin-right: 10px; } #Agancy .agancy-countries .agancy-item .agancy-des { height: 0; transition: all 0.5s ease; overflow: hidden; color: #555555; font-size: 12px; padding-right: 50px; line-height: 25px; } #Agancy .agancy-countries .agancy-item.active .agancy-des { height: 175px; } #Agancy .agancy-link { margin-top: 100px; text-align: center; } #Agancy .agancy-link .read-more { width: 143px; height: 40px; line-height: 40px; text-transform: capitalize; letter-spacing: 0; font-size: 13px; margin: 0 7px; } #Agancy .agancy-link .read-more:hover { line-height: 115px !important; } #Agancy .agancy-link .read-more:last-child { background: #ededed; color: #3ccad6; border: 1px solid #d8d8d8 } #Agancy .agancy-link .read-more:first-child { background: #3ccad6; color: #ffffff; border: none } @-moz-keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { opacity: 1; -ms-filter: none; filter: none; } 100% { -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { opacity: 1; -ms-filter: none; filter: none; } 100% { -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { opacity: 1; -ms-filter: none; filter: none; } 100% { -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { opacity: 1; -ms-filter: none; filter: none; } 100% { -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } /****************Transportation ****************/ #Transportation { background: url(../../UserImage/transport-bg.jpg) center; background-attachment: fixed; padding: 50px 15px; background-size: cover } #Transportation .transport-box { width: 780px; max-width: 100%; margin: 0 auto; } #Transportation .transport-box .sec-title { font-weight: bold; font-size: 25px; text-shadow: 0 0; color: #fff; } #Transportation .transport-box .sec-title:before { background: #3ccad6; margin-bottom: 20px; } #Transportation .transport-box h2 { font-weight: bold; font-size: 23px; color: #3ccad6; margin-top: 7px; text-align: center; } #Transportation .transport-items { background: rgba(0, 0, 0, 0.6); text-align: center; padding: 25px 0; margin-top: 15px; } #Transportation .transport-items .transport-item { display: inline-block; margin: 0 40px; } #Transportation .transport-items .transport-item h4 { color: #3ccad6; font-size: 22px; font-weight: bold; margin-bottom: 5px; line-height: 15px; margin-top: 15px; } #Transportation .transport-items .transport-item span { color: #fff; font-size: 12px; } #Transportation .transport-items .transport-item > a { border: 1px solid #3e6570; border-radius: 50%; transition: all 0.3s ease } #Transportation .transport-items .transport-item:hover > a { transform: rotateY(180deg) } #Transportation .bold-read-more { direction: ltr; display: none } #Transportation .bold-read-more > span:first-child { background: #fff; color: #e01921; } #Transportation .bold-read-more > span:first-child:after { color: #e01921; } /**************** footer ****************/ footer { color: #fff; font-size: 12px; line-height: 25px; position: relative } footer .wide { width: 1430px; } footer ul { list-style: none; } footer .top-footer { padding: 45px 0; background: url(../../images/footer-pattern.gif); } footer .top-footer .newsletter-box { float: left; width: 20%; } footer .top-footer .newsletter-box span { display: block; font-size: 14px; color: #fff; } footer .top-footer .newsletter-box p { margin-bottom: 2px; font-size: 11px; letter-spacing: 0.6px; } footer .top-footer .newsletter-box .newsletter-input { height: 28px; background: #232427; border-radius: 5px; border: none; color: #ccc8c8; font-size: 11px; width: calc(100% - 86px); padding-left: 15px; transition: all 0.3s ease; text-align: left } footer .top-footer .newsletter-box .newsletter-input::placeholder { color: #727272; } footer .top-footer .newsletter-box .newsletter-input:focus { background: #000; } footer .top-footer .newsletter-box .newsletter-btn { width: 80px; height: 28px; background: #232427; border-radius: 5px; border: none; color: #727272; font-size: 11px; margin-left: 2px; transition: all 0.3s ease; } footer .top-footer .newsletter-box .newsletter-btn:hover { background: #000; } footer .top-footer .newsletter-box .popover { display: none !important } footer .top-footer .newsletter-box .popover-content { color: #000 } footer .footer-menu { display: inline-block; width: 80%; } footer .footer-menu .sub-footer-menu { width: 25%; float: right; min-height: 125px; } footer .footer-menu ul li { } footer .footer-menu ul li a { transition: all 0.3s ease; position: relative; display: block; } footer .footer-menu ul li a:before { content: ''; width: 3px; height: 3px; display: inline-block; vertical-align: middle; background: #adadad; border-radius: 50%; margin-left: 15px; transition: all 0.3s ease; } footer .footer-menu ul li a:hover:before { transform: scale(2); background: #e01921; } footer .footer-info { background: #2e2e2e; padding: 10px 0; font-size: 12px; } footer .footer-info .wide > div { } footer .footer-info .footer-logo { display: inline-block; } footer .footer-info .info { display: inline-block; width: calc(100% - 400px); padding-right: 45px; vertical-align: middle; } footer .footer-info .info > div { float: right; border-right: 1px solid #656565; padding-right: 10px; position: relative; vertical-align: top } footer .footer-info .info > div:before { content: ''; position: absolute; right: -27px; top: 0; background: url(../../images/icons.png); } footer .footer-info .info .address { width: 46%; } footer .footer-info .info .address:before { width: 16px; height: 22px; background-position: -10px -391px; } footer .footer-info .info .phone { width: 21%; } footer .footer-info .info .phone span { display: block } footer .footer-info .info .phone:before { width: 18px; height: 18px; background-position: -37px -393px; } footer .footer-info .info .email { width: 32%; } footer .footer-info .info .email:before { width: 19px; height: 14px; background-position: -94px -394px; } footer .footer-map { height: 180px; background: #353535; } footer .footer-map .map-box { width: 1075px; margin: 0 auto; position: relative; max-width: 100%; } footer .footer-map .map-box:after { content: ''; width: 100%; height: 1px; background: #8c8c8c; position: absolute; right: 0; left: 0; top: 81px } footer .footer-map .map-box:before { content: ''; width: 72px; height: 97px; background: #353535 url(../../images/icons.png) -20px -264px; position: absolute; right: 0; left: 0; margin: 0 auto; z-index: 2; top: 15px; animation: marker 1s linear infinite; } footer .footer-map .map { text-align: center; position: relative; padding-top: 20px; } footer .footer-map .map .map-icon { width: 136px; background: #353535; margin: 0 auto; position: relative; z-index: 2 } footer .footer-map .map .icon-bg { width: 115px; height: 115px; border-radius: 50%; border: 2px solid #fff; display: block; margin: 0 auto; transition: all 0.5s ease } footer .footer-map .map span:last-child { font-weight: bold; margin-top: 8px; display: block; transition: all 0.5s ease; font-size: 12px; } footer .footer-map .map a { width: 170px; height: 170px; /* border: 2px solid #fff; */ border-radius: 50%; overflow: hidden; transition: all 0.5s ease; transform: scale(0); position: absolute; top: -32px; left: -1px; right: -20px; margin: 0 auto; } footer .footer-map .map img { opacity: 0; transition: all 0.5s ease } footer .footer-map .map-icon:hover a { transform: scale(1) } footer .footer-map .map-icon:hover .icon-bg { transform: scale(0); opacity: 0 } footer .footer-map .map-icon:hover img { opacity: 1 } footer .footer-map .map-icon:hover span:last-child { margin-top: 30px; } footer .bottom-footer { background: #323232; height: 70px; padding: 10px 0; color: #535353; font-size: 11px; line-height: 20px; } footer .bottom-footer .copy-right { } footer .bottom-footer .copy-right span { display: block; } footer .bottom-footer .copy-right span:first-child { color: #9f9f9f; } footer .bottom-footer .copy-right span:last-child { font-size: 10px; } footer .bottom-footer .sign { } footer .bottom-footer .sign a { color: #e01921; margin-right: 5px; } footer .bottom-footer .sign a:hover { color: #fff; } @keyframes marker { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 60% { transform: translateY(-1px); } } #toTop { text-align: center; bottom: -105px; position: fixed; left: 40px; z-index: 10; transition: all .5s ease; cursor: pointer; width: 54px; height: 55px; line-height: 53px; color: #e01921; } #toTop.fixed { bottom: 44px; } #toTop .rotate-icon { width: 54px; height: 55px; background-position: -143px -458px; display: inline-block; top: 0; position: absolute; left: 0; } /**************** InnerPage ****************/ #InnerPage { padding: 45px 0 80px 0; text-align: justify } #InnerPage .wide { padding: 0 40px; } #Inner-Header { overflow: hidden; margin-top: 110px; } #Inner-Header .site-info { color: #fff; } #Inner-Header .site-info .wide { background: url(../../Images/site-map-bg-rtl.png) right; height: 124px; position: relative; padding-right: 115px; padding-top: 3px; } #Inner-Header .site-info .wide:after { content: ''; width: 1000px; height: 38px; background: #292986; position: absolute; right: 100%; top: 0 } #Inner-Header .site-info .page-title { display: inline-block; font-size: 22px; text-transform: uppercase; border-left: 1px solid #fff; padding-left: 30px; vertical-align: middle; line-height: 26px; } #Inner-Header .site-info .inner-breadcrum { display: inline-block; padding-right: 15px; list-style: none; font-size: 12px; } #Inner-Header .site-info .inner-breadcrum li { display: inline-block; } #Inner-Header .site-info .inner-breadcrum li:first-child:before { display: none; } #Inner-Header .site-info .inner-breadcrum li:before { content: ">"; margin: 0 8px; } #Inner-Page { background: url(../../Images/inner-bg.jpg); background-attachment: fixed } #Inner-Page footer .footer-map { display: none } #Inner-Page .sec-des { color: #000 } /**************** Responsive ****************/ @media (min-width: 1680px) { #Inner-Header img { width: 100%; } } @media (max-width: 1350px) { #Counter .wide { padding: 0 15px; } header .wide { padding: 0 10px; } header .bottom-menu .menu ul li { padding: 0 9px; } } @media (max-width: 1270px) { #Agancy .agancy-countries { width: 390px; } #Agancy .agancy-countries .agancy-item.active .agancy-des { height: 180px; } header .bottom-menu .menu ul li a { font-size: 13px; } } @media (max-width: 1240px) { header .bottom-menu .menu ul li { padding: 0 10px; } header.scroll .wide { padding-left: 50px; } footer .footer-menu { width: 75%; } footer .top-footer .newsletter-box { width: 25%; } } @media (max-width: 1199px) { .wow { animation: none !important; visibility: visible !important; animation-delay: 0 !important } #Banner .banner-des .bold-read-more { transition-delay: inherit !important } header .bottom-menu .menu nav { max-height: calc(100vh - 110px); position: fixed; right: 0; left: 0; background: #fff; top: 110px; z-index: 6; background: #373435; } header .bottom-menu .menu > nav > ul { display: block } header .bottom-menu .menu ul li { display: block; text-align: center; border-bottom: 1px solid #000000 !important; border-top: 1px solid #544f51 !important; padding: 0; font-size: 15px; float: none } header .bottom-menu .menu ul li:hover, header .bottom-menu .menu ul li:focus { background: #e01921; } header .bottom-menu .menu ul li a { color: #fff; display: block; font-size: 14px !important; line-height: 50px; } header .bottom-menu .menu ul li:hover a, header .bottom-menu .menu ul li:focus { color: #fff; } header .bottom-menu .menu ul li a:before, header .bottom-menu .menu ul li a:after, header .bottom-menu .menu ul li:before { display: none } header .dropdown-menu { width: 100%; position: relative; background-color: #292986; border-radius: 0 } header .dropdown-menu li a { line-height: 50px !important; border-bottom: none } #Manager .wide .manager-info { padding: 15px 15px 50px 55px; } #Manager .wide .manager-info h3 { font-size: 35px; margin-bottom: 10px; } #News .wide { padding: 75px 20px 180px 20px; } footer .footer-info .footer-logo { display: none } footer .footer-info .info { width: 100%; } footer .footer-info .info .address { width: 40%; } footer .footer-info .info .phone { width: 28%; } #toTop { right: inherit; left: 15px; transform: scale(0.7) } } @media (max-width: 1100px) { #Banner .owl-carousel .owl-item { height: 394px; } #Banner .item a > img { width: 1400px; height: auto } #Banner .banner-des p { margin: 15px 0; } #Banner .banner-des strong { top: -40px; } .new-read-more { margin-top: 0; } #About .about-text p { margin: 25px 0 40px 0; } #Product { height: 1400px; padding-top: 80px } #Product:after { height: 850px; } #Product .circle-product { transform: scale(0.8) translateY(-90px); margin-top: 0 } #Product .product-text { transform: none !important; bottom: 0; margin-top: -120px; } #Counter .counter-item { margin: 0 auto } #Agancy .agancy-map { width: 750px; margin: 0 auto; display: block } #Agancy .agancy-countries { position: inherit; width: 100%; } #Agancy .agancy-link { margin-top: 40px; } footer .footer-info { padding: 25px 0; } #Inner-Header img { width: 100%; height: auto } #InnerPage { padding: 40px 0 } } @media (max-width: 991px) { #Manager .wide .manager-info { padding: 15px 15px 50px 15px; } #Product .circle-product { transform: scale(0.8) translateY(-90px) translateX(27px); } #News .item .news-item .news-img { padding-right: 0 } #Manager .wide { padding: 30px 15px 0px 15px; } #Manager .manager-img { max-height: 360px; } #Manager .manager-img img { width: 100%; height: auto } } @media (max-width: 950px) { header .top-menu .date, header .top-menu .time { display: none } header .top-menu .social { margin-right: 0; } #Banner .banner-des h5 { font-size: 18px; padding: 0 15px; } .sec-title { font-size: 30px } .sec-title:before { margin: 0 auto 20px auto; } #Product .circle-product { transform: scale(0.8) translateY(-90px) translateX(50px); } #Product .product-text h3 span { font-size: 26px; } footer .top-footer { padding: 30px 0; } footer .footer-menu { width: 60%; } footer .footer-menu .sub-footer-menu { width: 50%; margin-bottom: 15px; } footer .top-footer .newsletter-box { width: 38%; } footer .bottom-footer { height: auto; text-align: center } footer .bottom-footer .wide > div { float: none !important } footer .bottom-footer .sign { margin-top: 0 } footer .bottom-footer img { margin: 0 auto; margin-bottom: 15px; } } @media (max-width: 900px) { #News .read-more { width: 117px; } #Transportation, #About .about-goal, #Product .small-logo { display: none } #InnerPage #Transportation { display: block !important } #About { background-position: center !important; background-attachment: inherit; } } @media (max-width: 823px) { #Product { height: 1170px; } #Product:after { height: 670px; } #Product .circle-product { transform: scale(0.7) translateY(-170px) translateX(156px); } #Product .product-text { display: none } } @media (max-width: 768px) { #Product { height: 1110px; } #Product:after { height: 650px; } #Product .circle-product { transform: scale(0.65) translateY(-237px) translateX(202px); } #Inner-Header img { display: none } } @media (max-width: 767px) { #News .wide { padding: 75px 20px 75px 20px; } #News .news-box { width: 100%; height: auto; border: none } #News .news-item h3 { margin-bottom: 10px; font-size: 16px; padding-left: 0 } #News .item .news-item .news-img { padding-left: 0 } #News .news-item p { padding-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 20px; margin-bottom: 5px; height: auto } #News .item img { width: 100%; height: auto } #News .news-item .news-info { padding-left: 0 } #News .owl-controls { display: none } #News .event { direction: ltr; margin-top: 75px; } #Agancy .agancy-map { transform: scale(0.7) translateX(40px) translateY(-80px); } #Agancy .agancy-countries { margin-top: -70px; } #Transportation { background-size: cover } footer .footer-menu { width: 100%; } footer .top-footer .newsletter-box { float: none; width: 100%; margin-top: 20px; } footer .footer-info .info { padding-right: 25px; } #Inner-Header .site-info .inner-breadcrum li:last-child { display: none } } @media (max-width: 736px) { #Banner .banner-des h3 { font-size: 32px; } #Product .circle-product { transform: scale(0.65) translateY(-237px) translateX(226px); } #Product .product-text h3 span, #Transportation .transport-box h2 { font-size: 19px; } } @media (max-width: 667px) { #Product { height: 1050px; } #Product:after { height: 580px; } #Product .circle-product { transform: scale(0.58) translateY(-310px) translateX(315px); } #Agancy .agancy-map { transform: scale(0.7) translateX(88px) translateY(-80px); } } @media (max-width: 660px) { #Product { height: auto; padding-bottom: 100px; } #Product .circle-product { transform: none !important; width: 95%; height: auto; border-radius: 0; padding: 15px 0; padding-bottom: 50px; background: #61b2c9; } #Product .circle-product:before, #Product .circle-product:after, #Product .circle-product .product-img, #Product .product-video .video-toggle, #Product .product-chart .chart-toggle, .chart-aarow { display: none } #Product .circle-product .product-des { height: auto; padding: 15px 30px !important; border-bottom: 1px solid #ededed; } #Product .circle-product .product-item:last-child .product-des { border-bottom: none } #Product .circle-product .product-item { width: 100%; float: none } #Product .circle-product .product-item:nth-child(3) { margin-top: 0 } #Product .circle-product .product-item:nth-child(3) .product-des { width: 100%; } #Product .circle-product .product-item:nth-child(3) .product-des h2, #Product .circle-product .product-item:nth-child(3) .product-des h6 { margin-left: 0 } #Product .owl-controls { width: 180px; bottom: -90px; display: none } #Product .owl-nav > div { width: 80px; height: 80px; line-height: 105px; } #Manager .wide { margin-top: 0 } } @media (max-width: 640px) { .sec-des { padding: 0 15px; } header { height: 120px; } header .wide { padding: 0 } header .top-menu { text-align: left; float: none; padding-left: 20px; } header .bottom-menu { padding: 0 20px; } header .bottom-menu .logo { margin-top: 7px; } header .bottom-menu .logo img { width: 280px; height: auto; } .navbar-toggle { margin-top: 19px; } header .top-menu .search .search-box, header .bottom-menu .menu nav { top: 120px } #Banner .banner-des h3 { font-size: 22px; padding: 0 15px } #Product .product-text { padding: 0 15px; } #Agancy .agancy-map { transform: scale(0.7) translateX(115px) translateY(-80px); } #Transportation .transport-items .transport-item { margin: 0 25px; } footer .footer-info .info > div { width: 100% !important; } #Inner-Header { margin-top: 120px; } #Inner-Header .site-info { padding: 8px 5px; background: #292986; } #Inner-Header .site-info .wide { background: none; padding-right: 20px; padding-top: 0; height: auto } #Inner-Header .site-info .page-title { font-size: 17px; } #Inner-Header .site-info .inner-breadcrum { font-size: 12px; padding-right: 5px } } @media (max-width: 568px) { #Agancy .agancy-map { transform: scale(0.7) translateX(160px) translateY(-80px); } } @media (max-width: 550px) { .sec-title { font-size: 25px; } header .top-menu .search .search-box input { font-size: 15px; } #Banner .banner-des h5 { font-size: 16px; } #Product .circle-product h2 { font-size: 30px !important } #Agancy .agancy-map, footer .footer-map .map-box:before { display: none } #Agancy .agancy-box { margin-top: 30px; } #Agancy .agancy-countries { margin-top: 0 } #Transportation .transport-box h2 { font-size: 14px; } #Transportation .transport-items .transport-item { margin: 0 9px; } footer .footer-map .map .map-icon { transform: scale(0.8) } #InnerPage .wide { padding: 0 20px; } #InnerPage .main-content-wrapper.menu { padding: 0 15px; } } @media (max-width: 520px) { .new-read-more { width: 190px; } .new-read-more img{margin: 0 17px !important;} .new-read-more span { font-size: 12px; } } @media (max-width: 430px) { /*#Banner .banner-des { bottom: 40px; }*/ #Banner .banner-des p { margin: 10px 0; font-size: 14px; } .new-read-more { width: 170px; } .new-read-more span { font-size: 10px; } #Product .circle-product h2 { font-size: 25px !important; } header .top-menu .login { padding: 0 10px } #Manager .wide .manager-info h3 { font-size: 27px; margin-top: 10px; } #News .news-item .news-info > a, header .top-menu .social li:nth-child(2), header .top-menu .social li:nth-child(4) { display: none } #Transportation .transport-items .transport-item { display: block; margin-bottom: 15px; } #Transportation .transport-items .transport-item h4 { margin-top: 20px; } #Agancy .sec-title { font-size: 17px; line-height: 25px; } } @media (max-width: 376px) { header { height: 110px; } header .bottom-menu .logo img { width: 230px; } header .bottom-menu { padding: 0 10px; } .navbar-toggle { margin-top: 10px; } header .bottom-menu .menu nav, header .top-menu .search .search-box { top: 110px; } #Banner .banner-des strong { top: -25px; } #Banner .banner-des p { font-size: 13px; } #Product .circle-product h2 { font-size: 24px !important; letter-spacing: 0; } footer .footer-menu .sub-footer-menu { width: 100%; min-height: inherit } #Inner-Header { margin-top: 110px; } #Inner-Header .site-info { padding: 8px 0 } } /**************** menu-btn ****************/ .navbar-toggle { padding: 9px 0px; margin-left: 0 } .toggle-menu { float: right; padding: 10px 0 0 30px; cursor: pointer; } .toggle-menu > span { display: inline-block; vertical-align: middle; color: #fff; text-transform: uppercase; margin-left: 15px; font-size: 16px; } .menu-btn { display: inline-block; width: 32px; vertical-align: middle; } .menu-btn:before, .menu-btn:after { background-color: #e73a2e; content: ''; display: block; height: 3px; transition: all 200ms ease-in-out; } .menu-btn:before { box-shadow: 0 10px 0 #e73a2e; margin-bottom: 16px; } .menu-btn.active:before { box-shadow: 0 0 0 #e73a2e; transform: translateY(10px) rotate(45deg); } .menu-btn.active:after { transform: translateY(-9px) rotate(-45deg); } /**************** owl carousel ****************/ .owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; direction: ltr; } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item { float: left; overflow: hidden; } .owl-carousel .owl-item .item a img { max-width: 100%; } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer; } .carousel-controls { float: right; } .carousel-controls .next { width: 28px; height: 18px; display: inline-block; background: url(../images/icons.png); background-position: -106px 0; transform: rotate(180deg); cursor: pointer; } .carousel-controls .prev { width: 28px; height: 18px; display: inline-block; background: url(../images/icons.png); background-position: -106px 0; cursor: pointer; } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } .owl-pagination { text-align: center; margin-top: 45px; } .owl-pagination .owl-page { width: 12px; height: 12px; background: #e9e9e9; display: inline-block; transition: all 0.3s ease; margin-left: 6px; } .owl-pagination .owl-page.active { background: #00b3ba; }