/* Template Name: Medicoz Author: Listdo Version: 1.0.0 /************ TABLE OF CONTENTS *************** 1. Fonts 2. Reset 3. Global Settings 4. Content Elements 5. Main Header 6. Search Popup 7. Sticky Header 8. Mobile Header 9. Header Style Two / Three / Four 10. Page Title 11. Section Title 12. Main Slider 13. Banner Section Two / Three / Four 14. Top Features 15. Features Section 16. Welcome Section 17. About Section / Two / Three / Four 18. Skills Section 19. Services Section / Two / Three / Four / Five 20. Service Detail 21. Why Choose Us 22. Portfolio Section 23. Team Section / Two 24. Doctor Detail Section 25. Pricing Section 26. Appointment Section / Two / Three 27. Appointment Form Section 28. Time Table Section 29. Fun Fact Section / Two / Three / Four 30. Testimonial Section / Two / Three 31. Call To Action / Two 32. News Section / Two / Three 33. Blog Section 34. Blog Single 35. Comment Area 36. Comment Form 37. Contact Section 38. Map Section 39. Clients Section 40. Main Footer / Two / Three / Four 41. Sidebar Page Container 42. Our Shop 43. Product Details 44. Product Tabs 45. Cart Section 46. CheckOut Section 47. Login Section 48. Coming Soon 49. Error Section 50. Terms And Conditions **********************************************/ /*** ==================================================================== Fonts ==================================================================== ***/ @import url('../../../../css2'); /* font-family: 'Open Sans', sans-serif; font-family: 'Titillium Web', sans-serif; */ @import url("flaticon.css"); @import url("fontawesome-all.css"); @import url("animate.css"); @import url("owl.css"); @import url("jquery-ui.min.css"); @import url("mmenu.css"); @import url("jquery.fancybox.min.css"); @import url("jquery.modal.min.css"); @import url("jquery.bootstrap-touchspin.css"); /*** ==================================================================== Reset ==================================================================== ***/ * { margin: 0px; padding: 0px; border: none; outline: none; font-size: 100%; } /*** ==================================================================== Global Settings ==================================================================== ***/ body { font-size: 16px; color: #363636; line-height: 28px; font-weight: 400; background: #ffffff; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-family: 'Open Sans', sans-serif; } a { text-decoration: none; cursor: pointer; } a:hover, a:focus, a:visited { text-decoration: none; outline: none; } h1,h2,h3,h4,h5,h6 { position:relative; margin:0px; background:none; font-weight: 600; line-height: 1.2em; font-family: 'Titillium Web', sans-serif; } h1 {font-size: 50px; } h2 {font-size: 40px; } h3 {font-size: 30px; } h4 {font-size: 24px; } h5 {font-size: 20px; } h6 {font-size: 17px; } section { position: relative; } textarea { overflow: hidden; resize: none; } button { background-color: transparent; outline: none !important; cursor: pointer; min-width: auto; } p, .text { font-size: 15px; line-height: 26px; color: #666666; font-weight: 400; margin: 0; } ::-webkit-input-placeholder { color: inherit; } ::-moz-input-placeholder { color: inherit; } ::-ms-input-placeholder { color: inherit; } .auto-container { position: static; max-width: 1200px; padding: 0px 15px; margin: 0 auto; width: 100%; } .small-container { position: static; max-width: 900px; padding: 0px 15px; margin: 0 auto; } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; z-index: 1; background-color: #ffffff; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .section{ padding: 60px 0 30px; } .bg_alice { background-color: #f9fafc; } ul, li { list-style: none; padding: 0px; margin: 0px; } .fancybox-can-drag .fancybox-image-wrap { border: 10px solid #ffffff; } /*** ======================= List Styles ======================= ***/ /* List Style Two */ .list-style-one { position: relative; display: block; margin-bottom: 20px; } .list-style-one li { position: relative; font-weight: 400; padding-left: 25px; margin-bottom: 5px; } .list-style-one li:before { position: absolute; top: 0; left: 0; font-family: "Font Awesome 5 Free"; content: "\f00c"; color: #cf0b0b; font-weight: 900; font-size: 14px; } /* List Style Two */ .list-style-two { position: relative; display: block; margin-bottom: 20px; } .list-style-two li { position: relative; font-size: 16px; line-height: 28px; color: #363636; font-weight: 400; padding-left: 20px; margin-bottom: 5px; } .list-style-two li:before { position: absolute; top: 10px; left: 0; height: 7px; width: 7px; background-color: #cf0b0b; border-radius: 50%; content: ""; } .list-style-two.light li { font-weight: 300; } /*** ========================== Social Icons ========================== ***/ .social-icon-one { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .social-icon-one li { position: relative; margin-right: 10px; } .social-icon-one li:last-child{ margin-right: 0; } .social-icon-one li a { position: relative; display: block; font-size: 14px; color: #777777; height: 30px; width: 30px; border: 1px solid transparent; line-height: 28px; text-align: center; border-radius: 50%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .social-icon-one li a:hover { background-color: #cf0b0b; border-color: #cf0b0b; color: #ffffff; } .social-icon-one.light li a{ color: #ffffff; } .social-icon-one.light li a:hover{ color: #000000; } /* Social Icon Two*/ .social-icon-two { position: relative; display: flex; } .social-icon-two li { position: relative; margin-right: 15px; } .social-icon-two li a { position: relative; display: block; font-size: 14px; color: #dddde1; height: 35px; width: 35px; border: 1px solid #ffffff; line-height: 33px; text-align: center; border-radius: 50%; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .social-icon-two li a:hover { background-color: #cf0b0b; border-color: #cf0b0b; color: #ffffff; } /* Social Icon Three*/ .social-icon-three{ position: relative; display: flex; } .social-icon-three li { position: relative; margin-right: 15px; } .social-icon-three li a { position: relative; display: block; font-size: 14px; color: #ffffff; height: 35px; width: 35px; border: 1px solid #ffffff; line-height: 33px; text-align: center; border-radius: 50%; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .social-icon-three li a:hover { background-color: #ffffff; border-color: #ffffff; color: #cf0b0b; } /* Social Icon Four*/ .social-icon-four{ position: relative; display: flex; } .social-icon-four li { position: relative; margin-right: 15px; } .social-icon-four li a { position: relative; display: block; font-size: 14px; color: #777777; height: 35px; width: 35px; border: 1px solid #e1e1e1; line-height: 33px; text-align: center; border-radius: 50%; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .social-icon-four li a:hover { background-color: #ef5b3f; border-color: #ef5b3f; color: #ffffff; } /* Social Icon Five*/ .social-icon-five{ position: relative; display: flex; } .social-icon-five li { position: relative; margin-right: 15px; } .social-icon-five li a { position: relative; display: block; font-size: 14px; color: #777777; height: 35px; width: 35px; border: 1px solid #e1e1e1; line-height: 33px; text-align: center; border-radius: 50%; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .social-icon-five li a:hover { background-color: #7fc540; border-color: #7fc540; color: #ffffff; } /*** ========================== Social Icons Colored ========================== ***/ .social-icon-colored{ position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; flex-wrap: wrap; } .social-icon-colored li { position: relative; margin-left: 10px; } .social-icon-colored li:first-child{ margin-left: 0; } .social-icon-colored li a{ position: relative; } .social-icon-colored li a span{ position: relative; display: block; font-size: 18px; color: #ffffff; height: 40px; width: 40px; line-height: 40px; text-align: center; border-radius: 50%; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .social-icon-colored li a:hover span { box-shadow: 0 5px 10px rgba(0,0,0,.20); } .social-icon-colored .fa-whatsapp { background-color: #25d366; } .social-icon-colored .fa-adn { background-color: #504e54; } .social-icon-colored .fa-apple { background-color: #aeb5c5; } .social-icon-colored .fa-android { background-color: #A5C63B; } .social-icon-colored .fa-bitbucket, .social-icon-colored .fa-bitbucket-square { background-color: #003366; } .social-icon-colored .fa-bitcoin, .social-icon-colored .fa-btc { background-color: #F7931A; } .social-icon-colored .fa-css3 { background-color: #1572B7; } .social-icon-colored .fa-dribbble { background-color: #F46899; } .social-icon-colored .fa-dropbox { background-color: #018BD3; } .social-icon-colored .fa-facebook, .social-icon-colored .fa-facebook-f, .social-icon-colored .fa-facebook-square { background-color: #3C599F; } .social-icon-colored .fa-flickr { background-color: #FF0084; } .social-icon-colored .fa-foursquare { background-color: #0086BE; } .social-icon-colored .fa-github, .social-icon-colored .fa-github-alt, .social-icon-colored .fa-github-square { background-color: #070709; } .social-icon-colored .fa-google-plus, .social-icon-colored .fa-google-plus-square { background-color: #CF3D2E; } .social-icon-colored .fa-html5 { background-color: #E54D26; } .social-icon-colored .fa-instagram { background-color: #A1755C; } .social-icon-colored .fa-linkedin, .social-icon-colored .fa-linkedin-in, .social-icon-colored .fa-linkedin-square { background-color: #0085AE; } .social-icon-colored .fa-linux { background-color: #FBC002; color: #333; } .social-icon-colored .fa-maxcdn { background-color: #F6AE1C; } .social-icon-colored .fa-pagelines { background-color: #241E20; color: #3984EA; } .social-icon-colored .fa-pinterest, .social-icon-colored .fa-pinterest-p, .social-icon-colored .fa-pinterest-square { background-color: #CC2127; } .social-icon-colored .fa-renren { background-color: #025DAC; } .social-icon-colored .fa-skype { background-color: #01AEF2; } .social-icon-colored .fa-stack-exchange { background-color: #245590; } .social-icon-colored .fa-stack-overflow { background-color: #FF7300; } .social-icon-colored .fa-trello { background-color: #265A7F; } .social-icon-colored .fa-tumblr, .social-icon-colored .fa-tumblr-square { background-color: #314E6C; } .social-icon-colored .fa-twitter, .social-icon-colored .fa-twitter-square { background-color: #32CCFE; } .social-icon-colored .fa-vimeo-square { background-color: #229ACC; } .social-icon-colored .fa-vk { background-color: #375474; } .social-icon-colored .fa-weibo { background-color: #D72B2B; } .social-icon-colored .fa-windows { background-color: #12B6F3; } .social-icon-colored .fa-xing, .social-icon-colored .fa-xing-square { background-color: #00555C; } .social-icon-colored .fa-youtube, .social-icon-colored .fa-youtube-play, .social-icon-colored .fa-youtube-square { background-color: #C52F30; } /*** ==================================================================== Content Elements ==================================================================== ***/ .content-elements { position: relative; padding: 120px 0 120px; } .content-elements .sec-title{ margin-bottom: 50px; } .typography{ position: relative; margin-bottom: 30px; } .content-elements hr.divider-one { margin-top: 0px !important; margin-bottom: 80px !important; } .typography h1:not(:first-child) { margin-top: 35px; } .typography h1:not(:last-child) { margin-bottom: 35px; } .typography h2:not(:first-child) { margin-top: 30px; } .typography h2:not(:last-child) { margin-bottom: 30px; } .typography h3:not(:first-child) { margin-top: 25px; } .typography h3:not(:last-child) { margin-bottom: 25px; } .typography h4:not(:first-child) { margin-top: 22px; } .typography h4:not(:last-child) { margin-bottom: 22px; } .typography h5:not(:first-child) { margin-top: 19px; } .typography h5:not(:last-child) { margin-bottom: 19px; } .typography h6:not(:first-child) { margin-top: 15px; } .typography h6:not(:last-child) { margin-bottom: 15px; } .typography p:not(:last-child) { margin: 0 0 1.7em; padding: 0; } .typography p:not(:last-child):empty { margin: 0; } .content-elements .buttons{ } .content-elements .buttons .column{ margin-bottom: 30px; } .content-elements .buttons .theme-btn{ margin-right: 3px; margin-bottom: 5px; } .content-elements .buttons .theme-btn:last-child{ margin-right: 0; } /*========================== Message Box ===========================*/ .message-box{ position: relative; padding: 16px 10px; min-height: 50px; margin-bottom: 30px; border-radius: 50px 0 0 50px; } .message-box p{ color: #ffffff; font-size: 14px; line-height: 18px; } .message-box h4{ color: #ffffff; font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 500; margin-bottom: 5px; } .message-box h4 a{ text-decoration: underline; } .message-box a{ color: #ffffff; text-decoration: underline; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .message-box .close-btn{ position: absolute; display: block; z-index: 1; top: 0px; right: 0px; height: 100%; width: 50px; background: rgba(0,0,0,0.1); text-align: center; display: flex; justify-content: center; align-items: center; text-decoration: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .message-box .close-btn .icon{ color: #ffffff; font-size: 18px; opacity: .7; } .message-box .close-btn:hover{ background: rgba(0,0,0,0.2); } .message-box.with-icon { padding-left: 50px; padding-right: 65px; } .message-box .icon-box{ position: absolute; z-index: 1; top: 50%; left: 10px; width: 30px; height: 30px; color: #24bb79; border-radius: 50%; background-color: #ffffff; margin-top: -15px; } .message-box .icon-box .icon { font-size: 14px; position: absolute; z-index: 1; top: 0; left: 1px; width: 100%; height: 100%; border-radius: 50%; line-height: 30px; text-align: center; color: #24bb79; } /* Message Info */ .message-box.info{ border-color: #5bc0de; background-color: #5bc0de; } .message-box.info h4, .message-box.info a{ color: #ffffff; } .message-box.info .icon-box .icon { color: #5bc0de; } /* Message success */ .message-box.success{ border-color: #5cb85c; background-color: #5cb85c; } .message-box.success h4, .message-box.success a{ color: #ffffff; } .message-box.success .icon-box .icon { color: #5cb85c; } /* Message warning */ .message-box.warning{ border-color: #f0ad4e; background-color: #f0ad4e; } .message-box.warning h4, .message-box.warning a{ color: #ffffff; } .message-box.warning .icon-box .icon { color: #f0ad4e; } /* Message Error */ .message-box.error{ border-color: #d9534f; background-color: #d9534f; } .message-box.error h4, .message-box.error a{ color: #ffffff; } .message-box.error .icon-box .icon { color: #d9534f; } /*========================== Default Tabs ===========================*/ .default-tabs { position: relative; overflow: hidden; border: 1px solid #dddde1; margin-bottom: 30px; } .default-tabs .tab-buttons { position: relative; padding: 10px 10px; background: #cf0b0b; border-radius: 5px; } .default-tabs .tab-buttons li { position: relative; float: left; font-weight: 600; font-size: 16px; padding: 11px 24px; color: #ffffff; line-height: 20px; border-radius: 5px; cursor: pointer; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .default-tabs .tab-buttons li.active-btn { background-color: #ffffff; color: #cf0b0b; } .default-tabs .tabs-content { position: relative; width: 100%; padding: 25px 25px; background-color: #ffffff; } .default-tabs .tabs-content p { font-size: 14px; line-height: 26px; font-weight: 300; } /* Style Two */ .default-tabs.style-two .tab-buttons{ background: #ffffff; padding: 0 10px; border-bottom: 1px solid #dddde1; } .default-tabs.style-two .tab-buttons li{ padding: 20px 24px; color: #5c6770; border-radius: 0; border-bottom: 2px solid transparent; } .default-tabs.style-two .tab-buttons li.active-btn{ color: #cf0b0b; border-color: #cf0b0b; } /*========================== Accordian Box ===========================*/ .accordion-box { position: relative; margin-bottom: 30px; } .accordion-box .block { position: relative; margin-bottom: 15px; -webkit-transition: all 300ms ease; transition: all 300ms ease; background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.09); } .accordion-box .block .acc-btn { position: relative; font-size: 16px; padding: 15px 20px; padding-left: 24px; line-height: 30px; color: #222222; font-weight: 600; cursor: pointer; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .accordion-box .block .acc-btn.active { background: #cf0b0b; color: #ffffff; } .accordion-box .block .acc-btn .icon { position: absolute; right: 0; top: 0; height: 60px; width: 60px; line-height: 60px; text-align: center; color: #222; font-size: 12px; border-radius: 50px; transition: all 300ms ease; } .accordion-box .block .acc-btn.active .icon{ -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); color: #ffffff; } .accordion-box .block .acc-content { position: relative; display: none; } .accordion-box .block .acc-content.current { display: block; } .accordion-box .block .content { position: relative; padding: 30px 25px 15px; } .accordion-box .block .content p{ position: relative; font-size: 14px; line-height: 26px; color: #5c6770; font-weight: 400; margin-bottom: 26px; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .accordion-box .block .content p:last-child{ margin-bottom: 0; } .accordion-box.style-two .active-block{ background-color: #cf0b0b; } .accordion-box.style-two .acc-btn.active{ background-color: #ffffff !important; color: #222222; } .accordion-box.style-two .block .content p{ color: #ffffff; } .accordion-box.style-two .block .acc-btn.active .icon{ color: #222222; } /*========================== default table ===========================*/ .default-table{ position: relative; background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 30px; overflow: hidden; width: 100%; min-width: 600px; } .default-table thead{ background: #cf0b0b; color: #ffffff; } .default-table thead th{ position: relative; padding: 20px 30px; font-size: 16px; color: #ffffff; font-weight: 400; line-height: 30px; } .default-table tbody tr{ position: relative; border-bottom: 1px solid #ededed; } .default-table tr td{ position: relative; padding: 26px 30px; font-size: 16px; color: #5c6770; font-weight: 400; } .content-elements .btn-column{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .content-elements .btn-column .theme-btn{ margin-bottom: 20px; } /*====================== Theme Btn =======================*/ .theme-btn{ display:inline-block; text-align: center; border-radius: 5px; -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; } .theme-btn .btn-title{ position: relative; z-index: 9; color: inherit; } .theme-btn span:not(.btn-title){ position: absolute; left: 0; bottom: 0; width: 20%; height: 100%; border-radius: 50%; transform: translateY(150%); transition: all 500ms ease; background-color: #ffffff; z-index: 0; } .theme-btn span:nth-child(2){ left: 20%; transition-delay: 100ms; } .theme-btn span:nth-child(3){ left: 40%; transition-delay: 200ms; } .theme-btn span:nth-child(4){ left: 60%; transition-delay: 300ms; } .theme-btn span:nth-child(5){ left: 80%; transition-delay: 400ms; } .theme-btn:hover span{ transform: translateY(0) scale(2); } /*Btn Style One*/ .btn-style-one{ position: relative; font-size: 16px; line-height: 30px; color: #ffffff; padding: 10px 30px; font-weight: 600; background: #cf0b0b; overflow: hidden; min-width: 150px; } .btn-style-one:hover{ color: #cf0b0b; box-shadow: 0 10px 30px rgba(0,0,0,0.10); } /*Btn Style One*/ .btn-style-two{ position: relative; font-size: 15px; line-height: 30px; color: #cf0b0b; padding: 10px 40px; font-weight: 600; background: #ffffff; overflow: hidden; min-width: 170px; box-shadow: 0 10px 30px rgba(0,0,0,0.10); } .btn-style-two:hover{ color: #ffffff; box-shadow: 0 10px 15px rgba(0,0,0,0.09); } .btn-style-two span:not(.btn-title){ background: #cf0b0b; } /*Btn Style Three*/ .btn-style-three{ position: relative; font-size: 15px; line-height: 30px; color: #ffffff; padding: 10px 40px; font-weight: 600; background: #222222; overflow: hidden; min-width: 170px; } .btn-style-three:hover{ color: #222222; box-shadow: 0 10px 15px rgba(0,0,0,0.09); } /*Btn Style Four*/ .btn-style-four{ position: relative; font-size: 15px; line-height: 30px; color: #222222; padding: 10px 40px; font-weight: 600; background: #ffffff; overflow: hidden; min-width: 170px; box-shadow: 0 10px 30px rgba(0,0,0,0.10); } .btn-style-four:hover{ color: #ffffff; box-shadow: 0 10px 15px rgba(0,0,0,0.09); } .btn-style-four span:not(.btn-title){ background: #222222; } .theme-btn.large { padding: 15px 70px; min-width: 20px; font-size: 18px; line-height: 30px; } .theme-btn.small { padding: 10px 18px; font-size: 14px; font-weight: 400; line-height: 20px; border-radius: 5px; min-width: 100px; } /*========================== Owl Carousel Arrows ===========================*/ .owl-carousel.no-arrows .owl-nav{ display: none; } .default-arrows .owl-nav{ position: absolute; left: 0; top: 50%; width: 100%; opacity: 0; margin-top: -22px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .default-arrows:hover .owl-nav{ opacity: 1; } .default-arrows .owl-next, .default-arrows .owl-prev{ position: absolute; left: -50px; top: 0; height: 45px; width: 45px; color: #ffffff; font-size: 18px; font-weight: 600; text-align: center; background: rgba(255, 255, 255, 0.4); line-height: 45px; border-radius: 7px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .default-arrows .owl-next{ left: auto; right: -50px; } .default-arrows:hover .owl-next{right: 30px;} .default-arrows:hover .owl-prev{left: 30px;} .default-arrows .owl-next:hover, .default-arrows .owl-prev:hover{ background: #ffffff; color: #cf0b0b; box-shadow: 0 5px 20px rgba(0,0,0,0.10); } .default-arrows.dark .owl-next, .default-arrows.dark .owl-prev{ background-color: rgba(0,0,0,0.20); } .default-arrows.dark .owl-next:hover, .default-arrows.dark .owl-prev:hover{ background-color: #ffffff; } .owl-carousel.disable-arrow .owl-nav{ display: none; } .owl-carousel.disable-dots .owl-dots{ display: none; } .default-dots .owl-dots{ position: relative; display: flex; justify-content: center; align-items: center; } .default-dots .owl-dot{ position: relative; height: 8px; width: 8px; background-color: #000000; margin: 0 4px; border-radius: 10px; transition: all 300ms ease; } .default-dots .owl-dot.active{ width: 32px; background-color: #cf0b0b; } .default-dots.light .owl-dot{ background-color: #ffffff !important; } .theme_color { color: #cf0b0b; } .pull-right { float: right; } .pull-left { float: left; } /*========================== Preloader ===========================*/ .preloader{ position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: #fafafa; z-index: 9999; background-image: url(../images/icons/page-loader.gif); background-size: 200px; background-repeat: no-repeat; background-position: center; } .preloader:before{ position: absolute; top: 50%; left: 0; right: 0; width: 100%; text-align: center; margin: 0 auto; margin-top: 30px; color: #cf0b0b; font-size: 1.2em; opacity: .30; font-weight: 700; letter-spacing: 1px; content: "Loading"; text-transform: uppercase; transition: none; } img { display: inline-block; max-width: 100%; height: auto; } hr { -webkit-appearance: none; position: relative; height: 1px; margin: 30px auto; background: #e6e8ed; border-style: none; outline-style: none; } .tabs-box { position: relative; } .tabs-box .tab { display: none; } .tabs-box .active-tab { display: block; } /*=== Default Form ===*/ .default-form { position: relative; } .default-form .form-group { position: relative; margin-bottom: 20px; } .default-form .form-group:last-child { margin-bottom: 0; } .default-form .form-group input[type="text"], .default-form .form-group input[type="password"], .default-form .form-group input[type="number"], .default-form .form-group input[type="email"], .default-form .form-group input[type="url"], .default-form .form-group textarea, .default-form .form-group select { position: relative; width: 100%; display: block; color: #5c6770; font-size: 14px; line-height: 30px; padding: 10px 20px; height: 52px; background-color: #ffffff; border: 1px solid #e1e1e1; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .default-form .form-group input[type="text"]:focus, .default-form .form-group input[type="email"]:focus, .default-form .form-group input[type="url"]:focus, .default-form .form-group select:focus, .default-form .form-group textarea:focus { border-color: #cf0b0b; } .default-form .form-group textarea { height: 184px; resize: none; padding-top: 15px; } .default-form .form-group input[type="submit"], .default-form .form-group button { position: relative; display: inline-block; min-width: 160px; } .default-form input.error:focus, .default-form select.error:focus, .default-form textarea.error:focus { border-color: #ff0000; } .default-form label.error { display: block; font-weight: 500; font-size: 13px; text-transform: capitalize; line-height: 24px; color: #ff0000; margin-bottom: 0; } .default-form .form-group .icon{ position: absolute; right: 20px; bottom: 0; color: #9fa9b8; font-size: 14px; line-height: 54px; } /*** ==================================================================== Scroll To Top ==================================================================== ***/ .scroll-to-top { position: fixed; right: 30px; bottom: 30px; z-index: 999; width: 40px; height: 40px; font-size: 18px; color: #1b2032; background-color: #ffffff; line-height: 40px; border-radius: 50px 50px 0 0; text-align: center; display: none; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.10); -webkit-transition: all 300ms ease; transition: all 300ms ease; } .play-now { position: relative; display: inline-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: #ffffff; color: #222222; z-index: 1; font-size: 42px; 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);} } /*** ==================================================================== Main Header ==================================================================== ***/ .main-header{ position: relative; left: 0; top: 0; width: 100%; height: auto; z-index: 99; border-top: 10px solid #cf0b0b; } /* Header Top */ .header-top{ position: relative; } .header-top .inner-container{ position: relative; display: flex; justify-content: space-between; align-items: center; } .header-top .top-left{ position: relative; } .header-top .top-left .contact-list{ position: relative; padding: 15px 0; } .header-top .top-left .contact-list li{ position: relative; float: left; font-size: 14px; line-height: 20px; color: #777777; font-weight: 400; margin-right: 30px; } .header-top .top-left .contact-list li:last-child{ margin-right: 0; } .header-top .top-left .contact-list li i{ float: left; font-size: 20px; line-height: 20px; margin-right: 8px; color: #cf0b0b; } .header-top .top-left .contact-list li a{ color: #cf0b0b; 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; } .header-top .top-right{ position: relative; float: right; } /* Header Lower */ .main-header .header-lower{ position: relative; } .main-header .main-box { position: relative; display: -webkit-box; display: flex; -webkit-box-pack: justify; -webkit-box-align: center; align-items: center; margin-bottom: 30px; padding-left: 30px; } .main-header .main-box:before{ position: absolute; left: 0; right: 60px; height: 100%; background: #f5f5f5; content: ""; border-radius: 50px; border: 1px solid #dddde1; } .main-header .nav-outer { position: static; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-around; -webkit-box-align: center; align-items: center; width: 100%; } .main-header .logo-box { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin-right: 70px; } .main-header .logo { position: relative; z-index: 9; padding: 0px 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-header .menu-box { position: static; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; } .main-menu { position: static; } .main-menu .navbar-header { display: none; } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navigation { position: static; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .main-menu .navigation > li { position: relative; margin-right: 30px; padding: 20px 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation > li > span, .main-menu .navigation > li > a { position: relative; display: block; text-align: center; opacity: 1; font-size: 14px; line-height: 30px; font-weight: 600; color: #222222; cursor: pointer; text-transform: uppercase; font-family: "Titillium Web", sans-serif; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation > li.current span.current, .main-menu .navigation > li.current > a, .main-menu .navigation > li.current > span { color: #cf0b0b; } .main-menu .navigation > li.dropdown > span { padding-right: 10px; } .main-menu .navigation > li.dropdown > span:after { position: absolute; right: -2px; top: 50%; margin-top: -10px; font-family: "Font Awesome 5 Free"; content: "\f0d7"; display: block; line-height: 20px; font-size: 12px; font-weight: 900; color: #222222; z-index: 5; } .main-menu .navigation > li > a > span { position: relative; } .main-menu .navigation > li > ul { position: absolute; top: 100%; left: -15px; background-color: #fff; border-radius: 8px; padding: 10px 0; opacity: 0; z-index: 1; min-width: 200px; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateY(50px); transform: translateY(50px); -ms-box-shadow: 0px 7px 10px -1px rgba(0, 0, 0, 0.2); -o-box-shadow: 0px 7px 10px -1px rgba(0, 0, 0, 0.2); box-shadow: 0px 7px 10px -1px rgba(0, 0, 0, 0.2); } .main-menu .navigation > li > ul:before { position: absolute; left: 20px; top: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #ffffff; content: ""; } .main-menu .navigation > li > ul.from-right { left: auto; right: 0; } .main-menu .navigation > li > ul .from-right { left: auto; right: 100%; margin-right: 2px; } .main-menu .navigation > li > ul > li { position: relative; display: block; z-index: 1; } .main-menu .navigation > li > ul > li:last-child { border-bottom: none; } .main-menu .navigation > li > ul > li > span, .main-menu .navigation > li > ul > li > a { position: relative; display: block; padding: 10px 30px; z-index: 1; font-weight: 600; font-size: 16px; line-height: 20px; color: #363636; white-space: nowrap; text-transform: capitalize; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .main-menu .navigation > li.current.dropdown > span:after, .main-menu .navigation > li li > a:hover, .main-menu .navigation > li > ul > li > ul > li.current > a, .main-menu .navigation > li > ul > li.current > a { color: #cf0b0b; } .main-menu .navigation > li > ul > li > ul { position: absolute; top: 100%; left: 100%; background-color: #fff; border-radius: 8px; padding: 10px 0; min-width: 200px; margin-top: -40px; opacity: 0; z-index: 1; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateY(50px); transform: translateY(50px); -ms-box-shadow: 0px 7px 10px -1px rgba(0, 0, 0, 0.2); -o-box-shadow: 0px 7px 10px -1px rgba(0, 0, 0, 0.2); box-shadow: 0px 7px 10px -1px rgba(0, 0, 0, 0.2); } .main-menu .navigation > li > ul > li > ul > li { position: relative; width: 100%; } .main-menu .navigation > li > ul > li > ul > li > a { position: relative; display: block; padding: 10px 30px; z-index: 1; font-weight: 600; font-size: 16px; line-height: 20px; color: #363636; white-space: nowrap; text-transform: capitalize; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .main-menu .navigation > li > ul > li > ul > li > span:hover { color: #5c6770; } .main-menu .navigation > li > ul > li.dropdown > span:before { position: absolute; right: 20px; top: 50%; margin-top: -10px; font-family: "Font Awesome 5 Free"; content: "\f105"; display: block; color: inherit; line-height: 20px; font-size: 16px; font-weight: 900; z-index: 5; } .main-menu .navigation > li.dropdown:hover > ul { opacity: 1; visibility: visible; -webkit-transform: translate(0px); transform: translate(0px); } .main-menu .navigation li > ul > li.dropdown:hover > ul { opacity: 1; visibility: visible; -webkit-transform: translate(0px); transform: translate(0px); } .main-menu .navigation 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: 26px; color: #ffffff; cursor: pointer; z-index: 5; display: none; } .main-header .outer-box { position: relative; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } /* Search btn */ .main-header .search-btn{ position: relative; height: 40px; width: 40px; background: #ffffff; border-radius: 50%; line-height: 40px; font-size: 14px; color: #222222; box-shadow: 0 5px 10px rgba(0,0,0,0.10); } .main-header .theme-btn{ margin-left: 30px; } /* Cart btn */ .main-header .cart-btn{ position: relative; display: block; z-index: 1; color: #ffffff; font-size: 24px; line-height: 40px; } .main-header .cart-btn .count { position: absolute; right: -7px; top: -4px; height: 18px; width: 18px; text-align: center; line-height: 18px; font-size: 10px; color: #ffffff; background-color: #cf0b0b; border-radius: 50%; } /*** ==================================================================== Search Popup ==================================================================== ***/ .search-popup { position: fixed; left: 0; top: 0; height: 100vh; width: 100%; z-index: 99; opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; overflow: hidden; transform: scale(.95); } .search-popup .search-back-drop { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #f5f5f5; opacity: .95; } .moblie-search-active .search-popup { opacity: 1; visibility: visible; transform: scale(1); border-radius: 0%; } .search-popup .close-search { position: absolute; top: 30px; right: 30px; font-size: 26px; color: #777777; z-index: 3; border-radius: 50%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .search-popup .search-inner { position: relative; display: block; top: 40%; height: auto; z-index: 1; width: calc(100% - 60px); max-width: 800px; margin: auto; opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: all 300ms ease; transition: all 300ms ease; } .moblie-search-active .search-popup .search-inner { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 500ms; transition-delay: 500ms; } .search-popup .form-group form { position: relative; } .search-popup .form-group { position: relative; margin: 0px; } .search-popup .form-group input[type="text"], .search-popup .form-group input[type="search"] { position: relative; display: block; width: 100%; font-size: 18px; line-height: 30px; color: #333333; padding: 15px 30px; height: 60px; width: 100%; background-color: #ffffff; border-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,0.10); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .search-popup .form-group input[type="submit"], .search-popup .form-group button { position: absolute; right: 0px; top: 0px; height: 60px; width: 60px; line-height: 60px; color: #ffffff; background-color: #cf0b0b; text-align: center; font-size: 22px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .search-popup input::-webkit-input-placeholder, .search-popup textarea::-webkit-input-placeholder { color: inherit; } .search-popup input::-moz-placeholder, .search-popup textarea::-moz-placeholder { color: inherit; } .search-popup input:-ms-input-placeholder, .search-popup textarea:-ms-input-placeholder { color: inherit; } .search-popup input::-ms-input-placeholder, .search-popup textarea::-ms-input-placeholder { color: inherit; } .search-popup input::placeholder, .search-popup textarea::placeholder { color: inherit; } .jquery-modal{ z-index: 999; } .model{ padding: 0; border-radius: 0; overflow: unset; max-width: 1000px; height: auto; } /*=== Shopping Cart ===*/ .cart-widget{ position: relative; padding: 30px; border: 1px solid #DADCE2; border-radius: 7px; overflow: hidden; } .shopping-cart .cart-item{ position: relative; width: 100%; padding-left: 75px; min-height: 60px; margin-bottom: 20px; } .shopping-cart .cart-item:last-child{ border-bottom: 0; } .shopping-cart .cart-item .thumb{ position: absolute; left: 0; top: 0; width: 60px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shopping-cart .cart-item:hover .thumb{ opacity: 0.7; } .shopping-cart .item-name{ display: block; color: #333333; font-weight: 600; font-size: 15px; line-height: 22px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shopping-cart .cart-item:hover .item-name{ color: #333333; } .shopping-cart .item-quantity{ position: relative; display: block; font-size: 14px; line-height: 22px; color: #4C4C4D; } .shopping-cart .item-amount{ font-size: 14px; } .shopping-cart .product-detail{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .shopping-cart .remove-item{ position: absolute; right: 0; top: 0; font-size: 10px; z-index: 2; color: #4C4C4D; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shopping-cart .remove{ position: relative; font-size: 13px; line-height: 17px; text-decoration: underline; } .shopping-cart .cart-item .remove-item:hover{ color: #4C4C4D; } .shopping-cart .cart-footer{ position: relative; margin-top: 16px; } .shopping-cart .shopping-cart-total{ width: 100%; margin: 0 0 20px; padding-top: 15px; border-top: 1px solid #e5e5e5; font-size: 17px; display: inline-flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } .shopping-cart .shopping-cart-total span{ font-size: 15px; } .shopping-cart .btn-box{ position: relative; display: flex; align-items: center; justify-content: center; } .sidebar-cart{ position: fixed; left: 0; top: 0; height: 100%; width: 100%; z-index: 999; opacity: 0; visibility: hidden; -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-cart-active{ overflow: hidden; } .sidebar-cart-active .sidebar-cart{ opacity: 1; visibility: visible; } .sidebar-cart .cart-back-drop{ position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.5); } .sidebar-cart .shopping-cart{ position: fixed; right: 0; top: 0; height: 100%; width: 300px; background-color: #ffffff; padding: 20px 20px 50px; overflow-y: auto; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(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; } .sidebar-cart-active .sidebar-cart .shopping-cart{ -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .shopping-cart .cart-header{ position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .shopping-cart .cart-header .title{ text-align: left; width: 100%; font-size: 15px; font-weight: 600; line-height: 21px; padding-bottom: 10px; border-bottom: 1px solid #eeeeee; } .shopping-cart .close-cart { position: relative; top: -5px; line-height: 22px; font-size: 16px; font-weight: 600; transform: rotate(45deg); } .sidebar-cart .cart-item{ padding-left: 100px; padding-bottom: 20px; border-bottom: 1px dashed #e5e5e5; margin-bottom: 20px; } .sidebar-cart .shopping-cart .cart-item .thumb{ width: 75px; height: 74px; } .sidebar-cart .shopping-cart .theme-btn{ margin: 0 0 15px; display: block; width: 100%; } /*** ==================================================================== Sticky Header ==================================================================== ***/ .sticky-header { position: fixed; visibility: hidden; opacity: 0; left: 0px; top: 0px; width: 100%; padding: 0px 0px; z-index: 99; background: rgba(255, 255, 255, 0.952941); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.10); -webkit-transition: all 300ms ease; transition: all 300ms ease; } .fixed-header .sticky-header { opacity: 1; z-index: 99; visibility: visible; } .sticky-header .main-box{ padding: 0; margin: 0; } .sticky-header .outer-box, .sticky-header .main-box:before{ display: none; } .main-header .sticky-header .main-menu .navigation > li.current > a{ color: #cf0b0b; } .header-style-two .sticky-header .logo-box:before{ display: none; } /*** ==================================================================== Mobile Header ==================================================================== ***/ .mobile-header { position: relative; padding: 13px 15px; display: none; z-index: 99; } .mobile-header:after { display: table; clear: both; content: ""; } .mobile-header .logo { position: relative; float: left; margin: 0; padding: 0 !important; left: 0; } .mobile-header .logo img { max-height: 50px; } .mobile-header .nav-outer { position: relative; float: right; margin-top: 5px; } .mobile-header .outer-box { position: relative; float: right; } .mobile-header .search-box { margin: 0; } .mobile-header .cart-btn { font-size: 20px; height: 40px; width: 40px; text-align: center; background: #fff; border-radius: 50%; box-shadow: 0 5px 10px rgba(0,0,0,0.10); } .mobile-header .cart-btn{ margin-left: 10px; } .nav-outer .mobile-nav-toggler { position: relative; float: right; font-size: 32px; line-height: 30px; cursor: pointer; margin-left: 20px; color: #cf0b0b; -webkit-box-ordinal-group: 4; order: 3; display: none; } .mm-panels .mm-counter { position: absolute; right: 45px; top: 50%; text-indent: 0; display: block; margin-top: -10px; background-color: #999999; height: 20px; width: 20px; text-align: center; border-radius: 50%; color: #fff; line-height: 22px; font-size: 12px; font-weight: 600; padding: 0; } .mm-navbar__title>span{ font-size: 16px; line-height: 22px; color: #ffffff; font-weight: 600; } .mm-listview .current{ background-color: rgba(0,0,0,0.10); } #toggle-user-sidebar{ margin-left: 20px; } #toggle-user-sidebar .thumb{ display: block; height: 30px; width: 30px; border: 2px solid rgba(255,255,255,.15); border-radius: 50%; } .mm-add-listing{ margin-top: 30px; padding: 0 10px; border: transparent; display: none; } .mm-add-listing .theme-btn{ width: auto; min-width: auto; flex: 0 0 auto; color: #cf0b0b !important; border-radius: 50px; line-height: 25px; font-weight: 400; } .mm-add-listing .theme-btn span{ margin-left: 0; margin-right: 10px; } /*** ==================================================================== Header Style Two ==================================================================== ***/ .header-style-two{ position: relative; } .header-top-two{ position: relative; background-color: #ffffff; } .header-top-two .inner-container{ position: relative; display: flex; justify-content: space-between; align-items: center; padding-left: 200px; min-height: 100px; } .header-top-two .top-left{ position: relative; } .header-top-two .top-left .contact-list{ position: relative; display: flex; align-items: center; } .header-top-two .top-left .contact-list li{ position: relative; padding-left: 60px; font-size: 14px; line-height: 20px; color: #777777; font-weight: 400; margin-left: 40px; display: flex; align-items: center; min-height: 50px; } .header-top-two .top-left .contact-list li i{ position: absolute; left: 0; top: 0; font-size: 48px; line-height: 50px; margin-right: 8px; color: #cf0b0b; } .header-top-two .top-left .contact-list li a{ color: #cf0b0b; 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; } .header-top-two .top-right{ position: relative; display: flex; justify-content: center; align-items: center; } /* Header Lower */ .header-style-two .main-box{ margin: 0; padding: 0; padding-left: 200px; } .header-style-two .logo-box{ position: absolute; left: 0; top: -100px; min-height: 160px; width: 200px; display: flex; justify-content: center; align-items: center; } .header-style-two .logo-box:before{ position: absolute; right: 0px; height: 100%; width: 1000%; background: #f5f5f5; content: ""; } .header-style-two .main-box:before{ background-color: #cf0b0b; width: 1000%; right: auto; } .header-style-two .main-menu .navigation > li{ padding: 15.5px 0; } .header-style-two .header-lower .main-menu .navigation > li.dropdown > span:after, .header-style-two .header-lower .main-menu .navigation > li > span, .header-style-two .header-lower .main-menu .navigation > li > a{ color: #ffffff !important; } .header-style-two .main-menu .navigation > li.current:after{ position: absolute; bottom: 20px; left: 0; height: 1px; width: 100%; background-color: #ffffff; content: ""; } .header-style-two .nav-outer{ padding-left: 40px; display: flex; width: 100%; align-items: center; } .header-style-two .search-btn{ background-color: transparent; border: 2px dashed #ffffff; line-height: 36px; color: #ffffff; margin-left: 20px; box-shadow: none; transition: all 300ms ease; } .header-style-two .search-btn:hover{ background-color: #ffffff; color: #222222; } .header-style-two .cart-btn .count{ background-color: #222222; color: #ffffff; } .header-style-two .mobile-header .cart-btn{ color:#222222 ; font-size: 24px; } .header-style-two .mobile-header .search-btn{ color: #222222; box-shadow: 0 0 10px rgba(0,0,0,0.10); } .header-style-two .sticky-header .logo-box{ position: relative; left: 0; top: 0; min-height: auto; } .header-style-two .sticky-header .main-box{ padding-left: 0; } .header-style-two .sticky-header .main-menu .navigation > li.dropdown > span:after, .header-style-two .sticky-header .main-menu .navigation > li > span, .header-style-two .sticky-header .main-menu .navigation > li > a, .header-style-two .sticky-header .main-menu .navigation > li.dropdown > span{ color: #222222; } .header-style-two .sticky-header .main-menu .navigation > li.current > span:after, .header-style-two .sticky-header .main-menu .navigation > li.current > span{ color: #cf0b0b; } /*** ==================================================================== Header Style Three ==================================================================== ***/ .header-style-three{ position: relative; border: 0; box-shadow: 0 0 30px rgba(0,0,0,0.10); } /*== Header Top Three ==*/ .header-top-three{ position: relative; } .header-top-three .inner-container{ position: relative; display: flex; justify-content: space-between; align-items: center; } .header-top-three{ position: relative; background-color: #ef5b3f; } .header-top-three .top-left{ position: relative; } .header-top-three .top-left .contact-list{ position: relative; padding: 15px 0; } .header-top-three .top-left .contact-list li{ position: relative; float: left; font-size: 14px; line-height: 20px; color: #ffffff; font-weight: 400; margin-right: 30px; } .header-top-three .top-left .contact-list li:last-child{ margin-right: 0; } .header-top-three .top-left .contact-list li i{ float: left; font-size: 20px; line-height: 20px; margin-right: 8px; color: #ffffff; } .header-top-three .top-left .contact-list li 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; } .header-top-three .top-right{ position: relative; float: right; } .header-style-three .main-box{ margin-bottom: 0; padding-left: 0; } .header-style-three .main-box:before{ display: none; } /*** ==================================================================== Header Style Four ==================================================================== ***/ .header-style-four{ position: relative; } .header-style-four .header-top .top-left .contact-list{ position: relative; padding: 15px 0; } .header-style-four .main-box{ margin-bottom: -25px; padding-left: 30px; padding-right: 30px; background-color: #ffffff; box-shadow: 0 0px 30px rgba(0,0,0,.10); border-radius: 50px 0 0 50px; } .header-style-four .main-box:before{ display: none; } .header-style-four .sticky-header{ box-shadow: none; background-color: transparent; } .header-style-four .sticky-header .main-box{ border-radius: 0; box-shadow: 0 0px 30px rgba(0,0,0,.10); } /*** ==================================================================== Page Title ==================================================================== ***/ .page-title{ position: relative; padding: 80px 0px; background-repeat: no-repeat; background-position: center; background-size: cover; text-align: right; z-index: 2; } .page-title:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; /* background-color: #ffffff;*/ content: ""; opacity: .50; } .page-title .title-outer{ position: relative; display: inline-block; border-radius: 10px; } .page-title h1{ color: #cf0b0b; font-size: 48px; font-weight: 700; line-height: 1.2em; margin: 0 0px; word-break: break-word; } .page-title .title_divider{ display: inline-block; width: 30px; height: 3px; -webkit-border-radius: 2px; border-radius: 2px; position: relative; background: #cbcfd4; } .page-breadcrumb{ font-size: 15px; line-height: initial; margin: 5px -15px 10px; } .page-breadcrumb li{ position:relative; display:inline-block; color:rgba(0,0,0,0.75); font-size:18px; font-weight:500; padding: 0 18px; line-height: 24px; text-transform:capitalize; } .page-breadcrumb li:after{ position: absolute; top: 0; right: -10px; content: "\f179"; font-family: 'flaticon'; display: inline-block; font-size: 18px; color: #000; } .page-breadcrumb li:last-child::after{ display: none; } .page-breadcrumb li a{ color:rgba(0,0,0,0.75); text-transform: capitalize; -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; } .page-breadcrumb li a:hover{ opacity: .9; color: #cf0b0b; } /*** ==================================================================== Section Title ==================================================================== ***/ .sec-title { position: relative; margin-bottom: 70px; } .sec-title .sub-title{ display: block; font-size: 18px; color: #666666; margin-bottom: 15px; } .sec-title .title{ font-size: 16px; color: #666666; } .sec-title h2 { display: block; font-size: 36px; line-height: 1.2em; font-weight: 700; } .sec-title .text, .sec-title p{ position: relative; margin-top: 30px; } .sec-title .divider{ position: relative; display: block; width: 60px; height: 20px; margin-top: 30px; } .sec-title .divider svg{ display: block; width: 100%; transform: translateY(-50%); top: 50%; position: relative; fill: #cf0b0b; } .sec-title.text-center .divider{ margin: 30px auto 0; } .sec-bottom-text{ position: relative; text-align: center; font-size: 14px; color: 666666; line-height: 24px; margin-top: 15px; } .sec-bottom-text a{ color: #cf0b0b; } .sec-title.light .title, .sec-title.light h2, .sec-title.light p, .sec-title.light .text, .sec-title.light .sub-title{ color: #ffffff; } .sec-title.light .divider svg{ fill: #ffffff; } /*** ==================================================================== Main Slider ==================================================================== ***/ .main-slider{ position: relative; } .main-slider .tp-dottedoverlay{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0,0,0, 0.1); } .main-slider .title{ position: relative; display: inline-block; color: #cf0b0b; font-size: 18px; font-weight: 700; line-height: 1.5em; border-radius: 5px; } .main-slider h2{ position: relative; display: block; font-size: 48px; line-height: 1.2em; color: #25304c; font-weight: 700; text-transform: capitalize; } .main-slider .text{ position: relative; display: block; font-size: 16px; line-height: 26px; color: #25304c; font-weight: 600; } .main-slider .btn-box{ position: relative; } .main-slider .btn-box a{ display: inline-block; text-align: center !important; margin-right: 20px !important; min-width: 180px !important; } .main-slider .btn-box a:last-child{ margin-right: 0px !important; } /*** ==================================================================== Banner Section One ==================================================================== ***/ .banner-section-one{ position: relative; } .banner-section-one .banner-carousel{ position: relative; } .banner-section-one .slide-item{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section-one .slide-item:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0,0,0, 0.1); content: ""; } .banner-section-one .content-outer{ position: relative; display: flex; align-items: center; min-height: 780px; } .banner-section-one .content-box { position: relative; max-width: 600px; width: 100%; transition: all 300ms ease; } .banner-section-one .content-box .title{ position: relative; display: inline-block; color: #cf0b0b; font-size: 18px; font-weight: 700; line-height: 1.5em; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-one .active .content-box .title{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 400ms; } .banner-section-one .content-box h2{ position: relative; display: block; font-size: 48px; line-height: 1.2em; color: #25304c; font-weight: 700; text-transform: capitalize; margin-bottom: 20px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-one .active .content-box h2{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 500ms; } .banner-section-one .content-box .text{ position: relative; display: block; font-size: 16px; line-height: 26px; color: #25304c; font-weight: 600; opacity: 0; visibility: hidden; margin-bottom: 30px; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-one .active .content-box .text{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 600ms; } .banner-section-one .content-box .btn-box{ opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-one .active .content-box .btn-box{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 700ms; } .banner-section-one .content-box .btn-box a{ display: inline-block; margin-right: 20px; min-width: 180px; } .banner-section-one .content-box .btn-box a:last-child{ margin-right: 0px !important; } /*** ==================================================================== Banner Section ==================================================================== ***/ .banner-section{ position: relative; } .banner-section .banner-carousel{ position: relative; } .banner-section .slide-item{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section .content-outer{ position: relative; display: flex; justify-content: center; align-items: center; height: 100vh; min-height: 700px; } .banner-section .content-box { position: relative; background-color: rgba(255,255,255,.90); padding: 50px 50px; max-width: 600px; width: 50%; margin-left: 50%; border: 0; border-left-width: 10px; border-color: #cf0b0b; border-style: solid; box-shadow: 0 0 20px rgba(0,0,0,0.10); transform: translateX(-30%); opacity: 0; visibility: hidden; transition: all 300ms ease; } .banner-section .active .content-box { transform: translateX(0%) scale(1); opacity: 1; visibility: visible; transition-delay: 300ms; } .banner-section .content-box .title{ position: relative; display: block; font-size: 18px; color: #666666; margin-bottom: 10px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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 .active .content-box .title{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 400ms; } .banner-section .content-box h2{ font-size: 42px; line-height: 1.2em; font-weight: 700; color: #222222; margin-bottom: 20px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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 .content-box h2 span{ color: #cf0b0b; } .banner-section .active .content-box h2{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 500ms; } .banner-section .content-box .text{ margin-bottom: 30px; font-size: 18px; line-height: 24px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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 .active .content-box .text{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 600ms; } .banner-section .content-box .btn-box{ opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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 .active .content-box .btn-box{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 700ms; } /*** ==================================================================== Banner Section Two ==================================================================== ***/ .banner-section-two{ position: relative; } .banner-section-two .banner-carousel{ position: relative; } .banner-section-two .slide-item{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section-two .content-outer{ position: relative; display: flex; justify-content: center; align-items: center; min-height: 700px; } .banner-section-two .content-box { position: relative; max-width: 600px; width: 50%; margin-left: 50%; transition: all 300ms ease; } .banner-section-two .content-box .icon-box{ position: relative; display: inline-block; height: 100px; width: 100px; line-height: 100px; border-radius: 50%; background-color: #ffffff; text-align: center; font-size: 52px; color: #ef5b3f; box-shadow: 0 15px 20px rgba(0,0,0,0.10); margin-bottom: 10px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-two .active .content-box .icon-box{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 400ms; } .banner-section-two .content-box h1{ position: relative; display: block; line-height: 1em; font-size: 96px; font-weight: 700; color: #222222; margin-bottom: 10px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-two .active .content-box h1{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 500ms; } .banner-section-two .content-box h3{ font-size: 36px; line-height: 1.1em; font-weight: 600; color: #30302f; opacity: 0; visibility: hidden; margin-bottom: 10px; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-two .active .content-box h3{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 600ms; } .banner-section-two .content-box .text{ font-size: 18px; line-height: 30px; color: #222222; font-weight: 500; opacity: 0; visibility: hidden; margin-bottom: 30px; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-two .active .content-box .text{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 600ms; } .banner-section-two .content-box .btn-box{ opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-two .active .content-box .btn-box{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 700ms; } /*** ==================================================================== Banner Section Three ==================================================================== ***/ .banner-section-three{ position: relative; } .banner-section-three .banner-carousel{ position: relative; } .banner-section-three .slide-item{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section-three .content-outer{ position: relative; display: flex; align-items: center; min-height: 700px; } .banner-section-three .content-box { position: relative; max-width: 600px; width: 100%; transition: all 300ms ease; } .banner-section-three .content-box .title{ position: relative; display: inline-block; font-size: 18px; line-height: 1.2em; color: #7fc540; font-weight: 500; padding: 5px 20px; margin-bottom: 25px; background-color: #ffffff; border-radius: 3px; box-shadow: 0 5px 20px rgba(0,0,0,0.10); opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-three .active .content-box .title{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 400ms; } .banner-section-three .content-box h4{ position: relative; display: block; line-height: 1em; font-size: 36px; font-weight: 400; color: #222222; margin-bottom: 10px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-three .active .content-box h4{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 500ms; } .banner-section-three .content-box h2{ font-size: 52px; line-height: 1.1em; font-weight: 700; color: #222222; opacity: 0; visibility: hidden; margin-bottom: 15px; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-three .content-box h2 span{ color: #7fc540; } .banner-section-three .active .content-box h2{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 600ms; } .banner-section-three .content-box .text{ font-size: 18px; line-height: 30px; color: #222222; font-weight: 500; opacity: 0; visibility: hidden; margin-bottom: 30px; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-three .active .content-box .text{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 600ms; } .banner-section-three .content-box .btn-box{ opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-three .active .content-box .btn-box{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 700ms; } .banner-section-three .top-features{ position: relative; margin-top: -70px; z-index: 1; } .banner-section-three .top-features:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #7fc540; content: ""; display: none; } /*** ==================================================================== Banner Section Four ==================================================================== ***/ .banner-section-four{ position: relative; } .banner-section-four .banner-carousel{ position: relative; } .banner-section-four .slide-item{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: 50px; } .banner-section-four .content-outer{ position: relative; display: flex; justify-content: center; align-items: center; min-height: 700px; } .banner-section-four .content-box { position: relative; max-width: 600px; width: 45%; margin-left: 55%; transition: all 300ms ease; } .banner-section-four .content-box .title{ position: relative; display: block; font-size: 22px; line-height: 1.2em; color: #105abf; font-weight: 700; margin-bottom: 15px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-four .active .content-box .title{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 400ms; } .banner-section-four .content-box h1{ position: relative; display: block; line-height: 1em; font-size: 96px; font-weight: 700; color: #222222; margin-bottom: 10px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-four .active .content-box h1{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 500ms; } .banner-section-four .content-box h3{ font-size: 48px; line-height: 1.1em; font-weight: 700; color: #30302f; opacity: 0; visibility: hidden; margin-bottom: 10px; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-four .active .content-box h3{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 600ms; } .banner-section-four .content-box .text{ font-size: 18px; line-height: 30px; color: #222222; font-weight: 500; opacity: 0; visibility: hidden; margin-bottom: 30px; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-four .active .content-box .text{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 600ms; } .banner-section-four .content-box .btn-box{ opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -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-four .active .content-box .btn-box{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 700ms; } /*** ==================================================================== Top Features ==================================================================== ***/ .top-features{ position: relative; margin-top: -100px; z-index: 1; } .top-features:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #cf0b0b; content: ""; display: none; } .feature-block{ position: relative; margin-bottom: 30px; } .feature-block .inner-box{ position: relative; padding: 45px 40px; background-color: #ffffff; background-image: url(../images/icons/pattern-1.png); background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.10); -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .feature-block .inner-box:hover{ background-color: #cf0b0b; transform: translateY(-20px); box-shadow: 0 10px 30px rgba(0,0,0,.20); } .feature-block .inner-box:before, .feature-block .inner-box:after{ position: absolute; height: 200px; width: 200px; right: -100px; top: -100px; border-radius: 50%; background-color: #ffffff; z-index: 9; transform: scale(0); content: ""; transition: all 600ms ease; } .feature-block .inner-box:hover:before{ transform: scale(1); opacity: .20; transition-delay: 300ms; } .feature-block .inner-box:hover:after{ transform: scale(1.7); opacity: .10; transition-delay: 400ms; } .feature-block .icon{ position: relative; display: inline-block; font-size: 64px; line-height: 1em; color: #cf0b0b; margin-bottom: 20px; -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 .inner-box:hover .icon{ color: #ffffff; } .feature-block h4{ display: block; font-size: 24px; font-weight: 600; margin-bottom: 15px; } .feature-block h4 a{ color: inherit; -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 .inner-box:hover h4 a{ color: #ffffff; } .feature-block p{ -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 .inner-box:hover p{ color: #ffffff; } /*=== Feature Block Four ===*/ .feature-block-four{ position: relative; margin-bottom: 30px; } .feature-block-four .inner-box{ position: relative; background-color: #ffffff; border-radius: 15px 15px 0 0; padding: 30px 20px; text-align: center; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1); background-image: url(../images/icons/pattern-1.png); background-repeat: no-repeat; background-position: left bottom; background-size: 100%; transition: all 300ms ease; } .feature-block-four .inner-box:hover{ transform: translateY(-20px); } .feature-block-four .inner-box:before{ position: absolute; height: 200px; width: 200px; left: 50%; margin-left: -100px; top: -100px; border-radius: 50%; background-color: #7fc540; opacity: 0; z-index: 9; transform: scale(0); content: ""; transition: all 600ms ease; } .feature-block-four .inner-box:hover:before{ transform: scale(1); opacity: .10; } .feature-block-four .inner-box:after{ position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; content: ""; border-bottom:3px solid #7fc540; -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); -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); } .feature-block-four .inner-box:hover:after { -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; } .feature-block-four .icon { font-size: 60px; line-height: 1em; color: #7fc540; display: inline-block; margin-bottom: 10px; transition: all 300ms ease; } .feature-block-four h4{ font-size: 20px; line-height: 1.2em; font-weight: 700; margin-bottom: 15px; transition: all 300ms ease; } .feature-block-four .text{ position: relative; transition: all 300ms ease; } /*** ==================================================================== Features Section ==================================================================== ***/ .features-section{ position: relative; padding: 120px 0 70px; } .features-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-1.png); background-repeat: no-repeat; background-position: left bottom; content: ""; } .features-section .sec-title{ margin-bottom: 40px; } .features-section .content-column{ position: relative; margin-bottom: 50px; } .features-section .content-column .inner-column{ position: relative; } .features-section .content-column .btn-box{ margin-top: 18px; } .features-section .image-column{ position: relative; margin-bottom: 50px; } .features-section .image-column .image-box{ position: relative; padding-right: 10px; } .features-section .image-column .image{ position: relative; margin-bottom: 0; border: 10px solid #ffffff; box-shadow: 0 10px 40px rgba(0,0,0,0.10); } .features-section .image-column .image img{ display: block; width: 100%; } .feature-block-five{ position: relative; margin-bottom: 30px; } .feature-block-five .inner-box{ position: relative; padding: 20px 20px; background-color: #ffffff; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.10); transition: all 300ms ease; } .feature-block-five h4{ font-size: 20px; line-height: 1.2em; font-weight: 700; color: #7fc540; margin-bottom: 10px; } /*** ==================================================================== Welcome Section ==================================================================== ***/ .welcome-section{ position: relative; padding: 120px 0 90px; z-index: 1; } .welcome-section:before, .welcome-section:after{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-11.png); background-repeat: no-repeat; background-position: center; background-size: cover; content: ""; z-index: -1; } .welcome-section:before{ background-image: none; background-color: #cf0b0b; opacity: .10; } .welcome-section .sec-title{ margin-bottom: 30px; } /*=== Feature Block Four ===*/ .feature-block-six{ position: relative; margin-bottom: 30px; } .feature-block-six .inner-box{ position: relative; background-color: #ffffff; border-radius: 10px; padding: 30px 30px; transition: all 500ms ease; } .feature-block-six .inner-box:hover{ background-color: #1058bb; box-shadow: 0 10px 40px rgba(0,0,0,.10); } .feature-block-six .icon{ font-size: 60px; line-height: 1em; color: #1058bb; display: inline-block; margin-bottom: 15px; transition: all 300ms ease; } .feature-block-six .inner-box:hover .icon{ color: #ffffff; } .feature-block-six h4{ font-size: 20px; line-height: 1.2em; font-weight: 700; margin-bottom: 15px; transition: all 300ms ease; } .feature-block-six .inner-box:hover h4{ color: #ffffff; } .feature-block-six .text{ position: relative; transition: all 300ms ease; } .feature-block-six .inner-box:hover .text{ color: #ffffff; } /*** ==================================================================== About Section ==================================================================== ***/ .about-section{ position: relative; padding: 120px 0 70px; } .about-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-2.png); background-repeat: no-repeat; background-position: left bottom; background-size: 50%; opacity: .50; content: ""; } .about-section .sec-title{ margin-bottom: 0; } .about-section .content-column{ margin-bottom: 50px; } .about-section .content-column .inner-column{ position: relative; padding-top: 80px; } .about-section .content-column .link-box{ position: relative; margin-top: 30px; display: inline-flex; align-items: center; flex-wrap: wrap; } .about-section .content-column .link-box .signature{ margin-right: 30px; } .about-section .images-column{ margin-bottom: 50px; } .about-section .video-link{ position: absolute; left: 10px; top: 0; z-index: 1; } .about-section .video-link .play-btn{ position: relative; display: inline-block; margin-top: 100px; width: 100px; height: 100px; border-radius: 50%; color: #cf0b0b; text-align: center; background-color: #ffffff; line-height: 100px; box-shadow: 0 0px 30px rgba(0,0,0,0.10); font-size: 32px; transition: all 500ms ease; padding-left: 5px; } .about-section .video-link .play-btn:hover{ transform: rotate(360deg); } .about-section .images-column .inner-column{ position: relative; text-align: right; margin-right: -15px; } .about-section .image-1{ right: 50px; position: relative; } .about-section .image-2{ position: absolute; right: 300px; top: 200px; left: -70px; } .about-section .image-3{ position: absolute; display: inline-block; margin-top: 0; right: 20px; z-index: 3; bottom: -70px; } .about-section .image-3 .hex{ position: absolute; left: -45px; right: -45px; top: -55px; bottom: -55px; background-image: url(../images/icons/hex.png); background-repeat: no-repeat; background-position: center; background-size: cover; display: none; } /*** ==================================================================== About Section Two ==================================================================== ***/ .about-section-two{ position: relative; padding: 120px 0; } .about-section-two:after{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/background/2.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; content: ""; z-index: -1; } .about-section-two:before{ position: absolute; right: 0; bottom: 0; width: 50%; height: 40%; background-color: #cf0b0b; content: ""; transform: translateX(300px); } .about-section-two .sec-title{ margin-bottom: 50px; } .feature-block-two{ position: relative; margin-bottom: 30px; } .feature-block-two .inner-box{ position: relative; overflow: hidden; background-color: #ffffff; transition: all 300ms ease; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); padding: 30px 20px; -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-two .inner-box:hover{ background-color: #cf0b0b; } .feature-block-two .inner-box:before, .feature-block-two .inner-box:after{ position: absolute; height: 200px; width: 200px; right: -100px; top: -100px; border-radius: 50%; background-color: #ffffff; z-index: 9; transform: scale(0); content: ""; transition: all 600ms ease; } .feature-block-two .inner-box:hover:before{ transform: scale(1); opacity: .20; transition-delay: 100ms; } .feature-block-two .inner-box:hover:after{ transform: scale(1.7); opacity: .10; transition-delay: 200ms; } .feature-block-two .icon{ font-size: 30px; line-height: 1em; color: #cf0b0b; display: inline-block; margin-bottom: 20px; -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-two .inner-box:hover .icon { color: #ffffff; } .feature-block-two h4{ font-size: 20px; line-height: 1.2em; font-weight: 700; 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; } .feature-block-two .inner-box:hover h4 { color: #ffffff; } .feature-block-two p{ -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-two .inner-box:hover p{ color: #ffffff; } .about-section-two .image-column{ position: relative; } .about-section-two .image-box{ position: relative; padding-left: 30px; padding-top: 10px; } .about-section-two .image-box .image{ margin-bottom: 0; } .about-section-two .image-box .image img{ display: block; width: 100%; } .about-section-two .image-box .icon-box{ position: absolute; left: 0; right: 0; bottom: -50px; height: 100px; width: 100px; margin: 0 auto; background-color: #ffffff; border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.10); } /*** ==================================================================== About Section Three ==================================================================== ***/ .about-section-three{ position: relative; padding: 120px 0 90px; background-image: url(../images/icons/pattern-8.png); background-repeat: no-repeat; background-position: center; background-size: cover; } .about-section-three .sec-title{ margin-bottom: 70px; } .about-section-three .content-column{ position: relative; padding-top: 10px; margin-bottom: 100px; } .about-section-three .about-owner{ position: relative; padding-left: 180px; padding-top: 20px; } .about-section-three .about-owner .sign-img{ position: absolute; left: 0; top: 0; } .about-section-three .about-owner .name{ font-size: 24px; line-height: 30px; color: #ef5b3f; font-weight: 700; } .about-section-three .about-owner .designation{ font-size: 15px; color: #777777; } .feature-block-three{ position: relative; margin-bottom: 30px; } .feature-block-three .inner-box{ position: relative; background-color: #ffffff; border-radius: 10px; border: 1px solid #eeeeee; padding: 30px 20px; padding-left: 110px; transition: all 300ms ease; } .feature-block-three .inner-box:hover{ box-shadow: 0 10px 30px rgba(0,0,0,0.10); transform: translateY(-20px); } .feature-block-three .inner-box:before{ position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; content: ""; border-bottom:3px solid #cf0b0b; -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); -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); } .feature-block-three .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; } .feature-block-three .icon { position: absolute; left: 20px; top: 30px; font-size: 64px; line-height: 1em; color: #cf0b0b; display: inline-block; margin-bottom: 20px; z-index: 1; } .feature-block-three h4{ font-size: 20px; line-height: 1.2em; font-weight: 700; margin-bottom: 10px; } .about-section-three .image-column{ position: relative; margin-bottom: 50px; } .about-section-three .image-box{ position: relative; padding-right: 40px; } .about-section-three .image-box .image{ margin-bottom: 0; border: 10px solid #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.10); } .about-section-three .image-box .image img{ display: block; width: 100%; } /*** ==================================================================== About Section Four ==================================================================== ***/ .about-section-four{ position: relative; padding: 90px 0 0; } .about-section-four:before{ position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; content: ""; background-image: url(../images/icons/pattern-11.png); background-repeat: no-repeat; background-position: left bottom; transform: scaleX(-1); } .about-section-four .sec-title{ margin-bottom: 70px; } .about-section-four .content-column{ position: relative; padding-top: 10px; } .about-section-four .content-column p strong, .about-section-four .content-column p a{ color: #7fc540; } .about-section-four .about-owner{ position: relative; padding-left: 180px; padding-top: 20px; } .about-section-four .about-owner .sign-img{ position: absolute; left: 0; top: 0; } .about-section-four .about-owner .name{ font-size: 24px; line-height: 30px; color: #222222; font-weight: 700; } .about-section-four .about-owner .designation{ font-size: 15px; color: #777777; } .about-section-four .image-column{ position: relative; } .about-section-four .image-box{ position: relative; text-align: center; } .about-section-four .image-box .image{ position: relative; margin: 0; } .about-section-four .image-box .image:before{ position: absolute; right: 70px; top: 100px; height: 70%; width: 80%; border: 15px solid #87c94c; content: ""; box-shadow: 0 10px 30px rgba(0,0,0,.10); } .about-section-four .image-box .image img{ display: inline-block; position: relative; bottom: -5px; } /*** ==================================================================== Skills Section ==================================================================== ***/ .skill-section{ position: relative; padding: 100px 100px; background-image: url(../images/icons/pattern-1.png); background-repeat: repeat; background-position: center right; } .skill-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 25%; background-color: #cf0b0b; content: ""; } .skill-section .sec-title{ margin-bottom: 40px; } .skill-section .outer-container{ position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.10); background-color: #ffffff; } .skill-section .image-column{ position: absolute; left: 0; top: 0; bottom: 0; width: 50%; z-index: 1; background-repeat: no-repeat; background-position: center; background-size: cover; } .skill-section .image-column .image-box{ position: relative; display: none; } .skill-section .image-column .image-box .image{ position: relative; margin-bottom: 0; } .skill-section .image-column .image-box .image img{ display: block; width: 100%; height: auto; } .skill-section .skill-column{ position: relative; float: right; width: 50%; } .skill-section .skill-column .inner-column{ position: relative; padding: 50px 50px; } .skill-section .skill-column .skills{ position: relative; margin-bottom: 50px; } .skills{ position: relative; margin-bottom: 30px; } .skills .skill-item{ position:relative; margin-bottom:20px; } .skills .skill-item:last-child{ margin-bottom:0px; } .skills .skill-item .skill-bar{ position:relative; width:100%; height:5px; background-color:#ffffff; border-radius: 5px; } .skills .skill-item .skill-bar .bar-inner{ position:relative; width:100%; height:5px; background:#eeeeee; } .skills .skill-item .skill-bar .bar-inner .bar{ position:absolute; left:0px; top:0px; height:5px; width:0px; -webkit-transition:all 3000ms ease; -moz-transition:all 3000ms ease; -ms-transition:all 3000ms ease; -o-transition:all 3000ms ease; transition:all 3000ms ease; background-color: #cf0b0b; } .skills .skill-item .skill-header{ position:relative; margin-bottom:10px; } .skills .skill-item .skill-header .skill-title{ position:relative; float:left; font-size:16px; line-height:30px; color:#000000; font-weight:600; } .skills .skill-item .skill-header .skill-percentage{ float:right; font-size:16px; font-weight:600; color:#000000; line-height:30px; } .skill-section .text-column{ position:relative; margin-bottom: 50px; } .skill-section .text-column .text{ position: relative; font-size:18px; font-weight:500; color:#222222; line-height:30px; } /*** ==================================================================== Services Section ==================================================================== ***/ .services-section{ position: relative; padding: 120px 0 90px; background-color: #f5f5f5; } .services-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-3.png); background-repeat: no-repeat; background-position: center top; background-size: 100%; opacity: .23; content: ''; } .service-block{ position: relative; display: block; margin-bottom: 30px; } .service-block .inner-box{ position: relative; padding: 30px 30px; text-align: center; border-radius: 15px 15px 0 0; border-bottom: 3px solid transparent; -webkit-transition: all 500ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 500ms ease; } .service-block .inner-box:hover{ background-color: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.10); transform: translateY(-20px); border-bottom: 4px solid #cf0b0b; } .service-block .icon{ position: relative; display: inline-flex; height: 100px; width: 100px; background-color: #ffffff; font-size: 42px; color: #cf0b0b; justify-content: center; align-items: center; margin-bottom: 15px; border-radius: 50%; border: 1px solid #dddddd; -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 .icon:before{ z-index: 1; } .service-block .icon.flaticon-heartbeat:before{ position: relative; top: 5px; } .service-block .inner-box:hover .icon{ border: 0; font-size: 62px; } .service-block .icon:after{ position: absolute; left: 0; top: 0; height: 0%; width: 100%; background-color: #cf0b0b; content: ""; opacity: 0; z-index: 0; } .service-block .inner-box:hover .icon:after{ height: 100%; opacity: .05; transition-delay: 200ms; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 500ms ease; } .service-block h5{ position: relative; display: block; font-size: 24px; line-height: 1.2em; margin-bottom: 10px; } .service-block h5 a{ display: inline-block; color: inherit; -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 h5 a:hover{ color: inherit; } .service-block .text{ position: relative; cursor: default; } /*** ==================================================================== Service Section Two ==================================================================== ***/ .services-section-two{ position: relative; background-repeat: no-repeat; background-position: left top; padding: 120px 0; background-image: url(../images/icons/pattern-5.png); background-color: #fafafa; } .services-section-two .right-btn{ margin-top: 60px; } .services-section-two .carousel-outer{ margin: -20px -20px 0; } .services-section-two .services-carousel{ padding-bottom: 20px; } .services-section-two .services-carousel .service-block-two{ padding: 20px; } .services-carousel .owl-nav{ display: none; } .service-block-two{ position: relative; margin-bottom: 30px; } .service-block-two .inner-box{ position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,.10); -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{ } .service-block-two .image-box{ position: relative; border:10px solid #ffffff; } .service-block-two .image-box .image{ position: relative; margin-bottom: 0; overflow: hidden; } .service-block-two .image-box .image img{ position: relative; display: block; width: 100%; -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{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .service-block-two .inner-box:hover .image-box .icon{ opacity: 0; } .service-block-two .lower-content{ position: relative; padding: 30px 20px 40px; background-color: #ffffff; } .service-block-two .lower-content .title-box{ position: relative; display: flex; align-items: center; margin-bottom: 15px; } .service-block-two .lower-content .icon{ position: relative; display: block; font-size: 25px; line-height: 1em; margin-right: 10px; color: #cf0b0b; } .service-block-two .lower-content h4{ position: relative; display: block; font-size: 24px; line-height: 1.2em; color: #353535; font-weight: 600; } .service-block-two .lower-content h4 a{ color: #353535; -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 .lower-content h4 a:hover{ color: #cf0b0b; } .service-block-two .lower-content .text{ position: relative; } .service-block-two .btn-box{ position: relative; margin-top: 15px; } .service-block-two .btn-box a{ position: relative; display: inline-block; font-size: 16px; line-height: 24px; font-weight: 600; 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; } .service-block-two .btn-box a span{ opacity: 0; visibility: hidden; font-size: 12px; transform: translateX(-20px); } .service-block-two .btn-box a:hover{ color: #cf0b0b; } .service-block-two .lower-content .icon-right{ position: absolute; right: -20px; bottom: -20px; font-size: 120px; line-height: 1em; color: #000000; opacity: .05; } /*** ==================================================================== Services Section Three ==================================================================== ***/ .services-section-three{ position: relative; padding: 120px 0 90px; background-color: #fff8f6; } .services-section-three:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-9.png); background-repeat: no-repeat; background-position: left bottom; background-size: 100%; opacity: .23; content: ''; } .service-block-three{ position: relative; display: block; margin-bottom: 30px; } .service-block-three .inner-box{ position: relative; padding: 30px 30px; padding-left: 150px; background-color: #ffffff; -webkit-transition: all 500ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 500ms ease; } .service-block-three .inner-box:hover{ background-color: #ffffff; box-shadow: 0 20px 30px rgba(0,0,0,0.05); } .service-block-three .icon{ position: absolute; left: 0px; top: 0px; font-size: 56px; line-height: 110px; width: 110px; color: #ffffff; text-align: center; background-color: #ef5b3f; border-radius: 0 0 20px 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; } .service-block-three h5{ position: relative; display: block; font-size: 24px; line-height: 1.2em; font-weight: 700; color: #222222; margin-bottom: 10px; } .service-block-three h5 a{ display: inline-block; color: inherit; -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-three h5 a:hover{ color: inherit; } .service-block-three .text{ position: relative; cursor: default; } .service-block-three .icon-float{ position: absolute; right: 0; bottom: 0; line-height: 1em; font-size: 100px; color: #000000; opacity: .05; } /*** ==================================================================== Service Section Four ==================================================================== ***/ .services-section-four{ position: relative; background-repeat: no-repeat; background-position: left top; padding: 120px 0; background-color: #fafafa; } .services-section-four .right-btn{ margin-top: 60px; } .services-section-four .carousel-outer{ margin: 0 -20px; } .services-section-four .services-carousel{ padding-bottom: 20px; } .service-block-four{ position: relative; padding: 20px; margin-bottom: 30px; } .service-block-four .inner-box{ position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,.10); -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block-four .inner-box:hover{ } .service-block-four .image-box{ position: relative; border:10px solid #ffffff; } .service-block-four .image-box .image{ position: relative; margin-bottom: 0; background-color: #ffffff; overflow: hidden; } .service-block-four .image-box .image img{ position: relative; display: block; width: 100%; -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-four .inner-box:hover .image 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); opacity: .75; } .service-block-four .inner-box:hover .image-box .icon{ opacity: 0; } .service-block-four .lower-content{ position: relative; padding: 20px 20px; background-color: #ffffff; } .service-block-four .lower-content h4{ position: relative; display: block; font-size: 24px; line-height: 1.2em; color: #353535; font-weight: 600; margin-bottom: 10px; } .service-block-four .lower-content h4 a{ color: #353535; -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-four .lower-content h4 a:hover{ color: #7fc540; } .service-block-four .lower-content .text{ position: relative; } .service-block-four .lower-content .read-more{ position: relative; display: inline-block; font-size: 16px; line-height: 1.2em; color: #87c94c; margin-top: 15px; } .service-block-four .lower-content .read-more i{ line-height: 1.2em; font-size: 16px; } .service-block-four .btn-box{ position: relative; margin-top: 15px; } .service-block-four .btn-box a{ position: relative; display: inline-block; font-size: 16px; line-height: 24px; font-weight: 600; 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; } .service-block-four .btn-box a span{ opacity: 0; visibility: hidden; font-size: 12px; transform: translateX(-20px); } .service-block-four .btn-box a:hover{ color: #cf0b0b; } .service-block-four .lower-content .icon-right{ position: absolute; right: -20px; bottom: -20px; font-size: 120px; line-height: 1em; color: #000000; opacity: .05; } /*** ==================================================================== Service Section Five ==================================================================== ***/ .services-section-five{ position: relative; padding: 120px 0; } .service-block-five{ position: relative; padding: 20px; margin-bottom: 30px; } .service-block-five .inner-box{ position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,.10); -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block-five .inner-box:hover{ } .service-block-five .image-box{ position: relative; } .service-block-five .image-box .image{ position: relative; margin-bottom: 0; overflow: hidden; } .service-block-five .image-box .image img{ position: relative; display: block; width: 100%; -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-five .inner-box:hover .image 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); } .service-block-five .inner-box:hover .image-box .icon{ opacity: 0; } .service-block-five .lower-content{ position: relative; padding: 20px 20px; background-color: #ffffff; text-align: center; } .service-block-five .lower-content h4{ position: relative; display: block; font-size: 24px; line-height: 1.2em; color: #353535; font-weight: 600; margin-bottom: 10px; } .service-block-five .lower-content h4 a{ color: #353535; -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-five .lower-content h4 a:hover{ color: #7fc540; } .service-block-five .lower-content .text{ position: relative; } .service-block-five .lower-content .read-more{ position: relative; display: inline-block; font-size: 16px; line-height: 1.2em; color: #1058bb; margin-top: 15px; } .service-block-five .lower-content .read-more i{ line-height: 1.2em; font-size: 16px; } .service-block-five .btn-box{ position: relative; margin-top: 15px; } .service-block-five .btn-box a{ position: relative; display: inline-block; font-size: 16px; line-height: 24px; font-weight: 600; 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; } .service-block-five .btn-box a span{ opacity: 0; visibility: hidden; font-size: 12px; transform: translateX(-20px); } .service-block-five .btn-box a:hover{ color: #cf0b0b; } .service-block-five .lower-content .icon-right{ position: absolute; right: -20px; bottom: -20px; font-size: 120px; line-height: 1em; color: #000000; opacity: .05; } /*** ==================================================================== Service Detail ==================================================================== ***/ .service-detail{ position: relative; padding-left: 20px; } .service-detail .images-box{ position: relative; margin: 0 -5px; } .service-detail .images-box .column{ padding: 0 5px; } .service-detail .images-box .image{ position: relative; margin-bottom: 10px; } .service-detail .images-box .image img{ display: block; width: 100%; height: auto; } .service-detail .content-box{ position: relative; padding: 20px 0 0; } .service-detail .content-box .title-box{ position: relative; margin-bottom: 30px; } .service-detail .content-box h2{ position: relative; display: block; font-size: 34px; line-height: 1.2em; color: #343a40; font-weight: 700; margin-bottom: 10px; } .service-detail .content-box h3{ position: relative; display: block; font-size: 24px; line-height: 1.2em; color: #343a40; font-weight: 700; margin-bottom: 20px; } .service-detail .content-box p{ position: relative; display: block; font-size: 16px; line-height: 26px; color: #777777; font-weight: 400; margin-bottom: 26px; } .service-detail .two-column{ position: relative; } .service-detail .two-column p{ margin-bottom: 25px; } .service-detail .two-column .image-column{ position: relative; margin-bottom: 35px; } .service-detail .two-column .image-column .image{ margin-bottom: 0; } .service-detail .two-column .image-column .image img{ display: block; width: 100%; } .service-detail .two-column .text-column{ position: relative; } .service-detail .prod-tabs{ position:relative; margin-top: 50px; } .service-detail .prod-tabs .tab-btns{ position:relative; z-index:1; border-bottom:1px solid #dddddd; } .service-detail .prod-tabs .tab-btns .tab-btn{ position:relative; top:1px; display:block; float:left; margin-right:5px; font-size:16px; color:#333333; background:#ffffff; text-transform:capitalize; font-weight:400; line-height:23px; cursor:pointer; border:1px solid #e5e5e5; border-bottom: 0; padding: 10px 25px; 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; } .service-detail .prod-tabs .tab-btns .tab-btn:before{ position:absolute; content:''; top: 0; left: 50%; width:0%; height:3px; background-color:#cf0b0b; 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; } .service-detail .prod-tabs .tab-btns .tab-btn.active-btn:before{ width: 100%; left: 0; } .service-detail .prod-tabs .tab-btns .tab-btn.active-btn:after{ position:absolute; content:''; left:0px; bottom:-3px; width:100%; height:5px; background-color:#ffffff; 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; } .service-detail .prod-tabs .tab-btns .tab-btn.active-btn{ color: #cf0b0b; background: #ffffff; } .service-detail .prod-tabs .tabs-content{ position:relative; padding:25px 30px 45px; border:1px solid #dddddd; } .service-detail .prod-tabs .tabs-content .tab{ position:relative; display:none; border-top:0px; } .service-detail .prod-tabs .tabs-content .tab.active-tab{ display:block; } .service-detail .prod-tabs .tabs-content .tab .content{ position:relative; } .service-detail .prod-tabs .tabs-content .tab .content p{ position:relative; font-size:16px; line-height: 26px; color:#666666; margin-bottom:0px; } /*Services Category*/ .services-categories{ position:relative; margin-bottom: 50px; background-color: #fcfcfc; border: 10px solid #ffffff; box-shadow: 0 0px 20px rgba(0,0,0,0.10); } .services-categories li{ position:relative; border:1px solid #e7e7e7; border-bottom: 0; z-index: 9; } .services-categories li:last-child{ border-bottom: 1px solid #e7e7e7; } .services-categories li a{ font-size: 16px; font-weight: 500; color: #222222; line-height: 30px; padding: 10px 25px; display: block; padding-left: 38px; overflow: hidden; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .services-categories li.active a, .services-categories li:hover a{ color: #ffffff; } .services-categories li a:before{ position: absolute; left: 20px; top: 10px; font-size: 12px; line-height: 30px; color: #222222; font-weight: 900; content: "\f0da"; font-family: "Font Awesome 5 Free"; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .services-categories li.active a:before, .services-categories li:hover a:before{ color: #ffffff; } .services-categories li a:after{ position: absolute; left: -1px; top: 0; height: 100%; width: 100%; content: ""; background-color: #cf0b0b; z-index: -1; -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; } .services-categories li.active a:after, .services-categories li:hover a:after{ -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } /*=== Brochures Box ===*/ .brochures-box{ position: relative; margin-bottom: 50px; } .brochures-box .inner{ position: relative; background-color: #fcfcfc; border: 10px solid #ffffff; box-shadow: 0 0 20px rgba(0,0,0,0.10); padding: 25px 20px 20px; } .brochures-box h4{ display: block; font-size: 21px; line-height: 1.2em; color: #222222; font-weight: 700; margin-bottom: 15px; } .brochures-box .text{ font-size: 15px; line-height: 23px; color: #222222; margin-bottom: 20px; } .brochures-box .theme-btn{ font-size: 14px; line-height: 20px; padding: 8px 20px; display: block; width: 100%; text-align: center; text-transform: uppercase; margin-bottom: 10px; } .brochures-box .theme-btn i{ margin-right: 3px; } /*Help Box*/ .help-box{ position:relative; background-size:cover; padding:30px 20px; background-color: #fcfcfc; border: 10px solid #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,.10); } .help-box > span{ position: relative; display: block; font-size: 14px; line-height: 20px; color: #222222; margin-bottom: 10px; } .help-box h4{ position:relative; color:#222222; font-size:21px; font-weight:700; line-height:1.2em; margin-bottom:15px; } .help-box p{ position:relative; color:#222222; font-size:14px; line-height:24px; margin-bottom:20px; } .help-box .theme-btn{ padding: 5px 30px; font-size: 14px; font-weight: 700; } /*** ==================================================================== Why Choose Us ==================================================================== ***/ .why-choose-us{ position: relative; } .why-choose-us .upper-box{ position: relative; padding: 120px 0 340px; background-repeat: no-repeat; background-position: center; background-size: cover; } .why-choose-us .upper-box:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #222222; content: ""; opacity: .90; } .why-choose-us .content-box{ position: relative; } .why-choose-us .content-box .inner{ position: relative; } .why-choose-us .content-box .icon-box{ position: relative; margin-bottom: 60px; } .why-choose-us .content-box .icon-box .title{ position: relative; display: inline-block; font-size: 20px; line-height: 1.2em; color: #87c94c; font-weight: 600; text-transform: uppercase; margin-left: 60px; border-bottom: 1px solid #87c94c; } .why-choose-us .content-box .title-box{ position: relative; } .why-choose-us .content-box .title-box span{ display: block; font-size: 18px; color: #bbbbbb; font-weight: 400; margin-bottom: 10px; } .why-choose-us .content-box .title-box h4{ font-size: 30px; color: #87c94c; font-weight: 500; margin-bottom: 10px; } .why-choose-us .content-box .title-box h3{ font-size: 36px; color: #ffffff; font-weight: 700; } .why-choose-us .skill-column .skills{ position: relative; padding-top: 20px; } .why-choose-us .skills .skill-item .skill-header .skill-title{ color: #ffffff; } .why-choose-us .appointment-box{ position: relative; background-color: #ffffff; margin-top: -230px; box-shadow: 0 10px 40px rgba(0,0,0,0.10); border-radius: 10px; overflow: hidden; } .why-choose-us .appointment-box .form-column, .why-choose-us .appointment-box .form-column .inner-column{ position: relative; height: 100%; } .why-choose-us .appointment-box .appointment-form{ box-shadow: none; height: 100%; } .why-choose-us .appointment-box .appointment-form:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #cf0b0b; content: ""; opacity: .20; } .why-choose-us .appointment-box .image-column{ position: relative; padding: 40px 70px 0; } .why-choose-us .appointment-box .image{ margin-bottom: 0; } .why-choose-us .appointment-box .image:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-12.png); background-repeat: no-repeat; background-position: left top; opacity: .50; content: ""; } .why-choose-us .appointment-box .image img{ position: absolute; left: 0; right: 0; bottom: 0; width: 75%; margin: 0 auto; display: block; } /*** ==================================================================== Portfolio Section ==================================================================== ***/ .portfolio-section{ position: relative; padding: 120px 0 90px; } .portfolio-section .sec-title{ z-index: 1; margin-bottom: 50px; } .portfolio-section .btns-outer { position: relative; margin-top: -130px; top: -40px; text-align: right; } .portfolio-section .btns-outer .theme-btn{ position: relative; margin-bottom: 35px; } .mixitup-gallery .filter-tabs{ position: relative; text-align: center; display: flex; justify-content: flex-end; align-items: center; margin-bottom: 35px; } .mixitup-gallery .filter-tabs li{ position: relative; font-size: 18px; color: #666666; font-weight: 600; margin-left: 44px; transition: all 300ms ease; border-top: 3px solid transparent; cursor: pointer; } .mixitup-gallery .filter-tabs li.active{ color: #cf0b0b; border-color: #cf0b0b; } .mixitup-gallery .mix { display: none; } .portfolio-block{ position: relative; margin-bottom: 30px; } .portfolio-block .image-box{ position: relative; overflow: hidden; } .portfolio-block .image-box .image{ margin-bottom: 0; } .portfolio-block .image-box .image img{ display: block; width: 100%; transition: all 200ms ease; } .portfolio-block .image-box:hover .image img{ transform: scale(1.2); } .portfolio-block .overlay{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; z-index: 1; } .portfolio-block .overlay .title-box{ position: absolute; left: 0; bottom: 0; width: 100%; display: flex; z-index: -1; flex-direction: column; padding: 10px 15px; transition: all 200ms ease; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .portfolio-block .image-box:hover .overlay .title-box{ bottom: 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .portfolio-block .overlay .title-box:before{ background-color: #cf0b0b; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: .90; color: #ffffff; } .portfolio-block .overlay .icon-box{ position: relative; height: 50px; width: 50px; background-color: #cf0b0b; color: #ffffff; font-size: 20px; line-height: 50px; border-radius: 50%; opacity: 0; text-align: center; transform: translateY(-25px) scale(0); transition: all 200ms ease; } .portfolio-block .image-box:hover .overlay .icon-box{ opacity: 1; transform: translateY(-25px) scale(1); } .portfolio-block .overlay h5{ font-size: 20px; line-height: 1.2em; color: #ffffff; font-weight: 600; display: block; margin-bottom: 0px; } .portfolio-block .cat{ position: relative; display: flex; justify-content: center; align-items: center; } .portfolio-block .cat a{ color: #ffffff; font-size: 14px; } .portfolio-section.alternate{ position: relative; padding: 120px 0; } .portfolio-section.alternate .btn-box{ position: relative; text-align: center; margin-top: 30px; } .portfolio-section.alternate .btns-outer{ margin: 0 0 20px; top: 0; display: flex; justify-content: center; align-items: center; } /*** ==================================================================== Team Section ==================================================================== ***/ .team-section{ position: relative; padding: 0px 0; } .team-section.alternate{ background-color: #fcfcfc; } .team-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-2.png); background-repeat: no-repeat; background-position: left bottom; background-size: 50%; opacity: .50; transform: scale(-1); content: ""; } .team-block{ position: relative; margin-bottom: 50px; } .team-block .inner-box{ position: relative; overflow: hidden; text-align: center; border: 5px solid #ffffff; max-width: 370px; 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; box-shadow: 0 0px 10px rgba(0,0,0,0.10); } .team-block .inner-box:hover{ box-shadow: 0 20px 30px rgba(0,0,0,0.10); } .team-block .image:after{ position: absolute; left: 0; bottom: 0; width: 100%; background: rgb(255,255,255); background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1); content: ""; height: 0; border-radius: 50% 50% 0 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; } .team-block .inner-box:hover .image:after{ height: 50%; } .team-block .image{ position: relative; overflow: hidden; margin-bottom: 0; } .team-block .image 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 .image img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 2000ms ease; -moz-transition: all 2000ms ease; -ms-transition: all 2000ms ease; -o-transition: all 2000ms ease; transition: all 2000ms ease; } .team-block .social-links{ position: absolute; left: -50px; top: 20px; -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 .inner-box:hover .social-links{ left: 20px; } .team-block .social-links li{ position: relative; display: block; margin-bottom: 10px; } .team-block .social-links li a{ position: relative; display: block; font-size: 16px; line-height: 1.2em; height: 35px; width: 35px; background-color: #ffffff; text-align: center; color: #777777; line-height: 35px; box-shadow: 0 0 5px rgba(0,0,0,0.10); -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 .social-links li a:hover{ color: #ffffff; background-color: #cf0b0b; } .team-block .info-box{ position: absolute; left: 0; bottom: -100px; width: 100%; padding: 30px 20px; z-index: 1; 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; } .team-block .inner-box:hover .info-box{ bottom: 0; opacity: 1; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .team-block .name{ position: relative; display: block; font-size: 22px; line-height: 1.2em; font-weight: 700; margin-bottom: 10px; } .team-block .name a{ color: inherit; } .team-block .designation{ position: relative; display: block; font-size: 14px; line-height: 1.2em; color: #777777; font-weight: 400; } /*** ==================================================================== Team Section Two ==================================================================== ***/ .team-section-two{ position: relative; padding: 120px 0 120px; background-repeat: no-repeat; background-position: bottom; } .team-section-two .sec-title{ margin-bottom: 60px; } .team-section-two .sec-bottom-text{ margin-top: 20px; } .team-block-two{ position: relative; margin-bottom: 30px; } .team-block-two .inner-box{ position: relative; max-width: 340px; margin: 0 auto; -webkit-box-shadow: 0 0 35px 0 rgba(0,0,0,0.07); -moz-box-shadow: 0 0 35px 0 rgba(0,0,0,0.07); box-shadow: 0 0 35px 0 rgba(0,0,0,0.07); } .team-block-two .info-box{ position: relative; background-color: #ffffff; border-bottom: 5px solid #eeeeee; overflow: hidden; } .team-block-two .inner-box:before{ position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; content: ""; background-color: #105abf; z-index: 1; -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); -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); } .team-block-two .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; } .team-block-two .image-box{ position: relative; text-align: center; overflow: hidden; border: 10px solid #ffffff; border-bottom: 0; } .team-block-two .image-box .social-links{ position: absolute; left: 20px; top: 20px; } .team-block-two .image-box .social-links li{ position: relative; display: block; right: 0; top: 20px; opacity: 0; visibility: hidden; background-color: #ffffff; } .team-block-two .image-box .social-links li a{ display: block; text-align: center; font-size: 18px; line-height: 40px; width: 40px; color: #ffffff; text-align: center; font-weight: 400; background-color: #cf0b0b; -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-two .image-box .social-links li a:hover{ color: #cf0b0b; background-color: #ffffff; } .team-block-two .inner-box:hover .image-box .social-links li:nth-child(2){ transition-delay: 100ms; } .team-block-two .inner-box:hover .image-box .social-links li:nth-child(3){ transition-delay: 200ms; } .team-block-two .inner-box:hover .image-box .social-links li:nth-child(4){ transition-delay: 300ms; } .team-block-two .inner-box:hover .image-box .social-links li:nth-child(5){ transition-delay: 400ms; } .team-block-two .inner-box:hover .image-box .social-links li:nth-child(6){ transition-delay: 500ms; } .team-block-two .inner-box:hover .image-box .social-links li:nth-child(7){ transition-delay: 600ms; } .team-block-two .inner-box:hover .image-box .social-links li:nth-child(8){ transition-delay: 700ms; } .team-block-two .inner-box:hover .image-box .social-links li:nth-child(9){ transition-delay: 800ms; } .team-block-two .inner-box:hover .image-box .social-links li:nth-child(10){ transition-delay: 900ms; } .team-block-two .inner-box:hover .image-box .social-links li{ left: 0px; top: 0; opacity: 1; visibility: visible; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .team-block-two .image-box .image{ position: relative; margin-bottom: 0; overflow: hidden; } .team-block-two .image-box .image img{ display: block; width: 100%; height: auto; filter: grayscale(1); -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-two .inner-box:hover .image img{ filter: grayscale(0); transform: scale(1.1); } .team-block-two .info-box{ position: relative; padding: 31px 15px 27px; text-align: center; } .team-block-two .info-box .name{ position: relative; display: block; font-size: 24px; line-height: 1.2em; color: #000000; font-weight: 600; } .team-block-two .info-box .name a{ color: #000000; } .team-block-two .info-box .designation{ position: relative; color: #cf0b0b; font-size: 15px; line-height: 27px; font-weight: 600; } .team-section-two.alternate{ background: none; } .team-section-two.alternate .team-block-two .image-box .image img{ filter: grayscale(0); } .team-section-two.alternate2{ background-color: #fcfcfc; } /*** ==================================================================== Doctor Detail Section ==================================================================== ***/ .doctor-detail-section{ position: relative; padding: 120px 0 70px; background-color: #fafafa; } .doctor-detail-section .content-side { margin-bottom: 50px; } .docter-detail .name{ font-size: 34px; line-height: 1.2em; color: #222222; font-weight: 700; margin-bottom: 10px; } .docter-detail .designation{ position: relative; display: block; font-size: 18px; color: #cf0b0b; margin-bottom: 30px; } .docter-detail .text{ margin-bottom: 30px; } .doctor-info-list{ position: relative; margin-bottom: 50px; } .doctor-info-list li{ position: relative; margin-bottom: 15px; padding-left: 200px; } .doctor-info-list li strong{ position: absolute; left: 0; top: 0; font-size: 16px; color: #222222; min-width: 200px; } .doctor-info-list li p{ position: relative; } .doctor-info-list li p a{ color: inherit; } .doctor-detail-section .team-block .image:after{ display: none; } .doctor-detail-section .appointment-form{ box-shadow: none; background:none; padding: 0; padding-top: 50px; border-top: 1px solid #dddddd; margin-top: 40px; } .doctor-detail-section .sidebar-side .sidebar{ position: relative; padding-right: 30px; } .docter-availability{ position: relative; background-color: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.10); padding: 30px; } .docter-availability .sec-title{ margin-bottom: 30px; } .timing-list-two{ position: relative; } .timing-list-two { position: relative; display: block; max-width: 500px; } .timing-list-two li { position: relative; display: flex; justify-content: space-between; font-size: 14px; line-height: 28px; color: #777777; font-weight: 400; padding: 6px 0; border-bottom: 1px solid #eeeeee; } .timing-list-two li:last-child{ border-bottom: 0; } /*** ==================================================================== Pricing Section ==================================================================== ***/ .pricing-section{ position: relative; padding: 120px 0; overflow: hidden; background-color: #f9f9fb; } .pricing-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-6.png); background-repeat: repeat; background-position: center top; opacity: .50; content: ""; } .pricing-section .tab-buttons{ position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 70px; } .pricing-section .tab-buttons li{ position: relative; padding: 10px 30px; background-color: #ffffff; color: #222222; margin: 10px 10px; font-size: 16px; min-width: 120px; text-align: center; cursor: pointer; font-weight: 600; line-height: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.10); } .pricing-section .tab-buttons li.active-btn{ background-color: #cf0b0b; color: #ffffff; } .pricing-section .outer-box{ max-width: 1100px; margin: 0 auto; } .pricing-block{ position: relative; margin-bottom: 40px; } .pricing-block .inner-box{ position: relative; max-width: 320px; margin: 0 auto; padding: 0 25px 30px; background-color: #ffffff; box-shadow: 0 0px 10px rgba(0,0,0,0.10); transition: all 300ms ease; } .pricing-block .inner-box:hover{ box-shadow: 0 20px 40px rgba(0,0,0,0.10); } .pricing-block .price-box{ position: relative; text-align: center; padding: 20px 20px 20px; margin-bottom: 20px; } .pricing-block .price-box:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #cf0b0b; opacity: .10; content: ""; transition: all 300ms ease; } .pricing-block .price{ display: block; font-size: 36px; font-weight: 700; color: #cf0b0b; } .pricing-block .price .validaty{ display: block; font-size: 14px; text-transform: uppercase; line-height: 24px; } .pricing-block .title{ position: relative; display: block; text-align: center; font-size: 24px; line-height: 1.2em; color: #222222; font-weight: 600; padding-bottom: 15px; border-bottom: 1px solid #dddddd; margin-bottom: 15px; } .pricing-block .features{ position: relative; max-width: 200px; margin: 0 auto 20px; } .pricing-block .features li{ position: relative; display: block; font-size: 14px; line-height: 30px; color: #848484; font-weight: 500; padding: 5px 0; padding-left: 30px; border-bottom: 1px dashed #dddddd; } .pricing-block .features li:before{ position: absolute; left: 0; top: 5px; font-size: 14px; line-height: 30px; content: "\f166"; font-family: 'Flaticon'; color: #cf0b0b; } .pricing-block .features li.false:before{ color: #e1137b; content: "\51"; } .pricing-block .features li a{ color: #848484; } .pricing-block .features li:last-child{ border-bottom: 0; } .pricing-block .btn-box{ position: relative; text-align: center; } .pricing-block .btn-box a{ position: relative; display: inline-block; font-size: 16px; line-height: 20px; color: #cf0b0b; background-color: #ffffff; font-weight: 600; padding: 8px 30px; border: 2px solid #cf0b0b; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 300ms ease; } .pricing-block .inner-box:hover .btn-box a{ color: #ffffff; background-color: #cf0b0b; } .pricing-block .btn-box a:hover{ box-shadow: 0 10px 20px rgba(0,0,0,0.20); } /*** ==================================================================== Appointment Section ==================================================================== ***/ .appointment-section{ position: relative; } .appointment-section:before, .appointment-section:after, .appointment-section .image-layer:before, .appointment-section .image-layer{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .appointment-section .image-layer:before{ content: ""; background-color: #cf0b0b; opacity: .90; } .appointment-section:before{ content: ""; background-color: #ffffff; height: 110px; z-index: 1; } .appointment-section:after{ top: auto; bottom: 0; content: ""; background-color: #ffffff; height: 110px; } .appointment-section.alternate:before{ background-color: #f5f5f5; } .appointment-section .content-column{ position: relative; } .appointment-section .content-column .inner-column{ position: relative; padding: 140px 0 0; } .appointment-section .title{ font-size: 18px; font-weight: 400; color: #ffffff; display: block; text-transform: uppercase; margin-bottom: 10px; } .appointment-section h2{ line-height: 1.2em; color: #ffffff; font-weight: 700; font-size: 48px; margin-bottom: 20px; } .appointment-section .number{ font-size: 18px; line-height: 28px; color:#ffffff; font-weight: 400; display: block; margin-bottom: 80px; } .appointment-section .number strong{ font-size: 30px; display: block; margin-top: 10px; } .appointment-section .image-column{ position: relative; z-index: 1; } .appointment-section .image-column .image{ position: relative; margin-bottom: 0; margin-left: -70px; margin-top: 155px; } .appointment-section .image-column .image img{ display: block; width: 100%; } /*** ==================================================================== Appointment Section Two ==================================================================== ***/ .appointment-section-two{ position: relative; } .appointment-section-two .outer-box{ position: relative; } .appointment-section-two:before, .appointment-section-two .outer-box:before, .appointment-section-two .outer-box:after{ position: absolute; left: 0; top: 0; height: 50px; width: 100%; background-color: #ffffff; content: ""; } .appointment-section-two .outer-box:after{ top: auto; bottom: 0; } .appointment-section-two:before{ background-color: #cf0b0b; opacity: .90; height: 100%; } .appointment-section-two .testimonial-column{ position: relative; margin-bottom: 50px; z-index: 1; } .appointment-section-two .testimonial-column .inner-column{ position: relative; padding: 150px 0 50px; } .appointment-section-two .testimonial-column .sec-title{ margin-bottom: 40px; } .testimonial-block-three{ position: relative; } .testimonial-block-three .inner-box{ position: relative; } .testimonial-block-three .text-box{ padding: 30px 30px; border: 2px dashed #ffffff; margin-bottom: 30px; } .testimonial-block-three .text-box p{ color: #ffffff; font-size: 16px; line-height: 1.8em; font-weight: 300; } .testimonial-block-three .info-box{ position: relative; padding-left: 100px; height: 75px; padding-top: 10px; } .testimonial-block-three .info-box .image{ position: absolute; left: 0; top: 0; height: 70px; width: 70px; background-color: #ffffff; margin-bottom: 20px; border-radius: 50%; overflow: hidden; border: 2px solid #ffffff; } .testimonial-block-three .info-box .image img{ display: block; width: 100%; } .testimonial-block-three .info-box .name{ font-size: 24px; line-height: 1.2em; color: #ffffff; font-weight: 600; } .testimonial-block-three .info-box .designation{ font-size: 16px; color: #ffffff; } .appointment-section-two .form-column .inner-column{ position: relative; padding-left: 70px; } .appointment-section-two .form-column{ position: relative; z-index: 1; } .appointment-section-two .testimonial-column .owl-dots{ position: absolute; right: 0; top: -30px; } /*** ==================================================================== Appointment Section Three ==================================================================== ***/ .appointment-section-three{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 120px 0 70px; } .appointment-section-three .content-column{ position: relative; margin-bottom: 50px; } .appointment-section-three .content-column .inner-column{ position: relative; padding-left: 70px; } .appointment-section-three .content-column .title{ display: block; font-size: 18px; color: #cf0b0b; margin-bottom: 20px; } .appointment-section-three .content-column h3{ font-size: 36px; line-height: 1.2em; color: #222222; font-weight: 700; margin-bottom: 20px; } .appointment-section-three .content-column .text{ font-size: 18px; margin-bottom: 30px; } .appointment-section-three .content-column .text strong{ font-size: 30px; line-height: 1.2em; display: block; font-weight: 600; } .appointment-section-three .timetable-info{ position: relative; } .appointment-section-three .timetable-info h3{ font-size: 36px; color: #cf0b0b; font-size: 700; } .timing-list{ position: relative; } .timing-list { position: relative; display: block; max-width: 500px; margin-bottom: 30px; } .timing-list li { position: relative; display: flex; justify-content: space-between; font-size: 18px; line-height: 28px; color: #777777; font-weight: 400; padding: 16px 0; padding-left: 30px; border-bottom: 1px solid #dddddd; } .timing-list li:before { position: absolute; top: 0; left: 0; font-family: "Font Awesome 5 Free"; content: "\f017"; color: #cf0b0b; font-weight: 400; font-size: 18px; line-height: 30px; padding: 15px 0; } .appointment-section-three .form-column{ margin-bottom: 50px; } /*** ==================================================================== Appointment Form Section ==================================================================== ***/ .appointment-form-section{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 120px 0 70px; z-index: 1; } .appointment-form-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #cf0b0b; content: ""; opacity: .80; } .appointment-form-section .content-column{ position: relative; margin-bottom: 50px; } .appointment-form-section .content-column .inner-column{ padding-top: 50px; } .appointment-form-section .content-column .play-now{ margin-bottom: 50px; } .appointment-form-section .content-column .content{ position: relative; } .appointment-form-section .content-column .title{ display: block; font-size: 18px; color: #ffffff; margin-bottom: 20px; } .appointment-form-section .content-column h3{ font-size: 48px; line-height: 1.2em; color: #ffffff; font-weight: 600; margin-bottom: 20px; } .appointment-form-section .content-column .content .text{ font-size: 18px; color: #ffffff; margin-bottom: 30px; } .appointment-form-section .content-column .content .text strong{ font-size: 30px; font-weight: 600; display: block; margin-top: 10px; } .appointment-form-section .appointment-form{ margin-bottom: -170px; } .appointment-form{ position: relative; background-color: #ffffff; padding: 50px 50px 50px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.10); } .appointment-form .sec-title{ margin-bottom: 40px; } /*** ==================================================================== Time Table Section ==================================================================== ***/ .time-table-section{ position: relative; padding: 120px 0 70px; } .time-table-section.pd-top-extra{ padding-top: 200px; } .time-table-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-6.png); background-repeat: no-repeat; background-position: center; background-size: cover; content: ""; } .time-table-section .table-outer{ position: relative; padding-bottom: 50px; } .time-table-section ::-webkit-scrollbar { width: 10px; background-color: #eeeeee; } .time-table-section ::-webkit-scrollbar-thumb{ border-radius: 5px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background: #cf0b0b; } .doctors-time-table{ position: relative; width: 100%; height: auto; background-color: #ffffff; min-width: 1170px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); } .doctors-time-table tr th.dark{ background-color: #222222; } .doctors-time-table thead tr{ background-color: #cf0b0b; } .doctors-time-table thead tr th{ font-size: 16px; color: #ffffff; font-weight: 700; height: 60px; text-align: center; width: 147px; padding: 0 15px; border: 1px solid #ffffff; border-top: 0; } .doctors-time-table tbody tr{ position: relative; text-align: center; } .doctors-time-table tbody tr th{ font-size: 16px; font-weight: 700; text-align: center; width: 147px; padding: 0 15px; color: #ffffff; height: 92px; background-color: #cf0b0b; border-bottom: 1px solid #ffffff; } .doctors-time-table tbody tr td{ position: relative; cursor: pointer; transition: all 300ms ease; } .doctors-time-table tbody tr td:hover{ background-color: #ffffff !important; box-shadow: 0 0 20px rgba(0,0,0,0.05); z-index: 9; } .doctors-time-table tbody tr td.empty:hover{ box-shadow: none; cursor: unset; } .doctors-time-table tbody tr td strong{ font-size: 14px; line-height: 18px; } .doctors-time-table tbody tr td p{ font-size: 12px; line-height: 18px; color: #777777; } .doctors-time-table tbody tr td:nth-child(even){ background-color: #f5f5f5; } .doctors-time-table tbody tr:nth-child(even) td:nth-child(even){ background-color: #ffffff; } .doctors-time-table tbody tr:nth-child(even) td:nth-child(odd){ background-color: #f5f5f5; } .doctors-time-table .doctor-info{ position: absolute; left: 50%; top: -70px; padding: 20px 20px 20px 95px; min-height: 100px; background-color: #ffffff; text-align: left; min-width: 220px; box-shadow: 0 5px 10px rgba(0,0,0,0.09); opacity: 0; visibility: hidden; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .doctors-time-table td:hover .doctor-info{ top: -100px; opacity: 1; visibility: visible; } .doctors-time-table .doctor-info .thumb{ position: absolute; left: 20px; top: 20px; height: 60px; width: 60px; } .doctors-time-table .doctor-info .name{ display: block; white-space: nowrap; font-size: 16px; line-height: 20px; color: #222222; font-weight: 700; margin-bottom: 10px; } .doctors-time-table .doctor-info .theme-btn{ height: 30px; min-width: 100px; font-size: 12px; line-height: 30px; padding: 0 10px; text-align: center; } /*** ==================================================================== Fun Fact Section ==================================================================== ***/ .fun-fact-section{ position: relative; background-color: #ffffff; background-image: url(../images/icons/pattern-4.png); background-repeat: no-repeat; background-position: center; padding: 50px 0 20px; box-shadow: 0 0 30px rgba(0,0,0,0.06); z-index: 1; } .fun-fact-section .counter-column{ position:relative; margin-bottom:30px; } .fun-fact-section .count-box{ position: relative; text-align: center; } .fun-fact-section .count-box .icon-box{ display: inline-block; position: relative; height: 110px; width: 110px; border: 2px dashed #dddddd; font-size: 54px; line-height: 106px; color: #cf0b0b; border-radius: 50%; margin-bottom: 15px; 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; } .fun-fact-section .count-box:hover .icon-box{ background-color: #cf0b0b; color: #ffffff; border: 2px dashed #cf0b0b; } .fun-fact-section .count-box .icon-box:before{ position: absolute; left: 0; top: 5px; height: 21px; width: 21px; border: 2px dashed #cf0b0b; border-radius: 50%; content: ""; opacity: .5; } .fun-fact-section .count-box .icon-box:after{ position: absolute; right: 10px; bottom: 5px; height: 15px; width: 15px; border: 2px dashed #cf0b0b; content: ""; border-radius: 50%; opacity: .5; } .fun-fact-section .count-box:hover .icon-box:after, .fun-fact-section .count-box:hover .icon-box:before{ transform: scale(3); opacity: 0; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 1000ms ease; } .fun-fact-section .count-box .counter-title{ position: relative; display: block; font-size:16px; line-height: 24px; font-weight:600; color:#666666; 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; } .fun-fact-section .count-box .count-text{ position: relative; display: block; font-size: 36px; line-height: 1.2em; font-weight: 700; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } /*** ==================================================================== Fun Fact Section ==================================================================== ***/ .fun-fact-section-two{ position: relative; background-color: #ffffff; background-image: url(../images/icons/pattern-4.png); background-repeat: no-repeat; background-position: center; padding: 50px 0 20px; box-shadow: 0 0 30px rgba(0,0,0,0.06); z-index: 1; } .fun-fact-section-two .counter-column{ position:relative; margin-bottom:30px; } .fun-fact-section-two .count-box{ position: relative; text-align: center; } .fun-fact-section-two .count-box .icon-box{ display: inline-block; position: relative; line-height: 1em; font-size: 54px; color: #cf0b0b; border-radius: 50%; margin-bottom: 20px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .fun-fact-section-two .count-box .counter-title{ position: relative; display: block; font-size:16px; line-height: 24px; font-weight:600; color:#666666; 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; } .fun-fact-section-two .count-box .count-text{ position: relative; display: block; font-size: 36px; line-height: 1.2em; font-weight: 700; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } /*** ==================================================================== Fun Fact Section Three ==================================================================== ***/ .fun-fact-section-three{ position: relative; padding: 50px 0 0px; z-index: 1; } .fun-fact-section-three .background-layer{ position: absolute; left: auto; top: 0; height: 100%; width: 1000%; background-color: #ef5b3f; border-radius: 0 0 0 50px; box-shadow: 0 10px 50px rgba(0,0,0,0.20); } .fun-fact-section-three .counter-column{ position:relative; margin-bottom:50px; } .fun-fact-section-three .count-box{ position: relative; text-align: center; } .fun-fact-section-three .count-box .icon-box{ display: inline-block; position: relative; line-height: 1em; font-size: 54px; color: #ffffff; border-radius: 50%; margin-bottom: 15px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .fun-fact-section-three .count-box .counter-title{ position: relative; display: block; font-size:16px; line-height: 24px; font-weight:600; 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; } .fun-fact-section-three .count-box .count-text{ position: relative; display: block; font-size: 64px; line-height: 1.2em; font-weight: 900; color: #ffffff; 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; } /*** ==================================================================== Fun Fact Section Four ==================================================================== ***/ .fun-fact-section-four{ position: relative; padding: 50px 0 0px; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 1; } .fun-fact-section-four:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #87c94c; content: ""; opacity: .95; } .fun-fact-section-four .counter-column{ position:relative; margin-bottom:50px; } .fun-fact-section-four .count-box{ position: relative; text-align: center; } .fun-fact-section-four .count-box .counter-title{ position: relative; display: block; font-size:18px; line-height: 24px; font-weight:700; 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; } .fun-fact-section-four .count-box .count-text{ position: relative; display: block; font-size: 64px; line-height: 1em; font-weight: 700; margin-bottom: 10px; 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; } /*** ==================================================================== Testimonial Section ==================================================================== ***/ .testimonial-section { position: relative; padding: 0px 0 0px; } .testimonial-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; background-repeat: no-repeat; background-position: center; background-image: url(../images/icons/dotted-map.png); opacity: .20; } .testimonial-section .testimonial-outer { position: relative; } .testimonial-section .client-thumb-outer { position: relative; max-width: 400px; overflow: hidden; margin: 0 auto 30px; } .testimonial-section .client-thumbs-carousel { position: relative; max-width: 130px; margin: 0 auto; text-align: center; } .testimonial-section .client-thumbs-carousel .owl-stage-outer { overflow: visible; } .testimonial-section .client-thumb-outer .thumb-box { position: relative; display: block; width: 100px; height: 100px; cursor: pointer; margin: 0 auto; border-radius: 50%; overflow: hidden; opacity: 0.6; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 300ms ease; transition: all 300ms ease; } .testimonial-section .client-thumb-outer .center .thumb-box { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .testimonial-section .client-thumb-outer .author-info .icon{ position: relative; display: inline-block; width: 36px; height: 36px; line-height: 36px; font-size: 14px; color: #000000; border-radius: 50%; background-color: #ffffff; box-shadow: 0 0 13px rgba(0,0,0,0.09); margin-bottom: 5px; } .testimonial-section .client-thumb-outer .author-info { position: relative; margin-top: -18px; text-align: center; opacity: 0; visibility: hidden; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .testimonial-section .client-thumb-outer .author-name { position: relative; display: block; margin-bottom: 10px; font-weight: 700; font-size: 20px; color: #cf0b0b; line-height: 1.2em; white-space: nowrap; } .testimonial-section .client-thumb-outer .designation { position: relative; color: #777777; font-weight: 400; font-size: 14px; white-space: nowrap; line-height: 1.2em; } .testimonial-section .client-thumb-outer .center .author-info { opacity: 1; visibility: visible; } .testimonial-section .client-thumb-outer .owl-item { z-index: 0; } .testimonial-section .client-thumb-outer .owl-item.active { z-index: 10; } .testimonial-section .client-thumb-outer .client-thumbs-carousel .thumb-item img { overflow: hidden; width: 100%; height: 100%; display: block; border-radius: 0%; } .testimonial-section .client-testimonial-carousel { max-width: 800px; margin: 0 auto; } .testimonial-block { position: relative; margin-bottom: 50px; } .testimonial-block .inner-box { position: relative; text-align: center; } .testimonial-block .inner-box .text { position: relative; font-size: 18px; line-height: 2em; color: #666666; } .testimonial-section .client-thumbs-carousel .owl-nav, .testimonial-section .owl-dots { display: none; } .testimonial-section .clients-outer{ position: relative; padding-top: 50px; } .clients-outer .clients-carousel{ position: relative; text-align: center; } .clients-outer .clients-carousel .image{ position: relative; margin-bottom: 0; } .clients-outer .clients-carousel .image a{ display: inline-block; } .clients-outer .clients-carousel .image img{ width: auto; height: auto; } .client-testimonial-carousel .owl-nav{ position: absolute; left: 0; top: 20%; width: 100%; } .client-testimonial-carousel .owl-prev, .client-testimonial-carousel .owl-next{ position: absolute; left: -120px; top: 0; height: 50px; width: 50px; line-height: 46px; font-size: 24px; color: #cf0b0b; border: 2px solid #cf0b0b; text-align: center; border-radius: 50%; } .client-testimonial-carousel .owl-next{ left: auto; right: -120px; } .testimonial-section.alternate .outer-box{ margin: 0 -30px; } /*** ==================================================================== Testimonial Section Two ==================================================================== ***/ .testimonial-section-two { position: relative; padding: 70px 0; } .testimonial-section-two:before{ position: absolute; left: 0; bottom: 0; height: 50%; width: 100%; content: ""; background-color: #cf0b0b; background-image: url(../images/icons/pattern-10.png); background-repeat: repeat; background-position: bottom; } .color-scheme-scarlet .testimonial-section-two:before{ background-color: #ef5b3f; } .testimonial-section-two .testimonial-outer { position: relative; padding: 85px 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.11); background-image: url(../images/background/4.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; margin-bottom: 50px; } .testimonial-section-two .client-thumb-outer { position: relative; max-width: 400px; overflow: hidden; margin: 0 auto 30px; } .testimonial-section-two .client-thumbs-carousel { position: relative; max-width: 130px; margin: 0 auto; text-align: center; } .testimonial-section-two .client-thumbs-carousel .owl-stage-outer { overflow: visible; } .testimonial-section-two .client-thumb-outer .thumb-box { position: relative; display: block; width: 100px; height: 100px; cursor: pointer; margin: 0 auto; border-radius: 50%; overflow: hidden; opacity: 0.6; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 300ms ease; transition: all 300ms ease; } .testimonial-section-two .client-thumb-outer .center .thumb-box { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .testimonial-section-two .client-thumb-outer .author-info .icon{ position: relative; display: inline-block; width: 36px; height: 36px; line-height: 36px; font-size: 14px; color: #000000; border-radius: 50%; background-color: #ffffff; box-shadow: 0 0 13px rgba(0,0,0,0.09); margin-bottom: 5px; } .testimonial-section-two .client-thumb-outer .author-info { position: relative; margin-top: -18px; text-align: center; opacity: 0; visibility: hidden; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .testimonial-section-two .client-thumb-outer .author-name { position: relative; display: block; margin-bottom: 10px; font-weight: 700; font-size: 20px; color: #cf0b0b; line-height: 1.2em; white-space: nowrap; } .testimonial-section-two .client-thumb-outer .designation { position: relative; color: #777777; font-weight: 400; font-size: 14px; white-space: nowrap; line-height: 1.2em; } .testimonial-section-two .client-thumb-outer .center .author-info { opacity: 1; visibility: visible; } .testimonial-section-two .client-thumb-outer .owl-item { z-index: 0; } .testimonial-section-two .client-thumb-outer .owl-item.active { z-index: 10; } .testimonial-section-two .client-thumb-outer .client-thumbs-carousel .thumb-item img { overflow: hidden; width: 100%; height: 100%; display: block; border-radius: 0%; } .testimonial-section-two .client-testimonial-carousel { max-width: 800px; margin: 0 auto; } .testimonial-section-two .owl-nav{ display: none; } .testimonial-section-two .clients-outer{ position: relative; padding-top: 50px; } .testimonial-section-two .owl-dots{ position: absolute; left: 0; bottom: 0; width: 100%; display: flex; justify-content: center; align-items: center; } .testimonial-section-two .owl-dot{ position: relative; height: 8px; width: 8px; background-color: #000000; margin: 0 4px; border-radius: 10px; transition: all 300ms ease; } .testimonial-section-two .owl-dot.active{ width: 32px; background-color: #cf0b0b; } .testimonial-section-two.alternate{ padding: 0; } .testimonial-section-two.alternate:before{ display: none; } /*** ==================================================================== Testimonial Section Three ==================================================================== ***/ .testimonial-section-three{ position: relative; padding: 90px 0; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: rgba(0,0,0,0.01); } .testimonial-section-three .outer-box{ margin: 0 -30px; } .testimonial-block-two{ position: relative; } .testimonial-block-two{ position: relative; padding: 30px; } .testimonial-block-two .inner-box{ position: relative; background-color: #ffffff; padding: 40px 40px 35px; box-shadow: 0 0px 30px rgba(8,0,0,.05); border-bottom: 2px solid #87c94c; } .testimonial-block-two .inner-box:before{ position: absolute; right: 40px; top: 40px; font-size: 80px; line-height: 1em; content: "\f10e"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #dddddd; opacity: .20; } .testimonial-block-two .info-box{ position: relative; min-height: 110px; padding-left: 95px; margin-bottom: 20px; padding-bottom: 20px; padding-top: 15px; border-bottom: 1px solid #ddd; } .testimonial-block-two .info-box .thumb{ position: absolute; left: 0; top: 0; height: 80px; width: 80px; border-radius: 50%; border: 5px solid #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.10); overflow: hidden; } .testimonial-block-two .info-box .thumb img{ display: block; width: 100%; height: auto; } .testimonial-block-two .info-box .name{ position: relative; display: block; font-size: 20px; line-height: 1.2em; color: #343a40; font-weight: 600; } .testimonial-block-two .info-box .patient{ position: relative; display: block; font-size: 14px; line-height: 25px; color: #87c94c; font-weight: 400; } .testimonial-block-two .info-box .rating{ position: relative; display: block; font-size: 14px; line-height: 15px; color: #e0a14f; font-weight: 900; } .testimonial-block-two .text{ position: relative; display: block; font-size: 16px; line-height: 25px; color: #999999; font-weight: 400; } .testimonial-carousel-two .owl-nav{ display: none; } .testimonial-carousel-two .owl-dots{ position: absolute; left: 0; bottom: -5px; width: 100%; text-align: center; display: none; } .testimonial-carousel-two .owl-dot{ position: relative; display: inline-block; height: 10px; width: 10px; margin: 0 4px; background: #7b7b7b padding-box content-box; border: 2px solid transparent; border-radius: 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; } .testimonial-carousel-two .owl-dot:hover, .testimonial-carousel-two .owl-dot.active{ border-color: #d3994c; background-color: transparent; } /*** ==================================================================== Call To Action ==================================================================== ***/ .call-to-action{ position: relative; padding: 50px 0 50px; } .call-to-action .inner-container{ position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 970px; margin: 0 auto; } .call-to-action h4{ position: relative; font-size: 20px; line-height: 1.2em; color: #ffffff; font-weight: 400; margin-bottom: 35px; } .call-to-action h2{ position: relative; font-size: 48px; line-height: 1.2em; color: #ffffff; font-weight: 700; margin-bottom: 35px; } .call-to-action .btn-box{ position: relative; text-align: center; } .call-to-action .btn-box .title{ position: relative; display: block; font-size: 18px; font-weight: 700; color: #fff; width: 100%; margin-top: 30px; } /*** ==================================================================== Call To Action Two ==================================================================== ***/ .call-to-action-two{ position: relative; z-index: 1; margin-bottom: 85px; } .call-to-action-two:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #cf0b0b; opacity: .10; content: ""; } .call-to-action-two .sec-title{ margin-bottom: 40px; } .call-to-action-two .content-column{ position: relative; } .call-to-action-two .content-column .inner-column{ position: relative; padding: 150px 0 120px; margin-right: -20px; } .call-to-action-two .image-column .image{ position: relative; padding-top: 120px; margin-bottom: 0; } .feature-block-seven{ position: relative; margin-bottom: 30px; } .feature-block-seven .inner-box{ position: relative; padding-left: 70px; padding-top: 10px; } .feature-block-seven .count{ position: absolute; left: 0; top: 0; height: 50px; width: 50px; line-height: 50px; font-size: 24px; color: #105abf; background-color: #ffffff; border-radius: 50%; font-weight: 700; text-align: center; box-shadow: 0 5px 10px rgba(0,0,0,.10); } .feature-block-seven h4{ font-size: 24px; line-height: 1.2em; color: #222222; font-weight: 600; margin-bottom: 15px; } .call-to-action-two .info-box{ position: absolute; left: 0; bottom: 0; transform: translateY(50%); background-color: #105abf; padding: 50px 85px; color: #ffffff; } .call-to-action-two .info-box .inner{ position: relative; padding-left: 120px; } .call-to-action-two .info-box .icon{ position: absolute; left: 0; top: 0; font-size: 70px; line-height: 1em; } .call-to-action-two .info-box h3{ font-size: 36px; line-height: 1.2em; color: #ffffff; font-weight: 600; margin-bottom: 5px; } .call-to-action-two .info-box .text{ font-size: 18px; color: #ffffff; font-weight: 600; } .call-to-action-two .info-box .text a{ color: inherit; } .call-to-action-two .info-box .text a:hover{ text-decoration: underline; } /*** ==================================================================== Info Section ==================================================================== ***/ .info-section{ position: relative; padding: 120px 0 70px; } .info-section .content-column{ position: relative; } .info-block{ position: relative; margin-bottom: 50px; } .info-block .inner{ position: relative; padding-left: 100px; } .info-block .icon{ position: absolute; left: 0; top: 0; font-size: 64px; line-height: 1em; color: #1058bb; } .info-block h4{ font-size: 24px; line-height: 1.2em; color: #222222; font-weight: 600; margin-bottom: 10px; } .info-section .image-column{ position: relative; margin-bottom: 50px; } .info-section .image-column .inner-column{ position: relative; padding-right: 35px; } .info-section .image-column .image{ position: relative; margin-bottom: 0; } .info-section .image-column .image img{ display: block; width: 100%; border: 10px solid #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.10); } /*** ==================================================================== News Section ==================================================================== ***/ .news-section{ position: relative; padding: 120px 0 80px; } /* News BLock */ .news-block{ position: relative; margin-bottom: 40px; } .news-block .inner-box{ position: relative; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden; -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.07); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .news-block .inner-box:hover{ -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } .news-block .image-box{ position: relative; } .news-block .image{ position: relative; margin-bottom: 0; } .news-block .image img{ position: relative; 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; } .news-block .inner-box:hover .image-box .image img{ opacity: .75; } .news-block .image-box .date{ position: absolute; right: 0; bottom: 0; text-align: center; font-size: 16px; color: #ffffff; background: #cf0b0b; padding: 5px 20px; border-radius: 10px 0 0 0; } .news-block .image-box .date strong{ color: #ffffff; font-size: 22px; } .news-block .lower-content{ position: relative; background: #ffffff; padding: 30px 30px 20px; } .news-block .lower-content h4{ position: relative; font-size: 22px; font-weight: 700; } .news-block .lower-content h4 a{ display: inline-block; color: inherit; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block .lower-content .text{ color: #4c4c4d; margin-top: 18px; } .news-block .lower-content .theme-btn{ position: relative; } .news-block .lower-content .post-info{ position: relative; font-size: 16px; line-height: initial; margin-top: 30px; padding-top: 21px; border-top: 1px solid #e5e5e5; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; margin-bottom: -10px; } .news-block .post-author{ display: flex; align-items: center; margin-bottom: 10px; color: #222222; } .news-block .post-author a{ display: inline-block; margin:0 5px; } .news-block .post-author img{ height: 30px; width: 30px; border-radius: 50%; margin-right: 10px; } .news-block .post-option{ display: flex; align-items: center; margin-bottom: 10px; } .news-block .post-option li{ position: relative; margin-left: 15px; } .news-block .post-option li a{ color: inherit; font-size: 16px; } .news-block .post-option li i{ margin-right: 5px; font-size: 14px; } /*** ==================================================================== News Section Two ==================================================================== ***/ .news-section-two{ position: relative; padding: 120px 0 80px; background-color: #eeeeee; } .news-section-two:before{ position: absolute; left: 0; bottom: 0; height: 320px; width: 100%; background-color: #ffffff; content: ""; } .news-section-two.alternate{ background-color: #fcfcfc; padding: 120px 0 90px; } .news-section-two.alternate:before{ display: none; } /*** ==================================================================== News Section Three ==================================================================== ***/ .news-section-three{ position: relative; padding: 120px 0 70px; } .news-block-two{ position: relative; margin-bottom: 50px; } .news-block-two{ position: relative; } .news-block-two .inner-box{ position: relative; } .news-block-two .image{ position: relative; display: block; margin-bottom: 0; } .news-block-two .image img{ display: block; width: 100%; } .news-block-two .overlay-content{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.40); } .news-block-two .overlay-content .inner{ position: absolute; left: 0; bottom: 0; padding: 30px; } .news-block-two .overlay-content .date{ position: relative; display: block; font-size: 15px; line-height: 28px; color: #ffffff; font-weight: 400; margin-bottom: 10px; } .news-block-two .overlay-content h4{ font-size: 24px; line-height: 1.3em; color: #ffffff; font-weight: 600; margin-bottom: 10px; } .news-block-two .overlay-content h4 a{ display: inline-block; color: inherit; } .news-block-two .overlay-content .read-more{ position: relative; display: inline-block; font-size: 15px; line-height: 1.2em; color: #ffffff; font-weight: 400; } /*** ==================================================================== Blog Section ==================================================================== ***/ .blog-section{ position: relative; padding: 120px 0 90px; background-color: #fcfcfc; } /* News BLock Three */ .news-block-three{ position: relative; margin-bottom: 40px; } .news-block-three .inner-box{ position: relative; display: flex; align-items: center; justify-content: center; transform: none; background-color: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,.10); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .news-block-three .inner-box:hover{ } .news-block-three .image-box{ position: relative; width: 50%; } .news-block-three .image-box .image{ position: relative; margin-bottom: 0; } .news-block-three .image-box .image img{ position: relative; 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; } .news-block-three .inner-box:hover .image-box .image img{ opacity: .75; } .news-block-three .image-box .date{ position: absolute; left: 0; bottom: 0; text-align: center; font-size: 16px; color: #222222; background: #ffffff; padding: 5px 20px; border-radius: 0 10px 0px 0; } .news-block-three .image-box .date strong{ color: inherit; font-size: 16px; } .news-block-three .content-box{ position: relative; background: #ffffff; padding: 30px 30px 20px; width: 50%; } .news-block-three .content-box h4{ position: relative; font-size: 24px; font-weight: 700; } .news-block-three .content-box h4 a{ display: inline-block; color: inherit; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block-three .content-box .text{ color: #4c4c4d; margin-top: 18px; } .news-block-three .content-box .read-more{ position: relative; display: inline-block; font-size: 14px; line-height: 1.2em; padding: 10px 30px; min-width: auto; border-radius: 5px; margin-top: 20px; } .news-block-three .content-box .post-info{ position: relative; font-size: 16px; line-height: initial; margin-top: 20px; border-top: 1px solid #e5e5e5; padding-top: 20px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; margin-bottom: -10px; } .news-block-three .content-box .post-info a{ color: #cf0b0b; } .news-block-three .post-author{ display: flex; align-items: center; margin-bottom: 10px; } .news-block-three .post-author a{ display: inline-block; margin:0 5px; } .news-block-three .post-author img{ height: 30px; width: 30px; border-radius: 50%; margin-right: 10px; } .news-block-three .post-option{ display: flex; align-items: center; margin-bottom: 10px; } .news-block-three .post-option li{ position: relative; margin-left: 15px; } .news-block-three .post-option li a{ color: inherit; font-size: 16px; } .news-block-three .post-option li i{ margin-right: 5px; font-size: 14px; } .news-block-three.even .image-box{ order: 2; } .news-block-three.even .content-box{ text-align: right; } .news-block-three.even .image-box .date{ left: auto; right: 0; border-radius: 10px 0 0 0; } /*** ==================================================================== Styled Pagination ==================================================================== ***/ .styled-pagination{ position:relative; margin-top: 50px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .styled-pagination.align-left{ justify-content: flex-start; } .styled-pagination li{ position:relative; margin: 0 10px 10px 0; } .styled-pagination li:last-child{ margin-right: 0; } .styled-pagination li a{ position:relative; display: block; line-height:38px; font-size:18px; height:40px; width:40px; color:#221e2a; font-weight:400; text-align:center; background:transparent; text-transform:capitalize; box-shadow: 0 5px 10px rgba(0,0,0,0.10); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .styled-pagination li .arrow{ width: 60px; font-size: 18px; font-weight: 600; } .styled-pagination li a:hover, .styled-pagination li a.active{ color:#ffffff; background-color:#cf0b0b; } .blog-masonry .styled-pagination{ margin-top: 50px; } .blog-checkerboard .styled-pagination{ margin-top: 80px; } /*** ==================================================================== Blog Single ==================================================================== ***/ .blog-post{ position: relative; } .blog-post .news-block{ margin-bottom: 60px; } .blog-post .news-block .inner-box:hover{ transform: none; } .blog-post .news-block .lower-content h3{ font-size: 28px; font-weight: 600; margin-bottom: 18px; } .blog-post .news-block .lower-content h3 a{ color: inherit; } .blog-post .news-block .lower-content p{ font-size: 16px; line-height: 26px; margin-bottom: 30px; } .blog-post .news-block .lower-content p a{ color: #cf0b0b; display: inline-block; } .blog-post .news-block .lower-content p a:hover{ text-decoration: underline; } .blog-post .news-block .lower-content .post-info{ padding-top: 0; margin-top: 0; border-top: 0; margin-bottom: 20px; display: inline-flex; } .blog-post .news-block .lower-content .post-info li{ margin-right: 20px; } .blog-post .news-block .lower-content .post-info li span{ margin-right: 5px; color: #cf0b0b; } .blog-post .news-block .two-column{ position: relative; } .blog-post .news-block .two-column .image-column{ margin-bottom: 20px; } .blog-post .news-block .two-column .image-column img{ display: block; width: 100%; } .blog-post blockquote{ position: relative; border-left: 5px solid #cf0b0b; background-color: rgba(0,0,0,0.02); font-size: 16px; line-height: 1.8em; padding: 25px 40px; font-family: 'Poppins', sans-serif; margin: 35px 30px 35px; } .blog-post blockquote:before{ position: absolute; right: 25px; bottom: 25px; font-size: 50px; line-height: 1em; content: "\f10d"; color: #dddddd; font-weight: 900; font-family: "Font Awesome 5 Free"; opacity: .30; } .blog-post blockquote cite{ display: block; font-style: normal; text-align: right; margin-top: 10px; font-size: 14px; } .blog-post blockquote cite strong{ font-weight: 400; color: #cf0b0b; } .media-player{ position: relative; width: 100%; height: auto; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; overflow: hidden; -webkit-border-radius: 15px; border-radius: 15px; border-bottom-left-radius: 0; overflow: hidden; } .media-player iframe { position: relative; max-width: 100%; width: 100%; height: auto; min-height: 400px; border-radius: 0; overflow: hidden; border: 0; } .news-block .single-item-carousel{ position: relative; } .news-block .image-box .slide-item a{ position: relative; display: block; } .news-block .post-format-link{ position: relative; display: block; font-size: 28px; line-height: 38px; color: #ffffff; font-weight: 600; text-align: center; padding: 40px 60px 40px; background: #cf0b0b; } .news-block .post-format-link a{ color: inherit; display: inline-block; } .news-block .post-format-link a:hover{ text-decoration: underline; } .news-block .post-format-link .icon{ font-size: 20px; top: 0px; left: 0px; width: 50px; height: 50px; color: #ffffff; background: #333333; line-height: 50px; text-align: center; border-bottom-right-radius: 10px; border-top-left-radius: 10px; position: absolute; z-index: 1; } .blog-post .post-format-quote{ position: relative; display: block; font-size: 20px !important; line-height: 30px !important; padding: 50px 62px 30px 70px; color: #222222; margin: 0; font-size: 28px; border: 0; line-height: 38px; font-weight: 500; background-color: #f5f5f5; } .blog-post .post-format-quote .icon{ top: 0px; left: 0px; width: 50px; height: 50px; line-height: 50px; text-align: center; z-index: 1; font-size: 20px; background-color: #2C2F50; color: #fff; border-bottom-right-radius: 10px; border-top-left-radius: 8px; position: absolute; } .blog-post .post-format-quote cite{ display: block; font-style: normal; margin-top: 17px; font-size: 16px; position: relative; font-weight: 400; } /*post share options*/ .blog-post .post-share-options{ position:relative; margin-bottom: 20px; } .blog-post .post-share-options .tags{ position: relative; margin-bottom: 20px; } .blog-post .post-share-options .tags li{ position: relative; display: inline-block; margin-right: 5px; margin-bottom: 10px; } .blog-post .post-share-options .tags a{ position:relative; display: block; font-size:16px; font-weight:400; line-height: 25px; padding: 5px 15px; color:#777777; background-color: #ffffff; border: 1px solid #aaaaaa; border-radius: 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; } .blog-post .post-share-options .tags a:hover{ color: #ffffff; background-color: #343a40; } .blog-post .post-share-options .social-icon{ position: relative; display: inline-block; margin-bottom: 30px; } .blog-post .post-share-options .social-icon li{ position: relative; display: inline-block; } .blog-post .post-share-options .social-icon li a{ display: inline-block; font-size: 16px; line-height: 25px; color: #777777; padding: 5px 8px; border-radius: 5px; margin-left: 5PX; border: 1px solid #aaaaaa; -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-post .post-share-options .social-icon li a:hover{ color: #ffffff; background-color: #343a40; } /*Author Box*/ .author-box{ position:relative; background-color: #ffffff; border: 1px solid #dddddd; margin-bottom: 70px; } .author-box .inner-box{ position:relative; padding-left: 230px; padding-top: 20px; padding-right: 30px; min-height: 200px; } .author-box .title{ position: relative; font-size: 16px; font-weight: 600; color: #cf0b0b; } .author-box .thumb{ position:absolute; left:0px; top:0px; height: 200px; width: 200px; background-color: #ffffff; overflow: hidden; margin-bottom: 20px; } .author-box .thumb img{ display: block; width: 100%; height: auto; } .author-box .name{ position: relative; font-size: 20px; line-height: 28px; color: #3f4d50; font-weight: 700; margin-bottom: 10px; } .author-box .text{ position: relative; font-size: 16px; line-height: 26px; color: #777777; font-weight: 400; margin-bottom: 15px; } .related-news{ position: relative; margin-bottom: 50px; } /*** ==================================================================== Comment Area ==================================================================== ***/ .group-title{ position: relative; margin-bottom: 40px; } .group-title h3{ font-size: 28px; font-weight: 600; margin-bottom: 18px; } .comments-area{ position:relative; margin-bottom: 70px; } .comments-area .comment-box{ position: relative; padding-bottom: 30px; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px; } .comments-area .comment-box.reply-comment{ margin-left: 100px; } .comments-area .comment-box:last-child{ margin-bottom: 0; } .comments-area .comment{ position:relative; min-height: 100px; padding-top: 5px; padding-left: 100px; } .comments-area .comment-box .author-thumb{ position:absolute; left:0px; top:0px; height: 80px; width: 80px; border-radius: 50%; margin-bottom: 10px; overflow: hidden; } .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; color: #222222; line-height: 26px; font-weight:600; margin-bottom: 3px; } .comments-area .comment-box .date{ position: relative; display: inline-block; top: -3px; font-size: 14px; line-height: 26px; color: #888888; margin-left: 10px; font-weight: 400; } .comments-area .comment-box .text{ font-size: 16px; line-height: 26px; color:#777777; font-weight: 400; } .comments-area .comment-box .rating{ position: relative; display: block; font-size: 12px; color:#ffc107; line-height: 20px; margin-bottom: 5px; } .comments-area .comment-box .reply-btn{ display: inline-block; margin-top: 5px; font-size: 16px; line-height: 20px; color:#cf0b0b; font-weight: 600; -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 ==================================================================== ***/ .comment-form{ position: relative; } .comment-form .form-group{ position:relative; margin-bottom: 20px; } .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: 15px; color: #777777; line-height: 23px; font-weight: 400; padding: 10px 22px; background-color: #ffffff; 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; } .comment-form .form-group input:focus, .comment-form .form-group select:focus, .comment-form .form-group textarea:focus{ border-color:#cf0b0b; } .comment-form .form-group textarea{ height: 150px; resize: none; } .comment-form .form-group input[type="submit"], .comment-form .form-group button{ padding: 10px 25px; font-size: 15px; line-height: 23px; font-weight: 500; } /*** ==================================================================== Contact Section ==================================================================== ***/ .contact-section{ position: relative; background-color: #f5f5f5; padding: 120px 0 70px; } .contact-section .small-container{ max-width: 1000px; margin: 0 auto; } .contact-section .upper-box{ position: relative; margin-bottom: 60px; text-align: center; } .contact-section .upper-box h3{ font-size: 38px; font-weight: 500; } .contact-section .upper-box .text{ position: relative; margin-top: 10px; } .contact-section .form-box{ position: relative; margin-bottom: 20px; } .contact-section .contact-box{ position: relative; margin-bottom: 20px; } .contact-form{ position: relative; } .contact-form .form-group{ position:relative; margin-bottom:20px; } .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: 14px; color: #333333; line-height: 28px; padding: 15px 20px; border: 1px solid #ddd; background-color: #ffffff; font-weight: 400; height: 60px; box-shadow: 0 0 0px rgba(0,0,0,0.10); -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:#cf0b0b; } .contact-form .form-group textarea{ height: 220px; resize: vertical; } .contact-form .form-group button{ text-transform: capitalize; } .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; } form .response{ position: relative; text-align: center; } form .response .success{ background: #1ca345; color: #ffffff; padding: 0 10px; margin-bottom: 20px; } form .response .failed{ background-color: #de3f44; color: #ffffff; padding: 0 10px; margin-bottom: 20px; } form .response .text-info{ background-color: #ffc001 !important; color: #222222 !important; padding: 0 10px; margin-bottom: 20px; } .contact-info-block{ position: relative; margin-bottom: 30px; } .contact-info-block .inner{ position: relative; padding: 20px 20px; padding-left: 80px; transition: all 300ms ease; border-bottom: 2px solid transparent; } .contact-info-block .inner:hover{ background: #ffffff; box-shadow: 0 0 30px rgba(0,0,0,0.10); transform: translateY(-20px); -webkit-transform: translateY(-20px); border-bottom:2px solid #cf0b0b; } .contact-info-block .icon{ position: absolute; left: 20px; top: 25px; font-size: 40px; line-height: 1em; color: #cf0b0b; display: inline-block; margin-bottom: 10px; } .contact-info-block h4{ position: relative; font-size: 20px; line-height: 1.2em; color: #353535; font-weight: 500; margin-bottom: 5px; } .contact-info-block p a{ color: #353535; font-size: 14px; } .contact-info-block p a:hover{ text-decoration: underline; } /*=== Contact Form Two ===*/ .contact-form-two{ position: relative; padding: 50px 40px; background-color: #f5f5f5; border: 10px solid #ffffff; background-image: url(../images/icons/pattern-11.png); } .contact-form-two .title-box{ position: relative; margin-bottom: 30px; } .contact-form-two .title-box h4{ position: relative; display: block; font-size: 28px; line-height: 1.2em; color: #222222; margin-bottom: 10px; font-weight: 600; } .contact-form-two .form-group{ position:relative; padding: 0 10px; margin-bottom:20px; } .contact-form-two .form-group:last-child{ margin-bottom: 0; } .contact-form-two .form-group input[type=date], .contact-form-two .form-group input[type=datetime-local], .contact-form-two .form-group input[type=month], .contact-form-two .form-group input[type=time], .contact-form-two .form-group input[type="text"], .contact-form-two .form-group input[type="email"], .contact-form-two .form-group input[type="url"], .contact-form-two .form-group input[type="number"], .contact-form-two .form-group textarea, .contact-form-two .form-group select{ position: relative; display: block; width: 100%; font-size: 16px; color: #999999; line-height: 20px; padding: 10px 20px; border: 1px solid #f1f1f1; background-color: #ffffff; font-weight: 400; height: 50px; border-radius: 5px; -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-two .form-group input:focus, .contact-form-two .form-group select:focus, .contact-form-two .form-group textarea:focus{ border-color:#222222; } .contact-form-two .form-group select{ cursor:pointer; -webkit-appearance:none; -ms-appearance:none; -o-appearance:none; -moz-appearance:none; background:#ffffff url(../images/icons/icon-select.png) right center no-repeat; } .contact-form-two .form-group textarea{ height: 150px; resize: none; padding: 15px 20px; } .contact-form-two .form-group button:hover{ color: #ffffff; } .contact-form-two input.error:focus, .contact-form-two select.error:focus, .contact-form-two textarea.error:focus{ border-color:#ff0000; } .contact-form-two label.error{ display:block; font-weight:500; font-size:13px; text-transform:capitalize; line-height:24px; color:#ff0000; padding-top:7px; margin-bottom: 0; } /*** ==================================================================== Map Section ==================================================================== ***/ .map-section{ position: relative; padding: 120px 0; } .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:400px; background-color: #dddddd; } /*** ==================================================================== Clients Section ==================================================================== ***/ .clients-section{ position: relative; padding: 55px 0; box-shadow: 0 0 30px rgba(0,0,0,0.05); z-index: 1; } .clients-section .sponsors-outer{ position: relative; } .clients-section .slide-item{ position: relative; overflow: hidden; text-align: center; } .clients-section .slide-item a{ position: relative; } .clients-section .slide-item img{ display: inline-block; max-width: 100%; width: auto; height: auto; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .clients-section .owl-nav, .clients-section .owl-dots{ display: none; } /*** ================================================================== Main Footer ================================================================== ***/ .main-footer{ position:relative; } .main-footer .widgets-section{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 120px 0 70px; } .main-footer .widgets-section:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #152858; opacity: .95; content: ""; } .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:20px; font-weight:700; color:#ffffff; line-height: 30px; padding-bottom: 15px; margin-bottom:40px; } .main-footer .footer-column .widget-title:before{ position: absolute; left: 0; bottom: 0; width: 60px; height: 2px; margin-right: 6px; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #cf0b0b; content: ''; } .main-footer .footer-column .widget-title:after{ position: absolute; left: 65px; bottom: -2px; height: 6px; width: 6px; content: ""; border-radius: 50%; background-color: #cf0b0b; } .footer-column .widget-title:after, .footer-column .widget-title:before{ background-color: #ffffff !important; } .main-footer .about-widget{ position: relative; } .main-footer .logo{ position:relative; margin-bottom: 40px; } .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: 40px; } .main-footer .about-widget .text p{ font-size: 14px; line-height: 30px; color: #ffffff; font-weight: 400; margin-bottom: 30px; } /*Recent Posts*/ .recent-posts{ position: relative; } .recent-posts .post{ position: relative; min-height: 70px; padding-left: 100px; margin-bottom: 20px; } .recent-posts .post:last-child{ margin-bottom: 0; } .recent-posts .post .thumb{ position: absolute; left: 0; top: 0; height: 70px; width: 70px; 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: 16px; font-weight: 600; color: #ffffff; line-height: 24px; top: -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: inherit; opacity: .90; } .recent-posts .post .date{ position: relative; display: block; font-size: 14px; color: #dddddd; } /*=== User LInks ===*/ .user-links{ position: relative; margin-top: 30px; } .user-links li{ position: relative; display: block; font-weight: 400; margin-bottom: 18px; } .user-links li a:before{ position: absolute; left: 0; top: 0px; font-size: 10px; line-height: 28px; color: #ffffff; font-weight: 900; font-family: "Font Awesome 5 Free"; content: "\f067"; -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:before{ color: #ffffff; } .user-links li a{ position: relative; padding-left: 20px; display: 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; } .user-links li a:hover{ color: #ffffff; text-decoration: underline; } .main-footer .contact-list{ position: relative; } .main-footer .contact-list li{ position: relative; padding-left: 70px; margin-bottom: 22px; } .main-footer .contact-list li:last-child{ margin-bottom: 0; } .main-footer .contact-list li .icon{ position: absolute; left: 0; top: 0; font-size: 40px; line-height: 1em; color: #ffffff; } .main-footer .contact-list li strong{ display: block; font-size: 16px; line-height: 24px; color: #ffffff; font-weight: 600; } .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: #cf0b0b; } /*=== Newsletter form ===*/ .main-footer .newsletter-form .text{ position: relative; top: -5px; margin-bottom: 20px; font-size: 18px; font-weight: 500; color: #ffffff; margin-bottom: 20px; } .main-footer .newsletter-form{ position:relative; } .main-footer .newsletter-form .form-group{ position:relative; } .main-footer .newsletter-form .form-group input[type="text"], .main-footer .newsletter-form .form-group input[type="email"]{ display:block; height:50px; width:100%; font-size:14px; line-height:30px; color: #333333; background:#ffffff; padding:10px 20px; padding-right: 60px; border-radius: 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; } .main-footer .newsletter-form .form-group .theme-btn{ position: relative; display: block; width: 100%; text-align: center; font-size: 16px; line-height: 25px; margin-top: 10px; padding: 10px 30px; background-color: #222222; color: #ffffff; border-radius: 5px; } .newsletter-form .response{ position: relative; } .newsletter-form .response > div{ padding: 0 15px; text-align: center; } .newsletter-form .response .success{ background: #28a745; color: #ffffff; } .newsletter-form .response .failed{ background-color: #cf0b0b; color: #ffffff; } .newsletter-form .response .text-info{ background-color: #ffd658; color: #222222 !important; } /*=== Footer Bottom ===*/ .main-footer .footer-bottom{ position: relative; width: 100%; background-color: #cf0b0b; } .main-footer .footer-bottom:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: .20; content: ""; background-color: #000000; } .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: 700; -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:20px 0; } .main-footer .footer-bottom .footer-nav ul li{ position: relative; float: left; padding-left: 22px; margin-left: 20px; } .main-footer .footer-bottom .footer-nav ul li:first-child{ margin-left: 0; padding-left: 0; } .main-footer .footer-bottom .footer-nav ul li a{ position: relative; display: block; font-size: 14px; line-height: 20px; 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; } .main-footer .footer-bottom .footer-nav ul li:before{ position: absolute; left: 0; top: 0px; font-size: 14px; line-height: 20px; color: #ffffff; font-weight: 400; content: '|'; } .main-footer .footer-bottom .footer-nav ul li a:hover{ color: #ffffff; text-decoration: underline; } .main-footer .footer-bottom .footer-nav ul li:first-child:before{ display: none; } /*=== Main Footer Style Two ===*/ .main-footer.style-two .recent-posts .post h4 a:hover, .main-footer.style-two .user-links li a:hover:before, .main-footer.style-two .user-links li a:hover{ color: #222222; } /*=== Main Footer Style Five ===*/ .main-footer.style-five .widgets-section:before{ background-color: #ffffff; } .main-footer.style-five .footer-column{ position: relative; } .main-footer.style-five .contact-list li, .main-footer.style-five .contact-list li .text, .main-footer.style-five .contact-list li strong, .main-footer.style-five .user-links li a:before, .main-footer.style-five .recent-posts .post h4 a, .main-footer.style-five .recent-posts .post h4, .main-footer.style-five .user-links li a, .main-footer.style-five .footer-column .widget-title{ color: #000000; } .main-footer.style-five .contact-list li .icon, .main-footer.style-five .about-widget .text p, .main-footer.style-five .recent-posts .post .date{ color: #222222; } .main-footer.style-five .widgets-section{ padding: 120px 0 0px; } /*** ==================================================================== Sidebar Page Container ==================================================================== ***/ .sidebar-page-container{ position:relative; padding:120px 0px 70px; } .sidebar-page-container .sidebar{ background: #fff; box-shadow: 0 0 30px rgba(0,0,0,.05); padding: 30px; margin-left: 20px; } .sidebar-page-container .content-side, .sidebar-page-container .sidebar-side{ margin-bottom:50px; } .sidebar-page-container .services-sidebar{ margin: 0 !important; padding: 0; box-shadow: none; } .sidebar-widget{ position:relative; margin-bottom:50px; } .sidebar-widget:last-child{ margin-bottom: 0; } /* Sidebar Title */ .sidebar-title{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #dddddd; margin-bottom: 20px; } .sidebar-title h3{ position: relative; display: block; font-size: 24px; line-height: 1.2em; font-weight: 600; } /*Search Box Widget*/ .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; padding:10px 50px 10px 25px; border: 1px solid #dddddd; background-color: rgba(0,0,0,0.01); display:block; font-size:16px; line-height:28px; width:100%; height:60px; color:#777777; -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 button{ position:absolute; right: 0px; top: 0; height:60px; width:60px; display:block; font-size:16px; color:#333333; line-height:100%; font-weight:normal; background-color: transparent; -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 button:hover{ color: #cf0b0b; } /* Category List */ .category-list{ position: relative; display: block; } .category-list li{ position: relative; margin-bottom: 5px; border-bottom: 0; } .category-list li:last-child{ } .category-list li a{ position: relative; display: block; font-size: 16px; color: #666666; font-weight: 400; line-height: 30px; padding: 10px 20px; padding-left: 45px; background-color: rgba(0,0,0,0.01); -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .category-list li a:before{ position: absolute; top: 0; left: 20px; height: 50px; line-height: 50px; font-size: 14px; color: #1e69b8; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .category-list li a span{ float: right; font-size: 14px; color: #333333; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .category-list li a:hover{ color: #ffffff; background: #cf0b0b; } .category-list li a:hover:before{ color: #ffffff; } .category-list li a:hover span{ color: #ffffff; } /*Post Widget*/ /*=== Latest News ===*/ .sidebar .latest-news{ position: relative; } .latest-news .post{ position: relative; padding-left: 100px; margin-bottom: 20px; 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; background-color: rgba(0,0,0,0.05); } .latest-news .post-thumb a:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: .80; content: ""; background-color: #cf0b0b; 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: "\f0c1"; 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 h5{ position: relative; font-size: 16px; line-height: 1.4em; color: #222222; font-weight: 600; margin-bottom: 5px; } .latest-news .post h5 a{ 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; } .latest-news .post:hover h5 a{ color: #cf0b0b; } .latest-news .post .post-info{ position: relative; font-size: 14px; line-height: 24px; color: #cf0b0b; font-weight: 400; } .latest-news .post .price{ font-size: 16px; line-height: 20px; color: #777777; font-weight: 400; } .latest-news .post .rating{ position: relative; } .latest-news .post .rating .fa { position: relative; display: inline-block; font-size: 12px; line-height: 20px; color: orange; } /* Instagram Widget */ .instagram-widget .post-thumb{ position:relative; width:33.333333%; float:left; overflow:hidden; padding: 0 8px; border-radius:8px; } .instagram-widget .post-thumb .overlay-box{ position: absolute; content: ''; left: 0px; top: 0px; width: 100%; height: 100%; display: block; color: #ffffff; font-size: 18px; opacity: 0; text-align: center; 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; background-color: rgba(8,0,0,0.50); } .instagram-widget .post-thumb .overlay-box .fa{ top: 50%; position: relative; margin-top: -12px; display: block; } .instagram-widget .post-thumb:hover .overlay-box{ opacity:1; } .instagram-widget .post-thumb img{ display:block; width:100%; 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; } /* Newslatters */ .sidebar .newslatters{ position: relative; overflow: hidden; } .sidebar .newslatters .text{ margin-bottom: 20px; } .sidebar .newslatters .form-group{ position:relative; margin:0px; } .sidebar .newslatters .form-group input[type="text"], .sidebar .newslatters .form-group input[type="search"]{ position:relative; display:block; font-size:13px; color:#000000; line-height:23px; padding:10px 20px; height:45px; width:100%; border:1px solid #eef3f9; background-color: #eef3f9; -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 .newslatters .form-group input[type="submit"], .sidebar .newslatters .form-group button{ position: relative; display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; display: block; font-size: 15px; background-color: #cf0b0b; color: #ffffff; font-weight: 600; border-radius: 7px; margin-top: 20px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } /*Popular Tags*/ .sidebar .popular-tags{ position: relative; } .sidebar .popular-tags li{ position: relative; display: inline-block; margin:0px 5px 8px 0px; } .sidebar .popular-tags a{ position:relative; display:block; color:#555555; text-align:center; font-size:16px; line-height: 20px; padding: 5px 20px; background:none; font-weight:400; border:1px solid #e5e5e5; background-color: rgba(0,0,0,.02); text-transform:capitalize; 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 .popular-tags a:hover{ border-color:#cf0b0b; background-color:#cf0b0b; color:#ffffff; } /*** ==================================================================== Our Shop ==================================================================== ***/ .our-shop{ position: relative; } .our-shop .shop-upper-box{ position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } .shop-item{ position: relative; margin-bottom: 30px; } .shop-item .inner-box{ position: relative; border-radius: 7px; transition: all 300ms ease; border: 1px solid #eeeeee; } .shop-item:hover .inner-box{ } .shop-item .inner-box .image{ position: relative; margin-bottom: 0; } .shop-item .inner-box .image img{ display: block; width: 100%; } .shop-item .inner-box .onsale{ position: absolute; left: 0; top: 0; z-index: 1; font-weight: 600; font-size: 14px; line-height: 20px; height: 30px; padding: 5px 10px; color: #fff; margin-right: 10px; margin-bottom: 10px; background-color: #ED4E40; border-radius: 0 0 7px 0; } .shop-item .lower-content{ position: relative; padding: 13px 19px; z-index: 0; background-color: #ffffff; margin: 0; -webkit-transition: all 0.3s ease; box-shadow: 0 0px 25px rgba(0,0,0,0.05); transition: all 0.3s ease; } .shop-item:hover .lower-content{ margin-top: -75px; padding-bottom: 78px; } .shop-item .lower-content .rating{ position: relative; display: block; z-index: 1; color: #FEC948; font-size: 13px; line-height: 1em; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .shop-item .lower-content .rating .light{ color: rgba(62, 74, 89, 0.2); } .shop-item:hover .rating{ opacity: 1; bottom: 100%; } .shop-item .lower-content .name{ font-size: 20px; color: #000; font-weight: 600; margin: 8px 0 3px; } .shop-item .lower-content .name a{ color: inherit; } .shop-item .price{ font-size: 15px; color: #222222; font-weight: 400; } .shop-item .price del { font-size: 15px; color: #999999; margin-left: 15px; margin-bottom: -1px; } .shop-item .lower-content .add-to-cart{ position: absolute; display: block; width: calc(100% - 40px); height: 40px; padding: 10px 30px; line-height: 20px; font-weight: 600; text-align: center; display: block; border-radius: 7px; bottom: 10px; opacity: 0; -webkit-transition: all 0.15s ease; transition: all 0.15s ease; } .shop-item .lower-content .add-to-cart span{ margin-right: 10px; } .shop-item:hover .add-to-cart{ opacity: 1; background-color: #cf0b0b; color: #ffffff; bottom: 20px; -webkit-transition: all 0.3s ease, opacity 0.3s linear 0.15s, bottom 0.3s ease 0.15s; transition: all 0.3s ease, opacity 0.3s linear 0.15s, bottom 0.3s ease 0.15s; } /*** ==================================================================== Product Details ==================================================================== ***/ .product-details{ position: relative; } .product-details .basic-details{ position:relative; margin-bottom:20px; } .product-details .image-column, .product-details .info-column{ margin-bottom:20px; } .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:600; line-height:1.4em; color:#3f4d50; margin:5px 0px 10px; } .product-details .basic-details .details-header h4 a{ color:#333333; } .product-details .basic-details .details-header .rating{ font-size:14px; color:#ffc107; margin-bottom:15px; display:inline-block; } .product-details .basic-details .details-header .reviews{ position:relative; display:inline-block; color:#777777; 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:#777777; } .product-details .basic-details .details-header .item-price{ font-size:22px; font-weight:600; color:#3f4d50; 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:#777777; 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; } .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:#f4f5f6; } .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:40px; } .shop-single .product-details .prod-tabs .tab-btns .tab-btn{ position:relative; top:1px; display:block; float:left; margin-right:10px; font-size:16px; background:#ffffff; color:#cf0b0b; font-weight:500; line-height:20px; cursor:pointer; border-radius:0px; padding:10px 30px; margin-bottom: 10px; transition:all 500ms ease; border: 1px solid #cf0b0b; } .shop-single .product-details .prod-tabs .tab-btns .tab-btn:hover, .shop-single .product-details .prod-tabs .tab-btns .tab-btn.active-btn{ background-color: #cf0b0b; 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; border: 1px solid #cccccc; } .shop-single .product-details .prod-tabs .tabs-content .tab .content h3{ color: #222222; margin-bottom: 20px; font-weight: 600; } .shop-single .product-details .prod-tabs .tabs-content .tab .content p{ position:relative; font-size:16px; line-height:1.7em; margin-bottom:25px; color:#797979; } .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:#3f4d50; font-size:24px; font-weight:500; margin-bottom:30px; } /*Comment Form*/ .shop-comment-form{ position:relative; margin-top:50px; } .shop-comment-form h2{ position:relative; color:#3f4d50; font-size:24px; font-weight:500; margin-bottom:10px; } .shop-comment-form .mail-text{ position:relative; color:#777777; 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:#333333; 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; border:1px solid #dddddd; height:50px; color:#848484; font-weight:300; background:#ffffff; -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:#cf0b0b; } .shop-comment-form .form-group textarea{ position:relative; display:block; width:100%; line-height:26px; padding:15px 20px; color:#848484; border:1px solid #dddddd; height:120px; font-weight:300; background:#ffffff; resize:none; -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:120px 0px 80px; z-index: 1; } .cart-outer{ position:relative; } .checkout-page .cart-outer{ margin-bottom:40px; } .cart-outer .table-outer{ position:relative; width:100%; overflow-x: auto; 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:#fafafa; color:#222222; border:1px solid #dddddd; } .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 #dddddd; } .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:#ffffff; } .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:#444444; font-weight:400; line-height:90px; } .cart-table tbody tr .prod-column .author{ font-size:13px; color:#333333; margin-bottom:0px; } .cart-table tbody tr .sub-total{ font-weight: 500; color:#222222; 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:#222222; 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:#cf0b0b; } .cart-table tbody tr{ border-bottom:1px solid #dddddd; } .cart-table tbody tr td{ vertical-align:middle; color:#797979; font-size:17px; text-align:center; font-weight: 500; border-left:1px solid #dddddd; } .cart-table tbody tr td.total{ font-size:18px; color:#333333; } .cart-table tbody tr td:last-child{ border-right:1px solid #dddddd; text-align:center; } .cart-table tbody tr td .prod-title{ position:relative; font-size:16px; color:#222222; font-weight: 500; } .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 #dddddd; margin-bottom:50px; } .cart-section .apply-coupon{ position:relative; } .cart-section .cart-options .cart-btn{ padding:14px 25px; line-height: 24px; font-size:14px; color:#ffffff; font-weight:700; line-height: 20px; text-transform:capitalize; background-color:#cf0b0b; border-radius: 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; } .cart-section .cart-options .cart-btn:hover{ color: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,.10); } .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 #dddddd; width:225px; height:50px; background:#ffffff; } .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:#cf0b0b; border-radius: 5px; overflow: hidden; -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{ color: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.10); } .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 #dddddd; } .cart-section .totals-table li{ line-height:24px; padding:18px 30px; border-bottom:1px solid #dddddd; } .cart-section .totals-table li:first-child{ background-color:#fafafa; padding:18px 45px; } .cart-section .totals-table li h3{ position:relative; font-weight:600; color:#333333; 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:#222222; font-size:16px; font-weight:600; text-transform:capitalize; } .cart-section .totals-table li .col:last-child{ text-align:right; border-left: 1px solid #dddddd; font-weight: 500; } .cart-section .totals-table .total .price{ color:#222222; 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:#cf0b0b; border-radius: 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; } .cart-section .totals-table .proceed-btn:hover{ color: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,.10); } .shipping-block{ position:relative; } .shipping-block .inner-box{ position:relative; padding:40px 30px 20px; border:1px solid #dddddd; margin-bottom:50px; } .shipping-block .inner-box h3{ position:relative; color:#333333; font-size:24px; font-weight:700; margin-bottom:4px; text-transform:capitalize; } .shipping-block .inner-box h4{ position:relative; color:#222222; 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; border:1px solid #dddddd; -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:#cf0b0b; } .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:#cf0b0b; border-radius: 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; } .shipping-form button:hover{ color: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,.10); } /*==================================================================== CheckOut Section ====================================================================*/ .checkout-page{ position:relative; padding:120px 0px 90px; } .checkout-page .default-links{ position:relative; margin-bottom:30px; } .checkout-page .default-links li{ line-height:20px; padding:15px 25px; font-size:16px; font-weight: 400; color:#222222; background-color :#ffffff; border:1px solid #dddddd; margin-bottom: 30px; } .checkout-page .default-links li .far{ position:relative; display: inline-block; font-size:14px; line-height: 20px; color:#cf0b0b; margin-right:20px; } .checkout-page .default-links li a{ color:#cf0b0b; 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: #cf0b0b; text-decoration: underline; } .checkout-page .sec-title{ margin-bottom: 20px; } .checkout-page .sec-title h3{ font-size: 24px; line-height: 1.2em; color: #cf0b0b; font-weight: 600; padding-bottom: 20px; border-bottom: 1px solid #dddddd; } .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 #dddddd; } .checkout-form .form-group{ position:relative; margin-bottom: 15px; } .checkout-form .form-group .field-label{ display:block; line-height:24px; text-transform:capitalize; color:#222222; font-size:15px; font-weight:500; margin-bottom:10px; } .checkout-form .form-group .field-label span{ position: relative; font-size: 16px; color: #222222; 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:#777777; 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:#ffffff; font-size: 16px; line-height:20px; color: #777777; padding:14px 22px; height:50px; border:1px solid #e0e0e0; 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; background:#ffffff 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: #cf0b0b; } .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: #cf0b0b; } .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; padding: 30px 30px; margin-bottom: 50px; font-family: "Ubuntu", sans-serif; border:1px solid #dddddd; } .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 :#222222; } .order-box .title-box .col{ position:relative; width:50%; float:left; color:#ffffff; font-size: 16px; line-height: 25px; } .order-box ul{ position:relative; } .order-box ul li{ position:relative; padding: 25px 30px; font-size: 16px; font-weight: 500; color: #777777; line-height: 30px; border-bottom:1px solid #cccccc; } .order-box ul li strong{ color:#222222; font-weight: 500; font-size:16px; } .order-box ul li span{ padding: 0 15px; width:50%; float:right; color:#cf0b0b; font-size:16px; } .order-box ul li span.free{ color:#777777; } .order-box ul li:last-child{ border-bottom: 0; } .payment-box{ position:relative; padding: 30px 50px; border:1px solid #dddddd; margin-bottom: 50px; } .payment-box .upper-box{ position:relative; border-bottom:1px solid #b7b7b7; } .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:#222222; 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:7px; } .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:15px 20px; margin-top:20px; background-color :#cf0b0b; } .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 !important; border-right: 10px solid transparent !important; border-bottom: 8px solid #cf0b0b; } .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:#cf0b0b; font-size:16px; font-weight:400; 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: 10px 30px; margin-right: 0; border-radius: 5px; } /*** ==================================================================== Login Section ==================================================================== ***/ .login-section{ position:relative; padding:120px 0px 70px; } .login-section .column{ position: relative; margin-bottom: 50px; } .login-section h2{ position:relative; color:#6c757d; font-size:28px; font-weight:600; line-height:1.2em; margin-bottom:25px; } .login-form{ position:relative; margin-bottom:40px; padding:30px 40px 25px; background-color: rgba(0,0,0,0.02); max-width: 500px; margin: 0 auto; border-radius: 0 0 10px 10px; box-shadow: 0 0 20px rgba(0,0,0,0.10); } .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: #777777; font-size:16px; border:1px solid #dddddd; background-color: #ffffff; -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:#dc3545; } .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%; } .login-form .psw{ position:relative; color:#999999; font-size:16px; transition: all 300ms ease; } .login-form .psw:hover{ text-decoration: underline; } /*** ==================================================================== Coming Soon ==================================================================== ***/ .coming-soon{ display:block; background-repeat: no-repeat; background-position: center right; background-size: cover; } .coming-soon .image-column{ position: relative; height: 100vh; } .coming-soon .image-column .bg-shape{ position: absolute; left: 0; bottom: -100px; height: 90%; width: 90%; background-image: url(../images/icons/shape-1.png); background-repeat: no-repeat; background-position: top right; background-size: cover; } .coming-soon .image-column .image{ position: absolute; z-index: 1; padding-top: 100px; top: 0; width: 100%; } .coming-soon .image-column .image img{ display: block; width: 100%; } .coming-soon .content-column{ position:fixed; width:100%; height:100vh; overflow-y: auto; } .coming-soon .content{ position: relative; width: 100%; height: 100%; display: table; vertical-align: middle; } .coming-soon .content .content-inner{ position: relative; padding: 70px 15px; display: table-cell; vertical-align: middle; } .coming-soon .content .content-inner .logo{ position:relative; margin-bottom: 30px; } .coming-soon .content .content-inner h2{ position:relative; font-size:48px; font-weight:700; color: #222222; line-height:1.2em; text-transform: uppercase; margin-bottom: 10px; } .time-counter{ position:relative; } .time-counter .time-countdown{ position:relative; margin-top: 30px; margin-bottom: 10px; display: flex; align-items: center; } .time-counter .time-countdown .counter-column{ position:relative; display: inline-block; width:100px; height:100px; font-size:12px; line-height: 1em; color:#222222; text-transform:uppercase; font-weight:400; text-align: center; z-index: 7; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.25); background-color: #ffffff; margin-right: 30px; margin-bottom: 20px; } .time-counter .time-countdown .counter-column .count{ position:relative; display:block; font-size:42px; line-height:30px; padding:25px 0px 15px; color:#222; font-weight:600; } .coming-soon .emailed-form{ position: relative; margin-bottom: 40px; } .coming-soon .emailed-form h3{ font-size: 28px; line-height: 1.2em; font-weight: 600; color: #ffffff; margin-bottom: 20px; } .coming-soon .emailed-form .text{ position: relative; display: block; font-size: 18px; font-weight: 400; color: #222222; line-height:1.8em; margin-bottom: 20px; } .coming-soon .emailed-form .form-group{ position:relative; display:block; max-width:540px; width:100%; } .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:#000000; overflow:hidden; padding:15px 50px 15px 20px; background: #f5f5f5; border: 1px solid #fafafa; border-radius: 0 50px 50px 0; box-shadow: 0 0 13px rgba(0,0,0,0.10); -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{ } .coming-soon .emailed-form .form-group input[type="submit"], .coming-soon .emailed-form button{ position:absolute; right:0px; top:0px; width: 70px; height:60px; line-height:40px; font-size:18px; color: #ffffff; border-radius: 0 50px 50px 0; background-color: #cf0b0b; 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; } .coming-soon .emailed-form .form-group input[type="submit"]:hover, .coming-soon .emailed-form button:hover{ } .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: 30%; right: -75%; left: 0; width: 250px; height: 250px; margin: auto; margin-top: -145px; border-radius: 50%; box-shadow: 0 0 20px rgba(0,0,0,0.05); background-color: rgba(255,255,255,.50); transform: scale(.8); } .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: #999999; display: inline-block; border-radius: 50%; margin-left: -1px; margin-top: -1px; } .click-indicator div:nth-child(1) { transform: rotate(30deg) translateY(-120px); } .click-indicator div:nth-child(2) { transform: rotate(60deg) translateY(-120px); } .click-indicator div:nth-child(3) { transform: rotate(90deg) translateY(-120px); background-color: #F00; } .click-indicator div:nth-child(4) { transform: rotate(120deg) translateY(-120px); } .click-indicator div:nth-child(5) { transform: rotate(150deg) translateY(-120px); } .click-indicator div:nth-child(6) { transform: rotate(180deg) translateY(-120px); background-color: #F00; } .click-indicator div:nth-child(7) { transform: rotate(210deg) translateY(-120px); } .click-indicator div:nth-child(8) { transform: rotate(240deg) translateY(-120px); } .click-indicator div:nth-child(9) { transform: rotate(270deg) translateY(-120px); background-color: #F00; } .click-indicator div:nth-child(10) { transform: rotate(300deg) translateY(-120px); } .click-indicator div:nth-child(11) { transform: rotate(330deg) translateY(-120px); } .click-indicator div:nth-child(12) { transform: rotate(360deg) translateY(-120px); background-color: #F00; } .clock-hour{ position: absolute; z-index: 2; top: 75px; left: 123px; width: 4px; height: 65px; background-color: #ee3611; 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: 55px; left: 123px; width: 4px; height: 85px; background-color: #ee3611; 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: 15px; left: 124px; width: 2px; height: 130px; background-color: #cccccc; opacity: .9; 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: #a00; border: solid 2px #a00; 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: 50px; left: 50px; 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%; } /*** ==================================================================== Error Section ==================================================================== ***/ .error-section{ position:relative; text-align:center; background-position: center; background-size: cover; background-repeat: no-repeat; padding:100px 0px; } .error-section:after, .error-section:before{ position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background-image: url(../images/icons/pattern-5.png); background-position: left bottom; background-repeat: no-repeat; content: ""; } .error-section:after{ transform: scaleX(-1); } .error-section .content-box{ position: relative; z-index: 1; } .error-section h2{ font-size:48px; line-height: 1em; margin-bottom: 10px; } .error-section .text{ font-size:18px; line-height: 1.2em; color:#353535; font-weight: 500; margin-bottom:35px; } .error-section .theme-btn{ text-transform:uppercase; margin: 0 5px; } /*** ==================================================================== Terms And Conditions ==================================================================== ***/ .terms-and-condition{ position: relative; padding: 120px 0; background-color: #f9fafc; } .terms-and-condition .tabs-content{ padding-left: 30px; } .tnc-tabs{ position: relative; } .tnc-tabs .tab-buttons{ position: relative; border: 1px solid #dddddd; background-color: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.10); margin-bottom: 70px; } .tnc-tabs .tab-buttons li{ position: relative; font-size: 14px; line-height: 25px; color: #5c6770; padding: 10px 30px; border-left: 2px solid transparent; border-bottom: 1px solid #dddddd !important; cursor: pointer; transition: all 300ms ease; } .tnc-tabs .tab-buttons li:last-child{ border-bottom: 0; } .tnc-tabs .tab-buttons li:hover, .tnc-tabs .tab-buttons li.active-btn{ background: #f9fafc; border-left-color: #cf0b0b; } .tnc-tabs p, .tnc-tabs h5, .tnc-tabs h4{ margin-bottom: 15px; } .rtl .page-title{ text-align: right; transform: scaleX(-1); } .rtl .page-title .title-outer{ transform: scaleX(-1); text-align: left; } /*** ================================================================== Right To Left Style ================================================================== ***/ .rtl{ direction: rtl; text-align: right; } .rtl .owl-carousel{ direction: ltr !important; } .rtl .main-footer .footer-bottom .copyright-text{ float: right; } .rtl .main-footer .footer-bottom .footer-nav{ float: left; } .rtl .user-links li a:before, .rtl .main-footer .footer-column .widget-title:before, .rtl .pricing-block .features li:before{ left: auto; right: 0; } .rtl .search-popup .form-group input[type="submit"], .rtl .search-popup .form-group button{ right: auto; left: 0; } .rtl .main-slider .tp-parallax-wrap{ max-width: 1200px; width: 100%; padding: 0 15px; left: 0 !important; right: 0 !important; margin: 0 auto !important; } .rtl .header-style-one .main-box{ padding-left: 0; padding-right: 30px; } .rtl .header-top .top-left .contact-list li i{ float: right; margin-right: 0; margin-left: 8px; } .rtl .main-header .main-box:before{ right: 0; left: 60px; } .rtl .main-header .theme-btn{ margin-left: 0; margin-right: 30px; } .rtl .main-menu .navigation > li{ margin-right: 0; margin-left: 30px; } .rtl .main-menu .navigation > li > ul{ left: auto; right: 0; } .rtl .main-menu .navigation li > ul > li.dropdown > ul{ left: auto; right: 100%; margin-left: 0;; } .rtl .main-menu .navigation > li > ul > li.dropdown > a:after{ transform: scaleX(-1); left: 10px; right: auto; } .rtl .main-menu .navigation > li > ul > li > ul > li > a, .rtl .main-menu .navigation > li > ul > li > a{ text-align: right; } .rtl .main-menu .navigation > li > ul > li.dropdown > span:before{ right: auto; left: 20px; transform: scaleX(-1); } .rtl .main-menu .navigation > li > ul:before{ left: auto; right: 20px; } .rtl .sticky-header .main-box{ padding: 0 20px; margin: 0; border-radius: 0 !important; } .rtl .feature-block .inner-box:before, .rtl .feature-block .inner-box:after{ right: auto; left: -100px; } .rtl .main-slider .btn-box a{ margin-right: 20px !important; } .rtl .main-slider .btn-box a:first-child{ margin-right: 0px !important; } .rtl .tp-bgimg{ transform: scaleX(-1); } .rtl .about-section .images-column .inner-column{ margin-right: 0; margin-left: -15px; text-align: left; } .rtl .about-section .video-link{ left: auto; right: 10px; } .rtl .about-section .image-1{ right: auto; left: 50px; } .rtl .about-section .image-2{ right: -70px; left: 300px; } .rtl .about-section .image-3{ right: auto; left: 20px; } .rtl .about-section .content-column .link-box .signature{ margin-right: 0; margin-left: 30px; } .rtl .pricing-block .features li{ padding-left: 0; padding-right: 30px; } .rtl .news-block .image-box .date{ right: auto; left: 0; border-radius: 0 10px 0 0; } .rtl .user-links li a{ padding-left: 0; padding-right: 20px; } .rtl .main-footer .footer-column .widget-title:after{ left: auto; right: 65px; } .rtl .recent-posts .post{ padding-left: 0; padding-right: 100px; } .rtl .main-footer .contact-list li .icon, .rtl .recent-posts .post .thumb{ left: auto; right: 0; } .rtl .main-footer .contact-list li{ padding-left: 0; padding-right: 70px; } .rtl .header-top-two .inner-container{ padding-left: 0; padding-right: 200px; } .rtl .header-style-two .main-box:before{ right: 0; left: auto; } .rtl .header-style-two .main-box{ padding-left: 0; padding-right: 200px; } .rtl .header-top-two .top-left .contact-list li i, .rtl .header-style-two .logo-box{ left: auto; right: 0; } .rtl .header-style-two .logo-box:before{ right: auto; left: 0; } .rtl .header-top-two .top-left .contact-list li i{ margin: 0; margin-left: 8px; } .rtl .header-top-two .top-left .contact-list li{ padding-left: 0; margin-left: 0; padding-right: 60px; margin-right: 40px; } .rtl .header-style-two .nav-outer{ padding-left: 0; padding-right: 40px; } .rtl .header-style-two .search-btn{ margin-left: 0; margin-right: 20px; } .rtl .about-section-two:before{ right: auto; left: 0; transform: translateX(-300px); } .rtl .about-section-two:after{ transform: scaleX(-1); } .rtl .feature-block-two .inner-box:before, .rtl .feature-block-two .inner-box:after{ right: auto; left: -100px; } .rtl .header-style-two .sticky-header .main-box{ padding: 0; } .rtl .service-block-two .lower-content .title-box{ direction: rtl; } .rtl .service-block-two .lower-content .icon{ margin-right: 0; margin-left: 10px; } .rtl .portfolio-section .btns-outer{ text-align: left; } .rtl .mixitup-gallery .filter-tabs li:last-child{ margin-left: 0; } .rtl .doctors-time-table .doctor-info{ padding: 20px 95px 20px 20px ; text-align: right; } .rtl .doctors-time-table .doctor-info .thumb{ left: auto; right: 20px; } .rtl .header-top-three .top-left .contact-list li i{ float: right; margin-right: 0; margin-left: 10px; } .rtl .about-section-three .image-box{ padding-right: 0; margin-left: 40px; } .rtl .about-section-three .about-owner{ padding-left: 0; padding-right: 180px; } .rtl .about-section-three .about-owner .sign-img{ left: auto; right: 0; } .rtl .feature-block-three .inner-box{ padding-left: 20px; padding-right: 110px; } .rtl .feature-block-three .icon{ left: auto; right: 20px; } .rtl .fun-fact-section-three .background-layer{ border-radius: 0 50px 0 0; } .rtl .skill-section .image-column{ left: auto; right: 0; } .rtl .skills .skill-item .skill-header .skill-percentage, .rtl .skill-section .skill-column{ float: left; } .rtl .skills .skill-item .skill-header .skill-title{ float: right; } .rtl .skills .skill-item .skill-bar{ transform: scaleX(-1); } .rtl .service-block-three .inner-box{ padding: 30px 30px; padding-right: 150px; } .rtl .service-block-three .icon{ left: auto; right: 0; border-radius: 0 0 0 30px; } .rtl .service-block-three .icon-float{ right: auto; left: 0; } .rtl .about-section-four .about-owner{ padding-left: 0; padding-right: 180px; } .rtl .about-section-four .about-owner .sign-img{ left: auto; right: 0; } .rtl .features-section .image-column .image-box{ padding-left: 10px; padding-right: 0; } .rtl .service-block-four .lower-content .read-more i{ float: left; margin-right: 5px; } .rtl .why-choose-us .content-box .icon-box .title{ margin-left: 0; margin-right: 60px; } .rtl .testimonial-block-two .info-box{ padding-left: 0; padding-right: 90px; } .rtl .testimonial-block-two .info-box .thumb{ left: auto; right: 0; } .rtl .testimonial-block-two .inner-box:before{ right: auto; left: 40px; } .rtl .appointment-section-three .content-column .inner-column{ padding-left: 0; padding-right: 70px; } .rtl .timing-list li:before{ left: auto; right: 0; } .rtl .timing-list li{ padding-left: 0; padding-right: 30px; } .rtl .header-style-four .main-box{ border-radius: 0 50px 50px 0; } .rtl .feature-block-seven .inner-box{ padding-left: 0; padding-right: 70px; } .rtl .info-block .icon, .rtl .news-block-two .overlay-content .inner, .rtl .testimonial-block-three .info-box .image, .rtl .feature-block-seven .count, .rtl .call-to-action-two .info-box .icon, .rtl .call-to-action-two .info-box{ left: auto; right: 0; } .rtl .appointment-section-two .testimonial-column .owl-dots{ right: auto; left: 0; } .rtl .call-to-action-two .info-box .inner{ padding-left: 0; padding-right: 120px; } .rtl .info-section .image-column .inner-column{ padding-right: 0; padding-left: 35px; } .rtl .info-block .inner{ padding-left: 0; padding-right: 100px; } .rtl .testimonial-block-three .info-box{ padding-left: 0; padding-right: 100px; } .rtl .appointment-section-two .form-column .inner-column{ padding-left: 0; padding-right: 70px; } .rtl .page-breadcrumb li:after{ right: auto; left: -10px; transform: scaleX(-1); } .rtl .sidebar-cart .cart-item{ padding-left: 0; padding-right: 100px; } .rtl .shopping-cart .cart-item .thumb{ left: auto; right: 0; } .rtl .shopping-cart .cart-header .title{ text-align: right; } .rtl .sidebar-cart .shopping-cart .theme-btn{ margin: 0 0 15px; } .rtl .sidebar-cart .shopping-cart{ right: auto; left: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(0%); } .rtl .message-box { border-radius: 0 50px 50px 0; } .rtl .message-box.with-icon{ padding-right: 50px; padding-left: 65px; } .rtl .message-box .icon-box{ left: auto; right: 10px; } .rtl .accordion-box .block .acc-btn .icon, .rtl .message-box .close-btn{ right: auto; left: 0; } .rtl .default-tabs .tab-buttons li{ float: right; } .rtl .terms-and-condition .tabs-content{ padding-left: 0; padding-right: 30px; } .rtl .doctor-detail-section .sidebar-side .sidebar{ padding-right: 0; padding-left: 30px; } .rtl .doctor-info-list li{ padding-left: 0; padding-right: 200px; } .rtl .author-box .thumb, .rtl .latest-news .post-thumb, .rtl .list-style-one li:before, .rtl .doctor-info-list li strong{ left: auto; right: 0; } .rtl .brochures-box .theme-btn i{ margin-right: 0; margin-left: 3px; } .rtl .list-style-one li{ padding-left:0; padding-right: 25px; } .rtl .service-detail .prod-tabs .tab-btns .tab-btn{ float: right; } .rtl .news-block .post-option li{ margin-left: 0; margin-right: 15px; } .rtl .latest-news .post{ padding-left: 0; padding-right: 100px; } .rtl .sidebar .popular-tags li{ margin: 0px 0px 8px 5px; } .rtl .blog-post .news-block .lower-content .post-info li{ margin-right: 0; margin-left: 20px; } .rtl .blog-post .news-block .lower-content .post-info li span{ margin-right: 0; margin-left: 5px; } .rtl .blog-post blockquote{ border-left: 0; border-right: 5px solid; } .rtl .author-box .inner-box{ padding-left: 30px; padding-right: 230px; } .rtl .coming-soon .content-column{ margin-left: 0; margin-right: 50%; } .rtl .coming-soon .image-column .bg-shape{ right: 0; left: auto; transform: scaleX(-1); } .rtl .clock-wrapper{ right: auto; left: -75px; } .rtl .sidebar .search-box .form-group button, .rtl .coming-soon .emailed-form .form-group input[type="submit"], .rtl .coming-soon .emailed-form button{ left: 0; right: auto; } .rtl .social-icon-one li:last-child{ margin-right: 10px; } .rtl .time-counter .time-countdown .counter-column{ margin-right: 0; margin-left: 30px; } .rtl .comments-area .comment{ padding-left: 0; padding-right: 100px; } .rtl .payment-box .payment-options li .radio-option input[type="radio"], .rtl .comments-area .comment-box .author-thumb{ left: auto; right: 0; } .rtl .sidebar .search-box .form-group input[type="text"], .rtl .sidebar .search-box .form-group input[type="search"]{ padding: 10px 20px 10px 50px; } .rtl .sidebar-page-container .sidebar{ margin-left: 0; margin-right: 20px; } .rtl .product-details .basic-details .item-quantity{ float: right; margin-left: 25px; margin-right: 0; } .rtl .product-details .basic-details .add-to-cart{ margin-left: 0; margin-right: 10px; } .rtl .shop-comment-form .rating-box .text{ float: right; margin-left: 30px; margin-right: 0; } .rtl .checkout-page .default-links li .far{ margin-right: 0; margin-left: 20px; } .rtl .order-box .title-box .col{ float: right; } .rtl .order-box ul li span{ float: left; } .rtl .payment-box .payment-options li .radio-option label{ padding-left: 0; padding-right: 30px; } .rtl .payment-box .payment-options li .radio-option label .small-text:before{ left: auto; right: 30px; } .rtl .payment-box .payment-options li .radio-option .what-paypall{ margin-left: 0; margin-right: 120px; } .rtl .contact-info-block .inner{ padding-left: 20px; padding-right: 80px; } .rtl .contact-info-block .icon{ left: auto; right: 20px; } .rtl .mobile-header .logo { float: right; } .rtl .mobile-header .nav-outer{ float: left; } .rtl .nav-outer .mobile-nav-toggler{ margin-left: 0; margin-right: 20px; } .rtl .banner-section .content-box{ border-left: 0; border-right-width: 10px; } .rtl .main-footer .footer-column .widget-title:before{ margin-left: 6px; margin-right: 0; } .rtl .cart-section .bootstrap-touchspin .input-group-btn-vertical{ left: 0; right: auto; } /*** ==================================================================== Box Layout ==================================================================== ***/ .box-layout .page-wrapper{ max-width: 1280px; margin: 0 auto; background-color: #ffffff; overflow: hidden; box-shadow: 0 0 50px rgba(0,0,0,0.10); } .box-layout{ background-repeat: repeat; background-position: center; background-attachment: fixed; background-image: url(../images/background/boxed-bg/1.png); } .box-layout .header-style-two.fixed-header .outer-container, .box-layout .sticky-header{ max-width: 1280px; left: 0; right: 0; margin: 0 auto; } .box-layout .fixed-footer{ position: absolute; } .box-layout .coming-soon{ position: relative; } .box-layout .coming-soon .content{ position: relative; }