/*------------------------------------------------------------------ [Master Stylesheet] Theme Name: Logistika - Transportation & Logistics HTML Template Version: 1.0.0 -------------------------------------------------------------------*/ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1. General 1.1 Theme Reset Style 1.2 Global Elements 2. header 2.1 topbar 2.2 navigation 3. content 3.1 hero-slider 3.2 wpo-about-section 3.3 wpo-service-section 3.4 wpo-funfact-section 3.5 wpo-get-quate-section 3.6 wpo-features-section 3.7 wpo-process-section 3.9 wpo-testimonial-section 3.10 wpo-partner-section 3.11 wpo-cta-section 3.12 wpo-team-section 3.13 wpo-blog-section 3.14 wpo-map-section 4. wpo-footer 5. Home-style-2 5.1 wpo-cta-section 5.2 wpo-service-section-s2 5.3 wpo-funfact-section-s2 5.4 wpo-about-section-s2 5.5 wpo-request-quate-section 5.6 wpo-process-section-s2 5.7 wpo-features-section-s2 5.8 wpo-pricing-section 5.9 wpo-portfolio-testimonial-section 5.10 wpo-project-section-s2 5.11 wpo-testimonial-section-s2 5.12 wpo-partner-section-s2 5.13 wpo-faq-section 5.14 wpo-blog-section-s2 5.15 wpo-get-touch-section 5.16 wpo-cta-section-s2 6. Home-style-3 6.1 wpo-get-quate-section-s2 6.2 wpo-partner-section-s3 6.3 wpo-introCounter-section 6.4 wpo-features-section-s3 6.5 wpo-funfact-section-s3 6.6 wpo-service-section-s3 6.7 wpo-get-quate-section-s3 6.8 wpo-pricing-section-s2 6.9 wpo-project-section-s3 6.10 wpo-process-section-s3 6.11 wpo-testimonial-section-s3 6.12 wpo-faq-section-s2 6.13 wpo-cta-section-s3 6.14 wpo-blog-section-s3 7. wpo-service-single-page 8. wpo-project-single-page 9. wpo-shop-page 10. wpo-shop-single-page 11. wpo-cart-page-style 12. wpo-checkout-page-style 13. wpo-blog-pg-section 14. wpo-blog-single-section 15. wpo-contact-page 16. error-404-section 17. track-page ----------------------------------------------------------------*/ /*------------------------------------------------------------------ 1. General ----------------------------------------------------------------*/ /*--------------------------- Fonts ----------------------------*/ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"); /* 1.1 Theme Reset Style */ html { font-size: 15px; } :root { scroll-behavior: unset; } body { font-family: "DM Sans"; color: #687693; background-color: #fff; font-size: 15px; font-size: 1rem; overflow-x: hidden; } @media (max-width: 767px) { body { font-size: 14px; } } p { font-size: 16px; color: #687693; line-height: 1.8em; } h1, h2, h3, h4, h5, h6 { color: #042127; font-family: "Plus Jakarta Sans"; font-weight: 600; } ul { padding-left: 0; margin: 0; list-style: none; } a { text-decoration: none; transition: all 0.2s; } a:hover { text-decoration: none; } img { max-width: 100%; } .sr-only { display: none !important; opacity: 0; visibility: hidden; } /* 1.2 Global Elements */ .page-wrapper { position: relative; overflow: hidden; } .wow { visibility: hidden; } .fi:before { margin: 0; } .section-padding { padding: 120px 0; } @media (max-width: 991px) { .section-padding { padding: 90px 0; } } @media (max-width: 767px) { .section-padding { padding: 80px 0; } } /*** contact form error handling ***/ .contact-validation-active .error-handling-messages { width: 100% !important; margin-top: 15px !important; } .contact-validation-active label.error { color: red; font-size: 0.9333333333rem; font-weight: normal; margin: 5px 0 0 0; text-align: left; display: block; } .contact-validation-active #c-loader, .contact-validation-active #loader { display: none; margin-top: 10px; } .contact-validation-active #c-loader i, .contact-validation-active #loader i { font-size: 30px; font-size: 2rem; color: #0BA08A; display: inline-block; animation: rotating linear 2s infinite; } .contact-validation-active #success, .contact-validation-active #c-success, .contact-validation-active #c-error, .contact-validation-active #error { width: 100%; color: #fff; padding: 5px 10px; font-size: 16px; text-align: center; display: none; } @media (max-width: 767px) { .contact-validation-active #success, .contact-validation-active #c-success, .contact-validation-active #c-error, .contact-validation-active #error { font-size: 15px; } } .contact-validation-active #c-success, .contact-validation-active #success { background-color: #009a00; border-left: 5px solid green; margin-bottom: 5px; } .contact-validation-active #c-error, .contact-validation-active #error { background-color: #ff1a1a; border-left: 5px solid red; } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating { animation: rotating 5s alternate infinite; } /*** back to top **/ .back-to-top { background-color: rgba(11, 160, 138, 0.7); width: 45px; height: 45px; line-height: 45px; border: 2px solid #0BA08A; border-radius: 45px; text-align: center; display: none; position: fixed; z-index: 999; right: 15px; bottom: 15px; transition: all 0.2s; } @media (max-width: 991px) { .back-to-top { width: 35px; height: 35px; line-height: 35px; } } .back-to-top:hover { background-color: #0BA08A; } .back-to-top i { font-size: 18px; font-size: 1.2rem; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /** for popup image ***/ .mfp-wrap { background-color: rgba(0, 0, 0, 0.9); z-index: 99999; } .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } /*** for fancybox video ***/ .fancybox-overlay { background: rgba(0, 0, 0, 0.9); z-index: 9999 !important; } .fancybox-wrap { z-index: 99999 !important; } .wpo-section-title { margin-bottom: 60px; text-align: center; } @media (max-width: 767px) { .wpo-section-title { margin-bottom: 40px; } } .wpo-section-title h2 { color: #FF7236; font-family: "DM Sans"; font-size: 16px; font-weight: 700; line-height: 30px; letter-spacing: 1.76px; text-decoration-line: underline; text-transform: uppercase; position: relative; padding-left: 20px; display: inline-block; } @media (max-width: 767px) { .wpo-section-title h2 { font-size: 14px; } } .wpo-section-title h2::before { position: absolute; left: 0; top: 45%; width: 14px; height: 16px; transform: translateY(-50%); content: url(../images/title-shape.svg); } .wpo-section-title h3 { text-transform: capitalize; color: #042127; font-family: "Plus Jakarta Sans"; font-size: 48px; font-weight: 700; line-height: 55px; margin-bottom: 0; } @media (max-width: 991px) { .wpo-section-title h3 { font-size: 36px; line-height: 45px; } } @media (max-width: 767px) { .wpo-section-title h3 { font-size: 32px; line-height: 40px; } } @media (max-width: 330px) { .wpo-section-title h3 { font-size: 30px; } } .wpo-section-title p { font-size: 18px; } .theme-btn, .view-cart-btn { background: #FF7236; color: #fff; display: inline-block; padding: 21px 45px; border: 0; text-transform: capitalize; -webkit-backface-visibility: hidden; z-index: 1; position: relative; font-size: 15px; border-radius: 0px; font-family: "Plus Jakarta Sans"; font-weight: 700; letter-spacing: 0.75px; text-transform: uppercase; overflow: hidden; } @media (max-width: 991px) { .theme-btn, .view-cart-btn { font-size: 14px; padding: 18px 45px; } } .theme-btn::before, .view-cart-btn::before { position: absolute; bottom: 0; left: 0; width: 50%; height: 0; content: ""; background-color: #0BA08A; transition: all 0.4s ease-in-out; border-radius: 0; z-index: -1; } .theme-btn:after, .view-cart-btn:after { position: absolute; top: 0; right: 0; width: 51%; height: 0; content: ""; background-color: #0BA08A; transition: all 0.4s ease-in-out; border-radius: 0; z-index: -1; } .theme-btn:hover, .view-cart-btn:hover, .theme-btn:focus, .view-cart-btn:focus, .theme-btn:active, .view-cart-btn:active { color: #fff; } .theme-btn:hover::before, .view-cart-btn:hover::before { height: 100%; } .theme-btn:hover:after, .view-cart-btn:hover:after { height: 100%; } @media (max-width: 767px) { .theme-btn, .view-cart-btn { padding: 12px 18px; font-size: 14px; } } .theme-btn-s2 { background: #fff; color: #6e6e6e; display: inline-block; padding: 12px 22px; border: 1px solid #0BA08A; border-radius: 55px; text-transform: capitalize; z-index: 1; position: relative; } .theme-btn-s2:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 55px; background: linear-gradient(left, #00ded8, #00a7d5); transition: opacity 0.5s ease-out; opacity: 0; z-index: -1; } @media (max-width: 991px) { .theme-btn-s2 { font-size: 14px; font-size: 0.9333333333rem; } } .theme-btn-s2:hover, .theme-btn-s2:focus, .theme-btn-s2:active { background: #098875; color: #fff; } .theme-btn-s2:hover:after { opacity: 1; } @media (max-width: 767px) { .theme-btn-s2 { padding: 12px 18px; font-size: 13px; } } .view-cart-btn { display: block; margin-top: 15px; border-radius: 5px; padding: 10px 45px; } .view-cart-btn.s1 { background: #ddd; } .form input, .form textarea, .form select { border-color: #bfbfbf; border-radius: 0; outline: 0; box-shadow: none; color: #595959; font-style: normal; } .form input:focus, .form textarea:focus, .form select:focus { border-color: #0BA08A; -o-box-shadow: 0 0 5px 0 #0ed0b3; -ms-box-shadow: 0 0 5px 0 #0ed0b3; box-shadow: 0 0 5px 0 #0ed0b3; } .form ::-webkit-input-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form :-moz-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form ::-moz-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form :-ms-input-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form select { font-style: normal; background: url(../images/select-icon.png) no-repeat right center; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .form select::-ms-expand { /* for IE 11 */ display: none; } .form ::-moz-placeholder { font-style: normal; } .form ::placeholder { font-style: normal; } .service-sidebar { margin-right: 10px; } @media (max-width: 1199px) { .service-sidebar { margin: 0; } } @media (max-width: 991px) { .service-sidebar { margin-top: 50px; max-width: 450px; } } .service-catagory ul li { margin-bottom: 13px; } .service-catagory ul li a { background: #F8F8F8; color: #16171A; font-size: 18px; font-weight: 500; padding: 10px 20px; padding-right: 10px; display: block; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease-in-out; } .service-catagory ul li a i { width: 54px; height: 44px; line-height: 44px; text-align: center; color: #8893A8; transition: all 0.3s ease-in-out; } .service-catagory ul li a:hover, .service-catagory ul li a.active { background: #FF7236; color: #fff; } .service-catagory ul li a:hover i, .service-catagory ul li a.active i { color: #fff; background: rgba(255, 255, 255, 0.15); } .service-info { padding: 40px 20px; background: rgba(0, 0, 0, 0.92); text-align: center; width: 100%; margin-top: 40px; } .service-info .icon { width: 88px; height: 76px; line-height: 76px; border-radius: 4px; background: rgba(255, 255, 255, 0.09); color: #fff; font-size: 35px; display: inline-block; margin-bottom: 30px; } .service-info h2 { color: #FFF; font-size: 26px; font-weight: 700; line-height: 36px; max-width: 244px; margin: 0 auto; margin-bottom: 40px; } .service-info span { color: #FFF; font-family: "Plus Jakarta Sans"; font-size: 15px; font-style: normal; font-weight: 400; line-height: 32px; letter-spacing: 1.95px; text-transform: uppercase; margin-bottom: 10px; display: block; } .service-info .num span { border-radius: 24px; background: #FF7236; color: #FFF; text-align: center; font-family: "Plus Jakarta Sans"; font-size: 16px; font-weight: 700; line-height: 32px; display: block; padding: 8px 10px; } .wpo-breadcumb-area { background: url(../images/page-title.jpg) no-repeat center top/cover; min-height: 500px; position: relative; display: flex; justify-content: center; flex-direction: column; z-index: 1; } @media (max-width: 991px) { .wpo-breadcumb-area { min-height: 250px; } } .wpo-breadcumb-area:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(36deg, rgb(4, 43, 51) 0%, rgba(2, 25, 41, 0.9220063025) 37%, rgba(0, 7, 31, 0.2973564426) 59%); content: ""; z-index: -1; } .wpo-breadcumb-area .wpo-breadcumb-wrap { text-align: center; margin-top: 40px; } @media (max-width: 1199px) { .wpo-breadcumb-area .wpo-breadcumb-wrap { margin-top: 0; } } .wpo-breadcumb-area .wpo-breadcumb-wrap h2 { margin-top: -10px; margin-bottom: 20px; color: #ED6637; font-family: "DM Sans"; font-size: 20px; font-weight: 600; } @media (max-width: 991px) { .wpo-breadcumb-area .wpo-breadcumb-wrap h2 { font-size: 17px; line-height: 25px; margin-bottom: 10px; } } .wpo-breadcumb-area .wpo-breadcumb-wrap h3 { color: #FFF; font-size: 80px; font-weight: 700; line-height: 80px; text-transform: capitalize; } @media (max-width: 991px) { .wpo-breadcumb-area .wpo-breadcumb-wrap h3 { font-size: 30px; line-height: 35px; margin-bottom: 10px; } } .wpo-breadcumb-area .wpo-breadcumb-wrap ul li { display: inline-block; padding: 0px 5px; color: #fff; position: relative; font-size: 20px; } @media (max-width: 767px) { .wpo-breadcumb-area .wpo-breadcumb-wrap ul li { font-size: 18px; } } .wpo-breadcumb-area .wpo-breadcumb-wrap ul li:after { content: "/"; position: relative; left: 7px; } .wpo-breadcumb-area .wpo-breadcumb-wrap ul li:last-child span { color: #cbd4fd; } .wpo-breadcumb-area .wpo-breadcumb-wrap ul li:last-child:after { display: none; } .wpo-breadcumb-area .wpo-breadcumb-wrap ul li a { color: #fff; font-size: 20px; transition: all 0.3s; } .wpo-breadcumb-area .wpo-breadcumb-wrap ul li a:hover { color: #0BA08A; } .wpo-about-section.wpo-about-section-s2 { padding-top: 170px; } .preloader { background-color: #006e5e; width: 100%; height: 100%; position: fixed; z-index: 1000; overflow: hidden; } .preloader .vertical-centered-box { position: absolute; width: 100%; height: 100%; text-align: center; } .preloader .vertical-centered-box:after { content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .preloader .vertical-centered-box .content { box-sizing: border-box; display: inline-block; vertical-align: middle; text-align: left; font-size: 0; } .preloader * { transition: all 0.3s; } .preloader .loader-circle { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); margin-left: -60px; margin-top: -60px; } .preloader .loader-line-mask { position: absolute; left: 50%; top: 50%; width: 60px; height: 120px; margin-left: -60px; margin-top: -60px; overflow: hidden; transform-origin: 60px 60px; -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0)); animation: rotate 1.2s infinite linear; } .preloader .loader-line-mask .loader-line { width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); } .preloader #particles-background, .preloader #particles-foreground { left: -51%; top: -51%; width: 202%; height: 202%; transform: scale3d(0.5, 0.5, 1); } .preloader #particles-background { background: #2c2d44; background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%); } .preloader lesshat-selector { -lh-property: 0; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .preloader [not-existing] { zoom: 1; } .preloader lesshat-selector { -lh-property: 0; } @keyframes fade { 0% { opacity: 1; } 50% { opacity: 0.25; } } .preloader [not-existing] { zoom: 1; } .preloader lesshat-selector { -lh-property: 0; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .preloader [not-existing] { zoom: 1; } /*------------------------------------ blog sidebar ------------------------------------*/ .blog-sidebar { /*** search-widget ***/ /*** about-widget ***/ /*** category-widget ***/ /*** recent-post-widget ***/ /*** instagram-widget ***/ /*** tag-widget ***/ /*** wpo-contact-widget ***/ } @media screen and (min-width: 1200px) { .blog-sidebar { padding-left: 45px; } } @media (max-width: 991px) { .blog-sidebar { margin-top: 80px; max-width: 400px; } } @media (max-width: 767px) { .blog-sidebar { margin-top: 60px; max-width: 400px; } } .blog-sidebar .widget h3 { color: #16171A; font-size: 22px; font-weight: 700; line-height: 30px; text-transform: capitalize; margin: 0 0 1.3em; position: relative; text-transform: capitalize; padding-left: 10px; } .blog-sidebar .widget h3:before { content: ""; background-color: #FF7236; width: 2px; height: 20px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .blog-sidebar > .widget + .widget { margin-top: 65px; } .blog-sidebar .search-widget { background: #F4F6F8; padding: 40px 30px; } @media (max-width: 1200px) { .blog-sidebar .search-widget { padding: 35px 20px; } } .blog-sidebar .search-widget form div { position: relative; } .blog-sidebar .search-widget input { background-color: #fff; height: 55px; font-size: 16px; padding: 6px 50px 6px 20px; border: 0; box-shadow: none; transition: all 0.3s; } .blog-sidebar .search-widget input:focus { background-color: rgba(11, 160, 138, 0.1); } .blog-sidebar .search-widget form button { background: transparent; font-size: 20px; color: #042127; background-color: transparent; border: 0; outline: 0; position: absolute; right: 10px; top: 52%; height: 50px; line-height: 50px; width: 50px; border-radius: 6px; transform: translateY(-50%); } .blog-sidebar .about-widget { text-align: center; background: #F4F6F8; padding: 45px; position: relative; z-index: 1; } @media (max-width: 1200px) { .blog-sidebar .about-widget { padding: 35px 20px; } } .blog-sidebar .about-widget .img-holder { margin: 0 auto; margin-bottom: 25px; width: 140px; height: 140px; } .blog-sidebar .about-widget .img-holder img { border-radius: 50%; width: 100%; } .blog-sidebar .about-widget ul { list-style: none; display: flex; justify-content: center; } .blog-sidebar .about-widget ul li { margin-right: 10px; } .blog-sidebar .about-widget ul li:last-child { margin-right: 0; } .blog-sidebar .about-widget ul li a { text-decoration: none; display: block; width: 42px; height: 37px; line-height: 37px; background-color: transparent; color: #7D7E80; border: 1px solid #E8E8E8; transition: all 0.3s ease-in-out; } .blog-sidebar .about-widget ul li a:hover { background-color: #FF7236; border: 1px solid transparent; color: #fff; } .blog-sidebar .about-widget h4 { font-size: 24px; font-weight: 700; margin-bottom: 15px; } .blog-sidebar .about-widget span { color: #727A7D; font-size: 14px; font-weight: 400; margin-bottom: 25px; display: block; } .blog-sidebar .about-widget p { color: #5E5F63; font-size: 16px; font-weight: 400; line-height: 28.8px; margin-bottom: 30px; } .blog-sidebar .about-widget a { font-family: "Plus Jakarta Sans"; font-size: 14px; color: #042127; text-decoration: underline; } .blog-sidebar .about-widget a:hover { color: #0BA08A; } .blog-sidebar .category-widget { background: #F4F6F8; padding: 40px 30px; } @media (max-width: 1200px) { .blog-sidebar .category-widget { padding: 35px 20px; } } .blog-sidebar .category-widget ul { list-style: none; } .blog-sidebar .category-widget ul li { font-size: 19px; position: relative; } @media (max-width: 767px) { .blog-sidebar .category-widget ul li { font-size: 16px; font-size: 1.0666666667rem; } } .blog-sidebar .category-widget ul li span { position: absolute; right: 15px; } .blog-sidebar .category-widget ul > li + li { margin-top: 20px; } .blog-sidebar .category-widget ul a { display: block; font-size: 16px; color: #445658; font-size: 16px; font-weight: 400; line-height: 26px; padding: 12px 15px; background: #fff; border-radius: 2px; border: 1px solid #F8F1EE; } .blog-sidebar .category-widget ul a span { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; font-size: 18px; } @media (max-width: 767px) { .blog-sidebar .category-widget ul a span { font-size: 14px; font-size: 0.9333333333rem; } } .blog-sidebar .category-widget ul a:hover, .blog-sidebar .category-widget ul li:hover:before, .blog-sidebar .category-widget ul li .active { color: #fff; background: #FF7236; } .blog-sidebar .recent-post-widget { background: #F4F6F8; padding: 40px 30px; } @media (max-width: 1200px) { .blog-sidebar .recent-post-widget { padding: 35px 20px; } } .blog-sidebar .recent-post-widget .post { overflow: hidden; } .blog-sidebar .recent-post-widget .posts > .post + .post { margin-top: 15px; padding-top: 15px; } .blog-sidebar .recent-post-widget .post .img-holder { width: 100px; float: left; } .blog-sidebar .recent-post-widget .post .img-holder img { width: 100%; } .blog-sidebar .recent-post-widget .post .details { width: calc(100% - 100px); float: left; padding-left: 20px; } .blog-sidebar .recent-post-widget .post h4 { margin: 0 0 0.3em; color: #16171A; font-size: 16px; font-weight: 600; line-height: 28.8px; } @media (max-width: 1199px) { .blog-sidebar .recent-post-widget .post h4 { margin: 0; } } @media (max-width: 767px) { .blog-sidebar .recent-post-widget .post h4 { font-size: 16px; } } .blog-sidebar .recent-post-widget .post h4 a { display: inline-block; color: #042127; } .blog-sidebar .recent-post-widget .post h4 a:hover { color: #0BA08A; } .blog-sidebar .recent-post-widget .post .details .date { color: #6e6e6e; color: #888686; font-size: 15px; font-weight: 400; line-height: 26px; text-transform: capitalize; } .blog-sidebar .recent-post-widget .post .details .date i { display: inline-block; padding-right: 7px; color: #FF7236; } .blog-sidebar .wpo-instagram-widget ul { display: flex; flex-wrap: wrap; list-style: none; } .blog-sidebar .wpo-instagram-widget ul li { flex: 0 0 33.33%; max-width: 33.33%; margin-bottom: 5px; padding: 0px 3px; } .blog-sidebar .wpo-instagram-widget ul li img { width: 100%; border-radius: 6px; } .blog-sidebar .tag-widget { background: #F4F6F8; padding: 40px 30px; } @media (max-width: 1200px) { .blog-sidebar .tag-widget { padding: 35px 20px; } } .blog-sidebar .tag-widget ul { overflow: hidden; list-style: none; } .blog-sidebar .tag-widget ul li { float: left; margin: 0 8px 8px 0; } .blog-sidebar .tag-widget ul li a { font-size: 15px; font-size: 1rem; display: inline-block; padding: 5px 18px; color: #77787B; background: #FFF; } .blog-sidebar .tag-widget ul li a:hover { background: #FF7236; color: #fff; } .blog-sidebar .wpo-contact-widget { border: 0; background: url(../images/bg-2.html) no-repeat center center; position: relative; background-size: cover; z-index: 1; padding: 30px 40px; } .blog-sidebar .wpo-contact-widget:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(22, 57, 103, 0.9); content: ""; z-index: -1; } @media (max-width: 1200px) { .blog-sidebar .wpo-contact-widget { padding: 20px; } } .blog-sidebar .wpo-contact-widget h2 { font-size: 36px; font-weight: 700; text-align: left; color: #fff; margin-bottom: 20px; } .blog-sidebar .wpo-contact-widget h2::before { left: 28px; background: url(../images/Single-title-shape2.html) no-repeat right center; } .blog-sidebar .wpo-contact-widget p { color: #fff; font-size: 18px; } .blog-sidebar .wpo-contact-widget a { display: inline-block; padding: 10px 20px; border: 1px solid #fff; font-size: 18px; color: #fff; padding-right: 90px; position: relative; margin-top: 10px; } .blog-sidebar .wpo-contact-widget a::before { font-family: "themify"; content: "\e628"; font-size: 18px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } @media screen and (min-width: 1200px) { .wpo-blog-pg-section.blog-pg-left-sidebar .blog-sidebar { padding-left: 0px; padding-right: 45px; } } @media screen and (min-width: 1200px) { .wpo-blog-single-section.wpo-blog-single-left-sidebar-section .blog-sidebar { padding-left: 0px; padding-right: 45px; } } /**** pagination ****/ .pagination-wrapper { text-align: center; margin-top: 60px; } @media (max-width: 991px) { .pagination-wrapper { text-align: left; margin-top: 40px; } } .pagination-wrapper .pg-pagination { display: inline-block; overflow: hidden; list-style-type: none; text-align: center; } .pagination-wrapper .pg-pagination li { float: left; margin-right: 10px; } @media (max-width: 767px) { .pagination-wrapper .pg-pagination li { margin-right: 5px; } } .pagination-wrapper .pg-pagination li:last-child { margin-right: 0; } .pagination-wrapper .pg-pagination li a { background-color: transparent; width: 50px; height: 50px; line-height: 50px; font-size: 16px; font-size: 1.0666666667rem; font-weight: 600; color: #042127; background: transparent; display: block; border: 1px solid #EDEDED; } @media (max-width: 991px) { .pagination-wrapper .pg-pagination li a { width: 40px; height: 40px; line-height: 40px; font-size: 15px; } } .pagination-wrapper .pg-pagination .active a, .pagination-wrapper .pg-pagination li a:hover { background: #FF7236; border-color: #FF7236; color: #fff; } .pagination-wrapper .pg-pagination .fi:before { font-size: 15px; } .pagination-wrapper .pg-pagination .left::before { transform: rotate(180deg); position: absolute; margin-left: -7px; } .pagination-wrapper-left { text-align: left; } .pagination-wrapper-right { text-align: right; } @media screen and (min-width: 1200px) { .pagination-wrapper-right { padding-right: 50px; } } @media (max-width: 991px) { .pagination-wrapper-right { margin-top: 45px; text-align: left; } } /*-------------------------------------------------------------- 2. header --------------------------------------------------------------*/ /*-- 2.1 topbar --*/ .topbar { padding-left: 235px; padding-right: 195px; background: #EBEBEB; } @media (max-width: 1700px) { .topbar { padding: 0 100px; } } @media (max-width: 1500px) { .topbar { padding: 0 10px; } } @media (max-width: 991px) { .topbar .contact-info { text-align: center; } } .topbar .contact-info li { display: inline-flex; align-items: center; color: #000; font-family: "DM Sans"; font-size: 15px; font-weight: 400; padding: 10px 0; } @media (max-width: 991px) { .topbar .contact-info li { padding-bottom: 0; } } .topbar .contact-info li i { color: #ED6637; padding-right: 7px; } .topbar .contact-info li:last-child i { font-size: 13px; } .topbar .contact-info li span { color: #000; } .topbar .contact-info li:last-child { padding-left: 35px; } @media (max-width: 575px) { .topbar .contact-info li:last-child { padding-left: 0; } } .topbar .contact-into { display: flex; align-items: center; justify-content: end; } @media (max-width: 991px) { .topbar .contact-into { justify-content: center; } } @media (max-width: 575px) { .topbar .contact-into { flex-wrap: wrap; } } .topbar .pryment-selector { padding-left: 30px; } @media (max-width: 757px) { .topbar .pryment-selector { padding-left: 10px; } } @media (max-width: 575px) { .topbar .pryment-selector { padding-left: 0; } } .topbar .social-media { padding-left: 60px; } @media (max-width: 575px) { .topbar .social-media { padding-left: 10px; padding-bottom: 10px; } } .topbar .social-media li { display: inline-block; color: #000; font-size: 14px; font-weight: 500; } @media (max-width: 575px) { .topbar .social-media li { font-size: 14px; } } .topbar .social-media li a { padding: 0 8px; color: rgba(0, 0, 0, 0.72); transition: all 0.3s ease-in-out; } .topbar .social-media li a:hover { color: #ED6637; } .topbar .social-media li:last-child { padding-right: 0; } .topbar .language-selector { position: relative; display: inline; color: #000; font-size: 16px; font-weight: 500; } @media (max-width: 575px) { .topbar .language-selector { font-size: 14px; } } .topbar .language-selector select { display: none; } .topbar .language-selector .custom-select { position: relative; display: inline; cursor: pointer; padding: 10px; padding-right: 20px; } .topbar .custom-arrow { position: absolute; right: 0; top: 0; padding-left: 5px; color: #000; font-size: 16px; } @media (max-width: 575px) { .topbar .custom-arrow { font-size: 14px; padding-left: 2px; } } .topbar .language-selector .custom-select img { vertical-align: middle; margin-right: 5px; } .topbar .language-selector .custom-options { display: none; position: absolute; top: 100%; left: 0; right: 0; border: 1px solid #ccc; background-color: white; border-radius: 4px; z-index: 9999; } .topbar .language-selector .custom-options div { padding: 6px 10px; cursor: pointer; display: flex; align-items: center; } .topbar .language-selector .custom-options div img { margin-right: 5px; } .topbar .language-selector .custom-options div:hover { background-color: #f0f0f0; } .topbar .language-selector.active .custom-options { display: block; } .topbar .pryment-selector select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 10px 15px; padding-left: 10px; color: #000; font-size: 16px; font-weight: 500; border: 1px solid transparent; background: transparent; background-image: none; cursor: pointer; position: relative; } @media (max-width: 575px) { .topbar .pryment-selector select { font-size: 14px; } } .topbar .pryment-selector select:focus-visible { outline: 0px; } .topbar .pryment-selector select option { color: #000; font-size: 16px; font-weight: 500; } @media (max-width: 575px) { .topbar .pryment-selector select option { font-size: 14px; } } .topbar .pryment-selector { position: relative; display: inline-block; } .topbar .pryment-selector::after { font-family: flaticon_logistics !important; content: "\f121"; color: #000; font-size: 16px; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); pointer-events: none; } /* 2.2 navigation */ .wpo-site-header { /* navigation open and close btn hide for width screen */ /* style for navigation less than 992px */ /*navbar collaps less then 992px*/ /*** cart-search-contact ***/ background-color: #fff; } .wpo-site-header .navigation { background-color: #fff; margin-bottom: 0; padding: 0; border: 0; border-radius: 0; } .sticky-header { width: 100%; position: fixed; left: 0; top: -400px; z-index: 9999; opacity: 0; visibility: hidden; transition: all 1s; box-shadow: 0 -5px 15px rgba(8, 106, 216, 0.2901960784); } .sticky-on { opacity: 1; top: 0; visibility: visible; } .wpo-site-header .navigation > .container { position: relative; } @media (min-width: 991px) { .wpo-site-header { padding: 0 238px; position: relative; z-index: 11; } } .wpo-site-header .row { width: 100%; } @media (max-width: 991px) { .wpo-site-header .navigation { padding: 20px 0; } } .wpo-site-header #navbar { transition: all 0.5s; } .wpo-site-header #navbar > ul li a:hover, .wpo-site-header #navbar > ul li a:focus { text-decoration: none; color: #0BA08A; } @media screen and (min-width: 992px) { .wpo-site-header #navbar li { position: relative; } .wpo-site-header #navbar > ul > li > a:before { position: absolute; left: 20px; top: 45%; width: 5px; height: 5px; background: #FF7236; content: ""; opacity: 0; visibility: hidden; transition: all 0.3s; border-radius: 10px; transform: translateX(-50%); } } @media screen and (min-width: 992px) and (max-width: 1499px) { .wpo-site-header #navbar > ul > li > a:before { left: 0; } } @media screen and (min-width: 992px) { .wpo-site-header #navbar > ul > li > a:hover:before, .wpo-site-header #navbar > ul > li > a.active:before { opacity: 1; visibility: visible; } .wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a { position: relative; } .wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before { font-family: "themify"; content: "\e649"; font-size: 11px; font-size: 0.73333rem; position: absolute; right: 15px; top: 58%; transform: translateY(-50%); } .wpo-site-header #navbar > ul > li:hover > .sub-menu { top: 100%; visibility: visible; opacity: 1; } .wpo-site-header #navbar .sub-menu > li:hover > .sub-menu { left: 100%; visibility: visible; opacity: 1; } } .wpo-site-header .container-fluid { padding-right: 0; } @media (max-width: 991px) { .wpo-site-header { /* class for show hide navigation */ } .wpo-site-header .container { width: 100%; max-width: 100%; } .wpo-site-header .header-right { right: -10px; } .wpo-site-header .navbar-header button span { background-color: #fff; width: 20px; display: block; height: 2px; margin-bottom: 5px; } .wpo-site-header .navbar-header button span:last-child { margin: 0; } } .wpo-site-header #navbar ul { list-style: none; } @media (max-width: 991px) and (max-width: 991px) { .wpo-site-header #navbar { top: 0; visibility: visible; opacity: 1; } } @media (max-width: 991px) { .wpo-site-header #navbar > ul { z-index: 101; } .wpo-site-header #navbar ul a { color: #000; } .wpo-site-header #navbar ul a:hover, .wpo-site-header #navbar ul li.current a { color: #0BA08A; } .wpo-site-header #navbar .close-navbar .ti-close { position: relative; top: 1px; } .wpo-site-header .navbar-toggler .first-angle, .wpo-site-header .navbar-toggler .last-angle { transition: all 0.3s; } .wpo-site-header .x-close .middle-angle { opacity: 0; } .wpo-site-header .x-close .first-angle { position: absolute; -webkit-transform: rotate(-44deg); top: 16px; left: 10px; } .wpo-site-header .x-close .last-angle { -webkit-transform: rotate(44deg); position: absolute; top: 16px; right: 10px; } } @media (max-width: 767px) { .wpo-site-header .navbar-header .navbar-brand { font-size: 24px; } .wpo-site-header #navbar .navbar-nav { margin: 0; } } @media (max-width: 991px) { .wpo-site-header .navbar-collapse.collapse { display: none; } .wpo-site-header .navbar-collapse.collapse.in { display: block; } .wpo-site-header .navbar-header .collapse, .wpo-site-header .navbar-toggle { display: block; } .wpo-site-header .navbar-header { float: none; position: relative; z-index: 99; text-align: center; } .wpo-site-header .navbar-right { float: none; } .wpo-site-header .navbar-nav { float: none; } .wpo-site-header .navbar-nav > li { float: none; } } .wpo-site-header .header-right { display: flex; justify-content: start; z-index: 991; position: relative; align-items: center; margin-left: -80px; margin-top: 20px; } @media (max-width: 1499px) { .wpo-site-header .header-right { margin-top: 0px; justify-content: end; } } .wpo-site-header .header-right .call { display: flex; align-items: center; margin-right: 95px; } @media (max-width: 1699px) { .wpo-site-header .header-right .call { margin-right: 10px; } } @media (max-width: 575px) { .wpo-site-header .header-right .call { display: none; } } .wpo-site-header .header-right .call .text { margin-left: 15px; } @media (max-width: 1499px) { .wpo-site-header .header-right .call .text { display: none; } } .wpo-site-header .header-right .call .text span { color: #828A8D; font-size: 14px; font-weight: 500; text-transform: uppercase; } .wpo-site-header .header-right .call .text h4 { color: #1EAE98; font-size: 16px; font-weight: 600; text-transform: uppercase; margin-bottom: 0; } .wpo-site-header .header-right button { padding: 0; border: 0; outline: 0; } .wpo-site-header .header-right > div { float: left; position: relative; } .wpo-site-header .header-right .close-form { position: absolute; right: -54px; /* right: -280px; top: -25px; */ } @media (max-width: 1699px) { .wpo-site-header .header-right .close-form { right: -150px; } } @media (max-width: 1499px) { .wpo-site-header .header-right .close-form { position: unset; } } @media (max-width: 991px) { .wpo-site-header .header-right .close-form { display: none; } } .wpo-site-header .header-right .close-form .theme-btn, .wpo-site-header .header-right .close-form .view-cart-btn { /* padding: 25px 140px 25px 40px;*/ text-transform: capitalize; color: #FFF; font-family: "Plus Jakarta Sans"; font-size: 18px; font-weight: 700; line-height: 42px; background: #0BA08A; display: flex; align-items: center; } @media (max-width: 1880px) { .wpo-site-header .header-right .close-form .theme-btn, .wpo-site-header .header-right .close-form .view-cart-btn { padding: 30px 110px 30px 40px; } } @media (max-width: 1699px) { .wpo-site-header .header-right .close-form .theme-btn, .wpo-site-header .header-right .close-form .view-cart-btn { padding: 30px 40px; } } @media (max-width: 1499px) { .wpo-site-header .header-right .close-form .theme-btn, .wpo-site-header .header-right .close-form .view-cart-btn { padding: 10px 25px; font-size: 18px; line-height: 20px; } } @media (max-width: 1399px) { .wpo-site-header .header-right .close-form .theme-btn, .wpo-site-header .header-right .close-form .view-cart-btn { padding: 7px 20px; font-size: 16px; line-height: 20px; } } .wpo-site-header .header-right .close-form .theme-btn i, .wpo-site-header .header-right .close-form .view-cart-btn i { margin-left: 20px; font-size: 25px; line-height: 45px; padding-top: 7px; } @media (max-width: 1399px) { .wpo-site-header .header-right .close-form .theme-btn i, .wpo-site-header .header-right .close-form .view-cart-btn i { margin-left: 5px; font-size: 20px; line-height: 35px; } } @media (max-width: 450px) { .wpo-site-header .header-right > div { margin-right: 10px; } .wpo-site-header .header-right { right: -30px; } } .wpo-site-header .header-right .header-search-form-wrapper { position: relative; } .wpo-site-header .header-right .header-search-form-wrapper .fi:before { font-size: 22px; } @media (max-width: 450px) { .wpo-site-header .header-right .cart-toggle-btn { display: none; } } .wpo-site-header .header-right .search-toggle-btn, .wpo-site-header .header-right .cart-toggle-btn { line-height: 0.66em; color: #fff; width: 50px; height: 50px; border: 0; background: transparent; } .wpo-site-header .header-right .search-toggle-btn i, .wpo-site-header .header-right .cart-toggle-btn i { font-size: 20px; } @media (max-width: 1200px) { .wpo-site-header .header-right .search-toggle-btn, .wpo-site-header .header-right .cart-toggle-btn { width: 50px; height: 50px; } } @media (max-width: 991px) { .wpo-site-header .header-right .search-toggle-btn, .wpo-site-header .header-right .cart-toggle-btn { width: 40px; height: 40px; } } @media (max-width: 991px) { .wpo-site-header .header-right .search-toggle-btn .fi:before, .wpo-site-header .header-right .cart-toggle-btn .fi:before { font-size: 16px; } } .wpo-site-header .header-right .search-toggle-btn .ti-close, .wpo-site-header .header-right .cart-toggle-btn .ti-close { display: block; line-height: 20px; position: relative; top: -2px; } /*** cart-search-contact ***/ .cart-search-contact button { background: transparent; padding: 0; border: 0; outline: 0; } .cart-search-contact .fi { font-size: 30px; font-size: 2rem; color: #042127; } .cart-search-contact > div { float: left; position: relative; } .cart-search-contact > div + div { margin-left: 12px; } .cart-search-contact .header-search-form { position: absolute; width: 350px; right: 0; top: 75px; transform: scale(0); opacity: 0; visibility: hidden; background: #fff; padding: 30px; border-radius: 6px; transition: all 0.5s; box-shadow: -2px 18px 40px -9px rgb(153, 153, 153); } @media (max-width: 991px) { .cart-search-contact .header-search-form { top: 65px; } } @media (max-width: 767px) { .cart-search-contact .header-search-form { right: 15px; } } @media (max-width: 575px) { .cart-search-contact .header-search-form { width: 260px; padding: 15px; } } .cart-search-contact .header-search-form-wrapper .fi:before { font-size: 18px; font-size: 1.2rem; } .cart-search-contact form div { position: relative; } .cart-search-contact form div button { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } .cart-search-contact form div button .fi:before { font-size: 18px !important; } .cart-search-contact input { width: 100%; height: 50px; padding: 6px 20px; border: 0; border-radius: 0; box-shadow: none; border: 1px solid #ebebeb; } .cart-search-contact input:focus { box-shadow: none; border-color: #0BA08A; } .wpo-site-header .header-right .header-search-content-toggle { opacity: 1; visibility: visible; right: 0; transform: scale(1); } .mini-cart { margin-right: 20px; } .mini-cart .cart-count { background: #0BA08A; width: 19px; height: 19px; font-size: 10px; line-height: 17px; color: white; position: absolute; top: -2px; right: -5px; border-radius: 50%; font-weight: 600; } .mini-cart-content { background: #fff; width: 320px; height: 100%; z-index: 100; position: fixed; right: -320px; top: 0; opacity: 0; visibility: hidden; transition: all 0.5s; box-shadow: -2px 18px 40px -9px rgb(153, 153, 153); } @media (max-width: 575px) { .mini-cart-content { width: 290px; } } .mini-cart-content .mini-cart-close { display: block; width: 40px; height: 40px; background-color: rgb(51, 51, 51); color: rgb(255, 255, 255); font-size: 0px; text-align: center; overflow: hidden; position: relative; float: right; line-height: 54px; border-radius: 3px; right: 10px; top: 20px; } .mini-cart-content .mini-cart-close i { font-size: 15px; } .mini-cart-content p { font-size: 15px; font-size: 1rem; font-weight: 500; color: #042127; margin: 0; text-transform: uppercase; } .mini-cart-content .mini-cart-items { padding: 100px 20px 25px; } .mini-cart-content .mini-cart-item { padding-top: 15px; margin-top: 15px; border-top: 1px solid #efefef; } .mini-cart-content .mini-cart-item:first-child { padding-top: 0; margin-top: 0; border-top: 0; } .mini-cart-content .mini-cart-item-image { width: 50px; height: 50px; border: 2px solid #f3f3f3; float: left; margin-right: 15px; } .mini-cart-content .mini-cart-item-image a, .mini-cart-content .mini-cart-item-image img { display: block; width: 46px; height: 46px; } .mini-cart-content .mini-cart-item-des { position: relative; overflow: hidden; } .mini-cart-content .mini-cart-item-des a { font-size: 14px; font-size: 0.9333333333rem; font-weight: 600; text-align: left; color: #042127; } .mini-cart-content .mini-cart-item-des a:hover { color: #0BA08A; } .mini-cart-content .mini-cart-item-des .mini-cart-item-price { font-size: 13px; font-size: 0.8666666667rem; color: #888; display: block; margin-top: 3px; } .mini-cart-content .mini-cart-item-des .mini-cart-item-quantity { font-size: 12px; font-size: 0.8rem; color: #444; display: block; position: absolute; right: 0; top: 6px; } .mini-cart-content .visible-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; opacity: 0.02; z-index: -1; } .mini-cart-content .mini-cart-action { padding: 20px 0 30px; text-align: center; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } .mini-cart-content .mini-cart-action .theme-btn-s2 { float: right; } .mini-cart-content .mini-cart-action .mini-btn { width: 240px; } .mini-cart-content .mini-cart-action .mini-checkout-price { font-size: 16px; font-size: 1.0666666667rem; font-weight: 600; color: #042127; display: block; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; } .mini-cart-content .mini-cart-action .mini-checkout-price span { color: #c79652; font-size: 20px; } .mini-cart-content-toggle, .mini-wislist-content-toggle { opacity: 1; visibility: visible; right: 0; } @media (max-width: 991px) { .page-wrapper { transition: all 0.3s; } .body-overlay:before { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); position: absolute; left: 0; top: 0; z-index: 10; transition: all 0.3s; } } .header-search-area { background: #fff; width: 100%; padding: 100px 0; text-align: center; position: fixed; left: 0; top: 0; z-index: 999; } .header-search-area h3 { font-size: 45px; margin: 0 0 1em; } .header-search-area form { position: relative; } .header-search-area input { height: 50px; font-size: 18px; font-size: 1.2rem; border-radius: 0; border: 0; border-bottom: 1px solid #d0d0d0; box-shadow: none; } .header-search-area input:focus { box-shadow: none; border-color: #0BA08A; } .header-search-area form button { background: transparent; border: 0; font-size: 20px; font-size: 1.33333rem; position: absolute; right: 0; bottom: 10px; } .header-search-area form button:focus { border: none; outline: none; } .header-search-area .close-form { position: absolute; right: 35px; top: 35px; bottom: auto; padding-bottom: 5px; border-bottom: 1px solid; } .header-search-area .close-form button { background: transparent; border: 0; outline: 0; font-size: 13px; font-size: 0.86667rem; text-transform: uppercase; color: #000; letter-spacing: 2px; z-index: 99; } .header-search-area .close-form button:focus { border: 0; outline: 0; } .wpo-site-header { /* navigation open and close btn hide for width screen */ /* style for navigation less than 992px */ /*navbar collaps less then 992px*/ } .wpo-site-header .navigation { background-color: #fff; margin-bottom: 0; padding: 0; border: 0; border-radius: 0; } .wpo-site-header .navigation::before { position: absolute; left: 42%; bottom: -25px; width: 107%; height: 110%; content: ""; background: #fff; transform: translateX(-50%); z-index: -1; -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); } @media (max-width: 1499px) { .wpo-site-header .navigation::before { display: none; } } .wpo-site-header .navigation > .container { position: relative; } @media (max-width: 1199px) { .wpo-site-header .navigation { padding: 20px 0; } } .wpo-site-header #navbar { transition: all 0.5s; padding-top: 5px; margin-bottom: -10px; } @media (max-width: 1499px) { .wpo-site-header #navbar { padding-top: 0px; margin-bottom: 0px; justify-content: center; } } .wpo-site-header #navbar > ul li a:hover, .wpo-site-header #navbar > ul li a.active, .wpo-site-header #navbar > ul li a:focus { color: #FF7236; text-decoration: underline; } @media screen and (min-width: 992px) { .wpo-site-header #navbar { /*** hover effect ***/ } .wpo-site-header #navbar li { position: relative; } .wpo-site-header #navbar > ul > li > a { font-size: 16px; padding: 30px 30px; display: block; color: #000; font-weight: 500; position: relative; text-transform: capitalize; } .wpo-site-header #navbar > ul .sub-menu { background-color: #fff; box-shadow: 0px 2px 20px 0px rgba(62, 65, 159, 0.09); width: 225px; position: absolute; padding: 20px 0; left: 0; top: 110%; z-index: 10; visibility: hidden; opacity: 0; transition: all 0.3s; } .wpo-site-header #navbar > ul > li .sub-menu a { font-size: 16px; display: block; padding: 10px 15px; color: #000; position: relative; overflow: hidden; font-weight: 500; text-transform: capitalize; } .wpo-site-header #navbar > ul > li .sub-menu a:hover, .wpo-site-header #navbar > ul > li .sub-menu a.active { color: #FF7236; text-decoration: underline; } .wpo-site-header #navbar > ul > li > .sub-menu .sub-menu { left: 110%; top: 0; } .wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a { position: relative; } .wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before { font-family: "themify"; content: "\e649"; font-size: 11px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } .wpo-site-header #navbar > ul > li:hover > .sub-menu { top: 100%; visibility: visible; opacity: 1; } .wpo-site-header #navbar .sub-menu > li:hover > .sub-menu { left: 100%; visibility: visible; opacity: 1; } } @media (max-width: 991px) { .wpo-site-header #navbar > ul > li a { display: block; font-size: 15px; color: #fff; font-weight: 600; text-transform: capitalize; } .wpo-site-header #navbar > ul > li a:hover, .wpo-site-header #navbar > ul > li a.active { color: #fff; } .wpo-site-header #navbar > ul .sub-menu > li:last-child { border-bottom: 0; } .wpo-site-header #navbar > ul > li > .sub-menu a { padding: 8px 15px 8px 45px; } .wpo-site-header #navbar > ul > li > .sub-menu .sub-menu a { padding: 8px 15px 8px 65px; } .wpo-site-header #navbar > ul .menu-item-has-children > a { position: relative; color: #ddd; } .wpo-site-header #navbar > ul .menu-item-has-children > a:hover, .wpo-site-header #navbar > ul .menu-item-has-children > a.active { color: #fff; } .wpo-site-header #navbar > ul .menu-item-has-children > a:before { font-family: "themify"; content: "\e649"; font-size: 11px; font-size: 0.7333333333rem; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); transition: all 0.3s; } .wpo-site-header #navbar > ul .menu-item-has-children > a.rotate:before { transform: rotate(90deg); top: 29%; } .wpo-site-header #navbar > ul .menu-item-has-children > a.rotate { color: #fff; } } @media screen and (min-width: 992px) { .wpo-site-header .navbar-header .open-btn { display: none; } .wpo-site-header #navbar .close-navbar { display: none; } } .wpo-site-header .menu-close { display: none; } @media (max-width: 991px) { .wpo-site-header { /* class for show hide navigation */ } .wpo-site-header .container { width: 100%; } .wpo-site-header .mobail-menu button { background-color: #0BA08A; width: 40px; height: 35px; border: 0; padding: 5px 10px; outline: 0; position: relative; z-index: 20; } .wpo-site-header .mobail-menu button:focus { outline: none; box-shadow: none; } .wpo-site-header .mobail-menu button span { background-color: #fff; width: 20px; display: block; height: 2px; margin-bottom: 5px; } .wpo-site-header .mobail-menu button span:last-child { margin: 0; } .wpo-site-header #navbar { background: #006e5e; display: block !important; width: 300px; height: 100%; margin: 0; padding: 0; border: 0; position: fixed; left: -320px; top: 0px; z-index: 999999; opacity: 0; visibility: hidden; } .wpo-site-header #navbar .navbar-nav { display: block; } .wpo-site-header #navbar > ul { position: relative; z-index: 101; } .wpo-site-header #navbar ul a { color: #000; } .wpo-site-header #navbar ul a:hover, .wpo-site-header #navbar ul li.current a { color: #0BA08A; } .wpo-site-header #navbar .navbar-nav { height: 100%; overflow: auto; padding-bottom: 60px; } .wpo-site-header #navbar .close-navbar { background-color: #fff; width: 40px; height: 40px; color: #000; border: 0; outline: none; position: absolute; left: -41px; top: 90px; z-index: 20; } .wpo-site-header #navbar .close-navbar .ti-close { position: relative; top: 1px; } .wpo-site-header .menu-close { display: block; z-index: 99; background: none; text-align: center; color: #fff; border: 0; text-align: center; margin-left: auto; margin-top: 30px; margin-right: 30px; margin-bottom: 30px; width: 40px; height: 40px; line-height: 40px; border: 1px solid #fff; } .wpo-site-header .slideInn { left: 0 !important; opacity: 1 !important; visibility: visible !important; } .wpo-site-header .navbar-toggler .first-angle, .wpo-site-header .navbar-toggler .last-angle { transition: all 0.3s; } .wpo-site-header .x-close .middle-angle { opacity: 0; } .wpo-site-header .x-close .first-angle { position: absolute; -webkit-transform: rotate(-44deg); top: 16px; left: 10px; } .wpo-site-header .x-close .last-angle { -webkit-transform: rotate(44deg); position: absolute; top: 16px; right: 10px; } } @media (max-width: 767px) { .wpo-site-header .navbar-header .navbar-brand { font-size: 24px; } .wpo-site-header #navbar .navbar-nav { margin: 0; } } .wpo-site-header .navbar-header .navbar-brand img { max-width: 170px; margin-top: 20px; } @media (max-width: 1499px) { .wpo-site-header .navbar-header .navbar-brand img { margin-top: 0px; } } @media (max-width: 991px) { .wpo-site-header .navbar-collapse.collapse { display: none; } .wpo-site-header .navbar-collapse.collapse.in { display: block; } .wpo-site-header .navbar-header .collapse, .wpo-site-header .navbar-toggle { display: block; } .wpo-site-header .navbar-header { float: none; } .wpo-site-header .navbar-right { float: none; } .wpo-site-header .navbar-nav { float: none; } .wpo-site-header .navbar-nav > li { float: none; } } @media (max-width: 440px) { .wpo-site-header .navbar-header .navbar-brand img { max-width: 170px; } } @media (max-width: 370px) { .wpo-site-header .navbar-header .navbar-brand img { max-width: 140px; } } @media (max-width: 1700px) { .wpo-site-header { padding: 0 100px; } } @media (max-width: 1500px) { .wpo-site-header #navbar > ul > li > a { padding: 30px 15px; } .wpo-site-header { padding: 0 10px; } } @media (max-width: 1400px) { .wpo-site-header #navbar > ul > li > a { padding: 30px 10px; font-size: 18px; } } @media (max-width: 1200px) { .wpo-site-header #navbar > ul > li > a { padding: 15px 15px; font-size: 16px; } } @media (max-width: 991px) { .wpo-site-header #navbar > ul > li > a { font-size: 15px; } } @media (max-width: 767px) { .header-right .theme-btn, .header-right .view-cart-btn { padding: 20px 12px; } .wpo-site-header .header-right .close-form { display: none; } } .wpo-site-header .navigation.sticky-header { padding: 0 130px; } @media (max-width: 1499px) { .wpo-site-header .navigation.sticky-header { padding: 0 100px; } } @media (max-width: 1399px) { .wpo-site-header .navigation.sticky-header { padding: 0 80px; } } @media (max-width: 1199px) { .wpo-site-header .navigation.sticky-header { padding: 20px; } } @media (max-width: 767px) { .wpo-site-header .navigation.sticky-header { padding: 20px 10px; } } .wpo-site-header .navigation.sticky-header:before { display: none; } .wpo-site-header .navigation.sticky-header .navbar-header .navbar-brand img { margin-top: 0px; } .wpo-site-header .navigation.sticky-header #navbar { padding-top: 5px; margin-bottom: 0px; } .wpo-site-header .navigation.sticky-header .header-right { margin-top: 0px; justify-content: end; } .wpo-site-header .navigation.sticky-header .header-right .close-form .theme-btn, .wpo-site-header .navigation.sticky-header .header-right .close-form .view-cart-btn { display: none; } /* wpo-site-header-s2 */ .wpo-site-header-s2 { position: absolute; left: 0; top: 0; width: 100%; z-index: 11; } .wpo-site-header-s2 .topbar { padding: 0 250px; background: transparent; } @media (max-width: 1700px) { .wpo-site-header-s2 .topbar { padding: 0 100px; } } @media (max-width: 1500px) { .wpo-site-header-s2 .topbar { padding: 0 10px; } } @media (max-width: 991px) { .wpo-site-header-s2 .topbar { padding: 0; } } .wpo-site-header-s2 .topbar .contact-info li span { color: #fff; } .wpo-site-header-s2 .topbar .language-selector { color: #fff; } .wpo-site-header-s2 .social-help { background: #FF7236; padding: 0 20px; } @media (max-width: 991px) { .wpo-site-header-s2 .social-help { display: none; } } .wpo-site-header-s2 .social-help li { display: inline-block; } .wpo-site-header-s2 .social-help li a { color: #FFF; font-size: 15px; font-weight: 500; transition: all 0.3s ease-in-out; padding: 10px 15px; display: block; } .wpo-site-header-s2 .social-help li a:hover { text-decoration: underline; } .wpo-site-header-s2 .topbar .social-media { padding-left: 40px; } @media (max-width: 991px) { .wpo-site-header-s2 .topbar .social-media { padding-left: 0; } } .wpo-site-header-s2 .topbar .social-media li a { color: #fff; } .wpo-site-header-s2 .topbar .social-media li a:hover { color: #FF7236; } .wpo-site-header-s2 .wpo-site-header .navigation::before { display: none; } .wpo-site-header-s2 .wpo-site-header #navbar { padding-top: 0px; margin-bottom: 0px; } .wpo-site-header-s2 .wpo-site-header .navbar-header .navbar-brand img { max-width: 170px; margin-top: 0px; } .wpo-site-header-s2 .wpo-site-header .header-right { justify-content: end; margin-left: auto; right: -10px; margin-top: 0px; } @media (max-width: 575px) { .wpo-site-header-s2 .wpo-site-header .header-right { right: -30px; } } .wpo-site-header-s2 .wpo-site-header .header-right .close-form { position: unset; padding-left: 20px; } .wpo-site-header-s2 .wpo-site-header .header-right .close-form .theme-btn, .wpo-site-header-s2 .wpo-site-header .header-right .close-form .view-cart-btn { padding: 0px; text-transform: capitalize; background: #0BA08A; display: flex; align-items: center; justify-content: center; width: 143px; color: #FFF; font-family: "DM Sans"; font-size: 15px; font-weight: 500; border-radius: 6px; height: 42px; } .wpo-site-header-s2 .wpo-site-header { padding: 0 220px; position: relative; z-index: 11; } @media (max-width: 1700px) { .wpo-site-header-s2 .wpo-site-header { padding: 0 100px; } } @media (max-width: 1500px) { .wpo-site-header-s2 .wpo-site-header { padding: 0 10px; } } @media (max-width: 575px) { .wpo-site-header-s2 .wpo-site-header { padding: 0; } } .wpo-site-header-s2 .wpo-site-header { background: transparent; } .wpo-site-header-s2 .wpo-site-header .navigation { border-radius: 7px; background: rgba(255, 255, 255, 0.09); padding: 0 25px; } @media (max-width: 1199px) { .wpo-site-header-s2 .wpo-site-header .navigation { padding: 0 10px; } } @media (max-width: 991px) { .wpo-site-header-s2 .wpo-site-header .navigation { padding: 10px; margin-top: 20px; } } @media (max-width: 575px) { .wpo-site-header-s2 .wpo-site-header .navigation { padding: 10px 0; } } .wpo-site-header-s2 .wpo-site-header #navbar > ul > li > a { padding: 38px 30px; color: #fff; } @media (max-width: 1399px) { .wpo-site-header-s2 .wpo-site-header #navbar > ul > li > a { padding: 38px 20px; } } @media (max-width: 1199px) { .wpo-site-header-s2 .wpo-site-header #navbar > ul > li > a { padding: 25px 15px; } } @media (max-width: 991px) { .wpo-site-header-s2 .wpo-site-header #navbar > ul > li > a { padding: 15px 20px; } } @media screen and (min-width: 992px) { .wpo-site-header-s2 .wpo-site-header #navbar > ul > li > a:before { display: none; } } .wpo-site-header-s2 .wpo-site-header #navbar > ul li a:hover, .wpo-site-header-s2 .wpo-site-header #navbar > ul li a.active, .wpo-site-header-s2 .wpo-site-header #navbar > ul li a:focus { color: #FF7236; text-decoration: underline; } .wpo-site-header-s2 .cart-search-contact .fi { color: #fff; } .wpo-site-header-s2 .wpo-site-header .header-right .header-search-form-wrapper .fi:before { font-size: 20px; } .wpo-site-header-s2 .wpo-site-header .header-right .header-search-form-wrapper .fi:before { font-size: 20px; } .wpo-site-header-s2 .cart-search-contact form div button .fi:before { font-size: 18px !important; color: #000; } .wpo-site-header-s2 .wpo-site-header .navigation.sticky-header { border-radius: 0px; background: rgb(11, 55, 66); margin-top: 0; } .wpo-site-header-s2 .wpo-site-header .navigation.sticky-header #navbar { padding-top: 0px; margin-bottom: 0px; } /* wpo-site-header-s3 */ .wpo-site-header-s3 .navigation::before { display: none; } .wpo-site-header-s3 .header-right .close-form .theme-btn, .wpo-site-header-s3 .header-right .close-form .view-cart-btn { padding: 27px 85px; text-align: center; } @media (max-width: 1499px) { .wpo-site-header-s3 .header-right .close-form .theme-btn, .wpo-site-header-s3 .header-right .close-form .view-cart-btn { padding: 30px 50px; } } @media (max-width: 1399px) { .wpo-site-header-s3 .header-right .close-form .theme-btn, .wpo-site-header-s3 .header-right .close-form .view-cart-btn { padding: 15px 20px; } } .wpo-site-header-s3 .navigation.sticky-header #navbar { padding-top: 0px; } .wpo-site-header-s3 .header-right .close-form { top: -29px; } .wpo-site-header-s3 #navbar > ul > li > a { padding: 42px 30px; } @media (max-width: 1399px) { .wpo-site-header-s3 #navbar > ul > li > a { padding: 35px 20px; } } @media (max-width: 1199px) { .wpo-site-header-s3 #navbar > ul > li > a { padding: 20px 10px; } } @media (max-width: 991px) { .wpo-site-header-s3 #navbar > ul > li > a { padding: 10px 25px; } } .wpo-site-header-s3 .header-right { margin-top: 0; } .wpo-site-header-s3 .navbar-header .navbar-brand img { margin-top: 0px; } .wpo-site-header-s3 #navbar { padding-top: 0px; margin-bottom: 0px; } .wpo-site-header-s3 .header-right .call { margin-right: 80px; } @media (max-width: 1699px) { .wpo-site-header-s3 .header-right .call { margin-right: 10px; } } @media (max-width: 1499px) { .wpo-site-header-s3 .navigation.sticky-header { padding: 0 70px; } } @media (max-width: 991px) { .wpo-site-header-s3 .navigation.sticky-header { padding: 20px 10px; } } /*-------------------------------------------------------------- 3. content --------------------------------------------------------------*/ /*3.1 hero-slider*/ .hero-section { position: relative; z-index: 1; } .hero-section .slider-item { height: 834px; position: relative; display: flex; align-items: center; } @media (max-width: 991px) { .hero-section .slider-item { height: 100%; padding: 150px 0; } } @media (max-width: 575px) { .hero-section .slider-item { padding: 130px 0; padding-top: 100px; } } .hero-section .slider-item::before { position: absolute; left: 0; top: 0; width: 90%; height: 100%; content: ""; background: url(../images/slider/bg-shape.svg) no-repeat; z-index: -1; } @media (max-width: 991px) { .hero-section .slider-item::before { width: 100%; } } .hero-section .slider-item .bg-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -11; } .hero-section .slider-item .bg-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: all 0.3s ease-in; } .hero-section .slider-item .down-shape { position: absolute; left: 50%; bottom: 10%; animation: top-bottom 5s infinite; } @media (max-width: 991px) { .hero-section .slider-item .down-shape { display: none; } } .hero-section .content { max-width: 640px; position: relative; } .hero-section .content .bg-text { position: absolute; left: 0; top: -70px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(255, 255, 255, 0.24); font-family: "Plus Jakarta Sans"; font-size: 260px; font-weight: 500; font-family: "DM Sans"; margin-bottom: 0; color: transparent; z-index: -1; } @media (max-width: 991px) { .hero-section .content .bg-text { font-size: 150px; top: -40px; } } @media (max-width: 575px) { .hero-section .content .bg-text { font-size: 80px; top: 0px; } } .hero-section .content h2 { color: #FF7236; font-family: "DM Sans"; font-size: 20px; font-weight: 500; margin-bottom: 10px; } .hero-section .content h3 { color: #fff; font-size: 80px; font-weight: 800; line-height: 80px; text-transform: capitalize; margin-bottom: 35px; } @media (max-width: 991px) { .hero-section .content h3 { font-size: 50px; line-height: 60px; margin-bottom: 25px; } } @media (max-width: 575px) { .hero-section .content h3 { font-size: 35px; line-height: 50px; margin-bottom: 20px; } } .hero-section .content p { color: #fff; font-size: 16px; font-weight: 500; line-height: 30px; margin-bottom: 45px; } @media (max-width: 575px) { .hero-section .content p { margin-bottom: 20px; } } .hero-section .hero-btn { display: flex; align-items: center; } @media (max-width: 575px) { .hero-section .hero-btn { flex-direction: column-reverse; align-items: start; } } .hero-section .hero-btn .call { display: flex; align-items: center; margin-left: 30px; } @media (max-width: 575px) { .hero-section .hero-btn .call { margin-left: 0; margin-bottom: 25px; } } .hero-section .hero-btn .call .icon { width: 60px; height: 60px; border-radius: 100px; line-height: 60px; background: #053E49; font-size: 19px; color: #fff; text-align: center; margin-right: 15px; } @media (max-width: 575px) { .hero-section .hero-btn .call .icon { width: 40px; height: 40px; line-height: 40px; font-size: 16px; } } .hero-section .hero-btn .call .text span { color: #fff; font-size: 15px; font-weight: 400; letter-spacing: 0.75px; display: inline-block; margin-bottom: 5px; } .hero-section .hero-btn .call .text h4 { margin-bottom: 0; color: #fff; font-size: 20px; font-weight: 700; text-transform: uppercase; } @media (max-width: 575px) { .hero-section .hero-btn .call .text h4 { font-size: 16px; } } .hero-section .track-btn { display: inline-block; text-align: center; background: #0B3742; color: #fff; font-family: "Plus Jakarta Sans"; font-size: 22px; font-weight: 600; line-height: 42px; text-decoration-line: underline; text-transform: uppercase; padding: 60px 85px; position: absolute; right: 225px; bottom: -85px; } @media (max-width: 991px) { .hero-section .track-btn { display: none; } } .hero-section .track-btn::before { position: absolute; left: 100%; bottom: 0; width: 261px; height: 209px; background: #FF7236; content: ""; } .hero-section .track-btn::after { position: absolute; top: -47px; right: 0; width: 38px; height: 47px; background: #E5500F; content: ""; -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%); clip-path: polygon(100% 0, 0% 100%, 100% 100%); } .hero-section .track-btn a { color: #FFF; font-family: "Plus Jakarta Sans"; font-size: 22px; font-weight: 600; line-height: 42px; text-decoration-line: underline; text-transform: uppercase; } .hero-section .track-btn a img { margin-top: -5px; margin-right: 10px; } .hero-section .slider-item .bg-image img { max-width: 100%; opacity: 1 !important; animation-duration: 3s; transition: all 2s ease; } .hero-section .animated { transition: all 0.5s ease; } .hero-section .slider [data-animation-in] { opacity: 0; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s; } .hero-section .slick-arrow { position: absolute; top: auto; left: auto; right: 0; bottom: -30px; width: 50px; height: 50px; border-radius: 100px; transition: all 0.3s ease-in-out; border: 1px solid #fff; z-index: 1; } .hero-section .slick-arrow.slick-prev, .hero-section .slick-arrow.slick-next { right: 125px; bottom: -50px; } .hero-section .slick-arrow.slick-prev::after, .hero-section .slick-arrow.slick-next::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: "\f125"; font-family: flaticon_logistics !important; font-size: 15px; color: #fff; transition: all 0.3s ease-in-out; } .hero-section .slick-arrow.slick-prev::before, .hero-section .slick-arrow.slick-next::before { display: none; } .hero-section .slick-arrow.slick-next { right: 30px; } .hero-section .slick-arrow.slick-next::after { content: "\f124"; } .hero-section .slick-arrow.slick-next::before { display: none; } .hero-section .slick-arrow:hover { background: rgb(6, 45, 53); } .hero-section .slick-arrow:hover::after { color: #fff; } .hero-section .slick-dots { bottom: 60px; } .hero-section .slick-dots li { height: 7px; width: 40px; border: 0; border-radius: 100px; color: #0B3742; margin: 0 5px; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.06); transition: all 0.3s ease-in-out; overflow: hidden; position: relative; } .hero-section .slick-dots .slick-active { background: #FF7236; } @keyframes zoomInImage { from { transform: scale3d(1, 1, 1); } to { transform: scale3d(1.1, 1.1, 1.1); } } .zoomInImage { animation-name: zoomInImage; } @keyframes zoomOutImage { from { transform: scale3d(1.1, 1.1, 1.1); } to { transform: scale3d(1, 1, 1); } } .zoomOutImage { animation-name: zoomOutImage; } @keyframes top-bottom { 0% { transform: translateY(0); } 100% { transform: translateY(50%); opacity: 0; } } .hero { position: relative; height: 100vh; /** slider controls **/ /*** hero slider animation ***/ } @media (max-width: 767px) { .hero { min-height: 420px; } } .hero .slide { height: 100vh; position: relative; background-repeat: no-repeat; position: relative; } @media (max-width: 767px) { .hero .slide { min-height: 420px; } } .hero .slide .slider-bg { display: none; } .hero .slide:focus { outline: none; } .hero .slide .container { height: 100%; display: table; } .hero .slide .row { display: table-cell; vertical-align: middle; } .hero .slick-prev, .hero .slick-next { background-color: transparent; width: 55px; height: 55px; z-index: 10; border-radius: 50%; transition: all 0.5s; top: auto; bottom: 140px; border: 1px solid #818181; } .hero .slick-prev:hover, .hero .slick-next:hover { background-color: rgba(11, 160, 138, 0.6); } @media (max-width: 991px) { .hero .slick-prev, .hero .slick-next { display: none !important; } } .hero .slick-prev { left: 45%; } .hero .slick-prev:before { font-family: "themify"; content: "\e629"; opacity: 1; font-size: 18px; } .hero .slick-next { left: 50%; } @media (max-width: 1199px) { .hero .slick-next { left: 53%; } } .hero .slick-next:before { font-family: "themify"; content: "\e628"; opacity: 1; font-size: 18px; } .hero .slick-dots { bottom: 30px; } @media screen and (min-width: 992px) { .hero .slick-dots { display: none !important; } } .hero .slick-dots li { margin: 0; } .hero .slick-dots button { background-color: #0BA08A; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; } .hero .slick-dots button:before, .hero .slick-dots button:before { display: none; } .hero .slide-caption > div { overflow: hidden; display: flex; align-items: center; } @media (max-width: 991px) { .hero .slide-caption > div { justify-content: center; } } @media (max-width: 575px) { .hero .slide-caption > div { justify-content: center; flex-direction: column; } } .hero .slide-caption > div * { animation: fadeOutLeft 1.5s both; } .hero .slide-caption > .slider-pic * { animation: fadeOutRight 1.5s both; } .hero .slide-caption > div.slide-title * { animation-delay: 0s; } .hero .slide-caption > div.slide-subtitle * { animation-delay: 0s; } .hero .slide-caption > div.btns * { animation-delay: 0s; } .hero .hero-slider-s2 .slick-current .slide-caption > div * { animation-name: fadeInLeft; } .hero .hero-slider-s2 .slick-current .slide-caption > .slider-pic * { animation-name: fadeInRight; } .hero .hero-slider-s2 .slick-current .slide-caption > div.slide-title * { animation-delay: 0.5s; } .hero .hero-slider-s2 .slick-current .slide-caption > div.slide-subtitle * { animation-delay: 1s; } .hero .hero-slider-s2 .slick-current .slide-caption > div.btns * { animation-delay: 1.5s; } .hero .hero-slider-s2 .slick-current .slide-caption > div.slider-pic * { animation-delay: 0.5s; } /************************************************ hero-style-1 **************************************************/ .hero-style-1 { height: 964px; position: relative; background: url(../images/slider/slide-bg.jpg) no-repeat center/cover; z-index: 1; } .hero-style-1::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(271deg, rgba(2, 59, 68, 0) 5.16%, rgba(8, 57, 67, 0.62) 44.31%, #0B3742 57.47%); } @media (max-width: 1199px) { .hero-style-1 { height: 750px; } } @media (max-width: 991px) { .hero-style-1 { height: 100%; } } .hero-style-1 .slide { height: 964px; } @media (max-width: 1199px) { .hero-style-1 .slide { height: 750px; } } @media (max-width: 991px) { .hero-style-1 .slide { height: 100%; padding: 170px 0 100px; } } .hero-style-1 .slide .row { position: relative; } .hero-style-1 .slide-caption { padding-top: 100px; margin-left: -10px; } @media (max-width: 1199px) { .hero-style-1 .slide-caption { margin: 0; padding-top: 40px; } } @media (max-width: 991px) { .hero-style-1 .slide-caption { text-align: center; } } .hero-style-1 .slide-caption .slide-title-sub h5 { color: #FF7236; font-family: "DM Sans"; font-size: 20px; font-weight: 600; margin-bottom: 22px; max-width: 670px; } @media (max-width: 1200px) { .hero-style-1 .slide-caption .slide-title-sub h5 { font-size: 16px; } } @media (max-width: 991px) { .hero-style-1 .slide-caption .slide-title-sub h5 { margin-bottom: 15px; } } .hero-style-1 .slide-caption h2 { color: #fff; font-size: 75px; font-weight: 800; line-height: 80px; text-transform: capitalize; margin-bottom: 26px; max-width: 670px; } @media (max-width: 1399px) { .hero-style-1 .slide-caption h2 { font-size: 65px; line-height: 70px; } } @media (max-width: 1199px) { .hero-style-1 .slide-caption h2 { font-size: 50px; line-height: 60px; } } @media (max-width: 991px) { .hero-style-1 .slide-caption h2 { font-size: 40px; line-height: 50px; } } @media (max-width: 767px) { .hero-style-1 .slide-caption h2 { font-size: 35px; } } @media (max-width: 575px) { .hero-style-1 .slide-caption h2 { font-size: 32px; } } .hero-style-1 .slide-caption p { color: #fff; font-size: 16px; font-weight: 500; margin-bottom: 40px; max-width: 630px; } @media (max-width: 1200px) { .hero-style-1 .slide-caption p { font-size: 18px; } } @media (max-width: 991px) { .hero-style-1 .slide-caption p { margin: 0 0 1.8em; } } .hero-style-1 .slider-pic { position: absolute; right: -24%; top: 58%; transform: translateY(-50%); max-width: 1197px; } @media (max-width: 1399px) { .hero-style-1 .slider-pic { right: -10%; max-width: 600px; } } @media (max-width: 1199px) { .hero-style-1 .slider-pic { display: none !important; } } @media (max-width: 1200px) { .hero-style-1 .slider-pic img { margin-left: auto; } } @media (max-width: 991px) { .hero-style-1 .slider-pic img { max-width: 50%; } } .hero-style-1 .theme-btn, .hero-style-1 .view-cart-btn { padding: 21px 55px; font-weight: 600; } @media (max-width: 991px) { .hero-style-1 .theme-btn, .hero-style-1 .view-cart-btn { padding: 15px 30px; } } @media (max-width: 575px) { .hero-style-1 .theme-btn, .hero-style-1 .view-cart-btn { padding: 12px 20px; } } .hero-style-1 .hero-btn { color: #FF7236; font-size: 18px; font-weight: 600; margin-left: 30px; } @media (max-width: 575px) { .hero-style-1 .hero-btn { margin-left: 0px; margin-top: 10px; } } .hero-style-1 .hero-btn span { text-decoration-line: underline; } .hero-style-1 .hero-btn i { font-size: 15px; } .hero-style-1 .hero-btn i:before { top: 2px; position: relative; } .hero-style-1 .shape { position: absolute; left: 0; top: 100px; } @media (max-width: 991px) { .hero-style-1 .shape { display: none; } } .hero-style-1 .shape-img { max-width: 680px; max-height: 680px; width: 100%; height: 100%; border-radius: 680px; background: linear-gradient(138deg, rgba(255, 255, 255, 0.11) 23.66%, #FF7236 91.54%); -webkit-backdrop-filter: blur(6.5px); backdrop-filter: blur(6.5px); position: absolute; z-index: -1; right: -50px; top: 57%; transform: translateY(-50%); } @media (max-width: 1399px) { .hero-style-1 .shape-img { max-width: 580px; max-height: 550px; } } @media (max-width: 1199px) { .hero-style-1 .shape-img { display: none; } } /* hero-section-s3 */ .hero-section-s3 { position: relative; height: 800px; display: flex; align-items: center; overflow: hidden; } @media (max-width: 991px) { .hero-section-s3 { height: 700px; } } @media (max-width: 767px) { .hero-section-s3 { height: 100%; padding: 100px 0; } } .hero-section-s3 .bg-image { position: absolute; left: 0; top: 0; height: 100%; z-index: -11; } .hero-section-s3 .bg-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero-section-s3 .icon { position: absolute; left: 80px; top: 190px; } @media (max-width: 991px) { .hero-section-s3 .icon { display: none; } } .hero-section-s3 .shape-1 { position: absolute; left: 0; bottom: 0; z-index: -1; } @media (max-width: 575px) { .hero-section-s3 .shape-1 { display: none; } } .hero-section-s3 .shape-2 { position: absolute; right: 0; top: 0; } @media (max-width: 1199px) { .hero-section-s3 .shape-2 { display: none; } } .hero-section-s3 .left-img { position: absolute; right: 0; top: 0; width: 45%; height: 100%; z-index: -1; } @media (max-width: 1199px) { .hero-section-s3 .left-img { display: none; } } .hero-section-s3 .left-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero-section-s3 .hero-wrap h2 { color: #FF7236; font-size: 20px; font-weight: 600; font-family: "DM Sans"; margin-bottom: 20px; } .hero-section-s3 .hero-wrap h3 { color: #000; font-size: 70px; font-weight: 800; line-height: 82px; text-transform: capitalize; margin-bottom: 20px; } @media (max-width: 1399px) { .hero-section-s3 .hero-wrap h3 { font-size: 65px; } } @media (max-width: 1199px) { .hero-section-s3 .hero-wrap h3 { font-size: 55px; } } @media (max-width: 767px) { .hero-section-s3 .hero-wrap h3 { font-size: 35px; line-height: 50px; } } .hero-section-s3 .hero-wrap h3 span { color: #0BA08A; } .hero-section-s3 .hero-wrap p { color: #332E2E; font-size: 16px; font-weight: 400; line-height: 30.8px; font-weight: "Plus Jakarta Sans"; margin-bottom: 25px; } .hero-section-s3 .hero-wrap .hero-btn { display: flex; align-items: center; } @media (max-width: 575px) { .hero-section-s3 .hero-wrap .hero-btn { flex-direction: column; align-items: start; } } .hero-section-s3 .hero-wrap .hero-btn .theme-btn, .hero-section-s3 .hero-wrap .hero-btn .view-cart-btn { background: #0BA08A; padding: 20px 36px; font-weight: 600; } @media (max-width: 575px) { .hero-section-s3 .hero-wrap .hero-btn .theme-btn, .hero-section-s3 .hero-wrap .hero-btn .view-cart-btn { padding: 15px 25px; } } .hero-section-s3 .hero-wrap .hero-btn .contact-btn { color: #081E2A; font-family: "Plus Jakarta Sans"; font-size: 17px; font-weight: 500; line-height: 29px; display: flex; align-items: center; margin-left: 40px; } @media (max-width: 575px) { .hero-section-s3 .hero-wrap .hero-btn .contact-btn { margin-left: 0; margin-top: 10px; } } .hero-section-s3 .hero-wrap .hero-btn .contact-btn i { width: 16px; height: 16px; background: #0BA08A; border-radius: 20px; margin-left: 10px; line-height: 16px; text-align: center; color: #fff; transform: rotate(270deg); } .hero-section-s3 .hero-wrap .hero-btn .contact-btn i::before { font-size: 12px; } /*-------------------------------------------------------------- 4. wpo-footer --------------------------------------------------------------*/ .wpo-site-footer, .wpo-site-footer-s2, .wpo-site-footer-s3 { position: relative; font-size: 16px; z-index: 1; } .wpo-site-footer::after, .wpo-site-footer-s2::after, .wpo-site-footer-s3::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -11; content: ""; background: linear-gradient(270deg, rgba(2, 59, 68, 0.91) 5.16%, #083943 36.3%, #0B3742 57.47%); } .wpo-site-footer .bg-image, .wpo-site-footer-s2 .bg-image, .wpo-site-footer-s3 .bg-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -11; } .wpo-site-footer .bg-image img, .wpo-site-footer-s2 .bg-image img, .wpo-site-footer-s3 .bg-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .wpo-site-footer .shape, .wpo-site-footer-s2 .shape, .wpo-site-footer-s3 .shape { position: absolute; left: 0; bottom: 0; z-index: -1; } @media (max-width: 767px) { .wpo-site-footer .shape, .wpo-site-footer-s2 .shape, .wpo-site-footer-s3 .shape { display: none; } } .wpo-site-footer .shape-1, .wpo-site-footer-s2 .shape-1, .wpo-site-footer-s3 .shape-1 { position: absolute; left: 100px; top: 200px; z-index: -1; } @media (max-width: 991px) { .wpo-site-footer .shape-1, .wpo-site-footer-s2 .shape-1, .wpo-site-footer-s3 .shape-1 { display: none; } } .wpo-site-footer .footer-map, .wpo-site-footer-s2 .footer-map, .wpo-site-footer-s3 .footer-map { max-width: 700px; max-height: 403px; position: absolute; left: 30%; top: 10%; transform: translateX(-50%); z-index: -1; } @media (max-width: 767px) { .wpo-site-footer .footer-map, .wpo-site-footer-s2 .footer-map, .wpo-site-footer-s3 .footer-map { display: none; } } .wpo-site-footer ul, .wpo-site-footer-s2 ul, .wpo-site-footer-s3 ul { list-style: none; } .wpo-site-footer p, .wpo-site-footer-s2 p, .wpo-site-footer-s3 p { color: #fff; } .wpo-site-footer li, .wpo-site-footer-s2 li, .wpo-site-footer-s3 li { color: #fff; } .wpo-site-footer .container, .wpo-site-footer-s2 .container, .wpo-site-footer-s3 .container { position: relative; } .wpo-site-footer .wpo-upper-footer, .wpo-site-footer-s2 .wpo-upper-footer, .wpo-site-footer-s3 .wpo-upper-footer { padding: 90px 0; position: relative; } @media (max-width: 991px) { .wpo-site-footer .wpo-upper-footer, .wpo-site-footer-s2 .wpo-upper-footer, .wpo-site-footer-s3 .wpo-upper-footer { padding: 50px 0 0; } } @media (max-width: 767px) { .wpo-site-footer .wpo-upper-footer, .wpo-site-footer-s2 .wpo-upper-footer, .wpo-site-footer-s3 .wpo-upper-footer { padding: 60px 0 0; } } @media (max-width: 991px) { .wpo-site-footer .wpo-upper-footer .col, .wpo-site-footer-s2 .wpo-upper-footer .col, .wpo-site-footer-s3 .wpo-upper-footer .col { min-height: 235px; margin-bottom: 70px; } } @media (max-width: 767px) { .wpo-site-footer .wpo-upper-footer .col, .wpo-site-footer-s2 .wpo-upper-footer .col, .wpo-site-footer-s3 .wpo-upper-footer .col { min-height: auto; margin-bottom: 60px; } } .wpo-site-footer .widget-title, .wpo-site-footer-s2 .widget-title, .wpo-site-footer-s3 .widget-title { margin-bottom: 35px; text-transform: capitalize; } @media (max-width: 767px) { .wpo-site-footer .widget-title, .wpo-site-footer-s2 .widget-title, .wpo-site-footer-s3 .widget-title { margin-bottom: 20px; } } .wpo-site-footer .widget-title h3, .wpo-site-footer-s2 .widget-title h3, .wpo-site-footer-s3 .widget-title h3 { color: #fff; font-size: 22px; font-weight: 600; margin-bottom: 0; } .wpo-site-footer .about-widget, .wpo-site-footer-s2 .about-widget, .wpo-site-footer-s3 .about-widget { max-width: 280px; } .wpo-site-footer .about-widget .logo, .wpo-site-footer-s2 .about-widget .logo, .wpo-site-footer-s3 .about-widget .logo { max-width: 180px; } .wpo-site-footer .about-widget p, .wpo-site-footer-s2 .about-widget p, .wpo-site-footer-s3 .about-widget p { margin-bottom: 0.8em; line-height: 1.9em; } .wpo-site-footer .about-widget p:last-child, .wpo-site-footer-s2 .about-widget p:last-child, .wpo-site-footer-s3 .about-widget p:last-child { margin-bottom: 0; } .wpo-site-footer .about-widget ul li, .wpo-site-footer-s2 .about-widget ul li, .wpo-site-footer-s3 .about-widget ul li { display: flex; color: #FFF; font-size: 18px; font-weight: 400; line-height: 34px; text-transform: capitalize; } @media (max-width: 1199px) { .wpo-site-footer .about-widget ul li, .wpo-site-footer-s2 .about-widget ul li, .wpo-site-footer-s3 .about-widget ul li { font-size: 15px; line-height: 30px; } } .wpo-site-footer .about-widget ul li .icon, .wpo-site-footer-s2 .about-widget ul li .icon, .wpo-site-footer-s3 .about-widget ul li .icon { padding-right: 10px; } @media (max-width: 1199px) { .wpo-site-footer .about-widget ul li .icon, .wpo-site-footer-s2 .about-widget ul li .icon, .wpo-site-footer-s3 .about-widget ul li .icon { padding-right: 5px; } } .wpo-site-footer .wpo-service-link-widget, .wpo-site-footer-s2 .wpo-service-link-widget, .wpo-site-footer-s3 .wpo-service-link-widget { padding-left: 70px; } .wpo-site-footer .link-widget, .wpo-site-footer-s2 .link-widget, .wpo-site-footer-s3 .link-widget { overflow: hidden; } @media screen and (min-width: 1200px) { .wpo-site-footer .link-widget, .wpo-site-footer-s2 .link-widget, .wpo-site-footer-s3 .link-widget { padding-left: 75px; } } @media (max-width: 1399px) { .wpo-site-footer .link-widget, .wpo-site-footer-s2 .link-widget, .wpo-site-footer-s3 .link-widget { padding-left: 20px; } } @media (max-width: 1199px) { .wpo-site-footer .link-widget, .wpo-site-footer-s2 .link-widget, .wpo-site-footer-s3 .link-widget { padding-left: 0; } } @media (max-width: 767px) { .wpo-site-footer .link-widget, .wpo-site-footer-s2 .link-widget, .wpo-site-footer-s3 .link-widget { max-width: 350px; } } .wpo-site-footer .link-widget ul li, .wpo-site-footer-s2 .link-widget ul li, .wpo-site-footer-s3 .link-widget ul li { position: relative; } .wpo-site-footer .link-widget ul li a, .wpo-site-footer-s2 .link-widget ul li a, .wpo-site-footer-s3 .link-widget ul li a { color: #fff; font-size: 15px; font-size: 16px; font-weight: 500; } .wpo-site-footer .link-widget ul li a::before, .wpo-site-footer-s2 .link-widget ul li a::before, .wpo-site-footer-s3 .link-widget ul li a::before { position: absolute; left: -20px; top: 0; content: "\f11b"; font-family: flaticon_logistics !important; opacity: 0; visibility: hidden; transition: all 0.2s; } .wpo-site-footer .link-widget ul li a:hover, .wpo-site-footer-s2 .link-widget ul li a:hover, .wpo-site-footer-s3 .link-widget ul li a:hover { color: #FF7236; } .wpo-site-footer .link-widget ul li a:hover::before, .wpo-site-footer-s2 .link-widget ul li a:hover::before, .wpo-site-footer-s3 .link-widget ul li a:hover::before { opacity: 1; visibility: visible; } .wpo-site-footer .link-widget ul li + li, .wpo-site-footer-s2 .link-widget ul li + li, .wpo-site-footer-s3 .link-widget ul li + li { margin-top: 20px; } .wpo-site-footer .locations-widget ul li, .wpo-site-footer-s2 .locations-widget ul li, .wpo-site-footer-s3 .locations-widget ul li { color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -0.54px; margin-bottom: 20px; } .wpo-site-footer .locations-widget ul li:nth-child(2), .wpo-site-footer-s2 .locations-widget ul li:nth-child(2), .wpo-site-footer-s3 .locations-widget ul li:nth-child(2) { color: #FF7236; font-size: 20px; font-weight: 500; margin-bottom: 10px; } .wpo-site-footer .locations-widget ul li:nth-child(3), .wpo-site-footer-s2 .locations-widget ul li:nth-child(3), .wpo-site-footer-s3 .locations-widget ul li:nth-child(3) { margin-bottom: 10px; } .wpo-site-footer .wpo-lower-footer, .wpo-site-footer-s2 .wpo-lower-footer, .wpo-site-footer-s3 .wpo-lower-footer { text-align: center; position: relative; } .wpo-site-footer .wpo-lower-footer .row, .wpo-site-footer-s2 .wpo-lower-footer .row, .wpo-site-footer-s3 .wpo-lower-footer .row { padding: 30px 0; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); } .wpo-site-footer .wpo-lower-footer .copyright, .wpo-site-footer-s2 .wpo-lower-footer .copyright, .wpo-site-footer-s3 .wpo-lower-footer .copyright { display: inline-block; font-size: 16px; font-weight: 500; margin: 0; } .wpo-site-footer .wpo-lower-footer .copyright a, .wpo-site-footer-s2 .wpo-lower-footer .copyright a, .wpo-site-footer-s3 .wpo-lower-footer .copyright a { color: #FF7236; text-decoration: none; } @media (max-width: 991px) { .wpo-site-footer .wpo-lower-footer .copyright, .wpo-site-footer-s2 .wpo-lower-footer .copyright, .wpo-site-footer-s3 .wpo-lower-footer .copyright { float: none; display: block; } } /* footer-newsletter */ .footer-newsletter { padding-top: 110px; text-align: center; } @media (max-width: 767px) { .footer-newsletter { padding-top: 90px; } } @media (max-width: 575px) { .footer-newsletter { padding-top: 80px; } } .footer-newsletter h2 { color: #EEEFFB; text-align: center; font-size: 48px; font-weight: 700; margin-bottom: 15px; } @media (max-width: 575px) { .footer-newsletter h2 { font-size: 35px; } } .footer-newsletter p { color: #FFF; font-size: 16px; font-weight: 400; } .footer-newsletter .newsletter { display: flex; align-items: center; margin-top: 30px; } @media (max-width: 400px) { .footer-newsletter .newsletter { flex-direction: column; justify-content: center; } } .footer-newsletter .newsletter .form-control { color: #696969; font-size: 16px; font-weight: 400; border-radius: 4px; background: #FFF; padding: 20px 25px; border: 0; } @media (max-width: 767px) { .footer-newsletter .newsletter .form-control { padding: 15px 20px; } } .footer-newsletter .newsletter .form-control:focus { color: #000; border-color: transparent; outline: 0; box-shadow: 0 0 0 0.25rem transparent; } .footer-newsletter .newsletter button { display: flex; width: 203px; height: 67px; padding: 20px 45px; justify-content: center; align-items: center; gap: 7px; border-radius: 6px; background: #FF7236; border: 0; margin-left: 10px; color: #FFF; font-size: 18px; font-weight: 700; } @media (max-width: 767px) { .footer-newsletter .newsletter button { width: 160px; height: 53px; padding: 15px 40px; } } @media (max-width: 400px) { .footer-newsletter .newsletter button { margin-left: 0px; margin-top: 10px; } } .footer-newsletter .newsletter button i { font-size: 14px; font-weight: 400; transform: rotate(330deg); } .wpo-site-footer-s2::after { background: linear-gradient(270deg, rgba(2, 59, 68, 0.5) 5.16%, #083943 36.3%, #0b3742 57.47%); } .wpo-site-footer-s2 .wpo-upper-footer { padding-top: 250px; } @media (max-width: 991px) { .wpo-site-footer-s2 .wpo-upper-footer { padding: 50px 0 0; } } @media (max-width: 767px) { .wpo-site-footer-s2 .wpo-upper-footer { padding: 60px 0 0; } } .wpo-site-footer-s2 .address-widget h4 { color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 40px; } .wpo-site-footer-s2 .address-widget ul li { color: #fff; font-size: 16px; font-weight: 500; line-height: 28px; display: block; } .wpo-site-footer-s2 .newsletter-widget { margin-left: -20px; max-width: 333px; padding: 35px 30px 100px 30px; background: rgba(255, 255, 255, 0.02); } @media (max-width: 1399px) { .wpo-site-footer-s2 .newsletter-widget { padding: 35px 20px 100px 20px; } } @media (max-width: 1199px) { .wpo-site-footer-s2 .newsletter-widget { padding: 35px 20px 50px 20px; } } @media (max-width: 991px) { .wpo-site-footer-s2 .newsletter-widget { margin-left: 0px; } } .wpo-site-footer-s2 .newsletter-widget .form-fild { position: relative; } .wpo-site-footer-s2 .newsletter-widget .form-fild .fild { color: #B4B4B4; font-size: 15px; font-weight: 500; line-height: 26px; position: relative; background: transparent; border: transparent; padding-top: 10px; padding-bottom: 20px; border-bottom: 1px solid rgba(237, 237, 237, 0.3); width: 100%; transition: all 0.3s ease-in-out; } .wpo-site-footer-s2 .newsletter-widget .form-fild .fild:focus-visible { outline: -webkit-focus-ring-color auto transparent; outline: 0; } .wpo-site-footer-s2 .newsletter-widget .form-fild button { position: absolute; right: 0; top: 10px; line-height: 25px; font-size: 20px; text-align: center; color: #FF7940; display: block; background: transparent; border: 1px solid transparent; transform: rotate(90deg); border-radius: 5px; transition: all 0.3s ease-in-out; } .wpo-site-footer-s2 .newsletter-widget .form-fild button i::before { line-height: 25px; font-size: 25px; } .wpo-site-footer-s2 .newsletter-widget .form-fild:hover button { color: #fff; background: #FF7940; } .wpo-site-footer-s2 .newsletter-widget ::-webkit-input-placeholder { color: #B4B4B4; } .wpo-site-footer-s2 .newsletter-widget ::-moz-placeholder { color: #B4B4B4; } .wpo-site-footer-s2 .newsletter-widget :-ms-input-placeholder { color: #B4B4B4; } .wpo-site-footer-s2 .newsletter-widget :-moz-placeholder { color: #B4B4B4; } .wpo-site-footer-s2 .newsletter-widget .terms { margin-top: 30px; } .wpo-site-footer-s2 .newsletter-widget .terms input[type=checkbox] { position: relative; cursor: pointer; } .wpo-site-footer-s2 .newsletter-widget .terms input[type=checkbox]:checked:before { content: ""; display: block; position: absolute; left: -3px; top: -3px; width: 23px; height: 23px; background-color: #fff; transition: all 0.2s linear; border-radius: 100px; } .wpo-site-footer-s2 .newsletter-widget .terms input[type=checkbox]:before { content: ""; display: block; position: absolute; left: -3px; top: -3px; width: 23px; height: 23px; background-color: #fff; border-radius: 100px; } .wpo-site-footer-s2 .newsletter-widget .terms input[type=checkbox]:after { content: ""; display: block; width: 0px; height: 0px; border: solid #fff; border-width: 0 0px 0px 0; transform: rotate(180deg); position: absolute; top: 2px; left: 5px; transition: all 0.2s linear; } .wpo-site-footer-s2 .newsletter-widget .terms input[type=checkbox]:checked:after { content: ""; display: block; width: 6px; height: 10px; border: solid #FF7236; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: 2px; left: 5px; } .wpo-site-footer-s2 .newsletter-widget .terms label { margin-bottom: 0; margin-left: 10px; color: #B4B4B4; cursor: pointer; font-size: 15px; font-weight: 500; line-height: 26px; } @media (max-width: 1399px) { .wpo-site-footer-s2 .newsletter-widget .terms label { margin-left: 5px; font-size: 13px; } } .wpo-site-footer-s2 .newsletter-widget .terms label a { color: #FF7236; } .wpo-site-footer-s2 .wpo-lower-footer .copyright { display: block; } @media (max-width: 991px) { .wpo-site-footer-s2 .wpo-lower-footer .copyright { margin: 20px 0; } } .wpo-site-footer-s2 .wpo-lower-footer .logo { text-align: left; } @media (max-width: 991px) { .wpo-site-footer-s2 .wpo-lower-footer .logo { text-align: center; } } .wpo-site-footer-s2 .wpo-lower-footer ul { text-align: right; } @media (max-width: 1199px) { .wpo-site-footer-s2 .wpo-lower-footer ul { text-align: center; } } @media (max-width: 991px) { .wpo-site-footer-s2 .wpo-lower-footer ul { text-align: center; } } .wpo-site-footer-s2 .wpo-lower-footer ul li { display: inline-block; padding: 0 4px; } @media (max-width: 1199px) { .wpo-site-footer-s2 .wpo-lower-footer ul li { padding: 0 1px; } } .wpo-site-footer-s2 .wpo-lower-footer ul li a img { border-radius: 4px; } @media (max-width: 1399px) { .wpo-site-footer-s2 .shape { display: none; } } /* wpo-site-footer-s3 */ .wpo-site-footer-s3 .footer-socialicon { border-bottom: 1px solid #1E4A57; margin-bottom: 50px; } @media (max-width: 1199px) { .wpo-site-footer-s3 .footer-socialicon { margin-bottom: 0px; } } @media (max-width: 991px) { .wpo-site-footer-s3 .footer-socialicon { border: 1px solid transparent; } } .wpo-site-footer-s3 .footer-socialicon ul { display: flex; justify-content: center; } @media (max-width: 991px) { .wpo-site-footer-s3 .footer-socialicon ul { flex-wrap: wrap; } } .wpo-site-footer-s3 .footer-socialicon ul li { max-width: 325px; width: 100%; display: flex; align-items: center; justify-content: center; height: 95px; border: 1px solid #1E4A57; } @media (max-width: 991px) { .wpo-site-footer-s3 .footer-socialicon ul li { flex-basis: 30%; } } @media (max-width: 575px) { .wpo-site-footer-s3 .footer-socialicon ul li { flex-basis: 50%; } } @media (max-width: 450px) { .wpo-site-footer-s3 .footer-socialicon ul li { flex-basis: 100%; } } .wpo-site-footer-s3 .footer-socialicon ul li i { color: #FFF; font-size: 16px; font-weight: 400; } .wpo-site-footer-s3 .footer-socialicon ul li span { color: rgba(255, 255, 255, 0.53); font-size: 20px; font-weight: 500; line-height: 49px; text-transform: lowercase; padding-left: 20px; } .wpo-site-footer-s3 .footer-socialicon ul li:last-child { border-right: 1px solid transparent; } @media (max-width: 991px) { .wpo-site-footer-s3 .footer-socialicon ul li:last-child { border-right: 1px solid #1E4A57; } } .wpo-site-footer-s3 .footer-socialicon ul li:first-child { border-left: 1px solid transparent; } @media (max-width: 991px) { .wpo-site-footer-s3 .footer-socialicon ul li:first-child { border-left: 1px solid #1E4A57; } } .wpo-site-footer-s3 .shape-right { position: absolute; right: 0; bottom: 50px; z-index: -11; } .wpo-site-footer-s3 .newsletter-s2 .form-fild { margin-top: 35px; position: relative; border-radius: 8px; background: #FFF; } .wpo-site-footer-s3 .newsletter-s2 .form-fild .fild { color: #B4B4B4; font-size: 15px; font-weight: 400; line-height: 26px; position: relative; background: transparent; border: transparent; padding: 20px 60px; padding-left: 20px; width: 100%; transition: all 0.3s ease-in-out; } @media (max-width: 1199px) { .wpo-site-footer-s3 .newsletter-s2 .form-fild .fild { padding: 18px 50px; padding-left: 20px; } } .wpo-site-footer-s3 .newsletter-s2 .form-fild .fild:focus-visible { outline: -webkit-focus-ring-color auto transparent; outline: 0; } .wpo-site-footer-s3 .newsletter-s2 .form-fild .fild::before { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); } .wpo-site-footer-s3 .newsletter-s2 .form-fild button { position: absolute; right: 10px; top: 10px; text-align: center; color: #fff; display: block; background: #FF7236; border: 1px solid transparent; border-radius: 5px; transition: all 0.3s ease-in-out; width: 49px; height: 46px; } .wpo-site-footer-s3 .newsletter-s2 .form-fild button i::before { transform: rotate(10deg); line-height: 25px; font-size: 14px; } .sticky-header { width: 100%; position: fixed; left: 0; top: -200px; z-index: 9999; opacity: 0; transition: all 0.7s; } .sticky-on { opacity: 1; top: 0; } /*3.2 wpo-about-section */ .wpo-about-section, .wpo-about-section-s4 { position: relative; padding-top: 200px; padding-bottom: 130px; } @media (max-width: 991px) { .wpo-about-section, .wpo-about-section-s4 { padding: 90px 0; } } @media (max-width: 767px) { .wpo-about-section, .wpo-about-section-s4 { padding: 80px 0; } } .wpo-about-section .about-left, .wpo-about-section-s4 .about-left { position: relative; max-width: 605px; height: 620px; margin-right: 55px; } @media (max-width: 1399px) { .wpo-about-section .about-left, .wpo-about-section-s4 .about-left { margin-right: 0; } } .wpo-about-section .about-left .image-1, .wpo-about-section-s4 .about-left .image-1 { border-radius: 7px; border: 9px solid #FFF; max-width: 404px; max-height: 500px; } .wpo-about-section .about-left .image-1 img, .wpo-about-section-s4 .about-left .image-1 img { width: 100%; } .wpo-about-section .about-left .image-2, .wpo-about-section-s4 .about-left .image-2 { border-radius: 10px; border: 8px solid #FFF; box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.17); max-width: 318px; max-height: 268px; position: absolute; right: 33px; bottom: 0; } @media (max-width: 1199px) { .wpo-about-section .about-left .image-2, .wpo-about-section-s4 .about-left .image-2 { right: 0px; } } .wpo-about-section .about-left .image-2 img, .wpo-about-section-s4 .about-left .image-2 img { width: 100%; } .wpo-about-section .about-left .image-3, .wpo-about-section-s4 .about-left .image-3 { border-radius: 9px; border: 7px solid #FFF; box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.13); position: absolute; right: 53px; top: 20px; } @media (max-width: 1199px) { .wpo-about-section .about-left .image-3, .wpo-about-section-s4 .about-left .image-3 { right: 0px; } } @media (max-width: 499px) { .wpo-about-section .about-left .image-3, .wpo-about-section-s4 .about-left .image-3 { display: none; } } .wpo-about-section .about-left .image-3 img, .wpo-about-section-s4 .about-left .image-3 img { width: 100%; } .wpo-about-section .about-left .image-4, .wpo-about-section-s4 .about-left .image-4 { position: absolute; right: -33px; bottom: -24px; z-index: -1; } .wpo-about-section .about-left .image-4 img, .wpo-about-section-s4 .about-left .image-4 img { width: 100%; } .wpo-about-section .about-left .since, .wpo-about-section-s4 .about-left .since { border-radius: 76px 0px 76px 76px; background: #0BA089; width: 254px; height: 152px; position: absolute; left: -23px; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: end; } @media (max-width: 767px) { .wpo-about-section .about-left .since, .wpo-about-section-s4 .about-left .since { height: 120px; } } @media (max-width: 399px) { .wpo-about-section .about-left .since, .wpo-about-section-s4 .about-left .since { border-radius: 0; } } .wpo-about-section .about-left .since::before, .wpo-about-section-s4 .about-left .since::before { position: absolute; left: 40px; top: 50%; content: ""; width: 2px; height: 65px; background: #FFF; transform: translateY(-50%); } .wpo-about-section .about-left .since::after, .wpo-about-section-s4 .about-left .since::after { width: 2px; height: 65px; position: absolute; left: 73px; top: 50%; content: ""; width: 2px; height: 65px; background: #FFF; transform: translateY(-50%); transform: rotate(-90deg); } .wpo-about-section .about-left .since h2, .wpo-about-section-s4 .about-left .since h2 { margin-bottom: 0; } .wpo-about-section .about-left .since h2 span, .wpo-about-section-s4 .about-left .since h2 span { font-family: "Plus Jakarta Sans"; color: #fff; font-size: 61px; font-weight: 600; line-height: 50px; text-transform: capitalize; } @media (max-width: 1199px) { .wpo-about-section .about-left .since h2 span, .wpo-about-section-s4 .about-left .since h2 span { font-size: 52px; } } @media (max-width: 767px) { .wpo-about-section .about-left .since h2 span, .wpo-about-section-s4 .about-left .since h2 span { font-size: 40px; } } .wpo-about-section .about-left .since p, .wpo-about-section-s4 .about-left .since p { color: #fff; font-size: 23px; font-weight: 700; line-height: 32px; text-transform: capitalize; display: block; margin-bottom: 0; margin-top: -5px; } .wpo-about-section .shape, .wpo-about-section-s4 .shape { position: absolute; left: 0; top: 0; z-index: -1; } @media (max-width: 767px) { .wpo-about-section .shape, .wpo-about-section-s4 .shape { display: none; } } .wpo-about-section .side-img, .wpo-about-section-s4 .side-img { position: absolute; right: 0; bottom: 90px; z-index: -1; } @media (max-width: 767px) { .wpo-about-section .side-img, .wpo-about-section-s4 .side-img { display: none; } } @media (max-width: 991px) { .wpo-about-section .about-content, .wpo-about-section-s4 .about-content { margin-top: 50px; } } .wpo-about-section .about-content .title h2, .wpo-about-section-s4 .about-content .title h2 { color: #FF7236; font-family: "DM Sans"; font-size: 16px; font-weight: 700; line-height: 30px; letter-spacing: 1.76px; text-decoration-line: underline; text-transform: uppercase; position: relative; padding-left: 20px; } .wpo-about-section .about-content .title h2::before, .wpo-about-section-s4 .about-content .title h2::before { position: absolute; left: 0; top: 45%; width: 14px; height: 16px; transform: translateY(-50%); content: url(../images/title-shape.svg); } .wpo-about-section .about-content .title h3, .wpo-about-section-s4 .about-content .title h3 { color: #042127; font-size: 48px; font-weight: 700; line-height: 55px; text-transform: capitalize; margin-bottom: 0; } @media (max-width: 991px) { .wpo-about-section .about-content .title h3, .wpo-about-section-s4 .about-content .title h3 { font-size: 40px; line-height: 50px; } } @media (max-width: 499px) { .wpo-about-section .about-content .title h3, .wpo-about-section-s4 .about-content .title h3 { font-size: 35px; line-height: 40px; } } .wpo-about-section .about-content .sub-content, .wpo-about-section-s4 .about-content .sub-content { margin-top: 37px; margin-bottom: 25px; } .wpo-about-section .about-content .sub-content span, .wpo-about-section-s4 .about-content .sub-content span { color: #535353; font-size: 16px; font-weight: 400; line-height: 28.8px; padding-left: 10px; display: block; border-left: 1px solid #FF7236; } .wpo-about-section .about-content h4, .wpo-about-section-s4 .about-content h4 { color: #20273C; font-size: 18px; font-weight: 700; line-height: 33px; text-transform: capitalize; margin-bottom: 30px; } .wpo-about-section .about-content ul li, .wpo-about-section-s4 .about-content ul li { color: #20273C; font-size: 16px; font-weight: 500; line-height: 33px; text-transform: capitalize; padding-left: 30px; position: relative; margin-bottom: 8px; } .wpo-about-section .about-content ul li:last-child, .wpo-about-section-s4 .about-content ul li:last-child { margin-bottom: 0; } .wpo-about-section .about-content ul li::before, .wpo-about-section-s4 .about-content ul li::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: flaticon_logistics !important; content: "\f126"; font-size: 14px; color: rgb(11, 160, 137); width: 18px; height: 18px; text-align: center; line-height: 18px; border-radius: 100px; border: 1px solid rgb(11, 160, 137); } .wpo-about-section .about-content .author-btn, .wpo-about-section-s4 .about-content .author-btn { max-width: 490px; display: flex; align-items: center; justify-content: space-between; margin-top: 60px; } @media (max-width: 399px) { .wpo-about-section .about-content .author-btn, .wpo-about-section-s4 .about-content .author-btn { display: block; margin-top: 40px; } } .wpo-about-section .about-content .author, .wpo-about-section-s4 .about-content .author { display: flex; align-items: center; justify-content: center; } @media (max-width: 399px) { .wpo-about-section .about-content .author, .wpo-about-section-s4 .about-content .author { justify-content: start; } } .wpo-about-section .about-content .author .image, .wpo-about-section-s4 .about-content .author .image { width: 60px; height: 60px; } .wpo-about-section .about-content .author .image img, .wpo-about-section-s4 .about-content .author .image img { border-radius: 60px; border: 4px solid #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); width: 100%; } .wpo-about-section .about-content .author .text, .wpo-about-section-s4 .about-content .author .text { margin-left: 10px; display: grid; } .wpo-about-section .about-content .author .text span, .wpo-about-section-s4 .about-content .author .text span { margin-top: -10px; color: #0BA089; font-size: 14px; font-weight: 500; line-height: 30px; } .wpo-about-section .about-content .theme-btn, .wpo-about-section .about-content .view-cart-btn, .wpo-about-section-s4 .about-content .theme-btn, .wpo-about-section-s4 .about-content .view-cart-btn { background: #0B3742; } @media (max-width: 399px) { .wpo-about-section .about-content .theme-btn, .wpo-about-section .about-content .view-cart-btn, .wpo-about-section-s4 .about-content .theme-btn, .wpo-about-section-s4 .about-content .view-cart-btn { margin-top: 20px; } } .wpo-about-section-s4 { padding: 120px 0; } @media (max-width: 991px) { .wpo-about-section-s4 { padding: 90px 0; } } /*3.3 wpo-service-section */ .wpo-service-section { position: relative; z-index: 1; background: #FFF5F0; } .wpo-service-section .wpo-section-title { text-align: left; max-width: 585px; } @media (max-width: 991px) { .wpo-service-section .wpo-section-title { margin-bottom: 20px; } } @media (max-width: 1199px) { .wpo-service-section .wpo-section-title h3 { font-size: 40px; } } @media (max-width: 767px) { .wpo-service-section .wpo-section-title h3 { font-size: 32px; line-height: 40px; } } @media (max-width: 330px) { .wpo-service-section .wpo-section-title h3 { font-size: 30px; } } .wpo-service-section .service-all-btn { text-align: end; margin-bottom: 60px; } @media (max-width: 991px) { .wpo-service-section .service-all-btn { text-align: left; } } .service-slider { padding: 0 70px; } @media (max-width: 1599px) { .service-slider { padding: 0 20px; } } @media (max-width: 575px) { .service-slider { padding: 0 10px; } } .service-slider .owl-nav { display: none; } .service-slider .owl-dots { text-align: center; margin-top: 50px; } .service-slider .owl-dot { height: 7px; width: 65px; border: 0; border-radius: 100px; color: #0B3742; margin: 0 5px; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.06); transition: all 0.3s ease-in-out; overflow: hidden; position: relative; } @media (max-width: 767px) { .service-slider .owl-dot { width: 30px; } } .service-slider .owl-dot.active { background: #0B3742; } .service-card { position: relative; z-index: 1; overflow: hidden; } .service-card::before { position: absolute; right: 0; top: 0; width: 0; height: 100%; content: ""; background: radial-gradient(272.74% 97.55% at 66.64% 8.36%, rgba(0, 7, 31, 0) 0%, rgba(4, 43, 51, 0.91) 99.98%, rgba(4, 43, 51, 0.91) 99.99%); transition: all 0.4s ease-in-out; z-index: 1; } .service-card .image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: relative; z-index: -1; } .service-card .content { position: absolute; left: 0; top: 0; max-width: 340px; height: 100%; display: flex; z-index: 11; flex-direction: column; justify-content: space-around; padding-left: 40px; padding-right: 60px; overflow: hidden; } @media (max-width: 991px) { .service-card .content { padding-left: 30px; padding-right: 30px; max-width: 330px; } } @media (max-width: 767px) { .service-card .content { justify-content: center; } } @media (max-width: 575px) { .service-card .content { padding-left: 10px; padding-right: 10px; } } .service-card .content::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #fff; transition: all 1.5s ease-in-out; z-index: -1; } .service-card .content i { color: #0B3742; font-size: 78px; transition: all 1.5s ease-in-out; } @media (max-width: 991px) { .service-card .content i { font-size: 50px; } } @media (max-width: 575px) { .service-card .content i { font-size: 40px; } } .service-card .content .text span { color: #0BA089; font-size: 22px; font-weight: 700; line-height: 30px; letter-spacing: -0.66px; display: inline-block; margin-bottom: 10px; } @media (max-width: 991px) { .service-card .content .text span { margin-bottom: 0; } } .service-card .content .text h2 { margin-bottom: 20px; } @media (max-width: 991px) { .service-card .content .text h2 { margin-bottom: 10px; } } .service-card .content .text h2 a { color: #222; font-family: "Plus Jakarta Sans"; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.72px; text-transform: capitalize; transition: all 1.5s ease-in-out; } .service-card .content .text p { color: #5E5F63; font-size: 16px; font-weight: 400; line-height: 26px; transition: all 1.5s ease-in-out; } .service-card .content .text .service-single-link { width: 76px; height: 47px; line-height: 47px; border-radius: 23.5px; background: #F6F2ED; display: block; text-align: center; margin-top: 30px; } @media (max-width: 575px) { .service-card .content .text .service-single-link { margin-top: 0px; width: 50px; height: 30px; line-height: 47px; } } .service-card .content .text .service-single-link i { transform: rotate(-40deg); color: #222; font-size: 16px; font-weight: 400; line-height: 45px; position: absolute; left: 70px; } @media (max-width: 991px) { .service-card .content .text .service-single-link i { left: 60px; line-height: 45px; } } @media (max-width: 575px) { .service-card .content .text .service-single-link i { left: 28px; font-size: 13px; line-height: 32px; } } .service-card:hover::before { width: 100%; } .service-card:hover .content i { opacity: 0; visibility: hidden; } .service-card:hover .content::before { width: 0; } .service-card:hover .content .text h2 a { color: #fff; } .service-card:hover .content .text p { color: #C2C2C2; } .service-card:hover .content .text .service-single-link i { opacity: 1; visibility: visible; } /*3.4 wpo-funfact-section */ .wpo-funfact-section { padding-bottom: 90px; } @media (max-width: 991px) { .wpo-funfact-section { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-funfact-section { padding-bottom: 50px; } } .wpo-funfact-section .titel-image { text-align: center; margin-bottom: 65px; } @media (max-width: 767px) { .wpo-funfact-section .titel-image { margin-bottom: 40px; } } .wpo-funfact-section .titel-image h1 { background: url(../images/text-img.jpg) center/cover no-repeat; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Plus Jakarta Sans"; font-size: 200px; font-weight: 700; margin-bottom: 0; padding-bottom: 60px; margin-top: -20px; } @media (max-width: 1199px) { .wpo-funfact-section .titel-image h1 { font-size: 150px; } } @media (max-width: 767px) { .wpo-funfact-section .titel-image h1 { font-size: 100px; padding-bottom: 20px; } } @media (max-width: 499px) { .wpo-funfact-section .titel-image h1 { font-size: 50px; padding-bottom: 20px; } } .wpo-funfact-section .titel-image h3 { color: #0D1224; font-size: 23px; font-weight: 700; line-height: 24px; margin-bottom: 0; } @media (max-width: 767px) { .wpo-funfact-section .titel-image h3 { font-size: 18px; line-height: 20px; } } @media (max-width: 499px) { .wpo-funfact-section .titel-image h3 { font-size: 15px; } } .wpo-funfact-section .item { text-align: center; margin-bottom: 30px; } .wpo-funfact-section .item h2 { color: #0B3742; font-family: "Plus Jakarta Sans"; font-size: 50px; font-weight: 700; line-height: 48px; letter-spacing: -1px; max-width: 286px; height: 100px; line-height: 100px; border-radius: 100px; background: linear-gradient(107deg, rgba(11, 55, 66, 0.12) 38.02%, rgba(28, 140, 168, 0) 89.08%); margin: 0 auto; } @media (max-width: 1199px) { .wpo-funfact-section .item h2 { font-size: 35px; } } .wpo-funfact-section .item h3 { color: #0D1224; font-size: 16px; font-weight: 700; line-height: 24px; margin-top: 30px; margin-bottom: 0; } @media (max-width: 767px) { .wpo-funfact-section .item h3 { margin-top: 15px; } } /*3.5 wpo-get-quate-section */ .wpo-get-quate-section { position: relative; } .wpo-get-quate-section::before { position: absolute; content: ""; top: 0; right: 0; width: 100%; height: 100%; background: #EBEBEB; z-index: -1; } .wpo-get-quate-section .left-content { text-align: left; } @media (max-width: 991px) { .wpo-get-quate-section .left-content { margin-bottom: 50px; } } .wpo-get-quate-section .left-content .wpo-section-title { text-align: left; margin-bottom: 40px; } .wpo-get-quate-section .left-content .wpo-section-title h3 { color: #FFF; } @media (max-width: 1199px) { .wpo-get-quate-section .left-content .wpo-section-title h3 { font-size: 40px; } } @media (max-width: 767px) { .wpo-get-quate-section .left-content .wpo-section-title h3 { font-size: 32px; line-height: 40px; } } @media (max-width: 399px) { .wpo-get-quate-section .left-content .wpo-section-title h3 { font-size: 25px; } } .wpo-get-quate-section .left-content .quat { max-width: 514px; border-radius: 0 5px 5px 0; background: #0B3D47; border-left: 2px solid #FF7D44; position: relative; padding: 20px 55px 20px 35px; margin-bottom: 45px; } @media (max-width: 1199px) { .wpo-get-quate-section .left-content .quat { padding: 20px 30px 20px 25px; } } .wpo-get-quate-section .left-content .quat::before { position: absolute; content: ""; width: 9px; height: 10px; left: 0; top: 50%; background: #FF7D44; transform: translateY(-50%); -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%); clip-path: polygon(0 0, 0% 100%, 100% 50%); } .wpo-get-quate-section .left-content .quat p { margin-bottom: 0; color: #FFF; font-size: 16px; font-weight: 500; line-height: 30px; } .wpo-get-quate-section .left-content .get-item { display: flex; align-items: center; justify-content: space-between; max-width: 500px; } .wpo-get-quate-section .left-content .get-item li { display: flex; align-items: center; margin-bottom: 20px; } @media (max-width: 767px) { .wpo-get-quate-section .left-content .get-item li { flex-direction: column; max-width: 200px; } } .wpo-get-quate-section .left-content .get-item li i { font-size: 50px; line-height: 35px; color: #FF7236; } .wpo-get-quate-section .left-content .get-item li h3 { color: #fff; font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: -0.54px; margin-bottom: 0; margin-left: 12px; } @media (max-width: 1199px) { .wpo-get-quate-section .left-content .get-item li h3 { font-size: 15px; line-height: 24px; } } @media (max-width: 767px) { .wpo-get-quate-section .left-content .get-item li h3 { margin-left: 0px; margin-top: 20px; text-align: center; } } .wpo-get-quate-section .left-content .quate-item { display: flex; align-items: center; justify-content: space-between; max-width: 500px; margin-top: 10px; } @media (max-width: 767px) { .wpo-get-quate-section .left-content .quate-item { display: block; } } .wpo-get-quate-section .left-content .quate-item li { display: flex; align-items: center; margin-bottom: 20px; } @media (max-width: 767px) { .wpo-get-quate-section .left-content .quate-item li { margin-bottom: 10px; } } .wpo-get-quate-section .left-content .quate-item li i { font-size: 25px; line-height: 15px; color: #FF7236; } @media (max-width: 767px) { .wpo-get-quate-section .left-content .quate-item li i { font-size: 20px; line-height: 15px; } } .wpo-get-quate-section .left-content .quate-item li h3 { color: #fff; font-size: 18px; font-weight: 500; line-height: 30px; margin-bottom: 0; margin-left: 12px; } @media (max-width: 1199px) { .wpo-get-quate-section .left-content .quate-item li h3 { font-size: 15px; line-height: 22px; } } .wpo-get-quate-section .left-content .theme-btn, .wpo-get-quate-section .left-content .view-cart-btn { margin-top: 30px; } .wpo-get-quate-section .left-bg { position: absolute; left: 0; top: 0; height: 100%; width: 60%; background: rgb(7, 46, 54); z-index: -1; } @media (max-width: 991px) { .wpo-get-quate-section .left-bg { width: 100%; } } .wpo-get-quate-section .left-bg .img1 { position: absolute; left: 0; bottom: 0; z-index: -1; } @media (max-width: 1199px) { .wpo-get-quate-section .left-bg .img1 { display: none; } } .wpo-get-quate-section .left-bg .img2 { position: absolute; left: 0; top: 0; z-index: -11; } .wpo-get-quate-section .left-bg .img3 { position: absolute; right: 0; bottom: 0; z-index: -11; } .wpo-get-quate-section .rigth-bg { position: absolute; right: 0; bottom: 0; z-index: -1; } @media (max-width: 1199px) { .wpo-get-quate-section .rigth-bg { width: 40%; } } @media (max-width: 991px) { .wpo-get-quate-section .rigth-bg { display: none; } } .quote-form { margin-left: 45px; border-radius: 9px; border: 13px solid #FFF; background: #FF7236; max-width: 485px; padding: 60px 45px; } @media (max-width: 1199px) { .quote-form { margin: 0; } } @media (max-width: 991px) { .quote-form { border: 7px solid #FFF; } } @media (max-width: 575px) { .quote-form { padding: 40px 20px; } } @media (max-width: 399px) { .quote-form { padding: 40px 10px; } } .quote-form .title { margin-bottom: 20px; } .quote-form .title h3 { color: #fff; font-size: 30px; font-weight: 700; line-height: 30px; margin-bottom: 0; } @media (max-width: 399px) { .quote-form .title h3 { font-size: 20px; } } .quote-form label { color: #fff; font-size: 14px; font-weight: 700; line-height: 25px; margin-bottom: 7px; } .quote-form .form-control { border-radius: 6px; color: #000; font-size: 14px; font-weight: 500; font-family: "Plus Jakarta Sans"; line-height: 30px; padding: 8px 20px; border: 0; margin-bottom: 20px; position: relative; } .quote-form .form-control:focus { color: #000; border: 0; border-color: transparent; outline: 0; box-shadow: 0 0 0 0.25rem transparent; } .quote-form .form-control::-webkit-input-placeholder { color: #000; } .quote-form .form-control::-moz-placeholder { color: #000; } .quote-form .form-control::-moz-placeholder { color: #000; } .quote-form .form-control::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #fff; border-radius: 6px; } .quote-form select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ""; display: inline-block; color: #a9a9a9; cursor: pointer; opacity: 1; -webkit-appearance: none; -o-appearance: none; appearance: none; -moz-appearance: none; background: transparent url(../images/down-arrow.svg) no-repeat calc(100% - 15px) center; position: relative; z-index: 1; background-color: #fff; } .quote-form ul { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; } @media (max-width: 399px) { .quote-form ul { display: block; } } .quote-form ul li { margin-bottom: 20px; } .quote-form ul li input[type=checkbox] { position: relative; cursor: pointer; } .quote-form ul li input[type=checkbox]:checked:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 1px; background-color: #0B3742; transition: all 0.2s linear; } .quote-form ul li input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 1px; background-color: #FF7236; } .quote-form ul li input[type=checkbox]:after { content: ""; display: block; width: 0px; height: 0px; border: solid #fff; border-width: 0 0px 0px 0; transform: rotate(180deg); position: absolute; top: 0px; left: 7px; transition: all 0.2s linear; } .quote-form ul li input[type=checkbox]:checked:after { content: ""; display: block; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: 4px; left: 7px; } .quote-form ul li label { margin-bottom: 0; margin-left: 10px; color: #FFF; cursor: pointer; } .quote-form .theme-btn, .quote-form .view-cart-btn { margin-top: 24px; width: 100%; background: #0B3742; border-radius: 8px; border: 0; padding: 19px 0; } /*3.6 wpo-features-section */ .wpo-features-section h4 { text-align: center; color: #1D1729; font-size: 20px; font-weight: 500; line-height: 36px; text-transform: lowercase; margin-bottom: 0; margin-top: 30px; } .wpo-features-section h4 a { color: #072E36; text-decoration-line: underline; text-transform: lowercase; display: inline-block; } .wpo-features-section h4 a span { width: 29px; height: 29px; line-height: 29px; border-radius: 29px; text-align: center; background: #FFF; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06); margin-left: 12px; text-decoration-line: none; display: inline-block; } .features-wrap { display: flex; align-items: center; justify-content: center; } @media (max-width: 1199px) { .features-wrap { flex-wrap: wrap; } } .features-card { text-align: center; width: 20%; max-height: 280px; display: flex; flex-direction: column; justify-content: center; border-radius: 8px; border: 1px solid #EDEEEE; background: #FFF; box-shadow: 0px 9px 29px 0px rgba(0, 0, 0, 0.04); padding: 50px 15px; transition: all 0.3s ease-in-out; margin: 0 10px; margin-bottom: 20px; } @media (max-width: 1199px) { .features-card { width: 25%; } } @media (max-width: 991px) { .features-card { width: 30%; } } @media (max-width: 767px) { .features-card { width: 45%; } } @media (max-width: 575px) { .features-card { width: 100%; } } .features-card i { font-size: 80px; color: #072E36; transition: all 0.3s ease-in-out; } @media (max-width: 1399px) { .features-card i { font-size: 60px; } } .features-card h3 { color: #1D1729; font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: -0.2px; text-transform: capitalize; transition: all 0.3s ease-in-out; margin-bottom: 0; } @media (max-width: 1399px) { .features-card h3 { font-size: 18px; } } .features-card:hover { background: #072E36; border: 1px solid transparent; box-shadow: 0px 9px 29px 0px transparent; } .features-card:hover i { color: #fff; } .features-card:hover h3 { color: #fff; } /*3.7 wpo-process-section */ .wpo-process-section { background: url(../images/process-bg.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 1; padding-bottom: 90px; } @media (max-width: 991px) { .wpo-process-section { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-process-section { padding-bottom: 50px; } } .wpo-process-section::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; background: linear-gradient(98deg, rgba(7, 46, 54, 0.92) 27.49%, rgba(7, 46, 54, 0.92) 27.5%, rgba(7, 46, 54, 0.92) 90.05%); } .wpo-process-section .process-wrap { position: relative; } .wpo-process-section .process-wrap .border-shape { position: absolute; left: 9%; top: 20%; width: 100%; } @media (max-width: 991px) { .wpo-process-section .process-wrap .border-shape { display: none; } } .wpo-process-section .process-item { margin-bottom: 30px; } .wpo-process-section .process-item .top-contnent { width: 190px; height: 190px; box-shadow: 0px 8px 23px rgba(0, 0, 0, 0.07); border-radius: 100%; position: relative; margin: 0 auto; text-align: center; z-index: 1; transition: all 0.3s ease-in-out; } .wpo-process-section .process-item .top-contnent img { border-radius: 100%; padding: 5px; } .wpo-process-section .process-item .top-contnent .item-shape { position: absolute; left: 39%; top: 37%; width: 145%; height: 100%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .wpo-process-section .process-item .top-contnent .item-shape img { width: 100%; } .wpo-process-section .process-item .top-contnent .text { position: absolute; left: 16px; bottom: 12px; z-index: 1; width: 170px; height: 60px; background: #0BA08A; margin: 0 auto; -webkit-clip-path: polygon(0 0, 100% 19%, 95% 100%, 10% 100%); clip-path: polygon(0 0, 100% 19%, 95% 100%, 10% 100%); transform: rotate(2deg); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; } .wpo-process-section .process-item .top-contnent .text span { color: #FFF; text-align: center; font-size: 22px; font-weight: 700; text-transform: capitalize; transition: all 0.3s ease-in-out; } .wpo-process-section .process-item .top-contnent .shape-1 { position: absolute; left: 8px; bottom: -12px; width: 100%; transform: rotate(13deg); } .wpo-process-section .process-item .top-contnent .shape-2 { position: absolute; right: 14px; bottom: 0px; transform: rotate(13deg); } .wpo-process-section .process-item .top-contnent .shape-2 svg path { fill: #373940; transition: all 0.3s ease-in-out; } .wpo-process-section .process-item .content { text-align: center; max-width: 220px; margin: 0 auto; margin-top: 30px; } .wpo-process-section .process-item .content h2 { color: #fff; font-size: 22px; font-weight: 700; text-transform: capitalize; } .wpo-process-section .process-item .content p { color: #C2C2C2; font-size: 15px; font-weight: 400; line-height: 25px; margin-bottom: 0; } .wpo-process-section .process-item:hover .top-contnent .item-shape { opacity: 1; visibility: visible; } .wpo-process-section .process-item:hover .top-contnent .text { background: #FF7236; } .wpo-process-section .process-item:hover .top-contnent .shape-2 svg path { fill: #FF7236; } /*3.8 wpo-process-section */ .wpo-project-section { position: relative; z-index: 1; background: #FFF5F0; padding-bottom: 90px; } @media (max-width: 991px) { .wpo-project-section { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-project-section { padding-bottom: 50px; } } .wpo-project-section::before { position: absolute; right: 0; top: 0; content: ""; height: 100%; width: 30%; background: #0BA08A; z-index: -1; } @media (max-width: 991px) { .wpo-project-section::before { height: 40%; width: 100%; top: auto; bottom: 0; } } .wpo-project-section .row.align-items-center { margin-bottom: 60px; } @media (max-width: 991px) { .wpo-project-section .row.align-items-center { margin-bottom: 40px; } } .wpo-project-section .wpo-section-title { margin-bottom: 0; text-align: left; max-width: 615px; } @media (max-width: 991px) { .wpo-project-section .wpo-section-title { text-align: center; margin-bottom: 20px; max-width: 100%; } } .wpo-project-section .project-all { text-align: right; } @media (max-width: 991px) { .wpo-project-section .project-all { text-align: center; } } .wpo-project-section .project-all .theme-btn, .wpo-project-section .project-all .view-cart-btn { background: #fff; color: #000; } .wpo-project-section .project-all .theme-btn::before, .wpo-project-section .project-all .view-cart-btn::before { background-color: #FF7236; } .wpo-project-section .project-all .theme-btn:after, .wpo-project-section .project-all .view-cart-btn:after { background-color: #FF7236; } .wpo-project-section .project-all .theme-btn:hover, .wpo-project-section .project-all .view-cart-btn:hover { color: #fff; } .wpo-project-section .side-img { position: absolute; left: 0; bottom: 0; z-index: -1; } @media (max-width: 991px) { .wpo-project-section .side-img { display: none; } } .project-slider { margin-right: -220px; } @media (max-width: 1799px) { .project-slider { margin-right: -150px; } } @media (max-width: 1659px) { .project-slider { margin-right: -100px; } } @media (max-width: 1499px) { .project-slider { margin-right: -50px; } } @media (max-width: 1399px) { .project-slider { margin-right: 0px; } } .project-card { position: relative; z-index: 1; overflow: hidden; border-radius: 16px; margin-bottom: 30px; } .project-card::before { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, rgba(6, 45, 53, 0) 0%, rgba(6, 45, 53, 0) 64.33%, #062D35 100%); z-index: 1; } .project-card span { color: #FFF; text-align: center; font-family: "Plus Jakarta Sans"; font-size: 14px; font-weight: 700; text-transform: capitalize; display: inline-block; position: absolute; right: 10px; top: 10px; z-index: 1; border-radius: 13px; background: #FF7236; width: 43px; height: 27px; line-height: 27px; } .project-card img { width: 100%; transition: all 0.8s ease-in-out; transform: scale(1); } .project-card:hover img { transform: scale(1.2); } .project-card .content { position: absolute; left: 20px; bottom: 25px; z-index: 11; } .project-card .content h2 { margin-bottom: 0; } .project-card .content h2 a { background: #042127; color: #fff; max-width: 233px; padding: 10px 16px; font-family: "Plus Jakarta Sans"; font-size: 16px; font-weight: 600; text-transform: capitalize; display: inline-block; } .project-card .content h4 { background: #FF7236; color: #1D1729; padding: 8px 16px; font-family: "Plus Jakarta Sans"; text-transform: capitalize; display: inline-block; font-size: 15px; font-weight: 500; text-transform: capitalize; } /*3.9 wpo-testimonial-section */ .wpo-testimonial-section, .wpo-testimonial-section-s2 { padding-bottom: 0; } .wpo-testimonial-section .testimonial-wrap, .wpo-testimonial-section-s2 .testimonial-wrap { background: #FFF; box-shadow: 0px 4px 31px 0px rgba(0, 0, 0, 0.1); padding: 65px 70px 65px 50px; display: flex; align-items: center; } @media (max-width: 1399px) { .wpo-testimonial-section .testimonial-wrap, .wpo-testimonial-section-s2 .testimonial-wrap { padding: 40px 30px 40px 30px; } } @media (max-width: 991px) { .wpo-testimonial-section .testimonial-wrap, .wpo-testimonial-section-s2 .testimonial-wrap { display: block; } } @media (max-width: 575px) { .wpo-testimonial-section .testimonial-wrap, .wpo-testimonial-section-s2 .testimonial-wrap { padding: 20px; } } .wpo-testimonial-section .image, .wpo-testimonial-section-s2 .image { max-width: 428px; max-height: 519px; width: 428px; display: inline-block; } @media (max-width: 767px) { .wpo-testimonial-section .image, .wpo-testimonial-section-s2 .image { width: 100%; } } .wpo-testimonial-section .image .item, .wpo-testimonial-section-s2 .image .item { position: relative; } .wpo-testimonial-section .image .item img, .wpo-testimonial-section-s2 .image .item img { width: 100%; -o-object-fit: cover; object-fit: cover; } .wpo-testimonial-section .image .feedback, .wpo-testimonial-section-s2 .image .feedback { padding: 15px 24px; background: #FF7236; text-align: center; color: #FFF; font-size: 20px; font-weight: 600; line-height: 29px; display: inline-block; position: absolute; left: -66px; bottom: 135px; transform: rotate(270deg); display: flex; } @media (max-width: 575px) { .wpo-testimonial-section .image .feedback, .wpo-testimonial-section-s2 .image .feedback { display: none; } } .wpo-testimonial-section .image .feedback img, .wpo-testimonial-section-s2 .image .feedback img { margin-right: 15px; } .wpo-testimonial-section .content-wrap, .wpo-testimonial-section-s2 .content-wrap { width: calc(100% - 435px); display: inline-block; padding-left: 95px; text-align: left; } @media (max-width: 1399px) { .wpo-testimonial-section .content-wrap, .wpo-testimonial-section-s2 .content-wrap { padding-left: 30px; } } @media (max-width: 991px) { .wpo-testimonial-section .content-wrap, .wpo-testimonial-section-s2 .content-wrap { padding-left: 0px; width: 100%; margin-top: 30px; } } .wpo-testimonial-section .content-wrap h2, .wpo-testimonial-section-s2 .content-wrap h2 { color: #FF7236; font-family: "DM Sans"; font-size: 16px; font-weight: 700; line-height: 30px; letter-spacing: 1.76px; text-decoration-line: underline; text-transform: uppercase; position: relative; padding-left: 20px; display: inline-block; } @media (max-width: 1399px) { .wpo-testimonial-section .content-wrap h2, .wpo-testimonial-section-s2 .content-wrap h2 { font-size: 16px; font-weight: 700; line-height: 30px; } } @media (max-width: 767px) { .wpo-testimonial-section .content-wrap h2, .wpo-testimonial-section-s2 .content-wrap h2 { font-size: 13px; } } .wpo-testimonial-section .content-wrap h2::before, .wpo-testimonial-section-s2 .content-wrap h2::before { position: absolute; left: 0; top: 45%; width: 14px; height: 16px; transform: translateY(-50%); content: url(../images/title-shape.svg); } .wpo-testimonial-section .content-wrap h3, .wpo-testimonial-section-s2 .content-wrap h3 { text-transform: capitalize; color: #042127; font-family: "Plus Jakarta Sans"; font-size: 48px; font-weight: 700; line-height: 55px; margin-bottom: 50px; } @media (max-width: 1199px) { .wpo-testimonial-section .content-wrap h3, .wpo-testimonial-section-s2 .content-wrap h3 { font-size: 32px; line-height: 40px; margin-bottom: 30px; } } @media (max-width: 575px) { .wpo-testimonial-section .content-wrap h3, .wpo-testimonial-section-s2 .content-wrap h3 { font-size: 30px; margin-bottom: 10px; } } @media (max-width: 575px) { .wpo-testimonial-section .content, .wpo-testimonial-section-s2 .content { padding-bottom: 50px; } } .wpo-testimonial-section .content p, .wpo-testimonial-section-s2 .content p { color: #222; font-size: 30px; font-weight: 500; line-height: 52px; letter-spacing: -0.9px; margin-bottom: 35px; } @media (max-width: 1399px) { .wpo-testimonial-section .content p, .wpo-testimonial-section-s2 .content p { font-size: 25px; line-height: 40px; } } @media (max-width: 575px) { .wpo-testimonial-section .content p, .wpo-testimonial-section-s2 .content p { font-size: 20px; line-height: 30px; } } .wpo-testimonial-section .content .client-name, .wpo-testimonial-section-s2 .content .client-name { border-top: 1px solid rgba(24, 24, 94, 0.1); padding-top: 40px; } .wpo-testimonial-section .content .client-name h4, .wpo-testimonial-section-s2 .content .client-name h4 { color: #222; font-family: "DM Sans"; font-size: 22px; font-weight: 700; line-height: 30px; letter-spacing: -0.66px; margin: 0; display: inline; } .wpo-testimonial-section .content .client-name span, .wpo-testimonial-section-s2 .content .client-name span { display: inline; color: #696969; font-size: 14px; font-weight: 400; } .wpo-testimonial-section .slick-arrow, .wpo-testimonial-section-s2 .slick-arrow { position: absolute; top: auto; left: auto; right: 0; bottom: -30px; width: 50px; height: 50px; border-radius: 100px; background: #F1F1F1; transition: all 0.3s ease-in-out; z-index: 1; } .wpo-testimonial-section .slick-arrow.slick-prev, .wpo-testimonial-section .slick-arrow.slick-next, .wpo-testimonial-section-s2 .slick-arrow.slick-prev, .wpo-testimonial-section-s2 .slick-arrow.slick-next { right: 80px; } .wpo-testimonial-section .slick-arrow.slick-prev::after, .wpo-testimonial-section .slick-arrow.slick-next::after, .wpo-testimonial-section-s2 .slick-arrow.slick-prev::after, .wpo-testimonial-section-s2 .slick-arrow.slick-next::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: "\f125"; font-family: flaticon_logistics !important; font-size: 15px; color: rgb(8, 17, 45); transition: all 0.3s ease-in-out; } .wpo-testimonial-section .slick-arrow.slick-prev::before, .wpo-testimonial-section .slick-arrow.slick-next::before, .wpo-testimonial-section-s2 .slick-arrow.slick-prev::before, .wpo-testimonial-section-s2 .slick-arrow.slick-next::before { display: none; } .wpo-testimonial-section .slick-arrow.slick-next, .wpo-testimonial-section-s2 .slick-arrow.slick-next { right: 0; } .wpo-testimonial-section .slick-arrow.slick-next::after, .wpo-testimonial-section-s2 .slick-arrow.slick-next::after { content: "\f124"; } .wpo-testimonial-section .slick-arrow.slick-next::before, .wpo-testimonial-section-s2 .slick-arrow.slick-next::before { display: none; } .wpo-testimonial-section .slick-arrow:hover, .wpo-testimonial-section-s2 .slick-arrow:hover { background: rgb(6, 45, 53); } .wpo-testimonial-section .slick-arrow:hover::after, .wpo-testimonial-section-s2 .slick-arrow:hover::after { color: #fff; } /*3.10 wpo-partner-section */ .wpo-partner-section .partner-grids, .wpo-partner-section-s2 .partner-grids, .wpo-partner-section-s3 .partner-grids { display: flex; flex-wrap: wrap; } .wpo-partner-section .grid, .wpo-partner-section-s2 .grid, .wpo-partner-section-s3 .grid { text-align: center; display: flex; justify-content: center; flex-direction: column; } @media (max-width: 767px) { .wpo-partner-section .grid, .wpo-partner-section-s2 .grid, .wpo-partner-section-s3 .grid { flex-basis: 50%; } } @media (max-width: 440px) { .wpo-partner-section .grid, .wpo-partner-section-s2 .grid, .wpo-partner-section-s3 .grid { flex-basis: 50%; } } .wpo-partner-section .grid img, .wpo-partner-section-s2 .grid img, .wpo-partner-section-s3 .grid img { display: inline-block; max-width: 70%; margin: 0 auto; width: 142px; height: 45px; } @media (max-width: 991px) { .wpo-partner-section .grid img, .wpo-partner-section-s2 .grid img, .wpo-partner-section-s3 .grid img { width: 100%; } } .wpo-partner-section .owl-nav, .wpo-partner-section-s2 .owl-nav, .wpo-partner-section-s3 .owl-nav { display: none; } /*3.11 wpo-cta-section */ .wpo-cta-section, .wpo-cta-section-s2, .wpo-cta-section-s3 { position: relative; z-index: 11; } .wpo-cta-section .cta-wrapr, .wpo-cta-section-s2 .cta-wrapr, .wpo-cta-section-s3 .cta-wrapr { padding: 60px 50px 60px 75px; background: url(../images/cta-bg.jpg) center/cover no-repeat; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 991px) { .wpo-cta-section .cta-wrapr, .wpo-cta-section-s2 .cta-wrapr, .wpo-cta-section-s3 .cta-wrapr { padding: 60px 50px; display: block; } } @media (max-width: 575px) { .wpo-cta-section .cta-wrapr, .wpo-cta-section-s2 .cta-wrapr, .wpo-cta-section-s3 .cta-wrapr { padding: 40px 20px; } } .wpo-cta-section .cta-wrapr .wpo-section-title, .wpo-cta-section-s2 .cta-wrapr .wpo-section-title, .wpo-cta-section-s3 .cta-wrapr .wpo-section-title { width: calc(100% - 350px); text-align: left; margin-bottom: 0; } @media (max-width: 991px) { .wpo-cta-section .cta-wrapr .wpo-section-title, .wpo-cta-section-s2 .cta-wrapr .wpo-section-title, .wpo-cta-section-s3 .cta-wrapr .wpo-section-title { width: 100%; margin-bottom: 50px; } } .wpo-cta-section .cta-wrapr .wpo-section-title h3, .wpo-cta-section-s2 .cta-wrapr .wpo-section-title h3, .wpo-cta-section-s3 .cta-wrapr .wpo-section-title h3 { color: #FFF; font-size: 38px; font-weight: 700; line-height: 47px; text-transform: capitalize; max-width: 560px; margin-bottom: 30px; } @media (max-width: 1199px) { .wpo-cta-section .cta-wrapr .wpo-section-title h3, .wpo-cta-section-s2 .cta-wrapr .wpo-section-title h3, .wpo-cta-section-s3 .cta-wrapr .wpo-section-title h3 { font-size: 35px; } } .wpo-cta-section .cta-wrapr .wpo-section-title .theme-btn, .wpo-cta-section .cta-wrapr .wpo-section-title .view-cart-btn, .wpo-cta-section-s2 .cta-wrapr .wpo-section-title .theme-btn, .wpo-cta-section-s2 .cta-wrapr .wpo-section-title .view-cart-btn, .wpo-cta-section-s3 .cta-wrapr .wpo-section-title .theme-btn, .wpo-cta-section-s3 .cta-wrapr .wpo-section-title .view-cart-btn { font-family: "Plus Jakarta Sans"; font-size: 14px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; padding: 17px 22px; } .wpo-cta-section .cta-wrapr .contact-info, .wpo-cta-section-s2 .cta-wrapr .contact-info, .wpo-cta-section-s3 .cta-wrapr .contact-info { max-width: 350px; } .wpo-cta-section .cta-wrapr .contact-info .item, .wpo-cta-section-s2 .cta-wrapr .contact-info .item, .wpo-cta-section-s3 .cta-wrapr .contact-info .item { display: flex; align-items: center; border-radius: 47.5px; background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #FF7236; padding: 15px 40px 15px 30px; } @media (max-width: 575px) { .wpo-cta-section .cta-wrapr .contact-info .item, .wpo-cta-section-s2 .cta-wrapr .contact-info .item, .wpo-cta-section-s3 .cta-wrapr .contact-info .item { padding: 15px 20px; } } .wpo-cta-section .cta-wrapr .contact-info .item:first-child, .wpo-cta-section-s2 .cta-wrapr .contact-info .item:first-child, .wpo-cta-section-s3 .cta-wrapr .contact-info .item:first-child { margin-bottom: 30px; } .wpo-cta-section .cta-wrapr .contact-info .item i, .wpo-cta-section-s2 .cta-wrapr .contact-info .item i, .wpo-cta-section-s3 .cta-wrapr .contact-info .item i { font-size: 35px; line-height: 50px; position: relative; bottom: -7px; } @media (max-width: 575px) { .wpo-cta-section .cta-wrapr .contact-info .item i, .wpo-cta-section-s2 .cta-wrapr .contact-info .item i, .wpo-cta-section-s3 .cta-wrapr .contact-info .item i { font-size: 25px; line-height: 30px; } } .wpo-cta-section .cta-wrapr .contact-info .item i::before, .wpo-cta-section-s2 .cta-wrapr .contact-info .item i::before, .wpo-cta-section-s3 .cta-wrapr .contact-info .item i::before { line-height: 0; } .wpo-cta-section .cta-wrapr .contact-info .item .text, .wpo-cta-section-s2 .cta-wrapr .contact-info .item .text, .wpo-cta-section-s3 .cta-wrapr .contact-info .item .text { padding-left: 20px; } @media (max-width: 575px) { .wpo-cta-section .cta-wrapr .contact-info .item .text, .wpo-cta-section-s2 .cta-wrapr .contact-info .item .text, .wpo-cta-section-s3 .cta-wrapr .contact-info .item .text { padding-left: 10px; } } .wpo-cta-section .cta-wrapr .contact-info .item .text span, .wpo-cta-section-s2 .cta-wrapr .contact-info .item .text span, .wpo-cta-section-s3 .cta-wrapr .contact-info .item .text span { font-size: 16px; font-weight: 600; line-height: 20px; } .wpo-cta-section .cta-wrapr .contact-info .item .text p, .wpo-cta-section-s2 .cta-wrapr .contact-info .item .text p, .wpo-cta-section-s3 .cta-wrapr .contact-info .item .text p { color: #FFF; font-size: 21px; font-weight: 600; line-height: 30px; letter-spacing: -0.63px; margin-bottom: 0; } @media (max-width: 575px) { .wpo-cta-section .cta-wrapr .contact-info .item .text p, .wpo-cta-section-s2 .cta-wrapr .contact-info .item .text p, .wpo-cta-section-s3 .cta-wrapr .contact-info .item .text p { font-size: 15px; line-height: 25px; } } /*3.12 wpo-team-section */ .wpo-team-section, .wpo-team-section-s2, .wpo-team-section-s3 { position: relative; z-index: 1; background: #FFF5F0; padding-top: 290px; margin-top: -150px; } @media (max-width: 991px) { .wpo-team-section, .wpo-team-section-s2, .wpo-team-section-s3 { margin-top: 90px; padding-top: 90px; } } @media (max-width: 767px) { .wpo-team-section, .wpo-team-section-s2, .wpo-team-section-s3 { margin-top: 80px; padding-top: 80px; } } .wpo-team-section .wpo-section-title, .wpo-team-section-s2 .wpo-section-title, .wpo-team-section-s3 .wpo-section-title { text-align: left; } .wpo-team-section .owl-nav, .wpo-team-section-s2 .owl-nav, .wpo-team-section-s3 .owl-nav { position: absolute; right: 16%; top: -124px; } @media (max-width: 991px) { .wpo-team-section .owl-nav, .wpo-team-section-s2 .owl-nav, .wpo-team-section-s3 .owl-nav { display: none; } } .wpo-team-section .owl-prev, .wpo-team-section-s2 .owl-prev, .wpo-team-section-s3 .owl-prev { border-radius: 66px; border: 1px solid rgba(0, 0, 0, 0.28); width: 66px; height: 66px; background: transparent; position: relative; transition: all 0.3s ease-in-out; } .wpo-team-section .owl-prev span, .wpo-team-section-s2 .owl-prev span, .wpo-team-section-s3 .owl-prev span { display: none; } .wpo-team-section .owl-prev::after, .wpo-team-section-s2 .owl-prev::after, .wpo-team-section-s3 .owl-prev::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: "\f125"; font-family: flaticon_logistics !important; font-size: 15px; color: rgb(8, 17, 45); transition: all 0.3s ease-in-out; } .wpo-team-section .owl-prev:hover, .wpo-team-section-s2 .owl-prev:hover, .wpo-team-section-s3 .owl-prev:hover { background: #FF7236; border: 1px solid transparent; } .wpo-team-section .owl-prev:hover::after, .wpo-team-section-s2 .owl-prev:hover::after, .wpo-team-section-s3 .owl-prev:hover::after { color: #fff; } .wpo-team-section .owl-next, .wpo-team-section-s2 .owl-next, .wpo-team-section-s3 .owl-next { border-radius: 66px; border: 1px solid rgba(0, 0, 0, 0.28); width: 66px; height: 66px; background: transparent; position: relative; margin-left: 20px; transition: all 0.3s ease-in-out; } .wpo-team-section .owl-next span, .wpo-team-section-s2 .owl-next span, .wpo-team-section-s3 .owl-next span { display: none; } .wpo-team-section .owl-next::after, .wpo-team-section-s2 .owl-next::after, .wpo-team-section-s3 .owl-next::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: "\f124"; font-family: flaticon_logistics !important; font-size: 15px; color: rgb(8, 17, 45); transition: all 0.3s ease-in-out; } .wpo-team-section .owl-next:hover, .wpo-team-section-s2 .owl-next:hover, .wpo-team-section-s3 .owl-next:hover { background: #FF7236; border: 1px solid transparent; } .wpo-team-section .owl-next:hover::after, .wpo-team-section-s2 .owl-next:hover::after, .wpo-team-section-s3 .owl-next:hover::after { color: #fff; } .wpo-team-section .all-team-btn, .wpo-team-section-s2 .all-team-btn, .wpo-team-section-s3 .all-team-btn { text-align: center; margin-top: 20px; } .wpo-team-section .all-team-btn .theme-btn, .wpo-team-section .all-team-btn .view-cart-btn, .wpo-team-section-s2 .all-team-btn .theme-btn, .wpo-team-section-s2 .all-team-btn .view-cart-btn, .wpo-team-section-s3 .all-team-btn .theme-btn, .wpo-team-section-s3 .all-team-btn .view-cart-btn { padding: 21px 60px; font-weight: 600; } @media (max-width: 991px) { .wpo-team-section .all-team-btn .theme-btn, .wpo-team-section .all-team-btn .view-cart-btn, .wpo-team-section-s2 .all-team-btn .theme-btn, .wpo-team-section-s2 .all-team-btn .view-cart-btn, .wpo-team-section-s3 .all-team-btn .theme-btn, .wpo-team-section-s3 .all-team-btn .view-cart-btn { font-size: 14px; padding: 18px 45px; } } .wpo-team-section .shape, .wpo-team-section-s2 .shape, .wpo-team-section-s3 .shape { position: absolute; left: 60px; top: 15%; z-index: -1; } @media (max-width: 991px) { .wpo-team-section .shape, .wpo-team-section-s2 .shape, .wpo-team-section-s3 .shape { display: none; } } .wpo-team-section-s2, .wpo-team-section-s3 { margin-top: 0; padding-top: 120px; } @media (max-width: 991px) { .wpo-team-section-s2, .wpo-team-section-s3 { margin-top: 90px; padding-top: 90px; } } @media (max-width: 767px) { .wpo-team-section-s2, .wpo-team-section-s3 { margin-top: 80px; padding-top: 80px; } } .team-card { max-width: 353px; } @media (max-width: 1199px) { .team-card { margin: 0 auto; max-width: 100%; } } @media (max-width: 991px) { .team-card { max-width: 450px; } } .team-card .image { position: relative; } .team-card .image img { width: 100%; } .team-card .image .icon { position: absolute; left: 40%; bottom: 20px; transform: translateX(-35%); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .team-card .image ul { position: relative; background: #FFF; padding: 20px 35px; padding-bottom: 15px; display: block; text-align: center; } @media (max-width: 1499px) { .team-card .image ul { padding: 20px 25px; padding-bottom: 15px; } } @media (max-width: 1399px) { .team-card .image ul { padding: 10px 15px; padding-bottom: 5px; } } .team-card .image ul::before { position: absolute; left: 50%; bottom: -10px; width: 22px; height: 17px; background: #FFF; content: ""; transform: translateX(-50%); -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); clip-path: polygon(0 0, 50% 100%, 100% 0); z-index: -1; } .team-card .image ul li { display: inline-block; } .team-card .image ul li a { font-size: 15px; color: #888; padding-right: 20px; transition: all 0.3s ease-in-out; } .team-card .image ul li a:hover { color: #FF7236; } .team-card .image ul li:last-child a { padding-right: 0; } .team-card .content { margin: 30px 0; display: flex; align-items: center; justify-content: space-between; } .team-card .content .text { max-width: 273px; } .team-card .content h2 { color: #000; font-size: 22px; font-weight: 700; line-height: 30px; } .team-card .content span { color: #FF7236; font-size: 15px; font-weight: 500; line-height: 24px; text-transform: uppercase; } .team-card .content .hover-icon { width: 40px; height: 40px; border-radius: 40px; border: 1px solid rgba(0, 0, 0, 0.08); background: #FFF; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.04); margin-right: 20px; position: relative; transition: all 0.3s ease-in-out; } .team-card .content .hover-icon::before { position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11px; height: 2px; background: #5D5D70; transition: all 0.3s ease-in-out; } .team-card .content .hover-icon::after { position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 11px; background: #5D5D70; transition: all 0.3s ease-in-out; } .team-card:hover .image .icon { opacity: 1; visibility: visible; bottom: 50px; } .team-card:hover .content .hover-icon { transform: rotate(-45deg); background: #0BA08A; } .team-card:hover .content .hover-icon::before { background: #fff; } .team-card:hover .content .hover-icon::after { background: #fff; } .wpo-team-section-s3 { padding-bottom: 90px; } @media (max-width: 991px) { .wpo-team-section-s3 { padding-bottom: 60px; margin-top: 0; } } @media (max-width: 767px) { .wpo-team-section-s3 { padding-bottom: 50px; } } .wpo-team-section-s3 .team-card { max-width: 100%; } @media (max-width: 991px) { .wpo-team-section-s3 .team-card { max-width: 100%; } } /*3.13 wpo-blog-section */ .wpo-blog-section { position: relative; z-index: 1; padding-bottom: 90px; } @media (max-width: 991px) { .wpo-blog-section { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-blog-section { padding-bottom: 50px; } } .wpo-blog-section .bg-img { position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: -1; } @media (max-width: 991px) { .wpo-blog-section .bg-img { width: 100%; } } .wpo-blog-section .bg-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-card { border-radius: 16px; box-shadow: 0px 10px 60px 0px rgba(174, 174, 174, 0.2); background: #fff; position: relative; margin-bottom: 30px; } .blog-card img { border-radius: 16px 16px 0 0; width: 100%; } .blog-card .date { min-width: 70px; min-height: 75px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: #FF7236; border-radius: 6px; position: absolute; right: 25px; top: -30px; } .blog-card .date h3 { color: #fff; font-size: 28px; font-weight: 700; letter-spacing: -0.84px; margin-bottom: 0; } @media (max-width: 1199px) { .blog-card .date h3 { font-size: 20px; } } .blog-card .date span { color: #fff; font-size: 18px; font-weight: 400; } .blog-card .content { background: #fff; border-radius: 0 0 16px 16px; position: relative; } .blog-card .content .text { padding: 30px; padding-top: 35px; position: relative; } @media (max-width: 1199px) { .blog-card .content .text { padding: 15px; padding-top: 30px; } } .blog-card .content .text::after { position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; content: ""; background: rgba(0, 23, 38, 0.1); } .blog-card .content .text span { color: #FF7236; font-size: 16px; font-weight: 700; letter-spacing: -0.32px; } .blog-card .content .text h2 { margin-bottom: 0; } .blog-card .content .text h2 a { color: #042127; font-family: "Plus Jakarta Sans"; font-size: 22px; font-weight: 600; line-height: 30px; letter-spacing: -0.66px; transition: all 0.3s ease-in-out; } @media (max-width: 1199px) { .blog-card .content .text h2 a { font-size: 18px; line-height: 15px; } } .blog-card .content .text h2 a:hover { color: #FF7236; } .blog-card .content .comment { padding: 30px; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 1199px) { .blog-card .content .comment { padding: 15px; flex-direction: column; align-items: start; } } .blog-card .content .comment li { display: flex; align-items: center; } .blog-card .content .comment li i { color: #4D4B4B; font-size: 18px; } .blog-card .content .comment li span { color: #4D4B4B; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: -0.32px; padding-left: 7px; } /*3.14 wpo-map-section */ .wpo-map-section .wpo-map { height: 410px; } .wpo-map-section iframe { width: 100%; height: 100%; border: 0; outline: 0; filter: grayscale(100%); } .wpo-map-section h2.hidden { display: none; } /*-------------------------------------------------------------- 5. Home-style-2 --------------------------------------------------------------*/ /*5.1 wpo-cta-section */ .wpo-track-section { position: relative; margin-top: -70px; z-index: 1; } @media (max-width: 991px) { .wpo-track-section { margin-top: 90px; } } @media (max-width: 767px) { .wpo-track-section { margin-top: 80px; } } .wpo-track-section .cta-wrap { background: #FFF; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; } @media (max-width: 991px) { .wpo-track-section .cta-wrap { flex-direction: column; padding: 30px 30px; } } @media (max-width: 575px) { .wpo-track-section .cta-wrap { padding: 30px 20px; } } .wpo-track-section .tracking { width: calc(100% - 440px); padding: 40px 50px 55px; } @media (max-width: 1399px) { .wpo-track-section .tracking { padding: 40px 30px 55px; } } @media (max-width: 1199px) { .wpo-track-section .tracking { padding: 35px 20px 40px; width: calc(100% - 380px); } } @media (max-width: 991px) { .wpo-track-section .tracking { padding: 0px; width: 100%; margin-bottom: 20px; } } .wpo-track-section .tracking h2 { color: #000; font-size: 18px; font-weight: 700; line-height: 42px; text-transform: capitalize; } .wpo-track-section .tracking input { width: 513px; color: #000; font-size: 16px; font-weight: 500; border-radius: 8px; border: 1px solid #E4E4E5; background: #F4F4F4; padding: 20px 28px; transition: all 0.3s ease-in-out; } @media (max-width: 1399px) { .wpo-track-section .tracking input { width: 400px; } } @media (max-width: 1199px) { .wpo-track-section .tracking input { width: 300px; } } @media (max-width: 991px) { .wpo-track-section .tracking input { width: 60%; padding: 17px 20px; } } @media (max-width: 575px) { .wpo-track-section .tracking input { width: 100%; } } .wpo-track-section .tracking input:focus-visible { outline: -webkit-focus-ring-color auto transparent; outline: 0; border: 1px solid #FF7236; } .wpo-track-section .tracking input::-webkit-input-placeholder { color: #000; } .wpo-track-section .tracking input::-moz-placeholder { color: #000; } .wpo-track-section .tracking input::-moz-placeholder { color: #000; } .wpo-track-section .tracking .theme-btn, .wpo-track-section .tracking .view-cart-btn { margin-left: 10px; border-radius: 8px; overflow: hidden; text-transform: capitalize; padding: 20px 65px; } @media (max-width: 1399px) { .wpo-track-section .tracking .theme-btn, .wpo-track-section .tracking .view-cart-btn { padding: 20px 50px; } } @media (max-width: 767px) { .wpo-track-section .tracking .theme-btn, .wpo-track-section .tracking .view-cart-btn { margin-left: 0px; margin-top: 10px; padding: 18px 45px; } } .wpo-track-section .funfact { display: flex; align-items: center; justify-content: center; width: 427px; } @media (max-width: 1199px) { .wpo-track-section .funfact { width: 380px; } } @media (max-width: 575px) { .wpo-track-section .funfact { width: 100%; flex-direction: column; } } .wpo-track-section .funfact li { text-align: center; background: #0BA08A; padding: 50px 20px; overflow: hidden; position: relative; z-index: 1; width: 213px; height: 216px; display: flex; flex-direction: column; justify-content: center; text-align: center; } @media (max-width: 1199px) { .wpo-track-section .funfact li { height: 195px; } } @media (max-width: 575px) { .wpo-track-section .funfact li { width: 100%; height: 100%; } } .wpo-track-section .funfact li .shape { position: absolute; left: 0; top: 0; z-index: -11; width: 100%; height: 100%; } .wpo-track-section .funfact li .shape svg { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 575px) { .wpo-track-section .funfact li .shape svg { width: unset; height: unset; } } .wpo-track-section .funfact li h2 { color: #FFF; font-size: 48px; font-weight: 700; line-height: 48px; margin-bottom: 0; } @media (max-width: 991px) { .wpo-track-section .funfact li h2 { font-size: 35px; line-height: 48px; } } .wpo-track-section .funfact li h2 span { color: #FFF; font-family: "Plus Jakarta Sans"; font-size: 55px; font-weight: 700; line-height: 55px; letter-spacing: -1.65px; } @media (max-width: 991px) { .wpo-track-section .funfact li h2 span { font-size: 35px; line-height: 50px; } } .wpo-track-section .funfact li p { color: #fff; font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: -0.54px; margin-bottom: 0; padding: 0 15px; } /*5.2 wpo-service-section-s2 */ .wpo-service-section-s2 { position: relative; z-index: 1; padding-bottom: 0; } @media (max-width: 991px) { .wpo-service-section-s2 { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-service-section-s2 { padding-bottom: 50px; } } .wpo-service-section-s2 .wpo-section-title { padding: 0 50px; } @media (max-width: 1399px) { .wpo-service-section-s2 .wpo-section-title { padding: 0; } } .service-card-s2 { margin-bottom: 30px; background: #fff; border: 1px solid rgba(221, 221, 221, 0.4); box-shadow: 0px 7px 28px rgba(0, 0, 0, 0.03); text-align: center; padding: 65px 40px; transition: all 0.3s ease-in-out; } @media (max-width: 1399px) { .service-card-s2 { padding: 50px 30px; } } @media (max-width: 1199px) { .service-card-s2 { padding: 30px 20px; } } .service-card-s2 .icon { margin-bottom: 33px; height: 111px; } @media (max-width: 1199px) { .service-card-s2 .icon { margin-bottom: 20px; } } .service-card-s2 h2 { font-size: 24px; font-weight: 700; line-height: 64px; text-transform: capitalize; } @media (max-width: 1199px) { .service-card-s2 h2 { font-size: 20px; line-height: 50px; } } .service-card-s2 h2 a { color: #101212; font-family: "Plus Jakarta Sans"; transition: all 0.3s ease-in-out; } .service-card-s2 p { color: #6D7680; font-size: 16px; font-weight: 400; line-height: 30px; transition: all 0.3s ease-in-out; } .service-card-s2 .services-btn { padding-top: 10px; display: block; } .service-card-s2 .services-btn a { color: #000; text-align: center; font-size: 20px; font-style: normal; font-weight: 500; line-height: 30px; position: relative; padding-right: 50px; transition: all 0.3s ease-in-out; } .service-card-s2 .services-btn a::before { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-family: flaticon_logistics !important; content: "\f12f"; color: #FF7236; font-size: 32px; transition: all 0.3s ease-in-out; } .service-card-s2 .services-btn a::after { position: absolute; content: ""; right: 0; top: 50%; transform: translateY(-50%); border-radius: 100px; border: 1px solid #BDC2C6; width: 19.247px; height: 19px; transition: all 0.3s ease-in-out; } .service-card-s2 .services-btn a:hover::before { font-size: 25px; right: 8px; } .service-card-s2 .services-btn a:hover::after { width: 40px; height: 40px; } .service-card-s2:hover { background: #0B3742; border: 1px solid transparent; box-shadow: 0px 7px 28px transparent; } .service-card-s2:hover h2 a { color: #fff; } .service-card-s2:hover p { color: #fff; } .service-card-s2:hover .services-btn a { color: #fff; } .service-card-s2:hover .services-btn a::before { color: #FFB302; } /*5.3 wpo-funfact-section-s2 */ .wpo-funfact-section-s2, .wpo-funfact-section-s3 { position: relative; background: url(../images/funfact-bg.png) no-repeat center/cover; padding-top: 315px; margin-top: -230px; } @media (max-width: 991px) { .wpo-funfact-section-s2, .wpo-funfact-section-s3 { padding-top: 90px; margin-top: 0px; } } @media (max-width: 767px) { .wpo-funfact-section-s2, .wpo-funfact-section-s3 { padding-top: 80px; } } .wpo-funfact-section-s2 .wraper, .wpo-funfact-section-s3 .wraper { border-radius: 8px; background: #0B3742; box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.05); } @media (max-width: 991px) { .wpo-funfact-section-s2 .wraper, .wpo-funfact-section-s3 .wraper { padding-top: 35px; } } .wpo-funfact-section-s2 .wraper .col:last-child .item::before, .wpo-funfact-section-s3 .wraper .col:last-child .item::before { display: none; } @media (max-width: 991px) { .wpo-funfact-section-s2 .wraper .col:nth-child(2) .item::before, .wpo-funfact-section-s3 .wraper .col:nth-child(2) .item::before { display: none; } } .wpo-funfact-section-s2 .wraper .item, .wpo-funfact-section-s3 .wraper .item { text-align: center; color: #fff; padding: 45px 0; position: relative; } @media (max-width: 991px) { .wpo-funfact-section-s2 .wraper .item, .wpo-funfact-section-s3 .wraper .item { padding: 0; padding-bottom: 35px; } } .wpo-funfact-section-s2 .wraper .item::before, .wpo-funfact-section-s3 .wraper .item::before { position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: ""; height: 35px; width: 2px; background: rgba(255, 255, 255, 0.13); } @media (max-width: 767px) { .wpo-funfact-section-s2 .wraper .item::before, .wpo-funfact-section-s3 .wraper .item::before { display: none; } } .wpo-funfact-section-s2 .wraper .item i, .wpo-funfact-section-s3 .wraper .item i { font-size: 56px; line-height: 60px; } .wpo-funfact-section-s2 .wraper .item h2, .wpo-funfact-section-s3 .wraper .item h2 { font-size: 36px; font-weight: 700; margin-bottom: 0; color: #fff; } .wpo-funfact-section-s2 .wraper .item h2 span, .wpo-funfact-section-s3 .wraper .item h2 span { color: #fff; font-family: "Plus Jakarta Sans"; } .wpo-funfact-section-s2 .wraper .item p, .wpo-funfact-section-s3 .wraper .item p { font-size: 18px; font-weight: 500; margin-bottom: 0; color: #fff; } .wpo-funfact-section-s2 .left-shape, .wpo-funfact-section-s3 .left-shape { position: absolute; left: 0; top: 0; z-index: -1; } .wpo-funfact-section-s2 .right-shape, .wpo-funfact-section-s3 .right-shape { position: absolute; right: 0; bottom: 0; z-index: -1; } /*5.4 wpo-about-section-s2 */ .wpo-about-section-s2 { position: relative; padding-top: 225px; } @media (max-width: 1399px) { .wpo-about-section-s2 { padding-top: 120px; } } @media (max-width: 991px) { .wpo-about-section-s2 { padding-top: 90px; } } .wpo-about-section-s2 .about-left { width: 703px; height: 619px; position: relative; background: #0B3742; margin-left: -180px; } @media (max-width: 1650px) { .wpo-about-section-s2 .about-left { margin-left: -100px; } } @media (max-width: 1499px) { .wpo-about-section-s2 .about-left { margin-left: 0px; width: 100%; height: 100%; } } @media (max-width: 991px) { .wpo-about-section-s2 .about-left { max-width: 500px; } } .wpo-about-section-s2 .about-left h3 { color: #fff; font-size: 30px; font-weight: 500; line-height: 32px; text-transform: capitalize; margin-bottom: 0; transform: rotate(-90.308deg); position: absolute; left: -95px; top: 50%; } @media (max-width: 1499px) { .wpo-about-section-s2 .about-left h3 { display: none; } } .wpo-about-section-s2 .about-left h3 span { font-size: 44px; font-weight: 600; } .wpo-about-section-s2 .about-left .people { padding: 25px; position: absolute; background: #FF7236; right: 20px; top: -100px; z-index: 1; } @media (max-width: 1399px) { .wpo-about-section-s2 .about-left .people { top: -30px; } } .wpo-about-section-s2 .about-left .people::before { position: absolute; right: -20px; top: 0; content: ""; width: 20px; height: 30px; background: #A81017; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%); clip-path: polygon(0 0, 0% 100%, 100% 100%); } .wpo-about-section-s2 .about-left .people h2 { color: #fff; font-size: 24px; font-weight: 500; line-height: 33px; } .wpo-about-section-s2 .about-left .people h2 span { color: #fff; font-size: 36px; font-weight: 600; line-height: 33px; } .wpo-about-section-s2 .about-left .people p { color: #fff; font-size: 20px; font-weight: 400; line-height: 30px; margin-bottom: 0; } .wpo-about-section-s2 .about-left .image { position: absolute; right: 0; top: -70px; max-width: 551px; max-height: 668px; } @media (max-width: 1399px) { .wpo-about-section-s2 .about-left .image { top: 0; } } @media (max-width: 991px) { .wpo-about-section-s2 .about-left .image { position: unset; } } .wpo-about-section-s2 .about-left .image img { width: 100%; } @media (max-width: 991px) { .wpo-about-section-s2 .about-left .shape { display: none; } } @media (max-width: 991px) { .wpo-about-section-s2 .about-content { margin-top: 50px; } } .wpo-about-section-s2 .about-content .wpo-section-title { text-align: left; margin-bottom: 30px; } @media (max-width: 1199px) { .wpo-about-section-s2 .about-content .wpo-section-title { margin-bottom: 20px; } } @media (max-width: 1199px) { .wpo-about-section-s2 .about-content .wpo-section-title h3 { font-size: 36px; line-height: 50px; } } @media (max-width: 757px) { .wpo-about-section-s2 .about-content .wpo-section-title h3 { font-size: 25px; line-height: 30px; } } .wpo-about-section-s2 .about-content p { color: #535353; font-size: 16px; font-weight: 400; line-height: 28.8px; padding-left: 14px; border-left: 2px solid #FF7236; max-width: 550px; margin-bottom: 30px; } @media (max-width: 1199px) { .wpo-about-section-s2 .about-content p { margin-bottom: 10px; } } .wpo-about-section-s2 .about-content ul { display: flex; align-items: center; } @media (max-width: 757px) { .wpo-about-section-s2 .about-content ul { flex-direction: column; align-items: start; } } .wpo-about-section-s2 .about-content ul li { display: flex; align-items: center; max-width: 230px; margin-right: 20px; margin-bottom: 30px; } @media (max-width: 1199px) { .wpo-about-section-s2 .about-content ul li { margin-bottom: 10px; } } @media (max-width: 757px) { .wpo-about-section-s2 .about-content ul li { margin-right: 0; } } .wpo-about-section-s2 .about-content ul li i { font-size: 53px; color: #FF7236; margin-right: 10px; } @media (max-width: 1199px) { .wpo-about-section-s2 .about-content ul li i { font-size: 35px; } } .wpo-about-section-s2 .about-content ul li h3 { color: #042127; font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: -0.54px; margin-bottom: 0; } @media (max-width: 1199px) { .wpo-about-section-s2 .about-content ul li h3 { font-size: 15px; line-height: 20px; } } .wpo-about-section-s2 .about-content .logistics { display: inline-block; } .wpo-about-section-s2 .about-content .logistics li { color: #042127; font-size: 18px; font-weight: 600; line-height: 30px; margin: 0; margin-right: 10px; padding-left: 25px; position: relative; display: inline-block; max-width: 100%; margin-bottom: 10px; } @media (max-width: 1199px) { .wpo-about-section-s2 .about-content .logistics li { margin-bottom: 5px; font-size: 16px; } } .wpo-about-section-s2 .about-content .logistics li::before { position: absolute; left: 0; top: 0; content: "\f126"; font-family: flaticon_logistics !important; font-size: 18px; color: #FF7236; } .wpo-about-section-s2 .about-content .about-btn { display: flex; align-items: center; margin-top: 50px; } @media (max-width: 1199px) { .wpo-about-section-s2 .about-content .about-btn { margin-top: 20px; } } @media (max-width: 757px) { .wpo-about-section-s2 .about-content .about-btn { flex-direction: column; align-items: start; } } .wpo-about-section-s2 .about-content .about-btn .theme-btn, .wpo-about-section-s2 .about-content .about-btn .view-cart-btn { padding: 21px 40px; margin-right: 40px; text-transform: capitalize; } @media (max-width: 1199px) { .wpo-about-section-s2 .about-content .about-btn .theme-btn, .wpo-about-section-s2 .about-content .about-btn .view-cart-btn { margin-right: 10px; padding: 15px 20px; } } @media (max-width: 757px) { .wpo-about-section-s2 .about-content .about-btn .theme-btn, .wpo-about-section-s2 .about-content .about-btn .view-cart-btn { margin-right: 0px; margin-bottom: 20px; } } .wpo-about-section-s2 .about-content .about-btn .author { display: flex; align-items: center; justify-content: center; } @media (max-width: 399px) { .wpo-about-section-s2 .about-content .about-btn .author { justify-content: start; } } .wpo-about-section-s2 .about-content .about-btn .author .image { width: 60px; height: 60px; } .wpo-about-section-s2 .about-content .about-btn .author .image img { border-radius: 60px; border: 4px solid #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); width: 100%; } .wpo-about-section-s2 .about-content .about-btn .author .text { margin-left: 10px; display: grid; } .wpo-about-section-s2 .about-content .about-btn .author .text span { margin-top: -10px; color: #0BA089; font-size: 14px; font-weight: 500; line-height: 30px; } .wpo-about-section-s2 .right-img { position: absolute; right: 0; bottom: 0; z-index: -1; } @media (max-width: 1399px) { .wpo-about-section-s2 .right-img { display: none; } } /*5.5 wpo-request-quate-section */ .wpo-request-quate-section, .wpo-request-quate-section-s3 { position: relative; z-index: 1; margin-bottom: -460px; } @media (max-width: 991px) { .wpo-request-quate-section, .wpo-request-quate-section-s3 { margin-bottom: 90px; } } @media (max-width: 767px) { .wpo-request-quate-section, .wpo-request-quate-section-s3 { margin-bottom: 80px; } } .wpo-request-quate-section .title, .wpo-request-quate-section-s3 .title { margin-top: 70px; text-align: center; margin-bottom: 120px; } @media (max-width: 1199px) { .wpo-request-quate-section .title, .wpo-request-quate-section-s3 .title { margin-top: 150px; margin-bottom: 50px; } } @media (max-width: 991px) { .wpo-request-quate-section .title, .wpo-request-quate-section-s3 .title { margin-top: 60px; } } .wpo-request-quate-section .title h1, .wpo-request-quate-section-s3 .title h1 { background: url(../images/transport-bg.jpg) center/cover no-repeat; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 200px; font-weight: 700; margin-bottom: 0; } @media (max-width: 1199px) { .wpo-request-quate-section .title h1, .wpo-request-quate-section-s3 .title h1 { font-size: 150px; line-height: 150px; } } @media (max-width: 991px) { .wpo-request-quate-section .title h1, .wpo-request-quate-section-s3 .title h1 { font-size: 120px; line-height: 130px; } } @media (max-width: 767px) { .wpo-request-quate-section .title h1, .wpo-request-quate-section-s3 .title h1 { font-size: 50px; line-height: 80px; } } .wpo-request-quate-section .tab-wrap .tab, .wpo-request-quate-section-s3 .tab-wrap .tab { display: flex; align-items: center; flex-wrap: wrap; } .wpo-request-quate-section .tab-wrap .tab .tablinks, .wpo-request-quate-section-s3 .tab-wrap .tab .tablinks { background: #0B3742; width: 50%; text-align: center; color: #FFF; font-size: 18px; font-weight: 600; padding: 20px; border: transparent; } .wpo-request-quate-section .tab-wrap .tab .tablinks:last-child, .wpo-request-quate-section-s3 .tab-wrap .tab .tablinks:last-child { background: #FF7236; } @media (max-width: 575px) { .wpo-request-quate-section .tab-wrap .tab .tablinks, .wpo-request-quate-section-s3 .tab-wrap .tab .tablinks { width: 100%; padding: 15px; font-size: 16px; } } .wpo-request-quate-section .tabcontent, .wpo-request-quate-section-s3 .tabcontent { background: #FFF; box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.03); padding: 60px 50px 60px 50px; } @media (max-width: 1399px) { .wpo-request-quate-section .tabcontent, .wpo-request-quate-section-s3 .tabcontent { padding: 50px 20px 50px 20px; } } @media (max-width: 575px) { .wpo-request-quate-section .tabcontent, .wpo-request-quate-section-s3 .tabcontent { padding: 20px 10px; } } .wpo-request-quate-section .tab-wraper, .wpo-request-quate-section .tab-wraper-s2, .wpo-request-quate-section-s3 .tab-wraper, .wpo-request-quate-section-s3 .tab-wraper-s2 { display: flex; align-items: center; } @media (max-width: 991px) { .wpo-request-quate-section .tab-wraper, .wpo-request-quate-section .tab-wraper-s2, .wpo-request-quate-section-s3 .tab-wraper, .wpo-request-quate-section-s3 .tab-wraper-s2 { flex-direction: column; } } .wpo-request-quate-section .form-wrap, .wpo-request-quate-section-s3 .form-wrap { width: calc(100% - 275px); padding-right: 65px; } @media (max-width: 1399px) { .wpo-request-quate-section .form-wrap, .wpo-request-quate-section-s3 .form-wrap { padding-right: 20px; } } @media (max-width: 991px) { .wpo-request-quate-section .form-wrap, .wpo-request-quate-section-s3 .form-wrap { width: 100%; padding-right: 0; } } .wpo-request-quate-section .form-wrap .form-fild, .wpo-request-quate-section-s3 .form-wrap .form-fild { margin-bottom: 30px; } .wpo-request-quate-section .form-wrap .form-fild label, .wpo-request-quate-section-s3 .form-wrap .form-fild label { color: #000; font-family: "Plus Jakarta Sans"; font-size: 18px; font-weight: 700; line-height: 30px; margin-bottom: 10px; width: 100%; } .wpo-request-quate-section .form-wrap .form-fild .fild, .wpo-request-quate-section-s3 .form-wrap .form-fild .fild { width: 100%; height: 47px; background: #F2F2F2; color: #000; font-family: "Plus Jakarta Sans"; font-size: 14px; font-weight: 500; line-height: 30px; padding: 0 20px; border: 1px solid transparent; transition: all 0.3s ease-in-out; } .wpo-request-quate-section .form-wrap .form-fild .fild:focus-visible, .wpo-request-quate-section-s3 .form-wrap .form-fild .fild:focus-visible { outline: -webkit-focus-ring-color auto transparent; outline: 0; border: 1px solid #FF7236; } .wpo-request-quate-section .form-wrap .form-fild .fild::-webkit-input-placeholder, .wpo-request-quate-section-s3 .form-wrap .form-fild .fild::-webkit-input-placeholder { color: #000; } .wpo-request-quate-section .form-wrap .form-fild .fild::-moz-placeholder, .wpo-request-quate-section-s3 .form-wrap .form-fild .fild::-moz-placeholder { color: #000; } .wpo-request-quate-section .form-wrap .form-fild .fild::-moz-placeholder, .wpo-request-quate-section-s3 .form-wrap .form-fild .fild::-moz-placeholder { color: #000; } .wpo-request-quate-section .form-wrap .form-fild select, .wpo-request-quate-section-s3 .form-wrap .form-fild select { display: inline-block; cursor: pointer; opacity: 1; padding: 0 25px; font-size: 15px; -webkit-appearance: none; -o-appearance: none; appearance: none; -moz-appearance: none; background: #F2F2F2 url(../images/select-icon2.png) no-repeat calc(100% - 15px) center !important; position: relative; } .wpo-request-quate-section .form-wrap .form-fild .mb-0, .wpo-request-quate-section-s3 .form-wrap .form-fild .mb-0 { margin-bottom: 0; } .wpo-request-quate-section .form-wrap .form-fild .theme-btn, .wpo-request-quate-section .form-wrap .form-fild .view-cart-btn, .wpo-request-quate-section-s3 .form-wrap .form-fild .theme-btn, .wpo-request-quate-section-s3 .form-wrap .form-fild .view-cart-btn { width: 100%; text-transform: capitalize; } .wpo-request-quate-section .form-wrap .form-fild.s2, .wpo-request-quate-section-s3 .form-wrap .form-fild.s2 { margin-bottom: 20px; } .wpo-request-quate-section .form-wrap .form-fild input[type=checkbox], .wpo-request-quate-section-s3 .form-wrap .form-fild input[type=checkbox] { position: relative; cursor: pointer; } .wpo-request-quate-section .form-wrap .form-fild input[type=checkbox]:checked:before, .wpo-request-quate-section-s3 .form-wrap .form-fild input[type=checkbox]:checked:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; border: 1px solid #000; border-radius: 1px; background-color: #0B3742; transition: all 0.2s linear; top: -2px; } .wpo-request-quate-section .form-wrap .form-fild input[type=checkbox]:before, .wpo-request-quate-section-s3 .form-wrap .form-fild input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; border: 1px solid #000; border-radius: 1px; background-color: #fff; top: -2px; } .wpo-request-quate-section .form-wrap .form-fild input[type=checkbox]:after, .wpo-request-quate-section-s3 .form-wrap .form-fild input[type=checkbox]:after { content: ""; display: block; width: 0px; height: 0px; border: solid #fff; border-width: 0 0px 0px 0; transform: rotate(180deg); position: absolute; top: 0px; left: 7px; transition: all 0.2s linear; } .wpo-request-quate-section .form-wrap .form-fild input[type=checkbox]:checked:after, .wpo-request-quate-section-s3 .form-wrap .form-fild input[type=checkbox]:checked:after { content: ""; display: block; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: 1px; left: 7px; } .wpo-request-quate-section .form-wrap .form-fild .chack-leval, .wpo-request-quate-section-s3 .form-wrap .form-fild .chack-leval { margin-left: 10px; color: #000; cursor: pointer; display: inline; color: #000; font-family: "Plus Jakarta Sans"; font-size: 14px; font-weight: 700; line-height: 30px; } @media (max-width: 1399px) { .wpo-request-quate-section .form-wrap .form-fild .chack-leval, .wpo-request-quate-section-s3 .form-wrap .form-fild .chack-leval { font-size: 12px; } } .wpo-request-quate-section .form-wrap .chack, .wpo-request-quate-section-s3 .form-wrap .chack { margin-top: 20px; margin-bottom: 20px; } @media (max-width: 991px) { .wpo-request-quate-section .form-wrap .chack, .wpo-request-quate-section-s3 .form-wrap .chack { margin-top: 0; } } .wpo-request-quate-section .video-content, .wpo-request-quate-section-s3 .video-content { width: 275px; position: relative; } @media (max-width: 991px) { .wpo-request-quate-section .video-content, .wpo-request-quate-section-s3 .video-content { display: none; } } .wpo-request-quate-section .video-content img, .wpo-request-quate-section-s3 .video-content img { width: 100%; border-radius: 10px; } .wpo-request-quate-section .shape, .wpo-request-quate-section-s3 .shape { position: absolute; max-width: 479px; max-height: 520px; top: -50px; left: 50%; transform: translateX(-50%); z-index: -1; } .wpo-request-quate-section-s3 { margin-bottom: 120px; } @media (max-width: 991px) { .wpo-request-quate-section-s3 { margin-bottom: 90px; } } @media (max-width: 767px) { .wpo-request-quate-section-s3 { margin-bottom: 80px; } } .video-holder { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .video-holder a { display: block; width: 80px; height: 80px; background: #fff; text-align: center; line-height: 80px; color: #FF7236; font-size: 30px; border-radius: 50%; position: relative; } .video-holder a:before { content: " "; width: 120%; height: 120%; background: rgba(255, 255, 255, 0.3); border-radius: 50%; position: absolute; left: -9px; top: -8px; animation: pulse 1s infinite; z-index: -1; } .video-holder a i { font-size: 20px; } /*5.6 wpo-process-section-s2 */ .wpo-process-section-s2, .wpo-process-section-s3 { position: relative; background: url(../images/process-bg-2.jpg) no-repeat center/cover; padding-top: 520px; padding-bottom: 90px; } @media (max-width: 991px) { .wpo-process-section-s2, .wpo-process-section-s3 { padding-bottom: 60px; padding-top: 90px; } } @media (max-width: 767px) { .wpo-process-section-s2, .wpo-process-section-s3 { padding-bottom: 50px; } } .wpo-process-section-s2 .wrape, .wpo-process-section-s3 .wrape { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 991px) { .wpo-process-section-s2 .wrape, .wpo-process-section-s3 .wrape { flex-wrap: wrap; } } .wpo-process-section-s2 .item, .wpo-process-section-s3 .item { width: 260px; text-align: center; position: relative; margin-bottom: 30px; } @media (max-width: 1199px) { .wpo-process-section-s2 .item, .wpo-process-section-s3 .item { width: 230px; } } @media (max-width: 991px) { .wpo-process-section-s2 .item, .wpo-process-section-s3 .item { flex-basis: 50%; } } @media (max-width: 575px) { .wpo-process-section-s2 .item, .wpo-process-section-s3 .item { flex-basis: 100%; } } .wpo-process-section-s2 .item .icon, .wpo-process-section-s3 .item .icon { max-width: 185px; max-height: 184px; line-height: 185px; margin: 0 auto; border-radius: 100px; background: #fff; display: block; margin-bottom: 10px; outline: 1px dotted #C1C1C1; outline-offset: -15px; transition: all 0.3s ease-in-out; position: relative; } @media (max-width: 1199px) { .wpo-process-section-s2 .item .icon, .wpo-process-section-s3 .item .icon { max-width: 130px; max-height: 130px; line-height: 130px; } } .wpo-process-section-s2 .item .icon span, .wpo-process-section-s3 .item .icon span { color: #FFF; text-align: center; font-family: "Plus Jakarta Sans"; font-size: 18px; font-weight: 700; line-height: 35px; width: 36px; height: 36px; border-radius: 100px; display: flex; align-items: center; justify-content: center; position: absolute; right: 14px; top: 13px; background: #FF7236; } @media (max-width: 1199px) { .wpo-process-section-s2 .item .icon span, .wpo-process-section-s3 .item .icon span { right: 0px; top: 0px; font-size: 14px; } } .wpo-process-section-s2 .item .icon i, .wpo-process-section-s3 .item .icon i { font-size: 75px; color: #0B3742; } @media (max-width: 1199px) { .wpo-process-section-s2 .item .icon i, .wpo-process-section-s3 .item .icon i { font-size: 50px; } } .wpo-process-section-s2 .item h2, .wpo-process-section-s3 .item h2 { color: #101212; text-align: center; font-size: 20px; font-weight: 700; line-height: 64px; margin-bottom: 0; } @media (max-width: 1199px) { .wpo-process-section-s2 .item h2, .wpo-process-section-s3 .item h2 { font-size: 17px; line-height: 50px; } } @media (max-width: 991px) { .wpo-process-section-s2 .item h2, .wpo-process-section-s3 .item h2 { line-height: 30px; } } .wpo-process-section-s2 .item .shape, .wpo-process-section-s3 .item .shape { position: absolute; top: 40%; right: -35%; transform: translateY(-50%); } @media (max-width: 1399px) { .wpo-process-section-s2 .item .shape, .wpo-process-section-s3 .item .shape { right: -22%; } } @media (max-width: 1199px) { .wpo-process-section-s2 .item .shape, .wpo-process-section-s3 .item .shape { right: -20%; top: 33%; } } @media (max-width: 991px) { .wpo-process-section-s2 .item .shape, .wpo-process-section-s3 .item .shape { right: -15%; top: 33%; } } @media (max-width: 575px) { .wpo-process-section-s2 .item .shape, .wpo-process-section-s3 .item .shape { display: none; } } .wpo-process-section-s2 .item:last-child .shape, .wpo-process-section-s3 .item:last-child .shape { display: none; } @media (max-width: 991px) { .wpo-process-section-s2 .item:nth-child(2) .shape, .wpo-process-section-s3 .item:nth-child(2) .shape { display: none; } } /*5.7 wpo-features-section-s2 */ .wpo-features-section-s2 .top-wraper { position: relative; z-index: 1; background: url(../images/features-bg.jpg) no-repeat center/cover; padding: 75px 0 175px; } .wpo-features-section-s2 .top-wraper::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; background: linear-gradient(89deg, #0B3742 0.62%, #0D3843 26.88%, rgba(35, 69, 73, 0.79) 105.3%); } .wpo-features-section-s2 .top-wraper .wpo-section-title { text-align: left; margin-bottom: 0; } .wpo-features-section-s2 .top-wraper .wpo-section-title h3 { color: #fff; } @media (max-width: 991px) { .wpo-features-section-s2 .top-wraper .wpo-section-title { text-align: center; } } .wpo-features-section-s2 .top-wraper .f-btn { text-align: end; } @media (max-width: 991px) { .wpo-features-section-s2 .top-wraper .f-btn { margin-top: 20px; text-align: center; } } .wpo-features-section-s2 .bottom-content { padding: 80px 42px 50px; background: #FFF; box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.04); margin-top: -100px; position: relative; z-index: 1; } @media (max-width: 575px) { .wpo-features-section-s2 .bottom-content { padding: 30px 20px 0; } } .wpo-features-section-s2 .item { display: flex; align-items: center; margin-bottom: 30px; } @media (max-width: 575px) { .wpo-features-section-s2 .item { flex-direction: column; } } .wpo-features-section-s2 .item .icon { width: 104px; height: 104px; line-height: 104px; background: rgba(255, 239, 232, 0.67); text-align: center; border-radius: 100px; display: block; } .wpo-features-section-s2 .item .icon i { font-size: 55px; color: #FF7236; } .wpo-features-section-s2 .item .content { width: calc(100% - 104px); padding-left: 25px; } @media (max-width: 575px) { .wpo-features-section-s2 .item .content { width: 100%; padding-left: 0px; padding-top: 20px; text-align: center; } } .wpo-features-section-s2 .item .content h2 { color: #222; font-size: 24px; font-weight: 600; line-height: 30px; margin-bottom: 0; } .wpo-features-section-s2 .item .content p { color: #5E5F63; font-size: 18px; font-weight: 400; line-height: 30px; margin-bottom: 0; } /*5.8 wpo-pricing-section */ .wpo-pricing-section, .wpo-pricing-section-s2 { position: relative; padding-bottom: 90px; } @media (max-width: 991px) { .wpo-pricing-section, .wpo-pricing-section-s2 { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-pricing-section, .wpo-pricing-section-s2 { padding-bottom: 50px; } } .wpo-pricing-section .col:nth-child(2) .pric-card, .wpo-pricing-section-s2 .col:nth-child(2) .pric-card { background: #0B3742; } .wpo-pricing-section .col:nth-child(2) .pric-card h4, .wpo-pricing-section-s2 .col:nth-child(2) .pric-card h4 { opacity: 1; visibility: visible; } .wpo-pricing-section .col:nth-child(2) .pric-card .title, .wpo-pricing-section-s2 .col:nth-child(2) .pric-card .title { color: #fff; } .wpo-pricing-section .col:nth-child(2) .pric-card .pric, .wpo-pricing-section-s2 .col:nth-child(2) .pric-card .pric { color: #fff; } .wpo-pricing-section .col:nth-child(2) .pric-card .pric::before, .wpo-pricing-section-s2 .col:nth-child(2) .pric-card .pric::before { background: #6C6A72; } .wpo-pricing-section .col:nth-child(2) .pric-card .pric span, .wpo-pricing-section-s2 .col:nth-child(2) .pric-card .pric span { color: #fff; } .wpo-pricing-section .col:nth-child(2) .pric-card ul li, .wpo-pricing-section-s2 .col:nth-child(2) .pric-card ul li { color: #fff; } .wpo-pricing-section .col:nth-child(2) .pric-card ul li::after, .wpo-pricing-section-s2 .col:nth-child(2) .pric-card ul li::after { background: #fff; } .wpo-pricing-section .col:nth-child(2) .pric-card a, .wpo-pricing-section-s2 .col:nth-child(2) .pric-card a { border: 1px solid rgba(255, 255, 255, 0.21); color: #fff; } .wpo-pricing-section .shape-left, .wpo-pricing-section-s2 .shape-left { position: absolute; left: 60px; bottom: 94px; z-index: -1; } @media (max-width: 757px) { .wpo-pricing-section .shape-left, .wpo-pricing-section-s2 .shape-left { display: none; } } .wpo-pricing-section .shape-rigth, .wpo-pricing-section-s2 .shape-rigth { position: absolute; right: 30px; top: 30px; z-index: -1; } @media (max-width: 757px) { .wpo-pricing-section .shape-rigth, .wpo-pricing-section-s2 .shape-rigth { display: none; } } .pric-card { margin-bottom: 30px; background: #fff; box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.06); border-radius: 14px; padding: 90px 50px 45px 30px; position: relative; z-index: 1; transition: all 0.3s ease-in-out; overflow: hidden; } @media (max-width: 1399px) { .pric-card { padding: 90px 30px 45px 30px; } } @media (max-width: 1199px) { .pric-card { padding: 50px 20px 45px 20px; max-width: 100%; } } @media (max-width: 757px) { .pric-card { max-width: 350px; margin: 0 auto; margin-bottom: 30px; } } .pric-card h4 { color: #fff; font-size: 16px; font-weight: 500; line-height: 48px; letter-spacing: 0.48px; text-transform: uppercase; margin-bottom: 0; background: #FF7236; text-align: center; position: relative; right: -158px; top: -57px; transform: rotate(40.002deg); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } @media (max-width: 1399px) { .pric-card h4 { right: -120px; } } @media (max-width: 1199px) { .pric-card h4 { top: -18px; right: -90px; font-size: 15px; line-height: 40px; } } .pric-card .title { color: #6C6A72; font-size: 22px; font-weight: 600; line-height: 30px; letter-spacing: -0.66px; transition: all 0.3s ease-in-out; margin-bottom: 15px; } @media (max-width: 1199px) { .pric-card .title { font-size: 18px; line-height: 25px; margin-bottom: 10px; } } .pric-card .pric { color: #1D1729; font-size: 65px; font-weight: 600; line-height: 75px; letter-spacing: -1.95px; position: relative; transition: all 0.3s ease-in-out; padding-left: 30px; margin-bottom: 0; padding-bottom: 20px; } @media (max-width: 1399px) { .pric-card .pric { padding-left: 10px; } } @media (max-width: 1199px) { .pric-card .pric { font-size: 40px; line-height: 55px; } } .pric-card .pric::before { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); content: ""; width: 295px; height: 1px; background: #6C6A72; transition: all 0.3s ease-in-out; } @media (max-width: 1199px) { .pric-card .pric::before { width: 95%; } } .pric-card .pric span { color: #1D1729; font-size: 16px; font-weight: 700; line-height: 30px; font-family: "Plus Jakarta Sans"; transition: all 0.3s ease-in-out; letter-spacing: 1px; } .pric-card .pric span:first-child { position: absolute; top: 4px; left: 19px; } @media (max-width: 1399px) { .pric-card .pric span:first-child { left: 0; } } .pric-card ul { padding: 45px 0 58px; } @media (max-width: 1199px) { .pric-card ul { padding: 35px 0 48px; } } .pric-card ul li { color: #4D4B4B; font-size: 16px; font-weight: 600; letter-spacing: -0.48px; margin-bottom: 30px; padding-left: 16px; position: relative; transition: all 0.3s ease-in-out; } @media (max-width: 1199px) { .pric-card ul li { font-size: 15px; margin-bottom: 15px; } } .pric-card ul li::after { position: absolute; content: ""; left: 0; top: 9px; width: 7px; height: 7px; background: #0B3742; border-radius: 10px; transition: all 0.3s ease-in-out; } .pric-card ul li:last-child { margin-bottom: 0; } .pric-card .pric-btn { display: grid; } .pric-card a { padding: 20px 80px; border-radius: 44px; border: 1px solid #6C6A72; color: #1D1729; text-align: center; font-size: 16px; font-weight: 700; text-transform: capitalize; transition: all 0.3s ease-in-out; } @media (max-width: 1399px) { .pric-card a { padding: 20px 50px; } } @media (max-width: 1199px) { .pric-card a { padding: 14px 30px; } } .pric-card a i { font-size: 14px; } .pric-card:hover { background: #0B3742; } .pric-card:hover h4 { opacity: 1; visibility: visible; } .pric-card:hover .title { color: #fff; } .pric-card:hover .pric { color: #fff; } .pric-card:hover .pric::before { background: #6C6A72; } .pric-card:hover .pric span { color: #fff; } .pric-card:hover ul li { color: #fff; } .pric-card:hover ul li::after { background: #fff; } .pric-card:hover a { border: 1px solid rgba(255, 255, 255, 0.21); color: #fff; } /*5.9 wpo-portfolio-testimonial-section */ .wpo-project-testimonial-section { position: relative; z-index: 1; background: url(../images/portfolio-testimonial.png) no-repeat center/cover; } .wpo-project-testimonial-section::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #0B3742; z-index: -1; } .wpo-project-testimonial-section .left-shape { position: absolute; left: 0; bottom: 0; z-index: -1; } .wpo-project-testimonial-section .right-shape { position: absolute; right: 0; top: 0; z-index: -1; } .wpo-project-testimonial-section .project-wrap { padding: 0 70px; } @media (max-width: 1399px) { .wpo-project-testimonial-section .project-wrap { padding: 0 20px; } } @media (max-width: 1199px) { .wpo-project-testimonial-section .project-wrap { padding: 0 10px; } } /*5.10 wpo-project-section-s2 */ .wpo-project-section-s2 .wpo-section-title { text-align: center; } .wpo-project-section-s2 .wpo-section-title h3 { color: #fff; } .project-card-s2 { margin-bottom: 30px; position: relative; } .project-card-s2 .image img { width: 100%; } .project-card-s2 .content { margin: 0 20px; position: relative; margin-top: -40px; background: #fff; padding: 40px 40px; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 1599px) { .project-card-s2 .content { padding: 30px 20px; } } @media (max-width: 1199px) { .project-card-s2 .content { margin: 0; padding: 20px 20px; flex-direction: column; justify-content: center; text-align: center; } } .project-card-s2 .content h2 a { color: #222; font-family: "Plus Jakarta Sans"; font-size: 28px; font-weight: 700; letter-spacing: -0.84px; transition: all 0.3s ease-in-out; } @media (max-width: 1599px) { .project-card-s2 .content h2 a { font-size: 24px; } } @media (max-width: 1199px) { .project-card-s2 .content h2 a { font-size: 20px; } } .project-card-s2 .content h2 a:hover { color: #FF7236; } .project-card-s2 .content p { color: #696969; font-size: 16px; font-weight: 400; line-height: 30px; margin-bottom: 0; } .project-card-s2 .icon { width: 50px; height: 50px; line-height: 50px; background: #FF7236; border-radius: 100px; text-align: center; transform: rotate(-45deg); } @media (max-width: 1199px) { .project-card-s2 .icon { margin-top: 10px; } } .project-card-s2 .icon i { color: #FFF; font-size: 14px; } .wpo-project-section-s4 { padding-bottom: 90px; } @media (max-width: 991px) { .wpo-project-section-s4 { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-project-section-s4 { padding-bottom: 50px; } } /*5.11 wpo-testimonial-section-s2 */ .wpo-testimonial-section-s2 .testimonial-wrap { background: transparent; box-shadow: 0px 4px 31px 0px transparent; padding: 70px 55px 60px 55px; display: flex; align-items: center; } @media (max-width: 1199px) { .wpo-testimonial-section-s2 .testimonial-wrap { padding: 40px 20px; } } @media (max-width: 991px) { .wpo-testimonial-section-s2 .testimonial-wrap { display: block; padding: 0px; margin-top: 50px; } } .wpo-testimonial-section-s2 .content p { color: #fff; } .wpo-testimonial-section-s2 .content .client-name { border-top: 1px solid rgba(255, 255, 255, 0.1); } .wpo-testimonial-section-s2 .content .client-name h4 { color: #fff; } .wpo-testimonial-section-s2 .content .client-name span { color: #FF7236; } .wpo-testimonial-section-s2 .slick-list { overflow: visible; } .wpo-testimonial-section-s2 .image .feedback { padding: 0; transform: unset; width: 90px; height: 90px; line-height: 90px; text-align: center; display: block; border-radius: 100px; left: auto; right: 139px; top: -26px; bottom: auto; } @media (max-width: 1199px) { .wpo-testimonial-section-s2 .image .feedback { right: 50px; } } @media (max-width: 991px) { .wpo-testimonial-section-s2 .image .feedback { width: 60px; height: 60px; line-height: 60px; right: 80px; top: 0px; } } .wpo-testimonial-section-s2 .image .feedback i { font-size: 45px; } .wpo-testimonial-section-s2 .image .item ul { border-radius: 22px; background: #FFF; width: 189px; text-align: center; position: absolute; left: 35%; bottom: -70px; transform: translateX(-50%); } @media (max-width: 1199px) { .wpo-testimonial-section-s2 .image .item ul { left: 45%; } } .wpo-testimonial-section-s2 .image .item ul::before { position: absolute; content: ""; left: 43%; top: -21px; width: 25px; height: 22px; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #fff; z-index: -1; } .wpo-testimonial-section-s2 .image .item ul li { display: inline-block; } .wpo-testimonial-section-s2 .image .item ul li i { font-size: 16px; color: #FF7236; padding: 9px 3px; display: block; } .wpo-testimonial-section-s2 .image .item img { width: 300px; height: 300px; border-radius: 300px; background: #D9D9D9; } @media (max-width: 575px) { .wpo-testimonial-section-s2 .image .item img { height: 100%; } } @media (max-width: 1199px) { .wpo-testimonial-section-s2 .image { width: 340px; } } .wpo-testimonial-section-s2 .content-wrap { width: calc(100% - 460px); padding-left: 0; } @media (max-width: 1199px) { .wpo-testimonial-section-s2 .content-wrap { width: calc(100% - 340px); } } @media (max-width: 991px) { .wpo-testimonial-section-s2 .content-wrap { width: 100%; display: block; margin-top: 100px; } } .wpo-testimonial-section-s2 .slick-arrow { background: #10424F; } .wpo-testimonial-section-s2 .slick-arrow.slick-prev::after, .wpo-testimonial-section-s2 .slick-arrow.slick-next::after { color: #fff; } .wpo-testimonial-section-s2 .slick-arrow:hover { background: #FF7236; } .wpo-testimonial-section-s2.s4 { padding-top: 50px; padding-bottom: 120px; } @media (max-width: 991px) { .wpo-testimonial-section-s2.s4 { padding-bottom: 90px; } } @media (max-width: 767px) { .wpo-testimonial-section-s2.s4 { padding-bottom: 80px; } } .wpo-testimonial-section-s2.s4 .content p { color: #000; } .wpo-testimonial-section-s2.s4 .content .client-name h4 { color: #000; } /*5.12 wpo-partner-section-s2 */ .wpo-partner-section-s2, .wpo-partner-section-s3 { padding-bottom: 0px; } .wpo-partner-section-s2 .container, .wpo-partner-section-s3 .container { padding-bottom: 60px; border-bottom: 1px solid #D9D9D9; } /*5.13 wpo-faq-section */ @media (max-width: 991px) { .wpo-faq-section .faq-left-content, .wpo-faq-section-s2 .faq-left-content { margin-bottom: 50px; } } .wpo-faq-section .faq-left-content .wpo-section-title, .wpo-faq-section-s2 .faq-left-content .wpo-section-title { text-align: left; margin-bottom: 30px; } .wpo-faq-section .faq-left-content .wpo-section-title h3, .wpo-faq-section-s2 .faq-left-content .wpo-section-title h3 { margin-bottom: 30px; } @media (max-width: 1199px) { .wpo-faq-section .faq-left-content .wpo-section-title h3, .wpo-faq-section-s2 .faq-left-content .wpo-section-title h3 { font-size: 30px; } } .wpo-faq-section .faq-left-content .wpo-section-title p, .wpo-faq-section-s2 .faq-left-content .wpo-section-title p { max-width: 423px; color: #5E5F63; font-size: 16px; font-weight: 400; } .wpo-faq-section .faq-left-content .item li, .wpo-faq-section-s2 .faq-left-content .item li { position: relative; color: rgba(20, 33, 43, 0.7); font-size: 18px; font-weight: 400; line-height: 30px; padding-left: 30px; margin-bottom: 20px; } .wpo-faq-section .faq-left-content .item li::before, .wpo-faq-section-s2 .faq-left-content .item li::before { position: absolute; left: 0; top: 0; content: "\f126"; font-family: flaticon_logistics !important; font-size: 20px; color: #FF7236; } .wpo-faq-section .faq-left-content .item-service, .wpo-faq-section-s2 .faq-left-content .item-service { display: flex; align-items: center; justify-content: space-between; max-width: 540px; margin-top: 45px; } @media (max-width: 767px) { .wpo-faq-section .faq-left-content .item-service, .wpo-faq-section-s2 .faq-left-content .item-service { flex-direction: column; align-items: start; } } .wpo-faq-section .faq-left-content .item-service li, .wpo-faq-section-s2 .faq-left-content .item-service li { display: flex; align-items: center; } .wpo-faq-section .faq-left-content .item-service li i, .wpo-faq-section-s2 .faq-left-content .item-service li i { width: 65px; height: 65px; line-height: 65px; background: #F6F6F6; border-radius: 100px; font-size: 30px; color: #FF7236; display: inline-block; text-align: center; } @media (max-width: 1199px) { .wpo-faq-section .faq-left-content .item-service li i, .wpo-faq-section-s2 .faq-left-content .item-service li i { width: 40px; height: 40px; line-height: 40px; font-size: 40px; } } .wpo-faq-section .faq-left-content .item-service li span, .wpo-faq-section-s2 .faq-left-content .item-service li span { color: #222; font-size: 18px; font-weight: 700; line-height: 65px; padding-left: 12px; } @media (max-width: 1199px) { .wpo-faq-section .faq-left-content .item-service li span, .wpo-faq-section-s2 .faq-left-content .item-service li span { font-size: 16px; line-height: 60px; } } .wpo-faq-section .accordion-item, .wpo-faq-section-s2 .accordion-item { border-radius: 10px; border: 1px solid rgba(4, 18, 31, 0.08); background: #FFF; margin-bottom: 20px; transition: all 0.3s ease-in-out; box-shadow: 0px 14px 47px 0px transparent; } .wpo-faq-section .accordion-item:last-child, .wpo-faq-section-s2 .accordion-item:last-child { margin-bottom: 0; } .wpo-faq-section .accordion-item .accordion-header, .wpo-faq-section-s2 .accordion-item .accordion-header { text-align: left; padding: 20px 35px; border: none; outline: none; cursor: pointer; transition: all 0.3s ease-in-out; width: 100%; border-radius: 10px; color: #222; font-family: "Plus Jakarta Sans"; font-size: 18px; font-weight: 700; background: transparent; position: relative; } @media (max-width: 1199px) { .wpo-faq-section .accordion-item .accordion-header, .wpo-faq-section-s2 .accordion-item .accordion-header { padding: 15px 15px; font-size: 15px; } } .wpo-faq-section .accordion-item .accordion-header::before, .wpo-faq-section-s2 .accordion-item .accordion-header::before { position: absolute; content: "\f121"; font-family: flaticon_logistics !important; right: 30px; top: 50%; transform: translateY(-50%); border-radius: 4px; background: #0B3742; width: 35px; height: 35px; line-height: 35px; text-align: center; color: #fff; transition: all 0.3s ease-in-out; } @media (max-width: 1199px) { .wpo-faq-section .accordion-item .accordion-header::before, .wpo-faq-section-s2 .accordion-item .accordion-header::before { right: 15px; width: 25px; height: 25px; line-height: 25px; } } .wpo-faq-section .accordion-item.active, .wpo-faq-section-s2 .accordion-item.active { border: 1px solid transparent; box-shadow: 0px 14px 47px 0px rgba(40, 46, 58, 0.08); } .wpo-faq-section .accordion-item.active .accordion-header::before, .wpo-faq-section-s2 .accordion-item.active .accordion-header::before { content: "\f13c"; background: #FF7236; } .wpo-faq-section .accordion-content, .wpo-faq-section-s2 .accordion-content { display: none; overflow: hidden; transition: all 0.3s ease-in-out; padding: 35px 30px; padding-top: 0; } @media (max-width: 1199px) { .wpo-faq-section .accordion-content, .wpo-faq-section-s2 .accordion-content { padding: 15px 15px; } } .wpo-faq-section .accordion-content p, .wpo-faq-section-s2 .accordion-content p { color: #5A627D; font-size: 16px; font-weight: 400; line-height: 28px; margin-bottom: 0; } .wpo-faq-section .accordion-item.active .accordion-content, .wpo-faq-section-s2 .accordion-item.active .accordion-content { display: block; transition: all 0.3s ease-in-out; } .wpo-faq-section .accordion-content, .wpo-faq-section-s2 .accordion-content { transition: max-height 0.3s ease-out; overflow: hidden; } .wpo-faq-section .accordion-item.active .accordion-content, .wpo-faq-section-s2 .accordion-item.active .accordion-content { display: block; transition: all 0.3s ease-in-out; } /*5.14 wpo-blog-section-s2 */ .wpo-blog-section-s2 { position: relative; z-index: 1; background: url(../images/blog/bg-img-2.jpg) no-repeat center/cover; } .wpo-blog-section-s2 .wpo-section-title { text-align: left; margin-bottom: 0; } @media (max-width: 991px) { .wpo-blog-section-s2 .wpo-section-title { text-align: center; } } .wpo-blog-section-s2 .f-btn { text-align: end; } @media (max-width: 991px) { .wpo-blog-section-s2 .f-btn { margin-top: 20px; text-align: center; } } .wpo-blog-section-s2 .f-btn .theme-btn, .wpo-blog-section-s2 .f-btn .view-cart-btn { font-weight: 600; } .wpo-blog-section-s2 .blog-slider { margin-top: 45px; overflow: hidden; } .wpo-blog-section-s2 .swiper-container-horizontal > .swiper-pagination-bullets { bottom: auto; } .wpo-blog-section-s2 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 10px; } .wpo-blog-section-s2 .swiper-pagination-bullet { background: #999292; position: relative; } .wpo-blog-section-s2 .swiper-pagination-bullet::before { position: absolute; left: 50%; top: 50%; content: ""; width: 26px; height: 26px; border-radius: 100px; border: 1px solid #FF7236; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .wpo-blog-section-s2 .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #FF7236; } .wpo-blog-section-s2 .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 1; visibility: visible; } .blog-card-s2 { margin-bottom: 30px; } .blog-card-s2 img { width: 100%; } .blog-card-s2 .content { position: relative; z-index: 1; padding: 25px; margin: 0 30px; margin-top: -100px; background: #fff; transition: all 0.3s ease-in-out; } @media (max-width: 1399px) { .blog-card-s2 .content { padding: 20px 20px; margin: 0 10px; margin-top: -100px; } } .blog-card-s2 .content .comment { display: flex; align-items: center; flex-wrap: wrap; } @media (max-width: 1199px) { .blog-card-s2 .content .comment { flex-direction: column; align-items: start; } } .blog-card-s2 .content .comment li { display: flex; align-items: center; margin-right: 10px; } .blog-card-s2 .content .comment li i { color: #FF7236; font-size: 18px; transition: all 0.3s ease-in-out; } .blog-card-s2 .content .comment li span { color: #4D4B4B; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: -0.32px; padding-left: 7px; transition: all 0.3s ease-in-out; } .blog-card-s2 .content h2 { margin-bottom: 18px; line-height: 25px; } .blog-card-s2 .content h2 a { color: #042127; font-family: "Plus Jakarta Sans"; font-size: 20px; font-weight: 700; line-height: 25px; letter-spacing: -0.66px; transition: all 0.3s ease-in-out; } @media (max-width: 1199px) { .blog-card-s2 .content h2 a { font-size: 18px; line-height: 15px; } } .blog-card-s2 .content h2 a:hover { color: #FF7236; } .blog-card-s2 .content .b-btn a { color: #222; font-size: 15px; font-weight: 500; line-height: 25px; transition: all 0.3s ease-in-out; } .blog-card-s2 .content .b-btn a i { width: 18px; height: 18px; line-height: 18px; background: #FF7236; color: #fff; border-radius: 100px; display: inline-block; font-size: 8px; text-align: center; margin-left: 8px; transition: all 0.3s ease-in-out; } .blog-card-s2:hover .content { background: #0D3944; } .blog-card-s2:hover .content .comment li i { color: #fff; } .blog-card-s2:hover .content .comment li span { color: #fff; } .blog-card-s2:hover .content h2 a { color: #fff; } .blog-card-s2:hover .content .b-btn a { color: #fff; } .blog-card-s2:hover .content .b-btn a i { background: #fff; color: #0BA08A; } /*5.15 wpo-get-touch-section */ .wpo-get-touch-section, .wpo-get-touch-section-s2 { position: relative; z-index: 1; text-align: left; background: url(../images/get-touch.jpg) no-repeat center/cover; overflow: hidden; } @media (max-width: 991px) { .wpo-get-touch-section, .wpo-get-touch-section-s2 { text-align: center; } } .wpo-get-touch-section::before, .wpo-get-touch-section-s2::before { position: absolute; right: 0; top: 0; width: 80%; height: 100%; content: ""; background: #fff; -webkit-clip-path: polygon(23% 0, 100% 0, 100% 100%, 8% 100%); clip-path: polygon(23% 0, 100% 0, 100% 100%, 8% 100%); z-index: -1; } @media (max-width: 1650px) { .wpo-get-touch-section::before, .wpo-get-touch-section-s2::before { width: 90%; } } @media (max-width: 991px) { .wpo-get-touch-section::before, .wpo-get-touch-section-s2::before { width: 100%; -webkit-clip-path: unset; clip-path: unset; } } .wpo-get-touch-section .wpo-section-title, .wpo-get-touch-section-s2 .wpo-section-title { text-align: left; } .wpo-get-touch-section .fild, .wpo-get-touch-section .fild-textarea, .wpo-get-touch-section-s2 .fild, .wpo-get-touch-section-s2 .fild-textarea { width: 100%; height: 72px; color: #222; font-size: 18px; font-weight: 400; line-height: 56px; padding: 0 25px; margin-bottom: 35px; border-radius: 5px; background: #F2F2F2; border: 1px solid transparent; transition: all 0.3s; } @media (max-width: 757px) { .wpo-get-touch-section .fild, .wpo-get-touch-section .fild-textarea, .wpo-get-touch-section-s2 .fild, .wpo-get-touch-section-s2 .fild-textarea { height: 60px; margin-bottom: 20px; } } @media (max-width: 757px) { .wpo-get-touch-section .fild, .wpo-get-touch-section .fild-textarea, .wpo-get-touch-section-s2 .fild, .wpo-get-touch-section-s2 .fild-textarea { padding: 0 15px; } } .wpo-get-touch-section .fild:focus-visible, .wpo-get-touch-section .fild-textarea:focus-visible, .wpo-get-touch-section-s2 .fild:focus-visible, .wpo-get-touch-section-s2 .fild-textarea:focus-visible { outline: -webkit-focus-ring-color auto 0px; border: 1px solid #FF7236; background: transparent; } .wpo-get-touch-section .fild-textarea, .wpo-get-touch-section-s2 .fild-textarea { height: 203px; } @media (max-width: 757px) { .wpo-get-touch-section .fild-textarea, .wpo-get-touch-section-s2 .fild-textarea { height: 150px; } } .wpo-get-touch-section .theme-btn, .wpo-get-touch-section .view-cart-btn, .wpo-get-touch-section-s2 .theme-btn, .wpo-get-touch-section-s2 .view-cart-btn { background: #0D3944; text-transform: capitalize; font-weight: 600; } .wpo-get-touch-section .theme-btn i, .wpo-get-touch-section .view-cart-btn i, .wpo-get-touch-section-s2 .theme-btn i, .wpo-get-touch-section-s2 .view-cart-btn i { position: relative; top: 2px; } .wpo-get-touch-section .shape, .wpo-get-touch-section-s2 .shape { position: absolute; left: 30%; top: 50%; transform: translate(-50%, -50%); z-index: -1; height: 102%; } @media (max-width: 1650px) { .wpo-get-touch-section .shape, .wpo-get-touch-section-s2 .shape { left: 25%; } } @media (max-width: 1199px) { .wpo-get-touch-section .shape, .wpo-get-touch-section-s2 .shape { left: 20%; } } @media (max-width: 991px) { .wpo-get-touch-section .shape, .wpo-get-touch-section-s2 .shape { display: none; } } .wpo-get-touch-section-s2 { background: transparent; } .wpo-get-touch-section-s2 .theme-btn, .wpo-get-touch-section-s2 .view-cart-btn { margin: 0 auto; text-align: center; display: block; } /*5.16 wpo-cta-section-s2 */ .wpo-cta-section-s2, .wpo-cta-section-s3 { position: relative; margin: -180px 0 -148px; } @media (max-width: 991px) { .wpo-cta-section-s2, .wpo-cta-section-s3 { margin: 50px 0; } } .wpo-cta-section-s2 .cta-wrapr, .wpo-cta-section-s3 .cta-wrapr { border-radius: 19px; } .wpo-cta-section-s2 .cta-wrapr .wpo-section-title .theme-btn, .wpo-cta-section-s2 .cta-wrapr .wpo-section-title .view-cart-btn, .wpo-cta-section-s3 .cta-wrapr .wpo-section-title .theme-btn, .wpo-cta-section-s3 .cta-wrapr .wpo-section-title .view-cart-btn { border-radius: 5px; overflow: hidden; } /*-------------------------------------------------------------- 6. Home-style-3 --------------------------------------------------------------*/ /*6.1 wpo-get-quate-section-s2 */ .wpo-get-quate-section-s2 { margin-top: -70px; } @media (max-width: 991px) { .wpo-get-quate-section-s2 { margin-top: 0; } } .wpo-get-quate-section-s2 .quote-form { max-width: 485px; border-radius: 9px; border: 13px solid #FFF; box-shadow: 0px 9px 16px 0px rgba(0, 0, 0, 0.07); margin-left: 0; } @media (max-width: 1199px) { .wpo-get-quate-section-s2 .quote-form { padding: 60px 12px; } } @media (max-width: 991px) { .wpo-get-quate-section-s2 .quote-form { padding: 40px 40px; margin: 40px 0; } } @media (max-width: 575px) { .wpo-get-quate-section-s2 .quote-form { padding: 30px 20px; margin: 40px 0; } } .wpo-get-quate-section-s2 .wpo-section-title { text-align: left; margin-bottom: 0; max-width: 711px; } .wpo-get-quate-section-s2 .wpo-section-title h4 { color: #000; font-family: "DM Sans"; font-size: 30px; font-weight: 500; line-height: 49px; margin: 30px 0 45px; } @media (max-width: 767px) { .wpo-get-quate-section-s2 .wpo-section-title h4 { font-size: 25px; } } @media (max-width: 575px) { .wpo-get-quate-section-s2 .wpo-section-title h4 { font-size: 20px; line-height: 30px; margin: 20px 0 30px; } } .wpo-get-quate-section-s2 .wpo-section-title span { color: #000; font-size: 22px; font-weight: 600; line-height: 30px; letter-spacing: -0.66px; position: relative; padding-left: 35px; } .wpo-get-quate-section-s2 .wpo-section-title span::before { position: absolute; left: 15px; top: 50%; content: "---"; transform: translate(-50%, -50%); color: #FF7236; } .wpo-get-quate-section-s2 .avatar { display: flex; align-items: center; padding-top: 25px; margin-top: 25px; border-top: 1px solid rgba(6, 6, 6, 0.1); } @media (max-width: 575px) { .wpo-get-quate-section-s2 .avatar { flex-direction: column; align-items: start; } } .wpo-get-quate-section-s2 .avatar .image li { display: inline-block; margin: 0 -5px; } .wpo-get-quate-section-s2 .avatar .image li img { width: 40px; height: 40px; border-radius: 100px; } .wpo-get-quate-section-s2 .avatar p { margin-bottom: 0; color: #000; font-size: 16px; font-weight: 600; margin-left: 20px; position: relative; } @media (max-width: 575px) { .wpo-get-quate-section-s2 .avatar p { margin-left: 0px; margin-top: 20px; } } .wpo-get-quate-section-s2 .avatar p::before { position: absolute; content: ""; left: 0; bottom: -25px; width: 100%; height: 100%; background: url(../images/avatar/shape.svg) no-repeat; } /*6.2 wpo-partner-section-s3 */ .wpo-partner-section-s3 .container { border-bottom: 1px solid #E3E5E7; } /*6.3 wpo-introCounter-section */ .wpo-introCounter-section { position: relative; } .wpo-introCounter-section .top-content { background: url(../images/introCounter-bg.jpg) no-repeat center/cover; height: 540px; position: relative; } @media (max-width: 767px) { .wpo-introCounter-section .top-content { height: 400px; } } .wpo-introCounter-section .top-content .count-wrap { width: 476px; margin-left: auto; } @media (max-width: 575px) { .wpo-introCounter-section .top-content .count-wrap { width: 100%; } } .wpo-introCounter-section .top-content .count-wrap .count-item { width: 238px; height: 270px; background: #0BA08A; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-left: auto; } @media (max-width: 767px) { .wpo-introCounter-section .top-content .count-wrap .count-item { width: 238px; height: 200px; } } @media (max-width: 575px) { .wpo-introCounter-section .top-content .count-wrap .count-item { margin: 0 auto; } } .wpo-introCounter-section .top-content .count-wrap .count-item h2 { margin-bottom: 0; line-height: 90px; } @media (max-width: 767px) { .wpo-introCounter-section .top-content .count-wrap .count-item h2 { line-height: 60px; } } .wpo-introCounter-section .top-content .count-wrap .count-item h2 span { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FFF; font-size: 90px; font-weight: 700; text-transform: lowercase; color: transparent; } @media (max-width: 767px) { .wpo-introCounter-section .top-content .count-wrap .count-item h2 span { font-size: 50px; } } .wpo-introCounter-section .top-content .count-wrap .count-item p { color: #FFF; font-size: 16px; font-weight: 500; position: relative; margin-bottom: 0; font-family: "Plus Jakarta Sans"; display: inline-block; z-index: 1; } .wpo-introCounter-section .top-content .count-wrap .count-item p::before { position: absolute; content: ""; width: 31px; height: 31px; border-radius: 100px; right: 0; top: -5px; background: #FF7236; z-index: -1; } .wpo-introCounter-section .top-content .count-wrap .count-item.s2 { margin-right: auto; background: #FF7236; margin-left: 0; } @media (max-width: 575px) { .wpo-introCounter-section .top-content .count-wrap .count-item.s2 { margin: 0 auto; } } .wpo-introCounter-section .bg-text { position: absolute; left: -183px; top: 60%; z-index: -1; width: 100%; display: block; } @media (max-width: 1199px) { .wpo-introCounter-section .bg-text { display: none; } } .wpo-introCounter-section .bg-text h3 { text-align: center; font-family: "DM Sans"; font-size: 190px; font-weight: 500; line-height: 69px; margin-bottom: 0; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #0B3742; color: transparent; opacity: 0.3; display: block; width: 123%; } .wpo-introCounter-section .bottom-content { display: flex; align-items: center; justify-content: space-between; margin-top: 65px; } @media (max-width: 767px) { .wpo-introCounter-section .bottom-content { flex-direction: column; margin-top: 40px; } } .wpo-introCounter-section .bottom-content p { margin-bottom: 0; color: #000; font-size: 26px; font-weight: 500; line-height: 48px; max-width: 900px; } @media (max-width: 1199px) { .wpo-introCounter-section .bottom-content p { max-width: 700px; } } @media (max-width: 991px) { .wpo-introCounter-section .bottom-content p { max-width: 500px; } } @media (max-width: 767px) { .wpo-introCounter-section .bottom-content p { max-width: 100%; font-size: 20px; line-height: 35px; } } .wpo-introCounter-section .bottom-content a { width: 106px; height: 106px; border-radius: 60px; background: #FF7236; text-align: center; line-height: 106px; transform: rotate(-30deg); color: #fff; } @media (max-width: 767px) { .wpo-introCounter-section .bottom-content a { margin-top: 20px; } } .wpo-introCounter-section .bottom-content a::before { position: absolute; left: 2px; bottom: -5px; content: ""; width: 106px; height: 106px; border-radius: 60px; border: 1px solid #000; transition: all 0.3s ease-in-out; } .wpo-introCounter-section .bottom-content a:hover::before { left: 0px; bottom: 0px; } .wpo-introCounter-section .bottom-content a i { font-size: 24px; } /*6.4 wpo-features-section-s3 */ .wpo-features-section-s3 { padding-bottom: 90px; } @media (max-width: 991px) { .wpo-features-section-s3 { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-features-section-s3 { padding-bottom: 50px; } } .wpo-features-section-s3 .col:last-child .feature-card-s3::before { display: none; } .feature-card-s3 { position: relative; z-index: 1; margin-bottom: 30px; } .feature-card-s3::before { position: absolute; right: 0; content: url(../images/feature/shape-right.svg); top: 75px; } .feature-card-s3 span { width: 27px; height: 28px; line-height: 28px; display: block; color: #000; border-radius: 100px; background: #FFB966; color: #000; text-align: center; font-size: 14px; font-weight: 700; text-transform: capitalize; position: absolute; left: 80px; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .feature-card-s3 .image { transition: all 0.3s ease-in-out; width: 80px; height: 120px; border-radius: 100px; position: absolute; right: 60px; top: 0; transform: rotate(-130.18deg); opacity: 0; visibility: hidden; } .feature-card-s3 .content i { font-size: 60px; color: #FF7236; } .feature-card-s3 .content h2 { margin-bottom: 0; } .feature-card-s3 .content h2 a { font-family: "Plus Jakarta Sans"; font-size: 22px; font-weight: 600; line-height: 54px; color: #042127; } .feature-card-s3 .content p { color: #535353; font-size: 16px; font-weight: 400; line-height: 32px; margin-bottom: 15px; max-width: 324px; } .feature-card-s3 .content .feature-single-link { color: #000; font-size: 16px; font-weight: 500; position: relative; transition: all 0.3s ease-in-out; } .feature-card-s3 .content .feature-single-link::before { position: absolute; left: -2px; top: -2px; content: url(../images/feature/shape.svg); width: 33px; height: 25px; z-index: -1; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .feature-card-s3 .content .feature-single-link i { font-size: 32px; color: #000; padding-left: 10px; transition: all 0.3s ease-in-out; } .feature-card-s3 .content .feature-single-link i::before { line-height: 1px; top: 50%; position: absolute; transition: all 0.3s ease-in-out; } .feature-card-s3:hover .image { opacity: 1; visibility: visible; } .feature-card-s3:hover span { opacity: 1; visibility: visible; } .feature-card-s3:hover .content .feature-single-link::before { opacity: 1; visibility: visible; } /*6.5 wpo-funfact-section-s3 */ .wpo-funfact-section-s3 { background: transparent; margin: 0; padding: 0; margin-bottom: -160px; } @media (max-width: 991px) { .wpo-funfact-section-s3 { margin: 0; } } /*6.6 wpo-service-section-s3 */ .wpo-service-section-s3, .wpo-service-section-s4 { background: #F9F4F2; padding-top: 285px; } @media (max-width: 991px) { .wpo-service-section-s3, .wpo-service-section-s4 { padding-top: 80px; margin-top: 80px; } } .wpo-service-section-s3 .wpo-section-title, .wpo-service-section-s4 .wpo-section-title { text-align: left; margin-bottom: 0; } .wpo-service-section-s3 .service-btn, .wpo-service-section-s4 .service-btn { text-align: end; } @media (max-width: 991px) { .wpo-service-section-s3 .service-btn, .wpo-service-section-s4 .service-btn { text-align: left; margin-top: 20px; } } .wpo-service-section-s3 .service-card-s2, .wpo-service-section-s4 .service-card-s2 { position: relative; border: 1px solid transparent; } .wpo-service-section-s3 .service-card-s2 .top-shape, .wpo-service-section-s4 .service-card-s2 .top-shape { position: absolute; left: -1px; top: -1px; transition: all 0.3s ease-in-out; opacity: 0; visibility: hidden; } .wpo-service-section-s3 .service-card-s2 .bottom-shape, .wpo-service-section-s4 .service-card-s2 .bottom-shape { position: absolute; right: -1px; bottom: -1px; transition: all 0.3s ease-in-out; opacity: 0; visibility: hidden; } .wpo-service-section-s3 .service-card-s2:hover .top-shape, .wpo-service-section-s4 .service-card-s2:hover .top-shape { opacity: 1; visibility: visible; } .wpo-service-section-s3 .service-card-s2:hover .bottom-shape, .wpo-service-section-s4 .service-card-s2:hover .bottom-shape { opacity: 1; visibility: visible; } .wpo-service-section-s3 .slick-slide img, .wpo-service-section-s4 .slick-slide img { display: block; margin: 0 auto; } .wpo-service-section-s3 .service-slider-s2, .wpo-service-section-s4 .service-slider-s2 { padding-top: 40px; margin: 0 120px; } @media (max-width: 1730px) { .wpo-service-section-s3 .service-slider-s2, .wpo-service-section-s4 .service-slider-s2 { margin: 0 50px; } } @media (max-width: 1699px) { .wpo-service-section-s3 .service-slider-s2, .wpo-service-section-s4 .service-slider-s2 { margin: 0 20px; } } .wpo-service-section-s3 .service-slider-s2 .slick-list, .wpo-service-section-s4 .service-slider-s2 .slick-list { margin: 0 -10px; } .wpo-service-section-s3 .slick-dots li, .wpo-service-section-s4 .slick-dots li { height: 7px; width: 65px; border: 0; border-radius: 100px; color: #0B3742; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.06); transition: all 0.3s ease-in-out; overflow: hidden; position: relative; } @media (max-width: 767px) { .wpo-service-section-s3 .slick-dots li, .wpo-service-section-s4 .slick-dots li { width: 20px; } } .wpo-service-section-s3 .slick-dots li.slick-active, .wpo-service-section-s4 .slick-dots li.slick-active { background: #0B3742; } .wpo-service-section-s4 { padding-top: 120px; } @media (max-width: 991px) { .wpo-service-section-s4 { padding-top: 90px; } } @media (max-width: 767px) { .wpo-service-section-s4 { padding-top: 80px; } } /*6.7 wpo-get-quate-section-s3 */ .wpo-get-quate-section-s3 { background: #072E36; position: relative; padding-bottom: 60px; overflow: hidden; z-index: 1; } .wpo-get-quate-section-s3 .wpo-section-title { margin-bottom: 0; text-align: left; max-width: 530px; } .wpo-get-quate-section-s3 .wpo-section-title h3 { color: #fff; margin-bottom: 42px; } @media (max-width: 767px) { .wpo-get-quate-section-s3 .wpo-section-title h3 { margin-bottom: 25px; } } .wpo-get-quate-section-s3 .text { margin-bottom: 65px; } @media (max-width: 767px) { .wpo-get-quate-section-s3 .text { margin-bottom: 25px; } } .wpo-get-quate-section-s3 .text p { color: #C2C2C2; font-size: 16px; font-weight: 400; line-height: 29px; margin-bottom: 0; max-width: 485px; margin: 0; padding-left: 10px; border-left: 1px solid #FF7236; } .wpo-get-quate-section-s3 .content ul { display: flex; align-items: center; max-width: 680px; } @media (max-width: 767px) { .wpo-get-quate-section-s3 .content ul { flex-direction: column; } } .wpo-get-quate-section-s3 .content ul li { display: flex; justify-content: space-around; margin-bottom: 60px; } @media (max-width: 767px) { .wpo-get-quate-section-s3 .content ul li { margin-bottom: 20px; } } .wpo-get-quate-section-s3 .content ul li .icon i { font-size: 45px; color: #FF7236; } .wpo-get-quate-section-s3 .content ul li .icon-text { margin-left: 10px; } .wpo-get-quate-section-s3 .content ul li .icon-text h2 { color: #FFF; font-size: 18px; font-weight: 700; line-height: 43px; margin-bottom: 0; } .wpo-get-quate-section-s3 .content ul li .icon-text span { color: #C2C2C2; font-size: 16px; font-weight: 400; line-height: 28.8px; } .wpo-get-quate-section-s3 .shape { position: absolute; left: 0; bottom: 0; z-index: -1; } @media (max-width: 991px) { .wpo-get-quate-section-s3 .shape { display: none; } } .wpo-get-quate-section-s3 .left-content { width: 840px; height: 100%; background: url(../images/get-quate.jpg) no-repeat center/cover; position: absolute; right: 0; top: 0; z-index: 1; } @media (max-width: 1399px) { .wpo-get-quate-section-s3 .left-content { width: 510px; } } @media (max-width: 1199px) { .wpo-get-quate-section-s3 .left-content { width: 400px; } } @media (max-width: 991px) { .wpo-get-quate-section-s3 .left-content { display: none; } } .wpo-get-quate-section-s3 .left-content .wrap { padding: 30px 50px; background: #FF7236; position: absolute; bottom: 0; left: 0; width: 100%; display: flex; align-items: center; } @media (max-width: 1399px) { .wpo-get-quate-section-s3 .left-content .wrap { flex-direction: column; } } @media (max-width: 1199px) { .wpo-get-quate-section-s3 .left-content .wrap { padding: 30px 20px; } } .progres-card { max-width: 370px; display: flex; align-items: center; } .progres-card .block { position: relative; width: 130px; height: 130px; display: block; } .progres-card .box { position: relative; width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 50%; } .progres-card .box::before { position: absolute; content: ""; width: calc(100% + 15px); height: calc(100% + 15px); border-radius: 50%; border: 5px solid #FFF; left: 7px; top: 7px; } .progres-card .number { text-align: center; margin-bottom: 0; position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); color: #000; font-size: 20px; font-weight: 500; } .progres-card .number .sub { margin-left: -5px; } .progres-card .number::before { position: absolute; left: 50%; top: 50%; content: ""; width: 82px; height: 82px; border-radius: 100px; background: rgba(255, 255, 255, 0.23); transform: translate(-50%, -50%); } .progres-card .dots { display: block; position: absolute; z-index: 2; width: 100%; height: 100%; border-radius: 50%; transition: 2s transform, 2s opacity ease; } .progres-card .dots::after { position: absolute; content: ""; width: 20px; height: 20px; top: 10px; left: 50%; border-radius: 50%; background-color: #fff; transform: translateX(-50%); } .progres-card .svg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; fill: none; transform: rotate(320deg); } .progres-card .circle { stroke: url(#gradientStyle); stroke-width: 5px; stroke-dasharray: 340; stroke-dashoffset: 350; animation-duration: 2s; animation-timing-function: linear; animation-fill-mode: forwards; transition: 2s stroke-dashoffset; position: relative; } .progres-card .content { width: calc(100% - 130px); padding-left: 20px; } .progres-card .content h3 { color: #FFF; font-size: 20px; font-weight: 700; line-height: 54px; margin-bottom: 0; } .progres-card .content span { color: #FFF; font-size: 16px; font-weight: 400; line-height: 28.8px; } /*6.8 wpo-pricing-section-s2 */ .wpo-pricing-section-s2 .shape-rigth { position: absolute; right: 100px; top: 80px; z-index: -1; } @media (max-width: 757px) { .wpo-pricing-section-s2 .shape-rigth { display: none; } } .pric-card-s2 { border-radius: 9px; border: 1px solid #F1F1F9; background: #FFF; box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.05); text-align: center; margin-bottom: 30px; } .pric-card-s2 .title { padding: 65px 20px 28px; } .pric-card-s2 .title h3 { color: #1B1A1A; font-size: 24px; font-weight: 700; line-height: 26px; } .pric-card-s2 .title span { color: #595D6A; font-size: 15px; font-weight: 500; line-height: 26px; } .pric-card-s2 .mid-title { padding: 20px; padding-top: 30px; background: url(../images/pric-bg-1.jpg) no-repeat center/cover; transition: all 0.3s ease-in-out; position: relative; margin-bottom: 25px; } .pric-card-s2 .mid-title::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: transparent; transition: all 0.3s ease-in-out; z-index: -1; } .pric-card-s2 .mid-title h3 { color: #FF7236; font-size: 57px; font-weight: 800; line-height: 36px; text-transform: capitalize; margin-bottom: 0; } .pric-card-s2 .mid-title h3 span { color: #434554; font-size: 18px; font-weight: 500; line-height: 36px; text-transform: capitalize; transition: all 0.3s ease-in-out; } .pric-card-s2 .mid-title h4 { color: #434554; font-size: 18px; font-weight: 700; line-height: 36px; text-transform: capitalize; margin-bottom: 0; transition: all 0.3s ease-in-out; } .pric-card-s2:hover .mid-title { background: url(../images/pric-bg-2.jpg) no-repeat center/cover; -webkit-clip-path: polygon(50% 10%, 100% 0, 100% 70%, 48% 100%, 0 70%, 0% 0%); clip-path: polygon(50% 10%, 100% 0, 100% 70%, 48% 100%, 0 70%, 0% 0%); } .pric-card-s2:hover .mid-title::before { background: rgba(5, 38, 52, 0.67); } .pric-card-s2:hover .mid-title h3 span { color: #fff; } .pric-card-s2:hover .mid-title h4 { color: #fff; } .pric-card-s2 ul li { color: #5E5F68; font-size: 18px; font-weight: 400; line-height: 30px; margin-bottom: 10px; } .pric-card-s2 ul li:last-child { margin-bottom: 0; } .pric-card-s2 .pric-btn { color: #000; font-size: 24px; font-weight: 700; line-height: 36px; text-transform: capitalize; position: relative; margin-top: 30px; padding-bottom: 20px; } .pric-card-s2 .pric-btn h4 { margin-bottom: 0; } .pric-card-s2 .pric-btn span { color: #000; font-size: 18px; font-weight: 400; line-height: 36px; text-transform: capitalize; } .pric-card-s2 .pric-btn .shape { position: absolute; left: 50%; bottom: -10px; transform: translate(-50%, -50%); } .pric-card-s2 .theme-btn, .pric-card-s2 .view-cart-btn { border-radius: 8px; border: 1px solid #DEE1ED; background: transparent; padding: 20px 85px; overflow: hidden; color: #1B1D23; font-size: 16px; font-weight: 500; text-transform: capitalize; margin-top: 20px; margin-bottom: 42px; } .pric-card-s2 .theme-btn::after, .pric-card-s2 .view-cart-btn::after { background: #FF7236; } .pric-card-s2 .theme-btn::before, .pric-card-s2 .view-cart-btn::before { width: 51%; background: #FF7236; } /*6.9 wpo-project-section-s3 */ .wpo-project-section-s3 .project-wrap, .wpo-project-section-s5 .project-wrap { margin: 0 30px; } .wpo-project-section-s3 .project-card-s2, .wpo-project-section-s5 .project-card-s2 { position: relative; overflow: hidden; } .wpo-project-section-s3 .project-card-s2:hover, .wpo-project-section-s5 .project-card-s2:hover { box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.09); } .wpo-project-section-s3 .project-card-s2:hover .content, .wpo-project-section-s5 .project-card-s2:hover .content { opacity: 1; visibility: visible; left: 0; } .wpo-project-section-s3 .project-card-s2 .content, .wpo-project-section-s5 .project-card-s2 .content { margin: 0; position: absolute; opacity: 0; visibility: hidden; left: -30%; bottom: 0; background: #fff; padding: 22px 30px; max-width: 384px; width: 100%; border-left: 2px solid #FF7236; overflow: hidden; transition: all 0.3s ease-in-out; } @media (max-width: 1399px) { .wpo-project-section-s3 .project-card-s2 .content, .wpo-project-section-s5 .project-card-s2 .content { flex-direction: column; justify-content: center; text-align: center; padding: 15px 15px; } } .wpo-project-section-s3 .project-card-s2 .content::before, .wpo-project-section-s5 .project-card-s2 .content::before { position: absolute; left: 2px; top: 50%; transform: translateX(-50%); content: ""; width: 15px; height: 14px; background: #FF7236; z-index: 1; -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%); clip-path: polygon(100% 50%, 0 0, 0 100%); } .wpo-project-section-s3 .project-card-s2 .content h2, .wpo-project-section-s5 .project-card-s2 .content h2 { margin-bottom: 0; } .wpo-project-section-s3 .project-card-s2 .content h2 a, .wpo-project-section-s5 .project-card-s2 .content h2 a { color: #08112D; font-family: "DM Sans"; font-size: 20px; font-weight: 700; text-transform: capitalize; } .wpo-project-section-s3 .project-card-s2 .content .icon, .wpo-project-section-s5 .project-card-s2 .content .icon { transform: rotate(0); } .wpo-project-section-s5 { padding-bottom: 90px; } @media (max-width: 991px) { .wpo-project-section-s5 { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-project-section-s5 { padding-bottom: 50px; } } /*6.10 wpo-process-section-s3 */ .wpo-process-section-s3 { position: relative; z-index: -1; background: url(../images/process-bg-3.png) no-repeat center/cover; padding-top: 240px; padding-bottom: 90px; margin-top: -170px; } @media (max-width: 991px) { .wpo-process-section-s3 { padding-bottom: 40px; } } @media (max-width: 767px) { .wpo-process-section-s3 { padding-bottom: 30px; } } .wpo-process-section-s3::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #ffc2a9; opacity: 0.09; } .wpo-process-section-s3 .shape { position: absolute; left: 0; bottom: 0; z-index: -1; } @media (max-width: 991px) { .wpo-process-section-s3 .shape { display: none; } } .wpo-process-section-s3 .item .icon { background: #fff; } .wpo-process-section-s3 .item:hover .icon { outline: 1px dotted #FF7236; } .wpo-process-section-s3 .item .shape { top: 56%; right: -130%; } @media (max-width: 1399px) { .wpo-process-section-s3 .item .shape { right: -110%; } } @media (max-width: 1199px) { .wpo-process-section-s3 .item .shape { right: -100%; } } /*6.11 wpo-testimonial-section-s3 */ .wpo-testimonial-section-s3 { position: relative; } .wpo-testimonial-section-s3::before { position: absolute; right: 0; top: 0; height: 100%; content: ""; width: 41%; background: #0D3944; z-index: -1; } @media (max-width: 991px) { .wpo-testimonial-section-s3::before { display: none; } } .wpo-testimonial-section-s3 .content-wrap .wpo-section-title { text-align: left; margin-bottom: 55px; } @media (max-width: 991px) { .wpo-testimonial-section-s3 .content-wrap .wpo-section-title { margin-bottom: 40px; } } @media (max-width: 757px) { .wpo-testimonial-section-s3 .content-wrap .wpo-section-title { margin-bottom: 20px; } } @media (max-width: 575px) { .wpo-testimonial-section-s3 .content-wrap .content { padding-bottom: 50px; } } .wpo-testimonial-section-s3 .content-wrap .content p { color: #222; font-size: 30px; font-weight: 500; line-height: 52px; letter-spacing: -0.9px; margin-bottom: 35px; } @media (max-width: 1399px) { .wpo-testimonial-section-s3 .content-wrap .content p { font-size: 25px; line-height: 40px; } } @media (max-width: 575px) { .wpo-testimonial-section-s3 .content-wrap .content p { font-size: 20px; line-height: 30px; } } .wpo-testimonial-section-s3 .content-wrap .content .client-name { border-top: 1px solid rgba(24, 24, 94, 0.1); padding-top: 40px; } .wpo-testimonial-section-s3 .content-wrap .content .client-name h4 { color: #222; font-family: "DM Sans"; font-size: 22px; font-weight: 700; line-height: 30px; letter-spacing: -0.66px; margin: 0; display: inline; } .wpo-testimonial-section-s3 .content-wrap .content .client-name span { display: inline; color: #696969; font-size: 14px; font-weight: 400; } .wpo-testimonial-section-s3 .left-image { max-width: 549px; max-height: 668px; margin-left: auto; position: relative; margin-right: -50px; } @media (max-width: 991px) { .wpo-testimonial-section-s3 .left-image { display: none; } } .wpo-testimonial-section-s3 .left-image .feedback { padding: 8px 24px; background: #FF7236; text-align: center; color: #FFF; font-size: 16px; font-weight: 600; line-height: 29px; display: inline-block; position: absolute; top: 10px; left: 0; display: flex; } .wpo-testimonial-section-s3 .left-image .feedback img { margin-right: 15px; } .wpo-testimonial-section-s3 .left-image .shape { position: absolute; left: -20px; top: -5px; z-index: -1; } .wpo-testimonial-section-s3 .img-slider { background: #fff; display: inline-block; padding: 20px 10px; position: absolute; left: 55%; bottom: 120px; z-index: 1; width: 400px; } @media (max-width: 991px) { .wpo-testimonial-section-s3 .img-slider { position: unset; margin-top: 20px; background: #0BA08A; } } @media (max-width: 450px) { .wpo-testimonial-section-s3 .img-slider { width: 100%; } } .wpo-testimonial-section-s3 .img-slider .image { padding: 5px; z-index: 1; width: 95px; height: 85px; position: relative; } .wpo-testimonial-section-s3 .img-slider .image::before { position: absolute; left: 0; bottom: 0; width: 95px; height: 85px; background: transparent; content: ""; z-index: -1; transition: all 0.3s ease-in-out; } @media (max-width: 450px) { .wpo-testimonial-section-s3 .img-slider .image::before { width: 74px; } } .wpo-testimonial-section-s3 .img-slider .image img { width: 95px; height: 85px; -o-object-fit: cover; object-fit: cover; } .wpo-testimonial-section-s3 .img-slider .image.slick-slide.slick-current.slick-active::before { background: #FF7236; } .wpo-testimonial-section-s3 .shape-2 { position: absolute; right: 0; bottom: 0; z-index: -1; } @media (max-width: 991px) { .wpo-testimonial-section-s3 .shape-2 { display: none; } } .wpo-testimonial-section-s3 .shape-3 { position: absolute; right: 0; top: 0; z-index: -1; } @media (max-width: 991px) { .wpo-testimonial-section-s3 .shape-3 { display: none; } } .wpo-testimonial-section-s3 .slick-arrow { position: absolute; top: auto; left: auto; right: 0; bottom: -30px; width: 50px; height: 50px; border-radius: 100px; background: #F1F1F1; transition: all 0.3s ease-in-out; z-index: 1; } .wpo-testimonial-section-s3 .slick-arrow.slick-prev, .wpo-testimonial-section-s3 .slick-arrow.slick-next { right: 80px; } @media (max-width: 575px) { .wpo-testimonial-section-s3 .slick-arrow.slick-prev, .wpo-testimonial-section-s3 .slick-arrow.slick-next { right: auto; left: 0px; } } .wpo-testimonial-section-s3 .slick-arrow.slick-prev::after, .wpo-testimonial-section-s3 .slick-arrow.slick-next::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: "\f125"; font-family: flaticon_logistics !important; font-size: 15px; color: rgb(8, 17, 45); transition: all 0.3s ease-in-out; } .wpo-testimonial-section-s3 .slick-arrow.slick-prev::before, .wpo-testimonial-section-s3 .slick-arrow.slick-next::before { display: none; } .wpo-testimonial-section-s3 .slick-arrow.slick-next { right: 0; } @media (max-width: 575px) { .wpo-testimonial-section-s3 .slick-arrow.slick-next { right: auto; left: 60px; } } .wpo-testimonial-section-s3 .slick-arrow.slick-next::after { content: "\f124"; } .wpo-testimonial-section-s3 .slick-arrow.slick-next::before { display: none; } .wpo-testimonial-section-s3 .slick-arrow:hover { background: rgb(6, 45, 53); } .wpo-testimonial-section-s3 .slick-arrow:hover::after { color: #fff; } /*6.12 wpo-faq-section-s2 */ .wpo-faq-section-s2 { background: url(../images/faq-bg.jpg) no-repeat center/cover; position: relative; z-index: 1; overflow: hidden; padding-bottom: 150px; } @media (max-width: 991px) { .wpo-faq-section-s2 { padding-bottom: 90px; } } @media (max-width: 757px) { .wpo-faq-section-s2 { padding-bottom: 80px; } } .wpo-faq-section-s2::before { position: absolute; left: 0; top: 0; width: 30%; height: 100%; content: ""; background: url(../images/faq-left.jpg) no-repeat center/cover; -webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%); z-index: -1; } @media (max-width: 991px) { .wpo-faq-section-s2::before { display: none; } } .wpo-faq-section-s2 .shape { position: absolute; left: 25%; top: 50%; transform: translate(-50%, -50%); z-index: -1; height: 102%; } @media (max-width: 1650px) { .wpo-faq-section-s2 .shape { left: 25%; } } @media (max-width: 1199px) { .wpo-faq-section-s2 .shape { left: 20%; } } @media (max-width: 991px) { .wpo-faq-section-s2 .shape { display: none; } } .wpo-faq-section-s2 .newsletter-s2 p { color: #FFF; font-size: 16px; font-weight: 500; line-height: 30px; } .wpo-faq-section-s2 .shape-right { position: absolute; right: 0; bottom: 0; z-index: -1; } .wpo-faq-section-s2 .icon { position: absolute; top: 50%; left: 40%; transform: translate(-50%, -50%); z-index: -1; } @media (max-width: 991px) { .wpo-faq-section-s2 .icon { display: none; } } .wpo-faq-section-s2 .wpo-section-title { text-align: left; margin-bottom: 30px; } @media (max-width: 1399px) { .wpo-faq-section-s2 .wpo-section-title h3 { font-size: 40px; } } @media (max-width: 1199px) { .wpo-faq-section-s2 .wpo-section-title h3 { font-size: 35px; } } /*6.13 wpo-cta-section-s3 */ .wpo-cta-section-s3 { margin: 0; margin-top: -70px; } @media (max-width: 991px) { .wpo-cta-section-s3 { margin-top: 90px; margin-bottom: 0; } } @media (max-width: 757px) { .wpo-cta-section-s3 { margin-top: 80px; margin-bottom: 0; } } /*6.14 wpo-blog-section-s3 */ .wpo-blog-section-s3 { padding-bottom: 90px; } @media (max-width: 991px) { .wpo-blog-section-s3 { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-blog-section-s3 { padding-bottom: 50px; } } .blog-card-s3 { background: #FFF; box-shadow: 0px 13px 26px 0px #EEF0F8; margin-bottom: 20px; } .blog-card-s3 .image { position: relative; } .blog-card-s3 .image img { width: 100%; } .blog-card-s3 .image span { color: #132047; text-align: center; font-size: 12px; font-weight: 700; line-height: 22px; text-transform: uppercase; padding: 7px 25px; position: absolute; left: 0; bottom: 0; background: #FFA800; } .blog-card-s3 .content { padding: 30px 25px; } .blog-card-s3 .content .comment { display: flex; align-items: center; flex-wrap: wrap; } @media (max-width: 1199px) { .blog-card-s3 .content .comment { flex-direction: column; align-items: start; } } .blog-card-s3 .content .comment li { display: flex; align-items: center; margin-right: 10px; } .blog-card-s3 .content .comment li i { color: #FF7236; font-size: 18px; transition: all 0.3s ease-in-out; } .blog-card-s3 .content .comment li span { color: #535353; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: -0.32px; padding-left: 7px; transition: all 0.3s ease-in-out; } .blog-card-s3 .content h2 { margin-top: 10px; margin-bottom: 18px; line-height: 25px; } .blog-card-s3 .content h2 a { color: #042127; font-family: "Plus Jakarta Sans"; font-size: 20px; font-weight: 600; line-height: 32px; transition: all 0.3s ease-in-out; } @media (max-width: 1199px) { .blog-card-s3 .content h2 a { font-size: 18px; line-height: 15px; } } .blog-card-s3 .content h2 a:hover { color: #FF7236; } .blog-card-s3 .content .blog-btn-content { border-top: 1px solid #EBEBEB; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; } .blog-card-s3 .content .blog-btn-content a { color: #FF7236; font-size: 16px; font-weight: 400; text-transform: capitalize; display: flex; align-items: center; } .blog-card-s3 .content .blog-btn-content a i { padding-left: 24px; } .blog-card-s3 .content .blog-btn-content a i::before { line-height: 30px; } .blog-card-s3 .content .blog-btn-content .icon { color: #000; } /*7. wpo-service-single-page */ .service-single-wrap .title-image { margin-bottom: 30px; } .service-single-wrap .title-image img { width: 100%; } .service-single-wrap h2 { color: #042127; font-size: 28px; font-weight: 700; text-transform: capitalize; margin-bottom: 20px; } .service-single-wrap h3 { color: #042127; font-size: 22px; font-weight: 700; line-height: 36px; margin-bottom: 20px; } .service-single-wrap p { color: #6e6e6e; font-size: 16px; font-weight: 400; line-height: 30.8px; max-width: 800px; margin-bottom: 40px; } .service-single-wrap .video-wrap { display: flex; align-items: center; margin-bottom: 35px; } @media (max-width: 1199px) { .service-single-wrap .video-wrap { display: block; } } .service-single-wrap .video-img { position: relative; max-width: 400px; width: 100%; } .service-single-wrap .video-content { margin-left: 40px; } @media (max-width: 1199px) { .service-single-wrap .video-content { margin-left: 0px; margin-top: 20px; } } .service-single-wrap .video-content h2 { color: #042127; font-size: 28px; font-weight: 700; text-transform: capitalize; } .service-single-wrap .video-content p { color: #6e6e6e; font-size: 16px; font-weight: 400; line-height: 28.8px; margin-bottom: 20px; } .service-single-wrap .video-content ul li { display: block; color: #5E5F63; font-size: 16px; font-weight: 400; line-height: 25px; padding-left: 40px; position: relative; margin-bottom: 15px; } .service-single-wrap .video-content ul li::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; line-height: 20px; background: #FFF; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05); border-radius: 30px; font-family: flaticon_logistics !important; content: "\f126"; text-align: center; } .service-single-wrap .quate { max-width: 850px; background: #FFF; box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06); position: relative; padding: 15px 70px 15px 25px; border-left: 4px solid #FF7236; margin-bottom: 0; color: #042127; font-size: 18px; font-weight: 500; line-height: 30px; margin-bottom: 60px; } .service-single-wrap .image-gallery h2 { display: block; } .service-single-wrap .image-gallery ul { margin: -15px; display: flex; flex-wrap: wrap; } @media (max-width: 1199px) { .service-single-wrap .image-gallery ul { margin: -5px; } } .service-single-wrap .image-gallery ul li { flex: 37%; max-width: 37%; padding: 15px; } @media (max-width: 1199px) { .service-single-wrap .image-gallery ul li { flex: 50%; max-width: 50%; padding: 5px; } } @media (max-width: 575px) { .service-single-wrap .image-gallery ul li { flex: 100%; max-width: 100%; } } .service-single-wrap .image-gallery ul li img { width: 100%; max-height: 218px; height: 100%; -o-object-fit: cover; object-fit: cover; } .service-single-wrap .image-gallery ul li:nth-child(1) { flex: 63%; max-width: 63%; } @media (max-width: 1199px) { .service-single-wrap .image-gallery ul li:nth-child(1) { flex: 50%; max-width: 50%; } } @media (max-width: 575px) { .service-single-wrap .image-gallery ul li:nth-child(1) { flex: 100%; max-width: 100%; } } .service-single-wrap .image-gallery ul li:last-child { flex: 63%; max-width: 63%; } @media (max-width: 1199px) { .service-single-wrap .image-gallery ul li:last-child { flex: 50%; max-width: 50%; } } @media (max-width: 575px) { .service-single-wrap .image-gallery ul li:last-child { flex: 100%; max-width: 100%; } } .service-single-wrap .accordion { margin-top: 50px; } .service-single-wrap .accordion-item { border: 1px solid rgba(4, 18, 31, 0.08); background: #FFF; margin-bottom: 20px; transition: all 0.3s ease-in-out; box-shadow: 0px 14px 47px 0px transparent; } .service-single-wrap .accordion-item:last-child { margin-bottom: 0; } .service-single-wrap .accordion-item .accordion-header { text-align: left; padding: 31px 35px; border: none; outline: none; cursor: pointer; transition: all 0.3s ease-in-out; width: 100%; color: #222; font-family: "Plus Jakarta Sans"; font-size: 20px; font-weight: 600; background: transparent; position: relative; } @media (max-width: 1199px) { .service-single-wrap .accordion-item .accordion-header { padding: 15px 15px; font-size: 15px; } } .service-single-wrap .accordion-item .accordion-header::before { position: absolute; content: "\f121"; font-family: flaticon_logistics !important; right: 30px; top: 50%; transform: translateY(-50%); width: 35px; height: 35px; line-height: 35px; text-align: center; color: #042127; transition: all 0.3s ease-in-out; } @media (max-width: 1199px) { .service-single-wrap .accordion-item .accordion-header::before { right: 15px; width: 25px; height: 25px; line-height: 25px; } } .service-single-wrap .accordion-item.active { border: 1px solid transparent; box-shadow: 0px 14px 47px 0px rgba(40, 46, 58, 0.08); } .service-single-wrap .accordion-item.active .accordion-header::before { content: "\f13c"; color: #FF7236; } .service-single-wrap .accordion-content { display: none; overflow: hidden; transition: all 0.3s ease-in-out; padding: 35px 30px; padding-top: 0; } @media (max-width: 1199px) { .service-single-wrap .accordion-content { padding: 15px 15px; } } .service-single-wrap .accordion-content p { color: #5A627D; font-size: 16px; font-weight: 400; line-height: 28px; margin-bottom: 0; max-width: 650px; } .service-single-wrap .accordion-item.active .accordion-content { display: block; transition: all 0.3s ease-in-out; } .service-single-wrap .accordion-content { transition: max-height 0.3s ease-out; overflow: hidden; } .service-single-wrap .accordion-item.active .accordion-content { display: block; transition: all 0.3s ease-in-out; } /*8. wpo-project-single-page */ .wpo-project-single-page .project-wrap { padding-right: 105px; } @media (max-width: 1399px) { .wpo-project-single-page .project-wrap { padding-right: 0; } } .project-top-info .wpo-section-title { text-align: left; max-width: 700px; margin-bottom: 0; } .project-top-info .wpo-section-title h2 { color: #042127; } .project-top-info .wpo-section-title h3 { margin-bottom: 20px; } .project-top-info .wpo-section-title p { color: #696969; font-size: 16px; font-weight: 400; line-height: 30px; margin-bottom: 50px; } .project-top-info .wpo-section-title .theme-btn, .project-top-info .wpo-section-title .view-cart-btn { text-transform: capitalize; font-weight: 600; } .project-top-info .project-info ul { max-width: 304px; width: 100%; padding: 50px; background: #F8F1EE; margin-left: auto; } @media (max-width: 991px) { .project-top-info .project-info ul { margin-right: auto; margin-left: 0; margin-top: 50px; } } @media (max-width: 767px) { .project-top-info .project-info ul { padding: 30px; } } .project-top-info .project-info ul li { display: block; text-align: left; margin-bottom: 40px; } .project-top-info .project-info ul li:last-child { margin-bottom: 0; } .project-top-info .project-info ul li h3 { color: #042127; font-size: 20px; font-weight: 600; line-height: 30px; letter-spacing: -0.6px; margin: 0; } .project-top-info .project-info ul li span { color: #696969; font-size: 16px; font-weight: 400; line-height: 30px; } .project-top-info .image-gallery { margin-top: 70px; margin-bottom: 70px; } @media (max-width: 767px) { .project-top-info .image-gallery { margin-top: 40px; margin-bottom: 40px; } } .project-top-info .image-gallery ul { margin: -12px; display: flex; flex-wrap: wrap; } @media (max-width: 1199px) { .project-top-info .image-gallery ul { margin: -5px; } } .project-top-info .image-gallery ul li { flex: 30%; max-width: 30%; padding: 12px; } @media (max-width: 1199px) { .project-top-info .image-gallery ul li { flex: 50%; max-width: 50%; padding: 5px; } } @media (max-width: 991px) { .project-top-info .image-gallery ul li { flex: 100%; max-width: 100%; padding: 5px; } } .project-top-info .image-gallery ul li img { width: 100%; max-height: 510px; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 991px) { .project-top-info .image-gallery ul li img { max-height: 400px; } } .project-top-info .image-gallery ul li:last-child { flex: 70%; max-width: 70%; } @media (max-width: 1199px) { .project-top-info .image-gallery ul li:last-child { flex: 50%; max-width: 50%; } } @media (max-width: 991px) { .project-top-info .image-gallery ul li:last-child { flex: 100%; max-width: 100%; } } .project-wrap .info-item { display: flex; justify-content: space-between; padding-bottom: 85px; border-bottom: 1px solid rgba(2, 6, 38, 0.07); margin-bottom: 70px; } @media (max-width: 991px) { .project-wrap .info-item { display: block; margin-bottom: 40px; padding-bottom: 40px; } } .project-wrap .info-item:last-child { border-bottom: 1px solid transparent; margin-bottom: 0; } .project-wrap .info-item .left { width: calc(100% - 520px); display: block; } @media (max-width: 991px) { .project-wrap .info-item .left { width: 100%; } } .project-wrap .info-item .right { max-width: 520px; width: 100%; } .project-wrap .info-item h2 { color: #042127; font-size: 48px; font-weight: 700; line-height: 55px; letter-spacing: -1.44px; max-width: 380px; } @media (max-width: 1199px) { .project-wrap .info-item h2 { font-size: 35px; line-height: 40px; } } @media (max-width: 767px) { .project-wrap .info-item h2 { font-size: 25px; line-height: 30px; } } .project-wrap .info-item p { margin-bottom: 0; color: #5E5F63; } .project-wrap .info-item .item { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 767px) { .project-wrap .info-item .item { display: block; } } .project-wrap .info-item ul li { color: #16171A; font-size: 16px; font-weight: 600; letter-spacing: -0.48px; padding-left: 30px; position: relative; margin-bottom: 20px; } @media (max-width: 767px) { .project-wrap .info-item ul li { margin-bottom: 0px; } } .project-wrap .info-item ul li:last-child { margin-bottom: 0; } .project-wrap .info-item ul li::before { position: absolute; left: 0; top: 50%; font-size: 18px; content: "\f126"; font-family: flaticon_logistics !important; transform: translateY(-50%); color: #FF7236; } .project-wrap .right.s2 .item ul li { padding-left: 0; } .project-wrap .right.s2 .item ul li::before { display: none; } .project-wrap .right.s2 .item ul li h3 { font-size: 20px; font-weight: 600; line-height: 30px; letter-spacing: -0.6px; } .project-wrap .right.s2 .item ul li h3 i { width: 25px; height: 25px; display: inline-block; background: #FF7236; border-radius: 100px; text-align: center; font-size: 15px; line-height: 25px; color: #fff; margin-right: 10px; } @media (max-width: 767px) { .project-wrap .right.s2 .item ul li h3 i { width: 20px; height: 20px; font-size: 15px; line-height: 20px; } } .project-wrap .right.s2 .item ul li span { color: #5E5F63; font-size: 16px; font-weight: 400; line-height: 30px; } .project-wrap .p-img img { margin-bottom: 10px; } .page-chang { display: flex; align-items: end; justify-content: space-between; margin-top: 20px; } @media (max-width: 575px) { .page-chang { flex-direction: column; align-items: center; } } .page-chang .post a { color: #042127; font-family: "Plus Jakarta Sans"; font-size: 22px; font-weight: 600; line-height: 30px; letter-spacing: -0.66px; text-decoration-line: underline; display: block; } @media (max-width: 991px) { .page-chang .post a { font-size: 18px; line-height: 25px; } } .page-chang .post .next { color: #696969; font-size: 16px; font-weight: 400; text-decoration: none; } .page-chang .post-btn { width: 32px; height: 32px; border: none; background: transparent; } @media (max-width: 575px) { .page-chang .post-btn { margin: 20px 0; } } .page-chang .next-post { text-align: right; } /*-------------------------------------------------------------- 9. wpo-shop-page --------------------------------------------------------------*/ .wpo-shop-section .shop-grids { margin: 0 -15px; } @media (max-width: 767px) { .wpo-shop-section .shop-grids { margin: 0 -7px; } } .wpo-shop-section .grid { width: calc(33.33% - 30px); float: left; margin: 0 15px 30px; } @media (max-width: 991px) { .wpo-shop-section .grid { width: calc(50% - 30px); } } @media (max-width: 767px) { .wpo-shop-section .grid { width: calc(50% - 15px); margin: 0 7px 15px; } } @media (max-width: 550px) { .wpo-shop-section .grid { width: calc(100% - 15px); float: none; } } .wpo-shop-section .grid img { width: 100%; } .wpo-shop-section .details { background-color: #f7f7f7; text-align: center; padding: 35px 15px; } .wpo-shop-section .details h3 { font-size: 20px; font-size: 1.3333333333rem; margin: 0 0 0.5em; font-weight: 700; } @media (max-width: 991px) { .wpo-shop-section .details h3 { font-size: 16px; font-size: 1.0666666667rem; } } .wpo-shop-section .details h3 a { color: #042127; } .wpo-shop-section .details h3 a:hover { color: #0BA08A; } .wpo-shop-section .details del { color: #6e6e6e; } .wpo-shop-section .details del + span { display: inline-block; padding-left: 20px; } .wpo-shop-section .add-to-cart { margin-top: 20px; } .wpo-shop-section .add-to-cart a { font-family: "DM Sans"; font-size: 15px; font-size: 1rem; font-weight: 600; color: #0BA08A; padding: 10px 20px; border: 1px solid #0BA08A; display: inline-block; } @media (max-width: 767px) { .wpo-shop-section .add-to-cart a { font-size: 12px; font-size: 0.8rem; padding: 8px 18px; } } .wpo-shop-section .add-to-cart a:hover { background-color: #0BA08A; color: #fff; } .wpo-shop-section .add-to-cart a i { font-size: 15px; font-size: 1rem; display: inline-block; padding-left: 5px; } .wpo-shop-section .grid:hover .add-to-cart a { background-color: #0BA08A; color: #fff; } /*-------------------------------------------------------------- 10. wpo-shop-single-page --------------------------------------------------------------*/ .wpo-shop-single-section { /*** product slider ***/ /*** product info ***/ } .wpo-shop-single-section .shop-single-slider .slider-for { text-align: center; } .wpo-shop-single-section .shop-single-slider .slider-for img { display: inline-block; } .wpo-shop-single-section .shop-single-slider .slider-nav { padding: 0 25px; margin-top: 35px; } .wpo-shop-single-section .shop-single-slider .slider-nav > i { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 100; } .wpo-shop-single-section .shop-single-slider .slider-nav > i:hover { cursor: pointer; } .wpo-shop-single-section .shop-single-slider .slider-nav .nav-btn-rt { left: auto; right: 0; } .wpo-shop-single-section .shop-single-slider .slider-nav .slick-slide { text-align: center; } .wpo-shop-single-section .shop-single-slider .slider-nav .slick-slide img { display: inline-block; } .wpo-shop-single-section .product-details { padding: 15px 30px 80px; /*** product option ***/ } @media (max-width: 1199px) { .wpo-shop-single-section .product-details { padding: 10px 30px 15px; } } @media (max-width: 991px) { .wpo-shop-single-section .product-details { margin-top: 45px; padding: 40px 30px; } } @media (max-width: 767px) { .wpo-shop-single-section .product-details { padding: 0; } } .wpo-shop-single-section .product-details h2 { font-size: 35px; font-size: 2.3333333333rem; line-height: 1.4em; margin: 0 0 0.33em; font-weight: 700; } @media (max-width: 767px) { .wpo-shop-single-section .product-details h2 { font-size: 22px; font-size: 1.4666666667rem; } } .wpo-shop-single-section .product-details .price { font-size: 25px; font-size: 1.6666666667rem; color: #0BA08A; margin: 7px 0 20px; font-weight: 700; } @media (max-width: 991px) { .wpo-shop-single-section .product-details .price { font-size: 30px; font-size: 2rem; } } @media (max-width: 767px) { .wpo-shop-single-section .product-details .price { font-size: 25px; font-size: 1.6666666667rem; } } .wpo-shop-single-section .product-details .price .old { font-size: 24px; font-size: 1.6rem; font-weight: normal; color: #a1a1a1; text-decoration: line-through; display: inline-block; margin-left: 5px; font-weight: 500; } @media (max-width: 991px) { .wpo-shop-single-section .product-details .price .old { font-size: 20px; font-size: 1.3333333333rem; } } @media (max-width: 767px) { .wpo-shop-single-section .product-details .price .old { font-size: 18px; font-size: 1.2rem; } } .wpo-shop-single-section .product-details .product-rt { display: flex; align-items: center; margin-bottom: 20px; } .wpo-shop-single-section .product-details .product-rt .rating { margin-right: 10px; } .wpo-shop-single-section .product-details .product-rt .rating i { color: #f9d322; } .wpo-shop-single-section .product-details p { margin-bottom: 1.3em; } .wpo-shop-single-section .product-details ul { list-style: none; } .wpo-shop-single-section .product-details ul li { padding-left: 20px; position: relative; margin-bottom: 10px; } .wpo-shop-single-section .product-details ul li:before { position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: #0BA08A; content: ""; border-radius: 50%; } .wpo-shop-single-section .product-details .product-option { margin-top: 30px; } .wpo-shop-single-section .product-details .tg-btm { margin-top: 25px; } .wpo-shop-single-section .product-details .tg-btm p { margin-bottom: 0px; } .wpo-shop-single-section .product-details .tg-btm p span { font-weight: 700; color: #042127; margin-right: 5px; } .wpo-shop-single-section .product-details .product-option .product-row button:after { display: none; } .wpo-shop-single-section .product-details .product-option .product-row > div { display: inline-block; } .wpo-shop-single-section .product-details .product-option .product-row > div + div { margin-left: 15px; } .wpo-shop-single-section .product-details .product-option .product-row > div + div .theme-btn, .wpo-shop-single-section .product-details .product-option .product-row > div + div .view-cart-btn { border-radius: 0; border-width: 1px; height: 40px; padding: 0 18px; } .wpo-shop-single-section .product-details .product-option .product-row > div:last-child .theme-btn:hover, .wpo-shop-single-section .product-details .product-option .product-row > div:last-child .view-cart-btn:hover { background: #0BA08A; border-color: #0BA08A; color: #fff; } .wpo-shop-single-section .product-details .product-option .theme-btn, .wpo-shop-single-section .product-details .product-option .view-cart-btn { background-color: transparent; color: #333; font-size: 14px; font-size: 0.9333333333rem; padding: 0 20px; height: 35px; line-height: 32px; outline: 0; border: 2px solid #e6e6e6; border-radius: 0; } .wpo-shop-single-section .product-details .product-option .theme-btn:hover, .wpo-shop-single-section .product-details .product-option .view-cart-btn:hover { background-color: #0BA08A; color: #fff; border-color: #0BA08A; } @media (max-width: 767px) { .wpo-shop-single-section .product-details .product-option .theme-btn, .wpo-shop-single-section .product-details .product-option .view-cart-btn { font-size: 14px; font-size: 0.9333333333rem; } } .wpo-shop-single-section .product-details .product-option .theme-btn:before, .wpo-shop-single-section .product-details .product-option .view-cart-btn:before { display: none; } .wpo-shop-single-section .product-details .product-option .heart-btn i { font-size: 15px; font-size: 1rem; } .wpo-shop-single-section .product-details .product-option .product-row > div:last-child .theme-btn, .wpo-shop-single-section .product-details .product-option .product-row > div:last-child .view-cart-btn { background-color: #fff; font-size: 18px; font-size: 1.2rem; color: #6e6e6e; border: 1px solid #e6e6e6; } .wpo-shop-single-section .product-details #product-count { border-radius: 0; border: 1px solid #e6e6e6; } .wpo-shop-single-section .product-details #product-count:focus { box-shadow: none; outline: none; } .wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up, .wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0; border-color: #e6e6e6; display: block; padding: 1px 4px; font-size: 10px; } .wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:hover, .wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down:hover { background-color: #0BA08A; color: #fff; } .wpo-shop-single-section .product-info { margin-top: 75px; /*** tabs ***/ /*** client rv ***/ /*** review form ***/ } @media (max-width: 991px) { .wpo-shop-single-section .product-info { margin-top: 40px; } } .wpo-shop-single-section .product-info h4 { font-size: 18px; font-size: 1.2rem; margin: 0; line-height: 1.7em; font-weight: 700; margin-bottom: 10px; } .wpo-shop-single-section .product-info p { margin-bottom: 1.3em; } .wpo-shop-single-section .product-info .tab-pane p:last-child { margin-bottom: 0; } .wpo-shop-single-section .product-info .nav-tabs { font-family: "Plus Jakarta Sans"; border: 0; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .nav-tabs { margin-bottom: 20px; } } .wpo-shop-single-section .product-info .nav-tabs li { margin-right: 1px; } .wpo-shop-single-section .product-info .nav-tabs li a.active { border: 0; outline: 0; } .wpo-shop-single-section .product-info .nav-tabs a { font-size: 15px; font-size: 1rem; color: #6e6e6e; border: 0; border-radius: 0; margin: 0; display: block; padding: 12px 20px 11px; font-family: "DM Sans"; position: relative; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .nav-tabs a { font-size: 14px; font-size: 0.9333333333rem; font-weight: normal; padding: 10px 10px 8px; text-transform: none; } } .wpo-shop-single-section .product-info .nav-tabs a:before { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #0BA08A; border-radius: 4px; content: ""; opacity: 0; visibility: hidden; } .wpo-shop-single-section .product-info .nav-tabs a:hover:before, .wpo-shop-single-section .product-info .nav-tabs a.active:before { opacity: 1; visibility: visible; } .wpo-shop-single-section .product-info .nav-tabs .active, .wpo-shop-single-section .product-info .nav-tabs li:hover { border-color: #0BA08A; } .wpo-shop-single-section .product-info .tab-content { border-top: 1px solid rgba(11, 160, 138, 0.3); padding-top: 30px; margin-top: -1px; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .tab-content { border: 0; padding: 0; margin: 0; } } .wpo-shop-single-section .product-info .client-rv { overflow: hidden; margin-bottom: 30px; } .wpo-shop-single-section .product-info .client-rv:last-child { margin-bottom: 0; } .wpo-shop-single-section .product-info .client-rv .client-pic { width: 100px; float: left; } .wpo-shop-single-section .product-info .client-rv .client-pic img { border-radius: 50%; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .client-pic { width: 100%; float: none; margin-bottom: 10px; } } .wpo-shop-single-section .product-info .client-rv .details { width: calc(100% - 130px); float: right; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .details { width: 100%; float: none; } } .wpo-shop-single-section .product-info .client-rv .name-rating .product-rt { display: flex; align-items: center; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .name-rating-time { padding-bottom: 3px; } } .wpo-shop-single-section .product-info .client-rv .name-rating-time > div, .wpo-shop-single-section .product-info .client-rv .name-rating > div { display: inline-block; font-size: 14px; font-size: 0.9333333333rem; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .name-rating-time > div, .wpo-shop-single-section .product-info .client-rv .name-rating > div { font-size: 12px; font-size: 0.8rem; display: block; } } .wpo-shop-single-section .product-info .client-rv .rating { font-size: 12px; padding-left: 12px; } .wpo-shop-single-section .product-info .client-rv .rating i { color: #0BA08A; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .rating { padding-left: 0; margin: 4px 0 7px; } } .wpo-shop-single-section .product-info .client-rv .name-rating-time .time { float: right; color: #b3b3b3; text-transform: uppercase; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .name-rating-time .time { float: none; } } .wpo-shop-single-section .product-info .client-rv .review-body { padding-top: 12px; } .wpo-shop-single-section .product-info .review-form { margin-top: 45px; } .wpo-shop-single-section .product-info .review-form h4 { font-size: 30px; font-weight: 700; } .wpo-shop-single-section .product-info .review-form p { margin-bottom: 1.73em; } .wpo-shop-single-section .product-info .review-form .give-rat-sec { margin-bottom: 10px; } .wpo-shop-single-section .product-info .review-form .give-rat-sec p { margin-bottom: 0; } .wpo-shop-single-section .product-info .review-form .give-rating { display: inline-block; position: relative; height: 50px; line-height: 50px; font-size: 30px; margin-bottom: 10px; } .wpo-shop-single-section .product-info .review-form .give-rating label { position: absolute; top: 0; left: 0; height: 100%; cursor: pointer; } .wpo-shop-single-section .product-info .review-form .give-rating label:last-child { position: static; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(1) { z-index: 5; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(2) { z-index: 4; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(3) { z-index: 3; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(4) { z-index: 2; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(5) { z-index: 1; } .wpo-shop-single-section .product-info .review-form .give-rating label input { position: absolute; top: 0; left: 0; opacity: 0; } .wpo-shop-single-section .product-info .review-form .give-rating label .icon { float: left; color: transparent; } .wpo-shop-single-section .product-info .review-form .give-rating label:last-child .icon { color: #ddd; } .wpo-shop-single-section .product-info .review-form .give-rating:not(:hover) label input:checked ~ .icon, .wpo-shop-single-section .product-info .review-form .give-rating:hover label:hover input ~ .icon { color: #FFD400; } .wpo-shop-single-section .product-info .review-form .give-rating label input:focus:not(:checked) ~ .icon:last-child { color: #ddd; text-shadow: 0 0 5px #FFD400; } .wpo-shop-single-section .product-info .review-form form input, .wpo-shop-single-section .product-info .review-form form textarea { background: transparent; border-radius: 0; box-shadow: none; height: 50px; border: 1px solid #efefef; } .wpo-shop-single-section .product-info .review-form form input:focus, .wpo-shop-single-section .product-info .review-form form textarea:focus { box-shadow: none; outline: none; } .wpo-shop-single-section .product-info .review-form form textarea { height: 130px; } .wpo-shop-single-section .product-info .review-form form > div { margin-bottom: 27px; } .wpo-shop-single-section .product-info .review-form form > div:last-child { margin-bottom: 0; } .wpo-shop-single-section .product-info .review-form form .theme-btn-s4 { background-color: transparent; color: #908f8f; outline: 0; box-shadow: none; } .wpo-shop-single-section .product-info .review-form form .theme-btn-s4:hover { background-color: #0BA08A; color: #fff; } @media screen and (min-width: 767px) { .wpo-shop-single-section .product-info .review-form form .theme-btn-s4 { font-size: 15px; font-size: 1rem; padding: 0 20px; } } .wpo-shop-single-section .slider-nav .slick-slide:focus { outline: none; } .quantity-container { display: flex; align-items: center; justify-content: center; width: 100px; border: 1px solid #e6e6e6; height: 40px; line-height: 40px; position: relative; display: flex; align-items: center; justify-content: space-between; } .quantity-container span { width: 30px; height: 40px; border: none; background-color: #f0f0f0; cursor: pointer; text-align: center; } .quantity-container .decrement { width: 30px; display: inline-block; } .quantity-container .increment { width: 30px; display: inline-block; } .quantity-container input[type=text] { width: 30px; height: 40px; text-align: center; border: none; outline: none; background-color: transparent; cursor: default; } .quantity-container input[type=text]:focus { outline: 0; box-shadow: 0 0 5px 0 transparent; } /*=========================== 11. wpo-cart-page-style ===========================*/ .cart-area .cart-wrapper { box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1); } @media (max-width: 991px) { .cart-area .cart-wrapper table { width: 1022px; } } @media (max-width: 991px) { .cart-area .cart-wrapper form { overflow: scroll; overflow-y: hidden; } } .cart-area .cart-wrap td, .cart-area .cart-wrap th { width: 10%; border-bottom: 1px solid rgba(240, 240, 240, 0.5803921569); text-align: center; font-weight: 400; color: #414141; } .cart-area .cart-wrap td ul, .cart-area .cart-wrap th ul { list-style: none; } .cart-area .cart-wrap th { border-bottom: 1px solid rgba(240, 240, 240, 0.5803921569); padding: 40px 0; } .cart-area .cart-wrap thead { background: #fff; color: #505050; padding: 40px; } .cart-area .cart-area form { margin: auto; text-align: center; background: #fff; } .cart-area .cart-wrap .product { width: 15%; } .cart-area .cart-wrap .product ul { text-align: left; padding-left: 30px; list-style: none; } .cart-area .cart-wrap .product ul li { padding-bottom: 5px; } .cart-area .cart-wrap .product a { font-size: 16px; color: #a5a4a4; } .cart-area .cart-wrap .product-2 { text-align: left; padding-left: 55px; } .cart-area .cart-wrap .product a:hover { color: #0BA08A; } .cart-area .cart-wrap th { height: 80px; font-weight: 700; } .cart-area .cart-wrap td { padding: 40px 25px; } .cart-area .cart-wrap td.action ul { display: flex; justify-content: center; list-style: none; } .cart-area .cart-wrap td.action ul .w-btn-view a { line-height: 45px; } .cart-area .cart-wrap td span { display: block; width: 100px; height: 38px; line-height: 34px; color: #ee9902; font-size: 14px; border: 1.5px solid #ee9902; border-radius: 4px; } .cart-area .cart-wrap td.Del span { color: #4ABA4E; border: 1.5px solid #4ABA4E; } .cart-area .cart-wrap td.can span { color: #D85656; border: 1.5px solid #D85656; } .cart-area .cart-wrap td.pro span { color: #691A5F; border: 1.5px solid #691A5F; } .cart-area .cart-wrap .name { width: 15%; } .cart-area .cart-wrap .action a { display: block; width: 40px; height: 38px; line-height: 45px; background: #414141; color: #fff; border-radius: 4px; font-size: 14px; } .cart-area .cart-wrap .action a .fi::before { font-size: 20px; } .cart-area .cart-wrap .action a:hover { background: #0BA08A; } .cart-area .cart-wrap .action li.c-btn { margin-right: 10px; } .cart-area .cart-wrap .action li.c-btn a { background-color: #0BA08A; } .cart-area .order-wrap { padding: 0; } .cart-area .cart-wrap tr:nth-child(even) { background: #FCFCFC; } .cart-area .cart-wrap .quantity { position: relative; max-width: 110px; margin: 0 auto; } .cart-area .quantity input { width: 105px; padding: 0px 35px; text-align: center; height: 36px; position: relative; background: #f2f2f5; border: none; border-radius: 40px; } .cart-area .quantity .qtybutton { position: absolute; top: 0; left: 0px; height: 30px; width: 30px; text-align: center; line-height: 28px; font-size: 18px; cursor: pointer; color: #333; background: #fafaff; border-radius: 30px; } .cart-area .cart-wrap .quantity .qtybutton { top: 50%; left: 5px; transform: translateY(-51%); -webkit-transform: translateY(-51%); -moz-transform: translateY(-51%); } .cart-area .cart-wrap .quantity .qtybutton.dec { border-left: none; } .cart-area .cart-wrap .quantity .qtybutton.inc { right: 5px; left: auto; border-right: none; } .cart-area .submit-btn-area { padding: 40px; } .cart-area .submit-btn-area ul { display: flex; justify-content: flex-end; list-style: none; } @media (max-width: 450px) { .cart-area .submit-btn-area ul { flex-wrap: wrap; justify-content: center; } } .cart-area .submit-btn-area ul li:last-child { margin-left: 20px; } @media (max-width: 450px) { .cart-area .submit-btn-area ul li:last-child { margin-left: 3px; margin-top: 5px; } } .cart-area .submit-btn-area button { border: none; background: #0B3742; color: #fff; transition: all 0.3s; outline: none; } .cart-area .submit-btn-area button:hover { background: #0BA08A; } .cart-area .submit-btn-area .theme-btn, .cart-area .submit-btn-area .view-cart-btn { text-transform: capitalize; font-size: 15px; font-weight: 500; line-height: 27px; } .cart-area .cart-product-list ul { border-top: 1px solid rgba(240, 240, 240, 0.5803921569); padding-top: 20px; list-style: none; } .cart-area .cart-product-list ul li { display: flex; justify-content: space-between; padding: 0px 30px; font-weight: 300; font-size: 18px; line-height: 21px; color: #414141; padding-bottom: 30px; } .cart-area .cart-product-list ul li.cart-b { border-top: 1px solid rgba(240, 240, 240, 0.5803921569); border-bottom: 1px solid rgba(240, 240, 240, 0.5803921569); color: #0BA08A; padding-top: 30px; font-weight: 600; } /*=============================== 12. wpo-checkout-page-style ================================*/ .wpo-checkout-area .checkout-wrap { background: #fff; } .wpo-checkout-area .checkout-wrap ul { list-style: none; } .wpo-checkout-area #open2 { display: block; } .wpo-checkout-area #open3 { display: none; } .wpo-checkout-area #open4 { display: none; } .wpo-checkout-area .create-account p { margin-bottom: 15px; } .wpo-checkout-area .create-account { display: none; padding: 20px; } .wpo-checkout-area .create-account span { margin-bottom: 20px; display: block; } .wpo-checkout-area .input-wrap { position: relative; } .wpo-checkout-area .create-account input { width: 100%; height: 50px; border: 1px solid #ebebeb; margin-bottom: 25px; padding-left: 20px; border-radius: 40px; } .wpo-checkout-area .create-account input:focus { outline: none; } .wpo-checkout-area .create-account button { position: absolute; right: 0; top: 0; height: 50px; background: #333; color: #fff; width: 108px; border: none; outline: none; box-shadow: none; cursor: pointer; border-top-right-radius: 40px; border-bottom-right-radius: 40px; } .wpo-checkout-area .create-account button:hover { background: #0BA08A; } .wpo-checkout-area .coupon { position: relative; cursor: pointer; cursor: pointer; background: #fff0eb; } .wpo-checkout-area .coupon:before { position: absolute; right: 30px; top: 21px; content: "\e64b"; font-family: "themify"; } .wpo-checkout-area .coupon span { position: absolute; right: 30px; top: 30px; } .wpo-checkout-area .coupon label { margin-bottom: 0; font-weight: 500; font-size: 18px; color: #0F0F0F; cursor: pointer; padding: 20px 20px; border-left: 4px solid #0BA08A; transition: all 0.3s; width: 100%; } @media (max-width: 767px) { .wpo-checkout-area .coupon label { font-size: 15px; } } .wpo-checkout-area .caupon-wrap { background: #fff; margin-bottom: 20px; transition: all 0.3s; box-shadow: 0px 5px 15px 0px rgba(62, 65, 159, 0.1); } .wpo-checkout-area .active-border { transition: all 0.3s; } .wpo-checkout-area .s1.active-border .coupon-active label, .wpo-checkout-area .s3.coupon-2 .coupon-3 label { border-left: none; border-top: 4px solid #0BA08A; border-bottom: 1px solid #ffe5dc; } .wpo-checkout-area .s2 .coupon-3 { border-top: 4px solid #0BA08A; } .wpo-checkout-area .s2.coupon-2 .coupon-3 { border-top: 0; } .wpo-checkout-area .s2 .coupon-3 label { border-left: 0; border-bottom: 1px solid #ffe5dc; } .wpo-checkout-area .s2.coupon-2 .coupon-3 label { border-left: 4px solid #0BA08A; border-bottom: 0; } .wpo-checkout-area .billing-adress .form-style input, .wpo-checkout-area .billing-adress .form-style select { width: 100%; margin-bottom: 15px; padding-left: 10px; height: 40px; background: #fff; border-radius: 2px; border: none; border: 1px solid #ebebeb; border-radius: 40px; } .wpo-checkout-area .billing-adress .form-style input:focus, .wpo-checkout-area .billing-adress .form-style select:focus { outline: none; box-shadow: none; } .wpo-checkout-area .billing-adress .form-style select { -webkit-appearance: none; -o-appearance: none; appearance: none; -moz-appearance: none; background: transparent url(../images/select-icon2.png) no-repeat calc(100% - 15px) center; position: relative; } .wpo-checkout-area .billing-adress { padding: 30px; } .wpo-checkout-area .note-area textarea { width: 100%; height: 150px; padding-top: 10px; margin-bottom: 0; padding-left: 10px; border: 1px solid #ebebeb; border-radius: 20px; } .wpo-checkout-area .note-area textarea:focus { outline: none; } .wpo-checkout-area .biling-item-2 { margin-top: 20px; } .wpo-checkout-area .biling-item-2 label.fontsize { margin-bottom: 20px; } .wpo-checkout-area .biling-item-2 .billing-adress { padding: 0; } .wpo-checkout-area .payment-name ul { display: flex; justify-content: flex-start; } @media (max-width: 575px) { .wpo-checkout-area .payment-name ul { flex-wrap: wrap; } } .wpo-checkout-area .payment-area form { overflow: unset !important; } .wpo-checkout-area .payment-name ul li { width: 100px; height: 60px; text-align: center; line-height: 60px; } .wpo-checkout-area .payment-name ul li input { margin-right: 0; } .wpo-checkout-area .payment-name ul li { margin-right: 15px; } @media (max-width: 575px) { .wpo-checkout-area .payment-name ul li { margin-bottom: 10px; } } .wpo-checkout-area .payment-area h2 { padding-bottom: 40px; margin-bottom: 0; } .wpo-checkout-area .payment-select { padding: 40px 0; } .wpo-checkout-area .payment-select ul { display: flex; } @media (max-width: 575px) { .wpo-checkout-area .payment-select ul { flex-wrap: wrap; } } .wpo-checkout-area .payment-select ul li { margin-right: 10px; font-size: 15px; font-weight: 500; color: #5B5B5B; } .wpo-checkout-area .payment-select label { font-size: 18px; font-weight: 600; } @media (max-width: 575px) { .wpo-checkout-area .payment-select label { font-size: 14px; } } .wpo-checkout-area .payment-area h2 { font-size: 20px; color: #878787; font-weight: 700; } .wpo-checkout-area .payment-area h2 span { font-size: 30px; color: #ff493c; } .wpo-checkout-area .payment-area { width: 100%; } .wpo-checkout-area .payment-name ul li input { margin-right: 0; position: absolute; z-index: -1; } .wpo-checkout-area .payment-name ul li input:checked ~ label { border: 1px solid #ff493c; } .wpo-checkout-area .payment-name label { width: 100%; border: 1px solid transparent; } .wpo-checkout-area .payment-name .visa label { border: 1px solid #0057A0; } .wpo-checkout-area .payment-name .mas label { border: 1px solid #CC0000; } .wpo-checkout-area .payment-name .ski label { border: 1px solid #691A5F; } .wpo-checkout-area .payment-name .pay label { border: 1px solid #019CDE; } .wpo-checkout-area .payment-option { padding: 30px; } .wpo-checkout-area .payment-name { display: none; } .wpo-checkout-area .payment-name.active { display: block; } .wpo-checkout-area .payment-option.active .payment-name { display: none !important; } .wpo-checkout-area .payment-area .form-style input, .wpo-checkout-area .payment-area .form-style select { width: 100%; margin-bottom: 15px; padding-left: 10px; height: 40px; background: #fff; border-radius: 2px; border: none; border: 1px solid #ebebeb; border-radius: 40px; } .wpo-checkout-area .payment-area .form-style input:focus, .wpo-checkout-area .payment-area .form-style select:focus { outline: none; } .wpo-checkout-area .payment-area .contact-form { margin-top: 40px; } .wpo-checkout-area .cout-order-area { box-shadow: 0px 5px 15px 0px rgba(62, 65, 159, 0.1); } .wpo-checkout-area .cout-order-area .oreder-item ul li { display: flex; justify-content: space-between; padding: 20px 30px; font-weight: 300; font-size: 18px; line-height: 21px; color: #414141; } .wpo-checkout-area .cout-order-area .oreder-item ul li.s-total { font-weight: 400; } .wpo-checkout-area .cout-order-area .oreder-item ul .o-header { color: #0F0F0F; font-size: 20px; font-weight: 600; border-bottom: 1px solid #ebebeb; } .wpo-checkout-area .cout-order-area .oreder-item ul .o-middle { border-bottom: 1px solid #ebebeb; } .wpo-checkout-area .cout-order-area .oreder-item ul .o-bottom { border-top: 1px solid #ebebeb; color: #0BA08A; font-weight: 600; } .wpo-checkout-area .create-account.active { display: block; } .wpo-checkout-area .contact-form .form-control { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .wpo-checkout-area .contact-form input, .wpo-checkout-area .contact-form select { margin-top: 10px; } .wpo-checkout-area .submit-btn-area { margin-top: 20px; } .wpo-checkout-area .submit-btn-area .theme-btn, .wpo-checkout-area .submit-btn-area .view-cart-btn { text-transform: capitalize; } /*-------------------------------------------------------------- 13. wpo-blog-pg-section --------------------------------------------------------------*/ .wpo-blog-pg-section .wpo-blog-content .post { margin-bottom: 70px; } @media (max-width: 991px) { .wpo-blog-pg-section .wpo-blog-content .post { margin-bottom: 50px; } } @media (max-width: 767px) { .wpo-blog-pg-section .wpo-blog-content .post { margin-bottom: 40px; } } .wpo-blog-pg-section .entry-meta { list-style: none; overflow: hidden; margin: 35px 0; } @media (max-width: 767px) { .wpo-blog-pg-section .entry-meta { margin: 25px 0; } } .wpo-blog-pg-section .entry-meta ul { list-style: none; } .wpo-blog-pg-section .entry-meta ul li { font-weight: 500; font-size: 14px; float: left; text-transform: capitalize; font-size: 15px; font-weight: 500; } .wpo-blog-pg-section .entry-meta ul li a { color: #020626; } .wpo-blog-pg-section .entry-meta ul li a:hover { color: #FF7236; } .wpo-blog-pg-section .entry-meta ul li i { position: relative; margin-right: 3px; } .wpo-blog-pg-section .entry-meta ul li i:before { font-size: 16px; line-height: 15px; color: #FF7236; } .wpo-blog-pg-section .entry-meta ul li + li { margin-left: 20px; padding-left: 20px; position: relative; } .wpo-blog-pg-section .entry-meta ul li + li:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: ""; background: #676A7D; width: 9px; height: 1px; } @media (max-width: 440px) { .wpo-blog-pg-section .entry-meta ul li + li:before { display: none; } } @media (max-width: 440px) { .wpo-blog-pg-section .entry-meta ul li + li { margin-left: 0; padding-left: 0; } } @media (max-width: 767px) { .wpo-blog-pg-section .entry-meta ul li { font-size: 12px; } } @media (max-width: 440px) { .wpo-blog-pg-section .entry-meta ul li { float: none; display: block; margin-bottom: 5px; } } .wpo-blog-pg-section .post h3 { font-size: 34px; line-height: 1.2em; font-weight: 700; margin: -0.27em 0 0.7em; font-family: "Plus Jakarta Sans"; } @media (max-width: 991px) { .wpo-blog-pg-section .post h3 { font-size: 25px; } } @media (max-width: 767px) { .wpo-blog-pg-section .post h3 { font-size: 22px; } } .wpo-blog-pg-section .post h3 a { color: #042127; } .wpo-blog-pg-section .post h3 a:hover { color: #FF7236; } .wpo-blog-pg-section .post p { margin-bottom: 2em; color: #5E5F63; } @media (max-width: 991px) { .wpo-blog-pg-section .post p { font-size: 16px; } } .wpo-blog-pg-section .post a.read-more { color: #000; text-align: center; font-size: 14px; font-weight: 500; line-height: 30px; position: relative; padding-right: 50px; transition: all 0.3s ease-in-out; text-transform: uppercase; } .wpo-blog-pg-section .post a.read-more::before { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-family: flaticon_logistics !important; content: "\f12f"; color: #04010C; font-size: 32px; transition: all 0.3s ease-in-out; } .wpo-blog-pg-section .post a.read-more::after { position: absolute; content: ""; right: 0; top: 50%; transform: translateY(-50%); border-radius: 100px; border: 1px solid #BDC2C6; width: 20px; height: 19px; transition: all 0.3s ease-in-out; } .wpo-blog-pg-section .entry-media { position: relative; } .wpo-blog-pg-section .entry-media span { position: absolute; left: 16px; top: 16px; color: #FFF; text-align: center; font-size: 20px; font-weight: 500; line-height: 24px; background: #FF7236; border-radius: 10px; display: inline-block; padding: 10px 20px; } @media (max-width: 767px) { .wpo-blog-pg-section .entry-media span { font-size: 16px; line-height: 24px; } } .wpo-blog-pg-section .entry-media img { width: 100%; } @media screen and (min-width: 1200px) { .blog-pg-left-sidebar .blog-sidebar { padding-right: 45px; padding-left: 0; } } @media screen and (min-width: 1200px) { .blog-pg-fullwidth .wpo-blog-content { padding: 0; } } @keyframes save-the-date-pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(0.95, 0.95, 0.95); } to { transform: scale3d(1, 1, 1); } } /*-------------------------------------------------------------- 14. wpo-blog-single-section --------------------------------------------------------------*/ .wpo-blog-single-section { /*** tag-share ***/ /*** more-posts ***/ /*** comments area ***/ /*** comment-respond ***/ } .wpo-blog-single-section .entry-meta { list-style: none; overflow: hidden; margin: 35px 0; } @media (max-width: 767px) { .wpo-blog-single-section .entry-meta { margin: 25px 0; } } .wpo-blog-single-section .entry-meta ul { list-style: none; } .wpo-blog-single-section .entry-meta ul li { font-weight: 500; font-size: 14px; float: left; text-transform: capitalize; font-size: 15px; font-weight: 500; } .wpo-blog-single-section .entry-meta ul li a { color: #020626; } .wpo-blog-single-section .entry-meta ul li a:hover { color: #FF7236; } .wpo-blog-single-section .entry-meta ul li i { position: relative; margin-right: 3px; } .wpo-blog-single-section .entry-meta ul li i:before { font-size: 16px; line-height: 15px; color: #FF7236; } .wpo-blog-single-section .entry-meta ul li + li { margin-left: 20px; padding-left: 20px; position: relative; } .wpo-blog-single-section .entry-meta ul li + li:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: ""; background: #676A7D; width: 9px; height: 1px; } @media (max-width: 440px) { .wpo-blog-single-section .entry-meta ul li + li:before { display: none; } } @media (max-width: 440px) { .wpo-blog-single-section .entry-meta ul li + li { margin-left: 0; padding-left: 0; } } @media (max-width: 767px) { .wpo-blog-single-section .entry-meta ul li { font-size: 12px; } } @media (max-width: 440px) { .wpo-blog-single-section .entry-meta ul li { float: none; display: block; margin-bottom: 5px; } } .wpo-blog-single-section .post h3 { font-size: 34px; line-height: 1.2em; font-weight: 700; margin: -0.27em 0 0.7em; font-family: "Plus Jakarta Sans"; } @media (max-width: 991px) { .wpo-blog-single-section .post h3 { font-size: 25px; } } @media (max-width: 767px) { .wpo-blog-single-section .post h3 { font-size: 22px; } } .wpo-blog-single-section .post h3 { color: #042127; } .wpo-blog-single-section .post p { margin-bottom: 2em; color: #838383; font-size: 18px; font-weight: 400; line-height: 32px; } @media (max-width: 991px) { .wpo-blog-single-section .post p { font-size: 16px; } } .wpo-blog-single-section .entry-media { position: relative; } .wpo-blog-single-section .entry-media span { position: absolute; left: 16px; top: 16px; color: #FFF; text-align: center; font-size: 20px; font-weight: 500; line-height: 24px; background: #FF7236; border-radius: 10px; display: inline-block; padding: 10px 20px; } @media (max-width: 767px) { .wpo-blog-single-section .entry-media span { font-size: 16px; line-height: 24px; } } .wpo-blog-single-section .entry-media img { width: 100%; } .wpo-blog-single-section blockquote { background-color: #F4F6F8; padding: 40px 34px; margin-top: 60px; margin-bottom: 40px; border: 0; position: relative; color: #16171A; font-family: "Plus Jakarta Sans"; font-size: 24px; font-weight: 700; line-height: 43px; } @media (max-width: 767px) { .wpo-blog-single-section blockquote { padding: 35px 25px; font-size: 18px; line-height: 30px; } } .wpo-blog-single-section blockquote:before { font-family: flaticon_logistics !important; content: "\f134"; font-size: 25px; color: #FF7236; position: absolute; right: 40px; bottom: 30px; } .wpo-blog-single-section blockquote span { color: #16171A; font-size: 16px; font-weight: 400; display: block; position: relative; padding-left: 30px; } .wpo-blog-single-section blockquote span::before { position: absolute; left: 0; top: 50%; width: 17px; height: 2px; content: ""; background: #191515; transform: translateY(-50%); } .wpo-blog-single-section .post-team-content { margin-bottom: 60px; } .wpo-blog-single-section .post-team-content h3 { color: #16171A; font-size: 28px; font-weight: 700; line-height: 40px; margin-bottom: 30px; } .wpo-blog-single-section .post-team-content ul li { display: block; font-size: 16px; font-weight: 400; line-height: 25px; padding-left: 40px; position: relative; margin-bottom: 24px; color: #445658; } .wpo-blog-single-section .post-team-content ul li:last-child { margin-bottom: 0; } @media (max-width: 991px) { .wpo-blog-single-section .post-team-content ul li:last-child { margin-bottom: 24px; } } .wpo-blog-single-section .post-team-content ul li::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; font-size: 20px; line-height: 28px; background: #FFF; box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.06); border-radius: 30px; transition: all 0.3s ease-in-out; content: "\f126"; font-family: flaticon_logistics !important; text-align: center; } .wpo-blog-single-section .post-team-content ul li:hover::before { background: #FF7236; color: #fff; } .wpo-blog-single-section .post-team-content img { width: 100%; } .wpo-blog-single-section .im-1 { margin-bottom: 30px; } .wpo-blog-single-section p { color: #838383; font-size: 18px; font-weight: 400; line-height: 32px; } .wpo-blog-single-section .tag-share-wrap { margin-top: 50px; padding-bottom: 40px; border-bottom: 1px solid #F6F6F6; } @media (max-width: 991px) { .wpo-blog-single-section .tag-share-wrap { margin-top: 30px; } } .wpo-blog-single-section .tag-share, .wpo-blog-single-section .tag-share-s2 { color: #042127; } .wpo-blog-single-section .tag-share ul, .wpo-blog-single-section .tag-share-s2 ul { list-style: none; display: inline-block; overflow: hidden; } .wpo-blog-single-section .tag-share ul li, .wpo-blog-single-section .tag-share-s2 ul li { float: left; } @media (max-width: 767px) { .wpo-blog-single-section .tag-share ul li, .wpo-blog-single-section .tag-share-s2 ul li { margin: 2px; } } .wpo-blog-single-section .tag-share ul > li + li, .wpo-blog-single-section .tag-share-s2 ul > li + li { margin-left: 10px; } @media (max-width: 767px) { .wpo-blog-single-section .tag-share ul > li + li, .wpo-blog-single-section .tag-share-s2 ul > li + li { margin: 2px; } } .wpo-blog-single-section .tag-share .tag, .wpo-blog-single-section .tag-share-s2 .tag { display: flex; align-items: center; } .wpo-blog-single-section .tag-share .tag > span, .wpo-blog-single-section .tag-share-s2 .tag > span { font-family: "Plus Jakarta Sans"; display: inline-block; padding-right: 15px; text-transform: capitalize; color: #121416; font-size: 20px; font-weight: 700; line-height: 30px; } .wpo-blog-single-section .tag-share .tag ul, .wpo-blog-single-section .tag-share-s2 .tag ul { list-style: none; position: relative; } .wpo-blog-single-section .tag-share .tag li, .wpo-blog-single-section .tag-share-s2 .tag li { position: relative; } .wpo-blog-single-section .tag-share .tag a, .wpo-blog-single-section .tag-share-s2 .tag a { display: inline-block; padding: 2px 15px; text-transform: uppercase; color: #838383; text-align: center; font-family: "Plus Jakarta Sans"; font-size: 14px; font-weight: 500; line-height: 30px; border: 1px solid #F6F3EE; background: #FFF; } @media (max-width: 767px) { .wpo-blog-single-section .tag-share .tag a, .wpo-blog-single-section .tag-share-s2 .tag a { font-size: 13px; } } .wpo-blog-single-section .tag-share .tag a:hover, .wpo-blog-single-section .tag-share-s2 .tag a:hover { color: #fff; background: #FF7236; } .wpo-blog-single-section .tag-share-s2 { margin: 0; border-bottom: 0; } .wpo-blog-single-section .tag-share-s2 .tag { justify-content: end; } @media (max-width: 991px) { .wpo-blog-single-section .tag-share-s2 .tag { margin-top: 20px; justify-content: left; } } .wpo-blog-single-section .tag-share-s2 .tag a { padding: 0; background: #F2F6F7; color: #020626; padding: 2px 10px; font-size: 14px; font-weight: 400; } .wpo-blog-single-section .item-img img { width: 100%; } .wpo-blog-single-section .more-posts { overflow: hidden; border: 1px solid #d8e0f1; padding: 0 25px; } .wpo-blog-single-section .more-posts > div { width: 50%; float: left; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts > div { width: 100%; float: none; } } .wpo-blog-single-section .more-posts > div > a { display: inline-block; } .wpo-blog-single-section .more-posts .previous-post, .wpo-blog-single-section .more-posts .next-post { padding: 40px 0; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .previous-post, .wpo-blog-single-section .more-posts .next-post { padding: 25px 15px !important; } } .wpo-blog-single-section .more-posts .next-post { text-align: right; border-left: 1px solid #d8e0f1; padding-left: 15px; padding-right: 5px; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .next-post { border-left: 0; text-align: left; border-top: 1px solid #d8e0f1; } } .wpo-blog-single-section .more-posts .next-post .post-control-link { padding-right: 25px; position: relative; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .next-post .post-control-link { padding-right: 0; } } .wpo-blog-single-section .more-posts .next-post .post-control-link:before { font-family: "themify"; content: "\e628"; position: absolute; right: 0; top: 0; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .next-post .post-control-link:before { display: none; } } .wpo-blog-single-section .more-posts .previous-post { padding-right: 15px; padding-left: 5px; } .wpo-blog-single-section .more-posts .previous-post .post-control-link { padding-left: 25px; position: relative; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .previous-post .post-control-link { padding-left: 0; } } .wpo-blog-single-section .more-posts .previous-post .post-control-link:before { font-family: "themify"; content: "\e629"; position: absolute; left: 0; top: 0; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .previous-post .post-control-link:before { display: none; } } .wpo-blog-single-section .more-posts .previous-post > a > span, .wpo-blog-single-section .more-posts .next-post > a > span { display: block; } .wpo-blog-single-section .more-posts .post-control-link { font-size: 14px; font-size: 0.9333333333rem; color: #6e6e6e; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; } .wpo-blog-single-section .more-posts .post-name { font-size: 16px; font-size: 1.0666666667rem; color: #042127; margin: 0.7em 0 0; } @media (max-width: 991px) { .wpo-blog-single-section .more-posts .post-name { font-size: 16px; font-size: 1.0666666667rem; } } .wpo-blog-single-section .more-posts a:hover .post-control-link { color: #0BA08A; } .wpo-blog-single-section .comments-area { margin-top: 70px; } .wpo-blog-single-section .comments-area .comment-wrapper { position: relative; } .wpo-blog-single-section .comments-area ol { list-style-type: none; padding-left: 0; } .wpo-blog-single-section .comments-area ol ul { padding-left: 100px; list-style-type: none; } @media (max-width: 991px) { .wpo-blog-single-section .comments-area ol ul { padding-left: 40px; } } .wpo-blog-single-section .comments-area ol > li:last-child div { border-bottom: 0; } .wpo-blog-single-section .comments-area .comments-title { margin-bottom: 40px; text-transform: capitalize; color: #16171A; font-size: 28px; font-weight: 700; line-height: 30px; } @media (max-width: 991px) { .wpo-blog-single-section .comments-area .comments-title { font-size: 20px; } } .wpo-blog-single-section .comments-area li > div { position: relative; } .wpo-blog-single-section .comments-area .comment-theme { position: absolute; } @media (max-width: 767px) { .wpo-blog-single-section .comments-area .comment-theme { position: static; } } .wpo-blog-single-section .comments-area .comment-theme img { border-radius: 50%; } .wpo-blog-single-section .comments-area .comment-main-area { margin-bottom: 40px; } .wpo-blog-single-section .comments-area .comment-main-area { padding-left: 110px; } @media (max-width: 767px) { .wpo-blog-single-section .comments-area .comment-main-area { padding-left: 0; margin-top: 25px; } } .wpo-blog-single-section .comments-area .comment-main-area p { margin-bottom: 20px; color: #838383; font-size: 16px; font-weight: 400; line-height: 28.8px; } .wpo-blog-single-section .comments-area .comments-meta h4 { font-size: 20px; color: #042127; color: #16171A; font-size: 18px; font-weight: 700; line-height: 25px; } .wpo-blog-single-section .comments-area .comments-meta h4 span { font-size: 15px; color: #6e6e6e; font-weight: normal; text-transform: none; display: block; font-family: "DM Sans"; } @media (max-width: 767px) { .wpo-blog-single-section .comments-area .comments-meta h4 span { padding-left: 0; } } .wpo-blog-single-section .comments-area .comment-reply-link { color: #121416; font-size: 20px; font-weight: 400; line-height: 25px; position: absolute; right: 20px; top: 0; } .wpo-blog-single-section .comments-area .comment-reply-link:hover { color: #0BA08A; } .wpo-blog-single-section .comment-respond { background: #F8F8F9; padding: 60px 40px 80px; margin-top: 60px; } @media (max-width: 575px) { .wpo-blog-single-section .comment-respond { padding: 40px 20px 40px; } } .wpo-blog-single-section .comment-respond .comment-reply-title { font-size: 22px; text-transform: capitalize; color: #16171A; font-size: 28px; font-weight: 700; line-height: 30px; margin-bottom: 30px; } @media (max-width: 991px) { .wpo-blog-single-section .comment-respond .comment-reply-title { font-size: 20px; } } .wpo-blog-single-section .comment-respond form input, .wpo-blog-single-section .comment-respond form textarea { background-color: #fff; width: 100%; height: 65px; padding: 6px 15px; margin-bottom: 33px; outline: 0; transition: all 0.3s; border: 1px solid #E5E5E5; background: #FFF; box-shadow: 0px 15px 10px 0px rgba(242, 242, 242, 0.18); } @media (max-width: 575px) { .wpo-blog-single-section .comment-respond form input, .wpo-blog-single-section .comment-respond form textarea { margin-bottom: 25px; } } .wpo-blog-single-section .comment-respond form input:focus, .wpo-blog-single-section .comment-respond form textarea:focus { box-shadow: none; border-color: #0BA08A; } @media (max-width: 991px) { .wpo-blog-single-section .comment-respond form input, .wpo-blog-single-section .comment-respond form textarea { height: 40px; } } .wpo-blog-single-section .comment-respond form textarea { padding: 15px; height: 280px; } @media (max-width: 991px) { .wpo-blog-single-section .comment-respond form textarea { height: 150px; } } .wpo-blog-single-section .comment-respond .form-inputs { overflow: hidden; } .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(1) { width: 49%; float: left; } @media (max-width: 767px) { .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(1) { width: 100%; float: none; } } .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(2) { width: 49%; float: right; } @media (max-width: 767px) { .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(2) { width: 100%; float: none; } } .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(3) { width: 49%; float: left; } @media (max-width: 767px) { .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(3) { width: 100%; float: none; } } .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(4) { width: 49%; float: right; } @media (max-width: 767px) { .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(4) { width: 100%; float: none; } } .wpo-blog-single-section .comment-respond .form-submit input { max-width: 240px; border: 0; outline: 0; background: #FF7236; margin: 0; color: #FFF; font-size: 16px; font-weight: 400; text-transform: capitalize; } @media (max-width: 991px) { .wpo-blog-single-section .comment-respond .form-submit input { height: 50px; } } .wpo-blog-single-section .comment-respond .terms { margin-bottom: 40px; } .wpo-blog-single-section .comment-respond .terms .checkbox { width: 20px; height: 0; padding: 0; margin: 0; } .wpo-blog-single-section .comment-respond .terms input[type=checkbox] { position: relative; cursor: pointer; } .wpo-blog-single-section .comment-respond .terms input[type=checkbox]:checked:before { content: ""; display: block; position: absolute; left: -3px; top: -14px; width: 17px; height: 17px; transition: all 0.2s linear; border: 1px solid #949392; } .wpo-blog-single-section .comment-respond .terms input[type=checkbox]:before { content: ""; display: block; position: absolute; left: -3px; top: -14px; width: 17px; height: 17px; transition: all 0.2s linear; border: 1px solid #949392; } .wpo-blog-single-section .comment-respond .terms input[type=checkbox]:after { content: ""; display: block; width: 0px; height: 0px; border: solid #fff; border-width: 0 0px 0px 0; transform: rotate(180deg); position: absolute; top: -11px; left: 3px; transition: all 0.2s linear; } .wpo-blog-single-section .comment-respond .terms input[type=checkbox]:checked:after { content: ""; display: block; width: 6px; height: 10px; border: solid #FF7236; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: -11px; left: 3px; } .wpo-blog-single-section .comment-respond .terms label { margin-bottom: 0; cursor: pointer; font-size: 15px; font-weight: 500; line-height: 26px; color: #838383; font-size: 16px; font-weight: 400; line-height: 26px; } @media (max-width: 1399px) { .wpo-blog-single-section .comment-respond .terms label { margin-left: 5px; font-size: 13px; } } @media (max-width: 767px) { .wpo-blog-single-section .comment-respond .terms label { margin-left: 25px; position: relative; margin-top: -25px; } } @media screen and (min-width: 1200px) { .wpo-blog-single-left-sidebar-section .blog-sidebar { padding-right: 45px; padding-left: 0; } } /*15. wpo-contact-page */ .office-info { padding-bottom: 120px; margin: 0 -10px; } @media (max-width: 1199px) { .office-info { margin: 0px; padding-bottom: 80px; } } @media (max-width: 767px) { .office-info { padding-bottom: 60px; } } @media (max-width: 1200px) { .office-info .col .office-info-item { margin-bottom: 30px; } } @media (max-width: 1200px) { .office-info .col:last-child .office-info-item { margin-bottom: 0px; } } .office-info .office-info-item { text-align: center; padding: 40px; margin: 0 10px; border-radius: 8px; border: 1px solid #FFF; box-shadow: 0px 15px 10px 0px rgba(194, 185, 185, 0.18); overflow: hidden; background: transparent; position: relative; transition: all 0.3s ease-in-out; } @media (max-width: 1199px) { .office-info .office-info-item { margin: 0px; padding: 30px; } } .office-info .office-info-item::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #FF7236; z-index: -1; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .office-info .office-info-item .office-info-icon { width: 85px; height: 85px; line-height: 85px; text-align: center; margin: 0 auto; } .office-info .office-info-item .office-info-icon .icon .fi:before { font-size: 50px; color: #FF7236; transition: all 0.3s ease-in-out; } .office-info .office-info-item .office-info-text h2 { margin: 20px 0; color: #212121; font-size: 24px; font-weight: 700; text-transform: capitalize; transition: all 0.3s ease-in-out; } .office-info .office-info-item .office-info-text p { margin-bottom: 0; color: #636776; font-size: 18px; font-weight: 500; line-height: 28px; transition: all 0.3s ease-in-out; } .office-info .office-info-item.active, .office-info .office-info-item:hover { background: url(../images/office-info-bg.png) no-repeat; } .office-info .office-info-item.active::before, .office-info .office-info-item:hover::before { opacity: 0.95; visibility: visible; } .office-info .office-info-item.active .office-info-icon .icon .fi:before, .office-info .office-info-item:hover .office-info-icon .icon .fi:before { color: #fff; } .office-info .office-info-item.active .office-info-text h2, .office-info .office-info-item:hover .office-info-text h2 { color: #fff; } .office-info .office-info-item.active .office-info-text p, .office-info .office-info-item:hover .office-info-text p { color: #fff; } .contact-left { max-width: 518px; margin: 0 auto; text-align: left; } @media (max-width: 1199px) { .contact-left { margin-left: 0; } } @media (max-width: 991px) { .contact-left { margin-bottom: 30px; } } .contact-left h2 { color: #0A1222; font-size: 44px; font-weight: 700; text-transform: capitalize; } @media (max-width: 767px) { .contact-left h2 { font-size: 35px; } } .contact-left p { color: #636776; font-size: 18px; font-weight: 400; line-height: 32px; margin-bottom: 30px; } .contact-left img { width: 100%; } .contact-right { max-width: 484px; padding-left: 40px; } @media (max-width: 1199px) { .contact-right { padding-left: 0; } } .contact-right .title h2 { color: #212121; font-size: 44px; font-weight: 700; text-transform: capitalize; } @media (max-width: 767px) { .contact-right .title h2 { font-size: 35px; } } .contact-right .title p { color: #636776; font-size: 16px; font-weight: 400; line-height: 33px; margin-bottom: 30px; } .contact-form .input-item { position: relative; margin-bottom: 40px; } .contact-form .input-item .fild { padding-bottom: 20px; padding-left: 30px; color: #636776; font-size: 18px; font-weight: 500; border: 0; width: 100%; height: 45px; border-bottom: 1px solid rgba(92, 92, 91, 0.3); } .contact-form .input-item .fild:focus-visible { outline: 0; } .contact-form .input-item label { position: absolute; left: 0; top: -2px; } .contact-form .input-item label i { color: #212121; font-size: 20px; } .contact-form .input-item .textarea { height: 120px; } .contact-form .submitbtn { margin-bottom: 0; width: 222px; height: 63px; position: relative; } .contact-form .submitbtn .fild { padding: 0; background: #FF7236; height: 63px; line-height: 67px; color: #fff; padding-left: 20px; } .contact-form .submitbtn label { position: absolute; left: 30px; top: 54%; transform: translateY(-50%); } .contact-form .submitbtn label i { color: #fff; font-size: 23px; } .contact-form ::-webkit-input-placeholder { color: #636776; } .contact-form ::-moz-placeholder { color: #636776; } .contact-form :-ms-input-placeholder { color: #636776; } .contact-form :-moz-placeholder { color: #636776; } /*-------------------------------------------------------------- 16. error-404-section --------------------------------------------------------------*/ .error-404-section { text-align: center; } .error-404-section .error-message h3 { color: #16171A; font-size: 400px; font-weight: 700; text-transform: capitalize; position: relative; margin-bottom: 0; margin-top: -70px; } @media (max-width: 1199px) { .error-404-section .error-message h3 { font-size: 250px; margin-top: -50px; } } @media (max-width: 991px) { .error-404-section .error-message h3 { font-size: 150px; margin-top: -30px; } } @media (max-width: 767px) { .error-404-section .error-message h3 { font-size: 100px; margin-top: -10px; } } .error-404-section .error-message h4 { color: #212121; font-size: 55px; font-weight: 700; text-transform: uppercase; margin-bottom: 40px; } @media (max-width: 1199px) { .error-404-section .error-message h4 { font-size: 40px; } } @media (max-width: 991px) { .error-404-section .error-message h4 { font-size: 30px; } } @media (max-width: 767px) { .error-404-section .error-message h4 { font-size: 20px; } } .error-404-section .error-message .theme-btn, .error-404-section .error-message .view-cart-btn { font-weight: 600; } /*17. track-page */ .track-page h2 { margin-bottom: 60px; } .track-page .wrape { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 991px) { .track-page .wrape { flex-wrap: wrap; } } .track-page .item { width: 260px; text-align: center; position: relative; margin-bottom: 30px; } @media (max-width: 1199px) { .track-page .item { width: 230px; } } @media (max-width: 991px) { .track-page .item { flex-basis: 50%; } } @media (max-width: 575px) { .track-page .item { flex-basis: 100%; } } .track-page .item .icon { max-width: 185px; max-height: 184px; line-height: 185px; margin: 0 auto; border-radius: 100px; background: #f1f1f1; display: block; margin-bottom: 10px; outline: 1px dotted #C1C1C1; outline-offset: -15px; transition: all 0.3s ease-in-out; position: relative; } @media (max-width: 1199px) { .track-page .item .icon { max-width: 130px; max-height: 130px; line-height: 130px; } } .track-page .item .icon span { color: #FFF; text-align: center; font-family: "Plus Jakarta Sans"; font-size: 18px; font-weight: 700; line-height: 35px; width: 36px; height: 36px; border-radius: 100px; display: flex; align-items: center; justify-content: center; position: absolute; right: 14px; top: 13px; background: #FF7236; } @media (max-width: 1199px) { .track-page .item .icon span { right: 0px; top: 0px; font-size: 14px; } } .track-page .item .icon i { font-size: 75px; color: #0B3742; } @media (max-width: 1199px) { .track-page .item .icon i { font-size: 50px; } } .track-page .item h2 { color: #101212; text-align: center; font-size: 20px; font-weight: 700; line-height: 30px; margin-bottom: 0; } @media (max-width: 1199px) { .track-page .item h2 { font-size: 17px; line-height: 50px; } } @media (max-width: 991px) { .track-page .item h2 { line-height: 30px; } } .track-page .item .shape { position: absolute; top: 40%; right: -35%; transform: translateY(-50%); } @media (max-width: 1399px) { .track-page .item .shape { right: -22%; } } @media (max-width: 1199px) { .track-page .item .shape { right: -20%; top: 33%; } } @media (max-width: 991px) { .track-page .item .shape { right: -15%; top: 33%; } } @media (max-width: 575px) { .track-page .item .shape { display: none; } } .track-page .item:last-child .shape { display: none; } @media (max-width: 991px) { .track-page .item:nth-child(2) .shape { display: none; } } .track-page .active .icon { background: #FF7236; outline: 1px dotted #f1f1f1; } .track-page .active .icon span { color: #FF7236; background: #fff; } @media (max-width: 1199px) { .track-page .active .icon span { right: 0px; top: 0px; font-size: 14px; } } .track-page .active .icon i { color: #fff; } .track-page .order-detail { border-radius: 9px; padding: 30px; background: #FFF; box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.05); margin-top: 50px; } .track-page .order-detail h3 { color: #101212; font-size: 20px; font-weight: 700; line-height: 30px; margin-bottom: 20px; border-bottom: 1px solid rgb(237, 237, 237); padding-bottom: 10px; } .track-page .order-detail ul li { display: flex; justify-content: space-between; margin-bottom: 10px; text-transform: capitalize; } @media (max-width: 575px) { .track-page .order-detail ul li { font-size: 15px; line-height: 25px; flex-direction: column; } } .track-page .order-detail ul li span { color: #042127; font-size: 16px; font-weight: 600; line-height: 33px; } .track-page .order-detail ul li span:last-child { color: #20273C; font-weight: 500; } /*# sourceMappingURL=style.css.map */ /*extra css*/ .apply-btn { background: #991b4e; color: #fff; display: inline-block; padding: 21px 45px; border: 0; text-transform: capitalize; -webkit-backface-visibility: hidden; z-index: 1; position: relative; font-size: 15px; border-radius: 0px; font-family: "Plus Jakarta Sans"; font-weight: 700; letter-spacing: 0.75px; text-transform: uppercase; overflow: hidden; } /*extra css*/