/* SINAEA - Factory, Industry, and Manufacturing HTML Template */ /************ TABLE OF CONTENTS *************** 1. Fonts 2. Reset 3. Global 4. Main Header 5. Search Popup 6. Sidenav Bar 7. Section Title 8. Page Title 9. Banner Section 10. Banner Section Two 11. Banner Section Three 12. About Us 13. About Me 14. About Section 15. Welcome Section 16. Fun Facts 17. Features Section 18. Service Section / Two 19. Service Details 20. Video Section 21. Project Section / Two 22. Project Detail 23. FAQ's Section 24. FAQ Form Section 25. Call Back Section 26. Contact Page Section 27. Contact Info Section 28. Map Section 29. Team Section 30. Pricing Section 31. Testimonial Section / Two 32. Newsletter Section 33. News Section 34. Blog Single 35. Error Section 36. Styled Pagination 37. Clients Section 38. Main Footer 39. Sidebar Page Container 40. Comment Area 41. Comment Form 42. Our Shop 43. Product Details 44. Product Tabs 45. Cart Section 46. CheckOut Section 47. Login Section 48. Right to Left **********************************************/ /*** ==================================================================== Fonts ==================================================================== ***/ @import url('https://fonts.googleapis.com/css?family=Rajdhani:400,500,700|Oswald:200,300,400,500,600,700|Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap'); /* font-family: 'Rajdhani', sans-serif; font-family: 'Oswald', sans-serif; font-family: 'Roboto', sans-serif; */ @import url('flaticon.css'); @import url('jquery-ui.css'); @import url('fontawesome-all.css'); @import url('animate.css'); @import url('owl.css'); @import url('swiper.css'); @import url('jquery.bootstrap-touchspin.css'); @import url('jquery.mCustomScrollbar.min.css'); @import url('jquery.fancybox.min.css'); /*** ==================================================================== Reset ==================================================================== ***/ * { margin: 0px; padding: 0px; border: none; outline: none; font-size: 100%; } /*** ==================================================================== Global Settings ==================================================================== ***/ body { font-size: 14px; color: #999999; line-height: 28px; font-weight: 400; background: #252525; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-family: 'Roboto', sans-serif; position: relative; } a { text-decoration: none; cursor: pointer; color: #ffbc00; } a:hover, a:focus, a:visited { text-decoration: none; outline: none; } h1, h2, h3, h4, h5, h6 { position: relative; font-weight: normal; margin: 0px; background: none; line-height: 1.2em; font-family: 'Rajdhani', sans-serif; } textarea { overflow: hidden; resize: none; } button { outline: none !important; cursor: pointer; } p, .text { font-size: 16px; line-height: 26px; font-weight: 400; color: white; margin: 0; } ::-webkit-input-placeholder { color: inherit; } ::-moz-input-placeholder { color: inherit; } ::-ms-input-placeholder { color: inherit; } ::selection { background: #ffbc00; color: #ffffff; } ::-moz-selection { background: #ffbc00; color: #ffffff; } ::-webkit-selection { background: #ffbc00; color: #ffffff; } .auto-container { position: static; max-width: 1200px; padding: 0px 15px; margin: 0 auto; } .small-container { position: static; max-width: 1000px; padding: 0px 15px; margin: 0 auto; } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; z-index: 99; } main { position: relative; overflow: hidden; width: 100%; background-color: #121212; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } main .content-inner { position: relative; } .sidenav-bar .mCSB_inside>.mCSB_container { margin-right: 0; } .desk-view .mCSB_inside>.mCSB_container { margin-right: 0; } .sidenav-bar .mCSB_scrollTools { opacity: 0 !important; } .desk-view .mCSB_scrollTools { opacity: 1 !important; } ul, li { list-style: none; padding: 0px; margin: 0px; } .theme-btn { display: inline-block; text-align: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; font-family: "Roboto", sans-serif; } .centered { text-align: center !important; } /*Btn Style One*/ .btn-style-one { position: relative; font-size: 16px; line-height: 20px; color: #ffffff; padding: 13px 35px; font-weight: 500; background-color: #252525; border: 2px solid #252525; overflow: hidden; -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30); -moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30); -ms-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30); -o-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30); } .btn-style-one .btn-title { position: relative; } .btn-style-one:hover { color: #ffffff; } .btn-style-one:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; background-color: #ffbc00; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ } .btn-style-one:hover:before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } /*Btn Style Two*/ .btn-style-two { position: relative; font-size: 16px; line-height: 20px; color: #ffffff; padding: 15px 40px; font-weight: 700; background-color: #ffbc00; overflow: hidden; } .btn-style-two .btn-title { position: relative; } .btn-style-two:hover { color: #ffbc00; -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); -ms-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); -o-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); } .btn-style-two:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; background-color: #ffffff; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ } .btn-style-two:hover:before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } /*Btn Style Three*/ .btn-style-three { position: relative; font-size: 16px; line-height: 30px; color: #000000; padding: 10px 40px; font-weight: 700; background-color: #ffffff; overflow: hidden; } .btn-style-three .btn-title { position: relative; } .btn-style-three:hover { color: #ffffff; -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); -ms-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); -o-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); } .btn-style-three:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; background-color: #000000; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ } .btn-style-three:hover:before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } /*Btn Style Four*/ .btn-style-four { position: relative; font-size: 16px; line-height: 30px; color: #ffffff; padding: 13px 40px; font-weight: 400; overflow: hidden; background-color: #ffbc00; border: 2px solid #ffbc00; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .btn-style-four:hover { color: #ffbc00; background-color: #222222; border: 2px solid #222222; -webkit-box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset; -moz-box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset; -ms-box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset; -o-box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset; box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset; } /*=== List Style One ===*/ .list-style-one { position: relative; display: block; margin-bottom: 30px; } .list-style-one li { position: relative; font-size: 14px; line-height: 24px; color: #f1f1f1; font-weight: 400; padding-left: 35px; margin-bottom: 15px; } .list-style-one li:before { position: absolute; left: 0; top: 0; font-size: 14px; line-height: 25px; color: #ffbc00; font-weight: 900; font-family: "Font Awesome 5 Free"; content: "\f00c"; } /*=== List Style Two ===*/ .list-style-two { position: relative; display: block; margin-bottom: 30px; } .list-style-two li { position: relative; font-size: 14px; line-height: 20px; color: #999999; font-weight: 500; padding-left: 35px; margin-bottom: 15px; font-family: "Archivo", sans-serif; } .list-style-two li:before { position: absolute; left: 0; top: 0; font-size: 14px; line-height: 20px; color: #ffbc00; font-weight: 900; font-family: "Font Awesome 5 Free"; content: "\f061"; } .theme_color { color: #ffbc00; } .pull-right { float: right; } .pull-left { float: left; } .preloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999999; background-color: #252525; background-position: center center; background-repeat: no-repeat; background-image: url(../images/icons/preloader.svg); } img { display: inline-block; max-width: 100%; height: auto; } .tabs-box { position: relative; } .tabs-box .tab { display: none; } .tabs-box .active-tab { display: block; } /*** ==================================================================== Scroll To Top style ==================================================================== ***/ .scroll-to-top { position: fixed; left: 40px; bottom: 30px; height: 30px; width: 30px; font-size: 14px; line-height: 30px; color: #ffffff; text-align: center; cursor: pointer; z-index: 100; background: #252525; display: none; border-radius: 0; margin: 0 auto; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .scroll-to-top:hover { background: #ffffff; color: #222222; } /*** ==================================================================== Main Header ==================================================================== ***/ .main-header { position: fixed; left: 0; top: 30px; width: 100%; z-index: 99999; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-header.fixed-header { top: 0; position: fixed; background-color: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, .50); } .main-header .main-box { position: relative; padding: 10px 50px; } .main-header .logo-box { position: relative; float: left; padding: 5px 0; } .main-header .outer-box { position: relative; float: right; } .main-header .btn-box { position: relative; float: right; margin-left: 20px; padding: 8px 0; } .nav-toggler { position: relative; display: block; height: 44px; width: 44px; overflow: hidden; text-indent: 100%; white-space: nowrap; background-color: transparent; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -ms-transition: -moz-transform 0.2s; -o-transition: -moz-transform 0.2s; transition: transform 0.2s; } .nav-toggler span { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 32px; height: 3px; background-color: #ffffff; } .nav-toggler span::before, .nav-toggler span:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: inherit; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.2s, width 0.2s; -moz-transition: -moz-transform 0.2s, width 0.2s; transition: transform 0.2s, width 0.2s; } .nav-toggler span::before { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } .nav-toggler span::after { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } .no-touch .nav-toggler:hover { /* rotate trigger on hover */ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .no-touch .nav-toggler:hover span::after, .no-touch .nav-toggler:hover span::before { /* animate arrow --> from hamburger to arrow */ width: 50%; } .no-touch .nav-toggler:hover span::before { -webkit-transform: translateX(1px) translateY(1px) rotate(45deg); -moz-transform: translateX(1px) translateY(1px) rotate(45deg); -ms-transform: translateX(1px) translateY(1px) rotate(45deg); -o-transform: translateX(1px) translateY(1px) rotate(45deg); transform: translateX(1px) translateY(1px) rotate(45deg); } .no-touch .nav-toggler:hover span::after { -webkit-transform: translateX(1px) translateY(-1px) rotate(-45deg); -moz-transform: translateX(1px) translateY(-1px) rotate(-45deg); -ms-transform: translateX(1px) translateY(-1px) rotate(-45deg); -o-transform: translateX(1px) translateY(-1px) rotate(-45deg); transform: translateX(1px) translateY(-1px) rotate(-45deg); } /*Search Box Widget*/ .main-header .search-box { position: relative; float: left; margin-left: 20px; padding: 8px 0; } .main-header .search-box .search-btn { position: relative; display: block; height: 44px; width: 44px; line-height: 44px; text-align: center; font-size: 22px; color: #ffffff; padding: 0; border-radius: 50%; background-color: transparent; } /*** ==================================================================== Search Popup ==================================================================== ***/ .search-popup { position: fixed; left: 0; top: 0; height: 100vh; width: 100%; z-index: 99999; margin-top: -540px; transform: translateY(-100%); background-color: #111111; -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ } .sidenav-bar-visible .search-popup { width: 80%; } .search-popup:before { position: absolute; left: 0; top: 100%; width: 100%; height: 560px; background-image: url(../images/icons/waves-shape.png); background-repeat: no-repeat; background-position: center; background-size: cover; margin-top: -20px; content: ""; } .search-active .search-popup { transform: translateY(0%); margin-top: 0; } .search-popup .close-search { position: absolute; left: 0; right: 0; top: 75%; margin: 0 auto; margin-top: -200px; border-radius: 50%; text-align: center; background-color: #252525; width: 70px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-bottom: 3px solid #ffbc00; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; opacity: 0; visibility: hidden; } .search-popup .close-search span { position: relative; display: block; height: 70px; width: 70px; font-size: 30px; line-height: 70px; color: #ffffff; } .search-active .search-popup .close-search { visibility: visible; opacity: 1; top: 50%; -webkit-transition-delay: 1500ms; -moz-transition-delay: 1500ms; -ms-transition-delay: 1500ms; -o-transition-delay: 1500ms; transition-delay: 1500ms; } .search-popup form { position: absolute; max-width: 700px; top: 50%; left: 15px; right: 15px; margin: -35px auto 0; transform: scaleX(0); transform-origin: center; background-color: #111111; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .search-active .search-popup form { transform: scaleX(1); -webkit-transition-delay: 1200ms; -moz-transition-delay: 1200ms; -ms-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; } .search-popup .form-group { position: relative; margin: 0px; overflow: hidden; } .search-popup .form-group input[type="text"], .search-popup .form-group input[type="search"] { position: relative; display: block; font-size: 24px; line-height: 50px; color: #f1f1f1; height: 70px; width: 100%; padding: 10px 30px; background-color: #252525; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.40); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .search-popup .form-group input[type="submit"], .search-popup .form-group button { position: absolute; right: 30px; top: 0px; height: 70px; line-height: 70px; background: transparent; text-align: center; font-size: 24px; color: #aaaaaa; padding: 0; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .search-popup .form-group input[type="submit"]:hover, .search-popup .form-group button:hover { color: #ffbc00; } .search-popup input::placeholder, .search-popup textarea::placeholder { color: #aaaaaa; } /*search box btn*/ .main-header .cart-btn { position: relative; float: left; padding: 8px 0; } .main-header .cart-btn:before { position: absolute; left: 0; top: 100%; height: 100%; width: 100%; content: ""; visibility: hidden; box-shadow: none !important; } .main-header .cart-btn button { position: relative; display: block; height: 40px; width: 40px; text-align: center; background-color: transparent; line-height: 40px; font-size: 28px; font-weight: 500; color: #ffffff; z-index: 9; } .main-header .cart-btn .count { position: absolute; right: 0px; top: 4px; height: 16px; width: 16px; text-align: center; line-height: 16px; font-size: 10px; color: #ffffff; background-color: #000000; border-radius: 50%; } .main-header .badge { background-color: #dddddd; border-radius: 10px; color: #000; display: inline-block; font-size: 12px; line-height: 1; padding: 3px 7px; text-align: center; vertical-align: middle; white-space: nowrap; } .main-header .shopping-cart { position: absolute; margin: 20px 0; right: 0; background: #222222; width: 300px; border-radius: 3px; padding: 20px; max-height: 450px; opacity: 0; visibility: hidden; transform: scale(.5); transform-origin: top right; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-header .cart-btn:hover:before, .main-header .cart-btn:hover .shopping-cart { opacity: 1; visibility: visible; transform: scale(1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); } .main-header .shopping-cart .shopping-cart-header { border-bottom: 1px solid #444444; padding-bottom: 15px; } .main-header .shopping-cart .shopping-cart-total { float: right; font-size: 15px; line-height: 30px; color: #dddddd; } .main-header .shopping-cart .shopping-cart-total .lighter-text { font-size: 15px; line-height: 30px; color: #aaaaaa; } .main-header .shopping-cart .shopping-cart-items { padding-top: 20px; } .main-header .shopping-cart .shopping-cart-items li { position: relative; margin-bottom: 18px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.40); background-color: #252525; } .main-header .shopping-cart .shopping-cart-items img { float: left; margin-right: 12px; } .main-header .shopping-cart .shopping-cart-items .item-name { display: block; padding-top: 7px; font-size: 17px; color: #ffffff; } .main-header .shopping-cart .shopping-cart-items .item-price { color: #ffbc00; margin-right: 8px; } .main-header .shopping-cart .shopping-cart-items .item-quantity { color: #dddddd; } .main-header .shopping-cart .shopping-cart-items .product-detail { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .main-header .shopping-cart .cart-icon { color: #dddddd; font-size: 22px; margin-right: 7px; float: left; } .main-header .shopping-cart .theme-btn { display: block; width: 100%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .main-header .mCSB_inside>.mCSB_container { margin-right: 0; } .main-header .mCSB_scrollTools { opacity: 0 !important; } .main-menu { position: relative; float: left; font-family: "Ubuntu", sans-serif; } .main-menu .navbar-header { display: none; } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navigation { position: relative; margin: 0px; } /*** ==================================================================== Sidenav Bar ==================================================================== ***/ .sidenav-bar { position: fixed; right: 0px; top: 0; max-width: 100%; height: 100%; width: 20%; background-color: #252525; margin: 0 auto; overflow-y: auto; opacity: 0; visibility: hidden; z-index: 999999; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .sidenav-bar .nav-logo { position: relative; padding: 30px 20px; text-align: left; } .sidenav-bar .nav-logo img { max-width: 200px; } .sidenav-bar-visible { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .desk-view-visible { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .desk-view { position: fixed; opacity: 1; right: 0; left: -80%; top: 0; max-width: 100%; height: 100%; width: 20%; z-index: 999999; background-color: #252525; margin: 0 auto; overflow-y: hidden; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); visibility: visible; box-shadow: 0 0 30px rgba(0, 0, 0, 0.40); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar-visible .sidenav-bar { opacity: 1; right: 0; /* left: 0px; */ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); visibility: visible; box-shadow: 0 0 30px rgb(0 0 0 / 40%); /* -webkit-transition: all 300ms ease; */ /* -moz-transition: all 300ms ease; */ /* -ms-transition: all 300ms ease; */ /* -o-transition: all 300ms ease; */ /* transition: all 300ms ease; */ } .sidenav-bar-visible header { width: 80%; } .sidenav-bar-visible main { width: 80%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.30); } .sidenav-bar .menu-box { position: relative; left: 0px; top: 0; bottom: 0; width: 100%; height: 100%; overflow-y: auto; background: #ffffff; padding: 0px 0px; z-index: 5; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .sidenav-bar-visible .sidenav-bar .menu-box { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .sidenav-bar .close-btn { position: absolute; right: 10px; top: 15px; line-height: 40px; width: 40px; text-align: center; font-size: 24px; color: #ffffff; background-color: transparent; cursor: pointer; z-index: 10; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .sidenav-bar-visible .sidenav-bar .close-btn { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .sidenav-bar .close-btn:hover { opacity: 0.50; } .sidenav-bar .side-nav { position: relative; margin-top: 24%; } .desk-view .desk-side-nav { position: relative !important; margin-top: 3% !important; } .sidenav-bar .navigation { position: relative; display: block; margin: 0 20px; font-family: "Oswald", sans-serif; overflow: hidden; } .desk-view .navigation { position: relative; display: block; margin: 0 20px; font-family: "Oswald", sans-serif; overflow: hidden; } .sidenav-bar .navigation>li { position: relative; display: block; left: 100%; margin-bottom: 5px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .desk-view .navigation>li { position: relative; display: block; margin-bottom: 5px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar-visible .sidenav-bar .navigation>li { left: 0; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .desk-view-visible .desk-view .navigation>li { left: 0; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(2) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } .desk-view-visible .desk-view .navigation>li:nth-child(2) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(3) { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms; } .desk-view-visible .desk-view .navigation>li:nth-child(3) { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(4) { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .desk-view-visible .desk-view .navigation>li:nth-child(4) { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(5) { -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; -ms-transition-delay: 600ms; -o-transition-delay: 600ms; transition-delay: 600ms; } .desk-view-visible .desk-view .navigation>li:nth-child(5) { -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; -ms-transition-delay: 600ms; -o-transition-delay: 600ms; transition-delay: 600ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(6) { -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; -ms-transition-delay: 700ms; -o-transition-delay: 700ms; transition-delay: 700ms; } .desk-view-visible .desk-view .navigation>li:nth-child(6) { -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; -ms-transition-delay: 700ms; -o-transition-delay: 700ms; transition-delay: 700ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(7) { -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; } .desk-view-visible .desk-view .navigation>li:nth-child(7) { -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(8) { -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; -ms-transition-delay: 900ms; -o-transition-delay: 900ms; transition-delay: 900ms; } .desk-view-visible .desk-view .navigation>li:nth-child(8) { -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; -ms-transition-delay: 900ms; -o-transition-delay: 900ms; transition-delay: 900ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(9) { -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } .desk-view-visible .desk-view .navigation>li:nth-child(9) { -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } .sidenav-bar .navigation li>a { position: relative; display: block; line-height: 20px; padding: 15px 20px; font-size: 16px; color: #ffffff; letter-spacing: 0.02em; margin-bottom: 2px; background-color: rgba(0, 0, 0, 0.20); text-transform: uppercase; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .desk-view .navigation li>a { position: relative; display: block; line-height: 20px; padding: 15px 20px; font-size: 16px; color: #ffffff; letter-spacing: 0.02em; margin-bottom: 2px; background-color: rgba(0, 0, 0, 0.20); text-transform: uppercase; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar .navigation>li>a { font-weight: 400; letter-spacing: 0.08em; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); text-transform: uppercase; } .desk-view .navigation>li>a { font-weight: 400 !important; letter-spacing: 0.08em !important; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05) !important; text-transform: uppercase !important; } .sidenav-bar .navigation li:hover>a, .sidenav-bar .navigation li.current>a { color: #ffbc00; } .desk-view .navigation li:hover>a, .desk-view .navigation li.current>a { color: #ffbc00; } .sidenav-bar .navigation li.dropdown .dropdown-btn { position: absolute; right: 0px; top: 0px; width: 50px; height: 50px; text-align: center; font-size: 12px; line-height: 50px; color: #ffffff; cursor: pointer; z-index: 5; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .desk-view .navigation li.dropdown .dropdown-btn { position: absolute !important; right: 0px !important; top: 0px !important; width: 50px !important; height: 50px !important; text-align: center !important; font-size: 12px !important; line-height: 50px !important; color: #ffffff !important; cursor: pointer !important; z-index: 5 !important; -webkit-transition: all 300ms ease !important; -moz-transition: all 300ms ease !important; -ms-transition: all 300ms ease !important; -o-transition: all 300ms ease !important; transition: all 300ms ease !important; } .sidenav-bar .navigation li.dropdown .dropdown-btn.active .fa:before { display: inline-block; position: relative; content: "\f068"; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .desk-side-nav .navigation li.dropdown .dropdown-btn.active .fa:before { display: inline-block !important; position: relative !important; content: "\f068" !important; -webkit-transform: rotate(180deg) !important; -moz-transform: rotate(180deg) !important; -ms-transform: rotate(180deg) !important; -o-transform: rotate(180deg) !important; transform: rotate(180deg) !important; -webkit-transition: all 300ms ease !important; -moz-transition: all 300ms ease !important; -ms-transition: all 300ms ease !important; -o-transition: all 300ms ease !important; transition: all 300ms ease !important; } .sidenav-bar .navigation li>ul, .sidenav-bar .navigation li>ul>li>ul { display: none; background-color: rgba(0, 0, 0, 0.30); } .desk-view .navigation li>ul, .desk-view .navigation li>ul>li>ul { display: none; background-color: rgba(0, 0, 0, 0.30); } .sidenav-bar .contact-info-box { position: relative; padding: 0 30px; margin-top: 15px; } .desk-view .contact-info-box { position: relative; padding: 0 30px; margin-top: 16px; } .sidenav-bar .contact-info-box .info-box { position: relative; padding-left: 50px; margin-bottom: 20px; } .desk-view .contact-info-box .info-box { position: relative; padding-left: 50px; margin-bottom: 10px; } .sidenav-bar .contact-info-box .info-box .icon-box { position: absolute; left: 0; top: 0; font-size: 24px; color: #ffffff; line-height: 40px; } .desk-view .contact-info-box .info-box .icon-box { position: absolute; left: 0; top: 0; font-size: 24px; color: #ffffff; line-height: 40px; } .sidenav-bar .contact-info-box .info-box strong { font-size: 16px; line-height: 24px; font-family: "Oswald", sans-serif; color: #ffffff; } .desk-view .contact-info-box .info-box strong { font-size: 16px; line-height: 24px; font-family: "Oswald", sans-serif; color: #ffffff; } .sidenav-bar .contact-info-box .info-box p { font-size: 14px; line-height: 24px; color: #ffffff; } .desk-view .contact-info-box .info-box p { font-size: 14px; line-height: 24px; color: #ffffff; } .sidenav-bar .contact-info-box .info-box p a { color: #ffffff; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .desk-view .contact-info-box .info-box p a { color: #ffffff; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar .contact-info-box .info-box p a:hover { color: #ffbc00; } .desk-view .contact-info-box .info-box p a:hover { color: #ffbc00; } .remaining { display: none; } @media all and (max-width: 1360px) { .remaining { display: block; } .desk-view { display: none !important; } .banner-slider-wrapper { position: relative !important; width: 100% !important; float: left !important; height: 100vh !important; } } .desk-view { display: block; } /*=============================================== Header Style Two ================================================*/ .header-span { position: relative; display: block; width: 100%; height: 80px; } .header-style-two { position: fixed; background-color: #222222; top: 0; } .header-style-two .logo-outer { position: relative; float: left; } .header-style-two .logo { position: relative; } .header-style-two .logo img { position: relative; max-width: 100%; height: auto; } .header-style-two .nav-outer { position: relative; float: right; } .header-style-two .main-box { position: relative; left: 0px; top: 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu { position: relative; float: left; } .main-menu .navbar-header { display: none; } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navigation { position: relative; margin: 0px; } .main-menu .navigation>li { position: relative; float: left; margin-right: 50px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation>li>a { position: relative; display: block; font-size: 20px; line-height: 30px; font-weight: 600; color: #ffffff; padding: 15px 0; opacity: 1; text-align: center; font-family: "Rajdhani", sans-serif; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation>li.current>a, .main-menu .navigation>li:hover>a { color: #ffbc00; } .main-menu .navigation>li>ul>li>ul>li.dropdown>a:after { font-family: 'Font Awesome 5 Free'; content: "\f107"; position: absolute; right: 10px; top: 11px; width: 10px; height: 20px; display: block; color: #292929; line-height: 20px; font-size: 13px; font-weight: 900; text-align: center; z-index: 5; } .main-menu .navigation>li>ul>li>ul>li.dropdown:hover>a:after { color: #ffffff; } .main-menu .navigation>li>ul { position: absolute; left: 0px; top: 110%; width: 220px; padding: 0px 0px; z-index: 100; background: rgba(47, 46, 50, .90); margin-top: 10px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -ms-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; opacity: 1; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } .main-menu .navigation>li>ul.from-right { left: auto; right: 0px; } .main-menu .navigation>li>ul>li { position: relative; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .main-menu .navigation>li>ul>li:last-child { border-bottom: none; } .main-menu .navigation>li>ul>li>a { position: relative; display: block; padding: 10px 20px; line-height: 24px; font-weight: 600; font-size: 15px; color: #ffffff; text-transform: capitalize; border-left: 4px solid transparent; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .main-menu .navigation>li>ul>li:hover>a { border-left: 4px solid #ffbc00; background: #222222; } .main-menu .navigation>li>ul>li.dropdown>a:after { font-family: 'Font Awesome 5 Free'; content: "\f105"; position: absolute; right: 15px; top: 11px; width: 10px; height: 20px; display: block; line-height: 20px; font-size: 16px; color: #ffffff; font-weight: 900; text-align: center; z-index: 5; } .main-menu .navigation>li>ul>li>ul { position: absolute; left: 110%; top: 0%; width: 200px; padding: 0px 0px; z-index: 100; background: rgba(47, 46, 50, .90); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -ms-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } .main-menu .navigation>li>ul>li>ul>li { position: relative; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .main-menu .navigation>li>ul>li>ul>li:last-child { border-bottom: none; } .main-menu .navigation>li>ul>li>ul>li>a { position: relative; display: block; padding: 10px 20px; line-height: 24px; font-weight: 400; font-size: 15px; color: #ffffff; text-transform: capitalize; border-left: 4px solid transparent; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .main-menu .navigation>li>ul>li>ul>li>a:hover { color: #ffffff; background: #222222; border-left: 4px solid #ffbc00; } .main-menu .navigation>li.dropdown:hover>ul { -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; visibility: visible; opacity: 1; top: 100%; } .main-menu .navigation li>ul>li.dropdown:hover>ul { visibility: visible; opacity: 1; top: 0; left: 100%; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .main-menu .navbar-collapse>ul li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 8px; width: 34px; height: 30px; border: 1px solid #ffffff; text-align: center; font-size: 16px; line-height: 30px; color: #ffffff; cursor: pointer; z-index: 5; display: none; } .main-header .outer-box { position: relative; float: right; } .header-style-two .outer-box .btn-box { display: none; } /*** ==================================================================== Section Title ==================================================================== ***/ .sec-title { position: relative; padding-top: 60px; margin-bottom: 60px; } .sec-title h2 { position: relative; display: inline-block; font-size: 50px; line-height: 1.2em; color: #ffbc00; font-weight: 700; transform: scaleY(0); transform-origin: bottom; -webkit-transition: all 800ms ease; -moz-transition: all 800ms ease; -ms-transition: all 800ms ease; -o-transition: all 800ms ease; transition: all 800ms ease; -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .sec-title h2 span { color: #ffffff; } .sec-title.active h2 { transform: scale(1); } .sec-title .text { position: relative; margin-top: 20px; font-size: 16px; } .sec-title .float-text { position: absolute; left: 0; top: 0; font-size: 160px; line-height: .65em; color: #131313; font-weight: 700; font-family: "Rajdhani", sans-serif; letter-spacing: .2em; text-transform: uppercase; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .sec-title.text-center .float-text { right: 0; margin: 0 auto; } .sec-title.active .float-text { text-shadow: 0 0 40px rgba(0, 0, 0, 0.50); letter-spacing: 0; } /*** ==================================================================== Page Title ==================================================================== ***/ .page-title { position: relative; text-align: center; padding: 200px 0px 150px; background-repeat: no-repeat; background-size: cover; background-position: center; } .page-title:before { position: absolute; content: ''; left: 0px; top: 0px; width: 100%; height: 100%; display: block; background-color: rgba(0, 0, 0, 0.60); } .page-title .auto-container { position: relative; } .page-title h2 { position: relative; color: #ffffff; font-size: 74px; line-height: 1.2em; margin-bottom: 10px; font-weight: 700; text-transform: capitalize; } .page-breadcrumb { position: relative; margin-top: 5px; } .page-breadcrumb li { position: relative; display: inline-block; margin-right: 10px; padding-right: 15px; color: #ffffff; font-size: 18px; font-weight: 400; text-transform: capitalize; } .page-breadcrumb li:after { position: absolute; content: ">"; right: -2px; top: 1px; color: #ffffff; font-size: 14px; font-weight: 900; font-family: 'Font Awesome 5 Free'; } .page-breadcrumb li:last-child::after { display: none; } .page-breadcrumb li:last-child { padding-right: 0px; margin-right: 0px; } .page-breadcrumb li a { color: #ffffff; font-weight: 500; text-transform: capitalize; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .page-breadcrumb li a:hover { color: #ffbc00; } .play-now { position: relative; display: block; z-index: 9; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .play-now .icon { position: relative; display: inline-block; height: 80px; width: 80px; text-align: center; line-height: 80px; background-color: #000000; color: #ffffff; z-index: 1; padding-left: 5px; font-size: 24px; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); -moz-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); -ms-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); -o-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); -webkit-transform-origin: center; transform-origin: center; } .play-now .ripple, .play-now .ripple:before, .play-now .ripple:after { position: absolute; top: 50%; left: 50%; height: 70px; width: 70px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .play-now .ripple:before { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -ms-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute; } .play-now .ripple:after { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; content: ""; position: absolute; } @-webkit-keyframes ripple { 70% { box-shadow: 0 0 0 70px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes ripple { 70% { box-shadow: 0 0 0 70px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /*** ==================================================================== Banner Section ==================================================================== ***/ .banner-section { position: relative; } .banner-section .swiper-slide { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section .swiper-slide .content-box { position: relative; height: 100vh; width: 100%; display: table; vertical-align: middle; margin-top: ; } .banner-section .swiper-slide .content-box1 { margin-top: 35px; } .banner-section .swiper-slide .content { position: relative; display: table-cell; vertical-align: middle; z-index: 9; } .banner-section .swiper-slide .content .inner { position: relative; max-width: 600px; text-align: center; margin: 0 auto; } .banner-section .swiper-slide .content .inner:before { position: absolute; left: -50px; top: -60px; bottom: -50px; width: 350px; transform: scaleX(0); transform-origin: left; text-transform: uppercase; border: 10px solid #ffbc00; border-right: 0; content: ""; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .swiper-slide-active .content .inner:before { opacity: 1; transform: scaleX(1); -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .banner-section .swiper-slide .content .inner:after { position: absolute; right: -50px; top: -60px; bottom: -50px; width: 350px; transform: scaleX(0); transform-origin: right; text-transform: uppercase; border: 10px solid #ffbc00; border-left: 0; z-index: -1; content: ""; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .swiper-slide-active .content .inner:after { opacity: 1; transform: scaleX(1); -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .banner-section .swiper-slide h2 { position: relative; display: block; font-size: 100px; line-height: 1em; color: #ffffff; font-weight: 700; margin-bottom: 20px; opacity: 0; transform: scaleY(0); transform-origin: top; text-transform: uppercase; font-family: "Oswald", sans-serif; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .swiper-slide-active h2 { opacity: 1; transform: scaleY(1); -webkit-transition-delay: 750ms; -moz-transition-delay: 750ms; -ms-transition-delay: 750ms; -o-transition-delay: 750ms; transition-delay: 750ms; } .banner-section .swiper-slide h3 { position: relative; display: block; font-size: 50px; line-height: 1.2em; color: #ffffff; font-weight: 700; margin-bottom: 30px; opacity: 1; /* transform: scaleY(0); */ transform-origin: top; text-transform: uppercase; font-family: "Oswald", sans-serif; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .swiper-slide-active h3 { opacity: 1; transform: scaleY(1); -webkit-transition-delay: 750ms; -moz-transition-delay: 750ms; -ms-transition-delay: 750ms; -o-transition-delay: 750ms; transition-delay: 750ms; } .banner-section .swiper-slide .text { position: relative; display: block; font-size: 18px; line-height: 30px; color: #ffffff; font-weight: 400; margin-bottom: 30px; opacity: 1; /* transform: scaleY(0); */ transform-origin: top; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .swiper-slide-active .text { opacity: 1; transform: scaleY(1); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } .banner-section .swiper-slide .btn-box { opacity: 0; transform: scaleY(0); transform-origin: top; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; } .banner-section .swiper-slide-active .btn-box { opacity: 1; transform: scaleY(1); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1250ms; } .swiper-slide-active { z-index: 3; } .banner-slider-wrapper { position: relative; width: 80%; float: right; height: 100vh; } .banner-slider { position: relative; } .banner-slider .swiper-slide { overflow-y: scroll; } .banner-slider-arrows { position: absolute; /* left: 50px; */ right: 100px; bottom: 45px; z-index: 9; } .banner-slider-arrow { position: relative; margin-right: 10px; width: 30px; height: 30px; text-align: center; background: #fff; line-height: 30px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; opacity: .30; } .banner-slider-arrow:hover { opacity: 1; } .banner-slider-arrow.banner-slider-arrow--previous { left: 0; } .banner-slider-arrow.banner-slider-arrow--next { left: auto; right: 0; } .banner-slider-counter { display: none; } .banner-slider-item { position: relative; } .banner-slider-item .media-wrapper { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .banner-slider-item img { width: 100%; height: 100%; object-fit: cover; } .banner-slider-counter { position: absolute; bottom: 40px; left: 50px; color: #ffffff; z-index: 3; font-size: 18px; } .banner-section .circular-menu { position: absolute; right: 50px; bottom: 40px; z-index: 99; opacity: .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; } .banner-section .circular-menu.active, .banner-section .circular-menu:hover { opacity: 1; } .circular-menu .floating-btn { display: block; width: 42px; height: 42px; border-radius: 50%; background-color: #ffffff; color: #222222; text-align: center; line-height: 42px; cursor: pointer; outline: 0; } .circular-menu.active .floating-btn { box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3); background-color: #ffffff; } .circular-menu .floating-btn:active { box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .2); } .circular-menu .floating-btn i { font-size: 16px; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; } .circular-menu.active .floating-btn i:before { content: "\f00d"; } .circular-menu:after { display: block; content: ' '; height: 50px; width: 50px; border-radius: 50%; position: absolute; top: 0; right: 0; z-index: -2; background-color: #ffbc00; 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; } .circular-menu.active:after { -webkit-transform: scale3d(5.5, 5.5, 1); transform: scale3d(5.5, 5.5, 1); transition-timing-function: cubic-bezier(.68, 1.55, .265, 1); } .circular-menu .items-wrapper { padding: 0; margin: 0; } .circular-menu .menu-item { position: absolute; right: 0; bottom: 0; z-index: -1; display: block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .circular-menu .menu-item span { color: #222222; font-size: 1em; width: 3em; height: 3em; border-radius: 50%; text-align: center; line-height: 3; background-color: rgba(255, 255, 255, 1); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .circular-menu .menu-item:hover span { background-color: #ffbc00; color: #ffffff; } .circular-menu .menu-item:hover span {} .circular-menu.active .menu-item { -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .circular-menu.active .menu-item:nth-child(1) { -webkit-transform: translate3d(1em, -7em, 0); transform: translate3d(1em, -7em, 0); } .circular-menu.active .menu-item:nth-child(2) { -webkit-transform: translate3d(-3.5em, -6.3em, 0); transform: translate3d(-3.5em, -6.3em, 0); } .circular-menu.active .menu-item:nth-child(3) { -webkit-transform: translate3d(-6.5em, -3.2em, 0); transform: translate3d(-6.5em, -3.2em, 0); } .circular-menu.active .menu-item:nth-child(4) { -webkit-transform: translate3d(-7em, 1em, 0); transform: translate3d(-7em, 1em, 0); } /*** ==================================================================== Banner Section Two ==================================================================== ***/ .banner-section-two { position: relative; } .banner-section-two .slide-item { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section-two .slide-item .content-box { position: relative; height: 100vh; width: 100%; display: table; vertical-align: middle; } .banner-section-two .slide-item .content-box:after { position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.40); content: ""; } .banner-section-two .slide-item .content { position: relative; display: table-cell; vertical-align: middle; z-index: 9; } .banner-section-two .slide-item .title { position: relative; display: inline-block; font-size: 24px; line-height: 1.2em; color: #ffbc00; margin-bottom: 20px; opacity: 0; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-two .active .title { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -ms-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms; } .banner-section-two .slide-item h2 { position: relative; display: block; font-size: 64px; line-height: 1.2em; color: #ffffff; font-weight: 600; margin-bottom: 25px; opacity: 0; font-family: "Oswald", sans-serif; text-transform: uppercase; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-two .active h2 { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .banner-section-two .slide-item .text { position: relative; display: block; font-size: 18px; line-height: 30px; color: #ffffff; font-weight: 400; margin-bottom: 40px; opacity: 0; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-two .active .text { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 750ms; -moz-transition-delay: 750ms; -ms-transition-delay: 750ms; -o-transition-delay: 750ms; transition-delay: 750ms; } .banner-section-two .slide-item .btn-box { opacity: 0; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-two .slide-item .btn-box .theme-btn { margin-right: 25px; } .banner-section-two .active .btn-box { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } .banner-section-two .owl-nav { position: absolute; left: 50px; bottom: 50px; z-index: 9; } .banner-section-two .owl-next, .banner-section-two .owl-prev { position: relative; float: left; margin-right: 10px; width: 30px; height: 30px; text-align: center; background: #fff; line-height: 30px; transition: all 300ms ease; opacity: .30; } .banner-section-two .owl-next:hover, .banner-section-two .owl-prev:hover { opacity: 1; } .banner-section-two .square-menu { position: absolute; right: 50px; bottom: 40px; z-index: 99; transition: all 300ms ease; opacity: .50; } .banner-section-two .square-menu.active, .banner-section-two .square-menu:hover { opacity: 1; } .square-menu .floating-btn { display: block; width: 40px; height: 40px; background-color: #ffffff; color: #222222; text-align: center; line-height: 40px; cursor: pointer; outline: 0; } .square-menu.active .floating-btn { box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3); background-color: #ffffff; } .square-menu .floating-btn:active { box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .2); } .square-menu .floating-btn i { font-size: 16px; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; } .square-menu.active .floating-btn { border-radius: 20px; } .square-menu.active .floating-btn i:before { content: "\f00d"; } .square-menu .items-wrapper { padding: 0; margin: 0; } .square-menu .menu-item { position: absolute; right: 0; bottom: 0; z-index: -1; display: block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .square-menu .menu-item span { font-size: 16px; line-height: 40px; width: 40px; height: 40px; color: #222222; background-color: #ffffff; text-align: center; border-radius: 20px; transition: all 200ms ease; } .square-menu .menu-item:hover span { background-color: #ffbc00; color: #ffffff; } .square-menu.active .menu-item { -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .square-menu.active .menu-item:nth-child(1) { -webkit-transform: translateX(-50px); transform: translateX(-50px); } .square-menu.active .menu-item:nth-child(2) { -webkit-transform: translateX(-100px); transform: translateX(-100px); } .square-menu.active .menu-item:nth-child(3) { -webkit-transform: translateX(-150px); transform: translateX(-150px); } .square-menu.active .menu-item:nth-child(4) { -webkit-transform: translateX(-200px); transform: translateX(-200px); } /*** ==================================================================== Banner Section Three ==================================================================== ***/ .banner-section-three { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section-three .layer-image { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .banner-section-three .shape-outer { position: absolute; height: 100%; width: 50%; left: 0; top: 0; opacity: .90; } .banner-section-three .left-shape { position: absolute; right: 0; top: 0; height: 100%; width: 100%; background: rgb(14, 14, 14); background: -moz-linear-gradient(left, rgba(14, 14, 14, 1) 0%, rgba(36, 36, 36, 1) 100%); background: -webkit-linear-gradient(left, rgba(14, 14, 14, 1) 0%, rgba(36, 36, 36, 1) 100%); background: linear-gradient(to right, rgba(14, 14, 14, 1) 0%, rgba(36, 36, 36, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#242424', GradientType=1); } .banner-section-three .left-shape:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: .20; background: -moz-linear-gradient(top, rgba(14, 14, 14, 1) 0%, rgba(19, 19, 19, 0) 1%, rgba(255, 255, 255, 0.5) 50%, rgba(36, 36, 36, 0) 100%); background: -webkit-linear-gradient(top, rgba(14, 14, 14, 1) 0%, rgba(19, 19, 19, 0) 1%, rgba(255, 255, 255, 0.5) 50%, rgba(36, 36, 36, 0) 100%); background: linear-gradient(to bottom, rgba(14, 14, 14, 1) 0%, rgba(19, 19, 19, 0) 1%, rgba(255, 255, 255, 0.5) 50%, rgba(36, 36, 36, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#00242424', GradientType=0); content: ""; } .banner-section-three .center-stipts:before, .banner-section-three .center-stipts:after, .banner-section-three .center-stipts { position: absolute; left: 40%; top: 20%; height: 70px; width: 500px; opacity: .50; background: -moz-linear-gradient(left, rgba(255, 188, 0, 1) 0%, rgba(125, 185, 232, 0) 100%); background: -webkit-linear-gradient(left, rgba(255, 188, 0, 1) 0%, rgba(125, 185, 232, 0) 100%); background: linear-gradient(to right, rgba(255, 188, 0, 1) 0%, rgba(125, 185, 232, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffbc00', endColorstr='#007db9e8', GradientType=1); content: ""; } .banner-section-three .center-stipts:after { margin-top: 100px; left: 100px; opacity: 1; } .banner-section-three .center-stipts:before { margin-top: 200px; left: 200px; opacity: 1; display: none; } .banner-section-three .content-outer { position: relative; height: 100vh; width: 100%; display: table; vertical-align: middle; } .banner-section-three .content-box { position: relative; display: table-cell; vertical-align: middle; z-index: 9; } .banner-section-three .inner { position: relative; width: 50%; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-three h2 { position: relative; display: block; font-size: 54px; line-height: 1.2em; color: #ffffff; font-weight: 500; margin-bottom: 25px; font-family: "Oswald", sans-serif; 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; } .banner-section-three .wrap { display: inline-block; color: #ffbc00; line-height: 1em; } .banner-section-three .text { position: relative; display: block; font-size: 14px; line-height: 24px; color: #ffffff; font-weight: 400; max-width: 450px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-three .social-icon-two { position: absolute; left: 40px; bottom: 40px; z-index: 99; } /*** ==================================================================== About Us ==================================================================== ***/ .about-us { position: relative; padding: 0px 0 70px; } .about-us .sec-title { margin-bottom: 30px; } .about-us .content-column { position: relative; margin-bottom: 50px; } .about-us .content-column .inner-column { padding-right: 70px; } .about-us .about-years { position: relative; margin-bottom: 30px; padding: 10px 30px; background-color: #252525; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.30); text-transform: capitalize; } .about-us .about-years span { position: relative; font-size: 28px; font-weight: 700; margin-right: 10px; line-height: 1em; } .about-us .about-years h3 { position: relative; display: inline-block; font-size: 24px; line-height: 1.2em; color: #ffffff; font-weight: 500; font-family: 'Oswald', sans-serif; } .about-us .content-column .text-box { margin-bottom: 30px; } .about-us .content-column .text-box p { position: relative; margin-bottom: 20px; text-align: justify; } .feature-block { position: relative; margin-bottom: 30px; } .feature-block .inner-box { position: relative; padding-left: 65px; } .feature-block .icon-box { position: absolute; left: 0; top: 4px; transition: all 0.5s; } .feature-block :hover .icon-box { transform: scale(1.2); transition: all 0.5s; } .feature-block .icon-box .icon { display: block; font-size: 42px; line-height: 1em; color: #ffbc00; font-weight: 400; } .feature-block h4 { font-size: 20px; line-height: 1.2em; color: #ffffff; font-weight: 500; margin-bottom: 10px; } .feature-block h4 a { color: #ffffff; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .feature-block h4 a:hover { color: #ffbc00; } .feature-block .text { font-size: 15px; line-height: 25px; font-weight: 400; } .about-us .image-column { position: relative; margin-bottom: 50px; } .about-us .image-column .inner-column { position: relative; padding-top: 20px; } .about-us .image-column .inner-column:before { position: absolute; top: 20px; left: 0; right: 0; margin: 0 auto; height: 500px; width: 400px; border: 20px solid #ffbc00; content: ""; transform: translateX(50px); } .about-us .image-column .image { position: relative; z-index: 9; padding: 50px; margin-bottom: 0; text-align: center; } .about-us .image-column .image img { display: inline-block; width: auto; box-shadow: 0 0 30px rgba(0, 0, 0, 0.80); } .about-us .single-item-carousel { position: relative; padding-bottom: 30px; } .about-us .single-item-carousel .owl-nav { display: none; } .about-us .single-item-carousel .owl-dots { position: absolute; left: 0; bottom: 0px; width: 100%; text-align: center; } .about-us .single-item-carousel .owl-dot { position: relative; display: inline-block; height: 12px; width: 12px; background-color: rgba(255, 255, 255, .50); margin: 0 5px; } .about-us .single-item-carousel .owl-dot.active { background-color: #ffbc00; } /*** ==================================================================== About Me ==================================================================== ***/ .about-me { position: relative; padding: 120px 0 100px; } .about-me .image-column { position: relative; margin-bottom: 50px; } .about-me .image-column .image-box { position: relative; padding-right: 70px; } .about-me .image-column .image { position: relative; margin-bottom: 0; overflow: hidden; box-shadow: 0 0 50px rgba(0, 0, 0, 0.80); } .about-me .image-column .image img { display: block; width: 100%; } .about-me .info-column { position: relative; } .about-me .info-column .inner-column { position: relative; } .about-me .info-column h1 { position: relative; font-size: 50px; line-height: 1em; color: #ffffff; font-weight: 700; margin-bottom: 20px; } .about-me .info-column h3 { position: relative; display: block; font-size: 30px; line-height: 1em; color: #ffffff; font-weight: 700; margin-bottom: 30px; color: #ffbc00; } .about-me .info-column h3 span { color: #ffffff; } .about-me .info-column .text-box { position: relative; padding: 50px 40px 40px; background-color: #252525; border-bottom: 5px solid #ffbc00; border-radius: 10px 10px 30px 30px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .about-me .info-column p { position: relative; font-size: 16px; line-height: 1.6em; color: #aaaaaa; margin-bottom: 30px; } .about-me .bottom-box { position: relative; padding-left: 80px; min-height: 50px; margin-bottom: 30px; } .about-me .bottom-box .signature { position: absolute; left: 0; top: 5px; max-width: 70px; } .about-me .bottom-box .name { position: relative; float: left; font-size: 18px; line-height: 1.2em; color: #ffffff; font-weight: 500; padding-top: 5px; font-family: "Rajdhani", sans-serif; } .about-me .bottom-box .name span { position: relative; display: block; font-size: 14px; line-height: 1.2em; color: #aaaaaa; } /*** ==================================================================== About Section ==================================================================== ***/ .about-section { position: relative; padding: 120px 0 70px; z-index: 0; } .about-section .bg-layer { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .about-section .sec-title { margin-bottom: 30px; } .about-section .content-column { position: relative; margin-bottom: 50px; } .about-section .content-column .inner-column { position: relative; } .about-section .content-column .message { position: relative; display: block; font-size: 24px; line-height: 1.4em; color: #ffffff; font-weight: 600; font-family: "Rajdhani", sans-serif; margin-bottom: 30px; } .about-section .text-box { position: relative; display: block; margin-bottom: 40px; } .about-section .text-box p { position: relative; margin-bottom: 20px; } .about-section .list-style-two li { float: left; width: 50%; color: #aaaaaa; font-size: 20px; font-weight: 500; font-family: "Rajdhani", sans-serif; } .about-section .btn-box { position: relative; display: block; } .about-section .image-column { position: relative; margin-bottom: 50px; } .about-section .image-column .inner-column { position: relative; padding: 50px 50px 0; } .about-section .image-column .image { position: relative; margin-bottom: 0; box-shadow: 0 0 40px rgba(0, 0, 0, 0.50); } .about-section .image-column .image:before { position: absolute; left: -50px; top: -50px; height: 100%; width: 100%; border: 15px solid #ffbc00; content: ""; box-shadow: 0 0 40px rgba(0, 0, 0, 0.50); z-index: -1; } .about-section .image-column .image img { display: block; width: 100%; height: auto; } /*** ==================================================================== Welcome Section ==================================================================== ***/ .welcome-section { position: relative; text-align: center; padding: 23px 0 60px; } .welcome-section .sec-title { margin-bottom: 100px; } .welcome-section .sec-title h2 .logo { position: relative; display: inline-block; top: -5px; } .welcome-section .row { margin: 0 -40px; } .welcome-section .column { position: relative; padding: 0 40px; margin-bottom: 60px; } .welcome-section .column .inner-column { position: relative; background-color: #252525; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); overflow: hidden; } .welcome-section .column .lower-content { position: relative; border-bottom: 5px solid #ffbc00; border-radius: 0 0 15px 15px; padding: 50px 30px; } .welcome-section .column .image { position: relative; margin-bottom: 0; } .welcome-section .column .image img { display: block; width: 100%; } .welcome-section h3 { position: relative; display: block; font-size: 32px; line-height: 1.2em; color: #ffffff; font-weight: 700; margin-bottom: 20px; } /*** ==================================================================== Fun Facts ==================================================================== ***/ .fun-facts { position: relative; padding: 120px 0 70px; } .fun-facts.alternate { padding-top: 0; } /* Fact Counter */ .fact-counter { position: relative; margin-bottom: 20px; } .fact-counter .column { position: relative; margin-bottom: 30px; } .fact-counter .column .inner { position: relative; background-color: #252525; box-shadow: 0 0 30px rgba(0, 0, 0, .40); padding: 40px 30px; text-align: center; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .fact-counter .column .inner:before { position: absolute; left: 20px; top: 20px; right: 20px; bottom: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); content: ""; } .fact-counter .icon { position: relative; display: inline-block; font-size: 60px; line-height: 1em; color: #ffbc00; margin-bottom: 20px; } .fact-counter .count-outer { position: relative; display: block; text-align: center; font-weight: 500; color: #ffffff; font-size: 34px; margin-bottom: 20px; } .fact-counter .count-outer .count-text { position: relative; font-weight: 500; color: #ffffff; font-size: 34px; display: inline-block; } .fact-counter .column .counter-title { position: relative; font-size: 20px; font-weight: 600; color: #ffffff; display: inline-block; text-transform: capitalize; } .fun-facts .progress-column { position: relative; margin-bottom: 50px; } .fun-facts .progress-column .inner-column { position: relative; padding-left: 20px; } .fun-facts .progress-column h4 { position: relative; font-size: 28px; line-height: 1.2em; color: #ffffff; font-weight: 600; margin-bottom: 20px; } .fun-facts .progress-column .text { margin-bottom: 20px; } .fun-facts .progress-bars { position: relative; } .fun-facts .bar-item { position: relative; margin-bottom: 30px; } .fun-facts .bar-item:last-child { margin-bottom: 0px; } .fun-facts .bar-item .skill-bar { position: relative; width: 100%; height: 5px; } .fun-facts .bar-item .skill-bar .bar-inner { position: relative; width: 100%; height: 5px; background: #252525; } .fun-facts .bar-item .skill-bar .bar-inner .bar { position: absolute; left: 0px; top: 0px; height: 5px; width: 0px; border-bottom: 5px solid #ffbc00; -webkit-transition: all 2000ms ease; -ms-transition: all 2000ms ease; -o-transition: all 2000ms ease; -moz-transition: all 2000ms ease; transition: all 2000ms ease; } .fun-facts .bar-item .skill-bar .bar-inner .bar:after { content: ''; position: absolute; right: 0px; top: -2.5px; width: 10px; height: 10px; background: #ffffff; border-radius: 50%; } .fun-facts .bar-item .skill-header { position: relative; line-height: 24px; text-transform: capitalize; font-weight: 500; font-size: 18px; color: #ffffff; margin-bottom: 15px; } .fun-facts .bar-item .skill-header .skill-title { position: relative; float: left; } .fun-facts .bar-item .skill-percentage { position: absolute; right: 0px; top: -35px; font-weight: 500; line-height: 24px; text-transform: capitalize; color: #ffffff; font-size: 18px; } /*** ==================================================================== Features Section ==================================================================== ***/ .features-section { position: relative; padding: 10px 0 50px; } .features-section .text-column { position: relative; margin-bottom: 70px; } .features-section .text-column .inner-column { position: relative; padding-top: 10px; } .features-section .text-column p { position: relative; font-size: 18px; line-height: 26px; margin-bottom: 25px; } .features-section .text-column ul { margin-bottom: 40px; } .feature-block-two { position: relative; margin-bottom: 30px; } .feature-block-two .inner-box { position: relative; padding: 20px 30px; padding-left: 120px; background-color: #252525; border-radius: 15px; min-height: 130px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); border-bottom: 2px solid #ffbc00; } .feature-block-two .inner-box .icon { position: absolute; left: 30px; top: 30px; font-size: 64px; line-height: 1em; color: #ffbc00; } .feature-block-two h4 { position: relative; display: block; font-size: 24px; line-height: 1em; color: #ffffff; font-weight: 500; margin-bottom: 15px; } .feature-block-two .text { font-size: 14px; line-height: 24px; color: #aaaaaa; max-width: 300px; } .right-column .feature-block-two .inner-box { padding-left: 30px; padding-right: 120px; text-align: right; } .right-column .feature-block-two .inner-box .icon { left: auto; right: 30px; } /*** ==================================================================== Service Section ==================================================================== ***/ .services-section { position: relative; padding: 120px 0; } .services-section .carousel-outer { position: relative; margin: 0 -25px; } .service-block { position: relative; padding: 25px 25px; } .service-block .inner-box { position: relative; display: block; background-color: #252525; text-align: center; padding: 50px 20px 50px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.50); border-radius: 10px; overflow: hidden; border-bottom: 4px solid #ffbc00; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block .inner-box:before { position: absolute; left: 0; bottom: -4px; height: 4px; width: 100%; background-color: #ffffff; content: ""; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ } .service-block .inner-box:hover:before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } .service-block .inner-box .icon { position: relative; display: block; font-size: 64px; color: #ffbc00; line-height: 1em; margin-bottom: 30px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .service-block .inner-box:hover .icon { -webkit-transform: scale(-1) rotate(-180deg); -moz-transform: scale(-1) rotate(-180deg); -ms-transform: scale(-1) rotate(-180deg); -o-transform: scale(-1) rotate(-180deg); transform: scale(-1) rotate(-180deg); } .service-block h3 { position: relative; display: block; font-size: 20px; line-height: 1.2em; color: #ffffff; font-weight: 500; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .10); margin-bottom: 15px; } .service-block h3 a { color: #ffffff; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block h3 a:hover { color: #ffbc00; } .service-block .text { position: relative; font-size: 16px; line-height: 24px; color: #888888; font-weight: 400; margin-bottom: 25px; } .service-block .read-more { position: relative; display: inline-block; font-size: 14px; line-height: 20px; color: #222222; font-weight: 600; padding: 5px 20px; border-radius: 3px; background-color: #ffbc00; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block .read-more:hover { background-color: #ffffff; color: #222222; } .services-section .services-carousel { position: relative; padding-bottom: 70px; } .services-section .owl-nav { display: none; } .services-section .owl-dots { position: absolute; left: 0; bottom: 0px; width: 100%; text-align: center; } .services-section .owl-dot { position: relative; display: inline-block; height: 12px; width: 12px; background-color: rgba(255, 255, 255, .50); margin: 0 5px; } .services-section .owl-dot.active { background-color: #ffbc00; } /*** ==================================================================== Service Section Two ==================================================================== ***/ .services-section-two { position: relative; padding: 20px 0 90px; } .service-block-two { position: relative; margin-bottom: 50px; } .service-block-two .inner-box { position: relative; display: block; background-color: #252525; box-shadow: 0 0 25px rgba(0, 0, 0, 0.50); border-radius: 10px; overflow: hidden; border-bottom: 4px solid #ffbc00; } .service-block-two .image-box { position: relative; } .service-block-two .image-box .image { position: relative; overflow: hidden; margin-bottom: 0; } .service-block-two .image-box .image img { display: block; width: 100%; height: auto; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block-two .inner-box:hover .image img { opacity: .7; transform: scale(1.05); } .service-block-two .lower-content { position: relative; padding: 30px 30px; } .lower-content1 { position: relative; display: inline-block; font-size: 14px; line-height: 20px; color: #222222; font-weight: 600; padding: 5px 20px; border-radius: 3px; background-color: #ffbc00; } .lower-content1.read-more { color: white; } .service-block-two h3 { position: relative; display: block; font-size: 22px; line-height: 1.2em; color: #ffffff; font-weight: 600; border-top: 1px solid rgba(255, 255, 255, .10); margin-bottom: 15px; } .service-block-two h3 a { color: #ffffff; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block-two h3 a:hover { color: #ffbc00; } .service-block-two .text { position: relative; font-size: 16px; line-height: 24px; color: white; font-weight: 400; margin-bottom: 25px; } .service-block-two .read-more { position: relative; display: inline-block; font-size: 14px; line-height: 20px; color: #222222; font-weight: 600; padding: 5px 20px; border-radius: 3px; background-color: #ffbc00; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block-two .read-more:hover { background-color: #ffffff; color: #222222; } /*** ==================================================================== Service Details ==================================================================== ***/ .service-detail-section { position: relative; padding: 120px 0px 80px; z-index: 9; } .service-detail-section .sidebar-side, .service-detail-section .content-side { position: relative; margin-bottom: 50px; } .service-detail { position: relative; } .service-detail .image-box { position: relative; margin-bottom: 40px; } .service-detail .image-box .image { position: relative; margin-bottom: 0px; } .service-detail .image-box .image img { display: block; width: 100%; height: auto; } .service-detail .content-box { position: relative; } .service-detail .content-column { position: relative; } .service-detail .content-column .inner-column { position: relative; } .service-detail .content-box h2 { position: relative; font-size: 30px; line-height: 1.2em; color: #ffffff; font-weight: 600; margin-bottom: 30px; } .service-detail .content-box h4 { position: relative; font-size: 24px; line-height: 1.2em; color: #ffffff; font-weight: 600; margin-bottom: 20px; } .service-detail .content-box p { position: relative; font-size: 16px; line-height: 27px; color: #999999; font-weight: 400; margin-bottom: 27px; } .service-detail .two-column { position: relative; margin-top: 40px; } .service-detail .two-column .text-column { position: relative; margin-bottom: 13px; } .service-detail .two-column .text-column p { margin-bottom: 28px; } .service-detail .two-column .image-column { position: relative; margin-bottom: 40px; } .service-detail .two-column .image { position: relative; margin-bottom: 0; } .service-detail .two-column .image img { display: block; width: 100%; } .service-detail .feature-box { position: relative; margin-top: 50px; margin-bottom: 20px; } .service-detail .feature-block-two h4 { position: relative; display: block; font-size: 24px; line-height: 1em; color: #ffffff; margin-bottom: 15px; } /*=== Brochure Box ===*/ .brochure-box { position: relative; margin-bottom: 50px; } .brochure-box .inner { position: relative; } .brochure-box h4 { display: block; font-size: 24px; line-height: 1.2em; color: #ffffff; font-weight: 700; margin-bottom: 20px; } .brochure-box .text { font-size: 15px; line-height: 25px; color: #999999; margin-bottom: 30px; } .brochure-box .theme-btn { font-size: 14px; line-height: 23px; border-radius: 0; display: block; width: 100%; padding: 15px 10px; text-align: center; text-transform: uppercase; margin-bottom: 20px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .brochure-box .theme-btn i { font-size: 18px; line-height: 23px; margin-right: 10px; } .brochure-box .theme-btn:last-child { margin-bottom: 0; } /* Help Box*/ .help-box { position: relative; } .help-box .inner-box { position: relative; } .help-box h6 { position: relative; display: block; font-size: 20px; line-height: 30px; color: #ffffff; font-weight: 700; margin-bottom: 25px; } .help-box p { position: relative; font-size: 16px; line-height: 26px; color: #ffffff; font-weight: 400; margin-bottom: 25px; opacity: .70; } .help-box .info-box { position: relative; margin-bottom: 30px; } .help-box .info-box li { position: relative; display: block; font-size: 17px; line-height: 26px; color: #ffffff; font-weight: 500; margin-bottom: 8px; padding-left: 30px; } .help-box .info-box li a { color: #ffffff; } .help-box .info-box li a:hover { text-decoration: underline; } .help-box .info-box li .icon { position: absolute; left: 0; top: 0; font-size: 16px; color: #ffbc00; line-height: 26px; } .help-box .theme-btn { position: relative; padding: 10px 40px; } /*** ==================================================================== Video Section ==================================================================== ***/ .video-section { position: relative; background-repeat: no-repeat; background-size: cover; padding: 120px 0 140px; } .video-section:before { position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background-color: #252525; opacity: .50; content: ""; } .video-section .content-box { position: relative; text-align: center; } .video-section .content-box .text { position: relative; display: block; font-size: 18px; line-height: 26px; color: #ffbc00; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; } .video-section .content-box h2 { display: block; font-size: 48px; line-height: 1.2em; color: #ffffff; font-weight: 700; } .video-section .play-now { position: relative; display: inline-block; margin-top: 50px; } .video-section .play-now .icon { height: 100px; width: 100px; line-height: 100px; background-color: #ffbc00; padding-left: 0; font-size: 50px; } /*** ==================================================================== Project Section ==================================================================== ***/ .project-section { position: relative; padding: 120px 0; background-repeat: no-repeat; background-position: center; background-size: cover; } .project-section.pd-top-extra { padding-top: 200px; } .project-block { position: relative; opacity: .80; pointer-events: none; } .project-block.swiper-slide-active { pointer-events: unset; opacity: 1; } .project-block .inner-box { position: relative; overflow: hidden; } .project-block .inner-box .image { position: relative; margin-bottom: 0; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .project-block .inner-box:hover .image {} .project-block .inner-box .image img { display: block; width: 100%; height: auto; } .project-block .caption-box { position: absolute; left: 30px; right: 30px; bottom: 30px; padding: 40px 40px 30px; background-color: rgba(37, 37, 37, .90); 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; } .project-block.swiper-slide-active .inner-box:hover .caption-box { opacity: 1; transform: scale(1); } .project-block .caption-box h4 { position: relative; display: block; font-size: 26px; line-height: 1.2em; color: #ffffff; font-weight: 700; margin-bottom: 20px; opacity: 0; visibility: hidden; transform: translateY(50px); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-block.swiper-slide-active .inner-box:hover .caption-box h4 { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .project-block .caption-box h4 a { color: #ffffff; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-block .caption-box h4 a:hover { color: #ffbc00; } .project-block .caption-box .text { position: relative; display: block; font-size: 16px; line-height: 25px; margin-bottom: 25px; color: #dddddd; opacity: 0; visibility: hidden; transform: translateY(50px); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-block.swiper-slide-active .inner-box:hover .caption-box .text { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms; } .project-block .caption-box .read-more { position: relative; line-height: 20px; padding: 10px 20px; font-size: 14px; font-weight: 400; opacity: 0; visibility: hidden; transform: translateY(50px); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-block.swiper-slide-active .inner-box:hover .caption-box .read-more { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; -ms-transition-delay: 600ms; -o-transition-delay: 600ms; transition-delay: 600ms; } /*** ==================================================================== Project Section Two ==================================================================== ***/ .project-section-two { position: relative; padding: 120px 0 90px; } /*=== Mixitup Gallery ===*/ .project-section-two .filters { margin-bottom: 50px; text-align: center; } .project-section-two .filters .filter-tabs { position: relative; display: inline-block; } .project-section-two .filters li { position: relative; display: inline-block; line-height: 20px; padding: 10px 20px; cursor: pointer; color: #ffffff; font-weight: 600; font-size: 20px; margin: 0 8px 15px; background-color: #252525; font-family: "Rajdhani", sans-serif; text-transform: uppercase; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-section-two .filters .filter.active { color: #ffbc00; box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); } .project-section-two .project-block-two.mix { display: none; } .project-block-two { position: relative; margin-bottom: 30px; } .project-block-two .inner-box { position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .project-block-two .image-box { position: relative; } .project-block-two .image-box .image { position: relative; margin: 0; background-color: #252525; } .project-block-two .image-box img { display: block; width: 100%; height: auto; opacity: .70; } .project-block-two .image-box a { position: relative; display: block; } .project-block-two .caption-box { position: absolute; left: 20px; bottom: 20px; padding: 10px 20px; opacity: 0; visibility: hidden; } .project-block-two .image-box:hover .caption-box { opacity: 1; visibility: visible; } .project-block-two .caption-box:before, .project-block-two .caption-box:after { position: absolute; left: 0; top: 0; height: 0%; width: 100%; content: ""; background-color: #ffbc00; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -ms-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; } .project-block-two .caption-box:after { background-color: #252525 !important; } .project-block-two .image-box:hover .caption-box:before { height: 100%; } .project-block-two .image-box:hover .caption-box:after { height: 100%; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -ms-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } .project-block-two .caption-box h3 { position: relative; display: block; font-size: 24px; line-height: 1em; color: #ffffff; font-weight: 600; z-index: 9; opacity: 0; margin-bottom: 5px; } .project-block-two .image-box:hover .caption-box h3 { opacity: 1; -webkit-animation: fadeInDown 300ms; -moz-animation: fadeInDown 300ms; -ms-animation: fadeInDown 300ms; -o-animation: fadeInDown 300ms; animation: fadeInDown 300ms; -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; -ms-animation-delay: 600ms; -o-animation-delay: 600ms; animation-delay: 600ms; -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; -ms-transition-delay: 600ms; -o-transition-delay: 600ms; transition-delay: 600ms; } .project-block-two .caption-box h3 a { color: #ffffff; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-block-two .caption-box h3 a:hover { color: #ffffff; } .project-block-two .caption-box span { position: relative; display: block; font-size: 15px; line-height: 20px; color: #ffffff; font-weight: 300; z-index: 9; opacity: 0; } .project-block-two .image-box:hover .caption-box span { opacity: 1; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; -ms-transition-delay: 900ms; -o-transition-delay: 900ms; transition-delay: 900ms; } /*** ==================================================================== Project Detail ==================================================================== ***/ .project-detail { position: relative; padding: 120px 0; z-index: 8; } .project-detail .text-column { position: relative; margin-bottom: 50px; } .project-detail .upper-box { position: relative; margin-bottom: 40px; } .project-detail .upper-box .image { position: relative; margin-bottom: 0; } .project-detail .upper-box .image img { display: block; width: 100%; height: auto; } .project-detail .single-item-carousel .owl-nav { position: absolute; left: 0; top: 50%; width: 100%; margin-top: -50px; } .project-detail .single-item-carousel .owl-next, .project-detail .single-item-carousel .owl-prev { position: absolute; left: 0; height: 100px; width: 30px; background-color: rgba(0, 0, 0, 0.5); text-align: center; font-size: 18px; line-height: 100px; color: #ffffff; font-weight: 400; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-detail .single-item-carousel .owl-next { left: auto; right: 0px; } .project-detail .single-item-carousel .owl-next:hover, .project-detail .single-item-carousel .owl-prev:hover { background-color: rgba(255, 255, 255, .5); color: #000000; } /* Lower Content */ .project-detail .lower-content { position: relative; padding-top: 35px; } .project-detail .lower-content h2 { font-size: 34px; line-height: 1.2em; color: #ffffff; font-weight: 700; margin-bottom: 30px } .project-detail .lower-content p { font-size: 15px; line-height: 25px; color: #999999; margin-bottom: 30px; } .project-detail .lower-content p strong { font-weight: 500; font-size: 17px; } .project-detail .list-style-two li { float: left; width: 50%; } .project-detail .social-icon-two { margin-top: 30px; margin-bottom: 30px; } .project-detail blockquote { position: relative; border: 0; padding: 20px 40px 20px; font-size: 18px; line-height: 26px; color: #ffffff; max-width: 95%; border-left: 3px solid #ffbc00; background-color: rgba(255, 255, 255, .10); margin: 40px auto 40px; font-family: "Rajdhani", sans-serif; box-shadow: 0 0 20px rgba(0, 0, 0, 0.20); border-radius: 5px 0 0 5px; } .project-detail blockquote cite { display: block; font-style: normal; margin-top: 5px; color: #ffffff; font-size: 14px; text-align: right; margin-top: 10px; } .project-detail blockquote cite span { font-weight: 500; font-size: 18px; color: #ffbc00; font-style: normal; } .project-detail .project-info { position: relative; background-color: #252525; border-bottom: 3px solid #ffbc00; padding: 50px 30px 20px; border-radius: 0 0 10px 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.20); } .project-detail .project-info li { position: relative; padding-left: 50px; padding-right: 20px; margin-bottom: 20px; } .project-detail .project-info li .icon { position: absolute; left: 15px; top: 10px; font-size: 20px; line-height: 30px; color: #ffbc00; } .project-detail .project-info li strong { color: #ffffff; font-size: 16px; } .project-detail .project-info li p { font-size: 15px; color: #ffffff; font-weight: 400; margin-bottom: 0; } .project-detail .project-info li p a { color: #ffffff; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-detail .project-info li p a:hover { color: #ffbc00; } /* Load More Option */ .load-more-option { position: relative; display: block; width: 100%; text-align: center; margin-top: 50px; } .load-more-option li.prev a, .load-more-option li.next a { position: relative; display: block; font-size: 18px; line-height: 30px; width: 50px; border-radius: 50%; padding: 10px 10px; text-align: center; color: #ffffff; background-color: #222222; font-variant: small-caps; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .load-more-option li.prev a:hover, .load-more-option li.next a:hover { background-color: #ffbc00; box-shadow: 0 0 30px rgba(0, 0, 0, 0.10); } .load-more-option .load-more { position: relative; display: inline-block; font-size: 30px; } .load-more-option .load-more a { position: relative; display: inline-block; font-size: 30px; line-height: 42px; color: #ffbc00; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .load-more-option .load-more a:hover { color: #ffffff; } /*** ==================================================================== FAQ's Section ==================================================================== ***/ .faq-section { position: relative; padding: 120px 0px 90px; } .faq-section.style-two .accordion-box { max-width: 970px; margin: 0 auto; } .faq-section .content-column { position: relative; } .faq-section .content-column .inner-column { position: relative; margin-bottom: 30px; } /* Accordian Box */ .accordion-box { position: relative; } .accordion-box .block { position: relative; margin-bottom: 30px; } .accordion-box .block:last-child { margin-bottom: 0px; } .accordion-box .block .acc-btn { position: relative; font-size: 18px; cursor: pointer; line-height: 35px; color: #ffffff; font-weight: 400; border-radius: 4px; padding: 12px 25px 12px 25px; transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; background-color: #252525; } .accordion-box .block .icon-outer { position: absolute; right: 25px; top: 13px; font-size: 16px; line-height: 35px; color: #999999; text-align: center; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .accordion-box .block .acc-btn .icon-outer .icon { position: relative; } .accordion-box .block .acc-btn.active { box-shadow: 0 0 30px rgba(0, 0, 0, 0.70); color: #ffbc00; } .accordion-box .block .acc-btn.active .icon-outer { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); color: #ffbc00; } .accordion-box .block .acc-content { position: relative; display: none; } .accordion-box .block .acc-content.current { display: block; } .accordion-box .block .content { position: relative; font-size: 16px; padding: 30px 35px 0px; } .accordion-box .block .content .text { position: relative; font-size: 16px; line-height: 26px; color: #999999; } .accordion-box .block .content p:last-child { margin-bottom: 0px; } /*** ==================================================================== FAQ Form Section ==================================================================== ***/ .faq-form-section { position: relative; padding: 120px 0; } .faq-form-section .faq-form { position: relative; } .faq-form .form-group { position: relative; margin-bottom: 20px; } .faq-form .form-group input[type="text"], .faq-form .form-group input[type="email"], .faq-form .form-group input[type="url"], .faq-form .form-group textarea, .faq-form .form-group select { position: relative; display: block; width: 100%; font-size: 15px; color: #aaaaaa; line-height: 28px; padding: 10px 25px; background-color: #252525; font-weight: 400; height: 50px; border: 1px solid transparent; box-shadow: 0 0 20px rgba(0, 0, 0, 0.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; } .faq-form .form-group input:focus, .faq-form .form-group select:focus, .faq-form .form-group textarea:focus { border-color: #ffbc00; } .faq-form .form-group textarea { height: 200px; resize: none; padding-top: 15px; } .faq-form .form-group button { border: 0; font-size: 14px; font-weight: 400; margin-top: 10px; } .faq-form-section .image-column { position: relative; } .faq-form-section .image-column .image-box { position: relative; } .faq-form-section .image-column .image { position: relative; margin-bottom: 0; } .faq-form-section .image-column .image img { display: block; } /*** ==================================================================== Call Back Section ==================================================================== ***/ .call-back-section { position: relative; padding: 120px 0; } .call-back-section .outer-box { position: relative; max-width: 90%; margin: 0 auto; } .call-back-section .form-column { position: relative; } .call-back-section .form-column .inner-column { position: relative; } .request-form { position: relative; padding: 50px 30px; background-color: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); overflow: hidden; border-radius: 20px; border-bottom: 5px solid #ffbc00; } .request-form .form-group { position: relative; margin-bottom: 15px; } .request-form .form-group:last-child { margin-bottom: 0; } .request-form .form-group input[type="text"], .request-form .form-group input[type="email"], .request-form .form-group input[type="url"], .request-form .form-group textarea, .request-form .form-group select { position: relative; display: block; width: 100%; font-size: 16px; color: #cccccc; line-height: 20px; padding: 14px 20px; background-color: rgba(255, 255, 255, .10); box-shadow: 0 0 20px rgba(0, 0, 0, 0.30); font-weight: 400; border: 1px solid rgba(255, 255, 255, .10); height: 50px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .request-form .form-group textarea { height: 200px; resize: none; } .request-form .form-group input:focus, .request-form .form-group textarea:focus, .request-form .form-group select:focus { border-color: #ffbc00; } .request-form .form-group button { text-transform: capitalize; font-size: 14px; padding: 15px 40px; line-height: 20px; border-radius: 0; } .call-back-section .image-column { position: relative; text-align: center; z-index: 9; } .call-back-section .image-column .image-box { position: relative; } .call-back-section .image-column .image { position: relative; display: inline-block; margin-bottom: 0; } .call-back-section .image-column .image:before { position: absolute; left: 90px; top: 50px; width: 300px; height: 450px; border: 10px solid #ffbc00; z-index: -1; content: ""; box-shadow: 0 0 10px rgba(0, 0, 0, 0.50); } /*** ==================================================================== Contact Page Section ==================================================================== ***/ .contact-page-section { position: relative; padding: 20px 0 80px; } .contact-page-section .form-column { position: relative; margin-bottom: 40px; } .contact-page-section .form-column .inner-column { position: relative; padding-right: 50px; } .contact-page-section .sec-title { margin-bottom: 70px; } .contact-form { position: relative; background-color: #252525; padding: 50px 50px 50px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); border-bottom: 2px solid #ffbc00; border-radius: 0 0 10px 10px; } .contact-form .row { margin: 0 -10px; } .contact-form .form-group { position: relative; padding: 0 10px; margin-bottom: 20px; } .contact-form .form-group:last-child { margin-bottom: 0; } .contact-form .form-group input[type="text"], .contact-form .form-group input[type="email"], .contact-form .form-group input[type="url"], .contact-form .form-group textarea, .contact-form .form-group select { position: relative; display: block; width: 100%; font-size: 18px; color: #999999; line-height: 20px; padding: 14px 30px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.20); border: 1px solid transparent; background-color: rgba(255, 255, 255, .10); font-weight: 400; height: 50px; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .contact-form .form-group input:focus, .contact-form .form-group select:focus, .contact-form .form-group textarea:focus { border-color: #ffbc00; color: #ffffff; } .contact-form .form-group textarea { height: 156px; resize: none; } .contact-form input.error:focus, .contact-form select.error:focus, .contact-form textarea.error:focus { border-color: #ff0000; } .contact-form label.error { display: block; font-weight: 500; font-size: 13px; text-transform: capitalize; line-height: 24px; color: #ff0000; padding-top: 7px; margin-bottom: 0; } .contact-page-section .contact-column { position: relative; margin-bottom: 30px; } .contact-page-section .contact-column .text { position: relative; margin-bottom: 30px; } .contact-page-section .contact-info { position: relative; margin-bottom: 30px; } .contact-page-section .contact-info li { position: relative; padding: 5px 30px; padding-left: 70px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); margin-bottom: 10px; } .contact-page-section .contact-info li p { display: block; font-size: 14px; line-height: 25px; color: #999999; font-weight: 400; } .contact-page-section .contact-info li strong { display: block; font-size: 16px; line-height: 25px; color: #ffffff; font-family: "Rajdhani", sans-serif; font-weight: 600; } .contact-page-section .contact-info li .icon { position: absolute; left: 0px; top: 5px; height: 50px; width: 50px; text-align: center; font-size: 18px; line-height: 50px; background-color: #252525; border-radius: 50%; color: #ffffff; } .contact-page-section .contact-info li a { color: #999999; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .contact-page-section .contact-info li a:hover { color: #ffbc00; } .contact-page-section .social-icon-three { position: relative; padding: 10px 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } /*** ==================================================================== Contact Info Section ==================================================================== ***/ .contact-info-section { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 80px 0; text-align: center; } .contact-info-section:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #222222; opacity: .90; content: ""; } .contact-info-section .content { position: relative; max-width: 900px; margin: 0 auto; } .contact-info-section .title { position: relative; display: block; font-size: 24px; line-height: 1.2em; color: #ffbc00; margin-bottom: 20px; } .contact-info-section h2 { position: relative; display: block; font-size: 42px; line-height: 1.3em; color: #ffffff; font-weight: 600; margin-bottom: 20px; } .contact-info-section h2 span {} .contact-info-section .number { position: relative; display: block; font-size: 32px; line-height: 1em; color: #ffbc00; font-weight: 600; margin-bottom: 30px; } .contact-info-section .number a { color: #ffbc00; } /*** ==================================================================== Map Section ==================================================================== ***/ .map-section { position: relative; display: block; padding-bottom: 120px; } .map-area { position: relative; } .map-data { text-align: center; font-size: 14px; font-weight: 400; line-height: 1.8em; } .map-data a { display: block; } .map-data h6 { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 5px; color: #121212; } .map-section .map-canvas { height: 540px; border: 10px solid #252525; background-color: #f9f9f9; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } /*** ==================================================================== Team Section ==================================================================== ***/ .team-section { position: relative; padding: 120px 0 120px; } .team-section .carousel-outer { position: relative; margin: 0 -15px; } .team-block { position: relative; padding: 15px; } .team-block .inner-box { position: relative; text-align: center; background-color: #252525; box-shadow: 0 0 15px rgba(0, 0, 0, 0.50); padding: 50px 0; z-index: 3; max-width: 275px; margin: 0 auto; } .team-block .thumb { position: relative; height: 120px; width: 120px; display: inline-block; margin-bottom: 30px; border: 3px solid #ffbc00; border-radius: 50%; overflow: hidden; margin-bottom: 10px; } .team-block .thumb img { display: block; width: 100%; height: auto; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .team-block .inner-box:hover .thumb img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .team-block .info-box { position: relative; margin-bottom: 30px; } .team-block .info-box .name { position: relative; display: block; font-size: 20px; line-height: 1.2em; font-weight: 500; color: #ffffff; margin-bottom: 5px; } .team-block .info-box .designation { position: relative; display: block; font-size: 14px; line-height: 1em; color: #ffbc00; font-weight: 500; } .team-block .devider { position: relative; top: -50px; display: block; height: 120px; background-image: url(../images/icons/team-devider.png); background-repeat: no-repeat; background-position: center; background-size: 100%; z-index: -1; margin-bottom: -30px; } .team-block .lower-content { position: relative; padding: 0 35px; } .team-block .other-info { position: relative; text-align: left; } .team-block .other-info li { position: relative; display: block; font-size: 14px; line-height: 24px; color: #ffffff; margin-bottom: 5px; } .team-block .other-info li strong { position: relative; display: inline-block; font-size: 16px; font-weight: 400; line-height: 24px; font-family: "Oswald", sans-serif; min-width: 50px; } .team-block .other-info li a { color: #ffffff; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .team-block .other-info li a:hover { color: #ffbc00; } .team-block .other-info .social-links { position: relative; display: inline-block; } .team-block .other-info .social-links a { position: relative; display: inline-block; margin-right: 7px; text-align: center; color: #ffffff; border-radius: 50%; font-size: 14px; line-height: 20px; } .team-block .other-info .social-links a:hover {} .team-block .other-info .social-links a:last-child { margin-right: 0; } .team-section .owl-nav { display: none; } /*** ==================================================================== Pricing Section ==================================================================== ***/ .pricing-section { position: relative; padding: 120px 0; } .pricing-section .row { margin: 0 -50px; } .pricing-table { position: relative; padding: 0 50px; margin-bottom: 32px; } .pricing-table .inner-box { position: relative; max-width: 325px; margin: 0 auto; box-shadow: 0 0 50px rgba(0, 0, 0, 0.50); padding-top: 10px; border-top: 5px solid #ffbc00; border-bottom: 5px solid #ffbc00; overflow: hidden; border-radius: 40px 0 40px 0; height: 100px; } .pricing-table .inner-box2 { position: relative; max-width: 325px; margin: 0 auto; box-shadow: 0 0 50px rgba(0, 0, 0, 0.50); padding-top: 10px; border-top: 5px solid #ffbc00; border-bottom: 5px solid #ffbc00; overflow: hidden; border-radius: 40px 0 40px 0; } .pricing-table .title-box { position: relative; border-right: 5px solid #ffbc00; padding: 10px 20px; text-align: right; margin-bottom: 30px; } .pricing-table .title-box h3 { position: relative; display: block; font-size: 30px; line-height: 1.2em; color: #ffbc00; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .pricing-table .title-box span { display: block; font-size: 16px; color: #ffffff; line-height: 1em; } .pricing-table .text { position: relative; display: block; font-size: 14px; line-height: 24px; color: #ffffff; text-align: right; padding: 0 20px; margin-bottom: 40px; } .pricing-table .table-content { position: relative; } .pricing-table .table-content ul { position: relative; text-align: left; margin-bottom: 25px; } .pricing-table .table-content ul li { position: relative; font-size: 16px; line-height: 30px; color: #ffffff; font-weight: 400; padding: 7px 25px; background-color: rgba(0, 0, 0, 0.20); border-left: 2px solid #ffbc00; margin-bottom: 5px; } .pricing-table .price-box { position: relative; text-align: center; } .pricing-table .price-box .title { position: relative; display: block; font-size: 24px; line-height: 1em; color: #ffbc00; font-weight: 600; text-transform: uppercase; font-family: "Rajdhani", sans-serif; margin-bottom: 10px; } .pricing-table .price { position: relative; display: block; font-size: 40px; line-height: 1em; color: #ffffff; font-weight: 700; margin-bottom: 20px; } .pricing-table .price span { position: relative; display: inline-block; font-size: 30px; top: 0px; margin-right: 5px; font-weight: 600; } .pricing-table .price sup { font-size: 24px; color: #ffffff; margin-left: 5px; font-weight: 400; } .pricing-table .table-footer { position: relative; text-align: center; margin-bottom: 30px; } .pricing-table .table-footer a { position: relative; display: inline-block; } .pricing-tabs { position: relative; } .pricing-tabs .tab-buttons { position: relative; display: block; text-align: center; margin-top: 30px; } .pricing-tabs .tab-btns { position: relative; display: inline-block; width: 280px; border-radius: 20px 0 20px 0; border-left: 2px solid #ffbc00; border-right: 2px solid #ffbc00; overflow: hidden; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .pricing-tabs .tab-btns li { position: relative; float: left; width: 50%; font-size: 14px; line-height: 20px; padding: 14px 25px; text-align: center; color: #ffffff; font-weight: 600; cursor: pointer; z-index: 8; font-family: "Rajdhani", sans-serif; text-transform: uppercase; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .pricing-tabs .tab-btns li.tab-btn:before { position: absolute; top: 0; left: 100%; height: 100%; width: 100%; background-color: #252525; content: ""; z-index: -1; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms linear; } .pricing-tabs .tab-btns li.tab-btn:last-child:before { display: none; } .pricing-tabs .tab-btns li.tab-btn.active-btn { color: #ffffff; } .pricing-tabs .tab-btns li.tab-btn.active-btn:before { left: 0; } /*** ==================================================================== Testimonial Section ==================================================================== ***/ .testimonial-section { position: relative; padding: 120px 0; } .testimonial-section .carousel-outer { margin: 0 -20px; } .testimonial-block { position: relative; padding: 40px 20px; padding-top: 40px; } .testimonial-block .inner-box { box-shadow: 0 0 20px rgba(0, 0, 0, 0.20); position: relative; background-color: #252525; } .testimonial-block .inner-box:before { position: absolute; left: 0; top: 0; width: 100px; height: 10px; background-color: #ffbc00; content: ""; } .testimonial-block .content-box { position: relative; padding: 70px 30px 40px; } .testimonial-block .content-box .icon { position: absolute; right: 30px; top: -30px; font-size: 60px; line-height: 1em; color: #ffbc00; } .testimonial-block .content-box .rating { position: relative; display: block; font-size: 18px; line-height: 1em; color: #ffbc00; margin-bottom: 20px; } .testimonial-block .content-box .text { display: block; font-size: 20px; color: #bbbbbb; line-height: 1.5em; } .testimonial-block .info-box { position: relative; padding: 30px 50px; padding-left: 130px; text-align: left; background-color: rgba(0, 0, 0, 0.30); border-top: 1px solid rgba(255, 255, 255, .1); } .testimonial-block .thumb { position: absolute; top: 15px; left: 30px; height: 80px; width: 80px; border-radius: 50%; overflow: hidden; } .testimonial-block .name { position: relative; display: block; font-size: 20px; line-height: 30px; font-weight: 500; color: #ffffff; } .testimonial-block .designation { display: block; font-size: 16px; line-height: 1.4em; color: #ffbc00; } .testimonial-section .owl-nav { display: none; } /*** ==================================================================== Testimonial Section Two ==================================================================== ***/ .testimonial-section-two { position: relative; padding: 120px 0; } .testimonial-section .owl-dots, .testimonial-section .owl-nav { display: none; } .testimonial-block-two { position: relative; } .testimonial-block-two .inner-box { position: relative; text-align: center; } .testimonial-block-two .inner-box .image { position: relative; width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; overflow: hidden; } .testimonial-block-two .inner-box .text { position: relative; color: #999999; font-size: 22px; line-height: 1.6em; max-width: 800px; margin: 0 auto; margin-top: 30px; } .testimonial-block-two .inner-box h3 { position: relative; color: #ffffff; font-size: 22px; line-height: 1.7em; margin-top: 30px; } .testimonial-block-two .inner-box .designation { position: relative; color: #87909f; font-size: 16px; line-height: 1.4em; margin-top: 5px; } /*** ==================================================================== Newsletter Section ==================================================================== ***/ .newsletter-section { position: relative; padding: 100px 0; z-index: 1; } .subscribe-form { position: relative; background-color: #252525; box-shadow: 0 0 50px rgba(0, 0, 0, 0.50); padding: 80px 70px; overflow: hidden; } .subscribe-form:before { position: absolute; right: 50%; top: 0; height: 100%; width: 100%; transform: rotate(-30deg); background-color: #ffffff; opacity: .02; content: ""; } .subscribe-form .envelope-image { position: absolute; right: 5%; top: 0; width: 30%; height: 100%; opacity: .70; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../images/icons/envelope-icon.png); } .subscribe-form .form-inner { position: relative; max-width: 60%; width: 100%; } /*Subscribe Form*/ .subscribe-form .upper-box { position: relative; margin-bottom: 30px; padding-left: 30px; border-left: 5px solid #ffbc00; } .subscribe-form .upper-box h4 { position: relative; display: block; font-size: 42px; line-height: 1.2em; color: #ffffff; font-weight: 700; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .10); margin-bottom: 15px; } .subscribe-form .upper-box h4 span { color: #ffbc00; } .subscribe-form .upper-box .text { display: block; font-size: 16px; line-height: 1.8em; color: #999999; } .subscribe-form .form-group { position: relative; display: block; margin: 0px; width: 100%; padding-right: 70px; z-index: 2; } .subscribe-form .form-group input[type="text"], .subscribe-form .form-group input[type="tel"], .subscribe-form .form-group input[type="email"], .subscribe-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 30px; height: 60px; font-size: 15px; color: #ffffff; background: #3b3b3b; padding: 14px 30px; border: 1px solid transparent; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .subscribe-form .form-group input[type="submit"], .subscribe-form .form-group button { position: absolute; right: 0px; top: 0px; height: 60px; min-width: 60px; text-align: center; line-height: 30px; font-size: 18px; line-height: 60px; background-color: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); color: #ffffff; } .subscribe-form .form-group input[type="submit"]:hover, .subscribe-form .form-group button:hover { background-color: #ffffff; color: #222222; border-radius: 50%; } .subscribe-form .form-group input:focus, .subscribe-form .form-group select:focus, .subscribe-form .form-group textarea:focus { border-color: #ffbc00; } /*** ==================================================================== News Section ==================================================================== ***/ .news-section { position: relative; padding: 120px 0 90px; } .news-section.alternate { padding: 120px 0; } .news-block { position: relative; margin-bottom: 50px; } .news-block .inner-box { position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .news-block .inner-box .image { position: relative; display: block; background: #222222; overflow: hidden; } .news-block .inner-box .image img { position: relative; width: 100%; display: block; -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; } .news-block .inner-box:hover .image a img { opacity: 0.7; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .news-block .lower-content { position: relative; padding: 30px 25px 25px; background-color: #252525; border-bottom: 4px solid #ffbc00; border-radius: 0 0 15px 15px; z-index: 1; } .news-block .post-info { position: relative; margin-bottom: 10px; } .news-block .post-info li { position: relative; display: inline-block; margin-right: 3px; margin-bottom: 5px; font-size: 12px; line-height: 30px; padding: 0 10px; background-color: #111111; box-shadow: 0 0 5px rgba(0, 0, 0, 0.30); color: #ffffff; } .news-block .lower-content h3 { position: relative; font-weight: 500; font-size: 24px; color: #ffffff; line-height: 1.4em; margin-bottom: 10px; } .news-block .lower-content h3 a { position: relative; color: #ffffff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .news-block .lower-content h3 a:hover { color: #ffbc00; } .news-block .lower-content .text { font-size: 14px; line-height: 24px; margin-bottom: 20px; } .news-block .lower-content .theme-btn { padding: 10px 20px; line-height: 20px; font-size: 14px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } /*** ==================================================================== Blog Single ==================================================================== ***/ .blog-single, .blog-sidebar { position: relative; padding-right: 50px; } .blog-single .news-block h3 { margin-bottom: 20px; } .blog-single .news-block p { position: relative; margin-bottom: 20px; } .blog-single .two-column { position: relative; margin-top: 40px; margin-bottom: 10px; } .blog-single blockquote { position: relative; border-left: 3px solid #ffbc00; padding: 20px 40px 20px; font-size: 18px; line-height: 26px; color: #ffffff; max-width: 95%; background-color: rgba(255, 255, 255, .10); margin: 40px auto 40px; font-family: "Rajdhani", sans-serif; box-shadow: 0 0 20px rgba(0, 0, 0, 0.20); border-radius: 5px 0 0 5px; } .blog-single blockquote cite { display: block; font-style: normal; margin-top: 5px; color: #ffffff; font-size: 14px; } .blog-single blockquote cite span { font-weight: 500; font-size: 18px; color: #ffbc00; font-style: normal; } /*post share options*/ .blog-single .post-share-options { position: relative; margin-bottom: 40px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.40); padding: 20px 20px; background-color: #252525; } .blog-single .post-share-options p { position: relative; color: #ffffff; font-size: 16px; line-height: 25px; font-weight: 600; margin: 0; display: inline-block; font-family: "Rajdhani", sans-serif; } .blog-single .post-share-options .tags { position: relative; display: inline-block; } .blog-single .post-share-options .tags li { position: relative; display: inline-block; } .blog-single .post-share-options .tags a { position: relative; display: block; font-size: 14px; font-weight: 400; line-height: 22px; padding: 5px 10px; color: #ffffff; border-radius: 3px; background-color: rgba(0, 0, 0, 0.30); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .blog-single .post-share-options .tags a:hover { color: #000000; background-color: #ffffff; } .blog-single .post-share-options .social-icon-two { position: relative; display: inline-block; } /*Author Box*/ .author-box { position: relative; padding: 38px 40px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.10); margin-bottom: 70px; } .author-box .inner-box { position: relative; padding-left: 160px; min-height: 150px; padding-top: 15px; } .author-box .thumb { position: absolute; left: 0px; top: 0px; height: 145px; width: 135px; margin-bottom: 20px; } .author-box .thumb img { display: block; width: 100%; height: auto; } .author-box .name { position: relative; font-size: 18px; line-height: 25px; color: #222222; font-weight: 600; margin-bottom: 10px; } .author-box .text { position: relative; float: right; width: 100%; font-size: 14px; line-height: 24px; color: #999999; font-weight: 400; margin-bottom: 10px; } .author-box .social-icon { position: relative; z-index: 9; } .author-box .social-icon li { position: relative; display: inline-block; margin-right: 12px; } .author-box .social-icon li a { position: relative; display: block; text-align: center; font-size: 14px; font-weight: 400; color: #222222; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .author-box .social-icon li a:hover { color: #ffbc00; } /*** ==================================================================== Error Section ==================================================================== ***/ .error-section { position: relative; text-align: center; padding: 200px 0px 150px; } .error-section .sec-title { margin-bottom: 20px; } .error-section .sec-title .float-text { top: 0px; } .error-section .sec-title h1 { position: relative; display: inline-block; font-size: 200px; line-height: 1em; color: #ffbc00; font-weight: 700; letter-spacing: 0; transition: all 800ms ease; } .error-section .sec-title h1 span { color: #ffffff; } .error-section h3 { font-size: 60px; line-height: 1.2em; padding: 0; margin: 0; font-weight: 700; color: #ffffff; margin-bottom: 50px; } .error-section .text { font-size: 24px; line-height: 1.2em; color: #222222; margin-bottom: 35px; } .error-section .theme-btn { border-radius: 5px; font-size: 16px; font-weight: 700; text-transform: uppercase; margin: 0 3px; } /*** ==================================================================== Styled Pagination ==================================================================== ***/ .styled-pagination { position: relative; display: block; width: 100%; margin-top: 50px; } .styled-pagination li { position: relative; display: inline-block; margin: 0 10px; } .styled-pagination li a { position: relative; display: block; font-size: 16px; line-height: 40px; width: 40px; color: #ffffff; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.40); background-color: #252525; border-radius: 15px; border-bottom: 2px solid #ffbc00; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .styled-pagination li a:hover, .styled-pagination li.active a { color: #ffbc00; } /*** ==================================================================== Clients Section ==================================================================== ***/ .clients-section { position: relative; padding: 40px 0px; background: #252525; box-shadow: 0 0 50px rgba(0, 0, 0, 0.50); } .clients-section .slide-item { text-align: center; } .clients-section .slide-item a { position: relative; display: block; } .clients-section .slide-item img { position: relative; display: inline-block; max-width: 100%; width: auto; opacity: 0.5; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .clients-section .slide-item a:hover img { opacity: 1; } /*** ================================================================== Main Footer ================================================================== ***/ .main-footer { position: relative; } .main-footer .widgets-section { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 150px 0 70px; } .main-footer .footer-column { position: relative; margin-bottom: 40px; } .main-footer .footer-widget { position: relative; } .main-footer .footer-column .widget-title { position: relative; font-size: 24px; font-weight: 500; color: #ffffff; line-height: 30px; padding-bottom: 10px; margin-bottom: 30px; } .main-footer .footer-column .widget-title:before { position: absolute; left: 0; bottom: 0; height: 1px; width: 40px; background-color: #ffbc00; content: ''; } .main-footer .about-widget { position: relative; } .main-footer .logo { position: relative; margin-bottom: 25px; } .main-footer .footer-logo figure { margin: 0; } .main-footer .footer-logo img { display: block; max-width: 100%; } .main-footer .about-widget .text { position: relative; margin-bottom: 30px; } .main-footer .about-widget .text p { font-size: 14px; line-height: 24px; color: #aaaaaa; font-weight: 400; margin-bottom: 30px; } .social-icon-two { position: relative; display: block; } .social-icon-two li { position: relative; display: inline-block; margin-right: 10px; } .social-icon-two li a { position: relative; display: block; font-size: 12px; line-height: 30px; width: 30px; color: #ffffff; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.40); background-color: #252525; border-radius: 15px; border-bottom: 2px solid #ffbc00; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .social-icon-two li a:hover { color: #ffbc00; border-color: #ffffff; } /*Recent Posts*/ .recent-posts { position: relative; padding-left: 40px; } .recent-posts .post { position: relative; min-height: 90px; margin-bottom: 30px; } .recent-posts .post:last-child { margin-bottom: 0; } .recent-posts .post .thumb { position: absolute; left: 0; top: 0; height: 90px; width: 90px; overflow: hidden; } .recent-posts .post .thumb a { display: block; } .recent-posts .post .thumb img { display: block; width: 100%; height: auto; } .recent-posts .post h4 { position: relative; font-size: 18px; color: #ffffff; line-height: 30px; font-weight: 500; margin-bottom: 5px; } .recent-posts .post h4 a { color: #ffffff; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .recent-posts .post h4 a:hover { color: #ffbc00; } .recent-posts .post .date { position: relative; display: block; font-size: 14px; line-height: 30px; color: #bbbbbb; } .recent-posts .post .date span { color: #ffbc00; margin-right: 4px; opacity: .70; } /*=== User LInks ===*/ .useful-links { position: relative; padding-left: 50px; } .user-links li { position: relative; display: block; margin-bottom: 5px; } .user-links li a { position: relative; display: block; font-size: 14px; line-height: 30px; color: #ffffff; font-weight: 400; padding: 0 15px; border-left: 1px solid #ffbc00; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .user-links li a:hover { color: #ffbc00; } .main-footer .contact-list { position: relative; } .main-footer .contact-list li { position: relative; padding: 10px 30px; padding-left: 55px; margin-bottom: 10px; background-color: #252525; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .main-footer .contact-list li:last-child { margin-bottom: 0; } .main-footer .contact-list li .icon { position: absolute; left: 15px; top: 10px; font-size: 23px; line-height: 25px; color: #ffffff; } .main-footer .contact-list li .text { display: block; font-size: 14px; line-height: 24px; color: #ffffff; font-weight: 400; } .main-footer .contact-list li .text a { color: #ffffff; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-footer .contact-list li .text a:hover { color: #ffbc00; } /*=== Footer Bottom ===*/ .main-footer .footer-bottom { position: relative; width: 100%; background-color: #252525; } .main-footer .footer-bottom .inner-container { position: relative; } .main-footer .footer-bottom .copyright-text { position: relative; float: left; padding: 20px 0; } .main-footer .footer-bottom .copyright-text p { position: relative; line-height: 20px; font-size: 16px; color: #ffffff; font-weight: 400; } .main-footer .footer-bottom .copyright-text a { color: #ffffff; font-weight: 600; font-family: "Rajdhani", sans-serif; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-footer .footer-bottom .copyright-text a:hover { color: #ffffff; } .main-footer .footer-bottom .footer-nav { position: relative; float: right; } .main-footer .footer-bottom .footer-nav ul { position: relative; padding: 15px 0; } .main-footer .footer-bottom .footer-nav ul li { position: relative; float: left; margin-left: 10px; font-family: "Oswald", sans-serif; } .main-footer .footer-bottom .footer-nav ul li a { position: relative; display: block; font-size: 14px; line-height: 20px; color: #ffffff; font-weight: 400; padding: 5px 10px; text-transform: uppercase; background-color: #333333; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-footer .footer-bottom .footer-nav ul li a:hover { color: #ffbc00; box-shadow: 0 0 10px rgba(0, 0, 0, 0.20); } /*** ================================================================== Sidebar Page Container ================================================================== ***/ .sidebar-page-container { position: relative; overflow: hidden; padding: 120px 0 70px; } .sidebar-page-container .sidebar-side, .sidebar-page-container .content-side { position: relative; margin-bottom: 50px; } .sidebar-side .sidebar { position: relative; } .sidebar-side .sidebar.pd-left { padding-left: 30px; } .sidebar-widget { position: relative; margin-bottom: 50px; border-radius: 0 0 5px 5px; overflow: hidden; background-color: #252525; border-bottom: 2px solid #ffbc00; padding: 40px 30px 40px; } .sidebar-side .sidebar-widget:last-child { margin-bottom: 0; } .sidebar-page-container .sidebar-title { position: relative; margin-bottom: 25px; } .sidebar-page-container .sidebar-title h2 { position: relative; display: inline-block; font-size: 26px; line-height: 1.2em; color: #ffffff; font-weight: 600; text-transform: capitalize; letter-spacing: 0.02em; } /*Search Box Widget*/ .sidebar .search-box { position: relative; padding: 0; } .sidebar .search-box .form-group { position: relative; margin: 0px; } .sidebar .search-box .form-group input[type="text"], .sidebar .search-box .form-group input[type="search"] { position: relative; display: block; font-size: 18px; color: #ffffff; line-height: 20px; padding: 24px 30px; height: 70px; width: 100%; background-color: #252525; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .sidebar .search-box .form-group input:focus { border-color: #ffbc00; } .sidebar .search-box .form-group input[type="submit"], .sidebar .search-box .form-group button { position: absolute; right: 10px; top: 10px; width: 50px; height: 50px; line-height: 50px; text-align: center; display: block; font-size: 18px; background-color: transparent; color: #ffffff; font-weight: normal; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidebar .search-box .form-group input[type="submit"]:hover, .sidebar .search-box .form-group button:hover { color: #777777; } /*=== Categories ===*/ .sidebar .blog-categories { position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); background-color: #252525; } .cat-list { position: relative; } .cat-list li { position: relative; margin-bottom: 5px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .cat-list li a { position: relative; font-size: 16px; color: #ffffff; line-height: 30px; font-weight: 400; padding: 10px 20px; display: block; background-color: rgba(0, 0, 0, 0.20); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .cat-list li a span { float: right; font-size: 13px; line-height: 30px; color: #ffffff; opacity: .90; } .cat-list li:hover a, .cat-list li.active a { background-color: rgba(255, 255, 255, .10); box-shadow: 0 0 10px rgba(0, 0, 0, 0.30); } /*=== Latest News ===*/ .sidebar .latest-news { position: relative; padding: 30px 30px 35px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } .latest-news .post { position: relative; padding-left: 105px; margin-bottom: 30px; min-height: 85px; padding-top: 5px; } .latest-news .post:last-child { margin-bottom: 0; } .latest-news .post-thumb { position: absolute; left: 0; top: 0; height: 85px; width: 85px; margin-bottom: 20px; } .latest-news .post-thumb a:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: .80; content: ""; background-color: #ffbc00; z-index: 1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); 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; } .latest-news .post:hover .post-thumb a:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .latest-news .post-thumb a:after { position: absolute; height: 20px; width: 20px; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; text-align: center; line-height: 20px; font-size: 18px; z-index: 9; color: #ffffff; font-weight: 900; content: "\f002"; font-family: "Font Awesome 5 Free"; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); 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; } .latest-news .post:hover .post-thumb a:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .latest-news .post-thumb img { position: relative; display: block; width: 100%; } .latest-news .post h3 { position: relative; font-size: 16px; line-height: 24px; color: #ffffff; font-weight: 500; margin-bottom: 7px; } .latest-news .post h3 a { color: #ffffff; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .latest-news .post:hover h3 a { color: #ffbc00; } .latest-news .post .post-info { position: relative; font-size: 12px; line-height: 24px; color: #ffbc00; font-weight: 400; font-style: italic; } /* Instagram Widget */ .instagram-widget { position: relative; padding: 30px 30px 35px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } .instagram-widget .link-box { position: absolute; right: 30px; top: 32px; } .instagram-widget .link-box a { display: inline-block; height: 30px; width: 30px; border-radius: 50%; background-color: #252525; color: #ffffff; font-size: 18px; text-align: center; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .instagram-widget .link-box a:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); background-color: #ffffff; color: #252525; } .instagram-widget .outer { position: relative; margin: 0px -4px 0; } .instagram-widget .outer .image { position: relative; float: left; width: 25%; padding: 0px 4px; margin-bottom: 8px; } .instagram-widget .image img { display: block; width: 100%; } .instagram-widget .image a { position: relative; display: block; } .instagram-widget .image a:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #252525; padding: 5px; opacity: .70; content: ""; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); 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; } .instagram-widget .image a:hover:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .instagram-widget .image a:after { position: absolute; height: 20px; width: 20px; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; text-align: center; line-height: 20px; font-size: 18px; color: #ffffff; font-weight: 900; content: "\f002"; font-family: "Font Awesome 5 Free"; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); 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; } .instagram-widget .image a:hover:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /*=== Tags ===*/ .sidebar .tags { padding: 30px 30px 30px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } .tag-list { position: relative; display: block; } .tag-list li { position: relative; float: left; margin-bottom: 10px; margin-right: 5px; } .tag-list li a { position: relative; display: block; font-size: 12px; color: #ffffff; line-height: 25px; padding: 5px 18px; font-weight: 400; text-align: center; background-color: #252525; box-shadow: 0 0 10px rgba(0, 0, 0, 0.30); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .tag-list li a:hover { box-shadow: 0 0 0px rgba(0, 0, 0, 0.30); background-color: #ffffff; color: #000000; } /*Services Sidebar*/ .sidebar-side .services-sidebar { position: relative; padding-right: 50px; } /*Blog Category*/ .blog-cat { position: relative; border: 1px dashed #cccccc; } .blog-cat li { position: relative; } .blog-cat li a { position: relative; font-size: 18px; font-weight: 600; line-height: 34px; color: #222222; display: block; border-bottom: 1px dashed #cccccc; border-left: 5px solid transparent; padding: 25px 40px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; font-family: 'Rubik', sans-serif; } .blog-cat li:last-child a { border-bottom: 0; } .blog-cat li a:before { position: absolute; content: '\f105'; right: 33px; top: 27.5px; color: #ffbc00; font-size: 18px; line-height: 30px; font-family: 'FontAwesome'; } .blog-cat li.active a, .blog-cat li a:hover { color: #ffffff; background-color: #ffbc00; border-left: 5px solid #222222; } .blog-cat li.active a:before, .blog-cat li a:hover:before { color: #ffffff; } /*** ==================================================================== Comment Area ==================================================================== ***/ .group-title { position: relative; margin-bottom: 40px; } .group-title h3 { position: relative; display: block; font-size: 32px; line-height: 1.2em; color: #ffffff; font-weight: 600; } .comments-area { position: relative; margin-bottom: 70px; } .comments-area .comment-box { position: relative; margin-bottom: 30px; } .comments-area .comment-box.reply-comment { margin-left: 70px; } .comments-area .comment-box:last-child { margin-bottom: 0; } .comments-area .comment { position: relative; min-height: 110px; padding: 30px 30px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); background-color: #252525; padding-left: 130px; } .comments-area .comment-box .author-thumb { position: absolute; left: 30px; top: 30px; height: 80px; width: 80px; margin-bottom: 10px; } .comments-area .comment-box .author-thumb img { width: 100%; display: block; } .comments-area .comment-info { position: relative; display: block; margin-bottom: 5px; } .comments-area .comment-box .name { position: relative; display: inline-block; font-size: 18px; line-height: 1em; font-weight: 600; color: #ffffff; margin-right: 10px; } .comments-area .comment-box .date { position: relative; display: inline-block; font-size: 14px; line-height: 24px; color: #ffbc00; font-weight: 400; } .comments-area .comment-box .rating { font-size: 10px; line-height: 1em; color: orange; margin-bottom: 10px; } .comments-area .comment-box .text { font-size: 15px; line-height: 25px; color: #999999; font-weight: 400; } .comments-area .comment-box .reply-btn { position: absolute; right: 30px; top: 28px; font-size: 14px; line-height: 15px; color: #ffffff; font-weight: 400; background-color: #444444; padding: 5px 10px; text-transform: uppercase; font-family: "Rajdhani", sans-serif; box-shadow: 0 0 10px rgba(0, 0, 0, 0.40); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .comments-area .comment-box .reply-btn:hover { color: #ffbc00; background-color: transparent; } /*** ==================================================================== Comment Form ==================================================================== ***/ .comment-form { position: relative; } .comment-form .form-group { position: relative; margin-bottom: 30px; } .comment-form .form-group:last-child { margin-bottom: 0; } .comment-form .form-group input[type="text"], .comment-form .form-group input[type="email"], .comment-form .form-group textarea, .comment-form .form-group select { position: relative; display: block; height: 50px; width: 100%; font-size: 16px; color: #999999; line-height: 20px; font-weight: 400; padding: 14px 22px; background-color: #252525; border: 1px solid transparent; box-shadow: 0 0 20px rgba(0, 0, 0, 0.45); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .comment-form .form-group input:focus, .comment-form .form-group select:focus, .comment-form .form-group textarea:focus { border-color: #ffbc00; } .comment-form .form-group textarea { height: 150px; resize: none; padding-top: 20px; } .comment-form .form-group input[type="submit"], .comment-form .form-group button { padding: 15px 35px; font-size: 16px; font-weight: 600; } /*** ================================================================== Our Shop ================================================================== ***/ .our-shop { position: relative; } .shop-item { position: relative; margin-bottom: 80px; } .shop-item .inner-box { position: relative; overflow: hidden; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .shop-item .image-box { position: relative; overflow: hidden; } .shop-item .image-box .image { position: relative; margin-bottom: 0; } .shop-item .image-box .image img { display: block; width: 100%; height: auto; } .shop-item .overlay-box { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; visibility: hidden; -webkit-transform: scale(1.50); -moz-transform: scale(1.50); -ms-transform: scale(1.50); -o-transform: scale(1.50); transform: scale(1.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; } .shop-item .inner-box:hover .overlay-box { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .shop-item .overlay-box .tag { position: absolute; left: 20px; top: 20px; padding: 0px 15px; border-radius: 3px; background-color: #252525; font-size: 12px; line-height: 25px; color: #ffffff; border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); } .shop-item .overlay-box .btn-box { position: absolute; text-align: center; bottom: 20px; width: 100%; } .shop-item .overlay-box .btn-box a { position: relative; display: inline-block; font-size: 14px; color: #222222; line-height: 40px; height: 40px; width: 40px; border-radius: 50%; text-align: center; background-color: #ffffff; margin: 0 2px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.30); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shop-item .overlay-box .btn-box a:hover { background-color: #ffbc00; color: #ffffff; } .shop-item .lower-content { position: relative; text-align: center; padding-top: 15px; padding-bottom: 15px; } .shop-item .lower-content .name { position: relative; display: block; font-size: 20px; line-height: 30px; color: #ffffff; font-weight: 600; font-family: "Rajdhani", sans-serif; margin-bottom: 5px; } .shop-item .lower-content .name a { display: inline-block; color: #ffffff; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shop-item .lower-content .name a:hover { color: #ffbc00; } .shop-item .lower-content .price { position: relative; display: block; font-size: 16px; line-height: 20px; color: #ffbc00; font-weight: 700; } .shop-item .lower-content .price del { color: #dddddd; } .our-shop .styled-pagination { position: relative; margin-top: 0; } .shop-sidebar { position: relative; padding-right: 30px; } /*Sidebar Realated Posts */ .sidebar .related-posts { position: relative; padding: 30px 30px 40px; } .sidebar .related-posts .post { position: relative; padding: 0px 0px; padding-left: 90px; margin-bottom: 20px; } .sidebar .related-posts .post:last-child { margin-bottom: 0px; border: 0px; min-height: inherit; } .sidebar .related-posts .post .post-thumb { position: absolute; left: 0px; top: 0px; width: 70px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .sidebar .related-posts .post .post-thumb img { display: block; width: 100%; } .sidebar .related-posts .post h4 { position: relative; padding-top: 4px; font-size: 16px; font-weight: 700; color: #ffffff; line-height: 1.2em; text-transform: capitalize; font-family: 'Rajdhani', sans-serif; margin-bottom: 4px; } .sidebar .related-posts .post h4 a { color: #ffffff; transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; } .sidebar .related-posts .post a, .sidebar .related-posts .post a:hover { color: #ffbc00; } .sidebar .related-posts .post .price { font-size: 14px; letter-spacing: 1px; font-weight: 400; color: #999999; line-height: 20px; } .sidebar .related-posts .post .rating { line-height: 1em; } .sidebar .related-posts .post .rating .fa { position: relative; display: inline-block; font-size: 10px; line-height: 20px; color: orange; } /*Sidebar Range slider */ .price-filters { position: relative; padding: 30px 30px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } .price-filters .sidebar-title { margin-bottom: 30px; } .range-slider-one { position: relative; min-height: 48px; padding-top: 10px; margin-top: -20px; } .range-slider-one .title { position: relative; float: left; color: #ffffff; font-size: 16px; font-weight: 400; margin-top: 8px; } .range-slider-one .title:before { position: absolute; content: '$'; right: -14px; top: 0px; color: #ffffff; font-size: 16px; font-weight: 300; } .range-slider-one .input { float: right; left: 8px; max-width: 75px; padding-left: 8px; margin-top: 8px; position: relative; } .range-slider-one .input input { background: none; color: #ffffff; font-size: 16px; font-weight: 300; width: auto; text-align: left; } .range-slider-one .ui-widget.ui-widget-content { height: 3px; border: none; margin-bottom: 25px; background: #ffffff; } .range-slider-one .ui-slider .ui-slider-range { top: 0px; height: 3px; background: #666666; } .range-slider-one .ui-state-default, .range-slider-one .ui-widget-content .ui-state-default { top: -3px; width: 10px; height: 10px; background: #ffbc00; cursor: pointer; border-radius: 50%; border-color: #ffbc00; } .range-slider-one .theme-btn { padding: 8px 25px; border-radius: 0px; } /*** ==================================================================== Product Details ==================================================================== ***/ .product-details { position: relative; } .product-details .basic-details { position: relative; margin-bottom: 50px; } .product-details .image-column, .product-details .info-column { margin-bottom: 20px; } .product-details .image-column .image-box { margin-bottom: 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .product-details .image-column .image-box img { position: relative; display: block; width: 100%; background-color: #f7f7f7; } .product-details .basic-details .details-header { position: relative; margin-bottom: 16px; } .product-details .basic-details .details-header h4 { font-size: 28px; font-weight: 700; line-height: 1.2em; color: #ffffff; margin: 5px 0px 5px; } .product-details .basic-details .details-header h4 a { color: #333333; } .product-details .basic-details .details-header .rating { font-size: 12px; color: #ffbc00; margin-bottom: 15px; display: inline-block; } .product-details .basic-details .details-header .reviews { position: relative; display: inline-block; color: #999999; font-weight: 400; margin-left: 15px; } .product-details .basic-details .details-header .rating .fa { display: inline-block; } .product-details .basic-details .details-header .rating .txt { font-size: 14px; padding-left: 10px; color: #999999; } .product-details .basic-details .details-header .item-price { font-size: 20px; font-weight: 600; color: #ffffff; line-height: 24px; } .product-details .basic-details .details-header .item-price del { color: #999999; margin-left: 10px; font-weight: 400; } .product-details .basic-details .prod-info { margin-bottom: 15px; line-height: 1.6em; font-size: 13px; } .product-details .basic-details .prod-info strong { font-weight: 700; color: #111111; } .product-details .basic-details .text { margin-bottom: 25px; color: #999999; font-size: 16px; font-weight: 400; line-height: 1.8em; } .product-details .basic-details .item-quantity .field-label { float: left; font-weight: 700; font-size: 14px; line-height: 32px; display: inline-block; padding-right: 20px; } .product-details .basic-details .quantity-spinner, .cart-section input.quantity-spinner { line-height: 24px; padding: 10px 15px !important; height: 46px !important; box-shadow: none !important; background-color: #252525; border-color: #252525 !important; color: #ffffff !important; } .cart-section .bootstrap-touchspin .input-group-btn-vertical { position: absolute; right: 20px; top: 0; z-index: 99; } .product-details .basic-details .bootstrap-touchspin .input-group-btn-vertical>.btn, .cart-section .bootstrap-touchspin .input-group-btn-vertical>.btn { padding: 11px 10px; background: #555555 !important; color: #ffffff; } .product-details .bootstrap-touchspin .input-group-btn-vertical i, .cart-section .bootstrap-touchspin .input-group-btn-vertical i { top: 0px; font-weight: 900; } .product-details .basic-details .item-quantity { position: relative; float: left; width: 85px; margin-bottom: 25px; margin-right: 25px; } .product-details .basic-details .item-quantity .field-label { float: left; font-weight: 700; font-size: 14px; line-height: 32px; display: inline-block; padding-right: 20px; } .product-details .basic-details .quantity-spinner, .cart-table input.quantity-spinner { font-size: 18px; line-height: 24px; padding: 10px 15px !important; height: 50px !important; box-shadow: none !important; } .product-details .basic-details .bootstrap-touchspin .input-group-btn-vertical>.btn, .cart-table .bootstrap-touchspin .input-group-btn-vertical>.btn { padding: 12px 10px; background: #f4f5f6; border-radius: 0px; } .product-details .bootstrap-touchspin .input-group-btn-vertical i, .cart-table .bootstrap-touchspin .input-group-btn-vertical i { top: 8px; } .product-details .basic-details .add-to-cart { margin-left: 10px; border-radius: 0; } /*** ==================================================================== Product Tabs ==================================================================== ***/ .shop-single .product-details .prod-tabs { position: relative; } .shop-single .product-details .prod-tabs .tab-btns { position: relative; z-index: 1; margin-bottom: 50px; } .shop-single .product-details .prod-tabs .tab-btns .tab-btn { position: relative; top: 1px; display: block; float: left; margin-right: 10px; font-size: 14px; background: rgba(255, 255, 255, .90); color: #222222; font-weight: 600; line-height: 20px; cursor: pointer; border-radius: 0px; padding: 10px 30px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; border: 1px solid #222222; } .shop-single .product-details .prod-tabs .tab-btns .tab-btn:hover, .shop-single .product-details .prod-tabs .tab-btns .tab-btn.active-btn { box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); background-color: #222222; color: #ffffff; } .shop-single .product-details .prod-tabs .tabs-content { position: relative; } .shop-single .product-details .prod-tabs .tabs-content .tab { position: relative; display: none; border-top: 0px; } .shop-single .product-details .prod-tabs .tabs-content .tab.active-tab { display: block; } .shop-single .product-details .prod-tabs .tabs-content .tab .content { position: relative; padding: 30px 30px; background-color: #252525; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .shop-single .product-details .prod-tabs .tabs-content .tab .content p { position: relative; font-size: 16px; line-height: 1.7em; margin-bottom: 25px; color: #999999; } .shop-single .product-details .prod-tabs .tabs-content .tab .content p:last-child { margin-bottom: 0px; } .prod-tabs .tabs-content .tab .title { position: relative; color: #ffffff; font-size: 28px; font-weight: 600; margin-bottom: 30px; font-family: 'Rajdhani', sans-serif; } /*Comment Form*/ .shop-comment-form { position: relative; margin-top: 50px; } .shop-comment-form h2 { position: relative; color: #ffffff; font-size: 28px; font-weight: 500; margin-bottom: 10px; } .shop-comment-form .mail-text { position: relative; color: #ffffff; font-size: 16px; margin-bottom: 15px; } .shop-comment-form .group-title { margin-bottom: 20px; } .shop-comment-form .rating-box { position: relative; margin-bottom: 20px; } .shop-comment-form .rating-box .text { position: relative; float: left; margin-right: 30px; font-size: 16px; color: #ffffff; margin-bottom: 15px; } .shop-comment-form .rating-box .rating { position: relative; margin-right: 10px; display: inline-block; } .shop-comment-form .rating-box .rating .fa { position: relative; margin-right: 5px; display: inline-block; } .shop-comment-form .rating-box .rating a { position: relative; color: #cccccc; font-size: 12px; display: inline-block; } .shop-comment-form .rating-box .rating a:hover { color: orange; } .shop-comment-form .form-group { position: relative; margin-bottom: 20px; } .shop-comment-form .form-group label { position: relative; color: #333333; font-size: 16px; font-weight: 400; } .shop-comment-form .form-group:last-child { margin-bottom: 0px; } .shop-comment-form .form-group input[type="text"], .shop-comment-form .form-group input[type="password"], .shop-comment-form .form-group input[type="tel"], .shop-comment-form .form-group input[type="email"], .shop-comment-form .form-group select { position: relative; display: block; width: 100%; line-height: 28px; padding: 10px 20px; height: 50px; color: #848484; font-weight: 300; background: #252525; border: 1px solid transparent; box-shadow: 0 0 20px rgba(0, 0, 0, 0.30); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .shop-comment-form .form-group input[type="text"]:focus, .shop-comment-form .form-group input[type="password"]:focus, .shop-comment-form .form-group input[type="tel"]:focus, .shop-comment-form .form-group input[type="email"]:focus, .shop-comment-form .form-group select:focus, .shop-comment-form .form-group textarea:focus { border-color: #ffbc00; } .shop-comment-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 26px; padding: 15px 20px; color: #848484; height: 120px; font-weight: 300; resize: none; background: #252525; border: 1px solid transparent; box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .shop-comment-form button { position: relative; font-weight: 600; font-size: 14px; line-height: 30px; padding: 10px 40px; margin-top: 10px; text-transform: uppercase; } .shop-comment-form input:focus, .shop-comment-form select:focus, .shop-comment-form textarea:focus { border-color: #f06529; } /*** ==================================================================== Cart Section ==================================================================== ***/ .cart-section { position: relative; padding: 100px 0px 60px; } .cart-outer { position: relative; } .checkout-page .cart-outer { margin-bottom: 40px; } .cart-outer .table-outer { position: relative; width: 100%; overflow-x: auto; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); margin-bottom: 50px; } .cart-outer .cart-table { width: 100%; min-width: 900px; } .cart-table .cart-header { position: relative; width: 100%; text-transform: uppercase; font-size: 13px; background: #252525; color: #ffffff; border: 1px solid #444444; } .cart-table thead tr th { line-height: 24px; padding: 15px 25px; font-weight: 700; font-size: 16px; letter-spacing: 1px; text-align: center; text-transform: uppercase; border-right: 1px solid #444444; } .cart-table thead tr th .fa { font-size: 18px; } .cart-table tbody tr td { line-height: 24px; padding: 30px 25px 30px; } .cart-table tbody tr .qty { width: 200px; } .cart-table tbody tr .qty .item-quantity { max-width: 100px; margin: 0 auto; } .cart-table tbody tr .qty .quantity-spinner { background: #252525; } .cart-table tbody tr .prod-column .column-box { position: relative; min-height: 110px; } .cart-table tbody tr .prod-column .column-box .prod-thumb { position: relative; width: 140px; margin: 0 auto; text-align: center; } .cart-table tbody tr .prod-column .column-box .prod-thumb img { display: inline-block; max-width: 100%; } .cart-table tbody tr .prod-column .column-box h4 { font-size: 14px; color: #aaaaaa; font-weight: 400; line-height: 90px; } .cart-table tbody tr .prod-column .author { font-size: 13px; color: #aaaaaa; margin-bottom: 0px; } .cart-table tbody tr .sub-total { font-weight: 500; color: #aaaaaa; font-size: 16px; } .cart-table tbody tr .sub-total.price { font-weight: 500; } .cart-table tbody tr .remove-btn { position: relative; font-size: 14px; color: #aaaaaa; line-height: 30px; font-weight: 500; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease; } .cart-table tbody tr .remove-btn .fa { position: relative; font-size: 18px; line-height: 30px; } .cart-table tbody tr .remove-btn:hover { color: #ffbc00; } .cart-table tbody tr { border-bottom: 1px solid #444444; } .cart-table tbody tr td { vertical-align: middle; color: #797979; font-size: 17px; text-align: center; font-weight: 500; border-left: 1px solid #444444; } .cart-table tbody tr td.total { font-size: 18px; color: #aaaaaa; } .cart-table tbody tr td:last-child { border-right: 1px solid #444444; text-align: center; } .cart-table tbody tr td .prod-title { position: relative; font-size: 18px; color: #aaaaaa; font-weight: 700; font-family: "Rajdhani", sans-serif; } .cart-table tbody tr td .quantity-spinner { padding: 5px 0px 5px 20px; line-height: 24px; height: 34px; display: block; width: 100%; position: relative; } .cart-table tbody .available-info { position: relative; padding-left: 50px; } .cart-table tbody .available-info .icon { position: absolute; left: 0px; top: 5px; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 18px; color: #ffffff; background: #223555; border-radius: 50%; } .cart-section .cart-options { position: relative; padding: 30px 30px 10px; border: 1px solid #444444; margin-bottom: 50px; } .cart-section .apply-coupon { position: relative; } .cart-section .cart-options .cart-btn { padding: 14px 36px; line-height: 20px; font-size: 14px; color: #ffffff; font-weight: 700; text-transform: capitalize; background-color: #222222; border: 1px solid transparent; font-family: 'Montserrat', sans-serif; margin-bottom: 10px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .cart-section .cart-options .cart-btn:hover { background-color: #ffffff; color: #222222; border: 1px solid #222222; } .cart-section .apply-coupon .form-group { position: relative; float: left; margin-right: 20px; } .cart-section .apply-coupon .form-group input[type="text"] { display: block; line-height: 28px; padding: 10px 25px; border: 1px solid #252525; width: 225px; height: 50px; color: #ffffff; background: #252525; box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); } .cart-section .coupon-btn { padding: 14px 25px; line-height: 24px; font-size: 14px; color: #ffffff; font-weight: 700; line-height: 20px; text-transform: capitalize; background-color: #222222; border: 1px solid transparent; font-family: 'Montserrat', sans-serif; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .cart-section .coupon-btn:hover { background-color: #ffffff; color: #222222; border: 1px solid #222222; } .cart-section .cart-options .btn-style-one { top: -7px; padding-left: 32px; padding-right: 32px; } .cart-section .totals-table { position: relative; margin-bottom: 20px; border: 1px solid #444444; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } .cart-section .totals-table li { line-height: 24px; padding: 18px 30px; border-bottom: 1px solid #444444; } .cart-section .totals-table li:first-child { background-color: #252525; padding: 18px 45px; } .cart-section .totals-table li h3 { position: relative; font-weight: 600; color: #ffffff; font-size: 18px; } .cart-section .totals-table li:last-child { border-bottom: none; padding: 40px 40px 50px; } .cart-section .totals-table .col { position: relative; display: block; float: left; line-height: 30px; width: 50%; color: #aaaaaa; font-size: 16px; font-weight: 600; text-transform: capitalize; } .cart-section .totals-table li .col:last-child { text-align: right; border-left: 1px solid #444444; } .cart-section .totals-table .total .price { color: #aaaaaa; font-weight: 600; } .cart-section .totals-table .proceed-btn { padding: 14px 25px; line-height: 24px; font-size: 14px; color: #ffffff; font-weight: 700; line-height: 20px; text-transform: capitalize; background-color: #222222; border: 1px solid transparent; font-family: 'Montserrat', sans-serif; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .cart-section .totals-table .proceed-btn:hover { background-color: #ffffff; color: #222222; border: 1px solid #222222; } .shipping-block { position: relative; } .shipping-block .inner-box { position: relative; padding: 40px 30px 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); border: 1px solid #444444; margin-bottom: 50px; } .shipping-block .inner-box h3 { position: relative; color: #ffffff; font-size: 28px; font-weight: 700; margin-bottom: 4px; text-transform: capitalize; } .shipping-block .inner-box h4 { position: relative; color: #ffffff; font-size: 14px; font-weight: 400; margin-bottom: 22px; text-transform: capitalize; } .shipping-form { position: relative; } .shipping-form .row { position: relative; margin: 0px -10px; } .shipping-form .form-group { position: relative; margin-bottom: 20px; padding: 0px 10px; } .shipping-form .form-group input[type="text"], .shipping-form .form-group input[type="password"], .shipping-form .form-group input[type="tel"], .shipping-form .form-group input[type="email"] { position: relative; display: block; width: 100%; line-height: 28px; padding: 10px 20px; height: 50px; font-size: 16px; color: #aaaaaa; border: 1px solid #252525; background-color: #252525; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shipping-form .form-group input[type="text"]:focus, .shipping-form .form-group input[type="password"]:focus, .shipping-form .form-group input[type="tel"]:focus, .shipping-form .form-group input[type="email"]:focus, .shipping-form .form-group select:focus, .shipping-form .form-group textarea:focus { border-color: #ffbc00; color: #ffffff; } .shipping-form button { padding: 14px 25px; line-height: 24px; font-size: 14px; color: #ffffff; font-weight: 700; line-height: 20px; text-transform: capitalize; background-color: #222222; border: 1px solid transparent; font-family: 'Montserrat', sans-serif; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shipping-form button:hover { background-color: #ffffff; color: #222222; border: 1px solid #222222; } .shipping-form button:hover { background-color: #ffffff; border: 1px solid #222222; color: #222222; } /*==================================================================== CheckOut Section ====================================================================*/ .checkout-page { position: relative; padding: 110px 0px 70px; } .checkout-page .default-links { position: relative; margin-bottom: 40px; } .checkout-page .default-links li { line-height: 20px; padding: 15px 25px; font-size: 14px; font-weight: 500; color: #ffffff; background-color: #252525; box-shadow: 0 0 20px rgba(0, 0, 0, .50); margin-bottom: 30px; } .checkout-page .default-links li .far { position: relative; display: inline-block; font-size: 14px; line-height: 20px; color: #ffbc00; margin-right: 20px; } .checkout-page .default-links li a { color: #ffbc00; font-size: 16px; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .checkout-page .default-links li a:hover { color: #ffbc00; text-decoration: underline; } .checkout-page .sec-title { margin-bottom: 20px; } .checkout-page .sec-title h3 { font-size: 28px; line-height: 1.2em; color: #ffffff; font-weight: 600; padding-bottom: 20px; border-bottom: 1px solid #444444; } .checkout-form { position: relative; margin-bottom: 50px; } .checkout-form .column { position: relative; margin-bottom: 40px; } .checkout-form .column .inner-column { position: relative; padding: 30px 30px; border: 1px solid #444444 } .checkout-form .form-group { position: relative; margin-bottom: 15px; } .checkout-form .form-group .field-label { display: block; line-height: 24px; text-transform: capitalize; color: #aaaaaa; font-size: 15px; font-weight: 500; margin-bottom: 10px; } .checkout-form .form-group .field-label span { position: relative; font-size: 16px; color: #aaaaaa; display: block; font-weight: 600; } .checkout-form .form-group .field-label sup { top: -1px; font-size: 15px; color: #009fe9; } .checkout-form .form-group .text { position: relative; color: #999999; font-size: 14px; line-height: 24px; } .checkout-form input[type="text"], .checkout-form input[type="email"], .checkout-form input[type="password"], .checkout-form input[type="tel"], .checkout-form input[type="number"], .checkout-form input[type="url"], .checkout-form select, .checkout-form textarea { position: relative; display: block; width: 100%; background: #252525; font-size: 16px; line-height: 20px; color: #aaaaaa; padding: 14px 22px; height: 50px; border: 1px solid #252525; transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; } .checkout-form select { cursor: pointer; -webkit-appearance: none; -ms-appearance: none; -o-appearance: none; -moz-appearance: none; color: #aaaaaa; background: #252525 url(../images/icons/icon-select.png) right center no-repeat; } .checkout-form textarea { resize: none; height: 160px !important; padding-left: 30px; } .checkout-form input:focus, .checkout-form select:focus, .checkout-form textarea:focus { border-color: #ffbc00; color: #aaaaaa; } .checkout-page .check-box { line-height: 24px; font-size: 14px; font-weight: normal; padding-top: 5px; } .checkout-page .check-box label { position: relative; top: -1px; font-weight: normal; padding: 0px; font-size: 16px; cursor: pointer; color: #333333; } .checkout-page .lower-content { margin-top: 30px; } .checkout-page .lower-content .order-column { margin-bottom: 40px; } .checkout-page .lower-content .column h2 { position: relative; color: #222222; font-size: 24px; margin-bottom: 30px; padding-bottom: 12px; } .checkout-page .lower-content .column h2:after { position: absolute; content: ''; left: 0px; bottom: 0px; width: 40px; height: 2px; background-color: #fa9928; } /*Coupon Box*/ .coupon-box { position: relative; padding: 25px 25px; margin-bottom: 25px; background-color: #f5f5f5; } .coupon-form { position: relative; } .coupon-form .form-group { position: relative; margin-bottom: 0px; } .coupon-form .form-group input[type="text"] { position: relative; display: block; width: 100%; line-height: 28px; padding: 10px 20px; height: 44px; font-size: 14px; border: 1px solid #cccccc; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .coupon-form .form-group input[type="text"]:focus { border-color: #ffbc00; } .coupon-form button { margin-top: 0px; font-size: 16px; font-weight: 700; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; padding: 8px 26px; text-transform: capitalize; } .order-box { position: relative; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); margin-bottom: 50px; } .order-box .sec-title { margin-bottom: 25px; } .order-box .sec-title h3 { border-bottom: 0; padding-bottom: 0; } .order-box .title-box { position: relative; padding: 15px 15px; font-weight: 500; color: #ffffff; background-color: #252525; } .order-box .title-box .col { position: relative; width: 50%; float: left; color: #ffffff; font-size: 16px; line-height: 25px; } .order-box ul { position: relative; border: 1px solid #444444; } .order-box ul li { position: relative; padding: 25px 30px; font-size: 16px; font-weight: 500; color: #999999; line-height: 30px; border-bottom: 1px solid #444444; } .order-box ul li strong { color: #aaaaaa; font-weight: 500; font-size: 16px; font-family: "Rajdhani", sans-serif; } .order-box ul li span { padding: 0 15px; width: 50%; float: right; color: #ffffff; font-size: 16px; } .order-box ul li span.free { color: #999999; } .order-box ul li:last-child { border-bottom: 0; } .payment-box { position: relative; padding: 30px 50px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); background-color: #252525; margin-bottom: 50px; } .payment-box .upper-box { position: relative; border-bottom: 1px solid #444444; } .payment-options { position: relative; margin-top: 20px; margin-bottom: 20px; } .payment-box .payment-options li { position: relative; margin-bottom: 15px; } .payment-box .payment-options li .radio-option { position: relative; } .payment-box .payment-options li .radio-option label { position: relative; display: block; padding-left: 30px; font-weight: 500; text-transform: capitalize; color: #ffffff; cursor: pointer; font-size: 16px; } .payment-box .payment-options li .radio-option label strong { font-weight: 400; } .payment-box .payment-options li .radio-option input[type="radio"] { position: absolute; left: 0px; top: 8px; } .payment-box .payment-options li .radio-option label .small-text { position: relative; display: none; letter-spacing: 0px; text-transform: none; font-weight: normal; font-size: 14px; color: #ffffff; line-height: 1.8em; padding: 25px 30px; margin-top: 20px; background-color: rgba(0, 0, 0, 0.30); } .payment-box .payment-options li .radio-option input:checked+label .small-text { display: block; } .payment-box .payment-options li .radio-option label .small-text:before { position: absolute; content: ''; left: 30px; top: -8px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 8px solid rgba(0, 0, 0, 0.30); } .payment-box .payment-options li .radio-option label img { position: relative; display: block; max-width: 100%; padding-left: 30px; margin-top: 20px; } .payment-box .payment-options li .radio-option .what-paypall { position: relative; display: block; color: #999999; font-size: 16px; font-weight: 700; margin-left: 120px; margin-top: 10px; } .payment-box .lower-box { position: relative; padding: 30px 0 0; text-align: right; } .payment-box .lower-box .theme-btn { padding: 15px 32px; margin-right: 0; font-weight: 700; font-size: 18px; } /*** ==================================================================== Login Section ==================================================================== ***/ .login-section { position: relative; padding: 120px 0px 60px; } .login-section .column { position: relative; margin-bottom: 70px; } .login-section h2 { position: relative; color: #ffffff; font-size: 28px; font-weight: 600; line-height: 1.2em; margin-bottom: 25px; background-color: #252525; } .login-form { position: relative; margin-bottom: 40px; padding: 30px 40px 25px; background-color: #252525; box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); max-width: 400px; margin: 0 auto; border-bottom: 5px solid #ffbc00; border-radius: 0 0 10px 10px; } .login-form .form-group { position: relative; margin-bottom: 20px; } .login-form .form-group label { position: relative; top: -1px; color: #999999; font-weight: 400; font-size: 16px; } .login-form .form-group input[type="text"], .login-form .form-group input[type="password"], .login-form .form-group input[type="tel"], .login-form .form-group input[type="email"] { position: relative; display: block; width: 100%; line-height: 28px; padding: 10px 20px; height: 50px; color: #aaaaaa; font-size: 14px; border: 1px solid #222222; box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.40); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .login-form .form-group input[type="text"]:focus, .login-form .form-group input[type="password"]:focus, .login-form .form-group input[type="tel"]:focus, .login-form .form-group input[type="email"]:focus, .login-form .form-group select:focus, .login-form .form-group textarea:focus { border-color: #ffbc00; color: #ffffff; } .login-form button { top: 0px; margin-top: 0px; font-size: 16px; font-weight: 700; padding: 10px 36px; line-height: 25px; color: #ffffff; text-transform: uppercase; width: 100%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .login-form .psw { position: relative; color: #999999; font-size: 16px; transition: all 300ms ease; } .login-form .psw:hover { text-decoration: underline; color: #ffffff; } /*** ==================================================================== Coming Soon ==================================================================== ***/ .coming-soon { position: fixed; width: 100%; height: 100%; display: block; overflow-y: auto; background-repeat: no-repeat; background-position: center right; background-size: cover; text-align: center; background-color: #252525; } .coming-soon .content:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/bg-texture-01.jpg); content: ""; opacity: .2; background-repeat: no-repeat; background-position: center; background-size: cover; filter: grayscale(1); transform: scaleX(-1); } .coming-soon .content { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: table; vertical-align: middle; } .coming-soon .content .content-inner { position: relative; padding: 90px 15px; display: table-cell; vertical-align: middle; } .coming-soon .content .content-inner .logo { position: relative; margin-bottom: 240px; } .coming-soon .content .content-inner .sec-title { display: none; margin-bottom: 50px; } .coming-soon .content .content-inner h2 { position: relative; font-size: 48px; font-weight: 700; line-height: 1.2em; padding-bottom: 0; color: #ffffff; font-variant: small-caps; } .coming-soon .content .content-inner h2:after { display: none; } .time-counter { position: relative; } .time-counter .time-countdown { position: relative; margin-bottom: 180px; } .time-counter .time-countdown .counter-column { position: relative; display: inline-block; width: 180px; height: 180px; font-size: 20px; line-height: 1em; color: #ffffff; text-transform: uppercase; font-weight: 700; text-align: center; z-index: 7; box-shadow: 0 0 30px rgba(0, 0, 0, 0.10); background-color: rgba(0, 0, 0, .20); font-family: "Rajdhani", sans-serif; margin: 0 15px 20px; } .time-counter .time-countdown .counter-column .count { position: relative; display: block; font-size: 72px; line-height: 30px; padding: 60px 0px 30px; color: #ffffff; font-weight: 700; } .coming-soon .emailed-form { position: relative; margin-bottom: 40px; } .coming-soon .emailed-form .text { position: relative; display: block; font-size: 30px; line-height: 1.3em; color: #ffffff; font-weight: 500; margin-bottom: 40px; font-family: "Rajdhani", sans-serif; } .coming-soon .emailed-form .form-group { position: relative; display: block; max-width: 440px; width: 100%; margin: 0 auto; } .coming-soon .emailed-form .form-group input[type="text"], .coming-soon .emailed-form .form-group input[type="tel"], .coming-soon .emailed-form .form-group input[type="email"], .coming-soon .emailed-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 28px; height: 60px; font-size: 16px; color: #aaaaaa; overflow: hidden; padding: 14px 50px 14px 30px; background: #252525; box-shadow: 0 0 30px rgba(0, 0, 0, 0.30); border: 1px solid transparent; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .coming-soon .emailed-form .form-group input:focus, .coming-soon .emailed-form .form-group select:focus, .coming-soon .emailed-form .form-group textarea:focus { border: 1px solid #ffbc00; } .coming-soon .emailed-form .form-group input[type="submit"], .coming-soon .emailed-form button { position: absolute; right: 0px; top: 0px; width: 60px; height: 60px; line-height: 40px; font-size: 18px; color: #ffffff; background-color: transparent; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .coming-soon .emailed-form .form-group input[type="submit"]:hover, .coming-soon .emailed-form button:hover { color: #ffbc00; } .coming-soon .social-icon-three li { margin: 0 1px; } .coming-soon .copyright-text { position: relative; font-size: 18px; line-height: 26px; color: #ffffff; font-weight: 400; } .coming-soon .copyright-text a { color: #ff9600; } .coming-soon .copyright-text a:hover { text-decoration: underline; } .clock-wrapper { position: absolute; top: 50%; right: 0; left: 0; width: 250px; height: 250px; margin: auto; margin-top: -145px; padding: 5px; border-radius: 50%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); transform: scale(2); } .clock-wrapper:before { position: absolute; left: 0; top: 5px; height: 100%; width: 100%; content: ""; border-bottom: 2px solid #ffbc00; content: ""; border-radius: 50%; } .clock-base { width: 250px; height: 250px; border-radius: 50%; } .click-indicator { position: absolute; z-index: 1; top: 10px; left: 10px; width: 230px; height: 230px; } .click-indicator div { position: absolute; width: 2px; height: 4px; margin: 113px 114px; } .click-indicator div>span { height: 5px; width: 5px; background-color: #888888; display: inline-block; border-radius: 50%; margin-left: -1px; margin-top: -1px; opacity: .30; } .click-indicator div:nth-child(1) { transform: rotate(30deg) translateY(-113px); } .click-indicator div:nth-child(2) { transform: rotate(60deg) translateY(-113px); } .click-indicator div:nth-child(3) { transform: rotate(90deg) translateY(-113px); background-color: #ffbc00; } .click-indicator div:nth-child(4) { transform: rotate(120deg) translateY(-113px); } .click-indicator div:nth-child(5) { transform: rotate(150deg) translateY(-113px); } .click-indicator div:nth-child(6) { transform: rotate(180deg) translateY(-113px); background-color: #ffbc00; } .click-indicator div:nth-child(7) { transform: rotate(210deg) translateY(-113px); } .click-indicator div:nth-child(8) { transform: rotate(240deg) translateY(-113px); } .click-indicator div:nth-child(9) { transform: rotate(270deg) translateY(-113px); background-color: #ffbc00; } .click-indicator div:nth-child(10) { transform: rotate(300deg) translateY(-113px); } .click-indicator div:nth-child(11) { transform: rotate(330deg) translateY(-113px); } .click-indicator div:nth-child(12) { transform: rotate(360deg) translateY(-113px); background-color: #ffbc00; } .clock-hour { position: absolute; z-index: 2; top: 80px; left: 128px; width: 4px; height: 65px; background-color: #555; border-radius: 2px; box-shadow: 0 0 2px rgba(0, 0, 0, .2); transform-origin: 2px 50px; transition: .5s; -webkit-animation: rotate-hour 43200s linear infinite; -moz-animation: rotate-hour 43200s linear infinite; } .clock-minute { position: absolute; z-index: 3; top: 60px; left: 128px; width: 4px; height: 85px; background-color: #555; border-radius: 2px; box-shadow: 0 0 2px rgba(0, 0, 0, .2); transform-origin: 2px 70px; transition: .5s; -webkit-animation: rotate-minute 3600s linear infinite; -moz-animation: rotate-minute 3600s linear infinite; } .clock-second { position: absolute; z-index: 4; top: 20px; left: 129px; width: 2px; height: 130px; background-color: #ffbc00; opacity: .5; box-shadow: 0 0 2px rgba(0, 0, 0, .2); transform-origin: 1px 110px; transition: .5s; -webkit-animation: rotate-second 60s linear infinite; -moz-animation: rotate-second 60s linear infinite; } .clock-second:after { content: ""; display: block; position: absolute; left: -3px; bottom: 16px; width: 8px; height: 8px; background-color: #ffbc00; border: solid 2px #ffbc00; border-radius: 50%; box-shadow: 0 0 3px rgba(0, 0, 0, .2); } .clock-center { position: absolute; z-index: 1; width: 150px; height: 150px; top: 55px; left: 55px; box-shadow: 0 0 3px rgba(0, 0, 0, .2); border-radius: 50%; } .clock-center:after { content: ""; display: block; width: 20px; height: 20px; margin: 65px; background-color: #ddd; border-radius: 50%; } /*** ================================================================== Right To Left Style ================================================================== ***/ .rtl { direction: rtl; text-align: right; } .rtl .swiper-slider-area, .rtl .pricing-table .price, .rtl .banner-slider-arrows, .rtl .styled-pagination, .rtl .owl-carousel { direction: ltr !important; } .rtl .main-menu .navigation>li, .rtl .team-block .other-info li strong, .rtl .main-footer .footer-bottom .copyright-text, .rtl .fun-facts .bar-item .skill-header .skill-title, .rtl .header-style-two .main-menu, .rtl .main-header .cart-btn, .rtl .main-header .search-box, .rtl .main-header .btn-box, .rtl .main-header .logo-box { float: right; } .rtl .main-footer .footer-bottom .footer-nav, .rtl .header-style-two .nav-outer, .rtl .main-header .outer-box { float: left; } .rtl .main-header, .rtl .help-box .info-box li .icon, .rtl .main-menu .navigation>li>ul, .rtl .sec-title .float-text, .rtl .main-footer .footer-column .widget-title:before, .rtl .feature-block .icon-box, .rtl .banner-section-three .shape-outer, .rtl .fun-facts .bar-item .skill-bar .bar-inner .bar, .rtl .sidebar .related-posts .post .post-thumb, .rtl .latest-news .post-thumb, .rtl .contact-page-section .contact-info li .icon, .rtl .testimonial-block .inner-box:before, .rtl .payment-box .payment-options li .radio-option input[type="radio"], .rtl .sidenav-bar .contact-info-box .info-box .icon-box, .rtl .sidenav-bar-visible header { left: auto; right: 0; } .rtl .coming-soon .emailed-form .form-group input[type="submit"], .rtl .coming-soon .emailed-form button, .rtl .subscribe-form .form-group input[type="submit"], .rtl .subscribe-form .form-group button, .rtl .fun-facts .bar-item .skill-percentage, .rtl .fun-facts .bar-item .skill-bar .bar-inner .bar:after, .rtl .sidenav-bar .navigation li.dropdown .dropdown-btn, .rtl .main-header .shopping-cart { right: auto; left: 0; } .rtl .team-block .other-info, .rtl .ui-menu .ui-menu-item-wrapper, .rtl .property-block .lower-content, .rtl .pricing-table .table-content ul, .rtl .main-menu .navigation>li .mega-menu-bar .column>ul>li>a, .rtl .main-menu .navigation>li>ul>li>ul>li>a, .rtl .main-menu .navigation>li>ul>li>a { text-align: right; } .rtl .pricing-table .title-box { text-align: left; } .rtl .main-menu .navigation>li .mega-menu-bar .column>ul>li>a, .rtl .main-menu .navigation>li>ul>li>ul>li>a, .rtl .main-menu .navigation>li>ul>li>a { border-left: 0; border-right: 4px solid transparent; } .rtl .main-menu .navigation>li .mega-menu-bar .column>ul>li>a:hover, .rtl .main-menu .navigation>li>ul>li>ul>li:hover>a, .rtl .main-menu .navigation>li>ul>li:hover>a { border-left: 0; border-right: 4px solid #ffbc00; } .rtl .main-header .btn-box, .rtl .main-header .search-box, .rtl .main-header .btn-box { margin-left: 0; margin-right: 20px; } .rtl .sidenav-bar .close-btn { right: auto; left: 10px; } .rtl .main-header .shopping-cart .cart-icon { float: right; margin-left: 7px; margin-right: 0; } .rtl .main-header .shopping-cart .shopping-cart-total .main-color-text, .rtl .main-header .shopping-cart .shopping-cart-total { float: left; } .rtl .main-header .shopping-cart .shopping-cart-items .item-quantity, .rtl .main-header .shopping-cart .shopping-cart-items img { float: right; } .rtl .sidenav-bar { right: auto; left: 0; transform-origin: left; margin: 0; } .rtl .mCS-dir-rtl>.mCSB_inside>.mCSB_container { margin-left: 0; } .rtl .sidenav-bar .contact-info-box .info-box { padding-left: 0; padding-right: 50px; } .rtl .header-style-two .main-menu .navigation>li, .rtl .main-menu .navigation>li { margin-right: 0; margin-left: 50px; } .rtl .banner-section-two .slide-item .btn-box .theme-btn { margin: 0; } .rtl .search-popup .form-group input[type="submit"], .rtl .search-popup .form-group button { right: auto; left: 30px; } .rtl .about-us .content-column .inner-column { padding-right: 0; padding-left: 70px; } .rtl .feature-block .inner-box { padding-left: 0; padding-right: 65px; } .rtl .about-us .image-column .inner-column:before { transform: translateX(-50px); } .rtl .call-back-section .image-column .image, .rtl .list-style-two li:before, .rtl .faq-form-section .image-column .image, .rtl .banner-section-three .center-stipts, .rtl .testimonial-block .content-box .icon, .rtl .team-block .devider { transform: scaleX(-1); } .rtl .banner-section-three .center-stipts { left: auto; right: 40%; } .rtl .fun-facts .progress-column .inner-column { padding-left: 0; padding-right: 20px; } .rtl .sec-title.text-center .float-text { left: 0; right: 0; margin: 0 auto; } .rtl .project-block-two .caption-box { left: auto; right: 20px; } .rtl .pricing-table .title-box { border-right: 0; border-left: 5px solid #ffbc00; } .rtl .pricing-table .table-content ul li { border-left: 0; border-right: 2px solid #ffbc00; } .rtl .pricing-table .inner-box { border-radius: 0 40px 0 40px; } .rtl .testimonial-block .info-box { padding: 30px 50px; padding-right: 130px; text-align: right; } .rtl .testimonial-block .thumb { left: auto; right: 30px; } .rtl .testimonial-block .content-box .icon { right: auto; left: 30px; } .rtl .subscribe-form .envelope-image { right: auto; left: 5%; } .rtl .subscribe-form .upper-box { border-left: 0; border-right: 5px solid #ffbc00; padding-left: 0; padding-right: 30px; } .rtl .subscribe-form .form-group { padding-right: 0; padding-left: 70px; } .rtl .recent-posts { padding-left: 0; padding-right: 40px; } .rtl .recent-posts .post .date span { margin-right: 0; margin-left: 4px; } .rtl .user-links li a { border-left: 0; border-right: 1px solid #ffbc00; } .rtl .main-footer .contact-list li { padding: 10px 30px; padding-right: 55px; } .rtl .main-footer .contact-list li .icon { left: auto; right: 15px; } .rtl .main-footer .footer-bottom .footer-nav ul li { margin-left: 0; margin-right: 10px; } .rtl .list-style-one li, .rtl .list-style-two li { padding-left: 0; padding-right: 35px; } .rtl .list-style-one li:before, .rtl .list-style-two li:before { left: auto; right: 0; } .rtl .about-section .image-column .image:before { left: auto; right: -50px; } .rtl .feature-block-two .inner-box { padding: 20px 30px; padding-right: 120px; } .rtl .feature-block-two .inner-box .icon { left: auto; right: 30px; } .rtl .about-me .image-column .image-box { padding-right: 0; padding-left: 70px; } .rtl .about-me .bottom-box { padding-left: 0; padding-right: 80px; text-align: right; } .rtl .about-me .bottom-box .name { float: right; } .rtl .about-me .bottom-box .signature { left: auto; right: 0; } .rtl .page-breadcrumb li { margin: 0; padding: 0; margin-left: 10px; padding-left: 15px; } .rtl .page-breadcrumb li:last-child { padding-left: 0; margin-left: 0; } .rtl .page-breadcrumb li:after { right: auto; left: -3px; } .rtl .coming-soon .emailed-form .form-group input[type="text"], .rtl .coming-soon .emailed-form .form-group input[type="tel"], .rtl .coming-soon .emailed-form .form-group input[type="email"], .rtl .coming-soon .emailed-form .form-group textarea { padding: 14px 30px 14px 50px; } .rtl .brochure-box .theme-btn i { margin-right: 0; margin-left: 10px; } .rtl .help-box .info-box li { padding-left: 0; padding-right: 30px; } .rtl .sidebar .search-box .form-group input[type="submit"], .rtl .sidebar .search-box .form-group button { right: auto; left: 10px; } .rtl .latest-news .post { padding-left: 0; padding-right: 105px; } .rtl .tag-list li { float: right; margin-right: 0; margin-left: 5px; } .rtl .instagram-widget .link-box { right: auto; left: 30px; } .rtl .blog-single blockquote { border-left: 0; border-right: 3px solid #ffbc00; } .rtl .comments-area .comment { padding: 30px 30px; padding-right: 130px; } .rtl .comments-area .comment-box .author-thumb { left: auto; right: 30px; } .rtl .comments-area .comment-box .name { margin-right: 0; margin-left: 10px; } .rtl .product-details .basic-details .item-quantity { float: right; margin-left: 25px; margin-right: 0; } .rtl .product-details .basic-details .add-to-cart { margin-right: 10px; margin-left: 0; } .rtl .shop-single .product-details .prod-tabs .tab-btns .tab-btn { float: right; margin-left: 10px; margin-right: 0; } .rtl .shop-comment-form .rating-box .text { float: right; margin-left: 30px; margin-right: 0; } .rtl .range-slider-one .btn-box { float: right !important; } .rtl .sidebar .related-posts .post { padding-left: 0; padding-right: 90px; } .rtl .cart-section .bootstrap-touchspin .input-group-btn-vertical { right: auto; left: 20px; } .rtl .checkout-page .default-links li .far { margin-right: 0; margin-left: 20px; } .rtl .payment-box .payment-options li .radio-option label .small-text:before { left: auto; right: 30px; } .rtl .payment-box .payment-options li .radio-option label { padding-left: 0; padding-right: 30px; } .rtl .contact-page-section .contact-info li { padding: 5px 30px; padding-right: 70px; } .rtl .project-detail .project-info li { padding-right: 50px; padding-left: 20px; } .rtl .project-detail .project-info li .icon { left: auto; right: 15px; } .rtl .contact-page-section .form-column .inner-column { padding-right: 0; padding-left: 50px; } .content-box .desk { display: block !important; } .mob { display: none !important; } @media(max-width: 1023px) { .content-box .desk { display: none !important; } .mob { display: block !important; } } .desk-view .logo-box { margin-top: 20px !important; text-align: center !important; } .desk-view .navigation li { position: relative !important; display: block !important; left: 0% !important; margin-bottom: 5px !important; } .function { margin-bottom: 30px; } @media (max-width:601px) { .pricing-table { margin-bottom: 15px; } } @media (max-width:767px) { .pricing-table { margin-bottom: 15px; } } @media(max-width :767px) { .pricing-table .title-box { margin-bottom: 10px; } } @media(min-width :599px) { .pricing-table .title-box { margin-bottom: 10px; } } @media(min-width:1440px) { .service-block-two .lower-content { height: 210px; } } @media(min-width:992px) { .service-block-two .lower-content { height: 230px; } } @media(min-width:1024px) { .service-block-two .lower-content { height: 250px; } } @media(max-width:768px) { .service-block-two .lower-content { height: 250px; } } @media(min-width:1440px) { .feature-block-two2 { height: 100px; } } @media(min-width:768px) { .feature-block-two2 { height: 70px; } } /* @media(min-width:768px) { .feature-block-two1 { height: 160px; } } */ @media(max-width:1024px) { .feature-block-two1 { height: 100px; } } @media(max-width:450px) { .feature-block-two1 { height: 180px !important; } } @media(max-width:768px) { .feature-block-two1 { height: 120px; } } @media(max-width:1024px) { .feature-block-two2 { height: 140px; } } @media(max-width:450px) { .feature-block-two2 { height: 150px; } } @media(max-width:320px) { .feature-block-two2 { height: 170px; } } @media (max-width:320px) { .main-box { display: flex; } } @media (max-width: 450px) { .service-block-two .lower-content { height: 200px; } } @media (max-width: 768px) { .service-block-two .lower-content { height: 230px; } } /* .feature-block-two:hover .inner-box .feature-block-two1 .icon { animation: spin 1s linear; } */ /* @keyframes spin { 100% { transform: rotate(360deg); } } */ .feature-block-two:hover .inner-box .feature-block-two2 .icon { animation: spin 1s linear; } .feature-block:hover .inner-box .icon-box .icon { animation: spin 1s linear; } .service-block-two:hover .lower-content { background: linear-gradient(130deg, #f0dc87 0%, #f0c133 100%); border-bottom: 4px solid black; } .inner-column:hover .lower-content { background: linear-gradient(130deg, #f5d64c 0%, #f1b80c 100%); border-bottom: 4px solid black; } .logo h5 { font-size: 18px; } .inner-box2 { height: 150px !important; } .title-box1 span { line-height: 20px; } .price-table { font-size: 15px; padding: 10px; line-height: 22px; /* margin: 10px 20px; */ width: 70%; table-layout: auto; margin: auto; } .price-table th:first-child, .price-table td:first-child { /* width: 30%; */ } .price-table td { padding: 20px; color: white; } .price-table thead { background-color: #ffbc00; color: white; } .price-table th { padding: 20px; font-size: 18px; } .btn-call { background-color: #ffbc00; color: white; } .main-title h3 { font-size: 30px !important; } @media(max-width:768px) { .banner-section .swiper-slide .content-box1 { margin-top: 170px; } } /* } */ /* } */ /* } */ /* } */ /* } *