/* Westo HTML5 Template */ /************ TABLE OF CONTENTS *************** 1. Fonts 2. Reset 3. Global 4. Main Header 5. Hidden Sidebar 6. Banner Section 7. Page Title 8. Section Banner 9. Section Title 10. About Section 11. Blog Section **********************************************/ :root { --thm-font: 'Catamaran', sans-serif; --thm-font-2: 'Caveat', cursive; --thm-gray: #737c76; --thm-gray-rgb: 115, 124, 118; --thm-primary: #fdc400; --thm-primary-rgb: 253, 196, 0; --thm-black: #1e3226; --thm-black-rgb: 30, 50, 38; } /*============================================== Base Css ===============================================*/ * { margin: 0px; padding: 0px; border: none; outline: none; font-size: 100%; } html, body { height: 100%; } body { color: var(--thm-gray); font-size: 16px; line-height: 32px; font-weight: 500; font-family: var(--thm-font); } button:focus { outline: none; } button { cursor: pointer; border: none; background: transparent; padding: 0; } h1, h2, h3, h4, h5, h6 { color: var(--thm-black); font-weight: 800; line-height: 1.25em; font-family: var(--thm-font); margin: 0; } h3 { font-size: 24px; line-height: 36px; font-weight: 700; } a, a:hover, a:active, a:focus { text-decoration: none; outline: none; border: none; transition: .4s; -webkit-transition: all .4s ease-in-out; } textarea:focus { outline: none; } *::-moz-selection { background: var(--thm-black); color: #fff; text-shadow: none; } ::-moz-selection { background: var(--thm-black); color: #fff; text-shadow: none; } ::selection { background: var(--thm-black); color: #fff; text-shadow: none; } *::placeholder { color: #555555; opacity: 1; } *::-moz-placeholder { color: #555555; opacity: 1; } *:-ms-input-placeholder { color: #555555; opacity: 1; } .parallax-scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .fancybox-image, .fancybox-spaceball { border-radius: 10px; } @media (min-width: 1200px) { .container { max-width: 1200px; } } img { max-width: 100%; height: auto; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; } .map-data { text-align: center; font-size: 14px; font-weight: 400; line-height: 1.8em; padding: 5px 10px 5px; } .map-data a { color: #0b59d9; display: block; } .map-data h6 { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 5px; color: #121212; } i { font-style: normal; } ul, li { list-style: none; margin: 0; padding: 0; } ol, li { margin: 0; padding: 0; } .auto-container { position: static; max-width: 1200px; padding: 0px 15px; margin: 0 auto; } .btn-one { position: relative; display: inline-block; overflow: hidden; padding-top: 7px; padding-left: 60px; padding-bottom: 3px; padding-right: 60px; background-color: var(--thm-primary); color: var(--thm-black); font-size: 14px; line-height: 50px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; font-family: var(--thm-font); z-index: 1; } .btn-one:before { position: absolute; top: 0px; left: 0; bottom: 0px; width: 100%; content: ""; -webkit-transform: translateX(-100%); transform: translateX(-100%); border-radius: 0px; webkit-transition-duration: 800ms; transition-duration: 800ms; background-color: var(--thm-base); z-index: 1; } .btn-one:hover:before { -webkit-transform: translateX(0px); transform: translateX(0px); } .btn-one .txt { position: relative; display: flex; align-items: center; z-index: 2; } .btn-one .arrow { position: relative; top: -2px; display: inline-block; padding-left: 10px; font-size: 16px; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; z-index: 1; } .btn-one:hover, .btn-one:focus { color: #ffffff; } .btn-two { position: relative; display: inline-block; color: #ffffff; font-size: 14px; font-weight: 400; line-height: 20px; text-transform: uppercase; font-family: var(--thm-font-2); transition: all 200ms linear; transition-delay: 0.1s; } .btn-two span { position: relative; top: 3px; display: inline-block; padding-right: 10px; line-height: 15px; transform: rotate(180deg); } .btn-two span:before { position: relative; top: 3px; display: inline-block; color: var(--thm-black); font-size: 25px; font-weight: 400; z-index: 1; } .btn-two span:after { content: ""; position: absolute; top: 0; right: 20px; bottom: 0; width: 20px; height: 20px; background: #ffffff; border-radius: 50%; transition: all 200ms linear; transition-delay: 0.1s; } .btn-two:hover span:after { transform: scale(1.1); } .btn-two:hover:before {} .btn-two:hover { color: var(--thm-base); } .checked-box1 { position: relative; display: block; min-height: 40px; } .checked-box1 label { position: relative; display: inline-block; padding-left: 50px; margin-right: 0px; margin-bottom: 0; color: #585858; font-size: 14px; line-height: 22px; font-weight: 400; cursor: pointer; min-height: 40px; font-family: var(--thm-font); } .checked-box1 input[type="checkbox"] { display: none; } .checked-box1 input[type="checkbox"]+label span { position: absolute; display: block; top: 4px; left: 0; width: 40px; height: 40px; vertical-align: middle; background-color: #ffffff; border: 1px solid #dae5ec; cursor: pointer; border-radius: 50%; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .checked-box1 label span:before { position: absolute; top: 0px; left: 0px; bottom: 0; right: 0; content: ""; width: 30px; height: 30px; background: var(--thm-primary); border-radius: 50%; margin: 4px; transform: scale(0); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .checked-box1 input[type="checkbox"]:checked+label span { border-color: #dae5ec; } .checked-box1 input[type="checkbox"]:checked+label span:before { transform: scale(1.0); } .checked-box2 { position: relative; display: block; min-height: 30px; } .checked-box2 label { position: relative; display: inline-block; padding-left: 30px; margin-right: 0px; margin-bottom: 0; color: #757575; font-size: 16px; line-height: 22px; font-weight: 400; cursor: pointer; min-height: 30px; font-family: var(--thm-font); } .checked-box2 input[type="checkbox"] { display: none; } .checked-box2 input[type="checkbox"]+label span { position: absolute; top: 5px; left: 0; width: 16px; height: 16px; vertical-align: middle; background-color: #f5f5f5; border: 1px solid #e5e5e5; cursor: pointer; border-radius: 3px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .checked-box2 label span:before { font-family: FontAwesome; content: "\f00c"; position: absolute; top: 0px; left: 0px; bottom: 0; right: 0; width: 16px; height: 16px; margin: 0px; color: var(--thm-base); font-size: 10px; line-height: 16px; text-align: center; opacity: 0; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .checked-box2 input[type="checkbox"]:checked+label span { border-color: #dedede; } .checked-box2 input[type="checkbox"]:checked+label span:before { opacity: 1; } .thm-social-link1 { position: relative; display: block; } .thm-social-link1 ul { position: relative; } .thm-social-link1 ul li { position: relative; float: left; margin-right: 10px; } .thm-social-link1 ul li:last-child { margin-right: 0; } .thm-social-link1 ul li a { position: relative; display: block; width: 40px; height: 40px; background: var(--thm-base); border-radius: 50%; border: 2px solid var(--thm-base); color: var(--thm-black); font-size: 14px; line-height: 36px; text-align: center; z-index: 1; transition: all 500ms ease; } .thm-social-link1 ul li a:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--thm-black); content: ""; border-radius: 50%; z-index: -1; transform: scale(0.0); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); } .thm-social-link1 ul li a:hover:before { transform: scaleX(1.0); } .thm-social-link1 ul li a:hover { color: #ffffff; } .thm-social-link2 { position: relative; display: block; } .thm-social-link2 ul { position: relative; overflow: hidden; } .thm-social-link2 ul li { position: relative; display: inline-block; float: left; margin-right: 20px; } .thm-social-link2 ul li:last-child { margin-right: 0; } .thm-social-link2 ul li a { position: relative; display: block; color: #909090; font-size: 16px; line-height: 30px; transition: all 500ms ease; } .thm-social-link2 ul li a:hover { color: var(--thm-primary); } .parallax-bg-one { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .parallax-bg-one::before { background: rgba(18, 32, 0, 0.90) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } /*___ owl Nav Dot Style _____*/ .owl-theme .owl-prev span, .owl-theme .owl-next span {} .owl-nav-style-one {} .owl-nav-style-one .owl-controls {} .owl-nav-style-one.owl-theme .owl-stage-outer { position: relative; display: block; padding-top: 0px; padding-bottom: 0px; } .owl-nav-style-one.owl-theme .owl-nav { position: relative; display: block; line-height: 0; z-index: 10; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] { position: relative; display: inline-block; width: 60px; height: 60px; border-radius: 0%; margin: 0 0 0 0px; padding: 0; transition: all 700ms ease 0s; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:before { content: "\f149"; font-family: flaticon !important; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 2px solid #ffffff; color: var(--thm-base); font-size: 18px; line-height: 56px; font-weight: 600; text-align: center; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover:before { border-color: var(--thm-base); } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] span { display: none; } .owl-nav-style-one.owl-theme .owl-nav .owl-prev { transform: rotate(-270deg); margin-right: 10px; } .owl-nav-style-one.owl-theme .owl-nav .owl-next { margin-left: 0px; transform: rotate(270deg); } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover { background-color: var(--thm-base); } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover:before { color: #ffffff } .owl-carousel.owl-dot-style1 .owl-dots { position: relative; text-align: center; line-height: 0; margin-top: 0px !important; display: block; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot { position: relative; display: inline-block; width: 11px; height: 11px; background-color: rgba(var(--thm-base-rgb), .20); border: 0px solid #e0e0e0; margin: 0px 5px; padding: 0px; border-radius: 50%; transition: all 100ms linear; transition-delay: 0.1s; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot:before { content: ""; position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; border-radius: 50%; background: var(--thm-primary); transform: scale(0); transition: all 500ms ease; } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot.active { background: var(--thm-primary); } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot.active:before { transform: scale(1.0); } .owl-carousel.owl-dot-style1 .owl-dots .owl-dot span {} .owl-carousel.owl-dot-style1 .owl-dots .owl-dot.active span {} @keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .1), 0 0 0 20px rgba(238, 238, 238, 0.3000); } } @keyframes pulse2 { 50% { box-shadow: 0 0 0 5px rgba(255, 231, 1, .1), 0 0 0 20px rgba(255, 231, 1, 0.3000); } } .rating-box { position: relative; display: block; overflow: hidden; } .rating-box ul { overflow: hidden; } .rating-box ul li { position: relative; display: inline-block; float: left; margin-right: 5px; } .rating-box ul li:last-child { margin-right: 0; } .rating-box ul li a { font-size: 20px; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; } .boxed_wrapper { position: relative; margin: 0 auto; overflow: hidden !important; background: #ffffff none repeat scroll 0 0; width: 100%; min-width: 320px; } .styled-pagination { position: relative; display: block; width: 100%; height: auto; padding-top: 10px; } .styled-pagination.pdtop0 { padding-top: 0; } .styled-pagination li { position: relative; display: inline-block; float: none; margin-right: 6px; } .styled-pagination li:last-child { margin-right: 0; } .styled-pagination li.prev a { transform: rotate(0deg); } .styled-pagination li a span:before { position: relative; top: 6px; font-size: 25px; } .styled-pagination li.prev a span.left { position: relative; top: 1px; } .styled-pagination li.next a span.right { position: relative; top: 2px; } .styled-pagination li a { position: relative; display: inline-block; width: 55px; height: 55px; border-radius: 0%; background: #f5f5f5; border: 1px solid #f5f5f5; color: var(--thm-black); font-size: 18px; line-height: 53px; font-weight: 600; text-align: center; text-transform: uppercase; transition: all 500ms ease; font-family: var(--thm-font); z-index: 1; } .styled-pagination li:hover a, .styled-pagination li.active a { color: #ffffff; border-color: var(--thm-base); background: var(--thm-base); } .styled-pagination li.prev a, .styled-pagination li.next a { color: var(--thm-base); transition: all 200ms linear; transition-delay: 0.1s; } .styled-pagination li.prev a:hover, .styled-pagination li.next a:hover { color: #ffffff; } /*=============== Color-Layout =============*/ .switcher { position: fixed; top: 320px; z-index: 99; } .switcher .switch_btn { position: absolute; top: 0px; right: -50px; z-index: -1; } .switcher .switch_btn button { width: 50px; height: 50px; color: #fff; line-height: 50px; cursor: pointer; border-radius: 0; margin-left: 0; transition: all 500ms ease; background: rgba(0, 0, 0, 0.90); } .switcher .switch_menu { position: absolute; width: 220px; height: 30px; background: transparent; display: none; top: 0px; left: 60px; bottom: 0; margin: 10px 0; } .switcher #styleOptions li { position: relative; display: inline-block; width: 30px; height: 30px; margin-right: 3px; } .switcher #styleOptions li:last-child { margin-right: 0; } .switcher #styleOptions li a { position: relative; display: inline-block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 0px #fff; } .switcher #styleOptions li a.blue-color { background: #1266e3; } .switcher #styleOptions li a.pink-color { background: #e70887; } .switcher #styleOptions li a.violet-color { background: #6936d8; } .switcher #styleOptions li a.crimson-color { background: #ba0913; } .switcher #styleOptions li a.orange-color { background: #FFA500; } .switcher #styleOptions li a.green-color { background: #95c41f; } /** Search Pop Up Style **/ .serach-button-style1 { position: relative; display: block; } .serach-button-style1 .search-toggler { position: relative; display: block; width: 70px; height: 40px; background: rgba(255, 255, 255, 0.05); border-radius: 0px; color: var(--thm-black); font-size: 25px; line-height: 46px; font-weight: 400; cursor: pointer; border-left: 1px solid rgba(var(--thm-base-rgb), .10); transition: all 500ms ease; } .serach-button-style1 .search-toggler:hover { color: var(--thm-base); } .search-popup { position: fixed; left: 0; top: 0px; width: 100%; height: 100%; z-index: 99999; visibility: hidden; opacity: 0; overflow: auto; background: rgba(0, 0, 0, 0.9); -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); transition: all 700ms ease; -moz-transition: all 700ms ease; -webkit-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; } .search-popup.popup-visible { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); visibility: visible; opacity: 1; } .search-popup .overlay-layer { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; display: block; } .search-popup .close-search { position: absolute; right: 25px; top: 25px; font-size: 22px; color: #ffffff; cursor: pointer; background-image: url(../images/icon/icon-cross.png); width: 40px; height: 40px; z-index: 5; transition: all 500ms ease; } .search-popup .search-form { position: relative; padding: 0px 15px 0px; max-width: 1024px; margin: 0 auto; margin-top: 150px; margin-bottom: 100px; opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); z-index: 10; } .search-popup.popup-visible .search-form { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); transition: all 500ms ease 500ms; -moz-transition: all 900ms ease 500ms; -webkit-transition: all 900ms ease 500ms; -ms-transition: all 900ms ease 500ms; -o-transition: all 900ms ease 500ms; } .search-popup .search-form .form-group { margin-bottom: 30px; } .search-popup .search-form fieldset { position: relative; border-radius: 12px; } .search-popup .search-form fieldset input[type="search"] { position: relative; height: 70px; padding: 20px 250px 20px 30px; background: #ffffff; line-height: 30px; font-size: 24px; color: #233145; border-radius: 7px; } .search-popup .search-form fieldset input[type="submit"] { position: absolute; display: block; right: 0px; top: 0px; text-align: center; width: 220px; height: 70px; padding: 20px 10px 20px 10px; color: #ffffff !important; line-height: 30px; font-size: 20px; cursor: pointer; text-transform: uppercase; border-radius: 0px 7px 7px 0px; background: var(--thm-base); } .search-popup .search-form fieldset input[type="submit"]:hover { transform: translateY(0px); } .search-popup h3 { text-transform: uppercase; font-size: 20px; font-weight: 600; color: #ffffff; margin-bottom: 20px; letter-spacing: 1px; text-align: center; } .search-popup .recent-searches { font-size: 16px; color: #ffffff; text-align: center; } .search-popup .recent-searches li { display: inline-block; margin: 0px 10px 10px 0px; } .search-popup .recent-searches li a { display: block; line-height: 24px; border: 1px solid #ffffff; padding: 7px 15px; color: #ffffff; border-radius: 3px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .search-popup .recent-searches li a:hover { border-color: var(--thm-base); background-color: var(--thm-base); } .serach-button-style1--instyle2 { margin-left: 0; margin-right: 0; } .serach-button-style1--instyle2 .search-toggler { color: #ffffff; border-left: 1px solid rgba(255, 255, 255, 0.20); } .serach-button-style1--instyle2 .search-toggler:hover { color: var(--thm-black); } /*________________Preloader_______________ */ .preloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999999999999; background-position: center center; background-repeat: no-repeat; background-image: url(../images/icon/preloader.svg); } .preloader-close { position: fixed; z-index: 999999; color: #fff; padding: 10px 20px; cursor: pointer; right: 0; bottom: 0; font-weight: 600; background-color: var(--thm-black); } .loader-wrap { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999; } .loader-wrap .layer-one { position: absolute; left: 0%; top: 0; width: 33.3333%; height: 100%; overflow: hidden; } .loader-wrap .layer-two { position: absolute; left: 33.3333%; top: 0; width: 33.3333%; height: 100%; overflow: hidden; } .loader-wrap .layer-three { position: absolute; left: 66.6666%; top: 0; width: 33.3333%; height: 100%; overflow: hidden; } .loader-wrap .layer .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--thm-base); } /*** Scroll To Top style ***/ .scroll-top { position: fixed; right: 15px; bottom: 20px; width: 60px; height: 60px; border-radius: 50%; background-color: #ffffff; border: 2px solid #ffffff; color: var(--thm-base); font-size: 20px; line-height: 56px; font-weight: 700; text-align: center; text-transform: uppercase; display: none; cursor: pointer; transform: rotate(0deg); transition: all 200ms linear; transition-delay: 0.1s; z-index: 999999999; } .scroll-top span {} .scroll-top:after { position: absolute; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 1; z-index: -1; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); } .scroll-top:before { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; background: transparent; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation-delay: .9s; animation-delay: .9s; content: ""; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); -webkit-animation: ripple 3s infinite; animation: ripple 3s infinite; -webkit-transition: all .4s ease; transition: all .4s ease; } .scroll-top:hover { color: #ffffff; background-color: var(--thm-black); border-color: var(--thm-black); } /* Form validation styles */ input:focus, textarea:focus, select:focus { border-color: #43c3ea; outline: none; } #contact-form input[type="text"].error { border-color: red; } #contact-form input[type="email"].error { border-color: red; } #contact-form select.error { border-color: red; } #contact-form textarea.error { border-color: red; } /* Overlay styles */ .overlay-style-one { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(218, 60, 34, 0.80); transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; opacity: 0; z-index: 1; } .overlay-style-one .box { display: table; height: 100%; width: 100%; } .overlay-style-one .box .content { display: table-cell; text-align: center; vertical-align: middle; } .overlay-style-one .box .inner { display: table-cell; text-align: center; vertical-align: middle; } .overlay-style-two { position: absolute; left: 0px; bottom: 0px; right: 0px; top: 0px; z-index: 2; opacity: 0; transition: all 900ms ease; } .overlay-style-two:before { position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 50%; display: block; opacity: 0; text-align: center; transform: perspective(400px) rotateX(-90deg); transform-origin: top; transition: all 0.5s; background-color: rgba(18, 18, 18, 0.90); } .overlay-style-two:after { position: absolute; content: ''; left: 0px; bottom: 0px; width: 100%; height: 50%; display: block; opacity: 0; text-align: center; transform: perspective(400px) rotateX(90deg); transform-origin: bottom; transition: all 0.5s; background-color: rgba(18, 18, 18, 0.90); } .review-box { position: relative; display: block; overflow: hidden; line-height: 16px; } .review-box>ul { display: block; overflow: hidden; } .review-box>ul>li { display: inline-block; float: none; margin: 0 1px; } .review-box>ul>li:last-child { margin-right: 0px; } .review-box>ul>li>i { position: relative; display: inline-block; color: #ffa800; font-size: 18px; font-weight: 500; cursor: pointer; transition: all 200ms linear; transition-delay: 0.1s; } .review-box>ul>li:hover>i { color: var(--thm-gray); } /* Update header Style */ @keyframes menu_sticky { 0% { margin-top: -90px; } 50% { margin-top: -74px; } 100% { margin-top: 0; } } /*** ======================================== Mobile Menu ======================================== ***/ .nav-outer .mobile-nav-toggler { position: relative; display: none; float: right; cursor: pointer; padding: 30px 0; } .nav-outer.style1 .mobile-nav-toggler { padding: 35px 0 35px; } .nav-outer.style2 .mobile-nav-toggler { padding: 25px 0; } .nav-outer.style3 .mobile-nav-toggler { padding: 30px 0; } .nav-outer .mobile-nav-toggler .inner { position: relative; display: block; padding: 3px 5px; background: var(--thm-base); } .nav-outer.style2 .mobile-nav-toggler .inner { background-color: var(--thm-black); } .mobile-menu { position: fixed; top: 0; right: 0; width: 300px; max-width: 100%; height: 100%; padding-right: 30px; opacity: 0; visibility: hidden; z-index: 999999; } .mobile-menu .menu-backdrop { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(9, 16, 32, 0.90); -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; z-index: 1; } .mobile-menu-visible .mobile-menu .menu-backdrop { opacity: 0.70; visibility: visible; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .mobile-menu .mCSB_inside>.mCSB_container { margin-right: 5px; } .mobile-menu .navbar-collapse { display: block !important; } .mobile-menu .nav-logo { position: relative; padding: 30px 25px; text-align: left; } .mobile-menu .nav-logo a { position: relative; display: inline-block; } .mobile-menu-visible { overflow: hidden; } .mobile-menu-visible .mobile-menu { opacity: 1; visibility: visible; } .mobile-menu .menu-box { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; max-height: 100%; overflow-y: auto; background: #000000; padding: 0px 0px; z-index: 5; opacity: 0; visibility: hidden; border-radius: 0px; -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); } .mobile-menu-visible .mobile-menu .menu-box { opacity: 1; visibility: visible; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .mobile-menu .close-btn { position: absolute; top: 10px; right: 10px; color: #ffffff; font-size: 30px; line-height: 30px; width: 30px; text-align: center; cursor: pointer; z-index: 10; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; } .mobile-menu-visible .mobile-menu .close-btn { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .mobile-menu .close-btn:hover { color: var(--thm-base); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .mobile-menu .navigation { position: relative; display: block; width: 100%; float: none; } .mobile-menu .navigation li { position: relative; display: block; border-top: 1px solid rgba(255, 255, 255, 0.10); } .mobile-menu .navigation:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .mobile-menu .navigation li>ul>li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.10); } .mobile-menu .navigation li>a { position: relative; display: block; padding: 10px 25px; color: #ffffff; font-size: 15px; line-height: 24px; font-weight: 600; text-transform: uppercase; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .mobile-menu .navigation li>a:before { content: ''; position: absolute; left: 0; top: 0; height: 0; border-left: 5px solid var(--thm-base); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .mobile-menu .navigation li.current>a:before { height: 100%; } .mobile-menu .navigation li.current>a, .mobile-menu .navigation li>a:hover { color: var(--thm-base); } .mobile-menu .navigation li ul li>a { font-size: 15px; font-weight: 400; margin-left: 20px; text-transform: capitalize; } .mobile-menu .navigation li.dropdown .dropdown-btn { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; text-align: center; color: #ffffff; font-size: 16px; line-height: 32px; background: rgba(255, 255, 255, 0.10); cursor: pointer; border-radius: 2px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; z-index: 5; } .mobile-menu .navigation li.dropdown .dropdown-btn.open { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .mobile-menu .navigation li>ul, .mobile-menu .navigation li>ul>li>ul, .mobile-menu .navigation>li.dropdown>.megamenu { display: none; } .mobile-menu .social-links { position: relative; text-align: center; padding: 50px 15px; } .mobile-menu .social-links li { position: relative; display: inline-block; margin: 0px 1px 10px; } .mobile-menu .social-links li a { position: relative; display: block; width: 45px; height: 45px; border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 50%; background: var(--thm-base); color: #ffffff; font-size: 16px; line-height: 41px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .mobile-menu .social-links li a:hover { color: var(--thm-base); background-color: #ffffff; } /** xs sidebar **/ .xs-sidebar-group .xs-overlay { left: 0%; top: 0; position: fixed; height: 100%; opacity: 0; width: 100%; visibility: hidden; transition: all 200ms linear; transition-delay: 0.1s; cursor: url(../images/icon/cross-out.png), pointer; z-index: 99999999; } .xs-sidebar-group.isActive .xs-overlay { opacity: .8; visibility: visible; transition-delay: 0.3s; right: 100%; background-color: #000000; } .xs-sidebar-widget { position: fixed; left: -100%; top: 0; bottom: 0; width: 100%; max-width: 365px; background-color: #2c2c2c; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all 700ms ease 100ms; visibility: hidden; opacity: 1; z-index: 999999999; } .xs-sidebar-group.isActive .xs-sidebar-widget { opacity: 1; visibility: visible; left: 0; transition: all 500ms ease 800ms; } .sidebar-textwidget { padding: 70px 30px; } .sidebar-widget-container { position: relative; top: 150px; opacity: 0; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 300ms ease 100ms; } .xs-sidebar-group.isActive .sidebar-widget-container { top: 0px; opacity: 1; visibility: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 700ms ease 1500ms; } .xs-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .8; z-index: 0; background-color: #000000; } .xs-sidebar-group .widget-heading { position: absolute; top: 0; right: 0; padding: 25px; } .xs-sidebar-group .widget-heading a { position: relative; display: inline-block; width: 30px; height: 30px; line-height: 26px; text-align: center; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 16px; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; } .xs-sidebar-group .widget-heading a:hover { color: var(--thm-base); border-color: var(--thn-base); } .xs-sidebar-group .content-inner .logo { position: relative; display: block; margin-bottom: 30px; } .xs-sidebar-group .content-inner .logo a { position: relative; display: inline-block; } .xs-sidebar-group .content-inner h4 { position: relative; display: block; font-size: 20px; line-height: 30px; color: #fff; font-weight: 400; text-transform: uppercase; padding-bottom: 14px; margin-bottom: 30px; } .xs-sidebar-group .content-inner h4:before { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background: var(--thm-base); } .xs-sidebar-group .content-inner .content-box { margin-bottom: 30px; padding-right: 15px; } .xs-sidebar-group .content-inner .content-box .inner-text { position: relative; display: block; padding-top: 2px; } .xs-sidebar-group .content-inner .content-box p { color: #b0bcc2; margin: 0; } .xs-sidebar-group .content-inner .form-inner .form-group { position: relative; margin-bottom: 20px; } .xs-sidebar-group .content-inner .form-inner .form-group:last-child { margin-bottom: 0px; } .xs-sidebar-group .content-inner .form-inner .form-group input[type='text'], .xs-sidebar-group .content-inner .form-inner .form-group input[type='email'], .xs-sidebar-group .content-inner .form-inner .form-group textarea { position: relative; display: block; width: 100%; height: 50px; font-size: 15px; padding: 10px 20px; color: #848484; transition: all 500ms ease; } .xs-sidebar-group .content-inner .form-inner .form-group button.btn-one { color: var(--thm-black); } .xs-sidebar-group .content-inner .form-inner .form-group .theme-btn-one:hover {} .xs-sidebar-group .content-inner .form-inner .form-group textarea { resize: none; height: 120px; } .xs-sidebar-group .content-inner .form-inner .form-group input:focus, .xs-sidebar-group .content-inner .form-inner .form-group textarea:focus { border-color: #00224f; } .sidebar-contact-info { position: relative; display: block; padding-top: 43px; } .sidebar-contact-info h3 {} .sidebar-contact-info ul { position: relative; display: block; padding-bottom: 22px; } .sidebar-contact-info ul li { position: relative; display: block; color: #b0bcc2; line-height: 30px; margin-bottom: 6px; } .sidebar-contact-info ul li:last-child { margin-bottom: 0; } .sidebar-contact-info ul li span { position: relative; display: inline-block; width: 25px; } .sidebar-contact-info ul li span:before { position: relative; display: inline-block; color: var(--thm-base); top: 3px; } .sidebar-contact-info ul li a { color: #b0b0bd; } .xs-sidebar-group .content-inner .thm-social-link1 { overflow: hidden; } .sec-title { position: relative; display: block; margin-top: -8px; padding-bottom: 44px; } .sec-title .sub-title { position: relative; display: block; line-height: 0; padding-bottom: 9px; } .sec-title .sub-title h3 { color: var(--thm-base); font-size: 24px; line-height: 34px; font-family: var(--thm-font-2); font-weight: 700; font-style: normal; } .sec-title h2 { font-size: 50px; line-height: 1.2em; font-weight: 800; text-transform: none; } .sec-title--style2 { position: relative; } .sec-title--style2 .sub-title h3 { color: var(--thm-primary); } .sec-title--style2 h2 { color: #ffffff; } @keyframes slide5 { from { background-position: 0 0; } to { background-position: -200px 0; } } @-webkit-keyframes slide5 { from { background-position: 0 0; } to { background-position: -200px 0; } } /*** ============================================= Features Style1 Content Css ============================================= ***/ .features-style1-area { position: relative; display: block; } .features-style1__content { position: relative; display: block; z-index: 10; } .features-style1__content ul { position: relative; display: flex; background: #ffffff; padding: 0 50px; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); margin-top: -60px; z-index: 10; } .features-style1__content ul li { position: relative; display: block; padding: 0 20px; padding-top: 54px; padding-bottom: 45px; max-width: 33.333333%; width: 100%; } .features-style1__content ul li:before { content: ""; position: absolute; left: 0; bottom: 0; right: 0; height: 3px; background: var(--thm-primary); transform: scaleX(0); transition: all 500ms linear; transition-delay: 0.1s; } .features-style1__content ul li:hover:before { transform: scaleX(1.0); } .single-features-style1 { position: relative; display: block; padding-left: 75px; } .single-features-style1 .icon-holder { position: absolute; top: 0; left: 0; width: 75px; height: 75px; padding-top: 10px; } .single-features-style1 .icon-holder .box { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-color: rgba(var(--thm-base-rgb), .10); transition: all 500ms ease; } .single-features-style1:hover .icon-holder .box { background-color: var(--thm-primary); } .single-features-style1 .icon-holder span:before { position: relative; display: inline-block; color: var(--thm-base); font-size: 65px; line-height: 65px; transform: scale(1.0); transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); } .single-features-style1:hover .icon-holder span:before { color: var(--thm-black); transform: scale(0.9); } .single-features-style1 .text-holder { position: relative; display: block; padding-top: 7px; padding-left: 10px; } .single-features-style1 .text-holder h3 { font-size: 20px; line-height: 24px; margin: 0 0 14px; } .single-features-style1 .text-holder h3 a { color: var(--thm-black); transition: all 200ms linear; transition-delay: 0.1s; } .single-features-style1 .text-holder h3 a:hover { color: var(--thm-primary); } .single-features-style1 .text-holder p { margin: 0; } /*** ============================================= Features style2 Area Css ============================================= ***/ .features-style2-area { position: relative; display: block; } .features-style2-area .auto-container { max-width: 100%; padding: 0; } .features-style2-area .row { margin-left: 0px; margin-right: 0px; } .features-style2-area .row [class*=col-] { padding-left: 0px; padding-right: 0px; } .single-features-style2-box { position: relative; display: block; overflow: hidden; background: var(--thm-black); padding: 112px 0; min-height: 360px; } .single-features-style2-box .inner-content { position: relative; display: block; max-width: 585px; width: 100%; float: right; padding-left: 75px; } .single-features-style2-box.left .inner-content { float: left; margin-left: 100px; } .single-features-style2-box .inner-content .icon { position: absolute; top: 25px; left: 0; padding-top: 10px; } .single-features-style2-box .inner-content .icon .box { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.07); transition: all 300ms ease 100ms; } .single-features-style2-box:hover .inner-content .icon .box { background: var(--thm-base); transform: rotate(90deg); } .single-features-style2-box .inner-content .icon span::before { position: relative; display: inline-block; color: var(--thm-primary); font-size: 65px; line-height: 65px; transform: scale(1.0); transition: all 200ms linear; transition-delay: 0.1s; } .single-features-style2-box:hover .inner-content .icon span::before { transform: scale(0.8); } .single-features-style2-box .inner-content .title { position: relative; display: block; padding-left: 20px; } .single-features-style2-box .inner-content .title h3 { color: #a5b9ad; font-size: 24px; line-height: 36px; font-weight: 700; font-family: var(--thm-font-2); margin-bottom: 4px; } .single-features-style2-box .inner-content .title h2 { color: #ffffff; font-size: 40px; line-height: 1.2em; font-weight: 700; } .single-features-style2-box .img-bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-attachment: scroll; background-repeat: no-repeat; background-position: center center; background-size: cover; } /*** ============================================= Features Style3 Area Css ============================================= ***/ .features-style3-area { position: relative; display: block; padding: 120px 0px 120px; background: #ffffff; z-index: 10; } .features-style3__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-position: center center; background-attachment: scroll; background-size: cover; background-repeat: no-repeat; background-color: var(--thm-black); background-blend-mode: luminosity; z-index: -1; } .features-style3__bg::before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(var(--thm-black-rgb), 0.85); z-index: -2; content: ""; } .features-style3__content { position: relative; display: block; } .features-style3__content .sec-title { padding-bottom: 34px; } .features-style3__content .video-btn { position: relative; display: block; } .features-style3__content .video-btn .icon { position: relative; display: inline-block; } .features-style3__content .video-btn .icon .video-popup { position: relative; display: block; width: 100px; height: 100px; line-height: 100px; color: #ffffff; font-size: 20px; text-align: center; background: var(--thm-base); } .features-style3__content .video-btn .icon .video-popup span:before { position: relative; top: 3px; } .features-style3__list { position: relative; display: block; overflow: hidden; } .features-style3__list ul { position: relative; display: block; float: left; } .features-style3__list ul.style2 { position: relative; display: block; float: left; padding-left: 75px; } .features-style3__list ul li { position: relative; display: block; color: #ffffff; font-size: 18px; line-height: 40px; font-weight: 600; transition: all 500ms ease; } .features-style3__list ul li:hover { color: var(--thm-primary); } .features-style3__list ul li span::before { position: relative; display: inline-block; color: var(--thm-primary); font-size: 20px; padding-right: 13px; top: 3px; } /*** ============================================= Choose Style1 Area Css ============================================= ***/ .choose-style1-area { position: relative; display: block; margin-bottom: -100px; z-index: 10; } .choose-style1__title-box { position: relative; display: block; background: var(--thm-base); padding: 62px 60px 65px; } .choose-style1__title-box .sec-title--style2 { padding-bottom: 58px; } .choose-style1__title-box .sec-title--style2 h2 { color: #ffffff; font-size: 30px; line-height: 40px; font-weight: 800; } .choose-style1__title-box .btn-box { position: relative; display: block; line-height: 0; } .choose-style1__title-box .btn-box a { padding-left: 40px; padding-right: 40px; } .choose-style1__title-box .btn-box a.btn-one:before { background-color: var(--thm-black); } .video-gallery-style2 { position: relative; width: 100%; min-height: 400px; } .video-gallery-style2__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-attachment: scroll; background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: var(--thm-base); transition: all 200ms linear; transition-delay: 0.1s; } .video-gallery-style2 .icon { position: absolute; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; background: var(--thm-primary); border-radius: 0%; z-index: 2; } .video-gallery-style2 .icon .video-popup { position: relative; display: block; font-size: 25px; text-align: center; } .video-gallery-style2 .icon .video-popup span::before { position: relative; top: 4px; color: var(--thm-black); } /*** ============================================= Slogan area style ============================================= ***/ .slogan-area { position: relative; display: block; overflow: hidden; background: var(--thm-base); padding: 100px 0; z-index: 10; } .slogan-area .row { align-items: center; } .phone-number-box2 { position: relative; display: flex; align-items: center; } .phone-number-box2 .icon { position: relative; display: block; width: 75px; height: 75px; background-color: rgb(30, 50, 38); border-radius: 50%; z-index: 1; } .phone-number-box2 .icon span::before { position: relative; display: block; color: var(--thm-primary); font-size: 25px; line-height: 75px; text-align: center; transition: all 200ms linear; transition-delay: 0.1s; } .phone-number-box2 .icon:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; background: var(--thm-primary); content: ""; z-index: -1; transform: scale(0.0); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); } .phone-number-box2:hover .icon:before { transform: scaleX(1.0); } .phone-number-box2:hover .icon span::before { color: #fff; } .phone-number-box2 .phone { position: relative; display: block; padding-left: 30px; } .phone-number-box2 .phone p { position: relative; display: block; top: 5px; color: var(--thm-primary); font-size: 24px; line-height: 26px; font-weight: 700; margin: 0 0 16px; font-family: var(--thm-font-2); } .phone-number-box2 .phone a { position: relative; display: inline-block; color: #ffffff; font-size: 34px; line-height: 40px; font-weight: 800; transition: all 200ms linear; transition-delay: 0.1s; font-family: var(--thm-font); } .phone-number-box2 .phone a:hover { color: var(--thm-primary); } .slogan-text-box { position: relative; display: block; } .slogan-text-box p { color: rgba(255, 255, 255, 0.70); font-size: 18px; line-height: 32px; font-weight: 500; margin: 0; } .slogan-btn-box { position: relative; display: block; line-height: 0; } .slogan-btn-box a { padding-left: 50px; padding-right: 50px; } .slogan-btn-box a:before { background-color: var(--thm-black); } /*** ============================================= Google Map Style1 Area Css ============================================= ***/ .google-map-style1-area { position: relative; display: block; background: #ffffff; z-index: 10; } .google-map-style1-area .auto-container { max-width: 100%; padding: 0; } .home1-page-map-outer { position: relative; display: block; z-index: 10; } .home1-page-map-outer .map-canvas { position: relative; width: 100%; height: 550px; } /*** ============================================= Working Process Area Css ============================================= ***/ .working-process-area { position: relative; display: block; padding: 0px 0 70px; background: #ffffff; z-index: 10; } .working-process-area.pdtop120 { padding-top: 120px; } .working-process-area .sec-title { padding-bottom: 80px; } .working-process__inner { position: relative; display: block; z-index: 1; } .working-process__inner .horizontal-line { position: absolute; top: 90px; left: -90px; right: -90px; height: 1px; background: #cad7cf; } .working-process__inner .horizontal-line:before { content: ""; position: absolute; top: -5px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--thm-primary); } .working-process__inner .horizontal-line:after { content: ""; position: absolute; top: -5px; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--thm-primary); } .working-process-box { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; counter-reset: count; } .single-working-process { position: relative; display: block; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; width: 100%; text-align: center; padding: 0px 30px 0px; margin-bottom: 38px; z-index: 1; } .single-working-process .icon-holder { position: relative; display: block; width: 180px; height: 180px; margin: 0 auto; background-color: var(--thm-base); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .single-working-process .icon-holder::after { content: ""; position: absolute; top: -36px; left: -36px; bottom: -36px; right: -36px; border: 1px solid #cad7cf; border-radius: 50%; z-index: -2; } .single-working-process .icon-holder:before { content: ""; position: absolute; left: -36px; bottom: -37px; right: -36px; height: 127px; background: #ffffff; z-index: -1; } .single-working-process:nth-child(2n+2) .icon-holder:before { top: -37px; bottom: auto; height: 128px; } .single-working-process .icon-holder span:before { position: relative; color: #ffffff; font-size: 60px; line-height: 60px; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; z-index: 5; } .single-working-process:hover .icon-holder span:before { transform: scale(1.0) rotate(1deg); } .single-working-process .counting-box { position: absolute; left: 0; bottom: 0; width: 50px; height: 50px; background: var(--thm-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .single-working-process .counting-box.top { left: auto; bottom: auto; top: 0; right: 0; } .single-working-process .counting-box:before { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; bottom: 0; right: 0; color: var(--thm-black); font-size: 20px; font-weight: 700; counter-increment: count; content: "0"counter(count); transition: all 100ms linear; transition-delay: 0.1s; font-family: var(--thm-font); } .single-working-process .text-holder { position: relative; display: block; padding-top: 70px; } .single-working-process .text-holder h3 { font-size: 24px; line-height: 24px; font-weight: 700; margin-bottom: 15px; } .single-working-process .text-holder p { margin: 0; } .single-working-process .text-holder .btn-box { position: relative; display: block; padding-top: 15px; } .single-working-process .text-holder p { margin: 0; } /*** ============================================= Industries Details Area Css ============================================= ***/ .industries-details-area { position: relative; display: block; background: #ffffff; padding: 120px 0 120px; z-index: 10; } .industries-details__content { position: relative; display: block; } .industries-details__content .single-service-style2 { margin-bottom: 50px; } .industries-details__text-box { position: relative; display: block; } .industries-details__text-box .text { position: relative; display: block; } .industries-details__text-box .text h2 { font-size: 40px; line-height: 50px; font-weight: 800; margin: 0 0 27px; } .industries-details__text-box .text-right-box { position: relative; display: block; padding-top: 77px; } .industries-details__text-box .text-right-box ul { position: relative; display: block; padding-top: 17px; } .industries-details__text-box .text-right-box ul li { position: relative; display: block; padding-left: 30px; color: var(--thm-black); font-size: 18px; font-weight: 600; line-height: 26px; margin-bottom: 12px; } .industries-details__text-box .text-right-box ul li::before { font-family: 'icomoon' !important; content: "\e90f"; position: absolute; top: 0; left: 0; bottom: 0; color: var(--thm-primary); font-size: 22px; font-weight: 400; } .industries-details__text-box .text-right-box ul li:last-child { margin-bottom: 0; } .industries-details__features-box { position: relative; display: block; border-bottom: 1px solid #cad7cf; padding-top: 52px; padding-bottom: 65px; } .industries-details__features-box__single { position: relative; display: block; margin-bottom: 43px; } .industries-details__features-box__single .img-holder { position: relative; display: block; overflow: hidden; } .industries-details__features-box__single .img-holder img { width: 100%; } .industries-details__features-box__single .text-holder { position: relative; display: block; padding-top: 42px; } .industries-details__features-box__single .text-holder:before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 5px; background: var(--thm-base); } .industries-details__features-box__single .text-holder h3 { font-size: 24px; line-height: 30px; font-weight: 800; margin: 0 0 9px; } .industries-details__features-box__single .text-holder p { margin: 0; } /*** ============================================= Contact Info Style1 Area Css ============================================= ***/ .contact-info-style1-area { position: relative; display: block; background: #ffffff; padding: 0px 0 120px; z-index: 10; } .contact-info-style1__box { position: relative; display: block; } .contact-form { position: relative; display: block; } .contact-form.max-width { max-width: 770px; margin: 0 auto; } .contact-form form { position: relative; display: block; } .contact-form form .input-box { position: relative; display: block; margin-bottom: 20px; } .contact-form form input[type="text"], .contact-form form input[type="email"], .contact-form form textarea { position: relative; display: block; background: #ebf1ed; width: 100%; height: 62px; border: 1px solid #ebf1ed; color: #737c76; font-size: 14px; font-weight: 500; font-style: normal; padding-left: 30px; padding-right: 30px; border-radius: 0px; transition: all 500ms ease; font-family: var(--thm-font); } .contact-form form textarea { height: 155px; padding-top: 12px; padding-left: 30px; padding-right: 30px; padding-bottom: 10px; } .contact-form form input[type="text"]::-webkit-input-placeholder { color: #737c76; } .contact-form form input[type="text"]:-moz-placeholder { color: #737c76; } .contact-form form input[type="text"]::-moz-placeholder { color: #737c76; } .contact-form form input[type="text"]:-ms-input-placeholder { color: #737c76; } .contact-form form input[type="email"]::-webkit-input-placeholder { color: #737c76; } .contact-form form input[type="email"]:-moz-placeholder { color: #737c76; } .contact-form form input[type="email"]::-moz-placeholder { color: #737c76; } .contact-form form input[type="email"]:-ms-input-placeholder { color: #737c76; } .contact-form form textarea::-webkit-input-placeholder { color: #737c76; } .contact-form form textarea:-moz-placeholder { color: #737c76; } .contact-form form textarea::-moz-placeholder { color: #737c76; } .contact-form form textarea:-ms-input-placeholder { color: #737c76; } .contact-form form .button-box { position: relative; display: block; padding-top: 10px; } .contact-form form .button-box button { padding-top: 9px; padding-bottom: 5px } @-webkit-keyframes iliketomoveit { 0% { left: 0px; } 25% { left: 400px; } 75% { left: 200px; } 100% { left: 0px; } } @keyframes iliketomoveit { 0% { left: 0px; } 25% { left: 400px; } 75% { left: 200px; } 100% { left: 0px; } } /*** ============================================= Error Page Area Style ============================================= ***/ .error-page-area { position: relative; display: block; padding: 115px 0 120px; background: #ffffff; z-index: 10; } .error-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .error-content .big-title { position: relative; display: block; z-index: 1; } .error-content .big-title h2 { color: var(--thm-base); font-size: 72px; line-height: 70px; font-weight: 800; text-transform: uppercase; } .error-content .title { position: relative; display: block; padding-top: 17px; padding-bottom: 24px; } .error-content .title h2 { font-size: 48px; line-height: 60px; font-weight: 700; } .error-content .text { position: relative; display: block; padding-bottom: 29px; } .error-content .text p { margin: 0; } .error-page-search-box { position: relative; display: block; max-width: 570px; width: 100%; margin: 0 auto; } .error-page-search-box form.search-form { position: relative; display: block; width: 100%; } .error-page-search-box .search-form input[type="text"] { position: relative; display: block; width: 100%; height: 60px; border-radius: 0px; background: #ffffff; border: 1px solid #e5e5e5; color: #757575; font-size: 16px; font-weight: 400; letter-spacing: .1em; padding-left: 30px; padding-right: 60px; transition: all 500ms ease 0s; font-family: var(--thm-font); } .error-page-search-box .search-form button { position: absolute; top: 10px; right: 10px; bottom: 10px; width: 40px; height: 40px; background: var(--thm-base); color: #ffffff; font-size: 16px; line-height: 10px; display: block; text-align: center; border: 0px solid #e1e1e1; transition: all 500ms ease 0s; } .error-page-search-box .search-form button i { font-size: 16px } .error-page-search-box .search-form input[type="text"]:focus { color: var(--thm-black); border-color: var(--thm-base); } .error-page-search-box .search-form input[type="text"]:focus+button, .error-page-search-box .search-form button:hover { color: #fff; } .error-page-search-box .search-form input::-webkit-input-placeholder { color: #757575; } .error-page-search-box .search-form input:-moz-placeholder { color: #757575; } .error-page-search-box .search-form input::-moz-placeholder { color: #757575; } .error-page-search-box .search-form input:-ms-input-placeholder { color: #757575; } .error-content .btns-box { line-height: 0; padding-top: 20px; } .error-content .btns-box a { padding-left: 40px; padding-right: 40px; } /*** ============================================= Main Contact Form Area Css ============================================= ***/ .main-contact-form-area { position: relative; display: block; background: #ffffff; padding: 120px 0px 120px; z-index: 10; } .contact-info-box { position: relative; display: block; } .contact-info-box .sec-title { padding-bottom: 25px; } .contact-info-box .text { position: relative; display: block; } .contact-info-box .text p { margin: 0px; } .contact-info-list { position: relative; display: block; margin-top: 38px; } .contact-info-list li { position: relative; display: block; margin-bottom: 20px; } .contact-info-list li .icon, .contact-info-list li .text { display: table-cell; vertical-align: middle; } .contact-info-list li .icon { position: relative; width: 60px; height: 60px; background: var(--thm-primary); border-radius: 50%; text-align: center; color: var(--thm-black); font-size: 15px; } .contact-info-list li .icon span::before { position: relative; display: block; line-height: 60px; } .contact-info-list li .text { position: relative; padding-left: 20px; } .contact-info-list li .text p { font-size: 14px; line-height: 20px; margin: 0 0 10px; } .contact-info-list li .text h4 { font-size: 18px; line-height: 20px; } .contact-info-list li .text h4 a { color: var(--thm-black); } .contact-info-list li .text h4 a:hover { color: var(--thm-primary); } .contact-form--style2 { position: relative; display: block; max-width: 570px; background: #ffffff; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07), inset 0px 10px 0px 0px rgba(0, 105, 64, 0.004); padding: 58px 70px 48px; margin-top: -235px; } .contact-form--style2::before { position: absolute; top: 0; left: 0; right: 0; background: var(--thm-base); height: 10px; content: ""; } .contact-form--style2 .sec-title { padding-bottom: 14px; } .contact-form--style2 form .button-box { padding-top: 0px; } .contact-form--style2 form textarea { height: 110px !important; padding-top: 20px; } .contact-form--style2 form .input-box { margin-bottom: 15px; } .contact-form--style2 form input[type="text"], .contact-form--style2 form input[type="email"], .contact-form--style2 form textarea { height: 52px; } /*** ============================================= Google Map Area Css ============================================= ***/ .google-map-area { position: relative; display: block; background: #ffffff; z-index: 10; } .google-map-area .auto-container { max-width: 100%; padding: 0; } .contact-page-map-outer { position: relative; display: block; z-index: 10; } .contact-page-map-outer .map-canvas { position: relative; width: 100%; height: 675px; } #ui-datepicker-div.ui-widget-content { border: 1px solid #c5c5c5; background: #fff none repeat scroll 0 0; border: 1px solid #777; color: #252525; font-family: "Poppins", sans-serif; font-size: 14px; border-radius: 0px; width: 270px; padding: 5px; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header { background: var(--thm-base); border: 2px solid rgba(var(--thm-base-rgb), .80); border-radius: 0; color: #fff; font-weight: 700; padding: 5px 0; position: relative; } .ui-datepicker td a { color: #000000 !important; text-align: center; background-image: none !important; background: #f5f5f5 !important; border: 1px solid #f9f9f9 !important; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid var(--thm-base) !important; background: var(--thm-base) !important; color: #ffffff !important; } .ui-datepicker .ui-datepicker-prev { left: 5px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { border-radius: 30%; height: 20px; position: absolute; top: 7px; width: 20px; transition: all 500ms ease; cursor: pointer; } .ui-datepicker .ui-datepicker-next { right: 5px; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { top: 7px; background: #fff; border: none; } .ui-datepicker table { border-collapse: collapse; font-size: 13px; margin: 0 0 0.4em; width: 100%; z-index: 99999999; } .ui-datepicker th { border: medium none; font-weight: 600; padding: 2px 3px; text-align: center; } .ui-datepicker-calendar .ui-state-default:hover, .ui-datepicker-calendar .ui-state-default:active { background: #43c3ea; color: #fff; border-color: #43c3ea; } /*** ============================================= Element Page Css ============================================= ***/