/* Template Name: Buxiword | Multipurpose HTML5 Template Template URL: https://themedraft.com/buxiword Author: ThemeDraft Author URL:https://themedraft.com Version: 1.0 Tags: agency, business, consulting, corporations, creative, creative agency, digital agency, financial, marketing */ /* CSS Index ----------------------------------- 1. THEME DEFAULT CSS 2. HEADER AREA CSS START 3. HOMEPAGE THREE HEADER-TOP SECTION CSS START 4. HOMEPAGE FOUR HEADER SECTION CSS START 5. BANNER SECTION CSS START 6. HOMEPAGE TWO BANNER CSS START 7. HOMEPAGE THREE BANNER SECTION CSS START 8. HOMEPAGE FOUR BANNER SECTION CSS START 9. SERVICE SECTION CSS START 10. HOMEPAGE TWO SERVICE SECTION CSS START 11. HOMEPAGE FOUR SERVICE SECTION CSS START 12. SERVICE DETAILS PAGE CSS START 13. EXPERIENCE SECTION CSS START 14. HOMEPAGE TWO EXPERIENCE SECTION CSS START 15. HOMEPAGE THREE EXPERIENCE SECTION CSS START 16. HOMEPAGE FOUR EXPERIENCE SECTION CSS START 17. COUNTDOWN SECTION CSS START 18. PORTFOLIO SECTION CSS START 19. HOMEPAGE TWO PORTFOLIO SECTION CSS START 20. HOMEPAGE THREE PORTFOLIO SECTION CSS START 21. HOMEPAGE FOUR PORTFOLIO SECTION CSS START 22. PORTFOLIO ALL CSS PAGE START 23. PORTFOLIO DETAILS PAGE CSS START 24. TEAM SECTION CSS END 25. TEAM PAGE CSS START 26. PRICING SECTION CSS START 27. BLOG SECTION CSS START 28. HOMEPAGE TWO BLOG SECTION CSS START 29. HOMEPAGE THREE BLOG SECTION CSS START 30. HOMEPAGE FOUR BLOG SECTION CSS START 31. ALL BLOG PAGE CSS START 32. STANDDARD POST 33. ABOUT US PAGE CSS START 34. WORKING SECTION CSS START 35. HOMEPAGE TWO TESTIMONIAL SECTION CSS START 36. HOMEPAGE THREE TESTIMONIAL SECTION CSS START 37. NEWSLETTER SECTION CSS START 38. FAQ SECTION CSS START 39. BRAND SECTION CSS START 40. FOOTER SECTION CSS START 41. MEMBER DETAILS CSS START 42. SHOP PAGE CSS START 43. CONTACT US PAGE CSS START */ /* --------------------- 1. THEME DEFAULT CSS --------------------- */ @import url('https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap'); html { scroll-behavior: smooth; } body { font-family: 'Muli', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.9 !important; font-style: normal; color: #555555; overflow-x: hidden; } .img { max-width: 100%; transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; } .f-left { float: left } .f-right { float: right } .fix { overflow: hidden } a, .button { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover, .portfolio-cat a:hover, .footer -menu li a:hover { text-decoration: none; } a, a:hover, button { color: #FF2D55; outline: medium none; } input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], input[type=tel], input[type=number], input[type=date], textarea { border: 1px solid; border-color: #dddddd; padding: 15px; width: 100%; box-shadow: none; outline: none; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #333333; margin-top: 0px; font-style: normal; text-transform: normal; } ul { margin: 0px; padding: 0px; } a { color: #223645; } li { list-style: none } *::-moz-selection { background: #d6b161; color: #fff; text-shadow: none; } ::-moz-selection { background: #444; color: #fff; text-shadow: none; } ::selection { background: #444; color: #fff; text-shadow: none; } *::-moz-placeholder { color: #555555; font-size: 14px; opacity: 1; } *::placeholder { color: #555555; font-size: 14px; opacity: 1; } div, section{ -ms-word-break: break-all; -ms-word-wrap: break-all; -webkit-word-break: break-word; -webkit-word-wrap: break-word; word-break: break-word; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .btn { -moz-user-select: none; background: #F99219 none repeat scroll 0 0; border: medium none; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; color: #fff; cursor: pointer; display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 1px; line-height: 1; margin-bottom: 0; padding: 13px 25px; text-align: center; text-transform: uppercase; touch-action: manipulation; transition: all 0.3s ease 0s; vertical-align: middle; white-space: nowrap; } .owl-carousel .owl-nav div { background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0; height: 40px; left: 20px; line-height: 40px; opacity: 0; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); transition: all 0.3s ease 0s; visibility: hidden; width: 40px; } .owl-carousel .owl-nav div.owl-next { left: auto; right: 20px; } .owl-carousel:hover .owl-nav div { opacity: 1; visibility: visible; } .owl-carousel .owl-nav div:hover { background: #FF2D55; color: #fff; } /* scrollUp */ #scrollUp { background: #FF2D55; height: 45px; width: 45px; right: 50px; bottom: 77px; color: #fff; text-align: center; font-size: 16px; line-height: 45px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } #scrollUp i { height: 30px; width: 30px; line-height: 28px; border: 1px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .page-margin-bottom { margin-bottom: 30px; } /* SEARCH TRIGGER CSS START */ #search-icon { display: inline-block; color: #1c1c1c; margin: 32px 0; position: relative; z-index: 1; font-size: 18px; padding-left: 20px; margin-left: 8px; } #search-icon:hover { color: #1c1c1c; } #search-icon:after { position: absolute; left: 0; top: 50%; width: 2px; height: 28px; content: ""; background: #1c1c1c; margin-top: -15px; } /* SEARCG MODAL */ #search-modal { background-color: rgba(23, 26, 33, .95); } #search-modal .modal-dialog { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: none; outline: 0; } #search-modal .modal-dialog .modal-content { background: 0 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; } #search-modal .modal-dialog .modal-content form { width: 555px; position: relative; } #search-modal .modal-dialog .modal-content form input { width: 100%; font-size: 36px; border: none; border-bottom: 3px solid rgba(255, 255, 255, .1); background: 0 0; color: #fff; padding-bottom: 12px; padding-right: 40px; } #search-modal .modal-dialog .modal-content form input::-moz-placeholder { font-size: 35px; color: #fff; } #search-modal .modal-dialog .modal-content form input::placeholder { font-size: 35px; color: #fff; } #search-modal .modal-dialog .modal-content form button { position: absolute; right: 0; margin-bottom: 3px; font-size: 30px; color: rgba(255, 255, 255, .5); background: 0 0; border: none; cursor: pointer; top: 25px; } /* VIDEO PLAY BUTTON CSS */ .video-play-button { position: absolute; z-index: 10; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); box-sizing: content-box; display: block; width: 32px; height: 44px; padding: 18px 20px 18px 28px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .video-play-button i { color: #fff; position: absolute; z-index: 999; text-align: center; top: 50%; left: 50%; font-size: 20px; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); } .video-play-button:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; display: block; width: 80px; height: 80px; background: #F99219; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); animation: pulse-border 1500ms ease-out infinite; -webkit-animation: pulse-border 1500ms ease-out infinite; } .video-play-button:after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; display: block; width: 80px; height: 80px; background: #F99219; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transition: all 200ms; -webkit-transition: all 200ms; -moz-transition: all 200ms; -ms-transition: all 200ms; -o-transition: all 200ms; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .video-play-button:hover:after { background-color: darken(#F99219, 10%); } .video-play-button img { position: relative; z-index: 3; max-width: 100%; width: auto; height: auto; } .video-play-button span { display: block; position: relative; z-index: 3; width: 0; height: 0; border-left: 32px solid #fff; border-top: 22px solid transparent; border-bottom: 22px solid transparent; } @-webkit-keyframes pulse-border { 0% { opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -moz-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -o-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -moz-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -o-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } @keyframes pulse-border { 0% { opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -moz-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -o-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); } 100% { opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -moz-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -o-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); } } .video-overlay { z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.80); opacity: 0; /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; */ -webkit-transition: all ease 500ms; transition: all ease 500ms; } .video-overlay.open { position: fixed; z-index: 1000; opacity: 1; } .video-overlay-close { position: absolute; z-index: 1000; top: 15px; right: 20px; font-size: 36px; line-height: 1; color: #fff; text-decoration: none; cursor: pointer; -webkit-transition: all 200ms; transition: all 200ms; color: #fff !important; } .video-overlay-close:hover { color: #fa183d; } .video-overlay iframe { position: absolute; top: 50%; left: 50%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.75); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); } /* BREADCRUMB AREA CSS START */ .breadcrumb-area { background-size: cover; background-position: center; } .breadcrumb-area .row { height: 350px; } .breadcrumb-large-title, .breadcrumb-title a, .breadcrumb-title { color: #fff; } .breadcrumb-large-title{ font-size: 55px; font-weight: 900; margin-bottom: 15px; } .breadcrumb-title a, .breadcrumb-title span { font-size: 18px; } .breadcrumb-title a:hover, .breadcrumb-title span { color: #e53a60; } .breadcrumb-title a { position: relative; z-index: 1; padding-left: 7px; padding-right: 18px; } .breadcrumb-title a:after { position: absolute; right: 0; font-size: 15px; content: "\f101"; font-family: "Font Awesome 5 Free"; font-weight: 700; top: -1px; } .breadcrumb-title a:hover:after { color: #fff; } .breadcrumb-title span { padding-left: 7px; } /* --------------------- PRELOADER CSS START --------------------- */ #loading{ background-color: #101010; height: 100%; width: 100%; position: fixed; z-index: 9999; margin-top: 0px; top: 0px; } #loading-center{ width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; height: 200px; width: 200px; margin-top: -100px; margin-left: -100px; } .object{ -moz-border-radius: 50% 50% 50% 50%; -webkit-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; position: absolute; border-left: 5px solid #e53a60; border-right: 5px solid #e53a60; border-top: 5px solid transparent; border-bottom: 5px solid transparent; -webkit-animation: animate 2s infinite; animation: animate 2s infinite; } #object_one{ left: 75px; top: 75px; width: 50px; height: 50px; } #object_two{ left: 65px; top: 65px; width: 70px; height: 70px; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } #object_three{ left: 55px; top: 55px; width: 90px; height: 90px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #object_four{ left: 45px; top: 45px; width: 110px; height: 110px; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } @-webkit-keyframes animate { 50% { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } 100% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } } @keyframes animate { 50% { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } 100% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } } /* --------------------- HEADER AREA CSS START --------------------- */ .header-top-area { background: #F99219; padding: 15px 0; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .header-left-contact-info h6, .header-left-contact-info h6 i:before { color: #fff; } .header-left-contact-info h6 { display: inline-block; margin-right: 15px; font-weight: 700; } .header-left-contact-info h6 i:before { font-size: 15px; margin-left: 0; margin-right: 10px; } .social-icon-inner.header-top-icon a { opacity: 1; visibility: visible; } .main-header { background: #fdeff3; transition: 0s; -webkit-transition: 0s; -moz-transition: 0s; -ms-transition: 0s; -o-transition: 0s; } .sticky-menu { position: fixed; top: 0; left: 0; width: 100%; background: #F99219; z-index: 999; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .sticky-menu.main-header .logo h3, .sticky-menu.main-header .logo h3 span, .sticky-menu #search-icon, .sticky-menu #search-icon:hover, .sticky-menu .main-menu li a.active, .sticky-menu .main-menu li a:hover, .sticky-menu .main-menu li a, .main-menu li ul li a.active, .main-menu li ul li a:hover { color: #000; } .main-menu li ul li a { color: #555555; } .main-header.white-header.sticky-menu { background: #FAE77B; height: 100px; } .sticky-menu .main-menu li a.active:after, .sticky-menu .main-menu li a:hover:after, .sticky-menu #search-icon:after { background: #fff; } .sticky-menu .main-menu li ul li a { color: #555555; } .main-header.white-header { background: #fff; } .main-header .logo { display: inline-block; margin: 20px 0px; } .main-header .logo img { transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .main-menu { text-align: center; margin-top: 27px; } .main-menu li { display: inline-block; position: relative; } .main-menu li ul { position: absolute; width: 280px; background: #fff; z-index: 9999; border: 1px solid #F99219; top: 100%; left: 0; opacity: 0; visibility: hidden; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); transition: all 600ms ease; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .main-menu li:hover ul { opacity: 1; visibility: visible; top: 98px; } .main-menu li:hover ul { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); pointer-events: auto; -moz-transform: translateY(0px); -o-transform: translateY(0px); } .main-menu li ul li { border-bottom: 1px solid #f3e2e6; display: block; text-align: left; } .main-menu li a { display: block; color: #1c1c1c; font-size: 18px; font-weight: 700; padding: 32px 12px 32px 13px; position: relative; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .main-menu li a:after { position: absolute; left: 50%; bottom: 15px; width: 0; height: 2px; content: ""; background: #F99219; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; opacity: 0; } .main-menu li a.active, .main-menu li a:hover { position: relative; color: #F99219; } .main-menu li a.active:after { position: absolute; left: 50%; bottom: 15px; width: 80%; height: 2px; content: ""; background: #F99219; opacity: 1; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .main-menu li a:hover:after { opacity: 1; width: 80%; } /* Drop down menu css */ .main-menu li ul li>a:before { position: absolute; left: 0; top: 0; width: 0px; height: 100%; content: ""; background: #F99219; z-index: -1; opacity: 0; visibility: hidden; transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; } .main-menu li ul li>a:hover:before { opacity: 1; visibility: visible; width: 100%; } .main-menu li ul li>a:hover { color: #fff; } .main-menu li ul li>a.active:hover:before { display: none; } .main-menu li ul li>a { padding: 10px 5px 9px 25px; } .main-menu li ul li>a.active { background: #F99219; color: #fff; } .main-menu li ul li>a:after { display: none; } /* --------------------- HOMEPAGE THREE HEADER-TOP SECTION CSS START --------------------- */ .home-three-top-header .social-icon-inner span { color: #333333; font-weight: 700; } .header-top-area.home-three-top-header { border-bottom: 1px solid #e2e2e2; background: transparent; } .header-top-area.home-three-top-header .header-left-contact-info h6 { color: #333333; font-weight: 600; } .header-top-area.home-three-top-header .header-left-contact-info h6 i:before { color: #333333; } .home-three-top-header .social-icon-inner a { color: #333333; } .home-three-top-header .social-icon-inner a:hover { color: #e63b60; } /* --------------------- HOMEPAGE FOUR HEADER SECTION CSS START --------------------- */ .header-wrap.home-four-header { border: none; padding: 0; position: absolute; width: 100%; z-index: 999; left: 0; top: 0; background: transparent; } .header-wrap.home-four-header .main-header { background: transparent; } .home-four-header-white { background: #fff; box-shadow: 0px 3px 20px 0px rgba(217, 217, 217, 0.65); margin: 0 -30px; padding: 0 30px; border-radius: 5px; min-height: 100px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .home-four-header .main-menu li a.active:after { bottom: 0; } .home-four-header .main-menu li a:after { bottom: 0; } .sticky-menu .home-four-header-white { background: #FAE77B; box-shadow: none; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } .header-wrap.home-four-header .sticky-menu.main-header { background: #FAE77B; transition: 0s; -webkit-transition: 0s; -moz-transition: 0s; -ms-transition: 0s; -o-transition: 0s; } .home-four-header .sticky-menu .main-menu li a.active:after { bottom: 15px; } .home-four-header .sticky-menu .main-menu li a:after { bottom: 15px; } /* --------------------- BANNER SECTION CSS START --------------------- */ .left-shape { position: absolute; left: -270px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .video-inner-bg { height: 620px; background-size: cover; background-position: center center; position: relative; z-index: 1; width: 100%; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .video-inner-bg:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #1c1c1c; opacity: .4; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .small-tri-shape img { background-repeat: no-repeat; position: absolute; } .small-tri-shape.shape-1 img { top: -28px; left: -8px; } .small-tri-shape.shape-2 img { bottom: -28px; left: -23px; } .small-tri-shape.shape-3 img { bottom: -28px; right: -90px; } .banner-right-shape { position: absolute; top: -30px; right: -30px; } .full-video-section { width: 123%; position: relative; padding-left: 60px; } .banner-inner-section { position: relative; background: #fdeff3; padding: 150px 0; } .slider-content h1 { font-size: 50px; font-weight: 900; line-height: 66px; margin-bottom: 30px; } .slider-content h1 span { color: #F99219; } .slider-content h4 { font-size: 20px; line-height: 34px; margin-bottom: 40px; font-weight: 400 } .btn.common-btn { background: #F99219; text-transform: uppercase; padding: 20px 30px; font-size: 16px; font-weight: 700; box-shadow: 0px 5px 16px 0px rgba(234, 58, 95, 0.5); border: 2px solid #F99219; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .btn.common-btn.last-child { margin-left: 10px; } .btn.common-btn:hover { background: #fff; color: #FF2D55; } /* --------------------- HOMEPAGE TWO BANNER CSS START --------------------- */ .single-slide { background-size: cover; background-position: center; background-color: #ddd; position: relative; z-index: 1; min-height: 646px; } .single-slide .slider-content h1, .single-slide .slider-content h4 { color: #fff; } .slick-arrow:focus { outline: none; } .slider-area .slick-arrow { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); height: 80px; width: 80px; line-height: 72px; font-size: 20px; border-radius: 50%; background-image: url(assets/img/slide1-100.jpg); color: #fff; border: 5px solid #fff; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 2; cursor: pointer; opacity: 0; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .slider-area .slick-right.slick-arrow { left: auto; right: 10px; background-image: url(assets/img/slide2-100.jpg); } .slider-active:hover .slick-arrow.slick-prev { left: 30px; opacity: 1; } .slider-active:hover .slick-arrow.slick-right { right: 30px; opacity: 1; } /* --------------------- HOMEPAGE THREE BANNER SECTION CSS START --------------------- */ .home-three-banner .banner-inner-section { background-size: cover; background-position: center; } .home-three-banner .slider-content h1, .home-three-banner .slider-content h1 span, .home-three-banner .slider-content h4 { color: #fff; } .home-three-bg-vector-1 img { position: absolute; right: -95px; width: 730px; top: 117px; } .home-three-bg-vector-2 img { position: absolute; right: -115px; width: 750px; top: 33px; } .home-three-banner { position: relative; } .home-three-banner .btn.common-btn { color: #F99219; background: #fff; position: relative; z-index: 2; } .home-three-banner .btn.common-btn:last-child { margin-left: 0; } .home-three-banner .left-shape img { width: 21%; } .home-three-banner .small-tri-shape.shape-1 img { right: 0; left: auto; top: -30px; } .home-three-banner .small-tri-shape.shape-2 img { left: auto; right: 90px; } .home-three-banner .small-tri-shape.shape-3 img { right: auto; left: 50px; bottom: -90px; } .home-three-banner .small-tri-shape.shape-4 { background-size: cover; width: 150px; height: 52px; left: 98px; bottom: -11px; position: absolute; } /* --------------------- HOMEPAGE FOUR BANNER SECTION CSS START --------------------- */ .home-four-banner .banner-inner-section { background: transparent; } .home-four-banner .banner-inner-section { background: transparent; padding-top: 300px; padding-bottom: 100px; } .home-four-banner .slider-content h1, .home-four-banner .slider-content h4 { color: #333333; } .home-four-banner .slider-content h1 span { color: #F99219; } .home-four-banner .left-shape { left: -50px; bottom: 0; } .home-four-banner .left-shape img { width: auto; } .home-four-right-banner { position: absolute; right: 0; top: 0; max-width: 50%; } .home-four-right-banner img { max-width: 100%; } .home-four-banner .small-tri-shape.shape-1 img { right: 90px; left: auto; top: -70px; } .home-four-banner .small-tri-shape.shape-2 img { left: auto; right: 20px; } .home-four-banner .small-tri-shape.shape-3 img { right: auto; left: -30px; top: -110px; } .home-four-banner .left-shape { left: -50px; bottom: 0; transform: none; top: auto; } .home-four-top--pattern { position: absolute; top: 0; left: 40px; } .home-four-banner .btn.common-btn { color: #fff; background: #F99219; position: relative; z-index: 2; } .home-four-banner .btn.common-btn:hover { border-color: #F99219; background: #fff; color: #F99219; } /* --------------------- SERVICE SECTION CSS START --------------------- */ .section-padding { padding: 20px 0; } .section-title .section-large-title { font-size: 40px; text-transform: uppercase; } .section-title span { color: #F99219; font-weight: 800; margin-bottom: 10px; display: inline-block; } .section-title { max-width: 730px; margin: auto; margin-bottom: 70px; } .single-service-icon { height: 120px; width: 120px; background: #fdebef; line-height: 120px; text-align: center; display: inline-block; margin-bottom: 30px; border-radius: 8px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .single-service-icon i:before { font-size: 65px; color: #231f20; margin-left: 0; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .single-service-item { box-shadow: 0px 5px 16px 0px rgba(217, 217, 217, 0.4); padding: 50px 30px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .single-service-item:hover { background: #FF2D55; } .single-service-item:hover.single-service-item h4, .single-service-item:hover.single-service-item p, .single-service-item:hover.single-service-item a.read-more { color: #fff; } .single-service-item:hover .single-service-icon { background: #ec4e70; } .single-service-item:hover .single-service-icon i:before { color: #fff; } .single-service-item h4 { font-size: 20px; text-transform: uppercase; margin-bottom: 15px; line-height: 20px; } .single-service-item p { color: #555555; font-weight: 500; font-size: 16px; margin: 0; } .single-service-item a.read-more { display: inline-block; color: #555555; font-size: 16px; line-height: 16px; font-weight: 700; margin-top: 20px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .single-service-item a.read-more i:before { font-size: 14px; margin-left: 5px; } /* --------------------- HOMEPAGE TWO SERVICE SECTION CSS START --------------------- */ .home-two-service .single-service-item { padding: 0; } .home-two-service .single-service-item h4 { padding: 0px 30px 0px 30px; } .home-two-service .single-service-item p { padding: 0px 0px 0px 0px; } .home-two-service .single-service-item a.read-more { padding: 0px 15px 50px 30px; } .home-two-service .single-service-icon { background: #eaeaea; margin-top: -60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .home-two-service .service-little-round { height: 105px; width: 105px; background: #333333; line-height: 105px; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .home-two-service .single-service-item:hover .service-little-round { background: #F99219; } .home-two-service .single-service-item:hover a.read-more { color: #F99219; } .home-two-service .single-service-item:hover .single-service-icon { background: #eaeaea; } .home-two-service .single-service-item:hover { background: #fff; } .home-two-service .single-service-item:hover.single-service-item h4 { color: #333333; } .home-two-service .single-service-item:hover.single-service-item p { color: #555555; } .home-two-service .service-little-round i:before { color: #fff; font-size: 50px; } .home-two-service .section-title { margin-bottom: 130px; } .service-mar-100 { margin-bottom: 5px; } /* --------------------- HOMEPAGE FOUR SERVICE SECTION CSS START --------------------- */ .home-four-service .single-service-item { text-align: center; background: #fff; } .home-four-service .single-service-item:hover { text-align: center; background: #FF2D55; } .home-four-service .single-service-icon { height: 80px; width: 80px; line-height: 80px; background: transparent; position: relative; z-index: 1; } .home-four-service .single-service-item:hover .single-service-icon { background: transparent; } .home-four-service .single-service-icon:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #fdebef; z-index: -1; transform: rotate(45deg); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .home-four-service .single-service-item:hover .single-service-icon:after { background: #ec4e70; } .section-title h2 { font-weight: 900; font-size: 40px; margin: 0; } .home-four-service-number { font-size: 100px; font-weight: 900; position: absolute; right: 40px; top: 10px; color: #fcf4f5; line-height: 1; } /* --------------------- SERVICE DETAILS PAGE CSS START --------------------- */ .service-same-design { border-top: 2px solid; border-right: 2px solid; border-bottom: 2px solid; border-left: 6px solid; border-color: #FF2D55; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .single-service-details-titie { background: #FF2D55; color: #fff; font-size: 24px; padding: 15px 30px; margin: 0; } .single-service-categories ul li a { font-size: 18px; padding: 15px 30px; display: block; border-bottom: 1px solid #eaedff; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .single-service-categories ul li a:hover, .single-service-categories ul li.active a { color: #F99219; } .single-service-categories ul li { position: relative; z-index: 1; } .single-service-categories ul li:before, .single-service-categories ul li.active::before { position: absolute; left: -5px; top: 0; height: 100%; width: 5px; background: #1c1c1c; content: ""; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; opacity: 0; } .single-service-categories ul li:hover:before { opacity: 1; } .single-service-categories ul li.active::before { opacity: 1; } .single-service-details-contact>.single-service-details-icon i { color: #F99219; } .single-service-details-contact>.single-service-details-icon i:before { font-size: 50px; line-height: 1; font-weight: 500; margin: 0px; } .single-service-details-info-wrap { padding: 30px 0; } .single-service-details-icon { float: left; } .single-service-details-content p { margin: 0; line-height: 1; text-transform: uppercase; color: #333333; margin-bottom: 5px; font-weight: 900; } .single-service-details-content a, .single-service-details-content span { font-weight: 400; } .single-service-details-content { padding-left: 15px; color: #555555; font-weight: 700; } .single-service-details-contact { display: flex; padding: 0 30px; } .single-service-submisstion-form .submission-form-inner input[type=text], .single-service-submisstion-form .submission-form-inner input[type=email], .single-service-submisstion-form .submission-form-inner textarea { border-color: #efecf5; background-color: #EFECF3; margin-bottom: 30px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .single-service-submisstion-form .submission-form-inner input[type=text]:focus, .single-service-submisstion-form .submission-form-inner input[type=email]:focus, .single-service-submisstion-form .submission-form-inner textarea:focus { border-color: #FF2D55; } .submission-form-inner { padding: 40px 20px; } .single-service-submisstion-form .submission-form-inner textarea { resize: none; min-height: 170px; } .single-service-submisstion-form .submission-form-inner input[type=button] { background: #FF2D55; color: #fff; border: 1px solid #F99219; font-weight: 700; text-transform: uppercase; padding: 10px 25px; margin-top: 5px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .single-service-submisstion-form .submission-form-inner textarea { resize: none; height: 200px; } .single-service-details-big-bg { height: 470px; background-size: cover; background-position: center; background-color: #ddd; margin-bottom: 20px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .single-service-details-short-text .single-service-details-title { font-size: 36px; margin-bottom: 15px; } .single-service-details-short-text { padding: 15px 0; } .single-service-alert-box p { margin: 0; font-weight: 700; } .single-service-alert-box { background: #faf9ff; padding: 35px 25px; border-left: 3px solid #F99219; margin: 25px 0; color: #2b3c48; } /* --------------------- EXPERIENCE SECTION CSS START --------------------- */ .experience-area.section-padding { padding: 100px 0px 130px 0; } .grey-bg { background-color: #f5f5f5; } .experience-content-right { padding-left: 20px; } .left-experience-bg { height: 650px; background-size: cover; background-position: center center; position: relative; z-index: 1; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .left-inner-shape { position: absolute; bottom: -40px; left: -26px; } .experience-content-right .experience-big-title { font-size: 54px; font-weight: 900; color: #cccccc; line-height: 65px; margin-bottom: 25px; } .experience-content-right a.exp-link { color: #FF2D55; text-transform: uppercase; font-weight: 700; font-size: 18px; display: inline-block; z-index: 1; margin-bottom: 10px; letter-spacing: 2px; } .experience-content-right h3 { font-size: 32px; line-height: 1.4; margin-bottom: 15px; font-weight: 900; } .experience-content-right p { color: #555555; font-size: 16px; margin-bottom: 6px; } /* --------------------- HOMEPAGE TWO EXPERIENCE SECTION CSS START --------------------- */ .home-two-experience .left-experience-bg { position: relative; z-index: 1; } .home-two-experience .btn.common-btn { border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .home-two-experience-bg-1 { height: 550px; width: 550px; position: relative; } .home-two-experience-bg { background-size: cover; background-position: center; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .home-two-experience-bg.home-two-experience-bg-2 { height: 300px; width: 300px; position: absolute; bottom: 0; left: -90px; border: 3px solid #fff; } .home-two-experience-shape { height: 300px; width: 300px; background-size: cover; background-position: center; position: absolute; top: 50px; left: -125px; } .home-two-experience .left-experience-bg { height: auto; } .m-left-none { margin-left: 0 !important; } /* --------------------- HOMEPAGE THREE EXPERIENCE SECTION CSS START --------------------- */ .left-experience-bg.home-three-experience img { position: absolute; right: 0; width: auto; } .experience-area.section-padding.home-three-experience { padding-bottom: 160px; } .section-title h3 { font-size: 30px; font-weight: 900; } .experience-area.home-three-video { background: #fef3f6; } .home-three-video-wrap .video-play-button:after { background: #fff; } .home-three-video-wrap .video-play-button i { color: #e63b60; } .video-inner-bg.home-three-video-wrap { height: 450px; position: relative; z-index: 1; box-shadow: 0px 5px 16px 0px rgba(234, 58, 95, 0.5); overflow: hidden; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .video-inner-bg.home-three-video-wrap:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #e63b60; opacity: .7; z-index: -1; } .home-three-video .experience-content-right { padding-left: 0; } .video-play-button.video-play-white { position: relative; } .video-play-button.video-play-white:before { background: #fff; } /* --------------------- HOMEPAGE FOUR EXPERIENCE SECTION CSS START --------------------- */ .home-four-experience .home-two-experience-bg { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .home-four-experience .home-two-experience-bg-1 { box-shadow: 0px 4px 16px 0px rgba(217, 217, 217, 0.9); } .home-four-experience .home-two-experience-bg.home-two-experience-bg-2 { bottom: -70px; border: none; box-shadow: 0px 4px 16px 0px rgba(217, 217, 217, 0.9); } .home-four-experience .home-two-experience-shape { top: -39px; left: -35px; } /* --------------------- COUNTDOWN SECTION CSS START --------------------- */ .countdown-area { background: #F99219; background-size: cover; background-position: center center; position: relative; z-index: 1; } .countdown-title h3, .countdown-title p { color: #fff; } .countdown-title h3 { font-size: 30px; text-transform: uppercase; font-weight: 900; line-height: 35px; margin-bottom: 30px; } .countdown-title p { font-weight: 500; font-size: 16px; } .countdown-title { margin-bottom: 60px; } .full-countdown-wrap { padding: 0 30px; } .single-countdown-wrap { background: #fff; padding: 40px 30px 36px 30px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .countdown-icon i:before { font-size: 65px; color: #333333; margin-left: 0; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .countdown-icon { height: 80px; line-height: 67px; display: inline-block; width: 80px; margin-bottom: 10px; } .countdown-inner-content h2 { font-weight: 900; font-size: 35px; line-height: 35px; display: inline-block; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .countdown-inner-content p { text-transform: uppercase; font-weight: 700; color: #555555; margin: 0; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .single-countdown-wrap:hover .countdown-icon i:before, .single-countdown-wrap:hover .countdown-inner-content h2 { color: #F99219; } /* --------------------- PORTFOLIO SECTION CSS START --------------------- */ .single-portflio-gallery { height: 500px; background-size: cover; background-position: center; background-color: #ddd; position: relative; z-index: 1; box-shadow: 0px 5px 8px 0px rgba(217, 217, 217, .9); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .portfolio-hover-info { position: absolute; left: 0; bottom: 40px; width: 80%; opacity: 0; visibility: hidden; transform: translateY(0px); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } .single-portflio-gallery:hover .portfolio-hover-info { opacity: 1; visibility: visible; left: 10%; } .portfolio-hover-info h6 a, .portfolio-hover-info p { color: #fff; } .single-portflio-gallery:after { position: absolute; left: 0; top: 0; width: 0; height: 100%; content: ""; background: #e63b60; opacity: 0; visibility: hidden; z-index: -1; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .single-portflio-gallery:hover:after { opacity: .8; width: 100%; visibility: visible; } .portfolio-hover-info h6 a { font-size: 18px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; position: relative; visibility: hidden; z-index: 1; padding-top: 10px; display: block; transition: all 1.1s ease 0s; -webkit-transition: all 1.1s ease 0s; -moz-transition: all 1.1s ease 0s; -ms-transition: all 1.1s ease 0s; -o-transition: all 1.1s ease 0s; transform: translateX(-40px); -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); } .single-portflio-gallery:hover .portfolio-hover-info h6 a{ transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); visibility: visible; } .portfolio-hover-info p { font-weight: 500; margin: 0; visibility: hidden; transition: all 1.1s ease 0s; -webkit-transition: all 1.1s ease 0s; -moz-transition: all 1.1s ease 0s; -ms-transition: all 1.1s ease 0s; -o-transition: all 1.1s ease 0s; transform: translateX(-40px); -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); } .single-portflio-gallery:hover .portfolio-hover-info p { visibility: visible; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } .portfolio-hover-info h6 a:after { position: absolute; left: 0; top: 0; width: 40%; height: 1px; content: ""; background: #fff; transition: all 1.1s ease 0s; -webkit-transition: all 1.1s ease 0s; -moz-transition: all 1.1s ease 0s; -ms-transition: all 1.1s ease 0s; -o-transition: all 1.1s ease 0s; transform: translateX(-40px); -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); } .single-portflio-gallery:hover .portfolio-hover-info h6 a:after { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .portfolio-gallery-wrap.owl-carousel .owl-nav div, .single-full-blog-wrap-slide.owl-carousel .owl-nav div { height: 65px; width: 65px; line-height: 65px; font-size: 25px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background: #F99219; color: #fff; } .portfolio-gallery-wrap.owl-carousel .owl-nav div { left: 15px; } .portfolio-gallery-wrap.owl-carousel .owl-nav div.owl-next { right: 15px; left: auto; } .portfolio-gallery-wrap.owl-carousel:hover .owl-nav .owl-prev { left: 55px; } .portfolio-gallery-wrap.owl-carousel:hover .owl-nav .owl-next { right: 55px; } /* --------------------- HOMEPAGE TWO PORTFOLIO SECTION CSS START --------------------- */ .home2-portfolio-wrap { background-size: inherit; background-position: top; background-color: #F99219; } .section-title.home-two-portfolio-mytitle span, .section-title.home-two-portfolio-mytitle .section-large-title{ color: #fff; } .portfolio-home2-bg { height: 370px; background-size: cover; background-position: center; position: relative; z-index: 2; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .portfolio-home2-inner-content .number-item { font-size: 60px; font-weight: 900; color: #f07590; line-height: 60px; display: inline-block; margin-right: 15px; } .portfolio-home2-inner-content a { display: inline-block; color: #fff; font-size: 26px; line-height: 30px; font-weight: 900; text-transform: capitalize; } .portfolio-home2-inner-content a span { display: block; font-weight: 600; font-size: 16px; } .portfolio-home2-inner-content { margin-top: 30px; } .show-all-buton { text-align: center; margin-top: 50px; } .show-all-buton .btn.common-btn { background: transparent; color: #fff; border: 2px solid #fff; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .show-all-buton .btn.common-btn:hover { background: #fff; border-color: #fff; color: #F99219; } /* --------------------- HOMEPAGE THREE PORTFOLIO SECTION CSS START --------------------- */ .home-3-single-portfolio-wrap .portfolio-full-bg { height: 570px; background-size: cover; background-position: center; background-color: #ddd; position: relative; z-index: 2; cursor: pointer; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .home-3-link-portfolio i:before { margin-left: 0; font-size: 35px; } .home-3-link-portfolio { display: inline-block; color: #fff !important; background: #F99219; height: 100px; width: 100px; text-align: center; line-height: 100px; position: absolute; left: 50%; top: 50%; opacity: 0; visibility: hidden; cursor: pointer; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .home-3-single-portfolio-wrap:hover .home-3-link-portfolio { opacity: 1; visibility: visible; } .home-three-portfolio-btn.show-all-buton .btn.common-btn { background: #F99219; color: #fff; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .home-three-portfolio-btn.show-all-buton .btn.common-btn:hover { color: #F99219; border-color: #F99219; background: #fff; } /* --------------------- HOMEPAGE FOUR PORTFOLIO SECTION CSS START --------------------- */ .section-title.home-four-portfolio-title { margin-bottom: 20px; } .single-project-list { height: 360px; background-size: cover; background-position: center; background-color: #ddd; margin-bottom: 15px; position: relative; z-index: 1; overflow: hidden; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .single-project-list:after { position: absolute; left: 0; top: 0; width: 0; height: 100%; content: ""; background: #e63b60; opacity: 0; visibility: hidden; z-index: -1; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .single-project-list:hover .portfolio-hover-info { opacity: 1; visibility: visible; left: 10%; } .single-project-list:hover .portfolio-hover-info h6 a { display: block; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); visibility: visible; } .single-project-list:hover .portfolio-hover-info p { visibility: visible; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } .single-project-list:hover .portfolio-hover-info h6 a:after { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .single-project-list:hover:after { opacity: .8; width: 100%; visibility: visible; } .projects-list .col-md-4:nth-child(2) .single-project-list { height: 750px; } .grid-item { margin-bottom: 15px; } .home-four-portfolio-menu button { border: none; background: transparent; color: #555555; font-weight: 700; cursor: pointer; position: relative; z-index: 1; padding: 10px 25px; transition: .3s; } .home-four-portfolio-menu button.active, .home-four-portfolio-menu button:hover { color: #F99219; } .home-four-portfolio-menu button:focus { outline: none; } .home-four-portfolio-menu button:after { position: absolute; left: 0; content: "~"; top: 50%; transform: translateY(-50%); font-size: 20px; } .home-four-portfolio-menu button:first-child:after { display: none; } .home-four-portfolio-menu { margin-bottom: 50px; } /* --------------------- PORTFOLIO ALL CSS PAGE START --------------------- */ .home2-portfolio-wrap.portfolio-all-wrap { background-color: #fff; } .portfolio-all-wrap .portfolio-home2-inner-content a { color: #333333; } .portfolio-all-wrap .portfolio-home2-inner-content .number-item { color: #d0d0d0; } .home-two.testimonial-area.portfolio-all-wrap { background-color: #f5f5f5; } .portfolio-all-wrap .homw-two-testimonial { background-color: #fff; } .portfolio-all-wrap .portfolio-home2-inner-content a:hover { color: #F99219; } /* --------------------- PORTFOLIO DETAILS PAGE CSS START --------------------- */ .single-portfolio-details-bg { height: 450px; background-size: cover; background-position: center; background-color: #ddd; } .portfolio-all-details-wrap { padding: 110px 0px 40px 0px; } .single-portfolio-details-category { background-color: #F99219; padding: 40px 30px; } .single-portfolio-details-category, .single-portfolio-details-category p, .single-portfolio-details-category span, .single-portfolio-details-category h4, .single-portfolio-details-category a { color: #fff; font-weight: 400; } .single-portfolio-details-category h4 { font-weight: 900; } .td-icon:before { font-size: 45px; margin: 0; font-weight: 500; } .td-icon:before, .fs-icon i { margin-right: 15px; } .fs-icon i { font-size: 45px; } .single-portfolio-details-category-wrap.fs-icon { align-items: center; } .single-portfolio-details-category-wrap { display: flex; border-bottom: 1px solid #ef6a86; padding: 13px 0px 13px 0px; } .single-portfolio-details-category-icon { line-height: 1; } .single-portfolio-details-category-content p { margin-bottom: 5px; line-height: 1; font-weight: 900; } .single-portfolio-details-category-wrap:last-child { padding-bottom: 0; border: none; } .portfolio-details-big-bg .owl-dot.active { background: #fff; } .portfolio-details-big-bg .owl-dots div { height: 10px; width: 10px; background: #F99219; display: inline-block; margin-right: 10px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .portfolio-details-big-bg .owl-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .portfolio-short-text-content h1 { font-weight: 800; margin-bottom: 15px; } .portfolio-short-text-content h2 { font-size: 40px; font-weight: 800; margin-bottom: 15px; } .right-side-portfolio-details-video { height: 360px; background-size: cover; background-position: center; background-color: #ddd; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .left-side-video-marked-text h3 { font-size: 30px; margin-bottom: 20px; } .portfolio-details-video-wrap { padding: 25px 0px 90px 0px; } .video-wrap-list-item li { position: relative; z-index: 1; padding-left: 25px; font-weight: 700; margin-bottom: 5px; } .video-wrap-list-item li:before { content: "\f058"; font-family: "Font Awesome 5 Free"; color: #F99219; position: absolute; font-weight: 400; left: 0; top: 1px; } /* --------------------- TEAM SECTION CSS END --------------------- */ .team-area { background: #fef3f6; } .top-team-img-section { margin-left: 50px; position: relative; } .team-img { height: 375px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #ddd; position: relative; z-index: 1; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .team-img-section:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #F99219; opacity: .9; z-index: -1; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .left-designation-text { font-size: 50px; font-weight: 900; text-transform: uppercase; color: #e0d6d9; letter-spacing: 1px; text-align: center; line-height: 1; writing-mode: vertical-lr; position: absolute; height: 100%; left: -19%; bottom: 0; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } .team-info { padding-left: 50px; margin-top: 25px; } .team-info p { color: #333333; font-size: 16px; font-weight: 500; margin-bottom: 0; } .team-info h3 { font-size: 26px; font-weight: 800; margin-bottom: 5px; line-height: 26px; } .team-img:after { position: absolute; left: 0; top: 0; width: 0; height: 100%; content: ""; background: #e63b60; opacity: 0; visibility: hidden; z-index: -1; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .team-img:hover:after { opacity: .8; width: 100%; visibility: visible; } .social-icon { width: 100%; height: 100%; } .social-icon-inner { vertical-align: middle; text-align: center; } .social-icon-inner a { display: inline-block; color: #fff; padding: 0 5px; opacity: 0; visibility: hidden; transition-delay: .3s; } .team-img:hover .social-icon-inner a { opacity: 1; visibility: visible; } /* --------------------- TEAM PAGE CSS START --------------------- */ .unique-team-section .team-img:after { display: none; } .unique-team-section .top-team-img-section { padding: 30px 30px 0px 30px; margin: 0; } .single-team-members.unique-team-section { box-shadow: 0 5px 16px 0 rgba(217, 217, 217, 0.4); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .unique-team-section .team-info { padding: 0px 30px 30px 30px; text-align: center; } .unique-team-section .team-info p { text-transform: uppercase; letter-spacing: 1.5px; line-height: 1; color: #F99219; font-weight: 600; margin-top: 20px; font-size: 15px; } .unique-team-section .social-icon-inner a { color: #555555; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .unique-team-section .social-icon-inner a:hover { color: #F99219; } .unique-team-section .social-icon-inner { margin-top: 20px; } .unique-team-section .team-info h3 { margin: 0; } /* --------------------- PRICING SECTION CSS START --------------------- */ .pricing-area { background-size: contain; background-repeat: no-repeat; } .single-pricing-box { background-size: 100%; background-position: top right; background-color: #fff; position: relative; z-index: 1; padding: 35px 30px; background-repeat: no-repeat; box-shadow: 0px 5px 16px 0px rgba(217, 217, 217, .5); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; } .single-pricing-box:hover, .single-pricing-box.active { background-color: #e63b60; background-image: url(assets/img/pricing-hover-bg.png) !important; color: #fff; } .single-pricing-box.active .pricing-info .pricing-title { color: #fff; } .single-pricing-box.active .pricing-icon i:before { color: #fff; } .single-pricing-box.active .pricing-info .price { color: #fff; font-size: 40px; } .single-pricing-box.active .common-btn { background: #fff; color: #F99219; border-color: #fff; font-weight: 800; } .single-pricing-box .common-btn { font-weight: 800; } .pricing-info .pricing-title { font-weight: 900; margin-bottom: 35px; line-height: 28px; transition: all 0.3s ease 0; -webkit-transition: all 0.3s ease 0; -moz-transition: all 0.3s ease 0; -ms-transition: all 0.3s ease 0; -o-transition: all 0.3s ease 0; } .single-pricing-box:hover>.pricing-info .pricing-title { color: #fff; } .pricing-icon i:before { font-size: 80px; color: #333333; margin-left: 0; transition: all 0.3s ease 0; -webkit-transition: all 0.3s ease 0; -moz-transition: all 0.3s ease 0; -ms-transition: all 0.3s ease 0; -o-transition: all 0.3s ease 0; } .single-pricing-box:hover .pricing-icon i:before { color: #fff; } .pricing-icon i { display: inline-block; height: 80px; width: 80px; line-height: 80px; text-align: center; } .pricing-icon { margin-bottom: 30px; } .pricing-info .price { font-weight: 900; line-height: 40px; margin-bottom: 35px; transition: all 0.3s ease 0; -webkit-transition: all 0.3s ease 0; -moz-transition: all 0.3s ease 0; -ms-transition: all 0.3s ease 0; -o-transition: all 0.3s ease 0; } .single-pricing-box:hover>.pricing-info .price { color: #fff; } .all-service-info li { display: inline-block; margin: 0 0 5px; font-weight: 700; transition: all 0.3s ease 0; -webkit-transition: all 0.3s ease 0; -moz-transition: all 0.3s ease 0; -ms-transition: all 0.3s ease 0; -o-transition: all 0.3s ease 0; } .single-pricing-box:hover .all-service-info li { color: #fff; } .all-service-info { margin-bottom: 30px; } .all-service-info li:last-child { margin-bottom: 0; } .single-pricing-box:hover .common-btn { background: #fff; color: #F99219; border-color: #fff; font-weight: 800; } /* --------------------- BLOG SECTION CSS START --------------------- */ .blog-full-bg { height: 400px; background-size: cover; background-position: center; background-color: #ddd; position: relative; z-index: 1; overflow: hidden; border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px; -ms-border-radius: 8px 8px 0px 0px; -o-border-radius: 8px 8px 0px 0px; } .blog-date span { display: block; text-align: center; font-size: 18px; color: #fff; line-height: 1; } .blog-date span.date-number { font-size: 25px; font-weight: 900; line-height: 1; margin-bottom: 5px; letter-spacing: 2px; } .blog-date { background: #333333; max-width: 75px; padding: 15px; position: absolute; width: 100%; left: 20px; top: 20px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .single-blog-post { background: #fff; border-radius: 0px 0px 8px 8px; -webkit-border-radius: 0px 0px 8px 8px; -moz-border-radius: 0px 0px 8px 8px; -ms-border-radius: 0px 0px 8px 8px; -o-border-radius: 0px 0px 8px 8px; } .blog-content { padding: 30px 35px; } .bottom-info { margin-top: 20px; } .blog-content a { display: inline-block; } .blog-content a h2 { font-size: 32px; font-weight: 900; margin-bottom: 20px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .blog-content a h4 { font-weight: 700; margin-bottom: 10px; line-height: 30px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .blog-content a h2:hover { color: #F99219; } .blog-content a h4:hover { color: #F99219; } .blog-content p { font-weight: 600; font-size: 16px; line-height: 1.8; margin: 0; } .author-info img { width: 40px; height: 40px; float: left; margin-right: 10px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .blog-btn { display: inline-block; } .author-info h6 { font-weight: 600; } .author-info h6 span { margin-right: 5px; color: #999; } .author-info { display: inline-block; width: 50%; } .blog-btn { display: inline-block; width: 49%; text-align: right; } .author-info h6 { font-weight: 600; margin: 11px; } .read-more i:before { margin-left: 0; font-size: 14px; } .read-more { color: #555555; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .read-more:hover { color: #F99219; } .single-blog-post.mini-blog .blog-full-bg { height: 200px; } .single-blog-post.mini-blog.horizontal-blog { margin-bottom: 30px; } .single-blog-post.mini-blog .blog-content a h2 { font-size: 24px; } /* --------------------- HOMEPAGE TWO BLOG SECTION CSS START --------------------- */ .home-two-blog .blog-date span { color: #333333; } .home-two-blog .blog-date span.date-number { font-size: 26px; line-height: 1; font-weight: 700; line-height: 1; } .home-two-blog .blog-date { padding: 8px 5px; max-width: 60px; left: auto; right: 20px; background: #fff; } .home-two-blog .blog-content a h2 { font-size: 20px; } .home-two-blog .blog-content a h2, .home-two-blog .blog-content a h4, .home-two-blog .blog-content p { color: #fff; } .home-two-blog .blog-content a h4{ font-size: 22px; } .home-two-blog .blog-content a h4:hover { color: #F99219; } .home-two-blog .blog-content p { margin-bottom: 40px; font-weight: 400; } .home-two-blog .author-info img { width: 40px; height: 40px; margin-right: 8px; } .home-two-blog .author-info h6, .home-two-blog .author-info h6 span { font-size: 15px; color: #fff; font-weight: 400; } .home-two-blog .read-more { color: #fff; font-size: 15px; font-weight: 400; } .home-two-blog .author-info { width: 60%; } .home-two-blog .blog-btn { width: 40%; } .home-two-blog .blog-content { position: absolute; bottom: 10px; padding-top: 0; } .home-two-blog .blog-full-bg { height: 500px; position: relative; z-index: 1; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .home-two-blog .blog-full-bg:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #333; opacity: .7; z-index: -1; } .home-two-blog.single-blog-post:hover .read-more { color: #e63b60; } .home-two-blog .blog-content a h2:hover { color: #e63b60; } .home-two-blog.single-blog-post:hover .blog-date { background: #e63b60; } .home-two-blog.single-blog-post:hover .blog-date { transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .home-two-blog.single-blog-post:hover .blog-date span { transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .home-two-blog.single-blog-post:hover .blog-date span { color: #fff; } .home-two-blog.single-blog-post { position: relative; z-index: 1; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .home-two-blog.single-blog-post:after { position: absolute; bottom: -2px; width: 150px; height: 2px; content: ""; background: #F99219; z-index: 2; left: 50%; transform: translate(-50%); transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; opacity: 0; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .home-two-blog.single-blog-post:hover.home-two-blog.single-blog-post:after { opacity: 1; } /* --------------------- HOMEPAGE THREE BLOG SECTION CSS START --------------------- */ .home-three-blog .blog-full-bg { width: 270px; height: 320px; border-radius: 8px 0px 0px 8px; -webkit-border-radius: 8px 0px 0px 8px; -moz-border-radius: 8px 0px 0px 8px; -ms-border-radius: 8px 0px 0px 8px; -o-border-radius: 8px 0px 0px 8px; } .home-three-blog .blog-full-bg:after { border-radius: 8px 0px 0px 8px; -webkit-border-radius: 8px 0px 0px 8px; -moz-border-radius: 8px 0px 0px 8px; -ms-border-radius: 8px 0px 0px 8px; -o-border-radius: 8px 0px 0px 8px; } .home-three-blog .blog-content { display: inline-block; padding: 10px 30px 10px 300px; } .home-three-blog .blog-content p, .home-three-blog .blog-content a { color: #333333; } .home-three-blog .blog-content a h4 { color: #F99219; line-height: 26px; font-size: 22px; } .home-two-blog .blog-content a h2 { font-weight: 600; } .home-three-blog.home-two-blog.single-blog-post:after { display: none; } .single-blog-post.home-three-blog { box-shadow: 0px 5px 16px 0px rgba(217, 217, 217, 0.4); border-radius: 0px 8px 8px 8px; -webkit-border-radius: 0px 8px 8px 8px; -moz-border-radius: 0px 8px 8px 8px; -ms-border-radius: 0px 8px 8px 8px; -o-border-radius: 0px 8px 8px 8px; } .home-three-blog .author-info h6, .home-three-blog .author-info h6 span { color: #333333; display: inline-block; margin: 3px; } .home-three-blog .author-info { width: 100%; display: block; } .home-three-blog .blog-btn { width: 100%; display: block; } /* --------------------- HOMEPAGE FOUR BLOG SECTION CSS START --------------------- */ .home-four-blog .blog-btn { width: 36%; } .home-four-blog .author-info { width: 66%; } .home-four-blog .blog-full-bg { height: 210px; } /* --------------------- ALL BLOG PAGE CSS START --------------------- */ .blog-section-bg { height: 430px; background-size: cover; background-position: center; background-color: #ddd; position: relative; border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px; -ms-border-radius: 8px 8px 0px 0px; -o-border-radius: 8px 8px 0px 0px; } .blog-section-bg { height: 430px; background-size: cover; background-position: center; background-color: #ddd; position: relative; border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px; -ms-border-radius: 8px 8px 0px 0px; -o-border-radius: 8px 8px 0px 0px; } .blog-sample-meta ul li { display: inline-block; margin-right: 15px; letter-spacing: 1px; } .blog-sample-meta ul li a { color: #223645; text-transform: uppercase; font-size: 13px; font-weight: 700; display: block; } .blog-sample-meta ul li a i { color: #F99219; margin-right: 7px; } .blog-sample-meta { padding: 45px 50px 50px 50px; background-color: #FAF9FF; } .blog-sample-meta ul { margin-bottom: 15px; } .single-blog-page-item { margin-bottom: 40px; } .single-blog-page-item:last-child { margin-bottom: 0px; } .blog-sample-bottom-content .btn.common-btn { box-shadow: none; margin-top: 20px; } .blog-sample-bottom-content h3 { font-size: 30px; margin-bottom: 15px; } .single-blog-audio-wrap { line-height: 1; } .single-blog-audio-wrap iframe { display: block; width: 100%; height: 400px; border-width: 0px; margin-bottom: -2px; border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px; -ms-border-radius: 8px 8px 0px 0px; -o-border-radius: 8px 8px 0px 0px; } .single-right-small-blog.blog-search-wrap button[type='submit'] { position: absolute; right: 0; background-color: #F99219; color: #fff; width: 20%; line-height: 1; height: 100%; border: 2px solid #F99219; font-size: 23px; border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -ms-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px; } .blog-short-search-wrap { position: relative; } .single-right-small-blog.blog-search-wrap input[type='search'] { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .single-right-small-blog { margin-bottom: 40px; padding: 30px 30px 35px 30px; box-shadow: 0px 5px 16px 0px rgba(200, 183, 255, 0.3); } .single-right-small-blog:last-child { margin: 0; } .single-right-small-blog h4 { position: relative; padding-bottom: 15px; margin-bottom: 25px; line-height: 30px; font-size: 22px; font-weight: 900; color: #223645; } .single-right-small-blog h4:before { position: absolute; left: 0; bottom: 0; width: 60px; content: ""; background: #F99219; height: 2px; } .blog-categories ul li { border-top: 1px solid; position: relative; padding: 15px 0; border-color: #eaedff; color: #223645; font-weight: 700; padding-left: 25px; } .blog-categories ul li:first-child { padding-top: 0; border-color: transparent; } .blog-categories ul li:last-child { padding-bottom: 0; } .blog-categories ul li a:before { position: absolute; left: 0; font-size: 18px; content: "\f101"; font-family: "Font Awesome 5 Free"; top: 13px; } .blog-categories ul li:first-child a:before { top: -2px; } .blog-categories ul li span.categories-serial-number { position: absolute; right: 0; } .single-right-small-blog.blog-recent-post .single-footer-blog a { padding-left: 105px; border-bottom: 1px solid; border-color: #eaedff; padding-bottom: 25px; } .single-right-small-blog.blog-recent-post .single-footer-blog:last-child a { border-color: transparent; padding-bottom: 5px; } .single-right-small-blog.blog-recent-post .single-footer-blog a h5 { color: #223645; } .single-right-small-blog.blog-image .footer-bottom-comtent a img { width: 94px; height: 94px; } .single-right-small-blog.blog-little-contact .single-service-details-contact { padding: 0px; } .single-right-small-blog.blog-little-contact .single-service-details-info-wrap { padding: 0px; } .single-right-small-blog.blog-contact-us .submission-form-inner { padding: 0; } .blog-post-tags ul li { display: inline-block; } .blog-post-tags ul li a { border: 1px solid #555555; font-size: 16px; display: inline-block; margin-right: 5px; padding: 5px 10px; margin-bottom: 10px; font-weight: 700; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; } .blog-post-tags ul li a:hover { border: 1px solid #F99219; } .blog-pagination ul li span, .blog-pagination ul li a, .blog-pagination .page-item:first-child .page-link, .blog-pagination .page-item:last-child .page-link { width: 55px; line-height: 40px; font-size: 18px; text-align: center; font-weight: 600; height: 55px; border: 2px solid; border-color: #eaebec; margin: 0 3px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .blog-pagination ul li a { color: #555555; } .blog-pagination ul li span.current, .blog-pagination ul li a:hover, .blog-pagination .page-link.current { background: #F99219; border-color: #F99219; color: #fff; } .blog-pagination { margin-top: 50px; display: flex; justify-content: center; } /* STANDDARD POST */ .single-service-alert-box span { display: inline-block; margin-top: 15px; color: #6c7781; text-transform: uppercase; font-weight: 700; } .blog-sample-meta.standard-blog { padding: 45px 0 0px 0px; background: transparent; } .standard-short-content h3 { margin: 30px 0px 10px 0px; } .blog-get-on-link ul li { display: inline-block; } .blog-get-on-link ul li a { border: 2px solid; padding: 10px 15px 8px 15px; margin-right: 10px; display: inline-block; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 2px; border-color: #555555; color: #333333; margin-bottom: 5px; } .blog-get-on-link { padding-top: 25px; border-top: 2px solid; padding-bottom: 20px; border-bottom: 2px solid; border-color: #eaedff; margin: 50px 0px 0px 0px; } .blog-share-social-link { padding: 30px; background: #faf9ff; } .blog-sharelink-inner-wrap ul li { display: inline-block; } .blog-share-social-link h6 { font-size: 18px; margin-bottom: 20px; } .blog-sharelink-inner-wrap ul li a { display: block; background: #647589; color: #fff; padding: 8px 14px; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; } .blog-sharelink-inner-wrap ul li a.fb-share { background: #3b5999; } .blog-sharelink-inner-wrap ul li a.linkedin-share { background: #0073b0; } .blog-sharelink-inner-wrap ul li a.twitter-share { background: #3fbff5; } .blog-sharelink-inner-wrap ul li a.pinterest-share { background: #e60122; } .blog-sharelink-inner-wrap ul li a.envelope-share { background: #d54b3d; } .blog-sharelink-inner-wrap ul li a span { position: relative; z-index: 1; padding-left: 10px; margin-left: 10px; } .blog-sharelink-inner-wrap ul li a span:before { position: absolute; left: 0; top: 50%; width: 1px; height: 15px; content: ""; background: #fff; transform: translateY(-50%); } .blog-previous-next-post { background: #faf9ff; margin-right: 0; margin-left: 0; margin-top: 40px; padding: 50px 15px; border-top: 2px solid #eaedff; } .single-previous-next-post a { font-weight: 700; color: #647589; margin-bottom: 5px; display: block; text-transform: uppercase; } .single-previous-next-post h5 { color: #223645; } .blog-previous-next-post { background: #faf9ff; margin-right: 0; margin-left: 0; margin-top: 40px; padding: 50px 15px; border-top: 2px solid #eaedff; } .single-previous-next-post a { font-weight: 700; color: #647589; margin-bottom: 5px; display: block; text-transform: uppercase; } .single-previous-next-post h5 a { color: #223645; text-transform: lowercase; } .blog-comments-section { margin-top: 50px; } .blog-comments-section h4 { font-size: 25px; border-bottom: 2px solid #eaedff; padding-bottom: 15px; margin-bottom: 30px; line-height: 2; } .single-comment-wrap img { width: 90px; height: 90px; float: left; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .comments-content { padding-left: 110px; position: relative; margin-top: 10px; } .single-comment-wrap { border-bottom: 1px solid #eaedff; padding: 15px 15px 15px 0px; } .comments-content h6 { font-size: 18px; margin-bottom: 5px; } .comments-content .author-contact { position: relative; z-index: 1; } .comments-content .author-contact:after { content: "\f02e"; font-family: "Font Awesome 5 Free"; font-size: 13px; top: 0; margin-left: 10px; position: relative; line-height: 1; color: #cacfef; font-weight: 900; } .comments-content span.comment-date { text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 14px; color: #F99219; display: inline-block; margin-bottom: 5px; } .comments-content p { font-weight: 600; line-height: 28px; } .comments-content .reply { position: absolute; right: 0; top: 0; } .comments-content .reply a { font-weight: 700; } .comments-content .reply a i { padding-right: 10px; } .blog-contact-us-wrap { margin-top: 30px; padding: 35px 30px 30px; background-color: #faf9ff; } .blog-contact-us-wrap .submission-form-inner { padding: 40px 0px; padding-bottom: 0; } .blog-contact-us-wrap .single-service-submisstion-form .submission-form-inner input[type=button] { padding: 18px 40px; cursor: pointer; border: 2px solid; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .blog-contact-us-wrap .single-service-submisstion-form .submission-form-inner input[type=button]:hover { background: #fff; color: #F99219; } .single-comment-wrap.second-comment { margin-left: 50px; } /* --------------------- FOOTER SECTION CSS START --------------------- */ .footer-bg { background-color: #1a1a1a; } .black-bg { background-color: #111111; } .single-footer-blog img { width: 90px; height: 90px; position: absolute; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .single-footer-blog a { display: inline-block; padding-left: 110px; min-height: 80px; margin-top: 5px; } .single-footer-blog { margin-bottom: 20px; } .single-footer-blog:last-child { margin-bottom: 0px; } .footer-bottom-comtent a { display: inline-block; } .footer-bottom-comtent a img { width: 110px; height: 95px; margin-bottom: 15px; } .template-footer .section-title .section-large-title { color: #fff; } .template-footer .section-title { margin-bottom: 40px; } .subscribe-area form { position: relative; z-index: 1; } .subscribe-area input[type=email] { background-color: #2e2e2e; border-color: #2e2e2e; color: #d4d4d4; padding: 16px 16px 16px 30px; border: none; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .subscribe-area input[type=email]::placeholder { color: #fff; opacity: .3; } .subscribe-area input[type=submit] { background: #F99219; border: none; color: #fff; text-transform: uppercase; padding: 23px; position: absolute; right: 0; cursor: pointer; font-weight: 700; line-height: 1; border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; -ms-border-radius: 0 10px 10px 0; -o-border-radius: 0 10px 10px 0; } .subscribe-area { margin-bottom: 90px; } .main-footer-wrap h4, h5 { color: #d4d4d4; } .footer-title { font-size: 30px; font-weight: 900; margin-bottom: 25px; color: #fff; } .blog-info h5 { font-weight: 700; font-size: 18px; margin-bottom: 5px; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .blog-info h5:hover { color: #F99219; } .date-footer { color: #F99219; } .footer-bottom-comtent p { font-size: 16px; color: #d4d4d4; } .footer-bottom-comtent a img { width: 110px; height: 95px; margin-bottom: 7px; margin-left: 3px; } .square-social-link a { border: 1px solid #F99219; font-size: 17px; color: #d23356; margin-right: 8px; height: 40px; width: 40px; display: inline-block; line-height: 40px; text-align: center; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .square-social-link a:first-child { margin-left: 0px; } .square-social-link a:hover { background: #F99219; color: #fff; } .square-social-link { margin-top: 40px; } .footer-bottom p, .footer-bottom p a { margin: 0; color: #fff; font-size: 16px; font-weight: 600; } .footer-bottom { padding: 20px 0; } /* --------------------- WORKING SECTION CSS START --------------------- */ .single-working-process { box-shadow: 0px 5px 16px 0px rgba(217, 217, 217, 0.4); padding: 50px 30px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; text-align: center; position: relative; z-index: 1; } .single-working-process:after { position: absolute; left: 50%; bottom: -5px; width: 100px; height: 10px; content: ""; background: #F99219; transform: translateX(-50%); opacity: 0; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .single-working-process:hover.single-working-process:after { opacity: 1; } .single-working-process h4 { font-size: 20px; font-weight: 900; text-transform: uppercase; line-height: 20px; margin: 30px 0px 20px 0px; } .single-working-process p { color: #555555; font-weight: 500; font-size: 16px; } .working-process-wrap .working-process-number { background-image: url(assets/img/number-box-bg.png); height: 170px; width: 180px; background-size: 100% 100%; background-position: center; text-align: center; line-height: 170px; display: inline-block; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .single-working-process:hover .working-process-number { background-image: url(assets/img/number-box-hover-bg.png); } .working-process-number span { height: 150px; width: 150px; color: #d0d0d0; background: #f6f6f6; line-height: 150px; text-align: center; display: inline-block; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; font-size: 100px; font-weight: 900; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .working-process-wrap { text-align: center; } .single-working-process:hover .working-process-number span { background: #fdebef; color: #F99219; } /* --------------------- HOMEPAGE TWO TESTIMONIAL SECTION CSS START --------------------- */ .single-home-two-testimonial .client-avatar img { width: 90px; height: 90px; display: inline-block; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .single-home-two-testimonial .client-information h4.client-name { font-weight: 900; font-size: 24px; margin: 15px 0px 0px; } .single-home-two-testimonial .client-information span.client-desg { margin: 5px 0px 0px; display: inline-block; } .single-home-two-testimonial .client-message p { font-size: 18px; font-weight: 600; margin: 0; } .single-home-two-testimonial .client-message { margin-top: 20px; } .homw-two-testimonial { box-shadow: 0px 5px 16px 0px rgba(217, 217, 217, 0.9); padding: 100px 45px 92px 45px; position: relative; margin-left: -90px; min-height: 495px; } .homw-two-testimonial .testimonial-quote-right i:before { margin: 0; font-size: 60px; } .homw-two-testimonial .testimonial-quote-right { height: 120px; width: 120px; text-align: center; line-height: 120px; background: #F99219; color: #fff; position: absolute; left: -60px; top: 60px; z-index: 1; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .home-two.testimonial-area { background-size: 100%; background-position: center center; background-repeat: no-repeat; } .full-testimonial-wrap .owl-dots img { height: 80px; width: 80px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .full-testimonial-wrap .owl-dots { position: absolute; right: -190px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .full-testimonial-wrap .owl-dots div { margin-bottom: 15px; border: 3px dashed transparent; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .full-testimonial-wrap .owl-dot.active { border: 3px dashed #F99219; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } /* --------------------- HOMEPAGE THREE TESTIMONIAL SECTION CSS START --------------------- */ .section-title.home-three-section-title { margin-bottom: 80px; } .home-two-service.section-padding.home-three-service { padding: 120px 0px 70px 0px; } .home-three-service .single-service-item { background: #fff; } .single-service-item.home-three-testimonial img { width: 80px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .home-three-testimonial .service-little-round { width: 80px; height: 80px; line-height: 78px; } .home-three-testimonial .single-service-icon { width: 95px; height: 95px; line-height: 100px; } .home-two-service .home-three-testimonial.single-service-item h4 { padding: 0; margin-bottom: 5px; } .testimonial-content h4 { text-transform: capitalize; color: #333333; font-size: 22px; } .testimonial-content .review-star i { color: #f2c617; margin: 2px; } .testimonial-content .review-star i:first-child { margin-left: 0; } .testimonial-content span.designation { margin-bottom: 5px; display: inline-block; } .testimonial-content .quote-icon i:before { font-size: 70px; line-height: 1; color: #F99219; opacity: .08; } .testimonial-content .quote-icon { position: absolute; top: -25px; right: 37px; } .testimonial-content { position: relative; padding: 0px 30px 5px 60px; margin-top: -25px; } .single-service-item.home-three-testimonial { margin-top: 60px; margin-bottom: 15px; } .home-two-service .home-three-testimonial.single-service-item p { padding: 0px 30px 30px 30px; } .testimonial-two-carousel .owl-dots { text-align: center; margin-top: 50px; line-height: 1; } .testimonial-two-carousel .owl-dots div { height: 6px; width: 20px; background: #d5e0ff; display: inline-block; margin: 0 5px; transition: all .6s ease 0s; -webkit-transition: all .6s ease 0s; -moz-transition: all .6s ease 0s; -ms-transition: all .6s ease 0s; -o-transition: all .6s ease 0s; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .testimonial-two-carousel .owl-dots div.active { width: 40px; background: #F99219; } /* --------------------- NEWSLETTER SECTION CSS START --------------------- */ .home-four-newsletter .section-title.home-three-section-title { margin-bottom: 35px; } .home-four-newsletter { background: #e53a60; background-position: center center; background-repeat: no-repeat; background-size: cover; } .home-four-newsletter .section-title span, .home-four-newsletter .section-title h2, .home-four-newsletter .section-title p { color: #fff; } .home-four-newsletter .section-title h2 { margin-bottom: 15px; } .home-four-newsletter-wrap { text-align: center; line-height: 1; position: relative; z-index: 2; } .home-four-newsletter-form.subscribe-area { width: 55%; margin: 0 auto 0; background: #fff; padding: 15px; position: relative; display: inline-block; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .home-four-newsletter-form.subscribe-area input[type=email] { background: #fff; border: 1px solid #dfdfdf; font-weight: 700; width: 62%; float: left; padding: 20px 20px 20px 30px; } .home-four-newsletter-form.subscribe-area input[type=submit] { padding: 24px 40px 22px 40px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .home-four-newsletter-form.subscribe-area input[type=email]::placeholder { color: #555555; opacity: .8; } .home-four-email-shape { height: 51px; position: absolute; left: -18px; bottom: -18px; width: 250px; z-index: -1; } .home-four-newsletter .section-title p { margin: 0; } /* --------------------- FAQ SECTION CSS START --------------------- */ .video-inner-bg.home-four-video-wrap { height: 460px; } .homepage-four-faq #accordionExample .card:last-child { margin-bottom: 0px; } .homepage-four-faq #accordionExample .card { margin-bottom: 30px; border-color: transparent; box-shadow: 0px 5px 16px 0px rgba(221, 221, 221, 0.7); border: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .homepage-four-faq .card .card-header { padding: 7px 15px 7px 5px; background-color: transparent; border: none; } .card-title { margin: 0; } .homepage-four-faq .card-body { padding: 16px 20px; border-top: 1px solid #e2e2e2; } .homepage-four-faq .card-header .card-title button.btn-link { display: block; padding: 9px 15px; background: transparent; width: 100%; font-weight: 700; font-size: 18px; text-align: left; text-decoration: none; color: #333333; position: relative; letter-spacing: inherit; text-transform: inherit; } .homepage-four-faq #accordionExample .card .card-header.active { background: transparent; border-color: #e2e2e2; } .homepage-four-faq .card-title button.btn-link:hover, .homepage-four-faq .card-title button.btn-link:focus { color: #e53a60; } .homepage-four-faq .card-header .card-title button.btn-link i.fa { float: right; font-size: 125%; line-height: 22px; display: none; font-weight: 600; } .homepage-four-faq .card-header .card-title button.btn-link[aria-expanded=true] i.fa.fa-angle-up { display: block; } .homepage-four-faq .card-header .card-title button.btn-link[aria-expanded=false] i.fa.fa-angle-down { display: block; } /* --------------------- BRAND SECTION CSS START --------------------- */ .full-brand-area.owl-carousel .owl-item img { width: auto; } .single-brand-item a { display: inline-block; } .single-brand-item { text-align: center; line-height: 1; } .single-brand-item a img { filter: grayscale(1); -webkit-filter: grayscale(1); } .single-brand-item a img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); } /* --------------------- ABOUT US PAGE CSS START --------------------- */ .square-social-link h2 { font-family: "Roboto", Sans-serif; font-weight: 600; font-size: 32px; margin-bottom: 20px; } .about-us-page .square-social-link { margin-top: 30px; } .about-us-page .square-social-link a { height: 50px; width: 50px; line-height: 50px; color: #fff; border: none; font-size: 25px; } .about-us-page .square-social-link a:hover { opacity: .9; color: #fff; } .about-us-page .square-social-link a.fb-share { background: #3b5999; } .about-us-page .square-social-link a.twitter-share { background: #3fbff5; } .about-us-page .square-social-link a.dribble-share { background: #ea4c89; } .about-us-page .square-social-link a.instagram-share { background: #cc2799; } .about-us-page .square-social-link a.youtube-share { background: #cd201f; } /* --------------------- MEMBER DETAILS CSS START --------------------- */ .member-full-bg .home-two-experience-shape { z-index: -1; height: auto; left: -25px; top: -40px; } .member-full-bg .single-man-img { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } /* --------------------- SHOP PAGE CSS START --------------------- */ .shop-wrap .single-right-small-blog h4 { font-size: 21px; } .top-shop-bar { border: 1px solid #dddddd; padding: 25px 30px; margin-bottom: 30px; } .product-view-mode ul li { display: inline-block; } .product-view-mode ul li a { margin-right: 10px; } .selct-products select { height: 40px; font-weight: 600; } .product-showing-results p { margin: 0; } .product-bg-wrap { height: 260px; background-size: cover; background-position: center; background-color: #ddd; position: relative; z-index: 1; } .product-bg-wrap:after { position: absolute; left: 0; top: 0; width: 0; height: 100%; content: ""; background: #F99219; opacity: 0; visibility: hidden; z-index: -1; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .single-products-item:hover .product-bg-wrap::after { opacity: .8; width: 100%; visibility: visible; } .product-bg-hover { position: absolute; width: 100%; height: 100%; } .product-bg-hover ul { display: flex; align-items: center; justify-content: center; height: 100%; } .product-bg-hover ul li { display: inline-block; visibility: hidden; opacity: 0; transform: translateX(-50px); -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); } .single-products-item:hover .product-bg-hover ul li { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } .single-products-item:hover .product-bg-hover ul li:nth-child(1) { transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; } .single-products-item:hover .product-bg-hover ul li:nth-child(2) { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; } .single-products-item:hover .product-bg-hover ul li:nth-child(3) { transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; } .product-bg-hover ul li:nth-child(3) { transition: all .8s ease-in-out; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -ms-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; } .product-bg-hover ul li:nth-child(2) { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; } .product-bg-hover ul li:nth-child(1) { transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; } .single-products-item:hover .product-bg-hover ul li { visibility: visible; opacity: 1; } .product-bg-hover ul li { display: inline-block; } .product-bg-hover ul li a { display: block; margin: 0px 3px; height: 45px; width: 45px; text-align: center; background-color: #fff; line-height: 45px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .product-bg-hover span { position: absolute; right: 0; height: 45px; width: 45px; background: #F99219; color: #fff; text-align: center; line-height: 45px; font-weight: 700; font-size: 13px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .product-info-wrap { text-align: center; padding: 20px; } .product-info-wrap h4 { font-size: 22px; line-height: 1.3; text-transform: capitalize; font-weight: 800; } .product-price-text span { color: #F99219; font-weight: 700; font-size: 18px; } .single-products-item { border: 0px solid #fafafa; box-shadow: 0 5px 16px 0 rgba(217, 217, 217, 0.4); position: relative; z-index: 2; } .product-price-text .prev-price { opacity: .6; text-decoration: line-through; margin-right: 5px; } .single-product-recent .product-image img { width: 60px; margin-top: 18px; } .product-content-wrap a { color: #223645; display: inline-block; font-weight: 700; line-height: 25px; } .product-content-wrap a:hover { color: #F99219; } .product-content-wrap .product-review span i { color: #F99219; font-size: 14px; } .product-review { line-height: 1; margin: 5px 0px 10px 0px; } .product-content-wrap .product-price h5 { color: #555555; font-size: 16px; font-weight: 500; } .product-content-wrap { position: relative; padding-right: 65px; } .product-image { position: absolute; top: 0; right: 0; } .single-product-recent { position: relative; border-top: 1px solid; border-color: #eaedff; padding: 15px 0; } .single-product-recent:first-child { padding-top: 0; border-color: transparent; } .single-product-recent:last-child { padding-bottom: 0; } .shop-wrap .single-right-small-blog { padding: 30px 25px 35px 25px; } .product-content-wrap .product-review span { display: inline-block; } .shop-wrap .blog-categories ul li { font-size: 15px; } .shop-wrap .blog-categories ul li a:before { font-size: 17px; } .shop-pagination { margin-top: 80px; } /* --------------------- CONTACT US PAGE CSS START --------------------- */ .contact-us { position: relative; } .contact-us-left .left-full-img img { position: absolute; bottom: 0; right: 75px; width: 69%; } .contact-us.section-padding { padding: 120px 0px 0px 0px; } .contact-us-right .submission-form-inner { padding: 0px 0px 105px 0px; } .contact-us-right .single-service-submisstion-form .submission-form-inner input[type=text], .contact-us-right .single-service-submisstion-form .submission-form-inner input[type=email], .contact-us-right .single-service-submisstion-form .submission-form-inner textarea { border-color: #555555; background: transparent; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } .contact-us-right .single-service-submisstion-form .submission-form-inner input[type=text]:focus, .contact-us-right .single-service-submisstion-form .submission-form-inner input[type=email]:focus, .contact-us-right .single-service-submisstion-form .submission-form-inner textarea:focus { border-color: #F99219; } .contact-us-right .single-service-submisstion-form .submission-form-inner input[type=button] { padding: 18px 40px; cursor: pointer; border: 2px solid; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .contact-us-right .single-service-submisstion-form .submission-form-inner input[type=button]:hover { background: #fff; color: #F99219; } .google-map-wrap iframe { display: block; width: 100%; border: 0; }