/* CSS Document */ /* Created on : 28/06/2019. Theme Name : Rogan - Business and Agency html Template. Version : 1.1. Author : Creativegigs. Developed by : Jubayer al hasan. (me@heloshape.com) / (www.me.heloshape.com) */ /* ------------------------------------------ */ /* TABLE OF CONTENTS /* ------------------------------------------ */ /* 03 - Global style */ /* 04 - Prefix Classes */ /* 09 - Main Hero Banner */ /* 10 - rogan Hero One */ /* 11 - rogan Hero Two */ /* 12 - rogan Hero Three */ /* 13 - Our Core Feature */ /* 14 - About Us One */ /* 15 - About Us Two */ /* 16 - Our Service One */ /* 17 - Testimonial Classic */ /* 18 - Testemonial Classic version two */ /* 19 - Testimonial Standard */ /* 20 - Free Consultation */ /* 21 - Home Blog */ /* 22 - Newsletter Section */ /* 23 - Footer One */ /* 24 - Achivement Section */ /* 25 - Why Choose Us */ /* 26 - Project Gallery */ /* 27 - Pricing Plan One */ /* 28 - Partner Section */ /* 29 - Contact Us HOme */ /* 30 - Banner Large Text */ /* 31 - About Text Block */ /* 32 - Our Team Standard */ /* 33 - Our Team Minimul */ /* 34 - Our Team Buisness */ /* 35 - Inner Banner */ /* 36 - Text Inner Banner One */ /* 37 - Our Service/Modern */ /* 38 - Our Service/Classic */ /* 39 - Contact Banner */ /* 40 - Intro Text */ /* 41 - Our Portfolio */ /* 42 - Project Details */ /* 43 - Blog Sidebar */ /* 44 - Our Blog */ /* 45 - Blog Details */ /* 46 - Sidebar Menu */ /* 47 - Product Filter Area/Sidebar */ /* 48 - SHOP SHOWCASE */ /* 49 - Promo Code */ /* 50 - Shop Details */ /* 51 - Cart Page */ /* 52 - CheckOut Page */ /* 53 - Contact Address */ /* 54 - FAQ Page */ /* 55 - Error */ /* 56 - Sign Up */ /*======================================================================================== *************************** Start Styling Your theme from here *************************** ==========================================================================================*/ /*------------- Global Prefix -------------------*/ :root { --text-color: #8a919c; --text-light: #c0c0c9; --text-dark: #313131; --heading: #2A2A2A; --p-rose: #ff5284; --rose-gr-bg: linear-gradient(-90deg, rgb(255, 182, 139) 0%, rgb(255, 96, 139) 100%); --rose-gr-reverse: linear-gradient(-90deg, rgb(255, 96, 139) 0%, rgb(255, 182, 139) 100%); --p-green: #0de49d; --p-orange: #ff8618; --cyan: #1aceff; --redOne: #ff6262; } /*______________________ Global style ___________________*/ #path-shape-wrapper { position: absolute; z-index: -9999; } .shape-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .img-shape { position: absolute; } .pos-r { position: relative; } .pos-a { position: absolute; } .full-width-container { padding-left: 60px; padding-right: 60px; } /*-------------- Prefix Classes ----------------*/ .tran3s, .feature-block-one.hover-state:before, .feature-block-one.hover-state:after, .newsletter-section .main-wrapper form button, .footer-about-widget .email, .footer-about-widget .phone, .footer-list ul li a, .footer-information ul li a, .owl-theme .owl-nav [class*=owl-], .gallery-polar-state .img-holder .icon, .nav-tabs>li>a, .pricing-plan-classic .nav-tabs>li>a:before, .contact-home-one .contact-text .call-to-dial, .team-standard .single-team-member .hover-content ul li a, .team-standard .single-team-member .hover-content, .gallery-sidebar .share-option ul li a, .portfolio-full-width-grid .img-content-wrapper .cbp-item-wrapper .text .read-more, .portfolio-full-width-grid .img-content-wrapper .cbp-item-wrapper .text, .theme-pagination-one ul li a, .theme-pagination-two .theme-pager span, .theme-pagination-two .theme-pager strong, .carousel-control-next, .carousel-control-prev, .blog-post-block-two .post .post-info li a, .theme-footer-three a, .blog-post-block-two .post h4 a, .inline-button-one, .blog-sidebar .sidebar-search button, .blog-sidebar .list-item ul li a, .blog-sidebar .sidebar-recent-news .text a, .theme-breadcrumbs .page-breadcrumbs li a, .blog-sidebar .sidebar-keyword ul li a, .blog-post-block-three .post .post-info li a, .blog-post-block-three .post .read-more, .eCommerce-side-menu .main-menu-list ul li a, .theme-sidebar-widget .list-item li a, .blog-details-fg .blog-fg-data .video-banner-blog .video-button, .blog-details .user-comment-area .single-comment .reply, .blog-details .post-tag-area .share-icon li a, .shop-demo-filter .selectize-dropdown .option, .shop-details .procuct-details .product-info .color-filter li a, .shop-details .procuct-details .product-info .wishlist-button, .team-minimal .single-team-member .hover-content, .theme-footer-two .social-icon li a, .team-minimal .single-team-member .hover-content ul li a, .contact-address-two .address-block a, .panel .panel-heading .panel-title a:before, .panel .panel-heading .panel-title a, .theme-footer-two .footer-menu li a, .modal-content .btn, .theme-st-header .top-header .infoList li a, .theme-st-header .top-header .social-icon a, .header-search .icon { transition: all 0.3s ease-in-out; } .tran4s, .op-partner-section-one .img-box, .service-modern-block .more, .product-showcase .single-product-case .img-holder .fvrt-icon { transition: all 0.4s ease-in-out; } .tran5s, .blog-post-block-two .img-holder img, .product-showcase .single-product-case .img-holder .cart-button, #mega-menu-holder .img-box .img img { transition: all 0.5s ease-in-out; } .tran6s { transition: all 0.6s ease-in-out; } /*^^^^^^^^^^^^^^^^^^^^^ Theme Section Title ^^^^^^^^^^^^^^^^^^^^^^^^^*/ .theme-title-one { position: relative; } .theme-title-one .upper-title { font-size: 20px; text-transform: uppercase; color: var(--text-light); /* letter-spacing: 1.5px; */ } .theme-title-one .upper-title.color-orange { color: var(--p-orange); } .theme-title-one .main-title span { position: relative; } .theme-title-one .main-title i { font-weight: 100; font-style: normal; } .theme-title-one .underline span:before { content: ''; position: absolute; bottom: 7px; left: 3px; width: 99%; height: 11px; z-index: -1; background: #ecf4ff; border-radius: 5px; } .theme-title-one .icon-box { display: inline-block; margin-bottom: 22px; position: relative; } .theme-title-one .icon-box .bg-shape { transform: rotate(-90deg); transition: all 1s ease-out; } .theme-title-one .icon-box.show-pr .bg-shape { transform: rotate(0deg); } .theme-title-one .icon-box .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*^^^^^^^^^^^^^^^^^^^^^ Theme Button ^^^^^^^^^^^^^^^^^^^^^^^^^*/ /*common style*/ body .theme-btn { position: relative; z-index: 1; line-height: 40px; border-radius: 30px; min-width: 140px; font-size: 16px; text-align: center; padding: 0 35px; text-transform: capitalize; transition: all 0.3s ease-in-out; } body .theme-btn:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 30px; transition: all 0.3s ease-in-out; transform: scale(0, 1); z-index: -1; } body .theme-btn:hover:before { transform: scale(1); } body .theme-btn i { margin-left: 5px; } /*Button 3px radius*/ body .theme-btn.radius3 { border-radius: 3px; } body .theme-btn.radius3:before { border-radius: 3px; } /*SOlid Button One*/ body .solid-button-one { color: #fff; background: var(--p-green); border: 2px solid var(--p-green); } body .solid-button-one:before { background: #fff; } body .solid-button-one:hover { color: var(--p-green); } body .solid-button-one.button-rose { background: var(--rose-gr-bg); border: none; line-height: 42px; box-shadow: none; width: auto; } body .solid-button-one.button-rose:before { background: var(--rose-gr-reverse); transform: scale(1); opacity: 0; } body .solid-button-one.button-rose:hover { color: #fff; } body .solid-button-one.button-rose:hover:before { opacity: 1; } body .solid-button-one.button-orange { background: var(--p-orange); border: 2px solid var(--p-orange); } body .solid-button-one.button-orange:before { background: #fff; } body .solid-button-one.button-orange:hover { color: var(--p-orange); } /* 鐧借壊鎸夐挳 */ body .solid-button-one.button-white { background: #fff; border: none; line-height: 42px; box-shadow: none; width: auto; color: #727786; } body .solid-button-one.button-white:before { background: var(--rose-gr-reverse); /* transform: scale(1); */ opacity: 0; } body .solid-button-one.button-white:hover { color: #fff; /* background: var(--rose-gr-bg); */ } body .solid-button-one.button-white:hover:before { opacity: 1; } .theme-main-menu.fixed .solid-button-one.button-white { background: var(--rose-gr-bg); color: #fff; } .theme-main-menu.fixed .solid-button-one.button-white:before { background: var(--rose-gr-reverse); transform: scale(1); opacity: 0; } .theme-main-menu.fixed .solid-button-one.button-white:hover { color: #fff; /* background: var(--rose-gr-bg); */ } /*Line Button One*/ body .line-button-one { color: var(--p-green); border: 2px solid var(--p-green); } body .line-button-one:before { background: var(--p-green); } body .line-button-one:hover { color: #fff; } body .line-button-one.button-rose { color: var(--p-rose); border: 2px solid var(--p-rose); } body .line-button-one.button-rose:before { background: var(--p-rose); } body .line-button-one.button-rose:hover { color: #fff; } body .line-button-one.button-orange { color: var(--p-orange); border: 2px solid var(--p-orange); } body .line-button-one.button-orange:before { background: var(--p-orange); } body .line-button-one.button-orange:hover { color: #fff; } /*Line Button Two*/ body .line-button-two { border: 2px solid #dfdfdf; color: var(--text-dark); } body .line-button-two:hover { color: #fff; border-color: #fff; } body .line-button-two:before { background: var(--rose-gr-bg); } body .line-button-two.button-orange:before { background: var(--p-orange); } /*Video Button*/ body .video-button-one { font-size: 18px; line-height: 52px; color: var(--text-dark); font-weight: 500; transition: all 0.3s ease-in-out; } body .video-button-one i { font-size: 50px; color: var(--text-light); vertical-align: middle; transition: all 0.3s ease-in-out; } body .video-button-one:hover, body .video-button-one:hover i { color: var(--p-green); } body .video-button-one.button-rose:hover, body .video-button-one.button-rose:hover i { color: var(--p-rose); } body .video-button-one.button-orange:hover, body .video-button-one.button-orange:hover i { color: var(--p-orange); } /*Button Style Three*/ body .theme-button-three { text-transform: capitalize; text-align: center; font-size: 18px; color: #fff; line-height: 50px; padding: 0 40px; position: relative; z-index: 1; background: #212121; transition: all 0.3s ease-in-out; } body .theme-button-three:hover { background: var(--p-rose); } /*Inline Button*/ body .inline-button-one { font-family: 'gilroy-bold'; font-size: 14px; color: var(--text-dark); text-transform: uppercase; letter-spacing: 1.2px; text-decoration: underline; } body .inline-button-one:hover { color: var(--p-rose); } /*Shadow Button One*/ body .shadow-button-one { box-shadow: 0px 10px 25px 0px rgba(123, 147, 171, 0.15); color: var(--p-rose); line-height: 50px; background: #fff; } body .shadow-button-one:hover { background: var(--p-rose); color: #fff; } /*^^^^^^^^^^^^^^^^^^^^^ Theme Pagination ^^^^^^^^^^^^^^^^^^*/ .theme-pagination-one ul { display: inline-block; margin: 0 -10px; } .theme-pagination-one ul li { float: left; padding: 0 10px; } .theme-pagination-one ul li a { font-family: 'gilroy-semibold'; font-size: 22px; color: var(--text-dark); line-height: 40px; } .theme-pagination-one ul li a .icon { font-size: 30px; } .theme-pagination-one ul li.active a { cursor: default; } .theme-pagination-one ul li a:hover, .theme-pagination-one ul li.active a { color: var(--p-rose); } .theme-pagination-two .theme-pager { position: relative; } .theme-pagination-two .theme-pager span { font-size: 45px; position: absolute; color: var(--text-dark); bottom: -10px; } .theme-pagination-two .theme-pager i { font-style: normal; font-size: 16px; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; } .theme-pagination-two .theme-pager strong { font-family: 'gilroy-bold'; font-size: 28px; padding-top: 10px; display: block; color: var(--text-dark); margin: 0; } .theme-pagination-two .prev { padding-left: 75px; } .theme-pagination-two .next { padding-right: 75px; } .theme-pagination-two .prev span { left: 0; } .theme-pagination-two .next span { right: 0; } .theme-pagination-two .theme-pager:hover span, .theme-pagination-two .theme-pager:hover strong { color: var(--p-rose); } /*^^^^^^^^^^^^^^^^^^^^^ rogan Main Hero Banner ^^^^^^^^^^^^^^^^^^^^^^*/ .rogan-hero-section { z-index: 9; } .rogan-hero-section .main-wrapper { z-index: 5; } .rogan-hero-section .banner-upper-heading { color: var(--text-dark); font-size: 20px; text-transform: uppercase; } .rogan-hero-section .banner-upper-heading span { color: var(--p-green); } .rogan-hero-section .banner-main-title.underline span { position: relative; } .rogan-hero-section .banner-main-title.underline span:before { content: ''; position: absolute; bottom: 7px; left: 0; width: 99%; height: 11px; z-index: -1; background: #ecf4ff; } .rogan-hero-section .banner-sub-title { font-size: 24px; color: #929292; } .rogan-hero-section .theme-btn, .rogan-hero-section .video-button-one { margin-top: 15px; } /*^^^^^^^^^^^^^^^^^^^^^ rogan Hero One ^^^^^^^^^^^^^^^^^^^^^^*/ .rogan-hero-one .solid-button-one { margin-right: 20px; } .rogan-hero-one .shape-one { position: absolute; right: 0; top: 30px; } .rogan-hero-one .main-illustration { position: absolute; height: 100%; width: 1100px; right: -170px; top: 0; } .rogan-hero-one .main-illustration iframe { width: 100%; height: 100%; } /*.rogan-hero-one .main-illustration .b-shape-1 { position: absolute; top:20%; left:20%; z-index: 1; } .rogan-hero-one .main-illustration .b-shape-2 { position: absolute; top:42%; left:40%; z-index: 1; }*/ .rogan-hero-one .line-shape-one { top: 0; right: 0; z-index: -1; } .rogan-hero-one .line-shape-two { top: 0; left: 0; z-index: -1; } .rogan-hero-one .light-lamp { top: 113px; right: 30px; } .rogan-hero-one .shape-two { left: 24%; top: 9%; animation: rotated 20s infinite linear; } .rogan-hero-one .shape-three { left: 40%; top: 13%; animation: animationFramesOne 25s infinite linear; } .rogan-hero-one .shape-four { right: 20%; top: 18%; animation: animationFramesOne 30s alternate infinite linear; } .rogan-hero-one .shape-five { right: 11%; top: 23%; animation: animationFramesFour 25s alternate infinite linear; } .rogan-hero-one .shape-six { right: 40%; top: 36%; animation: rotated 15s infinite linear; } .rogan-hero-one .shape-seven { right: 3%; bottom: 11%; animation: animationFramesOne 25s infinite linear; } .rogan-hero-one .shape-eight { right: 19%; bottom: 14%; animation: animationFramesOne 30s alternate infinite linear; } .rogan-hero-one .shape-nine { right: 55%; bottom: 0; animation: rotated 12s infinite linear; } .rogan-hero-one .shape-ten { left: 27%; bottom: 16%; animation: rotated 14s infinite linear; } .rogan-hero-one .shape-eleven { left: 15%; bottom: 26%; animation: animationFramesOne 25s infinite linear; } .rogan-hero-one .shape-twelve { left: 4%; top: 41%; animation: rotated 14s infinite linear; } /*^^^^^^^^^^^^^^^^^^^^^ rogan Hero Two ^^^^^^^^^^^^^^^^^^^^^^*/ .rogan-hero-section.text-center .theme-btn { margin-left: 10px; margin-right: 10px; } .rogan-hero-two .main-illustration { margin: 80px auto 0; } .rogan-hero-two .line-shape-one { top: 0; right: 0; z-index: -1; } .rogan-hero-two .line-shape-two { top: 0; left: 0; z-index: -1; } .rogan-hero-two .shape-one { left: 12%; top: 17%; animation: rotated 20s infinite linear; } .rogan-hero-two .shape-two { left: 36%; top: 12%; animation: animationFramesOne 25s infinite linear; } .rogan-hero-two .shape-three { left: 73%; top: 13%; animation: rotated 20s infinite linear; } .rogan-hero-two .shape-four { right: 8%; top: 17%; animation: animationFramesFour 25s alternate infinite linear; } .rogan-hero-two .shape-five { left: 17%; top: 29%; } .rogan-hero-two .shape-six { right: 17%; top: 27%; } .rogan-hero-two .shape-seven { left: 8%; top: 42%; animation: rotated 20s infinite linear; } .rogan-hero-two .shape-eight { right: 5%; top: 45%; animation: rotated 20s infinite linear; } .rogan-hero-two .shape-nine { left: 11%; top: 57%; animation: rotated 20s infinite linear; } /*^^^^^^^^^^^^^^^^^^^^^ rogan Hero Three ^^^^^^^^^^^^^^^^^^^^^^*/ .rogan-hero-section.rogan-hero-three { overflow: hidden; } .rogan-hero-section.rogan-hero-three .banner-upper-heading { font-family: 'gilroy-light'; font-size: 20px; color: var(--text-color); letter-spacing: 1.4px; } .rogan-hero-section.rogan-hero-three .banner-main-title { /* font-family: 'gilroy-black'; */ font-size: 64px; /* font-size: 44px; */ line-height: 1.25; } .rogan-hero-section.rogan-hero-three .banner-main-title span { /* font-family: 'gilroy-ultralight'; */ font-weight: 100; } .rogan-hero-section.rogan-hero-three .solid-button-one { margin-right: 20px; } .rogan-hero-section.rogan-hero-three .main-image-shape { width: 990px; height: 990px; border-radius: 50%; top: -205px; right: -185px; } .rogan-hero-section.rogan-hero-three .shape-one { width: 990px; height: 990px; top: -108px; right: -184px; z-index: -1; border-radius: 50%; background: linear-gradient(134deg, #7be7ff, #5bffd2); } .rogan-hero-section.rogan-hero-three .shape-two { width: 70px; height: 70px; top: 16%; right: 770px; z-index: 1; background: linear-gradient(321deg, rgba(255, 56, 153, 0.36), rgba(255, 139, 64, 0.36)); border-radius: 50%; } .rogan-hero-section.rogan-hero-three .shape-three { width: 378px; height: 378px; bottom: 9%; right: 287px; z-index: 1; background: linear-gradient(321deg, rgba(250, 217, 97, 0.1), rgba(247, 107, 28, 0.1)); border-radius: 50%; } .rogan-hero-section.rogan-hero-three .shape-four { width: 12px; height: 12px; top: 20%; left: 28%; animation: animationFramesOne 25s infinite linear; } .rogan-hero-section.rogan-hero-three .shape-five { width: 25px; height: 25px; top: 44%; left: 4%; animation: animationFramesOne 30s alternate infinite linear; } .rogan-hero-section.rogan-hero-three .shape-six { width: 15px; height: 15px; top: 49%; left: 51%; animation: animationFramesTwo 35s infinite linear; } .rogan-hero-section.rogan-hero-three .shape-seven { width: 12px; height: 12px; bottom: 20%; left: 33%; animation: animationFramesOne 30s infinite linear; } /*^^^^^^^^^^^^^^^^^^^^^ rogan Hero Four ^^^^^^^^^^^^^^^^^^^^^^*/ .rogan-hero-section.rogan-hero-four { overflow: hidden; } .rogan-hero-section.rogan-hero-four .banner-main-title { font-size: 80px; line-height: 87px; } .rogan-hero-section.rogan-hero-four .theme-btn { margin-right: 45px; } .rogan-hero-section.rogan-hero-four .bg-shape { bottom: 0; right: 0; } .rogan-hero-section.rogan-hero-four .shape-two { width: 12px; height: 12px; top: 20%; left: 28%; animation: animationFramesOne 25s infinite linear; } .rogan-hero-section.rogan-hero-four .shape-three { width: 25px; height: 25px; top: 20%; right: 11%; animation: animationFramesTwo 25s infinite linear; } .rogan-hero-section.rogan-hero-four .shape-four { width: 20px; height: 20px; top: 50%; left: 47%; animation: scale-up-two 5s infinite linear; } .rogan-hero-section.rogan-hero-four .shape-five { width: 12px; height: 12px; bottom: 11%; left: 33%; animation: animationFramesOne 30s infinite linear; } .rogan-hero-section.rogan-hero-four .shape-six { width: 25px; height: 25px; top: 44%; left: 4%; animation: animationFramesOne 30s alternate infinite linear; } .rogan-hero-section.rogan-hero-four .screen-wrapper { z-index: 0; } .rogan-hero-section.rogan-hero-four .screen-one { right: 180px; top: 200px; overflow: hidden; } .rogan-hero-section.rogan-hero-four .screen-one .screen { left: 97px; top: 58px; } .rogan-hero-section.rogan-hero-four .screen-two { right: 365px; top: 315px; overflow: hidden; } .rogan-hero-section.rogan-hero-four .screen-two .screen { left: 39px; top: 28px; } .rogan-hero-section.rogan-hero-four .screen-three { right: 295px; bottom: -180px; overflow: hidden; } .rogan-hero-section.rogan-hero-four .screen-four { right: 37%; top: 44%; overflow: hidden; } .rogan-hero-section.rogan-hero-four .screen-four .screen { left: 51px; top: 14px; } /*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Our Core Feature ^^^^^^^^^^^^^^^^^^^^^^^^^^^*/ .our-core-feature.style-one .shape-one { top: 17%; left: 25%; animation: animationFramesOne 30s infinite linear; } .our-core-feature.style-one .shape-two { top: 45%; left: 4%; animation: animationFramesOne 35s alternate infinite linear; } .our-core-feature.style-one .shape-three { bottom: 13%; left: 24%; animation: animationFramesTwo 35s infinite linear; } .our-core-feature.style-one .shape-four { bottom: -8%; left: 41%; animation: animationFramesOne 25s infinite linear; } .our-core-feature.style-one .shape-five { right: 0; top: 21%; } .our-core-feature.style-one .shape-six { right: 14%; bottom: 33%; } .our-core-feature .feature-block-wrapper { padding-right: 60px; } .feature-block-one { background: #fff; border-radius: 5px; overflow: hidden; padding: 60px 30px 55px 40px; position: relative; z-index: 5; box-shadow: 0px 30px 70px 0px rgba(223, 227, 234, 0.5); } .feature-block-one .icon { font-size: 60px; } .feature-block-one .read-more { font-size: 30px; color: var(--text-light); margin-top: 15px; } .feature-block-one:hover .read-more { color: var(--p-green); } .feature-block-one .icon-one { color: var(--cyan); } .feature-block-one .icon-two { color: var(--p-green); } .feature-block-one .icon-three { color: var(--redOne); } .feature-block-one.hover-state:before { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(130deg, rgb(131, 239, 146) 0%, rgb(0, 211, 139) 100%); opacity: 0; } .feature-block-one.hover-state:hover:before { opacity: 1; } .feature-block-one.hover-state:after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgb(255, 255, 255, 0.13); z-index: -1; top: -80px; right: -80px; opacity: 0; transform: scale(0.2); } .feature-block-one.hover-state:hover:after { opacity: 1; transform: scale(1); transition-duration: 1s; } .feature-block-one.hover-state:hover .icon, .feature-block-one.hover-state:hover .title, .feature-block-one.hover-state:hover p { color: #fff; } .feature-block-one.hover-state.main-p-color:before { background: var(--rose-gr-bg); } .feature-block-one.main-p-color:hover .read-more { color: #fff; } .our-core-feature.style-two .shape-one { width: 1067px; height: 1067px; top: 75px; right: -355px; z-index: -1; } .our-core-feature.style-two .shape-two { width: 1067px; height: 1067px; top: 0; right: -377px; } .our-core-feature.style-two .shape-three { width: 20px; height: 20px; top: 60px; left: 32%; animation: animationFramesFive 25s infinite linear; } .our-core-feature.style-two .shape-four { width: 10px; height: 10px; left: 6%; top: 42%; animation: animationFramesOne 30s infinite linear; } .our-core-feature.style-two .shape-five { width: 10px; height: 10px; left: 6%; bottom: 100px; animation: animationFramesTwo 30s infinite linear; } .our-core-feature.style-two .shape-six { width: 20px; height: 20px; left: 35%; bottom: 29%; animation: animationFramesOne 25s infinite linear; } .our-core-feature.style-two .shape-seven { width: 10px; height: 10px; right: 40%; bottom: 13%; animation: animationFramesTwo 25s infinite linear; } .our-core-feature.style-three .shape-one { top: 46%; left: 12%; } .our-core-feature.style-three .shape-two { width: 20px; height: 20px; top: 50px; right: 12%; animation: animationFramesOne 25s infinite linear; } .our-core-feature.style-three .shape-three { width: 8px; height: 8px; top: 50%; right: 5%; } .our-core-feature.style-three .shape-four { width: 12px; height: 12px; bottom: 13%; left: 30%; animation: animationFramesOne 25s infinite linear; } .our-core-feature.style-three .shape-five { width: 20px; height: 20px; top: 45%; left: 11%; animation: animationFramesOne 25s infinite linear; } /*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ About Us One ^^^^^^^^^^^^^^^^^^^^^^^^^^^*/ .about-us-block-one:before { content: ''; position: absolute; width: 100%; height: 635px; top: -105px; left: 0; background-size: cover; z-index: -1; } .about-us-block-one .bold-text { font-size: 20px; line-height: 34px; color: var(--text-dark); } .about-us-block-one .inner-wrapper .path-shape-holder { position: absolute; height: 100%; z-index: -1; right: -20px; top: -10px; max-width: 50%; } .about-us-block-one .inner-wrapper .path-shape-holder .image-box { position: absolute; right: 25px; top: -30px; } .about-us-block-one .shape-wrapper .shape-one { top: 22%; left: -70px; } .about-us-block-one .shape-wrapper .shape-two { right: 0; top: 35%; animation: animationFramesOne 30s infinite linear; } .about-us-block-one .shape-wrapper .shape-three { right: 20%; top: 25%; animation: animationFramesTwo 25s infinite linear; } .about-us-block-one .shape-wrapper .shape-four { right: 13%; bottom: -8%; animation: animationFramesOne 25s infinite linear; } .about-us-block-one .shape-wrapper .shape-five { right: 34%; bottom: -6%; animation: rotated 20s infinite linear; } .about-us-block-one .shape-wrapper .shape-six { right: 39%; top: 48%; animation: rotated 20s infinite linear; } /*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ About Us Two ^^^^^^^^^^^^^^^^^^^^^^^^^^^*/ .about-us-block-two .mark-text { color: var(--text-dark); font-size: 25px; font-style: italic; } .about-us-block-two .main-img-box { display: inline-block; } .about-us-block-two .main-img-box .img-one { border-radius: 15px; overflow: hidden; box-shadow: 0px 71px 100px 0px rgba(140, 140, 140, 0.33); } .about-us-block-two .main-img-box .img-one:before { content: ''; position: absolute; width: 0; height: 0; border: 70px solid #fff; border-radius: 50%; bottom: -150px; left: -150px; transition: all 1.9s ease-in-out; } .about-us-block-two .main-img-box.show-pr .img-one:before { width: 300px; height: 300px; } .about-us-block-two .main-img-box .img-two { border-radius: 10px; overflow: hidden; box-shadow: 0px 25px 50px 0px rgba(140, 140, 140, 0.33); position: absolute; z-index: -1; left: -165px; top: 50%; margin-top: -50%; } .about-us-block-two .shape-one { width: 960px; height: 960px; left: -290px; top: 70px; z-index: -1; } .about-us-block-two .shape-two { width: 960px; height: 960px; left: -330px; top: 0; z-index: 1; } .about-us-block-two .shape-three { width: 20px; height: 20px; top: 50px; right: 40%; animation: animationFramesOne 25s infinite linear; } .about-us-block-two .shape-four { width: 20px; height: 20px; top: 41%; right: 2%; animation: scale-up-two 5s infinite linear; } .about-us-block-two .shape-five { width: 10px; height: 10px; bottom: 20%; right: 30%; animation: animationFramesOne 35s infinite linear; } /*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Our Service One ^^^^^^^^^^^^^^^^^^^^^^^^^^^*/ .our-service-one .inner-wrapper .theme-title-one { position: absolute; top: 80px; left: 0; z-index: 1; } .our-service-one .shape-wrapper .shape-one { left: 0; top: 65%; } .our-service-one .shape-wrapper .shape-two { left: 29%; top: 20%; animation: animationFramesOne 30s infinite linear; } .our-service-one .shape-wrapper .shape-three { left: 11%; top: 40%; animation: animationFramesTwo 25s infinite linear; } .our-service-one .shape-wrapper .shape-four { left: 10%; top: 66%; animation: animationFramesOne 35s infinite linear; } .our-service-one .shape-wrapper .shape-five { left: 10%; top: 91%; animation: rotated 20s infinite linear; } .our-service-one .shape-wrapper .shape-six { left: 26%; top: 96%; animation: animationFramesOne 35s infinite linear; } .our-service-one .shape-wrapper .shape-seven { left: 9%; top: 94%; } .our-service-one .shape-wrapper .shape-eight { right: 0; top: 9%; } .our-service-one .shape-wrapper .shape-nine { right: 6%; top: 11%; } /*^^^^^^^^^^^^^^^^^^^^^^^^^^ Testimonial Classic ^^^^^^^^^^^^^^^^^^^^^^^^*/ .testimonial-section-classic { padding: 174px 0 400px; overflow: hidden; } .testimonial-section-classic.style-two { padding: 250px 0 310px; } .testimonial-section-classic .main-bg { position: absolute; width: 100%; top: 0; right: 0; z-index: -1; } .testimonial-section-classic.style-one .shape-one { left: 10%; top: 2%; } .testimonial-section-classic .main-content { position: relative; background: #fff; border-radius: 20px; box-shadow: 0px 16px 25px 0px rgba(0, 0, 0, 0.03); padding: 70px 100px 50px; z-index: 5; } .testimonial-section-classic .main-content:before { content: ""; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } .testimonial-section-classic .inner-container { width: 69%; margin: 60px auto 0; position: relative; z-index: 1; text-align: center; } .testimonial-section-classic .inner-container:before { content: ''; position: absolute; bottom: -30px; left: 35px; right: 35px; height: 200px; background: #fff; border-radius: 20px; box-shadow: 0px 15px 23px 0px rgba(35, 49, 64, 0.09); z-index: -1; } .testimonial-section-classic .inner-container:after { content: ''; position: absolute; bottom: -55px; left: 80px; right: 80px; height: 200px; background: #fff; border-radius: 20px; box-shadow: 0px 14px 21px 0px rgba(0, 0, 0, 0.03); z-index: -3; } .testimonial-section-classic .inner-container p { font-size: 22px; line-height: 45px; } .testimonial-section-classic .inner-container .name { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 18px; text-transform: uppercase; padding: 45px 0 4px; } .testimonial-section-classic .inner-container .designation { color: var(--text-light); } .testimonial-section-classic .owl-theme .owl-nav { position: absolute; width: 100%; left: 0; bottom: -228px; } .testimonial-section-classic .owl-theme .owl-nav [class*=owl-] { background: transparent; margin: 0 10px; padding: 0; font-size: 35px; color: #5fa775; opacity: 0.5; } .testimonial-section-classic .owl-theme .owl-nav [class*=owl-]:hover { opacity: 1; } .testimonial-section-classic .shape-wrapper .people { position: absolute; border-radius: 50%; width: 110px; height: 110px; box-shadow: 0px 10px 20px 0px rgba(20, 44, 56, 0.25); } .testimonial-section-classic .shape-wrapper .people:nth-child(1) { top: 14%; left: 13%; animation: scale-up-one 14s infinite linear; } .testimonial-section-classic .shape-wrapper .people:nth-child(2) { top: 46%; left: 4%; animation: scale-up-two 9s infinite linear; } .testimonial-section-classic .shape-wrapper .people:nth-child(3) { bottom: 9%; left: 10%; animation: scale-up-three 8s infinite linear; } .testimonial-section-classic .shape-wrapper .people:nth-child(4) { top: 14%; right: 19%; animation: scale-up-two 10s infinite linear; } .testimonial-section-classic .shape-wrapper .people:nth-child(5) { top: 44%; right: 2%; animation: scale-up-three 11s infinite linear; } .testimonial-section-classic .shape-wrapper .people:nth-child(6) { bottom: 9%; right: 10%; animation: scale-up-one 12s infinite linear; } .testimonial-section-classic.style-two .main-content, .testimonial-section-classic.style-two .inner-container:before, .testimonial-section-classic.style-two .inner-container:after { box-shadow: none; } .testimonial-section-classic.style-two .shape-one { left: 30%; top: 13%; } .testimonial-section-classic.style-two .shape-two { right: 30%; top: 16%; } .testimonial-section-classic.style-two .shape-three { left: 14%; top: 39%; } .testimonial-section-classic.style-two .shape-four { right: 15%; top: 41%; } .testimonial-section-classic.style-two .shape-five { left: 17%; top: 69%; } .testimonial-section-classic.style-two .shape-six { right: 14%; top: 69%; } .testimonial-section-classic.style-two .shape-seven { left: 35%; top: 89%; } .testimonial-section-classic.style-two .shape-eight { right: 34%; top: 87%; } .testimonial-section-classic.style-two .shape-wrapper .people:nth-child(1) { top: 24%; left: 18%; } .testimonial-section-classic.style-two .shape-wrapper .people:nth-child(2) { top: 53%; left: 6%; } .testimonial-section-classic.style-two .shape-wrapper .people:nth-child(3) { bottom: 14%; left: 20%; } .testimonial-section-classic.style-two .shape-wrapper .people:nth-child(4) { top: 25%; right: 22%; } .testimonial-section-classic.style-two .shape-wrapper .people:nth-child(5) { top: 53%; right: 10%; } .testimonial-section-classic.style-two .shape-wrapper .people:nth-child(6) { bottom: 12%; right: 22%; } /*^^^^^^^^^^^^^^^^^^ Testemonial Classic version two ^^^^^^^^^^^^^*/ .testimonial-classic-v2 .main-bg-wrapper { margin: 0 0 0 31.5%; background-size: cover; height: 670px; } .testimonial-classic-v2 .main-bg-wrapper .quote { position: absolute; width: 100%; height: 100%; overflow: hidden; top: 0; bottom: 0; } .testimonial-classic-v2 .main-bg-wrapper .quote span { position: absolute; font-family: 'gilroy-black'; font-size: 400px; color: #fff; left: 0; bottom: 0; } .testimonial-classic-v2 .main-bg-wrapper .main-slider-wrapper { position: absolute; max-width: 500px; z-index: 9; top: 0; left: 0; background: #765bff; padding: 85px 100px 80px 75px; transform: translate(-50%, -34%); z-index: 1; } .testimonial-classic-v2 .main-bg-wrapper .main-slider-wrapper .icon { width: 40px; height: 31px; } .testimonial-classic-v2 .main-bg-wrapper .main-slider-wrapper .item p { font-size: 28px; line-height: 52px; color: #fff; font-style: italic; margin: 15px 0 80px 0; } .testimonial-classic-v2 .main-bg-wrapper .main-slider-wrapper .item .name { padding-left: 30px; } .testimonial-classic-v2 .main-bg-wrapper .main-slider-wrapper .item .name h6 { font-family: 'gilroy-semibold'; font-size: 20px; color: #fff; margin-bottom: 2px; } .testimonial-classic-v2 .main-bg-wrapper .main-slider-wrapper .item .name span { text-transform: uppercase; font-size: 15px; text-transform: uppercase; color: #fff; letter-spacing: 1.2px; } .testimonial-classic-v2 .main-bg-wrapper .main-slider-wrapper .item img { width: 50px; height: 50px; border-radius: 50%; } .testimonial-classic-v2 .owl-theme .owl-nav { margin: 0; } .testimonial-classic-v2 .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; padding: 0; margin: 0 3px; } .testimonial-classic-v2 .owl-theme .owl-dots .owl-dot.active span, .testimonial-classic-v2 .owl-theme .owl-dots .owl-dot:hover span { background: #fff; border-color: #fff; } .testimonial-classic-v2 .owl-theme .owl-dots { position: absolute; bottom: 0; right: -35px; z-index: 1; } /*^^^^^^^^^^^^^^^^^^^^^^^ Testimonial Standard ^^^^^^^^^^^^^^^^^^^^*/ .testimonial-section-standard:before { content: url(../images/onu/icon/icon10.svg); position: absolute; right: 0; top: 40%; z-index: -1; } .testimonial-section-standard.bg-color { background: #f4f8ff; padding: 140px 0 110px; } .testimonial-section-standard .slider-wrapper { max-width: 1200px; margin-right: 85px; margin-left: -225px; } .testimonial-section-standard .customer-content { border-radius: 4px; background-color: rgb(255, 255, 255); box-shadow: 0px 20px 40px 0px rgba(60, 60, 60, 0.05); padding: 45px 40px 55px; margin: 30px 24px 60px; position: relative; } .testimonial-section-standard .customer-content a{ color: inherit; } .testimonial-section-standard .customer-content:before { content: url(../images/onu/icon/icon9.svg); position: absolute; right: 40px; bottom: 55px; z-index: 0; width: 20px; } .testimonial-section-standard .customer-content .c-img { width: 42px; height: 42px; border-radius: 50%; margin-right: 20px; } .testimonial-section-standard .customer-content h6 { /* font-family: 'gilroy-semibold'; */ font-size: 16px; z-index: 1; position: relative; color: inherit; } .testimonial-section-standard .customer-content span { font-size: 16px; color: var(--text-light); } .testimonial-section-standard .shape-one { width: 850px; height: 850px; top: 75px; left: -320px; z-index: -1; } .testimonial-section-standard .shape-two { width: 850px; height: 850px; top: 0; left: -330px; } .testimonial-section-standard .shape-three { width: 10px; height: 10px; top: 110px; right: 30%; } .testimonial-section-standard .shape-four { width: 20px; height: 20px; bottom: 110px; right: 40%; } .testimonial-section-standard .shape-five { left: 0; top: 0; } /*--------------------- Free Consultation -------------------*/ .consultation-section:before { position: absolute; left: 0; top: -145px; z-index: -1; } .consultation-section iframe { position: absolute; z-index: -1; top: 0; left: 0; width: 1050px; height: 1050px; } .theme-form-style-one input, .theme-form-style-one textarea { width: 100%; max-width: 100%; border: 1px solid #e6e6e6; border-radius: 3px; color: var(--text-light); margin-bottom: 25px; } .theme-form-style-one input { height: 50px; padding: 0 20px; } .theme-form-style-one textarea { height: 170px; max-height: 170px; padding: 20px; resize: none; } .theme-form-style-one input:focus, .theme-form-style-one textarea:focus { border-color: #6a6a6a; } /*------------------------- Home Blog ------------------------*/ .home-blog-one:before { position: absolute; right: 0; top: 0; z-index: -1; } .home-blog-one:after { position: absolute; left: 0; top: 85px; z-index: -1; } .blog-post-block-one { position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .blog-post-block-one .flip-box-front { background: #fff; padding: 50px 15px 50px 35px; border-radius: 3px; box-shadow: 0px 30px 70px 0px rgba(226, 232, 236, 0.5); } .blog-post-block-one .flip-box-front .author-img { width: 60px; height: 60px; border-radius: 50%; float: left; } .blog-post-block-one .flip-box-front .author-info { float: left; padding-left: 22px; } .blog-post-block-one .author-info .name { font-size: 20px; padding-top: 7px; } .blog-post-block-one .author-info .date { font-size: 16px; color: #838b98; } .blog-post-block-one .title { font-size: 24px; line-height: 32px; color: var(--heading); margin: 28px 0 20px; } .blog-post-block-one .flip-box-back { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; border-radius: 3px; padding: 50px 15px 50px 35px; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background: linear-gradient(-60deg, rgb(130, 239, 146) 0%, rgb(10, 213, 139) 100%); } .blog-post-block-one .flip-box-back .author-info .name, .blog-post-block-one .flip-box-back .author-info .date, .blog-post-block-one .flip-box-back .title { color: #fff; } .blog-post-block-one .flip-box-back .author-info .name { padding: 0 0 5px; } .blog-post-block-one .flip-box-back .more { color: #fff; font-size: 40px; position: absolute; left: 35px; bottom: 30px; } .blog-post-block-one:hover .flip-box-back { transform-origin: center top; -webkit-transform: scaleY(1); transform: scaleY(1) } /*--------------------- Newsletter Section -------------------*/ .newsletter-one { padding-bottom: 65px; } .newsletter-one .shape-one { left: 50%; top: -20%; } .newsletter-one .shape-two { left: 8%; top: 53%; } .newsletter-one .shape-three { left: 15%; bottom: 0; } .newsletter-one .shape-four { right: 3%; top: 51%; } .newsletter-one .shape-five { right: 20%; top: 70%; } .newsletter-one .shape-six { top: -20%; left: 0; } .newsletter-one .shape-seven { right: 0; top: -24%; } .newsletter-section .main-wrapper form { max-width: 57%; margin: 0 auto; position: relative; } .newsletter-section .main-wrapper form input { width: 100%; height: 65px; font-style: italic; border: 1px solid #ededed; border-radius: 38px; padding: 0 105px 0 40px; font-size: 18px; } .newsletter-section .main-wrapper form button { position: absolute; top: 0; right: 0; height: 65px; width: 100px; border-radius: 0 38px 38px 0; color: #fff; font-size: 32px; background: var(--p-green); } .newsletter-section .main-wrapper form button:hover { background: #262626; } .newsletter-section .main-wrapper form ::placeholder { color: rgba(62, 62, 62, 0.4); opacity: 1; } .newsletter-section .main-wrapper form :-ms-input-placeholder { color: rgba(62, 62, 62, 0.4); } .newsletter-section .main-wrapper form ::-ms-input-placeholder { color: rgba(62, 62, 62, 0.4); } .newsletter-section .subscription-label { text-align: center; margin: 5px 0 0; display: block; } .newsletter-section .subscription-label.error { color: #ff4343; } .newsletter-section .subscription-label.valid { color: var(--p-green); } .newsletter-two { padding: 210px 0 ; } .newsletter-section.newsletter-two .main-wrapper form input { box-shadow: 0px 20px 30px 0px rgba(236, 240, 242, 0.5); } .newsletter-section.newsletter-two .main-wrapper form .button-rose { background: var(--rose-gr-bg); } .newsletter-section.newsletter-two .main-wrapper form .button-rose:hover { background: var(--rose-gr-reverse); } .newsletter-section.newsletter-two .main-wrapper form .button-orange { background: var(--p-orange); } .newsletter-two .shape-one { width: 16px; height: 16px; top: 35%; left: 18%; } .newsletter-two .shape-two { width: 11px; height: 11px; bottom: 0; right: 10%; } /*----------------------- Footer One ---------------------*/ footer.top-border { border-top: 1px solid rgba(0, 0, 0, 0.06); } .top-footer [class*="col-"] { margin-bottom: 40px; } .footer-about-widget .email { font-size: 18px; color: var(--text-color); margin: 12px 0 10px; display: block; } .footer-about-widget .phone { font-size: 20px; color: var(--heading); } .footer-about-widget .email:hover, .footer-about-widget .phone:hover { color: var(--p-green); } .footer-title { font-family: 'Roboto', sans-serif; font-size: 22px; padding: 0 0 25px; } .footer-list ul li a { display: block; line-height: 38px; font-size: 17px; color: var(--text-color); } .footer-list ul li a:hover { color: var(--p-green); } .footer-information p { padding: 0 0 30px; color: #76797e; } .footer-information ul li { display: inline-block; } .footer-information ul li a { width: 40px; height: 40px; border: 1px solid #dbdbdb; border-radius: 50%; text-align: center; line-height: 40px; color: #dbdbdb; margin-right: 10px; } .footer-information ul li a:hover { color: #fff; background: var(--p-green); } .bottom-footer-content { padding: 42px 0; } .bottom-footer-content p { text-align: center; } .main-p-color .footer-about-widget .email:hover, .main-p-color .footer-about-widget .phone:hover, .main-p-color .footer-list ul li a:hover { color: var(--p-rose); } .main-p-color .footer-information ul li a:hover { background: var(--p-rose); border-color: var(--p-rose); } .color-orange .footer-about-widget .email:hover, .color-orange .footer-about-widget .phone:hover, .color-orange .footer-list ul li a:hover { color: var(--p-orange); } .color-orange .footer-information ul li a:hover { background: var(--p-orange); border-color: var(--p-orange); } /*----------------------- Achivement Section -----------------------*/ .achivement-section .shape-bg { top: -11%; right: 0; z-index: -1; } .theme-counter-one { display: inline-block; } .theme-counter-one .inner-round-shape { width: 440px; height: 440px; border-radius: 50%; border: 1px solid #efefef; } .counter-box-one { width: 175px; height: 175px; border-radius: 50%; background: #fff; box-shadow: 0px 30px 70px 0px rgba(233, 237, 244, 0.5); z-index: 1; text-align: center; padding-top: 46px; } .counter-box-one .number { font-family: 'Roboto', sans-serif; font-size: 42px; font-weight: 500; } .counter-box-one .number.color-one { color: #1dcdfb; } .counter-box-one .number.color-two { color: #ffcc42; } .counter-box-one .number.color-three { color: #0de49d; } .counter-box-one .number.color-four { color: #ff539e; } .counter-box-one p { font-size: 18px; margin-top: -10px; color: var(--text-light); } .inner-round-shape .counter-box-one:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); } .inner-round-shape .counter-box-one:nth-child(2) { top: 50%; left: 0%; transform: translate(-50%, -50%); } .inner-round-shape .counter-box-one:nth-child(3) { top: 50%; right: 0%; transform: translate(50%, -50%); } .inner-round-shape .counter-box-one:nth-child(4) { bottom: 0; left: 50%; transform: translate(-50%, 50%); box-shadow: 0px 25px 70px 0px rgba(240, 234, 234, 0.5); } .theme-counter-one .center-shape { width: 120px; height: 120px; background: #fff; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0px 25px 70px 0px rgba(240, 234, 234, 0.5); } .theme-counter-one .center-shape img { margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); } .theme-counter-one .shape-one { top: -5%; left: -10%; animation: rotated 20s infinite linear; } .theme-counter-one .shape-two { top: -34%; left: 50%; animation: rotated 20s infinite linear; } .theme-counter-one .shape-three { top: 0%; right: -23%; animation: rotated 20s infinite linear; } .theme-counter-one .shape-four { top: 48%; left: -48%; animation: rotated 20s infinite linear; } .theme-counter-one .shape-five { bottom: -5%; left: -10%; animation: rotated 20s infinite linear; } .theme-counter-one .shape-six { bottom: -34%; left: 50%; animation: rotated 20s infinite linear; } .theme-counter-one .shape-seven { bottom: 0%; right: -23%; animation: rotated 20s infinite linear; } /*-------------------------- Why Choose Us -------------------*/ .why-choose-us { background: linear-gradient(140deg, rgb(104, 229, 123) 0%, rgb(5, 181, 136) 100%); overflow: hidden; z-index: 5; } .why-choose-us .shape-wrapper { overflow: hidden; } .why-choose-us .shape-wrapper .big-round-one { position: absolute; width: 662px; height: 662px; background: rgba(255, 255, 255, 0.03); top: -346px; left: -75px; border-radius: 50%; } .why-choose-us .shape-wrapper .big-round-two { position: absolute; width: 1372px; height: 1372px; background: rgba(255, 255, 255, 0.03); top: -689px; left: -368px; border-radius: 50%; z-index: -1; } .why-choose-us .shape-wrapper .big-round-three { position: absolute; width: 2242px; height: 2242px; background: rgba(255, 255, 255, 0.03); top: -1161px; left: -779px; border-radius: 50%; z-index: -3; } .why-choose-us .text-wrapper { max-width: 500px; float: right; } .why-choose-us .text-wrapper .title-box { display: inline-block; line-height: 35px; font-size: 13px; text-transform: uppercase; color: #fff; padding: 0 30px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; } .why-choose-us .text-wrapper .bottom-title { font-size: 24px; line-height: 34px; color: #fff; padding: 45px 0 35px; } .why-choose-us .text-wrapper ul li { color: #fff; font-size: 18px; line-height: 30px; position: relative; padding: 0 0 15px 40px; } .why-choose-us .text-wrapper ul li:before { content: "\f103"; font-family: "Flaticon"; position: absolute; top: 0; left: 0; line-height: 32px; font-size: 24px; } .why-choose-us .text-wrapper ul { border-bottom: 1px solid rgba(222, 243, 222, 0.3); padding-bottom: 48px; margin-bottom: 55px; } .why-choose-us .text-wrapper .director-speech { position: relative; } .why-choose-us .text-wrapper .director-speech .d-img { width: 55px; height: 55px; border-radius: 50%; float: left; } .why-choose-us .text-wrapper .director-speech .bio-block { float: left; padding-left: 25px; } .why-choose-us .text-wrapper .director-speech .bio-block .name { font-size: 20px; color: #fff; padding: 2px 0; } .why-choose-us .text-wrapper .director-speech .bio-block span { font-size: 18px; color: #fff; font-style: italic; } .why-choose-us .text-wrapper .director-speech .sign { position: absolute; right: 0; top: -32px; } .why-choose-us .screen-preview { position: absolute; bottom: -1px; left: 0; width: 50%; } /*^^^^^^^^^^^^^^^^^^^^^^^^^^^ Project Gallery ^^^^^^^^^^^^^^^^^^^^^^^^*/ .project-gallery-home-one .slider-item-wrapper { padding: 0 35px; } .project-gallery-home-one .gallery-polar-state { border-radius: 5px; overflow: hidden; /* box-shadow: 0px 40px 70px 0px rgba(73, 79, 89, 0.14); */ margin: 100px 0; } .project-gallery-home-one .gallery-polar-state .img-holder img { border-radius: 3px; } .gallery-polar-state .img-holder { background: var(--rose-gr-bg); overflow: hidden; } .gallery-polar-state .img-holder img { width: 100%; transition: all 0.6s ease-in-out; } .gallery-polar-state:hover .img-holder img { transform: scale(0.93); } .gallery-polar-state .img-holder .icon { font-family: 'gilroy-ultralight'; font-size: 80px; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); color: #fff; z-index: 1; opacity: 0; } .gallery-polar-state:hover .icon { opacity: 1; } .project-gallery-home-one .owl-controls { position: absolute; right: 35%; z-index: 1; top: -60px; text-align: right; } .project-gallery-home-one .owl-theme .owl-nav [class*=owl-] { background: transparent; margin: 0 10px; padding: 0; font-size: 30px; color: rgba(0, 0, 0, 0.4); } .project-gallery-home-one .owl-theme .owl-nav [class*=owl-]:hover { color: var(--p-rose); } /*^^^^^^^^^^^^^^^^^^^^^^^^^^^ Pricing Plan One ^^^^^^^^^^^^^^^^^^^^^^^^*/ .pricing-plan-classic .shape-one { width: 15px; height: 15px; top: 50px; left: 30%; animation: animationFramesTwo 30s infinite linear; } .pricing-plan-classic .shape-two { width: 12px; height: 12px; top: 21%; right: 10%; animation: animationFramesOne 25s infinite linear; } .pricing-plan-classic .shape-three { width: 8px; height: 8px; bottom: 17%; left: 10%; animation: animationFramesTwo 25s infinite linear; } .pricing-plan-classic .shape-four { width: 20px; height: 20px; bottom: 55px; left: 43%; animation: animationFramesOne 30s infinite linear; } .pricing-plan-classic .nav-tabs { border: none; } .pricing-plan-classic .nav-tabs>li>a { font-family: 'gilroy-semibold'; width: 155px; line-height: 60px; font-size: 16px; background: #ffffff; color: var(--text-dark); text-align: center; text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; z-index: 1; box-shadow: 0px 10px 30px 0px rgba(156, 157, 161, 0.16); } .pricing-plan-classic .nav-tabs>li>a:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: var(--rose-gr-bg); z-index: -1; opacity: 0; } .pricing-plan-classic .nav-tabs>li:first-child>a { border-radius: 32px 0 0 32px; } .pricing-plan-classic .nav-tabs>li:last-child>a { border-radius: 0 32px 32px 0; } .pricing-plan-classic .nav-tabs>li>a.active, .pricing-plan-classic .nav-tabs>li>a.active:hover, .pricing-plan-classic .nav-tabs>li>a.active:focus { color: #fff; } .pricing-plan-classic .nav-tabs>li>a.active:before, .pricing-plan-classic .nav-tabs>li>a.active:hover:before, .pricing-plan-classic .nav-tabs>li>a.active:focus:before { opacity: 1; } .pricing-plan-classic .tab-content .table-content { position: relative; } .pricing-plan-classic .tab-content .table-content .price-table { width: 360px; position: absolute; left: 0px; top: 0px; z-index: 1; transition: all 0.7s ease; transform: scale(0.8, 0.8) translateX(225px); pointer-events: none; } .pricing-plan-classic .tab-content .table-content .price-table.active { position: relative; z-index: 5; transform: scale(1) translateX(0); pointer-events: visible; } .pricing-plan-classic .tab-content .table-content .price-table .col-inner { position: relative; padding: 60px 15px 80px 15px; text-align: center; background: #ffffff; box-shadow: 0px 20px 40px 0px rgba(60, 67, 113, 0.05); } .pricing-plan-classic .tab-content .table-content .price-table .col-inner h6 { font-family: 'gilroy-semibold'; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; } .pricing-plan-classic .tab-content .table-content .price-table .col-inner .price { font-family: 'gilroy-semibold'; font-size: 60px; color: var(--p-rose); background: var(--rose-gr-bg); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 80px; } .pricing-plan-classic .tab-content .table-content .price-table .col-inner .price sup { font-family: 'gilroy-bold'; font-size: 24px; color: var(--p-rose); background: var(--rose-gr-bg); -webkit-background-clip: text; -webkit-text-fill-color: transparent; top: -35px; } .pricing-plan-classic .tab-content .table-content .price-table .col-inner .tag { font-size: 24px; color: var(--text-dark); text-decoration: underline; } .pricing-plan-classic .tab-content .table-content .price-table .col-inner ul li { line-height: 42px; } /*^^^^^^^^^^^^^^^^^^^^^^^^^^^ Partner Section ^^^^^^^^^^^^^^^^^^^^^^^^*/ .op-partner-section-one .img-box a { display: block; height: 100%; } .op-partner-section-one .img-box img { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; } .op-partner-section-one .img-box { background: #fff; border-radius: 50%; box-shadow: 15.436px 30.294px 50px 0px rgba(233, 236, 241, 0.5); width: 175px; height: 175px; margin: 0 auto 25px; } .op-partner-section-one .img-box:hover { transform: scale(1.1); } .op-partner-section-one .img-box.bx-b { width: 121px; height: 121px; margin-top: 45px; } .op-partner-section-one .img-box.bx-d { width: 151px; height: 151px; margin-top: 25px; } .op-partner-section-one .img-box.bx-f { width: 135px; height: 135px; margin-top: 20px; } .op-partner-section-one .img-box.bx-g { width: 197px; height: 197px; } .op-partner-section-one .img-box.bx-h { width: 138px; height: 138px; margin-top: 20px; } /*^^^^^^^^^^^^^^^^^^^^^^^ Contact Us HOme ^^^^^^^^^^^^^^^^^^^^^^^^*/ .contact-home-one .shape-one { width: 890px; height: 890px; top: 70px; right: -245px; z-index: -1; } .contact-home-one .shape-two { width: 890px; height: 890px; top: 0; right: -265px; } .contact-home-one .shape-three { width: 17px; height: 17px; top: 60px; left: 25%; } .contact-home-one .shape-four { width: 11px; height: 11px; top: 50%; left: 5%; } .contact-home-one .shape-five { width: 20px; height: 20px; bottom: 80px; left: 37%; } .contact-home-one .shape-six { top: 0; left: 0; } .contact-home-one .contact-text p { font-size: 20px; position: relative; padding: 75px 0 15px; } .contact-home-one .contact-text p:before { content: ''; position: absolute; width: 60px; height: 5px; border-radius: 5px; background: var(--p-rose); left: 0; top: 20px; } .contact-home-one.color-orange .contact-text p:before { background: var(--p-orange); } .contact-home-one .contact-text .call-to-dial { font-size: 26px; color: var(--text-dark); } .contact-home-one .contact-text .call-to-dial:hover { color: var(--p-rose); } .contact-home-one.color-orange .contact-text .call-to-dial:hover { color: var(--p-orange); } .contact-home-one .theme-form-style-two { margin-left: 60px; } .theme-form-style-two { background: #fff; padding: 65px 60px; box-shadow: 19.799px 19.799px 100px 0px rgba(96, 96, 96, 0.08); } .theme-form-style-two input, .theme-form-style-two textarea { width: 100%; border: none; border-bottom: 2px solid #eaeaea; } .theme-form-style-two input { height: 50px; margin-bottom: 55px; padding: 0; } .theme-form-style-two textarea { height: 120px; resize: none; margin-bottom: 50px; } .theme-form-style-two input:focus, .theme-form-style-two textarea:focus { border-bottom-color: #6a6a6a; } /*------------------- Banner Large Text ----------------*/ .banner-large-text .shape-one { right: 0; top: 0; overflow: hidden; } .banner-large-text .shape-one:before { content: "D"; font-family: 'gilroy-black'; font-size: 400px; color: #fff; position: absolute; bottom: 68px; left: -33px; z-index: 1; } .banner-large-text .shape-two { top: 17%; left: 17%; animation: animationFramesOne 15s infinite linear alternate; } .banner-large-text .shape-three { top: 12%; left: 44%; animation: animationFramesTwo 18s infinite linear alternate; } .banner-large-text .shape-four { top: 18%; right: 7%; animation: animationFramesTwo 15s infinite linear alternate; } .banner-large-text .shape-five { top: 50%; left: 4%; animation: animationFramesFive 20s infinite linear alternate; } .banner-large-text .shape-six { top: 88%; left: 14%; animation: animationFramesFive 18s infinite linear alternate; } .banner-large-text .shape-seven { top: 91%; left: 46%; animation: animationFramesOne 15s infinite linear alternate; } .banner-large-text .shape-eight { top: 85%; right: 4%; animation: animationFramesTwo 18s infinite linear alternate; } .banner-large-text .shape-nine { top: 55%; right: 3%; animation: animationFramesOne 15s infinite linear alternate; } .banner-large-text .title { font-family: 'gilroy-bold'; font-size: 120px; line-height: 128px; padding: 80px 200px 70px 0; } .banner-large-text .title span:before { content: ''; position: absolute; width: 100px; height: 5px; background: var(--heading); right: -130px; top: 58%; } .banner-large-text .sub-heading { font-size: 26px; color: var(--text-dark); } /*---------------------- About Text Block -------------------*/ .about-us-text.bg-color { background: linear-gradient(-180deg, rgb(255, 255, 255) 0%, rgb(248, 252, 254) 100%); } .about-text-one p { padding-bottom: 15px; } .about-text-one h6 { font-family: 'gilroy-semibold'; font-size: 18px; color: var(--text-dark); text-transform: uppercase; letter-spacing: 1.5px; position: relative; padding-left: 40px; } .about-text-one h6:before { content: ''; position: absolute; width: 23px; height: 2px; background: var(--text-dark); top: 45%; left: 0; } .about-us-text .feature-block-two { margin-bottom: 30px; } .about-feature { margin-top: -110px; z-index: 1; } .feature-block-two { padding: 55px 42px 75px; border-radius: 5px; background: #fff; box-shadow: 0px 30px 70px 0px rgba(226, 232, 236, 0.5); } .feature-block-two .icon { margin: 0 auto; } .feature-block-two h5 { font-family: 'gilroy-bold'; font-size: 22px; color: var(--text-dark); } /*^^^^^^^^^^^^^^^^^^^^ Feature Block Three ^^^^^^^^^^^^^^^^^^^*/ .feature-block-three { position: relative; padding: 50px 40px 38px 70px; background: #fff; box-shadow: 0px 30px 70px 0px rgba(223, 227, 234, 0.5); } .feature-block-three .icon-box { width: 55px; height: 55px; position: relative; border-radius: 50%; margin-top: 12px; } .feature-block-three .icon-box:before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: inherit; border-radius: 50%; opacity: 0.15; -webkit-animation: hvr-ripple-out-two 1s linear infinite; animation: hvr-ripple-out-two 1s linear infinite; } .feature-block-three .icon-box img { margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); } .feature-block-three .text { width: calc(100% - 55px); padding-left: 38px; } .feature-block-three .text h5 { font-family: 'gilroy-bold'; font-size: 22px; } .feature-block-three .text .read-more { font-size: 35px; color: var(--text-light); } .feature-block-three:hover .text .read-more { color: var(--p-orange); } .our-service-three .shape-one { right: 0; top: 0; } .our-service-three .shape-two { width: 15px; height: 15px; top: 60px; left: 20%; } .our-service-three .shape-three { width: 30px; height: 30px; top: 38%; right: 5%; } .our-service-three .shape-four { width: 10px; height: 10px; bottom: 50px; right: 8%; } .our-service-three .shape-five { width: 15px; height: 15px; bottom: 40px; left: 8%; } .our-service-three .shape-six { width: 343px; height: 343px; top: 21%; left: 12%; } /*-------------------- Our Team Standard -------------------*/ .our-team .img-box img { width: 100%; } .team-standard .single-team-member { position: relative; margin-bottom: 60px; } .team-standard .single-team-member .img-box img { border-radius: 4px 4px 0 0; } .team-standard .single-team-member .info-meta { padding: 25px 0 30px 50px; background: #fff; box-shadow: 5.994px 14.835px 30px 0px rgba(229, 234, 239, 0.5); } .our-team .single-team-member .info-meta .name { font-size: 22px; padding-bottom: 5px; /* font-family: 'gilroy-semibold'; */ } .our-team .single-team-member .info-meta span { font-size: 18px; } .team-standard .single-team-member .hover-content { position: absolute; width: 45px; background: #fff; box-shadow: 8px 0px 8.6px 1.4px rgba(229, 234, 239, 0.2); right: 0; top: 0; bottom: 0; transform: scale(0, 1); transform-origin: 100% 0%; } .team-standard .single-team-member .hover-content ul { position: relative; top: 40%; transform: translateY(-50%); } .team-standard .single-team-member .hover-content ul li a { display: block; text-align: center; color: rgba(0, 0, 0, 0.4); font-size: 20px; margin: 15px 0; } .team-standard .single-team-member .hover-content ul li a:hover { color: var(--p-rose); } .team-standard .single-team-member:hover .hover-content { transform: scale(1, 1); } /*-------------------- Our Team Minimul -------------------*/ .team-minimal .single-team-member { text-align: center; margin-bottom: 130px; } .team-minimal .single-team-member .img-box { width: 300px; height: 300px; border-radius: 50%; overflow: hidden; margin: 0 auto; position: relative; } .team-minimal .single-team-member .info-meta { padding: 30px 0 0; } .team-minimal .single-team-member .hover-content { position: absolute; top: 0; right: 0; border-radius: 50%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); transform: scale(0.7); opacity: 0; } .team-minimal .single-team-member:hover .hover-content { transform: scale(1); opacity: 1; } .team-minimal .single-team-member .hover-content ul { position: relative; top: 50%; transform: translateY(-50%); } .team-minimal .single-team-member .hover-content ul li { display: inline-block; margin: 0 12px; } .team-minimal .single-team-member .hover-content ul li a { font-size: 25px; color: #fff; } .team-minimal .single-team-member .hover-content ul li a:hover { color: var(--p-rose); } /*--------------------- Our Team Buisness --------------------*/ .team-business .single-team-member { margin-bottom: 120px; } .team-business .single-team-member .img-box { width: 220px; } .team-business .single-team-member .info-meta { padding-left: 40px; width: calc(100% - 220px); } .team-business .single-team-member .info-meta q { font-size: 21px; line-height: 25px; font-style: italic; color: #3d3d3d; display: block; padding: 30px 0 45px; } /*^^^^^^^^^^^^^^^^^^^^^^^^^^ Inner Banner ^^^^^^^^^^^^^^^^^^^^^^^^^^*/ .inner-banner.banner-bg { background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center top; } .inner-banner.banner-bg .opacity { background: rgba(0, 0, 0, 0.25); height: 100%; } .inner-banner.banner-bg.bg-style-one { height: 670px; text-align: center; } .inner-banner.banner-bg.bg-style-one .opacity { padding: 300px 0 120px; } .inner-banner.banner-bg.bg-style-one p { color: #fff; font-size: 24px; padding-bottom: 30px; } .inner-banner.banner-bg.bg-style-one h2 { font-size: 58px; color: #fff; text-transform: uppercase; } .inner-banner.banner-bg.bg-style-two .opacity { padding: 270px 0 220px; text-align: center; } .inner-banner.banner-bg.bg-style-two p { color: #fff; font-size: 24px; padding-bottom: 20px; } .inner-banner.banner-bg.bg-style-two h2 { font-size: 58px; color: #fff; } /*^^^^^^^^^^^^^^^^^^^^^^ Text Inner Banner One ^^^^^^^^^^^^^^^^^^^^^^*/ .text-inner-banner-one { padding: 300px 0 150px; text-align: center; background: #fff; z-index: 1; } .text-inner-banner-one p { font-size: 24px; } .text-inner-banner-one h2 { font-family: 'gilroy-bold'; font-size: 58px; text-transform: uppercase; } .text-inner-banner-one .theme-title-one h2 { text-transform: inherit; margin-top: 5px; } .text-inner-banner-one .sub-heading { font-size: 20px; line-height: 36px; width: 62%; display: inline-block; } .text-inner-banner-one .shape-one { width: 12px; height: 12px; top: 19%; left: 32%; animation: animationFramesTwo 15s infinite linear; } .text-inner-banner-one .shape-two { width: 12px; height: 12px; top: 32%; right: 32%; animation: animationFramesOne 25s infinite linear; } .text-inner-banner-one .shape-three { width: 24px; height: 24px; top: 42%; right: 8%; animation: animationFramesTwo 20s infinite linear; } .text-inner-banner-one .shape-four { width: 15px; height: 15px; bottom: -6px; right: 20%; animation: animationFramesFive 22s infinite linear; } .text-inner-banner-one .shape-five { width: 25px; height: 25px; top: 62%; left: 13%; animation: animationFramesFive 18s infinite linear; } .faq-search-form span { font-size: 18px; display: block; padding: 35px 0 30px; } .faq-search-form .input-group { position: relative; margin: 0 auto; max-width: 43%; } .faq-search-form .input-group input { width: 100%; height: 60px; padding: 0 70px 0 30px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 30px; } .faq-search-form .input-group button { position: absolute; right: 0; top: 0; bottom: 0; width: 70px; background: transparent; font-size: 20px; color: var(--text-light); border-radius: 0 30px 30px 0; } /*^^^^^^^^^^^^^^^^^^^^^^^ Our Service/Modern ^^^^^^^^^^^^^^^^^^^^^^^^^*/ .service-modern-block .wrapper { padding: 0 130px; } .service-modern-block .row { margin: 0 -75px; } .service-modern-block .row [class*="col-"] { padding: 0 75px; } .service-modern-block .num { font-weight: 100; color: rgba(0, 0, 0, 0.1); font-size: 80px; } .service-modern-block .title a { font-family: 'gilroy-bold'; font-size: 48px; line-height: 50px; color: var(--heading); margin: 40px 0 25px; } .service-modern-block .more { font-size: 50px; color: var(--heading); } .service-modern-block:hover .more { transform: translateX(20px); } .service-modern-block.img-style .wrapper { padding: 0 85px; } .service-modern-block.img-style .row { margin: 0 -50px; } .service-modern-block.img-style .row [class*="col-"] { padding: 0 50px; } /*^^^^^^^^^^^^^^^^^^^^^^^ Our Service/Classic ^^^^^^^^^^^^^^^^^^^^^^^^^*/ .service-classic-block .img-holder { position: relative; overflow: hidden; } .service-classic-block .img-holder img { width: 100%; transition: all 0.5s ease-in-out; } .service-classic-block:hover .img-holder img { transform: scale3d(1.1, 1.1, 1); } .service-classic-block .text-holder { background: #fff; box-shadow: -15.045px 19.966px 40px 0px rgba(0, 0, 0, 0.04); padding: 55px 20px 45px 55px; position: relative; } .service-classic-block .text-holder h3 a { font-family: 'gilroy-semibold'; font-size: 32px; color: var(--heading); margin-bottom: 10px; } .service-classic-block .text-holder .icon-holder { width: 70px; height: 70px; border-radius: 50%; box-shadow: 0px 15px 40px 0px rgba(189, 189, 189, 0.5); position: absolute; top: -35px; left: 55px; } .service-classic-block .text-holder .icon-holder img { margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); } /*^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Contact Banner ^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/ .action-banner-one { background-color: #f9fbfe; background-image: url(../images/home/map.png); background-repeat: no-repeat; background-position: center; padding: 120px 0 130px; text-align: center; } .action-banner-one.bg-white { background-color: #fff; background-image: none; padding-top: 150px; } .action-banner-one .main-title { font-size: 62px; line-height: 75px; margin-bottom: 40px; } /*^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Intro Text ^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/ .intro-text-block { background: #ffeceb; padding: 100px 0; } .intro-text-block h5 { font-family: 'gilroy-bold'; font-size: 24px; line-height: 35px; } .intro-text-block h5 span { display: block; font-family: 'gilroy-light'; } .intro-text-block p { font-size: 18px; line-height: 32px; padding: 20px 0 35px; } .intro-text-block h6 { font-family: 'gilroy-bold'; font-size: 20px; position: relative; padding-left: 30px; color: #233d63; margin-bottom: 32px; } .intro-text-block h6 span { font-size: 16px; color: var(--text-color); } .intro-text-block h6:before { content: ''; position: absolute; width: 20px; height: 2px; background: #233d63; left: 0; top: 50%; margin-top: -1px; } /*^^^^^^^^^^^^^^^^^^^^^^^^^ Our Portfolio ^^^^^^^^^^^^^^^^^^^^^^*/ .cbp-l-filters-alignCenter.filter-menu { margin-bottom: 60px; } .cbp-l-filters-alignCenter .cbp-filter-counter { z-index: 9; } .cbp-l-filters-alignCenter.filter-menu .cbp-filter-item { font-family: 'gilroy-semibold'; font-size: 16px; color: var(--text-dark); line-height: 31px; text-transform: uppercase; border: 2px solid transparent; border-radius: 3px; padding: 0 12px; margin: 0 5px 10px; } .cbp-l-filters-alignCenter.filter-menu .cbp-filter-item.cbp-filter-item-active { color: var(--p-rose); border-color: var(--p-rose); } .our-portfolio .cbp-l-caption-title { font-family: 'gilroy-semibold'; font-size: 22px; } .our-portfolio .cbp-l-caption-body p { color: rgba(255, 255, 255, 0.6); padding-top: 5px; } .our-portfolio .cbp-l-caption-alignLeft .cbp-l-caption-body { padding: 15px 20px; } .our-portfolio .cbp-l-caption-buttonLeft, .our-portfolio .cbp-l-caption-buttonRight { background: var(--p-rose); color: #fff; text-transform: capitalize; } .portfolio-full-width-grid { padding: 250px 75px 150px; } .gallery-sidebar { width: 265px; } .gallery-sidebar .title { font-family: 'gilroy-bold'; font-size: 28px; position: relative; padding-bottom: 25px; margin-bottom: 50px; } .gallery-sidebar .title:before { content: ''; position: absolute; width: 30px; height: 3px; background: var(--p-rose); bottom: 0; left: 0; } .gallery-sidebar .cbp-l-filters-alignCenter.filter-menu { margin-bottom: 95px; text-align: left; } .gallery-sidebar .cbp-l-filters-alignCenter.filter-menu .cbp-filter-item { font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: normal; line-height: 40px; display: block; padding: 0; margin: 0; text-transform: capitalize; border: none; } .gallery-sidebar .share-option ul li { display: inline-block; } .gallery-sidebar .share-option ul li a { font-size: 20px; color: var(--text-dark); margin-right: 18px; } .gallery-sidebar .share-option ul li a:hover { color: var(--p-rose); } .portfolio-full-width-grid .img-content-wrapper { width: calc(100% - 265px); } .portfolio-full-width-grid .img-content-wrapper .cbp-item-wrapper { padding-bottom: 60px; } .portfolio-full-width-grid .img-content-wrapper .cbp-item-wrapper .text { position: absolute; bottom: 0; left: 0; right: 60px; padding: 30px 65px 25px 30px; background: #fff; transition: all 0.5s ease-in-out; z-index: 1; border-bottom: 1px solid #fff; } .portfolio-full-width-grid .img-content-wrapper .cbp-item-wrapper .text h3 { font-family: 'gilroy-semibold'; font-size: 24px; padding-bottom: 5px; } .portfolio-full-width-grid .img-content-wrapper .cbp-item-wrapper .text .read-more { font-size: 58px; font-weight: 100; color: var(--text-light); position: absolute; right: 30px; top: 50%; transform: translateY(-50%); } .portfolio-full-width-grid .img-content-wrapper .cbp-item-wrapper:hover .text .read-more { color: var(--p-rose); } .portfolio-full-width-grid .img-content-wrapper .cbp-item-wrapper:hover .text { right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } /*^^^^^^^^^^^^^^^^^^^^^^^^^ Project Details ^^^^^^^^^^^^^^^^^^^^^^*/ .project-details .shape-one { width: 12px; height: 12px; top: 5%; left: 25%; } .project-details .shape-two { width: 12px; height: 12px; top: 6%; right: 20%; } .project-details .shape-three { width: 24px; height: 24px; top: 7%; right: 46%; } .project-details .shape-four { width: 25px; height: 25px; top: 14%; left: 6%; } .project-details .shape-five { width: 16px; height: 16px; top: 16%; right: 6%; } .project-details .project-container { max-width: 1030px; padding: 0 15px; margin: 0 auto; } .project-details .project-title-one p { font-size: 18px; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; } .project-details .project-title-one h2 { font-size: 58px; } .project-details .info-text-list h6 { font-family: 'gilroy-bold'; font-size: 18px; text-transform: uppercase; color: var(--text-dark); } .project-details .info-text-list p { font-size: 18px; padding-top: 10px; } .social-icon-two { display: inline-block; margin: 0 -4px; } .social-icon-two li { float: left; padding: 0 4px; } .social-icon-two li a { width: 30px; height: 30px; display: block; line-height: 30px; text-align: center; color: #fff; border-radius: 50%; } .project-details .img-box img { width: 100%; } .project-details .img-description .row { margin: 0 -50px; } .project-details .img-description .row [class*="col-"] { padding: 0 50px; } .project-details .des-title { font-size: 42px; line-height: 46px; } .project-details .des-title span { display: inline-block; font-family: 'gilroy-ultralight'; position: relative; } .project-details .des-title span:before { content: ''; position: absolute; width: 80px; height: 3px; background: var(--text-dark); right: -90px; top: 57%; } .project-details strong { display: block; font-size: 24px; line-height: 30px; color: var(--text-dark); font-weight: normal; } .project-details .project-img-gallery .img-box { margin-bottom: 45px; } .project-details .title-two { font-family: 'gilroy-semibold'; font-size: 24px; line-height: 32px; } .project-details .title-two span { font-family: 'gilroy-ultralight'; } .project-details .title-three { font-size: 36px; } .project-details.version-three .theme-pagination-two { border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 70px; margin-top: 80px; } .project-details .pr-banner { background: url(../images/gallery/bg.jpg) no-repeat center; background-size: cover; background-attachment: fixed; margin-bottom: 155px; } .project-details .pr-banner .opacity { background: rgba(0, 0, 0, 0.25); padding: 315px 0 325px; } .project-details .project-title-two p { font-size: 18px; color: #fff; text-transform: uppercase; letter-spacing: 1.5px; } .project-details .project-title-two h2 { font-family: 'gilroy-black'; font-size: 72px; color: #fff; display: inline-block; line-height: 72px; position: relative; } .project-details .project-title-two h2 span { position: absolute; width: 220px; height: 4px; background: #fff; right: 0; bottom: 18%; } .project-details .pr-banner .share-icon { position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(180deg); } .project-details .pr-banner .share-icon li:first-child { font-size: 16px; color: #fff; transform: rotate(-270deg); text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 40px -24px; } .project-details .pr-banner .share-icon li a { transform: rotate(180deg); color: #fff; margin-bottom: 15px; } #project-img-carousel .carousel-control-next, #project-img-carousel .carousel-control-prev { width: 45px; height: 45px; background: #fff; font-size: 26px; text-align: center; line-height: 45px; opacity: 1; color: var(--text-dark); top: 50%; margin-top: -22px; } #project-img-carousel .carousel-control-next:hover, #project-img-carousel .carousel-control-prev:hover { color: var(--p-rose); } .project-details.version-five .title-two { border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 30px 0 40px; margin-bottom: 40px; } /*^^^^^^^^^^^^^^^^^^^^^^^^ Contact Address ^^^^^^^^^^^^^^^^^^^^^*/ #contact-form .form-group { margin: 0; position: relative; } #contact-form .form-group .help-block { position: absolute; left: 0; bottom: 3px; font-size: 15px; line-height: 20px; color: #fff; padding: 0 15px; border-radius: 3px; z-index: 1; background: var(--rose-gr-bg); box-shadow: 0px 10px 25px 0px rgba(123, 147, 171, 0.15); } #contact-form .form-group .help-block li { position: relative; } #contact-form .form-group .help-block li:before { content: '茂茠藴'; font-family: 'font-awesome'; position: absolute; top: -12px; left: 0; color: var(--p-rose); } .contact-address-two .address-block { padding-bottom: 40px; text-align: center; } .contact-address-two .address-block .icon-box { display: inline-block; height: 70px; } .contact-address-two .address-block h5 { font-size: 24px; padding: 18px 0 20px; } .contact-address-two .address-block p, .contact-address-two .address-block p a { color: var(--text-color); } .contact-address-two .address-block ul li { display: inline-block; margin: 10px 8px 0; } .contact-address-two .address-block ul li a { font-size: 18px; color: var(--text-color); } .contact-address-two .address-block p a:hover, .contact-address-two .address-block ul li a:hover { color: var(--p-rose); } .contact-us-section .theme-form-style-two { padding: 0; box-shadow: none; } .contact-us-section .theme-form-style-two textarea { margin-bottom: 30px; } .contact-us-section .contact-info p { font-size: 20px; } .contact-us-section .contact-info .call { font-size: 27px; font-weight: 500; color: var(--text-dark); display: block; margin-bottom: 40px; } .contact-us-section .contact-info .call:hover { text-decoration: underline; } .map-canvas { width: 100%; height: 100%; } #google-map-one { height: 405px; } #google-map-two { height: 620px; } /*--------------------------- FAQ Page -------------------*/ .faq-page .faq-page-title { font-size: 32px; } .faq-page .faq-search-form { height: 60px; position: relative; } .faq-page .faq-search-form input { width: 500px; height: 100%; border: 1px solid #e1e1e1; padding: 0 70px 0 30px; font-size: 18px; color: #a6a6a6; font-style: italic; } .faq-page .faq-search-form input:focus { border-color: #313131; } .faq-page .faq-search-form button { position: absolute; width: 70px; top: 0; right: 0; bottom: 0; background: transparent; color: #b1b1b1; } .faq-page .submit-faq { background: #f6f8fc; padding: 120px 0; margin-top: 140px; } .faq-page .submit-faq .faq-page-title { padding-bottom: 75px; } .theme-form-style-five input { width: 100%; height: 60px; padding: 0 15px 0 30px; color: #989ca2; border: 1px solid #e7e7e7; margin-bottom: 30px; } .theme-form-style-five ::placeholder { color: #989ca2; opacity: 1; /* Firefox */ } .theme-form-style-five :-ms-input-placeholder { color: #989ca2; } .theme-form-style-five ::-ms-input-placeholder { color: #989ca2; } .theme-form-style-five textarea { width: 100%; height: 290px; max-height: 290px; padding: 15px 30px; color: #989ca2; resize: none; border: 1px solid #e7e7e7; margin-bottom: 30px; } .theme-form-style-five input:focus, .theme-form-style-five textarea:focus { border-color: #212121; } .theme-form-style-five button { display: block; width: 100%; height: 60px; border-width: 2px; border-style: solid; font-size: 18px; color: #fff; } .faq-tab-wrapper .faq-panel .panel { background: #fff; box-shadow: 0px 10px 14px 0px rgba(90, 111, 155, 0.05); margin-bottom: 30px; } .faq-tab-wrapper .faq-panel .panel .panel-heading .panel-title button { font-family: 'gilroy-semibold'; display: block; padding: 25px 10px 25px 65px; font-size: 20px; line-height: 32px; color: var(--text-dark); position: relative; } .faq-tab-wrapper .faq-panel .panel .panel-heading .panel-title button:before { content: '+'; position: absolute; left: 35px; top: 50%; transform: translateY(-50%); font-size: 30px; color: #464646; } .faq-tab-wrapper .faq-panel .panel .panel-heading.active-panel .panel-title a:before { content: '-'; color: var(--p-rose); } .faq-tab-wrapper .faq-panel .panel .panel-body p { line-height: 30px; padding: 0 90px 38px 65px; } .help-articles { background: #f6f8fc; padding: 120px 0 100px; } .help-articles .single-help-box { background: #fff; margin-bottom: 30px; transition: all 0.3s ease-in-out; } .help-articles .single-help-box a { display: block; padding: 35px 25px; min-height: 210px; } .help-articles .single-help-box h4 { font-family: 'gilroy-semibold'; font-size: 20px; margin-bottom: 15px; } .help-articles .single-help-box p { font-size: 16px; color: var(--text-color); } /*^^^^^^^^^^^^^^^^^^^^^ Error ^^^^^^^^^^^^^^^^^^^^^*/ .error-page { background: url(../images/home/404.svg) no-repeat center bottom; background-size: cover; height: 100vh; padding: 0 15px; text-align: center; position: relative; } .error-page>div { position: relative; top: 50%; transform: translateY(-50%); } .error-page h2 { font-size: 70px; } .error-page p { font-size: 24px; line-height: 34px; padding: 28px 0 45px; } /*------------------------------ Sign Up ----------------------------*/ .signUp-illustration { position: fixed; top: 0; left: 0; bottom: 0; width: 38%; background: #f8faff; z-index: -1; } .signUp-illustration img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .signUp-page { position: relative; min-height: 100vh; z-index: 5; } .signUp-minimal { padding-left: 15px; padding-right: 15px; } .signUp-minimal .sign-up-form-wrapper { max-width: 650px; margin: 0 auto; border: 1px solid #e0e0e0; padding: 70px 80px 60px; position: relative; } .signUp-page .shape-wrapper span { position: absolute; display: block; width: 26px; height: 26px; border-radius: 50%; } .signUp-page .shape-wrapper span:nth-child(1) { background: #ff9898; top: 10%; left: 20%; animation: scale-upOne 3.9s alternate infinite ease-in; } .signUp-page .shape-wrapper span:nth-child(2) { background: #abafff; top: 24%; right: 7%; animation: scale-upOne 6s alternate infinite ease-in; } .signUp-page .shape-wrapper span:nth-child(3) { background: #67f5e2; top: 68%; right: 62%; margin-right: -13px; animation: scale-upOne 5s alternate infinite ease-in; } .signUp-page.signUp-minimal .shape-wrapper span:nth-child(3) { right: 88%; } .signUp-page .shape-wrapper span:nth-child(4) { background: #ffb3b3; bottom: 15%; right: 25%; animation: scale-upOne 4s alternate infinite ease-in; } .signUp-page .shape-wrapper span:nth-child(5) { background: #ffe281; bottom: 14%; left: 5%; animation: scale-upOne 5s alternate infinite ease-in; } .signUp-page .title-area p { font-size: 18px; padding: 10px 0 35px; } .signUp-page .social-icon-wrapper a { display: block; text-align: center; line-height: 55px; font-size: 20px; color: #fff; margin-top: 10px; } .signUp-page .social-icon-wrapper .gmail { background: #d93025; } .signUp-page .social-icon-wrapper .facebook { background: #4267b2; } .signUp-page .social-icon-wrapper a .fa { font-size: 18px; margin-right: 5px; vertical-align: 1px; } .signUp-page .or-text { position: relative; text-align: center; margin: 50px 0 45px; } .signUp-page .or-text:before { content: ''; position: absolute; width: 100%; height: 1px; background: #e2e2e2; left: 0; top: 14px; z-index: -1; } .signUp-page .or-text span { display: inline-block; font-size: 13px; text-transform: uppercase; color: #454545; background: #fff; width: 50px; } .signUp-page form ::placeholder { color: #bcbcbc; opacity: 1; /* Firefox */ } .signUp-page form :-ms-input-placeholder { color: #bcbcbc; } .signUp-page form ::-ms-input-placeholder { color: #bcbcbc; } .signUp-page form .input-group { position: relative; z-index: 1; margin-bottom: 35px; } .signUp-page form .input-group input { width: 100%; border: 1px solid #e0e0e0; border-radius: 5px; background: transparent; height: 60px; font-size: 18px; color: #454545; position: relative; padding: 0 20px; } .signUp-page form .input-group label { font-weight: normal; font-size: 15px; line-height: 60px; position: absolute; left: 20px; top: 0; z-index: -1; margin: 0; transition: all 0.3s ease-in-out; } .signUp-page form .input-group input:focus~label, .signUp-page form .input-group input:valid~label { top: -12px; } .signUp-page form .input-group input:focus { border-color: #393939; } .signUp-page form .input-group input:focus, .signUp-page form .input-group input:valid { padding-top: 18px; } .signUp-page .selectize-control { width: 100%; } .signUp-page .input-group .selectize-input { width: 100%; line-height: 60px; height: 60px; border-radius: 5px; border: none; border: 1px solid #e0e0e0; box-shadow: none; outline: none; padding: 0 20px; background: transparent; } .signUp-page .input-group .selectize-input input { font-size: 15px; } .signUp-page .selectize-input .item { font-size: 18px; color: #454545; } .signUp-page .selectize-dropdown { background: #fff; border: 1px solid #e9e9e9; border-top: none; box-shadow: 0px 50px 100px 0px rgba(229, 232, 235, 0.2); cursor: pointer; } .signUp-page .selectize-dropdown .option { font-size: 14px; color: #1a1a1a; line-height: 22px; } .signUp-page .selectize-dropdown .option:hover, .signUp-page .selectize-dropdown .active { color: #fff; background: #1a1a1a; } .signUp-page .selectize-control.single .selectize-input:after { right: 8px; } .signUp-page .acType-content h4 { font-size: 28px; } .signUp-page .acType-content p { padding: 8px 0 25px; } .signUp-page .acType-content .acType-list { margin: 0 -22px; } .signUp-page .acType-content .acType-list li { float: left; padding: 0 22px; } .signUp-page .acType-content .acType-list li>div { position: relative; } .signUp-page .acType-content .acType-list li>div input { position: absolute; opacity: 0; z-index: 1; width: 100%; height: 100%; cursor: pointer; } .signUp-page .acType-content .acType-list li>div label { position: relative; font-size: 16px; line-height: 15px; color: rgba(47, 52, 62, 0.8); cursor: pointer; padding-left: 25px; margin: 0 0 15px; transition: all 0.1s ease-in-out; } .signUp-page .acType-content .acType-list li>div label:before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d6d6d6; position: absolute; left: 0; top: 0; transition: all 0.1s ease-in-out; } .signUp-page .acType-content .acType-list li>div input:checked+label:before { border-color: #FF3A46; } .signUp-page .acType-content .acType-list li>div input:checked+label { color: rgba(47, 52, 62, 1); } .signUp-page .acType-content { border-bottom: 1px solid #e0e0e0; padding-bottom: 65px; } .signUp-page .agreement-checkbox label { position: relative; font-size: 16px; color: rgba(47, 52, 62, 0.6); cursor: pointer; padding-left: 22px; margin: 30px 0 35px; transition: all 0.1s ease-in-out; } .signUp-page .agreement-checkbox input[type="checkbox"] { display: none; } .signUp-page .agreement-checkbox label:before { content: ''; width: 12px; height: 12px; line-height: 10px; border-radius: 2px; border: 1px solid #d5d5d5; font-size: 8px; text-align: center; position: absolute; left: 0; top: 8px; transition: all 0.1s ease-in-out; } .signUp-page .agreement-checkbox input[type="checkbox"]:checked+label:before { content: "茂鈧?; font-family: 'font-awesome'; background: #373737; color: #fff; border-color: #373737; } .signUp-page .agreement-checkbox input[type="checkbox"]:checked+label { color: #373737; } .signUp-page.signUp-minimal .agreement-checkbox label { margin-top: 0; } .signUp-page.signUp-minimal form .theme-btn { width: 100%; border-radius: 5px; } .signin-form-wrapper .title-area { margin-bottom: 50px; } .signUp-standard .signin-form-wrapper #login-form .input-group input { border: none; border-radius: 0; border-bottom: 1px solid #e0e0e0; padding-left: 0; } .signUp-standard .signin-form-wrapper #login-form .input-group label { left: 0; } .signUp-standard .signin-form-wrapper #login-form { padding-right: 170px; } #login-form .agreement-checkbox label { margin: 0; } #login-form .agreement-checkbox a { font-size: 16px; color: rgba(47, 52, 62, 0.6); } #login-form .agreement-checkbox a:hover { color: #212121; } #login-form .agreement-checkbox { margin-bottom: 55px; } .signin-form-wrapper .signUp-text { padding-top: 40px; } .signin-form-wrapper .signUp-text a { color: var(--p-rose); } #login-form button { text-transform: uppercase; } .signUp-minimal .signin-form-wrapper { max-width: 520px; margin: 0 auto; border: 1px solid #e0e0e0; padding: 70px 65px 35px; position: relative; } .signUp-minimal .signin-form-wrapper .signUp-text { font-size: 17px; padding-top: 35px; } .signUp-minimal .signin-form-wrapper .signUp-text a { color: var(--p-rose); } .testimonial-section-standard .customer-content .onu_testimonials { margin-bottom: 30px; } /**=== Home - Business Agency ===**/ .rogan-hero-section h1.banner-main-title, .about-us-block-one h2.main-title, .about-us-block-two h2.main-title, .achivement-section h2.main-title, .testimonial-section-classic h2.main-title, .home-blog-one h2.main-title, .newsletter-one h2.main-title, .newsletter-two h2.main-title, .pricing-plan-classic h2.main-title, .testimonial-section-standard .order-lg-last .main-title, .our-core-feature.style-one h2.main-title, .our-core-feature.style-two h2.main-title, .our-core-feature.style-three h2.main-title, .our-service-three h2.main-title, .consultation-section .theme-title-one h2.main-title, .project-gallery-home-one .theme-title-one .main-title, .contact-home-one .contact-text h2.main-title, .our-service-one h2.main-title { /* font-family: 'gilroy-bold' !important; */ font-weight: bold; } .rogan-hero-section.rogan-hero-three h1.banner-main-title { /* font-family: 'gilroy-black' !important; */ } .rogan-hero-section.rogan-hero-three .banner-upper-heading { /* font-family: 'gilroy-light' !important; */ } .our-core-feature.style-one .feature-block-one h5.tran3s, .our-core-feature.style-two .feature-block-one h5.tran3s, .our-core-feature.style-three .feature-block-one h5.tran3s, .our-service-one .feature-block-one h5.tran3s { /* font-family: 'gilroy-semibold'; */ } .rogan-hero-section.rogan-hero-two .solid-button-one, .rogan-hero-section.rogan-hero-one .solid-button-one, .about-us-block-one .solid-button-one { box-shadow: none; } .our-core-feature.style-three .line-button-one:hover, .about-us-block-two .line-button-one:hover, .rogan-hero-section.rogan-hero-two .line-button-one:hover, .rogan-hero-section.rogan-hero-one .line-button-one:hover, .pricing-plan-classic .tab-content .line-button-two:hover, .our-core-feature.style-one .line-button-one:hover, .about-us-block-one .solid-button-one:hover { box-shadow: none; background: none !important; } .newsletter-section.newsletter-one .main-wrapper { border: none; } .consultation-section .theme-form-style-one .solid-button-one { box-shadow: none; width: auto; color: #fff; border-radius: 30px; border: 2px solid var(--p-green); padding: 0 35px; } .consultation-section .theme-form-style-one .solid-button-one:hover { color: var(--p-green); } .about-us-block-two .theme-title-one .upper-title, .our-core-feature.style-two .theme-title-one .upper-title, .project-gallery-home-one .theme-title-one .upper-title, .pricing-plan-classic .theme-title-one .upper-title, .testimonial-section-standard .theme-title-one .upper-title, .contact-home-one .theme-title-one .upper-title { padding-bottom: 0 !important; } .testimonial-section-standard .onu_testimonials { margin-bottom: 0 !important; text-align: justify; } .testimonial-section-standard .onu_testimonials.word-align{ text-align: unset; } .rogan-hero-one .main-illustration { right: 0; top: 250px; width: 700px; } .consultation-section .onu-contact-form img { position: absolute; z-index: -1; top: 230px; left: -142px; } @media screen and (max-width: 1024px) { .rogan-hero-one .main-illustration { padding-left: 148px; margin-top: 60px; } .consultation-section .onu-contact-form img { position: absolute; z-index: -1; top: 285px; left: -16px; } } @media screen and (max-width: 1024px) { .consultation-section .onu-contact-form img { display: none; } .smb{ background-image: url(/assets/images/home/banner_xs.png) !important; background-repeat: no-repeat !important; background-position: center !important; background-size:auto 100% !important; } } /**=== Override Elementor Class ===**/ .gilroy-bold .theme-title-one .main-title, .gilroy-bold .pr-column .pr-header .title { font-family: 'gilroy-bold'; }