@charset "UTF-8"; /* Table of Content ================================================== 1. Typography 2. Global Styles (body, link color, gap, ul, section-title, overlay etc) 3. Header area 4. Banner area */ /* Typography ================================================== */ body { font-family: "Open Sans", sans-serif; line-height: 26px; font-size: 15px; color: #666666; font-weight: 400 !important; } h1, h2, h3, h4, h5, h6 { color: #101010; font-family: "Zilla Slab", serif; } h1, h2 { font-family: "Zilla Slab", serif; } h1 { font-size: 36px; line-height: 36px; font-weight: 900; } h2 { font-size: 30px; line-height: 36px; font-weight: 700; } h3 { font-size: 24px; margin-bottom: 20px; font-weight: 700; } h4 { font-size: 18px; line-height: 28px; font-weight: 700; } h5 { font-size: 16px; line-height: 24px; } h6 { font-size: 14px; line-height: 24px; } /* Global styles ================================================== */ body { border: 0; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ul { margin: 0; } iframe { border: none; } a:link, a:visited { text-decoration: none; } a { color: #ff5c23; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } a:hover { text-decoration: none; color: #ff5c23; } a.read-more { color: #ff5c23; font-weight: 700; } a.read-more:hover { color: #222; } .body-color { background: #161362; color: #fff; } .no-padding { padding: 0; } .p-60 { padding: 60px 0; } .p-100 { padding: 100px 0 !important; } .media > .pull-left { margin-right: 20px; } .gap-60 { clear: both; height: 60px; } .gap-50 { clear: both; height: 50px; } .gap-40 { clear: both; height: 40px; } .gap-30 { clear: both; height: 30px; } .gap-20 { clear: both; height: 20px; } .gap-10 { clear: both; height: 10px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-100 { margin-bottom: 100px; } .mb-110 { margin-bottom: 110px; } .mt-100 { margin-top: 100px; } .mt-50 { margin-top: 50px; } .mt-80 { margin-top: 80px; } .mt-35 { margin-top: 35px; } .mrb-30 { margin-bottom: 30px; } .mrb-80 { margin-bottom: -80px; } .mr-70 { margin-right: 70px; } .mr-80 { margin-right: 80px; } .mr-100 { margin-right: 100px; } .ml-70 { margin-left: 70px; } .mr-70 { margin-right: 70px; } .mr-80 { margin-right: 80px; } .mr-100 { margin-right: 100px; } .mrt-0 { margin-top: 0 !important; } .pab-60 { padding-bottom: 60px; } .pab-70 { padding-bottom: 70px; } .pab { padding-bottom: 0; } a:focus { outline: 0; } img.pull-left { margin-right: 20px; margin-bottom: 20px; } img.pull-right { margin-left: 20px; margin-bottom: 20px; } .unstyled { list-style: none; margin: 0; padding: 0; } /* Dropcap */ .dropcap { font-size: 48px; line-height: 60px; padding: 0 7px; display: inline-block; float: left; font-weight: 700; margin: 5px 15px 5px 0; position: relative; text-transform: uppercase; } .btn { font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; background: #ff5c23; height: 45px; padding: 0 35px; line-height: 42px; border-radius: 0px; -webkit-border-radius: 0px; -ms-border-radius: 0px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; outline: none; text-decoration: none; cursor: pointer; border: none; } .btn:focus { outline: none; } .btn:hover { color: #ff5c23; background: #fff; box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15); } .btn.fill { background: transparent; padding: 0 25px; color: #fff; margin-left: 20px; border: 2px solid #fff; } .btn.fill:hover { background: #ff5c23; border-color: #ff5c23; } .btn.btn-round { border-radius: 36px; -webkit-border-radius: 36px; -ms-border-radius: 36px; } .btn-link { font-size: 13px; font-weight: 700; color: #ff5c23; text-decoration: none !important; } .btn-link i { margin-left: 6px; position: relative; top: 2px; } .btn-link:hover { color: #ff5c23; } .btn-white { background: #fff; color: #2c2c2c; box-shadow: none; } .solid-bg-two { background: #f2f2f2; } .title-bg-small { font-size: 14px; font-weight: 700; line-height: 24px; margin-bottom: 15px; color: #fff; background: #101010; display: inline-block; padding: 3px 18px; text-transform: uppercase; } .section-title, .column-title { font-size: 36px; font-weight: 300; color: #101010; position: relative; } .section-title span, .column-title span { font-weight: 700; } .section-title:after, .column-title:after { position: absolute; left: 0; height: 1px; width: 40px; background: #ff5d34; content: ""; bottom: -26%; display: none; } .section-title.title-center:after, .column-title.title-center:after { margin: auto; left: 0; right: 0; } .section-title.title-right:after, .column-title.title-right:after { margin: auto; left: auto; right: 0; } /* title */ .title-small { font-size: 30px; font-weight: 700; } .ts-title { font-size: 24px; font-weight: 600; } .overlay { position: relative; z-index: 1; } .overlay:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, 0.68); z-index: -1; } .overlay-two::before { background: rgba(1, 14, 42, 0.6); } .main-container { padding: 80px 0; } .main-container.blog, .main-container.blog-single { padding-bottom: 50px; } /*======================= owl default css ========================*/ .hero-area.owl-carousel .owl-nav { margin: 0; } .owl-carousel .owl-nav { text-align: center; } .owl-carousel.owl-theme .owl-nav [class*=owl-] { background: #2154cf; color: #fff; position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; line-height: 42px; font-size: 20px; text-align: center; margin: 0; border-radius: 0; transition: 400ms; transform: translateY(-50%); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .owl-carousel.owl-theme .owl-nav [class*=owl-prev] { right: 40px; } .owl-carousel.owl-theme .owl-nav > div:hover { background: #272d33; } .owl-carousel.owl-loaded .owl-nav .owl-next.disabled, .owl-carousel.owl-loaded .owl-nav .owl-prev.disabled { background: #ff5c23 !important; color: #fff !important; opacity: 1; } /* owl carousel home slider */ .owl-stage-outer .owl-item.active .slider-item .slider-content p { animation-name: slideInUp; animation-duration: 1.5s; } .owl-stage-outer .owl-item.active .slider-item .slider-content .slider-title { animation-name: slideInUp; animation-duration: 2s; } .owl-stage-outer .owl-item.active .slider-item .slider-content .btn { animation-name: slideInUp; animation-duration: 2.5s; } @keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } /* Template Name: induxo Author: Themewinter Author URI: https://themeforest.net/user/tripples Description: Induxo - Industrial WordPress Theme Version: 1.0 ===================== table of content ==================== 1. topbar 2. header 3. hero area 4. banner area 5. about area 6. history area 7. testimonial area 8. latest blog area 9. service area 10. recent project area 11. features area 12. team area 13. working process 14. chart 15. map location 16. video popup 17. ts subscribe 18. footer area 19. back to top 20 404 */ /*================================================== Top Bar ================================================== */ .topbar { position: relative; left: 0; top: 0; width: 100%; z-index: 999; color: #fff; background-color: rgba(0, 0, 0, 0.35); padding: 12px 0; line-height: normal; transition: 350ms; } .topbar li { color: #fff; font-weight: 400; font-size: 15px; list-style: none; display: inline-block; } .topbar li i { color: #fff; font-weight: 400; font-size: 15px; top: 0; } .topbar.topbar-classic { padding: 6px 0; } .topbar.topbar-classic li { color: #101010; } .alice-blue-bg { background: #edf5f8; } .alice-blue-bg li { color: #666666; } .alice-blue-bg li i { color: #666666; } .top-info { padding: 0; margin: 0; display: inline-block; } .top-info li { margin-right: 49px; } .top-info i { margin-right: 5px; } .social-links { text-align: right; } .social-links li { margin-right: 20px; } .social-links li:last-child { margin-right: 0; } /*===================================== header middle area =====================================*/ .header-middle-area { padding: 30px 0; } .header-contact-info { padding: 0; } .header-contact-info li { display: inline-block; list-style: none; font-size: 16px; color: #101010; padding: 0 35px 0 65px; border-right: 1px solid #eee; position: relative; } .header-contact-info li:last-child { border-right: 0; padding-right: 0; } .header-contact-info li i { font-size: 25px; position: absolute; left: 20px; top: 6px; } .header-contact-info li span { font-weight: 700; display: block; } /*===================================== header area =====================================*/ .header .navbar { border-bottom: 1px solid #4D4542; padding: 0; } .header .navbar-brand { padding: 0; } .header ul.navbar-nav { float: left; margin-right: 30px; } .header ul.navbar-nav > li { float: none; display: inline-block; } .header ul.navbar-nav > li:last-child { padding-right: 0; } .header ul.navbar-nav > li:last-child:after { background: none; } .header ul.navbar-nav > li > a { color: #fff; text-rendering: optimizeLegibility; display: block; font-size: 14px; margin: 0; text-transform: uppercase; position: relative; font-weight: 700; transition: 350ms; transition: 350ms; margin-left: 20px; line-height: 78px; padding: 7px 0px; } .header ul.navbar-nav > li > a:hover, .header ul.navbar-nav > li > a.active, .header ul.navbar-nav > li > a:focus { color: #ff5c23 !important; } .header ul.navbar-nav > li > a:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; border-bottom: 3px solid transparent; transform: scale(0) translateZ(0); transition: transform 0.45s ease, opacity 0.55s ease; transition: transform 0.45s ease, opacity 0.55s ease; } .header ul.navbar-nav > li > a:hover, .header ul.navbar-nav > li > a:focus { background: none; } .header ul.navbar-nav > li > a i { font-weight: 700; margin-left: 3px; } .header ul.navbar-nav > li:hover > a:before, .header ul.navbar-nav > li.active > a:before { border-color: #ff5c23; opacity: 1; transform: scale(1) translateZ(0); } .header ul.navbar-nav > li.header-quote { margin-top: 20px; } .header ul.navbar-nav > li.header-quote a:before { border: none; } .header ul.navbar-nav > li.header-quote .quote-btn { height: 40px; line-height: 36px; padding: 0px 25px; background: #ff5c23; margin-left: 30px; } .header ul.navbar-nav > li.header-quote .quote-btn:hover { background: #ff5c23; } .header ul.navbar-nav li .dropdown-menu { padding: 10px 20px; min-width: 230px; margin: 0 20px; border-radius: 0; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); border: none; } .header ul.navbar-nav li .dropdown-menu li a { padding: 12px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); font-size: 12px; display: block; color: #222; text-transform: uppercase; font-weight: 700; } .header ul.navbar-nav li .dropdown-menu li a:hover { color: #ff5c23; } .header ul.navbar-nav li .dropdown-menu li a.active { color: #ff5c23; background: none; } .header ul.navbar-nav li .dropdown-menu li:last-child a { border-bottom: none; } .header ul.navbar-nav li .dropdown-menu li .dropdown-menu { left: 100%; margin: 0; top: 0; } .header ul.navbar-nav li .dropdown-menu li.dropdown > .dropdown-item:after { content: ""; font-family: "fontawesome"; position: absolute; right: 0; } .header .dropdown-item:focus, .header .dropdown-item:hover { background: none; } .header .dropdown-toggle::after { content: ""; font-family: "fontawesome"; border: 0; vertical-align: 0; float: right; } .header.header-transparent { position: absolute; width: 100%; left: 0; top: 0; z-index: 2; height: auto; } .header.header-transparent .navbar-brand { padding: 0; max-width: 140px; } .header.header-transparent .navbar-brand img { vertical-align: top; } .header.header-transparent ul.navbar-nav { position: relative; } .header.header-transparent ul.navbar-nav > li > a { color: #fff; line-height: 72px; } .header.header-transparent ul.navbar-nav > li > a:hover { color: #ff5c23; } .header.header-transparent.nav-border { border-bottom: 1px solid #363d8a; padding: 10px 0; } .header.header-transparent.nav-border .navbar { padding: 0px 0; } .header.header-transparent.nav-border ul.navbar-nav > li.header-quote .quote-btn { background: #3a6af0; } .header.header-standard { background: #fff; position: relative; box-shadow: 0px 13px 35px -12px rgba(35, 35, 35, 0.15); border-bottom: none; z-index: 2; } .header.header-standard .navbar { border-bottom: none; } .header.header-standard .navbar a.logo { max-width: 140px; } .header.header-standard ul.navbar-nav > li > a { color: #222222; } .header.header-standard ul.navbar-nav > li > a:hover { color: #ff5c23; } .header.header-standard ul.navbar-nav > li.active > a { color: #ff5c23; } .header.header-standard .nav-search { color: #222222; } .header.header-standard .search-block .search-close { color: #222; } .header.header-classic { background: #101010; } .header.header-classic .navbar { border-bottom: none; } .header.header-classic .navbar-light ul.navbar-nav { margin-left: 0 !important; } .header.header-classic .navbar-light ul.navbar-nav > li > a { color: #fff; line-height: 50px; margin-left: 0; margin-right: 20px; } .header.header-classic .navbar-light ul.navbar-nav > li .dropdown-menu { margin: 0; } .header-quote { margin-left: 25px; } .header-quote .quote-btn.btn { padding: 0 30px; } .header-box { position: absolute; top: 0; width: 100%; z-index: 99; } .header-box .header.header-classic { background: transparent; } .header-box .navbar { background: #101010; padding: 0 8px; } .header-box .top-box { background: #fff; margin: 0; padding: 20px; } .dropdown-menu.show { display: none; } @media (min-width: 991px) { .navbar-sticky.sticky { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; background: #101010; padding: 0; } .navbar-sticky.sticky .navbar { border-bottom: none; } .navbar-sticky.sticky.fade_down_effect { animation-name: fadeInDown; animation-duration: 1s; animation-fill-mode: both; animation-delay: 0.1s; } .navbar-sticky.sticky.header-standard { background: #fff; padding: 0; } .header ul.navbar-nav li:hover > .dropdown-menu { display: block; border: none; } } /*-- Nav Search start --*/ .nav-search { cursor: pointer; color: #fff; text-align: center; } .nav-search i { font-size: 20px; font-weight: 900; } .nav-search-area { position: relative; } .nav-search-area .nav-search.hide { opacity: 0; visibility: hidden; } .search-block { background: #1f1f1f; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: none; padding: 15px 20px; position: absolute; right: 0; top: 56px; width: 350px; z-index: 10; margin-top: 0; } .search-block .form-control { background: none; border: 0; border-bottom: 1px solid #4D4542; color: #fff; width: 100%; height: 40px; padding: 0 12px; font-size: 15px; font-style: italic; } .search-block .search-button { position: absolute; right: 0; background: transparent; border: none; color: #7a7a7d; top: 5px; } .search-block .search-close { color: #fff; position: absolute; top: -58px; right: 0px; font-size: 32px; cursor: pointer; padding: 5px; width: 30px; height: 30px; line-height: 14px; text-align: center; } .search-area .nav-search { top: 23px; } .search-area .search-block { right: 0; } .search-area .search-block .search-close { top: -50px; } /*======================================== hero area ===========================================*/ .hero-area { padding: 0; } .slider-item { color: #fff; background-repeat: no-repeat; background-size: cover; background-position: center center; -webkit-backface-visibility: hidden; position: relative; } .slider-item:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; } .slider-item .slider-content { padding: 50px 0 50px; z-index: 1; position: relative; } .slider-item .slider-content .slider-info { font-size: 14px; font-weight: 700; line-height: 24px; margin-bottom: 25px; color: #000; background: #fff; display: inline-block; padding: 3px 18px; text-transform: uppercase; } .slider-item .slider-content .slider-title { font-size: 48px; font-weight: 300; color: #fff; line-height: 65px; margin-bottom: 30px; } .slider-item .slider-content .slider-title span { font-weight: 700; } .slider-item .slider-content .slider-btn-area .btn { height: 55px; line-height: 55px; padding: 0 44px; } .slider-item .slider-content .slider-btn-area .btn.fill { padding: 0 25px; } .hero-area.owl-carousel .active img { animation: fadeInRight 300ms both; animation-duration: 1.3s; } .slider-table { width: 100%; height: 100%; display: table; } .slider-table .slider-table-cell { width: 100%; height: 100%; display: table-cell; vertical-align: middle; } .hero-area.owl-carousel.owl-theme .owl-nav [class*=owl-] { background: rgba(0, 0, 0, 0.3); color: #fff; height: 100px; line-height: 100px; border-radius: 0; transition: all 500ms ease; margin-top: -25px; } .hero-area.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover { background: #ff5c23; } .hero-area.owl-theme .owl-nav div { background: rgba(0, 0, 0, 0.5); position: absolute; top: 50%; width: 36px; height: 72px; line-height: 72px; font-size: 26px; text-align: center; margin: 0; border-radius: 0; transition: 400ms; transition: 400ms; transform: translateY(-50%); transform: translateY(-50%); } .hero-area.owl-theme .owl-nav div:hover { background: #ff5c23; color: #fff; } .hero-area.owl-theme .owl-nav [class*=owl-prev] { right: auto; left: 0; } /* ============================ banner area ==============================*/ .banner-area .banner-title { font-size: 64px; color: #fff; line-height: 70px; font-weight: 600; } .banner-area ol.breadcrumb { background: none; color: #fff; } .banner-area.banner-solid { padding-top: 32px; padding-bottom: 32px; background: #ff5c23; } .banner-area.banner-solid .banner-title { font-size: 40px; line-height: 48px; } .banner-bg { padding: 138px 0; position: relative; z-index: 1; background-repeat: no-repeat; background-size: cover; background-position: center center; } .banner-bg::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, 0.4); z-index: -1; } /*========================== about area ===========================*/ .about-area { background-repeat: no-repeat; background-size: cover; background-position: center center; } .about-area .ts-about-wrapper { margin-top: 30px; } .about-area .about-content { margin-bottom: 45px; } .about-area .single-about-image { background-repeat: no-repeat; background-size: cover; background-position: center center; height: 350px; width: 66%; } .about-area .ts-about-image-wrapper { position: relative; } .about-area .ts-about-image-wrapper .ts-about-intro { position: absolute; right: 0; bottom: 0; max-width: 350px; background: #ff5c23; padding: 30px; color: #fff; padding-top: 35px; } .about-area .ts-about-image-wrapper .ts-about-intro h3 { font-weight: 300; color: #fff; font-size: 30px; } .about-area .ts-about-image-wrapper .ts-about-intro span { font-weight: 700; } .about-area .ts-about-image-wrapper p { color: #fff; } .ts-about-image-wrapper.owl-carousel.owl-theme .owl-nav [class*=owl-] { top: 20px; background: #f5f5f5; color: #000; line-height: 33px; } .ts-about-image-wrapper.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover { background: #ff5c23; color: #fff; } /*========================== history area ===========================*/ .history-area .history-content { background: #fff; padding: 47px; padding-left: 14px; } .history-area .carousel-inner { margin-bottom: 45px; } .history-area .history-img { background-repeat: no-repeat; background-size: cover; background-position: center center; } .history-area .carousel-item { background: #fff; } .history-area .carousel-item [class*=col] { padding: 0; } .history-area .carousel-indicators { position: relative; left: 0%; z-index: 5; width: 100%; padding-left: 0; margin-left: 0%; text-align: center; list-style: none; } .history-area .carousel-indicators:before { content: ""; width: 100%; height: 2px; position: absolute; left: 0; top: 15px; background-color: #ddd; z-index: -1; } .history-area .carousel-indicators li { display: inline-block; width: 70px; height: 35px; line-height: 35px; margin: 0 35px; text-indent: 0px; cursor: pointer; color: #101010; border: 0px solid #fff; border-radius: 0px; margin-top: 40px; font-weight: 700; font-family: "Open Sans", sans-serif; font-size: 16px; } .history-area .carousel-indicators li:before { position: absolute; top: -30px; left: 50%; display: inline-block; width: 12px; height: 12px; content: ""; border-radius: 50%; background: #101010; margin-left: -7px; } .history-area .carousel-indicators li.active { width: 70px; height: 35px; line-height: 35px; box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15); color: #ff5c23; background: #fff; } .history-area .carousel-indicators li.active::before { background: #ff5c23; } .history-area .carousel-indicators li.active:after { position: absolute; top: -34px; left: 44%; display: inline-block; width: 20px; height: 20px; content: ""; border-radius: 50%; margin-left: -7px; border: 1px solid #ff5c23; } .history-area .carousel-item-next, .history-area .carousel-item-prev { display: flex; } .primary-bg { background: #ff5c23; } /*=========================================== testimonial area =============================================*/ .testimonial-carousel p { font-style: italic; font-size: 18px; color: #fff; } .testimonial-carousel .single-testimonial .testimonial-footer { margin-top: 50px; } .testimonial-carousel .single-testimonial .testimonial-footer h3 { font-weight: 700; text-transform: uppercase; color: #fff; font-size: 16px; font-family: "Open Sans", sans-serif; display: inline-block; margin-bottom: 0; } .testimonial-carousel .single-testimonial .testimonial-footer h3 span { display: block; font-size: 14px; font-weight: 300; margin-top: 10px; text-align: left; } .testimonial-carousel .single-testimonial .testimonial-footer .client-info { margin-left: 15px; } .testimonial-carousel.owl-carousel .owl-item img { height: 80px; width: 80px; } .testimonial-carousel.owl-carousel.owl-theme .owl-nav [class*=owl-] { background: none; color: #9f9f9f; font-size: 40px; top: 15%; right: 0; } .testimonial-carousel.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover { color: #ff5c23; } .testimonial-carousel.owl-carousel.owl-theme .owl-nav [class*=owl-prev] { left: 0; } /*========================== latest blog area ===========================*/ .ts-blog { margin: 0; } .ts-blog .single-blog .post-meta { display: inline-block; color: #ff5c23; margin-bottom: 20px; } .ts-blog .single-blog .post-meta i { margin-right: 8px; } .ts-blog .single-blog .post-date { margin-left: 35px; color: #6c6b6f; } .ts-blog .single-blog .post-date i { color: #6c6b6f; } .ts-blog .single-blog h3 { font-weight: 400; } .ts-blog .single-blog h3 a { color: #101010; } .ts-blog .single-blog h3 a:hover { color: #ff5c23; } .ts-blog .blog-box { border: 1px solid #d2d2d2; padding: 40px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } .ts-blog .blog-box:hover { background-color: #edf5f8; } .ts-blog .blog-box:hover .btn-link i { opacity: 1; padding-left: 10px; } .ts-blog .blog-box:hover .ts-post-title a { color: #ff5c23; } .ts-blog .blog-box:nth-of-type(2) { margin-left: -1px; margin-right: -1px; } .ts-blog .btn-link i { font-size: 17px; opacity: 0; transition: all ease-in-out 300ms; } .blog-standard .featured-image { margin-bottom: 10px; } .blog-standard .blog-content-desc { margin-bottom: 10px; } .blog-standard .single-blog .post-date { margin-left: 20px; } .blog-standard .single-blog .post-meta { margin-bottom: 10px; } /*========================== service area ===========================*/ .ts-service-area { padding-bottom: 40px; } .ts-service-area .ts-service-wrapper .ts-service-img { width: 100%; height: 100%; overflow: hidden; } .ts-service-area .ts-service-wrapper .ts-service-img img { width: 100%; transform: scale(1); transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } .ts-service-area .ts-service-wrapper .ts-service-box-img i { font-size: 50px; color: #ff5c23; } .ts-service-area .ts-service-wrapper .service-box-info { padding-left: 80px; } .ts-service-area .ts-service-wrapper .service-box-info.top { padding-left: 0px; } .ts-service-area .ts-service-wrapper .service-box-info p { font-weight: 400; } .ts-service-area .ts-service-wrapper .service-box-info .ts-title a { color: #252a37; } .ts-service-area .ts-service-wrapper:hover .ts-service-img img { transform: scale(1.1); } .ts-service-area .ts-service-wrapper:hover .ts-service-box-img { -webkit-backface-visibility: hidden; backface-visibility: hidden; animation: bounce 0.4s ease-in-out 2 alternate; } .ts-service-area .ts-service-wrapper:hover .ts-title a { color: #ff5c23; } @keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-10px); } } /* ts service strategic */ .ts-service-strategic { padding-bottom: 10px; } .ts-service-strategic .ts-service-wrapper .service-box-info { padding-left: 0; } .ts-service-strategic .ts-service-wrapper .ts-service-box-img i { font-size: 50px; color: #ff5c23; } .ts-service-strategic .ts-service-wrapper .ts-service-box-img.pull-left { padding-right: 20px; } .ts-service-strategic .ts-service-wrapper .ts-title { font-size: 18px; margin-bottom: 0; font-family: "Open Sans", sans-serif; font-weight: 700; line-height: 26px; } .ts-service-strategic .ts-service-wrapper .ts-title a { color: #101010; } .ts-service-strategic .ts-service-wrapper .ts-title a:hover { color: #ff5c23; } .ts-service-strategic .ts-service-wrapper .btn-link { color: #666666; font-size: 15px; } .ts-service-strategic .ts-service-wrapper .btn-link i { margin-left: 0; } .service-menu, .service-menu ul { padding-left: 0; } .service-menu li, .service-menu ul li { list-style: none; } .service-menu li a, .service-menu ul li a { display: block; padding: 17px 30px; color: #252a37; transition: all 0.3s; border-bottom: 1px solid #fff; } .service-menu li a:hover, .service-menu ul li a:hover { background-color: #ff5c23; color: #fff; } /*========================== Recent Projects area ===========================*/ .recent-project-wrapper { margin-bottom: 35px; } .recent-project-wrapper .recent-project-img { width: 100%; overflow: hidden; } .recent-project-wrapper .recent-project-img img { width: 100%; transform: scale(1); transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } .recent-project-wrapper:hover .recent-project-img img { transform: scale(1.1); } .recent-project-info { margin-top: 20px; } .recent-project-info .ts-title { margin-bottom: 0; } .recent-project-info .project-title { color: #ff5d34; margin-bottom: 10px; } .recent-project-info .ts-title a { color: #252a37; } .recent-project-info .ts-title a:hover { color: #ff5d34; } .projectthree .recent-project-info { display: inline-block; position: absolute; background: #fff; bottom: 0; padding: 20px 40px; opacity: 0; transition: 0.5s; } .projectthree .grid-item:hover .recent-project-info { opacity: 1; } /* ---- .Projects gallery grid-item ---- */ .grid-item img { display: block; max-width: 100%; } .ts-grid-item { margin: 0 -15px; background: transparent; } .ts-grid-item .grid-item { padding: 0 15px; margin-bottom: 30px; } .ts-grid-item .grid-item a.ts-popup { width: 100%; height: 100%; overflow: hidden; display: block; } .ts-grid-item .grid-item a.ts-popup img { width: 100%; transform: scale(1); transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } .ts-grid-item .grid-item a.ts-popup:hover img { transform: scale(1.1); } /*========================== features area ===========================*/ .ts-features { background-repeat: no-repeat; background-size: cover; background-position: center center; } .ts-features .features-project [class*=col] { padding: 0; position: relative; overflow: hidden; } .ts-features .features-project [class*=col]:hover .single-project { transform: scale(1.1); } .ts-features .features-project .single-project { background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; z-index: 1; min-height: 450px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } .ts-features .features-project .single-project:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #000; opacity: 0.4; z-index: -1; } .ts-features .features-project .single-project i { font-size: 70px; color: #fff; display: block; } .ts-features .features-project .single-project h4 { font-size: 18px; margin-top: 30px; font-family: "Open Sans", sans-serif; margin-bottom: 30px; color: #fff; } .ts-features .features-project .single-project p { color: #fff; } .ts-features .features-project .single-project .project-content { position: absolute; left: 30px; bottom: 0; transition: all ease 400ms; right: 30px; } .ts-features .features-project .single-project .project-info { background: rgba(255, 92, 35, 0.85); padding: 65px 35px; overflow: hidden; opacity: 0; position: absolute; transition: all 0.6s; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; transform: scale(1.1); } .ts-features .features-project .single-project .ts-btn a { background: #fff; color: #ff5c23; } .ts-features .features-project .single-project:hover .project-info { opacity: 1; transform: scale(1); } .ts-features .features-project .single-project:hover .project-content { opacity: 0; } .ts-project-details .owl-carousel.owl-theme .owl-nav [class*=owl-], .ts-features .owl-carousel.owl-theme .owl-nav [class*=owl-] { background: none; color: #9f9f9f; font-size: 50px; top: 50%; right: -75px; } .ts-project-details .owl-carousel.owl-theme .owl-nav [class*=owl-]:hover, .ts-features .owl-carousel.owl-theme .owl-nav [class*=owl-]:hover { color: #ff5c23; } .ts-project-details .owl-carousel.owl-theme .owl-nav [class*=owl-prev], .ts-features .owl-carousel.owl-theme .owl-nav [class*=owl-prev] { left: -75px; } /*========================== team area ===========================*/ .ts-team-classic .ts-team-classic-wrapper .team-social-classic ul { padding: 0; } .ts-team-classic .ts-team-classic-wrapper .ts-team-img img { width: 100%; } .team-area .ts-team-wrapper { position: relative; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } .team-area .ts-team-img { position: relative; } .team-area .ts-team-img img { width: 100%; } .team-area .ts-team-img:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: rgba(255, 92, 35, 0.7); opacity: 0; visibility: hidden; transition: all ease-in-out 0.3s; } .team-area .ts-team-info { border: 1px solid #d8d8d8; border-top: none; padding: 20px 10px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } .team-area .team-social { position: absolute; top: 35%; visibility: hidden; opacity: 0; transition: all ease-in-out 0.3s; left: 0; right: 0; margin: auto; transform: scale(0); } .team-area .team-social ul { padding: 0; } .team-area .team-social-classic { margin-top: 10px; } .team-area .team-social li, .team-area .team-social-classic li { list-style: none; display: inline-block; } .team-area .team-social li a, .team-area .team-social-classic li a { margin-right: 15px; font-size: 24px; color: #fff; } .team-area .team-social-classic li a { color: #101010; font-size: 14px; } .team-area .team-name { font-size: 24px; color: #101010; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } .team-area .team-designation { margin-bottom: 0; } .team-area .ts-team-wrapper:hover .team-social { opacity: 1; visibility: visible; transform: scale(1); } .team-area .ts-team-wrapper:hover .ts-team-img:after { opacity: 1; visibility: visible; } .team-area .ts-team-wrapper:hover .team-name { color: #ff5c23; } .team-area .ts-team-wrapper:hover .ts-team-info { border-color: transparent; box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15); } /*========================== Working process ===========================*/ .application-process-img { height: 195px; width: 195px; text-align: center; border: 10px solid #edf5f8; border-radius: 50%; line-height: 175px; position: relative; display: inline-block; } .application-process-img:after { position: absolute; right: 88px; top: 50%; width: 100%; height: 100%; background-repeat: no-repeat; background-image: url(../images/career/long-arrow.png); content: ""; } .application-process-img.first:after { display: none; } .ts-application-process h3 { margin-top: 30px; font-size: 24px; margin-bottom: 0; } /* work process list */ .work-process-list { position: relative; z-index: 1; } .work-process-list:after { position: absolute; left: 20px; top: 0; width: 1px; height: 95%; content: ""; border: 1px dashed #ffae99; z-index: -1; } .work-process-list li { position: relative; margin-bottom: 30px; } .work-process-list .working-num { color: #fff; font-size: 20px; font-weight: 700; width: 40px; height: 40px; background: #ff5d34; line-height: 40px; border-radius: 50%; text-align: center; position: absolute; left: 0; } .work-process-list .working-text { left: 60px; top: 5px; padding-left: 60px; } /*================================================== Chart ================================================== */ .graph-wrapper { margin-top: 50px; } .graph-caption { text-align: center; } .graph-caption span { position: relative; padding: 0 25px; } .graph-caption span:after { position: absolute; left: 0; top: 50%; width: 15px; height: 15px; content: ""; background: #ff5c23; border-radius: 50%; margin-top: -7px; } .graph-caption span.blue-round:after { background: #2154cf; } #graph { width: 85%; height: 350px; margin: 0 auto; } .morris-hover { z-index: 1; } /* ========================== map Location =========================== */ .location { display: inline-block; } .location_indicator { position: relative; width: 5px; height: 5px; background-color: #ff5c23; border-radius: 50%; } .location_indicator::before, .location_indicator::after { position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: 100%; background-color: #ff5c23; border-radius: 50%; animation: pulse 3s infinite cubic-bezier(0.4, 0, 1, 1) both; } .location_indicator::after { animation-delay: 0.5s; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 217, 204, 0.2); } 75% { box-shadow: 0 0 0 23px #ffd9cc; } 100% { box-shadow: 0 0 0 0px #ffd9cc; } } .tooltip.show { opacity: 1; } .tooltip .tooltip-inner { padding: 15px; width: 100%; max-width: 300px; text-align: left; background: #c6d2d6; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } .location-name { font-size: 24px; font-weight: 700; margin-bottom: 10px; } .location-des { color: #001541; } .tooltip .arrow::before { color: #FFFFFF; } .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: currentColor; } .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: currentColor; } .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before { border-right-color: currentColor; } .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before { border-left-color: currentColor; } .location-wrapper { position: relative; } .location-wrapper .location { position: absolute; width: 50px; height: 50px; border: 1px dashed #ff5c23; border-radius: 50%; padding: 22px; animation: pulse 6s infinite cubic-bezier(0.5, 0, 1, 1) both; -webkit-animation: pulse 6s infinite cubic-bezier(0.5, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(2) { animation: pulse 8s infinite cubic-bezier(0.5, 0, 1, 1) both; -webkit-animation: pulse 8s infinite cubic-bezier(0.5, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(2) .location_indicator::before, .location-wrapper .location:nth-of-type(2) .location_indicator::after { animation: pulse 4s infinite cubic-bezier(0.4, 0, 1, 1) both; -webkit-animation: pulse 4s infinite cubic-bezier(0.4, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(3) { animation: pulse 3s infinite cubic-bezier(0.5, 0, 1, 1) both; -webkit-animation: pulse 3s infinite cubic-bezier(0.5, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(3) .location_indicator::before, .location-wrapper .location:nth-of-type(3) .location_indicator::after { animation: pulse 5s infinite cubic-bezier(0.5, 0, 1, 1) both; -webkit-animation: pulse 5s infinite cubic-bezier(0.5, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(4) { animation: pulse 4s infinite cubic-bezier(0.5, 0, 1, 1) both; -webkit-animation: pulse 4s infinite cubic-bezier(0.5, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(4) .location_indicator::before, .location-wrapper .location:nth-of-type(4) .location_indicator::after { animation: pulse 6s infinite cubic-bezier(0.6, 0, 1, 1) both; -webkit-animation: pulse 6s infinite cubic-bezier(0.6, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(5) { animation: pulse 4s infinite cubic-bezier(0.5, 0, 1, 1) both; -webkit-animation: pulse 4s infinite cubic-bezier(0.5, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(5) .location_indicator::before, .location-wrapper .location:nth-of-type(5) .location_indicator::after { animation: pulse 7s infinite cubic-bezier(0.7, 0, 1, 1) both; -webkit-animation: pulse 7s infinite cubic-bezier(0.7, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(6) { animation: pulse 6s infinite cubic-bezier(0.5, 0, 1, 1) both; -webkit-animation: pulse 6s infinite cubic-bezier(0.5, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(6) .location_indicator::before, .location-wrapper .location:nth-of-type(6) .location_indicator::after { animation: pulse 8s infinite cubic-bezier(0.8, 0, 1, 1) both; -webkit-animation: pulse 8s infinite cubic-bezier(0.8, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(7) { animation: pulse 7s infinite cubic-bezier(0.5, 0, 1, 1) both; -webkit-animation: pulse 7s infinite cubic-bezier(0.5, 0, 1, 1) both; } .location-wrapper .location:nth-of-type(7) .location_indicator::before, .location-wrapper .location:nth-of-type(7) .location_indicator::after { animation: pulse 9s infinite cubic-bezier(0.9, 0, 1, 1) both; -webkit-animation: pulse 9s infinite cubic-bezier(0.9, 0, 1, 1) both; } /*======================== video popup =======================*/ .video-btn { margin: auto; font-size: 20px; color: #ff5c23; text-align: center; width: 109px; height: 109px; border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; padding: 3px 0px; position: relative; display: inline-block; } .video-btn i { position: relative; } .video-btn:after { content: ""; position: absolute; top: 0; width: 100%; height: 100%; left: 0; right: 0; bottom: 0; margin: auto; display: block; border: 20px solid #736969; border-radius: 50%; animation: bubble-ripple 1.5s linear infinite; } .video-btn .btn-hover-anim { position: absolute; top: 0; width: 100%; height: 100%; left: 0; right: 0; bottom: 0; margin: auto; display: block; border: 15px solid #656565; border-radius: 50%; animation: bubble-ripple 2s linear infinite; } @keyframes bubble-ripple { 0% { transform: scale(0.8); opacity: 0.75; } 25% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(1.8); opacity: 0; } } /*========================== ts subscribe ===========================*/ .ts-subscribe { padding: 53px 0; } .ts-subscribe-wrapper { position: relative; } .ts-subscribe-wrapper:after { position: absolute; left: 0; bottom: -54px; width: 100%; height: 1px; content: ""; background: #ddd; } .ts-newsletter .column-title { margin-bottom: 0; } .ts-newsletter .column-title i { color: #ff5c23; } .ts-newsletter-form .form-group { margin-bottom: 0; } .ts-newsletter-form .form-control { border-radius: 0; border: none; position: relative; box-shadow: none; } .ts-newsletter-form .form-control::placeholder { font-size: 14px; } .ts-newsletter-form .btn { position: absolute; right: 15px; top: 0; padding: 0px 14px; height: 100%; } .ts-newsletter-form .btn:hover { opacity: 0.8; background-color: #ff5c23; color: #fff; } .ts-newsletter-form .btn i { font-size: 26px; line-height: 45px; } /*===================================== footer area ========================================*/ .ts-footer { background-repeat: no-repeat; background-size: cover; background-position: center center; } .ts-footer p { color: #d5d5d5; margin-top: 35px; padding-right: 45px; } .ts-footer h3 { color: #fff; } .ts-footer .contact { margin-top: 40px; } .ts-footer .contact h3 { font-size: 20px; margin-bottom: 10px; } .ts-footer .contact p { margin: 0; } .ts-footer .widget-title { font-weight: 500; margin-top: 15px; margin-bottom: 35px; } .ts-footer .list-arrow, .ts-footer .menu { list-style: none; padding: 0; } .ts-footer .list-arrow li, .ts-footer .menu li { line-height: normal; font-size: 15px; width: 50%; padding-bottom: 25px; float: left; } .ts-footer .list-arrow li:before, .ts-footer .menu li:before { font-family: FontAwesome; content: ""; margin-right: 10px; color: #fff; font-size: 15px; } .ts-footer .list-arrow a, .ts-footer .menu a { color: #d5d5d5; } .ts-footer .list-arrow a:hover, .ts-footer .menu a:hover { color: #fc6a2a; } .ts-footer .week-schedule li, .ts-footer .service-time li { width: 100%; color: #d5d5d5; } .ts-footer .week-schedule li:before, .ts-footer .service-time li:before { content: none; } .ts-footer .week-schedule li span, .ts-footer .service-time li span { float: right; } .copy-right { background: #001541; padding: 20px 0; } .copy-right .copyright-text { margin-top: 5px; color: #fff; } .footer-social { display: inline-block; float: right; } .footer-social li { list-style: none; display: inline-block; } .footer-social li a i { display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; background: #000; margin-right: 5px; color: #fff; } .footer-social li .fa-facebook { background-color: #3B5998; } .footer-social li .fa-twitter { background-color: #55ACEE; } .footer-social li .fa-linkedin { background-color: #0976B4; } .footer-social li .fa-instagram { background-color: #B7242A; } /*-- ts footer classic --*/ .ts-footer-classic .ts-footer-widget { margin-top: 40px; } .ts-footer-classic .ts-footer-widget .widget-title { margin-bottom: 15px; color: #101010; } .ts-footer-classic .widget-title { color: #101010; } .ts-footer-classic p { color: #666666; } .ts-footer-classic .list-arrow li::before, .ts-footer-classic .menu li::before { color: #666666; } .ts-footer-classic .list-arrow li a, .ts-footer-classic .menu li a { color: #666666; } .ts-footer-classic .contact { margin-top: 0; } .ts-footer-classic .contact h3 { color: #101010; margin-top: 15px; font-weight: 500; } .ts-footer-classic .latest-widget li { color: #101010; position: relative; } .ts-footer-classic .latest-widget li:after { position: absolute; left: 0; bottom: 10px; height: 1px; width: 100%; content: ""; background: #e1e1e1; } .ts-footer-classic .latest-widget li:last-child:after { background: none; } .ts-footer-classic .latest-widget li span { color: #666666; float: left; margin-top: 8px; } .ts-footer-classic .latest-widget li span i { margin-right: 8px; } .ts-footer-classic .service-time li { color: #666666; } /*============================== Contact form ===============================*/ .ts-form .form-control { border: 1px solid #e8e8eb; border-radius: 0; margin-bottom: 30px; height: 45px; padding: 10px 20px; font-size: 14px; } .ts-form .form-control:focus { outline: none; box-shadow: none; } .ts-form .form-control.message-box { resize: none; height: 133px; margin-bottom: 30px; } .ts-form .form-control::placeholder { color: #999999; } .ts-form select.form-control.field { width: 100%; height: 45px; padding: 0 20px; } .ts-form input::-webkit-outer-spin-button, .ts-form input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; } .ts-btn-wraper .btn { width: 100%; } .contactMe .btn { border-radius: 0; font-weight: 700; font-size: 14px; height: 45px; line-height: 19px; margin-top: 0; } .qutoe-form-inner .form-control { border: 0; border-bottom: 1px solid #d3d3d3; padding-left: 0; color: #000; background: #edf5f8; border-radius: 0; } .qutoe-form-inner .form-control:focus { border: 0; border-bottom: 1px solid #ff5c23; background: none; border-radius: 0; box-shadow: none; } .qutoe-form-inner textarea { height: 130px; resize: none; } .qutoe-form-inner .form-group .btn { margin-top: 15px; } .qutoe-form-inner.ts-qoute-form .form-control { background: transparent; padding: 0 20px; height: 55px; border: 1px solid #444444; } .qutoe-form-inner.ts-qoute-form .form-control:focus { border-color: #ff5c23; } .qutoe-form-inner.ts-qoute-form textarea.form-control { height: 130px; resize: none; padding: 20px; } /*------------back to top-------------*/ .BackTo { background: #ff5c23 none repeat scroll 0 0; border-radius: 50%; bottom: 18px; color: #979797; cursor: pointer; height: 44px; position: fixed; right: 14px; text-align: center; width: 44px; z-index: 9; display: block; padding: 8px 0; transition: all 0.3s; } .BackTo:hover { background: #000; } .BackTo a { color: #fff; font-size: 20px; font-weight: 700; margin-top: 2px; } .custom-width-500 .elementor-widget-wrap { max-width: 500px; } .elementor-accordion .elementor-accordion-item { border-left: none; border-right: none; } .elementor-accordion .elementor-tab-content { border-top: none; } /*================================================== 404 ================================================== */ .error-page .error-code { display: block; font-size: 150px; line-height: 150px; color: #333; margin-bottom: 20px; text-shadow: 5px 5px 1px rgba(0, 0, 0, 0.1); } .error-page .error-body .btn { margin-top: 30px; font-weight: 700; } /*========================== tab rotate ===========================*/ @media (min-width: 992px) and (max-width: 1200px) { .header ul.navbar-nav > li > a { margin-left: 10px; font-size: 12px; } .header ul.navbar-nav > li .dropdown-menu { margin: 0 10px; } .header .nav-search i { font-size: 14px; } .header .quote-btn { padding: 0 20px; font-size: 12px; } .header-contact-info li { padding: 0 30px 0 60px; font-size: 14px; } .header-box .top-box { padding: 15px 5px; } } /*========================== tab device ===========================*/ @media (min-width: 768px) and (max-width: 991px) { .header-contact-info li { padding: 0 14px 0 14px; font-size: 13px; } .header-contact-info li i { display: none; } .top-info li { margin-right: 20px; font-size: 14px; } .header .navbar-brand, .header .logo { margin: 15px 0; } .header .navbar-toggler { background: #ff5c23; } .header .navbar-toggler-icon { background-image: none; outline: none; } .header .navbar-toggler-icon i { font-size: 30px; line-height: 30px; color: #fff; } .header .navbar-collapse { background: #101010; position: relative; } .header ul.navbar-nav { float: none; width: 100%; padding: 15px 30px; } .header ul.navbar-nav > li > a { line-height: 36px !important; margin-left: 0; } .header ul.navbar-nav > li:hover a:before, .header ul.navbar-nav > li.active a:before { display: none; } .header ul.navbar-nav li .dropdown-menu { min-width: auto; background: transparent; box-shadow: none; margin: 0; padding-top: 0; padding-bottom: 0; padding-right: 0; } .header ul.navbar-nav li .dropdown-menu li a { color: #fff; } .header ul.navbar-nav li .dropdown-menu .dropdown-item:after { transform: rotate(90deg); } .header ul.navbar-nav .dropdown-toggle::after { padding-right: 6px; } .header.header-standard ul.navbar-nav > li > a { color: #fff; } .header.header-standard .navbar-collapse { position: absolute; left: 0; width: 100%; z-index: 11; top: 100%; } .header.header-classic { padding: 10px 0; } .nav-search-area, .header-quote { display: none; } .header-box .header.header-classic { padding: 0; } .header-box .header.header-classic .navbar { padding: 10px; } .banner-area .banner-title { font-size: 50px; line-height: 55px; } .history-area .carousel-indicators li { margin: 0 16px; } .ts-project-details .owl-carousel.owl-theme .owl-nav [class*=owl-prev], .ts-features .owl-carousel.owl-theme .owl-nav [class*=owl-prev] { left: 0; } .ts-project-details .owl-carousel.owl-theme .owl-nav [class*=owl-next], .ts-features .owl-carousel.owl-theme .owl-nav [class*=owl-next] { right: 0; } .ts-blog .blog-box { margin-bottom: 30px; } .textwidget .contact { margin-bottom: 30px; } } /*========================== small device /mobile sm and large ===========================*/ @media (max-width: 767px) { .xs-center { text-align: center; } .topbar .social-links { padding: 0px 0 0; text-align: center; } .topbar .top-info { text-align: center; } .topbar .top-info li { margin-bottom: 10px; } .header-middle-area { display: none; } a.logo.d-none { display: block !important; } .header .navbar-brand, .header .logo { margin: 15px 0; } .header .navbar-toggler { background: #ff5c23; } .header .navbar-toggler-icon { background-image: none; outline: none; } .header .navbar-toggler-icon i { font-size: 30px; line-height: 30px; color: #fff; } .header .navbar-collapse { background: #101010; position: relative; } .header ul.navbar-nav { float: none; width: 100%; padding: 20px; } .header ul.navbar-nav > li > a { line-height: 36px !important; margin-left: 0; } .header ul.navbar-nav > li:hover a:before, .header ul.navbar-nav > li.active a:before { display: none; } .header ul.navbar-nav li .dropdown-menu { min-width: auto; background: transparent; box-shadow: none; margin: 0; padding-top: 0; padding-bottom: 0; padding-right: 0; } .header ul.navbar-nav li .dropdown-menu li a { color: #fff; } .header ul.navbar-nav li .dropdown-menu .dropdown-item:after { transform: rotate(90deg); } .header.header-standard, .header.header-classic { background: #fff; } .header.header-standard ul.navbar-nav > li > a, .header.header-classic ul.navbar-nav > li > a { color: #fff; } .header.header-standard .navbar-collapse, .header.header-classic .navbar-collapse { position: absolute; left: 0; width: 100%; z-index: 11; top: 100%; } .header .dropdown-toggle::after { padding-right: 8px; } .nav-search-area, .header-quote { display: none; } .header-box .top-box { text-align: center; } .header-box .top-box .header-contact-info { display: none; } .header-box .navbar { padding: 10px; } .banner-area { padding: 60px 0; } .banner-area .banner-title { font-size: 40px; line-height: 44px; } .banner-area .mt-80 { margin-top: 150px; } .ts-project-details .owl-carousel.owl-theme .owl-nav [class*=owl-prev], .ts-features .owl-carousel.owl-theme .owl-nav [class*=owl-prev] { left: 0; } .ts-project-details .owl-carousel.owl-theme .owl-nav [class*=owl-next], .ts-features .owl-carousel.owl-theme .owl-nav [class*=owl-next] { right: 0; } .ts-blog .blog-box { margin-bottom: 30px; } .blog .post-body .entry-title { font-size: 24px; line-height: 30px; } .blog .pagination { margin-bottom: 40px; } .history-area .carousel-indicators { display: block; } .history-area .carousel-indicators:before { display: none; } .footer-left-widget .textwidget { margin-bottom: 30px; } .copy-right { text-align: center; } .copy-right .footer-social { text-align: center; margin-top: 15px; float: none; } .copy-right .footer-social ul { padding: 0; } }