0byt3m1n1-V2
Path:
/
home
/
yvffpqmy
/
public_html
/
new
/
wp-content
/
themes
/
consua
/
assets
/
css
/
[
Home
]
File: style.css
/* ---------------------------------- Template Name: Consua - Consulting Business Template Author: validtheme Description: Version: 1.0 Main Font : Outfit Main Color : #DF0A0A ------------------------------------- [Typography] Body copy: 15px 'Outfit', sans-serif Header: 36px 'Outfit', sans-serif Input, textarea: 16px 'Outfit', sans-serif Sidebar heading: 20px 'Outfit', sans-serif >>> TABLE OF CONTENTS: ======================= 01. Template default css - Animations - General - Section Title - Video Button - Typography - Tables - Forms - Buttons - Pagination - Colors 02. Preloader 03. Topbar - Topbar Style One - Topbar Style Two 04 Navbar - Navbar Default - Navbar Transparent - Navbar Sticky - Navbar Box 05. Banner - Banner Fade - Banner Slide - Banner Zoom 06. About Us - About Style One - About Style Two 07. Services - Tab Version - Grid Version - Services Single 08. Features 09. Work Process 10. Why Choose Us 11. Fun Factor 12. Pricing Table 12. Partner World Wide 13. Team - Grid Version - Carousel Version - Team Details 14. Testimonials - Single Slider - Center Slider 15. Projects - Grid Version - Carousel Version - Project Details 16. Blog - Standard - Left Sidebar - Right Sidebar - Single 17. Request Call Back 18. FAQ 19. Error 404 20. Footer 21. PHP Contact Form 22. Others */ /* Varialbes */ :root { --font-default: 'Outfit', sans-serif; --font-heading: 'Outfit', sans-serif; --font-secondary: 'Manrope', sans-serif; --fontawesome: "Font Awesome 5 Pro"; --black: #000000; --dark: #1D2027; --dark-secondary: #022b6d; --dark-optional: #3e00a7; --white: #ffffff; --color-primary: #DF0A0A; --color-secondary: #0b57e3; --color-optional: #57B33E; --color-heading: #0e0e0e; --color-paragraph: #666666; --box-shadow-primary: -1px 3px 10px 0 rgba(0, 0, 0, 0.6); --box-shadow-secondary: 0 10px 30px 0 rgba(44, 130, 237, 0.4); --box-shadow-regular: 0px 2px 12px 0px #e7e7e7; --bg-gray: #F7F7F7; --bg-gradient: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%); --bg-gradient-secondary: linear-gradient(90deg, var(--color-secondary) 40%, var(--dark-secondary) 100%); --bg-gradient-reverse: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%); --gradient-bg: linear-gradient(90deg, #DF0A0A 0%, #930707 100%); --bg-gradient-optional: linear-gradient(90deg, #57B33E 50%, #b59f11 100%); } /* ============================================================== # Reset Browsers =================================================================== */ * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body, html { height: 100%; } html { margin: 0; padding: 0; width: 100%; height: 100%; scroll-behavior: smooth; } html, body, div, span, img, ol, ul, li, a, p, h1, h2, h3, h4, h5, h6, option, legend, label, table, th, td, tr, article, aside, caption, figure, footer, header, hgroup, mark, nav, section, time, audio, video { margin: 0; padding: 0; border: 0; outline: 0; } .wrapper { height: 100%; } img { border: none; outline: none; max-width: 100%; } label { display: inline-block; font-weight: normal; margin-bottom: 5px; max-width: 100%; } a { outline: none; text-decoration: none; color: var(--color-heading); } a img { border: none; } a:active { outline: none; text-decoration: none; color: var(--color-heading); opacity: 1; } a:focus { outline: none; text-decoration: none; color: var(--color-heading); } a:hover { outline: none; text-decoration: none; color: var(--color-primary); opacity: 1; } button { outline: medium none; } iframe { border: none; } hr { margin-top: 0; margin-bottom: 0; border: 0; border-top: 1px solid #eeeeee; } pre { display: block; margin: 0 0 30px; padding: 9.5px; word-wrap: break-word; word-break: break-all; color: #333333; border: 1px solid #ededed; border-radius: inherit; background-color: #f9f9f9; font-size: 13px; line-height: 1.42857143; } input { border: 1px solid #e7e7e7; border-radius: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; min-height: 50px; } input:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } textarea:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } select:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } b { font-weight: 600; } strong { font-weight: 600; } .row { --bs-gutter-x: 30px; } i::before { line-height: inherit !important; } /* ============================================================== # Template Default Styles =================================================================== */ body { font-family: var(--font-default); font-size: 16px; font-weight: 400; line-height: 28px; overflow-x: hidden; background-color: var(--white); color: var(--color-paragraph); } h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-weight: normal; line-height: 1.2; font-family: var(--font-heading); letter-spacing: 0; margin: 0; margin-bottom: 15px; } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 27px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 14px; } a, .btn, button { -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; outline: medium none; text-decoration: none; font-weight: 600; } p { color: var(--color-paragraph); margin: 0 0 15px; text-transform: none; font-weight: 400; font-family: var(--font-default); } /* ============================================================== # Helper CSS =================================================================== */ @media (min-width: 1250px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1250px; } } .container-full { padding: 0 15px; margin: auto; max-width: 1400px; } @media (min-width: 576px) { .container-full { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-full { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-full { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-full { max-width: 95%; width: 95%; } } .container-fill { padding: 0 15px; margin: auto; max-width: 100%; } @media (min-width: 576px) { .container-fill { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-fill { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-fill { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-fill { width: 100%; max-width: 100%; } } @media (max-width: 1199px) { .container-fill { padding: 0 25px; width: 100%; } } @media only screen and (min-width: 1367px) { .container-stage { margin-left: calc((100% - 1250px)/ 2); width: auto; min-width: auto; max-width: inherit; padding-right: 0; } } @media only screen and (max-width: 767px) { .row { --bs-gutter-x: 1.5rem; } } .bg-cover { background-position: center center !important; background-size: cover !important; } .bg-contain { background-size: contain !important; background-repeat: no-repeat !important; background-position: left top !important; } .bg-fixed { background-attachment: fixed !important; background-position: center center !important; background-size: cover !important; } .bg-fit { background-size: 100% 100% !important; background-position: center !important; } .bg-gray { background: var(--bg-gray); } .bg-light { background-color: var(--white); } .bg-dark { background-color: var(--dark) !important; } .bg-theme { background-color: var(--color-primary); } .bg-theme-secodnary { background-color: var(--color-secondary); } .bg-gradient { background-color: var(--color-primary); background: var(--bg-gradient) !important; } .bg-gradient-secondary { background-color: var(--color-secondary); background: var(--bg-gradient-secondary) !important; } .gradient-bg { background-color: var(--color-primary); background: var(--gradient-bg) !important; } .text-light { color: var(--white); } .text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6, .text-light p, .text-light span, .text-light a { color: var(--white); } .shadow { -webkit-box-shadow: inherit !important; box-shadow: inherit !important; } .shadow.dark { position: relative; z-index: 1; } .shadow.dark:after { background: var(--dark); content: ""; height: 100%; left: 0; opacity: 0.35; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .shadow.dark-hard { position: relative; z-index: 1; } .shadow.dark-hard:after { background: rgba(0, 4, 30, 0) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .shadow.theme { position: relative; z-index: 1; } .shadow.theme:after { background: var(--color-primary) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .shadow.light { position: relative; z-index: 1; } .shadow.light:after { background: var(--white) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.6; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .default-padding, .default-padding-top, .default-padding-bottom, .default-padding-mx { position: relative; } .default-padding { padding-top: 120px; padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding { padding-top: 50px; padding-bottom: 50px; } } .default-padding-big { padding: 250px 0; } @media only screen and (max-width: 767px) { .default-padding-big { padding: 50px 0; } } .default-padding-top { padding-top: 120px; } @media only screen and (max-width: 767px) { .default-padding-top { padding-top: 50px; } } .default-padding-bottom { padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding-bottom { padding-bottom: 50px; } } .default-padding.bottom-less { padding-top: 120px; padding-bottom: 90px; } @media only screen and (max-width: 767px) { .default-padding.bottom-less { padding-top: 50px; padding-bottom: 20px; } } .default-padding-bottom.bottom-less { margin-bottom: -30px; } @media only screen and (max-width: 767px) { .default-padding-bottom.bottom-less { margin-bottom: 0; } } .default-padding-top.bottom-less { margin-bottom: -30px; } @media only screen and (max-width: 767px) { .default-padding-top.bottom-less { margin-bottom: -20px; } } @media only screen and (min-width: 1200px) { .align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .border-top { border-top: 1px solid #e7e7e7; } .border-bottom { border-bottom: 1px solid #e7e7e7; } .border-left { border-left: 1px solid #e7e7e7; } .border-right { border-right: 1px solid #e7e7e7; } .heading { font-weight: 600; margin-bottom: 25px; margin-top: -5px; font-size: 42px; line-height: 1.3; } .heading span { font-weight: 400; } .site-heading { margin-bottom: 60px; } .title { font-weight: 600; font-size: 42px; } .site-heading .title { margin-bottom: 0; } .sub-title { text-transform: uppercase; color: var(--color-primary); font-weight: 600; background: var(--bg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; z-index: 1; } .secondary .sub-title { color: var(--color-secondary); background: var(--bg-gradient-secondary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bg-gradient .sub-title { color: var(--white); -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; background: transparent; } .site-heading p { margin-bottom: 0; margin-top: 25px; padding: 0 10%; } .site-heading .devider { display: inline-block; width: 50px; height: 2px; background: var(--color-primary); position: relative; z-index: 1; left: 10px; } .secondary.site-heading .devider { background: var(--color-heading); } .site-heading.light .devider, .bg-theme .site-heading .devider, .bg-gradient .site-heading .devider, .shadow .site-heading .devider, .bg-dark .site-heading .devider { background: var(--white); } .site-heading .devider:before { position: absolute; left: -15px; top: 0; content: ""; height: 2px; width: 10px; background: var(--color-primary); } .secondary.site-heading .devider:before { background: var(--color-heading); } .site-heading.light .devider:before, .bg-theme .site-heading .devider:before, .bg-gradient .site-heading .devider:before, .shadow .site-heading .devider:before, .bg-dark .site-heading .devider:before { background: var(--white); } .secondary .site-heading .devider { background: var(--dark); } .secondary .site-heading .devider::before { background: var(--dark); } @media (max-width: 767px) { .site-heading p { padding: 0; } } @media only screen and (max-width: 767px) { .site-heading { margin-bottom: 30px; } } .heading-left { position: relative; z-index: 1; margin-bottom: 60px; } .heading-left .heading { font-weight: 600; margin-bottom: 0; } @media only screen and (max-width: 767px) { .heading-left .heading { margin-bottom: 15px; } } .heading-left p { margin-bottom: 0; } .heading-left .btn { margin-top: 30px; } @media only screen and (max-width: 767px) { .heading-left { margin-bottom: 30px; } } .bg-dark .heading-left p { opacity: 0.8; } .sub-heading { text-transform: uppercase; color: var(--color-primary); font-weight: 600; background: var(--bg-gradient-reverse); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; z-index: 1; margin-bottom: 20px; } .secondary .sub-heading, .secondary.sub-heading, .bg-dark .secondary.sub-heading { background: var(--bg-gradient-secondary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .text-center .sub-heading, .text-center.sub-heading { margin-bottom: 15px; } .bg-gradient .sub-heading { color: var(--white); background: transparent; -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; opacity: 0.9; } .bg-dark .sub-heading { background: linear-gradient(90deg, #df0a0a 0%, #7c00ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .bg-dark.secondary .sub-heading { background: linear-gradient(90deg, #0b57e3 0%, #7c00ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .bg-dark .sub-heading.secondary { background: transparent; -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; color: var(--color-secondary); } /* ============================================================== # Video Play Button =================================================================== */ .video-play-button { display: inline-block; background: var(--color-primary); height: 60px; width: 60px; line-height: 60px; text-align: center; border-radius: 50%; color: var(--color-heading); position: relative; } .video-play-button i { font-weight: 400; font-size: 20px; position: relative; left: 3px; top: 2px; } .video-play-button .effect { position: absolute; width: 100px; height: 100px; background: var(--color-primary); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; } .video-play-button .effect::after { position: absolute; content: ""; width: 70px; height: 70px; background: var(--color-primary); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; -webkit-animation-delay: 2s; animation-delay: 2s; } .video-play-button .effect::before { position: absolute; content: ""; width: 60px; height: 60px; background: var(--color-secondary); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; -webkit-animation-delay: 3s; animation-delay: 3s; } .video-play-button.with-text { width: auto; background: transparent; } .video-play-button.with-text span { position: relative; z-index: 1; } .video-play-button.with-text span i { margin-left: 25px; margin-right: 30px; color: var(--white); left: -1px; } .video-play-button.with-text .effect { height: 60px !important; width: 60px; left: 0; -webkit-animation: inherit; animation: inherit; background: var(--color-primary); top: 0; opacity: 1; z-index: 1; } .video-play-button.with-text .effect::before { display: none; } .video-play-button.with-text .effect::after { background: var(--color-primary); height: 100%; width: 100%; z-index: inherit; -webkit-animation-delay: 0s; animation-delay: 0s; } /* ============================================================== # Template Animation =================================================================== */ /* Video Paly */ @-webkit-keyframes video-play { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes video-play { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } /*Zoom Animation */ .zoom-animation { -webkit-animation: zoom 2000ms ease-out infinite; animation: zoom 2000ms ease-out infinite; } /* Slider Zoom Effect */ @-webkit-keyframes zoom { from { -webkit-transform: scale(1, 1); } to { -webkit-transform: scale(1.2, 1.2); } } @keyframes zoom { from { -webkit-transform: scale(1, 1); transform: scale(1, 1); } to { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } /* Spiner Animation */ .spiner-animation { -webkit-animation: spinner 20s infinite linear; animation: spinner 20s infinite linear; } /*Preloader Spiner Animation */ @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } /* Spiner Animation */ .spiner-reverse-animation { -webkit-animation: spinnerReverse 20s infinite linear; animation: spinnerReverse 20s infinite linear; } /*Preloader Spiner Animation */ @-webkit-keyframes spinnerReverse { to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); } } @keyframes spinnerReverse { to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); } } /* Infinite Up Down Animation */ @keyframes UpDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } /* Animation UpDown */ .updown-animation { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); -webkit-animation-name: UpDown; animation-name: UpDown; -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes UpDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } /* Animation Left Right */ .leftRight-animation { -webkit-animation: fadeLeftRight 10s ease-out infinite; animation: fadeLeftRight 10s ease-out infinite; } /* Fade Left Right */ @keyframes fadeLeftRight { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } @-webkit-keyframes fadeLeftRight { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } /* Animation Right Left */ .rightLeft-animation { -webkit-animation: fadeRightLeft 10s ease-out infinite; animation: fadeRightLeft 10s ease-out infinite; } @keyframes fadeRightLeft { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } @-webkit-keyframes fadeRightLeft { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } /* Animation Zoom Up Down */ .zoomUpDown-animation { -webkit-animation: zoomUpDown 10s ease-out infinite; animation: zoomUpDown 10s ease-out infinite; } /* Zoom Up Down */ @keyframes zoomUpDown { 0%, 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } 50% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @-webkit-keyframes zoomUpDown { 0%, 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } } /* Animation Moving */ .moving-animation { -webkit-animation: moving 10s ease-out infinite; animation: moving 10s ease-out infinite; } /* Mooving Animation */ @-webkit-keyframes moving { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); } 70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes moving { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); } 70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } /* Animation Rotation */ @keyframes infinite-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes infinite-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Button Border Animation */ @-webkit-keyframes open { 0% { width: 0; height: 0; } 50% { width: 100px; height: 0; } 100% { width: 100px; height: 55px; } } @keyframes open { 0% { width: 0; height: 0; } 50% { width: 100px; height: 0; } 100% { width: 100px; height: 55px; } } @-webkit-keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } @keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } /* Animation Shine (A shine color will move inside the text) */ @-webkit-keyframes shine { 0% { background-position: 0; } 60% { background-position: 180px; } 100% { background-position: 180px; } } @keyframes shine { 0% { background-position: 0; } 60% { background-position: 180px; } 100% { background-position: 180px; } } @-webkit-keyframes infiniteMove { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } @keyframes infiniteMove { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } @-webkit-keyframes infiniteMove2 { 0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } 50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; } 100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } } @keyframes infiniteMove2 { 0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } 50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; } 100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } } /* ============================================================== # Button Styles =================================================================== */ .btn { display: inline-block; font-weight: 500; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 8px; border: 2px solid transparent; -webkit-box-shadow: inherit; box-shadow: none; font-size: 16px; letter-spacing: 0; padding: 13px 30px; background: #E7EDF8; position: relative; z-index: 1; } .btn:focus, .btn.active { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; -webkit-box-shadow: inherit; box-shadow: inherit; border: 2px solid transparent; } .btn:hover { background-color: var(--color-primary); color: var(--white); } .btn.radius { border-radius: 6px; } .btn.btn-border { border: 2px solid #e7e7e7; background: transparent; } .btn.btn-border:hover { background: var(--color-primary); border-color: var(--color-primary); } .btn.btn-border.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: #e7e7e7; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border.animation:hover { border-color: #e7e7e7; color: var(--dark); } .btn.btn-border.animation:hover::after { width: 100%; } .btn.btn-border-dark { border: 2px solid var(--dark); background: transparent; } .btn.btn-border-dark:hover { background: var(--dark); border-color: var(--dark); } .btn.btn-border-dark.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border-dark.animation:hover { border-color: var(--dark); color: var(--white); } .btn.btn-border-dark.animation:hover::after { width: 100%; } .btn.btn-border-theme { border: 2px solid var(--color-primary); background: transparent; } .btn.btn-border-theme:hover { background: var(--color-primary); border-color: var(--color-primary); } .btn.btn-border-theme.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--color-primary); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border-theme.animation:hover { border-color: var(--color-primary); color: var(--white); } .btn.btn-border-theme.animation:hover::after { width: 100%; } .btn.btn-border-light { border: 2px solid var(--white); background: transparent; color: var(--white); } .btn.btn-border-light:hover { background: var(--white); border-color: var(--white); color: var(--dark); } .btn.btn-border-light.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border-light.animation:hover { border-color: var(--white); color: var(--dark); } .btn.btn-border-light.animation:hover::after { width: 100%; } .btn.btn-gradient { border: none; color: var(--white); } .btn.btn-gradient::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 100%; z-index: -1; background-image: linear-gradient(to right, var(--color-primary) , var(--color-secondary), var(--color-primary) ); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; background-size: 220%; } .btn.btn-gradient:hover::after { background-position: -70% 0; } .btn.btn-gradient.active { background-position: -70% 0; } .btn.btn-theme { color: var(--white); border: none; background: var(--color-primary); } .btn.btn-theme::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .shadow .btn.btn-theme::after { background-color: var(--white) !important; } .shadow .btn.btn-theme:hover { color: var(--color-heading); } .btn.btn-theme:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-theme.secondary { color: var(--white); border: none; background: var(--color-secondary); } .btn.btn-theme.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .text-light .btn.btn-theme.secondary::after { background-color: var(--white); } .text-light .btn.btn-theme.secondary:hover { color: var(--color-heading); } .btn.btn-theme.secondary:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-theme.hover-light::after { background-color: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-theme.hover-light:hover { color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-theme.hover-light:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-light { color: var(--color-heading); border: none; background: var(--white); border: 2px solid transparent; } .btn.btn-light.btn-md { padding: 13px 52px; } .btn.btn-light:hover { color: var(--white); background: transparent; border: 2px solid var(--white); } .btn.btn-dark { color: var(--white); background: var(--dark); border: none; } .btn.btn-dark::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background-color: var(--color-primary); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .secondary .btn.btn-dark::after { background-color: var(--color-secondary); } .shadow .btn.btn-dark::after { background-color: var(--white); } .shadow .btn.btn-dark:hover { color: var(--color-heading) !important; } .btn.btn-dark:hover::after { width: 100%; } .btn.btn-dark.secondary { color: var(--white); border: none; background: var(--dark-optional); } .btn.btn-dark.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .btn.btn-dark.secondary:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-dark.secondary:hover { color: var(--color-heading); } .btn i { position: relative; top: 1px; margin-left: 5px; } .btn.text-slide { min-width: 150px; height: 55px; line-height: 55px; } .btn.text-slide span { position: absolute; height: 100%; width: 100%; top: 0; left: 0; text-align: center; } .btn.animate-border { overflow: inherit; z-index: inherit; width: 200px; height: 55px; line-height: 55px; padding: 0; } .btn.animate-border:hover { background: transparent; color: var(--dark); } .btn.animate-border:hover .hover-border::after, .btn.animate-border:hover .hover-border::before { opacity: 1; -webkit-animation: open 0.4s; /* Chrome, Safari, Opera */ animation: open 0.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-animation-direction: normal; animation-direction: normal; } .btn.animate-border:hover .hover-border-bottom::after, .btn.animate-border:hover .hover-border-bottom::before { opacity: 1; -webkit-animation: openB 0.4s; /* Chrome, Safari, Opera */ animation: openB 0.4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-animation-direction: normal; animation-direction: normal; } .btn.animate-border .hover-border { position: absolute; left: 0; top: -1px; height: 100%; width: 100%; } .btn.animate-border .hover-border::before { position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-left: solid 2px var(--color-primary); right: 98px; top: -1px; } .btn.animate-border .hover-border::after { position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-right: solid 2px var(--color-primary); left: 98px; top: -1px; } .btn.animate-border .hover-border-bottom { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; } .btn.animate-border .hover-border-bottom::before { position: absolute; content: ""; width: 0; display: block; opacity: 0; height: 55px; border-bottom: solid 2px var(--color-primary); right: -1px; bottom: -2px; } .btn.animate-border .hover-border-bottom::after { position: absolute; content: ""; width: 0; display: block; opacity: 0; height: 100%; border-bottom: solid 2px var(--color-primary); left: 0; bottom: -2px; } .btn.animated-arrow { border: none; background: transparent; min-width: 14rem; height: auto; padding: 0; } .btn.animated-arrow .circle { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3.5rem; height: 3.5rem; background: var(--color-primary); border-radius: 2rem; } .btn.animated-arrow .circle .icon { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 15px; width: 1.125rem; height: 0.125rem; background: none; position: absolute; top: 0; bottom: 0; margin: auto; } .btn.animated-arrow .circle .icon::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid var(--white); border-right: 0.125rem solid var(--white); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .btn.animated-arrow .button-text { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 15px 0; margin: 0 0 0 70px; color: var(--dark); line-height: 2; text-align: left; width: 100%; font-size: 14px; } .btn.animated-arrow:hover { color: var(--white); } .btn.animated-arrow:hover .circle { width: 100%; } .btn.animated-arrow:hover .circle .icon.arrow { background: var(--white); -webkit-transform: translate(1.5rem, 0); transform: translate(1.5rem, 0); } .btn.animated-arrow:hover .button-text { color: var(--white); } .btn.circle { border-radius: 30px !important; } .btn-simple { line-height: 1; text-transform: capitalize; display: inline-block; font-size: 17px; } .btn-simple i { display: inline-block; margin-left: 2px; height: 40px; width: 40px; text-align: center; line-height: 38px; border: 1px solid var(--dark); border-radius: 50%; margin-right: 10px; transition: all 0.35s ease-in-out; font-weight: 400; font-size: 16px; background: var(--dark); color: var(--white); } .btn-simple:hover { color: var(--color-primary); } .secondary .btn-simple:hover { color: var(--color-secondary); } .btn-simple:hover i { background: var(--color-primary); border-color: var(--color-primary); color: var(--white); } .secondary .btn-simple:hover i { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--white); } .video-btn i { display: inline-block; height: 55px; width: 55px; text-align: center; line-height: 55px; background: var(--color-primary); border-radius: 50%; position: relative; margin-right: 20px; color: var(--white); } .text-light .video-btn i { background: var(--white); color: var(--color-primary); } .video-btn i::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: var(--color-primary) repeat scroll 0 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; z-index: -1; } .text-light .video-btn i::after { background: var(--white) repeat scroll 0 0; } .text-shine { background: linear-gradient(to right, var(--dark) 0, var(--white) 10%, var(--color-primary) 20%); background-position: 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: shine 3s infinite linear; animation: shine 3s infinite linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-text-size-adjust: none; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; padding: 12px 48px; } .animate-inout { background: -webkit-gradient(linear, left top, right top, from(#8A6552), to(#472d20)); background: linear-gradient(90deg, #8A6552 0%, #472d20 100%); color: var(--white); font-size: 12px; text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; overflow: hidden; border: solid 2px var(--color-primary); cursor: pointer; } .btn-icon { position: relative; padding-left: 20px; } .btn-icon:hover { color: var(--color-primary); } .btn-icon::after { position: absolute; right: 10px; top: 50%; content: ""; height: 2px; left: 0; background: var(--color-heading); transform: translateY(-50%); margin-top: -1px; transition: all 0.35s ease-in-out; } .btn-icon:hover::after { background: var(--color-primary); } .btn-icon i { font-weight: 500; } .btn-icon:hover { padding-left: 40px; } .animate-inout span { z-index: 1; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; line-height: 20px; } .animate-inout::before, .animate-inout::after { width: 0%; height: 0%; position: absolute; content: ""; border-radius: 100%; } .animate-inout:after { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; background-color: var(--white); } .animate-inout:before { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: var(--color-primary); } .animate-inout.animate-inout-borde { background: transparent; color: var(--dark); } .animate-inout.animate-inout-borde::after { background: -webkit-gradient(linear, left top, right top, from(#8A6552), to(#472d20)); background: linear-gradient(90deg, #8A6552 0%, #472d20 100%); } .animate-inout.animate-inout-borde:hover { color: var(--white); } .animate-inout.animate-inout-borde:hover::before { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .animate-inout.animate-inout-borde:hover::after { -webkit-transition: all 0.7s ease-in; transition: all 0.7s ease-in; } .animate-inout:hover { color: var(--dark); } .animate-inout:hover::before, .animate-inout:hover::after { width: 200px; height: 200px; border-radius: 4px; } .animate-inout:hover::before { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .animate-inout:hover::after { -webkit-transition: all 0.7s ease-in; transition: all 0.7s ease-in; } .btn-md { padding: 16px 52px; font-size: 17px; } .btn-sm { padding: 16px 50px; font-size: 14px; } /* Btn Animation */ .btn-animation { z-index: 1; position: relative; font-size: 20px; display: inline-block; margin-left: 10px; } .btn-animation i { display: inline-block; height: 55px; width: 55px; text-align: center; line-height: 55px; background: var(--white); color: var(--color-heading); border-radius: 50%; font-weight: 400; margin-right: 10px; transition: all 0.35s ease-in-out; transform: scale(0); } .btn-animation:hover { margin-left: 0; } .btn-animation:hover i { transform: scale(1); } .btn-animation::after { position: absolute; left: -13px; top: 0; content: ""; height: 60px; width: 60px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; transition: all 0.35s ease-in-out; transform: scale(1); z-index: -1; } .btn-animation:hover::after { transform: scale(0); } .btn-animation span { transition: all 0.35s ease-in-out; left: -50px; position: relative; } .btn-animation:hover span { left: 0; } .btn-animation.dark::after { border-color: #c5c5c5; z-index: -1; } .btn-animation.dark i { background: var(--color-primary); color: var(--white); } .btn-animation.dark:hover { color: var(--color-heading); } /* ============================================================== # Nice Select Styles =================================================================== */ .nice-select { -webkit-tap-highlight-color: transparent; background-color: var(--white); border: solid 1px #e8e8e8; -webkit-box-sizing: border-box; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 16px; font-weight: normal; height: 50px; line-height: 50px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: 100%; margin-bottom: 15px; } .nice-select:hover { border-color: #dbdbdb; } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: #999999; } .nice-select::after { border-bottom: 2px solid #999999; border-right: 2px solid #999999; content: ''; display: block; height: 5px; margin-top: -6px; pointer-events: none; position: absolute; right: 12px; top: 50%; -webkit-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; width: 5px; } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); overflow-y: auto !important; height: auto; } .nice-select.open ::after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .nice-select.disabled { border-color: #ededed; color: #999999; pointer-events: none; } .nice-select.disabled::after { border-color: #96aac1; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small::after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { background-color: var(--white); border-radius: 5px; -webkit-box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; width: 100%; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #f6f6f6; } .nice-select .option.selected { font-weight: 600; } .nice-select .option.disabled { background-color: transparent; color: #999999; cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } /* ============================================================== # Topbar Styles =================================================================== */ .item-flex { align-items: center; display: flex; padding-left: 0; margin-bottom: 0; list-style: none; } .item-flex li { margin-left: 30px; } .item-flex li:first-child { margin: 0; } .item-flex li i { margin-right: 10px; font-weight: 100; font-size: 24px; color: var(--color-primary); } .top-bar-area li { display: flex; align-items: center; } .top-bar-area li a { font-weight: 400; } .top-bar-area .social ul { margin: 0; padding: 0; } .top-bar-area .social li { display: inline-block; margin-right: 30px; } .top-bar-area .social li:first-child { margin-right: 0; } .top-bar-area .text-end .social li { margin-right: 0; margin-left: 30px; } .top-bar-area .text-end .social li:first-child { margin-left: 0; } .top-bar-area { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } .top-bar-area.top-bar-style-one.bg-dark { border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .top-bar-style-two { padding: 20px 0; } .top-bar-style-two .text-end .social li { margin-left: 8px; } .top-bar-style-two .social li a { display: inline-block; background: var(--dark); color: var(--white); height: 38px; width: 38px; text-align: center; line-height: 38px; border-radius: 50%; } .top-bar-style-two .item-flex li i { font-weight: 600; color: var(--color-paragraph); } .call-entry { display: flex; justify-content: right; text-align: left; } .call-entry p { margin-bottom: 5px; line-height: 1; font-size: 14px; } .call-entry p strong { font-weight: 600; color: var(--blue); } .call-entry h5 { margin: 0; font-weight: 600; font-size: 20px; letter-spacing: 0.6px; } .call-entry h5 a { padding: 0 !important; display: inline-block; text-transform: lowercase; } .call-entry i { display: inline-block; font-size: 40px; margin-right: 15px; position: relative; color: var(--color-secondary); } .top-bar-style-two .item-flex li strong { display: block; text-transform: uppercase; font-weight: 600; color: var(--color-heading); } .top-bar-style-two .item-flex li a { font-weight: 500; color: var(--color-paragraph); } .top-bar-style-two .item-flex li a:hover { color: var(--color-secondary); } .top-bar-style-two .item-flex li { line-height: 1.7; } .top-bar-style-two .item-flex li i { display: inline-block; font-size: 40px; color: var(--color-secondary); margin-right: 15px; font-weight: 100; } /* ============================================================== # Navbar Styles =================================================================== */ @media (min-width: 1200px) { nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background { box-shadow: inherit; top: 50px; } nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header { position: relative; z-index: 1; padding-right: 45px; margin-right: -45px; } nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header::after { position: absolute; right: 0; bottom: 0; height: 300px; width: 500%; background: var(--white); z-index: -1; transform: skewX(15deg); } nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header::before { position: absolute; right: -10px; bottom: 15px; content: ""; height: 300px; width: 100%; background: #cfd2d5; z-index: -1; transform: skewX(15deg); } nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header a { position: relative; } nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header img { position: relative; top: -35px; } } /* ============================================================== # Topbar Styles =================================================================== */ .top-style-one .logo img { height: 60px; } .top-style-one .social li { display: inline-block; } .top-style-one { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e7e7e7; } .top-style-one.transparent { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .top-style-one .logo { text-align: center; border-left: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7; padding: 15px 0; } .top-style-one.transparent .logo { border-left: 1px solid rgba(255, 255, 255, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.3); } .top-style-one .social li a { display: inline-block; height: 43px; width: 43px; text-align: center; line-height: 45px; background: var(--bg-gradient); color: var(--white); border-radius: 50%; font-size: 15px; } .top-style-one .text-end.social li { margin-left: 3px; } .top-style-one .info i { font-weight: 100; font-size: 20px; position: relative; top: 2px; margin-right: 3px; color: var(--color-primary); } .top-style-one .info li { font-weight: 500; text-transform: capitalize; } @media (min-width: 1024px) { .top-style-one.transparent { border-bottom: 1px solid rgba(255, 255, 255, 0.3); position: absolute; left: 0; top: 0; width: 100%; z-index: 9; } } /* ============================================================== # Banner Styles =================================================================== */ .banner-area { height: 100%; width: 100%; position: relative; } @media (max-width: 1023px) { .banner-area { height: auto; } .banner-area div { height: auto; } } .banner-area div { height: 100vh; } .banner-area div.swiper-slide .row div { height: auto; } .banner-area.top-pad-80 .content { padding-top: 80px; } @media (max-width: 1023px) { .banner-area.top-pad-80 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-80 .content { padding-top: 140px; } } .banner-area.top-pad-90 .content { padding-top: 90px; } @media (max-width: 1023px) { .banner-area.top-pad-90 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-90 .content { padding-top: 140px; } } .banner-area.top-pad-100 .content { padding-top: 100px; } @media (max-width: 1023px) { .banner-area.top-pad-100 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-100 .content { padding-top: 140px; } } .banner-area.top-pad-110 .content { padding-top: 110px; } @media (max-width: 1023px) { .banner-area.top-pad-110 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-110 .content { padding-top: 140px; } } .banner-area.top-pad-120 .content { padding-top: 120px; } @media (max-width: 1023px) { .banner-area.top-pad-120 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-120 .content { padding-top: 140px; } } .banner-area.top-pad-130 .content { padding-top: 130px; } @media (max-width: 1023px) { .banner-area.top-pad-130 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-130 .content { padding-top: 140px; } } .banner-area.top-pad-150 .content { padding-top: 150px; } @media (max-width: 1023px) { .banner-area.top-pad-150 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-150 .content { padding-top: 140px; } } .banner-area.auto-height { height: auto; } .banner-area.auto-height div { height: auto; } .banner-area.auto-height .content { padding: 200px 0; } @media only screen and (max-width: 767px) { .banner-area.auto-height .content { padding: 60px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.auto-height .content { padding: 120px 0; } } .banner-area.auto-height .content .thumb { padding-left: 35px; } @media (max-width: 991px) { .banner-area.auto-height .content .thumb { padding-left: 0; margin-top: 50px; } } .banner-area.auto-height.inc-header-transparent .content { padding-top: 250px; } @media only screen and (max-width: 767px) { .banner-area.auto-height.inc-header-transparent .content { padding-top: 140px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.auto-height.inc-header-transparent .content { padding-top: 220px; } } .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .info { padding-top: 80px; } .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 250px; } @media only screen and (max-width: 767px) { .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 50px; } } .banner-area .content { position: relative; z-index: 9; -webkit-transition: all 500ms ease; transition: all 500ms ease; } @media (max-width: 1023px) { .banner-area .content { padding: 120px 0; } } @media only screen and (max-width: 767px) { .banner-area .content { padding: 60px 0; } } .banner-area h4 { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translate3d(-15%, 0, 0); transform: translate3d(-15%, 0, 0); opacity: 0; visibility: hidden; } .banner-area h2 { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; visibility: hidden; } .banner-area p, .banner-area ul { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; padding-right: 25%; margin: 0; visibility: hidden; } @media (max-width: 1023px) { .banner-area p { padding-right: 0; } } .banner-area.text-center p { padding-left: 13%; padding-right: 13%; } @media (max-width: 1023px) { .banner-area.text-center p { padding: 0; } } .banner-area .thumb { -webkit-transition: all 500ms ease; transition: all 500ms ease; opacity: 0; visibility: hidden; } .banner-area .button { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; visibility: hidden; margin-top: 30px; } .banner-area h4 { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area h2 { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area p, .banner-area ul { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .button { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .swiper-slide.swiper-slide-active h4 { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .banner-area .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .banner-area .swiper-slide.swiper-slide-active p, .banner-area .swiper-slide.swiper-slide-active ul { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } .banner-area.banner-style-one .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } .banner-area.double-items .thumb { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area.double-items .swiper-slide.swiper-slide-active .thumb { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 500ms; transition-delay: 500ms; visibility: visible; opacity: 1; } .banner-area.double-items.bottom-thumb .content { padding: 0; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 120px; } @media only screen and (max-width: 767px) { .banner-area.double-items.bottom-thumb .content { padding: 50px 0; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.double-items.bottom-thumb .content { padding: 120px 0; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 50px; } } .banner-area.zoom-effect .banner-thumb { -webkit-transition: 10s ease-out; transition: 10s ease-out; -webkit-transform: scale(1.1); transform: scale(1.1); position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; } .banner-area.zoom-effect .swiper-slide.swiper-slide-active .banner-thumb { -webkit-transform: scale(1); transform: scale(1); } .banner-area .swiper-notification { display: none; } .banner-area .swiper-slide.swiper-slide-active h4 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; -webkit-transition-delay: 800ms; transition-delay: 800ms; } .banner-area .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } .banner-area .swiper-slide.swiper-slide-active p, .banner-area .swiper-slide.swiper-slide-active ul { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } .banner-area .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 3200ms; transition-delay: 3200ms; } .banner-area.banner-style-two .swiper-slide.swiper-slide-active .button { -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } .banner-area .banner-items { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .banner-area:hover .swiper-button-prev, .banner-area:hover .swiper-button-next { opacity: 1; } .banner-area:hover .swiper-button-prev { left: 30px; right: auto; } .banner-area:hover .swiper-button-next { right: 30px; left: auto; } .banner-area .swiper-button-prev, .banner-area .swiper-button-next { height: auto; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; opacity: 0; } .banner-area .swiper-button-prev::after, .banner-area .swiper-button-next::after { font-size: 28px; color: var(--color-heading); } .banner-area.navigation-circle .swiper-button-prev, .banner-area.navigation-circle .swiper-button-next { height: 55px; width: 55px; line-height: 55px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; border: 2px solid var(--color-heading); } .banner-area.navigation-circle .swiper-button-prev::after, .banner-area.navigation-circle .swiper-button-next::after { font-size: 16px; } .banner-area.navigation-right-bottom .swiper-button-prev, .banner-area.navigation-right-bottom .swiper-button-next { left: auto; right: 30px; opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; bottom: 50px; border-radius: inherit; } .banner-area.navigation-right-bottom .swiper-button-prev { right: 92px; } .banner-area.navigation-between-bottom .content { padding-bottom: 105px; } @media only screen and (min-width: 829px) and (max-width: 1023px) { .banner-area.navigation-between-bottom .content { padding-bottom: 220px; } } .banner-area.navigation-between-bottom .swiper-button-prev, .banner-area.navigation-between-bottom .swiper-button-next { left: auto; right: 30px; opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; bottom: 30px; border-radius: inherit; } .banner-area.navigation-between-bottom .swiper-button-prev { left: 30px; right: auto; } @media only screen and (max-width: 830px) { .banner-area .swiper-button-prev, .banner-area .swiper-button-next { display: none; } } .banner-area.navigation-custom .swiper-button-prev::after { font-family: 'ElegantIcons'; content: "\23"; font-size: 22px; } .banner-area.navigation-custom .swiper-button-next::after { font-family: 'ElegantIcons'; content: "\24"; font-size: 22px; } .banner-area.navigation-text .swiper-button-prev, .banner-area.navigation-text .swiper-button-next { opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; left: auto; right: 0; bottom: 0; display: inline-block; width: 150px; background: rgba(0, 0, 0, 0.2); text-align: center; height: 100px; line-height: 100px; } @media only screen and (max-width: 830px) { .banner-area.navigation-text .swiper-button-prev, .banner-area.navigation-text .swiper-button-next { display: none; } } .banner-area.navigation-text .swiper-button-prev { right: 151px; } .banner-area.navigation-text .swiper-button-prev::after { font-family: var(--font-heading); content: "Prev"; text-transform: uppercase !important; font-size: 16px; font-weight: 600; letter-spacing: 0.6px; } .banner-area.navigation-text .swiper-button-next::after { font-family: var(--font-heading); content: "Next"; text-transform: uppercase !important; font-size: 16px; font-weight: 600; letter-spacing: 0.6px; } .banner-area.navigation-icon-solid .swiper-button-prev::after, .banner-area.navigation-icon-solid .swiper-button-next::after { font-size: 30px; } .banner-area.navigation-custom-large .swiper-button-prev, .banner-area.navigation-custom-large .swiper-button-next { min-width: 65px; height: 30px; margin: 0; } .banner-area.navigation-custom-large .swiper-button-prev::after { font-family: "Font Awesome 5 Pro"; content: "\f104"; font-weight: 100; font-size: 30px; position: absolute; left: 8px; color: var(--color-primary); } .banner-area.navigation-custom-large .swiper-button-prev::before { position: absolute; top: 50%; right: inherit; bottom: inherit; left: 12px; content: ""; height: 2px; width: 35px; z-index: -1; background-color: var(--color-primary); margin-top: -1px; } .banner-area.navigation-custom-large .swiper-button-next::after { font-family: "Font Awesome 5 Pro"; content: "\f105"; font-weight: 100; font-size: 30px; position: absolute; right: 8px; color: var(--color-primary); } .banner-area.navigation-custom-large .swiper-button-next::before { position: absolute; top: 50%; left: 18px; bottom: inherit; right: inherit; content: ""; height: 2px; width: 35px; z-index: -1; background-color: var(--color-primary); margin-top: -1px; } .banner-area.navigation-right-botom .swiper-button-prev, .banner-area.navigation-right-botom .swiper-button-next { position: absolute; left: auto; left: 85px; top: auto; bottom: 40px; opacity: 1; -webkit-transform: inherit; transform: inherit; } .banner-area.navigation-right-botom .swiper-button-prev { right: 60px; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev, .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-next { bottom: 30px; background: transparent; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev { left: 30px; } .banner-area .swiper-pagination { height: auto; bottom: 35px; } .banner-area .swiper-pagination span.swiper-pagination-bullet { height: 4px; width: 50px; background: rgba(255, 255, 255, 0.5); opacity: 1; border-radius: inherit; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .banner-area .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: white; height: 7px; } @media only screen and (max-width: 767px) { .banner-area.include-pagination .content { padding-bottom: 100px; } } .banner-area .swiper-pagination-fraction span { -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .banner-area .swiper-pagination-fraction span.swiper-pagination-current { font-size: 30px; font-family: var(--font-heading); font-weight: 600; } /* ============================================================== # Banner Custom Style =================================================================== */ .banner-area .align-center { align-items: center; } .banner-style-one { position: relative; z-index: 1; } .banner-shape { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; } .banner-shape .item { position: absolute; left: 20%; bottom: 0; height: 0; width: 30%; background: var(--black); transform: rotate(53deg) skewY(10deg); opacity: 0; box-shadow: 0px 0px 10px #232931; transition: all 1000ms ease; } .banner-shape .item:nth-child(2) { position: absolute; left: 18%; bottom: 0; height: 0; width: 60%; background: var(--black); transform: rotate(-45deg) skewY(-10deg); opacity: 0; } .banner-style-one.swiper-slide-visible .banner-shape .item { height: 150px; opacity: 0.3; transition-delay: 1000ms; } .banner-style-one.swiper-slide-visible .banner-shape .item:nth-child(2) { height: 200px; opacity: 0.5; transition-delay: 100ms; } .banner-shape { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; } .banner-style-one h2 { font-size: 70px; font-weight: 500; line-height: 1.1; margin: 0; } .banner-style-one h2 strong { display: block; font-weight: 500; color: var(--white); } .banner-style-one h4 { text-transform: uppercase; } .banner-shape-bg { position: absolute; right: -50%; bottom: 0; z-index: 1; display: flex; max-width: 50%; height: 50% !important; transition: all 0.55s ease-in-out; } .banner-style-one.swiper-slide-visible .banner-shape-bg { right: 0; bottom: 0; opacity: 1; transition-delay: 1200ms; } /* Banner Style Two */ .banner-style-two .content { padding-top: 50px; position: relative; z-index: 1; } .banner-style-two .content::after { position: absolute; left: -200px; top: -250px; content: ""; height: 500px; width: 500px; background: var(--white); z-index: -1; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transform: rotate(45deg); transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; } .banner-style-two.swiper-slide-visible .content::after { top: -150px; transition-delay: 600ms; opacity: 0.7; visibility: visible; } .banner-style-two .container { position: relative; z-index: 1; } .banner-style-two .container .banner-thumb { position: absolute; right: 0; bottom: 0; } .banner-style-two .container .banner-thumb img { height: 90%; margin-top: 20%; } .banner-style-two { position: relative; } .banner-style-two .banner-shape-right { position: absolute; right: 0; bottom: 0; height: 70%; width: 30%; background-size: contain !important; background-position: right bottom !important; background-repeat: no-repeat !important; } .banner-style-two h2 { font-size: 70px; line-height: 1.1; margin: 0; font-weight: 600; } .banner-style-two h2 strong { font-weight: 600; display: block; color: var(--color-primary); } .banner-style-two h4 { text-transform: uppercase; font-weight: 500; } .banner-style-two p { font-size: 20px; line-height: 1.7; margin-top: 25px; padding-right: 20%; } .banner-area.banner-style-two .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 300ms; transition-delay: 300ms; } .banner-area.banner-style-two .swiper-slide.swiper-slide-active p { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 800ms; transition-delay: 800ms; } .banner-area.banner-style-two .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .banner-style-three .banner-thumb { position: absolute !important; width: 53% !important; right: 0 !important; left: auto !important; z-index: 1; } .banner-style-three .banner-thumb::after { position: absolute; left: -80px; top: -10%; content: ""; height: 120%; width: 150px; background: var(--bg-gray); filter: blur(15px); z-index: -1; } .banner-style-three { position: relative; } .banner-style-three .banner-shape { position: absolute; left: -20%; bottom: 0; max-width: 20%; display: flex; justify-content: flex-end; flex-direction: column; transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; z-index: -1; } .banner-style-three.swiper-slide-active .banner-shape { left: 0; opacity: 1; visibility: visible; } .banner-style-three .banner-shape img { height: auto; width: auto; } .banner-style-three .content h4 { text-transform: uppercase; font-weight: 500; color: var(--color-secondary); } .banner-style-three .content h2 { font-size: 65px; font-weight: 600; text-transform: capitalize; line-height: 1; margin-bottom: 25px; } .banner-style-three .content ul { padding-left: 0; margin-bottom: 0; list-style: none; } .banner-style-three .content ul li { display: block; position: relative; z-index: 1; font-weight: 500; font-size: 18px; margin-top: 10px; color: var(--color-heading); } .banner-style-three .content ul li:first-child { margin-top: 0; } .banner-style-four .content { padding-bottom: 120px; padding-top: 150px; } .banner-style-four h4 { font-weight: 400; } .banner-style-four h4 strong { font-weight: 400; margin-right: 6px; } .banner-style-four h2 { font-size: 65px; line-height: 1.1; font-weight: 600; text-transform: capitalize; margin-bottom: 20px; } /* ============================================================== # About Style =================================================================== */ .angle-shape { position: relative; z-index: 1; } .angle-shape:after { content: ""; position: absolute; bottom: 0; right: 0; left: 0; height: 0; border-right: 100vw solid #F7F7F7; border-top: 200px solid transparent; width: 0; z-index: -1; } .about-thumb { position: relative; margin-bottom: 80px; } .owner-info { display: flex; align-items: center; margin-top: 30px; } .owner-info img { height: 80px; } .owner-info h4 { font-weight: 600; margin-bottom: 5px; } .owner-info .left-info { margin-right: 30px; border-right: 1px solid #e7e7e7; padding-right: 30px; } .shape-animated-left img { position: absolute; left: 0; bottom: 30%; } .shape-animated-left img:nth-child(2) { position: absolute; left: 50px; top: 120px; } .thumb-shape-bottom { position: absolute; right: -50px; bottom: -50px; text-align: right; } .thumb-shape-bottom img { position: relative; } .thumb-shape-bottom img:first-child { position: absolute; right: -50px; height: 140px; } /* ============================================================== # Fun Fact =================================================================== */ .fun-fact .counter { position: relative; } .fun-fact .counter { position: relative; display: flex; align-items: center; font-size: 70px; font-weight: 600; color: var(--color-heading); line-height: 1; margin-bottom: 5px; } .fun-fact .medium { font-weight: 600; color: var(--color-heading); } .text-center .fun-fact .counter { justify-content: center; align-items: center; } .fun-fact { display: inline-block; text-align: left; } .text-center .fun-fact { text-align: center; } .about-card { display: inline-block; padding: 50px; background: #2A012B; } .about-card ul { padding-left: 0; margin-bottom: 0; } .about-card li { display: flex; margin-top: 30px; border-bottom: 2px solid rgba(255, 255, 255, 0.2); padding-bottom: 15px; } .about-card li i { display: inline-block; font-size: 60px; min-width: 85px; position: relative; top: 30px; color: rgb(255 255 255); } .about-card .fun-fact .counter { color: var(--white); line-height: 1; font-size: 50px; } .about-card .fun-fact .medium { color: var(--white); font-weight: 600; opacity: 0.8; } .about-card li:first-child { margin: 0; } .about-style-one .about-card { position: absolute; left: -80px; bottom: -80px; } .fun-factor-style-one-area { background-size: 32%; background-repeat: no-repeat; background-position: bottom right; } .fun-factor-style-one-box { position: relative; } .shape-animated-up-down { position: absolute; top: -158px; } .shape-right-bottom-extra { position: absolute; left: 6%; bottom: -60px; max-width: 10%; } /* ============================================================== # About Style Two =================================================================== */ .about-style-two .thumb { padding-left: 80px; position: relative; z-index: 1; } .about-style-two .thumb .shape { position: absolute; left: -110px; bottom: -55px; } .about-style-two .thumb .shape img { height: 100px; } .about-style-two .thumb img { border-radius: 10px; } .about-style-two .experience { position: absolute; left: 0; bottom: 50px; display: inline-block; background: var(--gradient-bg); padding: 30px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; } .about-style-two .experience h2 { font-weight: 600; margin: 0; font-size: 18px; line-height: 1; color: var(--white); } .about-style-two .experience h2 strong { font-size: 100px; display: block; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #ffffff; font-family: var(--font-secondary); font-weight: 600; } .about-style-two .thumb img:nth-child(2) { position: absolute; left: -150px; top: 0; max-width: 200px; } .flex-item { display: flex; align-items: center; margin-top: 30px; } .mail-shortcode span { display: block; line-height: 1; } .mail-shortcode { display: flex; align-items: center; border-left: 1px solid #cecece; padding-left: 30px; } .mail-shortcode i { display: inline-block; font-size: 40px; font-weight: 100; margin-right: 15px; color: var(--color-heading); } .default-feature-item { display: inline-block; } .default-feature-item img { height: 50px; } .default-feature-item a { display: block; background: #fae9e9; padding: 30px; } .bg-gray .default-feature-item a { background: var(--white); } .default-feature-item i { display: inline-block; font-size: 55px; margin-bottom: 10px; line-height: 1; color: var(--color-primary); } .default-feature-item h4 { margin: 0; font-weight: 600; } /* About Style Three */ .about-style-three .thumb { position: relative; z-index: 1; margin-bottom: 110px; } .about-style-three .thumb .sub-item img:first-child { position: absolute; left: -160px; bottom: -110px; max-width: 300px; } .about-style-three .thumb .sub-item img:nth-child(2) { position: absolute; right: -80px; bottom: -50px; max-width: 250px; } .list-item-style-two { display: flex; margin-top: 35px; position: relative; z-index: 1; overflow: hidden; } .list-item-style-two .number { display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; min-width: 50px; background: var(--dark); color: var(--white); font-weight: 600; border-radius: 50%; margin-right: 25px; } .list-item-style-two p { margin: 0; } .list-item-style-two::after { position: absolute; left: 25px; bottom: -80px; content: ""; height: 100%; width: 1px; border-left: 1px dashed #c3b9b9; z-index: -1; } .list-item-style-two:last-child::after { display: none; } .list-item-style-two h4 { font-weight: 600; } /* About Style Four */ .about-style-four .thumb img { max-width: 140%; margin-left: -40%; } .shape-light-bottom { position: relative; z-index: 1; } .shape-light-bottom::after { position: absolute; left: 0; bottom: 0; content: ""; height: 150px; width: 100%; background: var(--white); z-index: -1; } .about-style-four .thumb { position: relative; z-index: 1; padding-top: 126px; } .about-style-four .experience { position: absolute; left: 0; top: 0; height: 250px; width: 250px; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 1; } .about-style-four .experience h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--white); } .about-style-four .experience h2 strong { display: block; font-size: 42px; font-weight: 600; margin-bottom: 5px; color: var(--white); } .about-style-four .experience::after { position: absolute; right: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--color-secondary); border-radius: 50%; z-index: -1; opacity: 0.7; } .about-style-four { position: relative; } .about-style-four .fixed-text { position: absolute; left: 0; bottom: 50px; width: 150%; } .about-style-four .fixed-text h2 { color: var(--color-heading); margin: 0; font-size: 150px; font-weight: 600; line-height: 1; } .about-style-four .fun-fact { display: inline-block; margin-left: 50px; border-left: 1px solid #c6c6c6; padding-left: 50px; } .about-style-four .fun-fact:first-child { margin: 0; padding: 0; border: none; } .about-style-four .fun-fact .counter { color: var(--color-secondary); } .about-style-four .fun-fact .medium { font-size: 20px; } .company-autor { display: flex; align-items: center; justify-content: space-between; position: absolute; width: 100%; bottom: 0; } .company-autor .right-info img { height: 75px; } .company-autor .left-info { display: flex; align-items: center; } .company-autor .left-info img { height: 80px; border-radius: 50%; margin-right: 15px; } .company-autor .left-info h4 { margin: 0; font-weight: 600; margin-bottom: 2px; } .shape-right-bottom-actual { position: absolute; right: 0; bottom: 150px; max-width: 30%; } /* ============================================================== # Faq =================================================================== */ .faq-area { position: relative; z-index: 1; } .faq-sahpe img { position: absolute; left: 0; bottom: 0; z-index: -1; } .faq-sahpe img:first-child { left: auto; right: 20px; bottom: -50px; animation: fadeRightLeft 5s ease-out infinite; } .faq-sahpe img:nth-child(2) { max-width: 200px; } .faq-style-one button.accordion-button { color: var(--color-heading); font-size: 18px; font-weight: 600; padding: 25px !important; background: var(--white) !important; border-radius: 10px !important; padding-right: 60px !important; position: relative; border-radius: 10px !important; box-shadow: inherit; border-bottom: 1px solid transparent !important; } .faq-style-one button.accordion-button::after { background: transparent; content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: 100; font-size: 25px; position: absolute; top: 22px; right: 25px; } .faq-style-one button.accordion-button:not(.collapsed)::after { -webkit-transform: inherit; transform: inherit; content: "\f106"; } .faq-style-one button.accordion-button:focus { background: transparent; color: var(--color-heading); border: none; -webkit-box-shadow: inherit; box-shadow: inherit; padding-left: 0; font-weight: 600; } .faq-style-one .accordion-item { background: var(--white); border: none; margin-top: 15px; box-shadow: 0 25px 70px rgb(0 0 0 / 7%) !important; border-radius: 10px; } .faq-style-one .accordion-item:first-child { margin-top: 0; } .faq-style-one .accordion-item h2 { margin: 0; border: none; } .faq-style-one .accordion-body { padding: 30px; position: relative; z-index: 1; } .faq-style-one .accordion-body p { margin: 0; } .faq-style-one button.accordion-button strong { display: inline-block; height: 35px; width: 35px; line-height: 34px; text-align: center; border-radius: 50%; margin-right: 12px; border: 1px solid #e7e7e7; } .accordion-item .accordion-button:not(.collapsed) { background: var(--color-primary) !important; border-radius: 10px 10px 0 0 !important; color: var(--white) !important; } .secondary .accordion-item .accordion-button:not(.collapsed) { background: var(--bg-gradient-secondary) !important; } .shape-left-center { left: -200px; position: absolute; bottom: 80px; z-index: -1; } .faq-style-one { position: relative; z-index: 1; } .faq-style-one::after { position: absolute; left: -140px; top: 180px; content: ""; height: 250px; width: 250px; background: linear-gradient(-62.5deg, transparent, rgba(237, 245, 255, 0.9)); z-index: -1; border-radius: 50%; } .secondary.faq-style-one::after { left: auto; right: -100px; top: -50px; bottom: auto; height: 200px; width: 200px; background: linear-gradient(62.5deg, transparent, rgba(237, 245, 255, 0.9)); } .faq-style-one-area { background-size: 50%; background-repeat: no-repeat; background-position: left bottom; } .faq-sidebar { position: relative; z-index: 9; } .faq-sidebar-item { padding: 50px; overflow: hidden; border-radius: 7px; } .faq-sidebar-item h4 { border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 15px; font-size: 24px; font-weight: 600; margin-bottom: 25px; } .faq-sidebar-item ul { padding-left: 0; margin-bottom: 0; list-style: none; } .faq-sidebar-item li { margin-top: 7px; } /* ============================================================== # Services Style =================================================================== */ .triangle-shape { max-width: 12%; position: absolute; left: 0; top: -120px; } .service-nav-info { padding: 67px 50px; background: var(--white); margin-right: 50px; position: relative; z-index: 1; box-shadow: 0 5px 3px rgb(3 27 78 / 8%); } .service-nav-info::before { position: absolute; right: -30px; bottom: -30px; content: ""; height: 100%; width: 100%; border-right: 30px solid var(--dark); border-bottom: 30px solid var(--dark); z-index: -1; opacity: 0.06; } .service-nav-info h2 { font-weight: 600; margin: 0; } .service-nav-info h2 strong { display: inline-block; font-weight: 600; position: relative; z-index: 1; } .service-tab-navs { border: none; margin: 0; margin-top: 20px; } .service-tab-navs .nav-link { display: block; width: 100%; border: none; margin: 0; border: 2px solid #e7e7e7 !important; margin-top: 15px; border-radius: 10px; color: var(--color-heading); padding: 12px 30px; display: flex; align-items: center; justify-content: space-between; height: auto; position: relative; z-index: 1; } .service-tab-navs .nav-link.active { background: var(--dark); border-color: var(--dark) !important; color: var(--white); } .service-tab-navs .nav-link i { display: inline-block; font-size: 40px; position: relative; top: 3px; } .center-shape { position: absolute; left: 70%; top: 0; height: 100%; width: 30%; background-repeat: no-repeat; background-size: contain; } .services-style-one { position: relative; z-index: 1; } .services-style-one i { display: inline-block; font-size: 60px; margin-bottom: 30px; color: var(--color-primary); } .services-style-one p { margin: 0; } .services-tab-content { margin-top: -30px; } .service-tab-navs .nav-link::after { left: 84px; bottom: -2px; content: ""; height: 0; width: 30px; position: absolute; background: var(--color-primary); z-index: -1; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transition: all 0.35s ease-in-out; opacity: 0; } .service-tab-navs .nav-link::before { left: 100px; bottom: -2px; content: ""; height: 0; width: 40px; position: absolute; background: #a63131; z-index: -1; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transition: all 0.35s ease-in-out; opacity: 0; } .service-tab-navs .nav-link.active::after, .service-tab-navs .nav-link.active::before { opacity: 1; } .service-tab-navs .nav-link.active::after { height: 30px; } .service-tab-navs .nav-link.active::before { height: 50px; } /* ============================================================== # Services Details =================================================================== */ .services-details-area .thumb img { margin-bottom: 40px; } .services-details-area h1, .services-details-area h2, .services-details-area h3, .services-details-area h4, .services-details-area h5, .services-details-area h6 { font-weight: 600; color: var(--color-heading) !important; } .services-sidebar .single-widget.quick-contact-widget h3, .services-sidebar .single-widget.quick-contact-widget h2 { color: var(--white) !important; } .feature-list-item { margin: 0; padding: 0; list-style: none; } .feature-list-item li { position: relative; z-index: 1; padding-left: 25px; margin-top: 8px; font-weight: 500; } .feature-list-item li::after { position: absolute; left: 0; top: 1px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; color: var(--color-primary); font-weight: 500; font-size: 14px; } .quick-contact-widget { background-size: cover; position: relative; z-index: 1; padding: 60px 37px; background-position: center center; overflow: hidden; border-radius: 10px; } .quick-contact-widget .content { position: relative; z-index: 1; } .quick-contact-widget h2 { font-weight: 600; margin-bottom: 10px; margin-top: 25px; } .quick-contact-widget h4 a { font-weight: 400; border-bottom: 2px solid; } .quick-contact-widget i { display: inline-block; height: 60px; width: 60px; line-height: 60px; font-weight: 100; background: #ffffff; color: var(--color-primary); font-size: 22px; border-radius: 50%; margin-bottom: 40px; position: relative; } .quick-contact-widget i::after { position: absolute; left: -10px; top: -10px; content: ""; height: 80px; width: 80px; background: #ffffff; z-index: -1; border-radius: 50%; opacity: 0.8; } .quick-contact-widget::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--dark); z-index: -1; opacity: 0.3; border-radius: 7px; } .quick-contact-widget .btn-sm { font-size: 16px; } .services-sidebar .single-widget { margin-top: 50px; } .services-sidebar .single-widget .widget-title { display: block; font-weight: 600; margin-bottom: 30px; margin-top: -5px; position: relative; z-index: 1; display: inline-block; padding-bottom: 15px; } .services-sidebar .single-widget .widget-title::after { position: absolute; left: 10px; bottom: 0; content: ""; height: 3px; width: 50px; border-bottom: 3px solid var(--color-primary); } .services-sidebar .single-widget .widget-title::before { position: absolute; left: 0; bottom: 0; content: ""; height: 3px; width: 5px; background: var(--color-primary); } .services-sidebar .single-widget h4.widget-title { font-size: 24px; } .services-sidebar .single-widget:first-child { margin-top: 0; } .widget-brochure ul { padding-left: 0; list-style: none; } .widget-brochure ul li a { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 15px; background: #ffffff; padding: 20px 25px; border-radius: 5px; border: 2px solid #cddff7; color: var(--color-heading); } .widget-brochure ul li a:hover { color: var(--color-primary); } .widget-brochure ul li:first-child a { margin-top: 0; } .widget-brochure ul li:first-child a, .widget-brochure ul li a:hover { background: var(--color-primary); border-color: transparent; color: var(--white); } .widget-brochure ul li i { font-size: 35px; font-weight: 100; margin-right: 16px; display: inline-block; text-align: center; border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .widget-brochure ul li:hover i, .widget-brochure ul li:first-child i { color: var(--white); } @media only screen and (max-width: 767px) { .services-more .row { margin-top: -20px; } } .services-more .item { overflow: hidden; margin-top: 15px; position: relative; border-radius: 10px; } .services-more .item i::before { line-height: inherit; } @media only screen and (max-width: 767px) { .services-more .item { margin-top: 30px; padding: 50px 30px; border: 1px solid #dddddd; } } .services-more .item i { display: inline-block; font-size: 40px; margin-bottom: 30px; background: var(--color-primary); color: var(--white); height: 70px; width: 70px; text-align: center; line-height: 70px; border-radius: 50%; } .services-more .item a { color: var(--color-heading); } .services-more .item a:hover { color: var(--color-primary); } .services-more .item p { margin: 0; } .services-details-items .faq-style-one button.accordion-button::after { top: 15px; } .service-single-thumb { position: relative; z-index: 1; } .service-single-thumb img { margin-bottom: 40px; } .services-list-widget { padding: 50px; border-radius: 10px; padding-top: 60px; background: var(--bg-gray); } .services-list-widget a { display: block; padding: 10px 0; font-weight: 600; position: relative; padding-right: 50px; } .services-list-widget .current_page_item a, .services-list-widget .current-item a { color: var(--color-primary); font-weight: 600; } .services-list-widget ul { margin-bottom: 0; padding-left: 0; list-style: none; } .services-list-widget li { border-top: 1px solid rgba(0, 0, 0, 0.1); } .services-list-widget li:first-child { border: none; margin-top: -10px; } .services-list-widget a i { float: right; font-weight: 400; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .services-sidebar .single-widget.text-light .widget-title::after { border-color: var(--white); } .services-details-items img { border-radius: 10px; } .services-list-widget a::after { position: absolute; right: 0; top: 10px; content: "\f067"; font-family: "Font Awesome 5 Pro"; font-weight: 100; transition: all 0.35s ease-in-out; opacity: 0; } .services-list-widget .current_page_item a::after, .services-list-widget .current-item a::after { opacity: 1; } .dark .accordion-item .accordion-button:not(.collapsed) { background: var(--dark) !important; } /* ============================================================== # CHoose Us Style =================================================================== */ .choose-us-style-one-area { position: relative; z-index: 1; overflow: hidden; } .choose-us-style-one-area::after { position: absolute; left: -10%; top: 0; content: ""; height: 100%; width: 60%; background: var(--dark); z-index: -1; transform: skewX(-10deg); } .cover-bg { position: absolute; right: 0; top: 0; height: 100%; width: 60%; background-size: cover; background-position: center; z-index: -1; } .choose-us-style-one-area .text-invisible { position: absolute; right: 0; bottom: 30px; font-size: 140px; text-transform: uppercase; z-index: 9; font-weight: 600; opacity: 0.5; } .list-item { position: relative; padding-left: 30px; z-index: 1; margin-bottom: 0; list-style: none; } .list-item li { margin-top: 35px; } .list-item li h4 { font-weight: 600; font-size: 22px; } .choose-us-style-one p { color: #d2d2d4; margin: 0; } .list-item::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 7px; background: var(--color-primary); } .choose-us-style-one { position: relative; z-index: 1; } .choose-us-style-one .shape-circle { position: absolute; left: -80px; top: -59px; z-index: -1; } .shape-left-top img { height: 100%; } .shape-left-top { max-width: 10%; position: absolute; left: 0; top: 0; } /* ============================================================== # Process Style =================================================================== */ .large-shape { position: absolute; right: 0; top: -120px; max-width: 20%; } .process-style-one-area { background-size: cover; } .process-style-one .thumb { position: relative; z-index: 1; height: 250px; width: 250px; border-radius: 50%; overflow: hidden; margin: auto auto 30px; } .process-style-one .thumb::after { position: absolute; left: 0; bottom: -100%; content: ""; height: 100%; width: 110%; background: url(../img/shape/service_one.png); background-size: contain; background-repeat: no-repeat; background-position: center bottom; transition: all 0.35s ease-in-out; } .process-style-one .thumb::before { position: absolute; left: 0; bottom: 0; content: ""; height: 40%; width: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 130%) repeat scroll 0 0; mix-blend-mode: multiply; } .process-style-one p { margin: 0; } .process-style-one { padding: 0 30px; } .process-style-one h4 { font-weight: 600; font-size: 24px; border-bottom: 1px solid #e7e7e7; padding-bottom: 20px; } .process-style-one .thumb span { font-weight: 600; position: absolute; bottom: 4px; font-size: 80px; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #ffffff; text-transform: uppercase; font-family: Calibri; left: 55px; z-index: 1; transition: all 0.35s ease-in-out; } .process-style-one:hover .thumb::after { bottom: 0; } .active.process-style-one .thumb::after { bottom: 0; } .process-style-one img { transition: all 0.35s ease-in-out; } .active .process-style-one:hover .thumb::before { opacity: 0; } /* ============================================================== # Partner Style =================================================================== */ .partner-map { background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; z-index: 1; } .partner-map h2 { font-size: 250px; font-weight: 600; display: inline-block; line-height: 0.8; position: relative; margin-top: -10px; margin-bottom: 20px; } .partner-map h2 span { position: absolute; font-size: 40px; color: var(--color-primary); } .partner-map h4 { margin: 0; font-weight: 600; font-size: 36px; } .mask-text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: cover; background-position: center; margin: 0; line-height: 1; text-transform: capitalize; } .partner-items ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 0; position: relative; z-index: 1; overflow: hidden; text-align: center; padding-left: 0; margin-bottom: 0; list-style: none; } .partner-items ul img { width: auto; text-align: center; margin: auto; } .partner-items ul li::after { position: absolute; right: -1px; top: 0; content: ""; height: 100%; width: 1px; background: #e7e7e7; } .partner-items ul li { position: relative; padding: 30px; display: flex; align-items: center; } /* Partner Style Two */ .partner-heading { position: relative; z-index: 1; } .partner-heading::after { position: absolute; right: 0; top: -200px; content: ""; height: 500px; width: 30px; background: var(--white); transform: skewX(-10deg); } .partner-heading::before { position: absolute; right: 5px; top: -200px; content: ""; height: 500px; width: 400%; background: var(--dark); z-index: -1; transform: skewX(-10deg); } .partner-heading h3 { margin: 0; font-weight: 600; line-height: 1.3; } .partner-heading h3 strong { font-size: 36px; font-weight: 600; color: var(--color-secondary); text-decoration: underline; } .partner-shape { position: absolute; right: 0; bottom: 0; height: 100%; width: 50%; background-size: contain; background-repeat: no-repeat; z-index: -1; background-position: right bottom; } .partner-style-two-area { position: relative; z-index: 1; } /* ============================================================== # Team Style =================================================================== */ .bg-contain-center { background-size: contain; background-position: center top; background-repeat: no-repeat; } .team-style-one { margin-bottom: 50px; } .team-style-one .thumb { position: relative; overflow: hidden; margin-bottom: 20px; } .team-style-one .thumb .social { position: absolute; left: -80px; right: 50px; bottom: 0; padding: 15px; background: var(--color-primary); z-index: 1; text-align: center; transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; } .team-style-one.active .thumb .social, .team-style-one:hover .thumb .social { left: 0; opacity: 1; visibility: visible; } .team-style-one .thumb .social ul { padding-left: 0; margin-bottom: 0; list-style: none; } .team-style-one .thumb .social ul li { display: inline-block; margin: 0 15px; } .team-style-one .thumb .social ul li a { display: inline-block; color: var(--white); } .team-style-one .thumb::after { position: absolute; left: -120px; bottom: -50px; content: ""; height: 200px; width: 200px; background: var(--dark); transform: skewX(40deg); opacity: 0; transition: all 0.15s ease-in-out; visibility: hidden; } .team-style-one.active .thumb::after, .team-style-one:hover .thumb::after { opacity: 0.5; visibility: visible; bottom: 0; transition-delay: 200ms; } .team-style-one .thumb::before { position: absolute; right: -99px; bottom: -100px; content: ""; height: 200px; width: 130px; background: var(--color-primary); opacity: 0; visibility: hidden; transform: skewX(-40deg); transition: all 0.35s ease-in-out; } .team-style-one.active .social, .team-style-one:hover .social { left: 0; opacity: 1; visibility: visible; } .team-style-one.active .thumb::before, .team-style-one:hover .thumb::before { opacity: 0.5; visibility: visible; bottom: 0; transition-delay: 400ms; transition-duration: 200ms; } .team-style-one h4 { margin: 0; } .secondary .team-style-one h4 a:hover { color: var(--color-secondary); } /* Team Style Two */ .team-style-two-area { background-repeat: no-repeat; background-position: left bottom; } .team-style-two .info { padding: 30px; position: relative; max-width: 85%; } .team-style-two .title { font-size: 24px; margin-bottom: 5px; } .secondary .team-style-two .title a:hover { color: var(--color-secondary); } .team-style-two .thumb { padding-left: 70px; position: relative; z-index: 1; } .team-style-two .thumb::after { position: absolute; left: 25px; top: 0; content: ""; height: 0; width: 20px; background: var(--color-primary); border-radius: 10px; transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; } .secondary .team-style-two .thumb::after { background: var(--color-secondary); } .team-style-two:hover .thumb::after { height: 50%; opacity: 1; visibility: visible; } .team-style-two .info::after { position: absolute; left: 0; bottom: 0; content: ""; height: 150%; width: 100%; background: var(--white); z-index: -1; border-radius: 10px; box-shadow: 0 5px 3px rgb(3 27 78 / 8%); } .team-style-two .thumb img { border-radius: 10px; } .team-style-two .social { display: inline-block; position: absolute; left: 15px; bottom: 0; padding-left: 0; margin-bottom: 0; list-style: none; } .team-style-two .social a { display: block; height: 40px; width: 40px; line-height: 40px; text-align: center; background: var(--color-secondary); color: var(--white); border-radius: 50%; margin-top: 10px; } .team-style-two .social li { transition: all 0.35s ease-in-out; transform: translateY(10px); opacity: 0; visibility: hidden; } .team-style-two .social li:nth-child(2) { transform: translateY(20px); } .team-style-two .social li:first-child { transform: translateY(30px); } .team-style-two:hover .social li { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 20ms; } .team-style-two:hover .social li:nth-child(2) { transform: translateY(0); transition-delay: 30ms; } .team-style-two:hover .social li:first-child { transform: translateY(0); transition-delay: 40ms; } .team-style-two .social li.facebook a { background: #3B5998; } .team-style-two .social li.twitter a { background: #1DA1F2; } .team-style-two .social li.pinterest a { background: #E60023; } .team-style-two .social li.g-plus a { background: #DB4437; } .team-style-two .social li.linkedin a { background: #0077B5; } .team-style-two .social li.dribbble a { background: #ea4c89; } /* ============================================================== # Team Single =================================================================== */ .team-single-area .team-content-top { bottom: -50px; margin-top: -50px; position: relative; z-index: 1; } .team-single-area .team-content-top .right-info { padding-left: 35px; padding-right: 50px; margin-bottom: 50px; } .team-single-area .team-content-top .right-info h2 { font-weight: 600; } .team-single-area .team-content-top .right-info span { display: block; text-transform: uppercase; color: var(--color-primary); font-weight: 600; margin-bottom: 25px; } .team-single-area .right-info ul { margin-top: 25px; border-top: 1px solid #e7e7e7; padding-top: 17px; padding-left: 0; margin-bottom: 0; list-style: none; } .team-single-area .right-info ul li { margin-top: 10px; color: var(--color-heading); } .team-single-area .right-info ul li strong { font-weight: 600; } .team-single-area .right-info ul li a { font-weight: 400; } .team-single-area .right-info ul li a:hover { color: var(--color-primary); } .team-single-area .right-info .social { display: flex; margin-top: 25px; font-weight: 600; align-items: center; } .team-single-area .right-info .social h4 { font-weight: 600; margin-bottom: 0; margin-right: 25px; } .team-single-area .right-info .social ul { margin: 0; padding: 0; border: none; } .team-single-area .right-info .social .share-link { position: relative; z-index: 1; margin-left: 15px; padding-right: 20px; } .team-single-area .right-info .social .share-link>i { display: inline-block; height: 45px; background: var(--white); box-shadow: 0 0 10px #cccccc; line-height: 45px; width: 45px; text-align: center; border-radius: 50%; cursor: pointer; color: var(--color-primary); } .team-single-area .right-info .social ul { display: flex; list-style-type: none; grid-gap: 10px; padding: 0; margin: 0; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0; pointer-events: none; transition: all 0.3s ease-in-out 0s; } .team-single-area .right-info .social .share-link:hover ul { left: 58px; opacity: 1; pointer-events: auto; } .team-single-area .right-info .social ul li { display: inline-block; margin: 0; } .team-single-area .right-info .social ul li a { display: inline-block; height: 45px; width: 45px; line-height: 47px; background: #f1f1f1; text-align: center; border-radius: 50%; } .team-single-area .bottom-info h2 { font-weight: 600; margin-bottom: 25px; } .team-single-area .bottom-info p:last-child { margin-bottom: 0; } .team-single-area .bottom-info .skill-items { padding-left: 35px; } .skill-items .progress-box { margin-bottom: 35px; } .team-single-area .team-content-top img { border-radius: 30px; } .skill-items .progress-box:last-child { margin-bottom: 0; } .skill-items .progress-box h5 { text-transform: capitalize; font-weight: 600; margin-bottom: 5px; text-align: left; position: relative; z-index: 1; font-size: 16px; } .skill-items .progress-box h5 span { position: absolute; font-size: 50px; line-height: 1; top: -21px; left: 0; z-index: -1; opacity: 0.05; font-weight: 600; } .skill-items .skill-items { margin-top: 40px; } .skill-items .progress-box .progress { background: transparent; border-bottom: none; box-shadow: inherit; border-radius: inherit; overflow: inherit; } .skill-items .progress-box .progress .progress-bar { height: 6px; border-radius: 30px; background: var(--bg-gradient); top: 12px; position: relative; overflow: inherit; } .skill-items .progress-box .progress .progress-bar span { position: absolute; right: 0; top: -40px; display: block; font-size: 17px; color: var(--color-heading); font-weight: 700; } .team-single-list { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; } .team-list-item h4 { font-weight: 600; margin-bottom: 30px; font-size: 28px; } .team-list-item h5 { font-weight: 600; margin-bottom: 8px; } .team-list-item span { text-transform: none; margin-bottom: 5px; color: var(--color-heading); display: block; } .team-list-item li { margin-top: 30px; } .team-list-item li:first-child { margin-top: 0; } .team-single-list ul { border: none; margin-top: 0; padding: 0; margin-bottom: 0; list-style: none; } .skill-items h3 { font-weight: 600; margin-bottom: 30px; } .team-list-item ul { border-left: 1px solid; padding-left: 25px; } .team-list-item ul li { position: relative; z-index: 1; } .team-list-item ul li::after { position: absolute; left: -33px; top: 3px; content: ""; height: 15px; width: 15px; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--white); } /* ============================================================== # Pricing Style =================================================================== */ .pricing-style-one { border: 1px solid #e7e7e7; position: relative; z-index: 1; border-radius: 10px; } .pricing-style-one .pricing-header { padding-bottom: 30px; border-bottom: 1px solid #e7e7e7; position: relative; } .pricing-style-one .pricing-content { padding-top: 25px; } .pricing-style-one .pricing-header h4 { font-weight: 600; } .pricing-style-one .pricing-header span { text-transform: uppercase; font-size: 14px; position: absolute; right: 30px; background: var(--white); bottom: -14px; padding: 0 19px; color: var(--color-heading); font-weight: 500; } .pricing-style-one { background-size: 200px; background-repeat: no-repeat; background-position: right bottom; padding: 50px 30px; } .pricing-style-one .pricing-header p { margin: 0; } .pricing-style-one .pricing-content h2 { font-weight: 600; font-size: 42px; } .pricing-style-one .pricing-content h2 strong { font-weight: 600; color: var(--color-primary); } .secondary .pricing-style-one .pricing-content h2 strong { color: var(--color-secondary); } .pricing-style-one .pricing-content h2 sub { font-size: 15px; font-weight: 400; left: -5px; } .pricing-style-one .pricing-content h2 sup { font-size: 25px; top: -18px; } .pricing-style-one .pricing-content ul { padding-left: 0; margin-bottom: 0; list-style: none; } .pricing-style-one .pricing-content li { margin-top: 6px; font-size: 15px; display: flex; align-items: center; } .pricing-style-one .pricing-content li i { color: var(--color-primary); margin-right: 8px; font-size: 17px; } .secondary .pricing-style-one .pricing-content li i { color: var(--color-secondary); } .pricing-style-one .pricing-content li i.fa-times-circle { font-weight: 100; } .pricing-style-one .pricing-content a { display: block; } .pricing-style-one.active { border: 2px solid var(--color-primary); } .secondary .pricing-style-one.active { border: 2px solid var(--color-secondary); } .pricing-style-one.active .pricing-header { border-bottom: 1px solid var(--color-secondary); } .pricing-badge { position: absolute; right: -75px; top: -80px; } .pricing-badge h5 { display: inline-block; margin: 0; font-weight: 600; } .pricing-badge img { height: 40px; transform: rotate(5deg); display: block; } /* ============================================================== # Project Style =================================================================== */ .bottom-shape-light { position: relative; z-index: 1; } .bottom-shape-light::after { position: absolute; left: 0; top: 409px; content: ""; bottom: 0; right: 0; background: var(--white); z-index: -1; } .project-style-one-carousel .swiper-wrapper { padding-bottom: 1px; } .project-style-one .info { background: var(--white); padding: 80px; margin-top: 80px; position: relative; left: -80px; margin-right: -80px; border: 1px solid #e7e7e7; border-top: none; } .project-style-one .info > span { display: block; text-transform: uppercase; color: var(--color-primary); font-weight: 600; margin-bottom: 10px; } .project-style-one h3 { margin-bottom: 25px; } .project-swiper-nav { position: absolute; right: 0; top: 20px; display: flex; width: 200px; justify-content: space-between; align-items: center; } .project-swiper-nav > div { height: 40px; width: 40px; background: var(--color-primary); z-index: 9; position: relative; border-radius: 50%; } .project-swiper-nav > div::after { position: absolute; top: 7px; content: ""; height: 100%; width: 100%; font-family: "Font Awesome 5 Pro"; text-align: center; color: var(--white); } .project-swiper-nav .project-button-next::after { content: "\f105"; } .project-swiper-nav .project-button-prev::after { content: "\f104"; } .project-style-one-carousel { padding-top: 120px; margin-top: -120px; } .project-swiper-nav .project-pagination { background: transparent; position: absolute; line-height: 40px; color: var(--white); font-size: 24px; width: auto; font-weight: 600; left: 50%; transform: translateX(-50%); top: 0; } /* ============================================================== # Gallery =================================================================== */ .magnific-mix-gallery { margin: -15px; overflow: hidden; } .gallery-items.colums-3 .gallery-item { float: left; padding: 15px; width: 33.3333%; } .gallery-items.colums-2 .gallery-item { float: left; padding: 15px; width: 50%; } .gallery-items.colums-4 .gallery-item { float: left; padding: 15px; width: 25%; } /* Mobile Layout: 320px. */ @media only screen and (max-width: 767px) { .gallery-items.colums-2 .gallery-item, .gallery-items.colums-3 .gallery-item, .gallery-items.colums-4 .gallery-item { width: 100%; padding-left: 0; padding-right: 0; } } /* Max Wide Mobile Layout: 600px. */ @media only screen and (min-width: 600px) and (max-width: 1200px) { /* Portfolio */ .gallery-items.colums-4 .gallery-item { width: 50%; } } .gallery-style-two { position: relative; z-index: 1; overflow: hidden; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .gallery-style-two .content-inner { display: inline-block; position: relative; top: -80px; margin-bottom: -80px; overflow: hidden; border-radius: 0 10px 10px; margin-right: 30px; } .gallery-style-two .overlay { display: flex; justify-content: space-between; bottom: 30px; padding: 30px; background: var(--white); border-radius: 10px; transition: all 0.35s ease-in-out; position: absolute; z-index: 1; transform: translateX(60px); opacity: 0; visibility: hidden; text-align: left; } .gallery-item .gallery-style-two:hover .overlay, .gallery-item.active .overlay { opacity: 1; visibility: visible; transform: translateX(0); } .gallery-item .gallery-style-two:hover .shape, .gallery-item.active .shape { bottom: 0; opacity: 1; visibility: visible; transition-delay: 300ms; } .gallery-style-two .overlay span { display: inline-block; margin-bottom: 5px; } .gallery-style-two h4 { margin: 0; } .gallery-style-two .overlay .link { position: absolute; right: -100px; background: var(--color-primary); height: 100%; top: 0; width: 80px; text-align: center; color: var(--white); opacity: 0; visibility: hidden; } .gallery-style-two .overlay .link i { position: absolute; top: 50%; transform: translateY(-50%); font-size: 20px; margin-left: -10px; } .gallery-style-two:hover .overlay .link, .gallery-style-two.active .overlay .link { right: -80px; opacity: 1; visibility: visible; } .gallery-style-two .shape { position: absolute; left: 0; bottom: -30%; max-width: 50%; transition: all 0.20s ease-in-out; opacity: 0; visibility: hidden; } .gallery-style-two .shape img { height: 100%; } .gallery-style-two > img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .gallery-style-two:hover > img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .load-more-info p { margin-bottom: -5px; } .load-more-info a { text-decoration: underline; font-weight: 600; color: var(--color-primary); } .secondary.load-more-info a { color: var(--color-secondary); } .load-more-info { display: inline-block; border: 1px dashed; padding: 10px 20px; padding-bottom: 15px; border-radius: 30px; } /* Gallery Style Three */ .gallery-style-three .thumb { overflow: hidden; position: relative; z-index: 1; } .gallery-style-three .thumb .item.popup-gallery { position: absolute; left: 50%; top: 50%; content: ""; height: 55px; width: 55px; text-align: center; line-height: 55px; transform: translate(-50%, -50%) scale(0); background: var(--color-secondary); color: var(--white); border-radius: 50%; z-index: 1; } .gallery-style-three .thumb .item.popup-gallery i { font-weight: 100; } .gallery-style-three:hover .thumb .item.popup-gallery { transform: translate(-50%, -50%) scale(1); transition: all 0.45s ease-in-out; } .gallery-style-three .overlay { margin-top: 20px; text-align: left; } .gallery-style-three .overlay h4 { margin: 0; font-size: 22px; } .gallery-style-three .overlay a:hover { color: var(--color-secondary); } .gallery-style-three .overlay span { display: block; margin-bottom: 2px; } .gallery-style-three .thumb::after { position: absolute; left: -200%; top: 0; content: ""; height: 200%; width: 150%; background: #000000; transform: skewX(-53deg); transition: all 0.25s ease-in-out; opacity: 0; visibility: hidden; } .gallery-style-three .thumb::before { position: absolute; right: -70%; top: 0; content: ""; height: 200%; width: 150%; background: #000000; transform: skewX(-53deg); transition: all 0.25s ease-in-out; opacity: 0; visibility: hidden; } .gallery-style-three:hover .thumb::after { opacity: 0.7; visibility: visible; left: -150%; } .gallery-style-three:hover .thumb::before { opacity: 0.7; visibility: visible; right: -50%; } /* ============================================================== # Project Details =================================================================== */ .project-details-area .top-info { position: relative; margin-top: 50px; } .project-details-area .top-info p:last-child { margin-bottom: 0; } .project-details-area .main-content { margin-top: 30px; } .project-details-area .main-content h2, .project-details-area .main-content h3, .project-details-area .main-content h4, .project-details-area .main-content h5 { font-weight: 600; margin-bottom: 25px; } .project-details-area .main-content .row img { margin-top: 30px; } .project-details-area .top-info h2 { font-weight: 600; color: var(--color-heading); } .project-info { background: #efefef; padding: 50px; margin-bottom: 20px; border-top: 3px solid var(--color-primary); background-size: 70%; background-repeat: no-repeat; background-position: right bottom; } .project-info .title { font-weight: 600; margin-bottom: 25px; position: relative; z-index: 1; margin-top: -5px; font-size: 26px; color: var(--color-primary); } .project-info ul { padding-left: 0; list-style: none; margin: 0; } .project-info ul li { font-weight: 600; font-size: 18px; color: var(--color-heading); margin-top: 15px; } .project-info ul li:first-child { border: none; margin-top: 0; padding-top: 0; } .project-info ul li span { font-weight: 400; position: relative; display: block; font-family: var(--font-default); font-size: 16px; color: var(--color-paragraph); } .project-info ul.social { margin-top: 25px; } .project-info ul.social li { display: inline-block; margin: 0; margin-right: 10px; margin-top: 5px; } .project-info ul.social li a { display: inline-block; border-radius: 50%; font-size: 16px; font-weight: 100; color: var(--white); height: 40px; width: 40px; text-align: center; line-height: 43px; background: var(--dark); } .project-info ul.social li a:hover { background: var(--color-primary); } .project-info ul.social li:last-child { margin-right: 0; } ul.check-list { list-style: none; padding-left: 0; margin-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 30px; margin-top: 30px; } ul.check-list h4 { font-weight: 600; } ul.check-list li { position: relative; z-index: 1; padding-left: 35px; } ul.check-list li::after { position: absolute; left: 0; top: 0; content: "\f058"; font-family: "Font Awesome 5 Pro"; font-size: 20px; color: var(--color-primary); font-weight: 600; } /* ============================================================== # Call Back Style =================================================================== */ .request-call-back-area { position: relative; z-index: 1; background-size: cover; background-position: center; } .request-call-back-area::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--color-primary); mix-blend-mode: multiply; z-index: -1; } .request-call-back-area.secondary::after { background: var(--color-secondary); } .achivement-counter ul { padding-left: 0; margin-bottom: 0; list-style: none; } .achivement-counter li { display: flex; margin-top: 50px; align-items: center; } .achivement-counter .fun-fact .counter { color: var(--white); font-size: 60px; } .achivement-counter .fun-fact .medium { color: var(--white); font-weight: 500; } .achivement-counter { display: inline-block; border-left: 1px solid rgba(255, 255, 255, 0.3); padding-left: 50px; } .achivement-counter li:first-child { margin: 0; } .achivement-counter li i { display: inline-block; font-size: 60px; margin-right: 20px; margin-top: 5px; } /* SEO Form */ form.seo-form { position: relative; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 30px; } form.seo-form input, form.seo-form input:focus { background: transparent; border: none; color: var(--white); box-shadow: inherit; border-radius: inherit; min-height: 60px; padding: 0 30px; } form.seo-form button { position: absolute; right: 5px; top: 5px; min-height: 50px; min-width: 100px; border-radius: 30px; background: var(--color-secondary); color: var(--white); border: none; } form.seo-form input[type="email"] { border-left: 1px solid rgba(255, 255, 255, 0.5); padding-right: 100px; } form.seo-form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--white); } form.seo-form input::-moz-placeholder { /* Firefox 19+ */ color: var(--white); } form.seo-form input:-ms-input-placeholder { /* IE 10+ */ color: var(--white); } form.seo-form input:-moz-placeholder { /* Firefox 18- */ color: var(--white); } /* ============================================================== # Marketing Types =================================================================== */ .marketing-types { height: 600px; width: 600px; margin: 50px auto; border: 1px solid var(--color-secondary); border-radius: 50%; position: relative; z-index: 1; } .marketing-types::after { position: absolute; left: -50px; top: -50px; content: ""; height: 700px; width: 700px; border: 2px dashed #e7e7e7; border-radius: 100%; z-index: -1; animation: spinnerReverse 40s infinite linear; } .marketing-types { height: 600px; width: 600px; margin: 50px auto; border: 1px solid #c4c9d3; border-radius: 50%; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px; } .marketing-types img { position: absolute; left: 50%; bottom: 0; height: 40%; transform: translateX(-50%); opacity: 0.03; } .marketing-types h2 { font-weight: 600; } .marketing-types h2 strong { color: var(--color-secondary); font-weight: 600; } .types-list { display: grid; grid-template-columns: 1fr 1fr; text-align: left; grid-column-gap: 30px; margin-top: 30px; border-top: 1px dashed #d6d1d1; padding-top: 25px; padding-left: 0; margin-bottom: 0; list-style: none; } .types-list li { font-weight: 500; position: relative; z-index: 1; padding-left: 25px; line-height: 35px; color: var(--color-heading); } .types-list li::after { position: absolute; left: 0; top: 0; content: "\f058"; font-family: "Font Awesome 5 Pro"; color: var(--color-secondary); } .marketing-types::before { position: absolute; left: 50%; transform: translateX(-50%); content: ""; height: 200px; width: 300px; background: #ffffff; top: -120px; filter: blur(20px); } .blur-shape { position: absolute; left: 50%; transform: translateX(-50%); content: ""; height: 200px; width: 300px; background: #ffffff; bottom: -120px; filter: blur(20px); } .marketing-types i { position: absolute; color: var(--color-secondary); height: 85px; width: 85px; line-height: 85px; background: var(--white); box-shadow: rgb(0 0 0 / 5%) 0px 10px 30px 0px; border-radius: 50%; font-size: 35px; animation: UpDown 5s linear infinite; } .marketing-types i:first-child { left: -35px; top: 50%; } .marketing-types i:nth-child(2) { bottom: -65px; z-index: 1; margin-left: -30px; animation: UpDown 6s linear infinite; } .marketing-types i:nth-child(3) { right: 20px; animation: UpDown 4s linear infinite; } .marketing-types i:nth-child(4) { top: 30%; right: -90px; animation: UpDown 9s linear infinite; } /* ============================================================== # Testimonail Style =================================================================== */ .testimonial-thumb .thumb-item { overflow: hidden; border-radius: 0 0 480px 485px; } .testimonial-thumb { position: relative; z-index: 1; } .testimonial-thumb::after { position: absolute; left: 50%; bottom: 5px; content: ""; height: 400px; width: 400px; transform: translateX(-50%); background: linear-gradient(90deg, var(--dark) 0%, var(--color-primary) 100%); z-index: -1; border-radius: 50%; } .secondary .testimonial-thumb::after { background: linear-gradient(90deg, var(--dark) 0%, var(--color-secondary) 100%); } .testimonial-thumb .mini-shape { position: absolute; right: -50px; top: 30%; } .testimonial-style-one p { font-size: 25px; line-height: 1.5; } .testimonial-style-one h4 { margin-bottom: 7px; font-weight: 600; } .testimonial-style-one .provider { border-top: 2px solid var(--dark); margin-top: 25px; display: flex; align-items: center; padding-top: 30px; } .testimonial-style-one .provider i { display: inline-block; font-size: 80px; transform: rotate(180deg); color: var(--dark); margin-right: 18px; position: relative; top: -10px; } .testimonial-style-one .rating { color: var(--color-primary); display: block; margin-bottom: 10px; } .testimonial-style-one h2 { font-weight: 600; margin-bottom: 20px; } /* Testimonial Style Two */ .testimonials-style-two-area { background-size: contain !important; background-position: left top !important; background-repeat: no-repeat !important; } .testimonial-style-two { padding: 50px; background: var(--white); border-radius: 10px; transition: all 0.35s ease-in-out; position: relative; box-shadow: 0 5px 3px rgb(3 27 78 / 8%); } .testimonial-style-two > img { height: 50px; position: absolute; right: 50px; top: 80px; opacity: 0.04; } .testimonial-style-two .provider { display: flex; align-items: center; padding-top: 20px; justify-content: space-between; border-top: 1px solid #e7e7e7; margin-top: 20px; transition: all 0.35s ease-in-out; } .testimonial-style-two .provider h4 { margin: 0; font-weight: 600; margin-bottom: 7px; } .testimonial-style-two p { margin: 0; } .testimonial-style-two .provider i { color: #ffb300; } .testimonial-style-two-carousel .swiper-slide { margin-top: 50px; transition: all 0.35s ease-in-out; } .testimonial-style-two-carousel .swiper-slide.swiper-slide-active { margin: 0; } .testimonial-style-two-carousel .swiper-slide.swiper-slide-active .item { padding: 80px 50px; } .testimonial-style-two-carousel .swiper-slide.swiper-slide-active .testimonial-style-two { padding: 75px 50px; } .testimonial-style-two .top-info { margin-bottom: 30px; } .testimonial-style-two .top-info h3 { font-weight: 600; } .testimonial-style-two .top-info i { color: #ffb300; } .half-shape-light-bottom { position: relative; z-index: 1; } .half-shape-light-bottom::after { position: absolute; left: 0; bottom: 0; content: ""; height: 235px; width: 100%; background: var(--bg-gray); z-index: -1; } .testimonial-style-two-carousel .swiper-pagination { margin-bottom: -13px; } .testimonial-style-two-carousel { padding-bottom: 80px; } .testimonial-style-two-carousel .swiper-slide.swiper-slide-active .testimonial-style-two .provider { border-top: 1px solid var(--color-heading); } .testimonial-style-two-carousel .swiper-pagination .swiper-pagination-bullet { height: 22px; width: 22px; background: transparent; border: 2px solid var(--color-heading); position: relative; z-index: 1; } .testimonial-style-two-carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 2px solid var(--color-primary); } .testimonial-style-two-carousel .swiper-pagination .swiper-pagination-bullet::after { position: absolute; left: 50%; top: 50%; content: ""; height: 5px; width: 5px; transform: translate(-50%, -50%); background: var(--color-heading); border-radius: 50%; } .testimonial-style-two-carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { background-color: var(--color-primary); } /* ============================================================== # Features Style =================================================================== */ .half-angle-shape { position: relative; z-index: 1; overflow: hidden; } .half-angle-shape::after { position: absolute; left: -5%; top: 0; content: ""; height: 100%; width: 50%; background: var(--dark); z-index: -1; transform: skewX(-10deg); } .feature-style-one-heading { position: relative; z-index: 1; } .feature-style-one-heading .arrow-shape { position: absolute; right: -110px; top: -50px; height: 50px; } .feature-style-one-heading .arrow-shape img { height: 100%; } .feature-style-one-heading ul { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; } .feature-style-one-heading ul li .counter { color: var(--white); font-size: 60px; } .feature-style-one-heading ul li .medium { color: var(--white); opacity: 0.9; font-weight: 500; } .feature-style-one-heading ul li { margin-bottom: 30px; } .circle-progress .circle { display: inline-block; position: relative; } .circle-progress .circle strong { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 600; color: var(--white); } .circle-progress { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; } .circle-progress .progressbar { margin-top: 20px; } .circle-progress .progressbar h4 { margin: 0; font-weight: 600; margin-top: 10px; } .feature-style-one-heading.text-light p { opacity: 0.9; } .feature-style-one-area { background-repeat: no-repeat; background-position: left top; } .shape-left-top-max { position: absolute; left: 2%; width: 80px; top: -20px; opacity: 0.2; } .shape-left-top-max img { height: 100%; } .feature-style-one { margin-top: 40px; display: flex; border-top: 1px solid #e7e7e7; padding-top: 40px; } .feature-style-one:first-child { margin-top: 0; padding-top: 0; border: none; } .feature-style-one > i { display: inline-block; font-size: 60px; color: var(--color-primary); margin-bottom: 30px; line-height: 50px; } .feature-style-one h4 { font-weight: 600; text-transform: capitalize; } .feature-style-one ul { list-style: none; margin: 0; padding: 0; margin-top: 24px; } .feature-style-one i::before { line-height: 1; } .feature-style-one p { margin: 0; } .feature-link-list li { border-top: 1px solid #e7e7e7; overflow: hidden; transition: all 0.35s ease-in-out; } .feature-link-list li:hover { border-color: transparent; } .feature-link-list li:first-child { border: none; } .feature-link-list li a { display: block; padding: 10px 20px; position: relative; z-index: 1; } .feature-link-list li a::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 80%; background: var(--color-primary); z-index: -1; transition: all 0.35s ease-in-out; visibility: hidden; opacity: 0; clip-path: polygon(95% 0, 100% 28%, 100% 100%, 0 100%, 0 0); } .feature-link-list li a:hover { color: var(--white); } .feature-link-list li i { left: 20px; display: inline-block; transition: all 0.35s ease-in-out; position: absolute; top: 18px; opacity: 0; visibility: hidden; font-weight: 500; font-size: 14px; } .feature-link-list li a:hover i, .feature-link-list li:first-child a i { left: 20px; opacity: 1; visibility: visible; color: var(--white); } .feature-link-list li a:hover, .feature-link-list li:first-child a { padding-left: 44px; color: var(--white); } .feature-link-list li:first-child a::after, .feature-link-list li a:hover::after { opacity: 1; visibility: visible; width: 100%; } .feature-link-list li a:hover::after { background: var(--dark); } .feature-style-one .icon { margin-right: 20px; position: relative; z-index: 1; } .feature-style-one .icon i { display: inline-block; font-size: 50px; position: relative; z-index: 1; height: 100px; width: 100px; text-align: center; line-height: 80px; color: var(--white); border-radius: 5px; } .feature-style-one .icon i::after { position: absolute; right: 7px; top: 0; content: ""; height: 100%; width: 100%; background: url(../img/shape/feature_icon.png); background-size: contain; background-repeat: no-repeat; background-position: top left; z-index: -1; } .feature-style-one > img { height: 80px; margin-bottom: 30px; } .feature-style-one .icon img { width: 220px; } /* Feature Style Two */ .shape-right-bottom { max-width: 20%; position: absolute; right: -10%; bottom: -80px; z-index: 1; } .shape-right-bottom img { width: 100%; } .feature-style-two-area { background-position: left bottom; background-repeat: no-repeat; background-size: 30%; overflow: hidden; } .feature-style-two img { height: 100px; margin-bottom: 30px; } .feature-style-two { padding: 60px 37px; box-shadow: rgb(0 0 0 / 5%) 0px 10px 30px 0px; border-radius: 10px; background: var(--white); position: relative; z-index: 9; } .feature-style-two h4 { font-size: 22px; } .feature-style-two a:hover { color: var(--color-secondary); } .feature-style-two p { margin: 0; } /* Feature Style Three */ .feature-style-three { background: var(--white); overflow: hidden; } .feature-style-three .info { padding: 0 30px; position: relative; top: -50px; z-index: 1; margin-bottom: -50px; } .feature-style-three i { display: inline-block; font-size: 36px; height: 80px; width: 80px; color: var(--white); text-align: center; line-height: 80px; position: relative; z-index: 1; margin-bottom: 30px; } .feature-style-three p { margin: 0; } .feature-style-three h4 { font-size: 24px; font-weight: 600; } .feature-style-three i::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--color-secondary); z-index: -1; border-radius: 10px; } .feature-style-three-area .row > div:nth-child(2) i::after { background: #FF4ACC; } .feature-style-three-area .row > div:nth-child(3) i::after { background: #1EE6C2; } .feature-style-three .thumb { position: relative; z-index: 1; } .feature-style-three .thumb::after { position: absolute; left: -20%; bottom: -35px; content: ""; height: 70px; width: 140%; background: var(--white); filter: blur(10px); } .feature-style-three .thumb img { border-radius: 10px 10px 0 0; } /* ============================================================== # Services Style =================================================================== */ .services-style-two .thumb { position: relative; z-index: 1; } .services-style-two .thumb .title { position: absolute; left: 0; bottom: -21px; z-index: 1; } .services-style-two .thumb .title::after { position: absolute; right: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--dark); z-index: -1; transform: skewX(-10deg); box-shadow: 0 5px 3px rgb(3 27 78 / 8%); } .services-style-two .thumb .title a { display: flex; align-items: center; } .services-style-two .thumb .title h4 { margin: 0; padding: 0 25px; font-weight: 600; color: #fff; } .services-style-two .thumb .title i { display: inline-block; height: 75px; width: 85px; text-align: center; line-height: 70px; position: relative; z-index: 1; color: var(--white); } .services-style-two .thumb .title i::after { position: absolute; right: 0; top: 0; content: ""; height: 100%; width: 100px; background: var(--color-primary); z-index: -1; transform: skewX(-10deg); } .services-style-two .info { padding: 30px; padding-top: 65px; padding-bottom: 50px; } .services-style-two .info p { margin: 0; } .services-style-two { overflow: hidden; background: #ffffff; border-radius: 15px; } .services-style-two .button { display: table; margin-top: 20px; position: relative; z-index: 1; } .services-style-two .button a, .services-style-two .button .devider { display: table-cell; } .services-style-two .button a { width: 1%; white-space: nowrap; padding-right: 15px; text-transform: uppercase; font-weight: 600; } .services-style-two .button .devider { border-top: 2px solid #e5e5e5; bottom: -14px; position: relative; z-index: 1; } .services-style-two .button .devider::after { position: absolute; left: 0; top: -2px; content: ""; height: 2px; width: 50%; background: var(--color-primary); transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; } .services-style-two:hover .button .devider::after, .services-style-two.active .button .devider::after { opacity: 1; visibility: visible; width: 100%; } .services-style-two:hover .button a { color: var(--color-primary); } /* ============================================================== # Services Style Three =================================================================== */ .services-style-three i { display: inline-block; font-size: 35px; margin-bottom: 30px; background: linear-gradient(90deg, #00efff 0%, var(--color-secondary) 100%); font-weight: 100; height: 90px; width: 90px; line-height: 86px; text-align: center; color: var(--white); border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 5px 25px 0 rgb(0 0 0 / 9%); } .services-style-three { background: var(--bg-gray); } .services-style-three .info { padding: 60px 37px; } .services-style-three .info p { margin: 0; } .services-style-three a:hover { color: var(--color-secondary); } .services-style-three ul li { font-weight: 500; line-height: 2; position: relative; z-index: 1; padding-left: 22px; } .services-style-three ul li::after { position: absolute; left: 0; top: 50%; content: "\f058"; font-family: "Font Awesome 5 Pro"; transform: translateY(-50%); margin-top: 1px; font-weight: 600; color: var(--color-secondary); font-size: 14px; } .services-carousel .swiper-pagination { margin-bottom: -7px; } .services-carousel { padding-bottom: 80px; } .services-carousel .swiper-pagination .swiper-pagination-bullet { height: 22px; width: 22px; background: transparent; border: 2px solid var(--white); position: relative; z-index: 1; } .services-carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 2px solid var(--color-secondary); } .services-carousel .swiper-pagination .swiper-pagination-bullet::after { position: absolute; left: 50%; top: 50%; content: ""; height: 5px; width: 5px; transform: translate(-50%, -50%); background: var(--white); border-radius: 50%; } .services-carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { background-color: var(--color-secondary); } .half-bg-dark { position: relative; z-index: 1; } .half-bg-dark::after { position: absolute; left: 0; bottom: 0; content: ""; height: 30%; width: 100%; background: var(--dark); z-index: -1; } .services-swiper-nav { position: absolute; left: 50%; bottom: 0; display: flex; width: 200px; justify-content: space-between; align-items: center; transform: translateX(-50%); } .services-swiper-nav > div { height: 40px; width: 40px; border: 1px solid rgba(255, 255, 255, 0.3); z-index: 9; position: relative; border-radius: 50%; line-height: 25px; } .services-swiper-nav > div::after { position: absolute; top: 7px; content: ""; height: 100%; width: 100%; font-family: "Font Awesome 5 Pro"; text-align: center; color: var(--white); } .services-swiper-nav .services-button-next::after { content: "\f105"; } .services-swiper-nav .services-button-prev::after { content: "\f104"; } .services-style-one-carousel { padding-top: 120px; margin-top: -120px; } .services-swiper-nav .services-pagination { background: transparent; position: absolute; line-height: 40px; color: var(--white); font-size: 24px; width: auto; font-weight: 600; left: 50%; transform: translateX(-50%); top: 0; border: none; } /* ============================================================== # Estimate Form Style =================================================================== */ .esitmate-form input, .esitmate-form .nice-select, .esitmate-form input:focus { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); padding: 15px; color: var(--white); border-radius: inherit; box-shadow: inherit; } .esitmate-form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #969292; } .esitmate-form input::-moz-placeholder { /* Firefox 19+ */ color: #969292; } .esitmate-form input:-ms-input-placeholder { /* IE 10+ */ color: #969292; } .esitmate-form input:-moz-placeholder { /* Firefox 18- */ color: #969292; } .esitmate-form .nice-select .current { color: #969292; } .esitmate-form .form-group { margin-bottom: 15px; } .estimate-style-one .sub-title { background-clip: text; -webkit-text-fill-color: transparent; background: linear-gradient(90deg, var(--color-secondary) 40%, #00d7ff 100%); -webkit-background-clip: text; } .esitmate-form input, .esitmate-form .nice-select .list li { color: var(--color-heading); } .esitmate-form .nice-select { padding: 0 15px; } .esitmate-form .nice-select::after { border-color: var(--white); width: 10px; height: 10px; right: 15px; } .price-range-slider { width: 100%; float: left; } .price-range-slider .range-value { margin: 0; margin-bottom: 15px; position: relative; margin-top: 15px; } .price-range-slider .range-value input { background: none; color: var(--white); font-size: 16px; font-weight: initial; box-shadow: none; border: none; padding: 0; min-height: auto; margin: 0; float: right; text-align: right; font-weight: 600; } .price-range-slider .range-bar { border: none; background: var(--white); height: 5px; width: 100%; border-radius: 30px; position: relative; } .price-range-slider .range-bar .ui-slider-range { background: var(--color-secondary); } .price-range-slider .range-bar .ui-slider-handle { border: none; border-radius: 25px; background: var(--dark); border: 5px solid var(--color-secondary); height: 25px; width: 25px; top: -10px; cursor: pointer; position: absolute; } .price-range-slider .range-bar .ui-slider-handle + span { background: var(--color-secondary); display: none; } .esitmate-form button { margin-top: 50px; } .esitmate-form button { display: inline-block; font-weight: 600; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 6px; -webkit-box-shadow: inherit; box-shadow: inherit; font-size: 17px; letter-spacing: 0; position: relative; z-index: 1; color: var(--white); border: none; background: var(--bg-gradient-secondary); padding: 16px 52px; } .esitmate-form button::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .esitmate-form button:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .esitmate-form button:hover { color: var(--color-heading); } .estimate-thumb { position: relative; z-index: 1; } .estimate-thumb .shape { position: absolute; left: -50px; bottom: -80px; z-index: -1; } .estimate-thumb .shape img { height: 120px; } /* ============================================================== # Mission / Vision Style =================================================================== */ .mission-vision-style-one-area { background-repeat: no-repeat; background-position: bottom, 50%; } .mission-thumb { position: relative; } .mission-thumb img { border-radius: 50%; } .mission-tab-content h2 { font-weight: 600; margin-bottom: 25px; } .mission-tab-content ul { margin: 0; list-style: none; padding: 0; margin-top: 25px; } .mission-tab-content ul li { display: block; font-weight: 500; line-height: 2; position: relative; z-index: 1; padding-left: 30px; } .mission-tab-content ul li::after { position: absolute; left: 0; top: 50%; content: "\f058"; font-family: "Font Awesome 5 Pro"; transform: translateY(-50%); font-weight: 600; color: var(--color-secondary); } .mission-tab-navs { margin: 0; padding: 0; margin-bottom: 30px; border-bottom: none !important; } .mission-tab-navs button { border: none !important; margin: 0 !important; font-weight: 600; text-transform: uppercase; color: var(--color-heading); transition: all 0.35s ease-in-out; border-radius: 30px !important; padding: 15px 45px; display: inline-block; margin-right: 10px !important; box-shadow: rgb(0 0 0 / 8%) 0px 10px 30px 0px; } .mission-tab-navs::before, .mission-tab-navs::after { display: none; } .mission-tab-navs button.active, .mission-tab-navs button:focus { color: var(--white) !important; background: var(--dark) !important; } .mission-tab-navs button:hover { color: var(--color-heading) !important; } .mission-tab-navs button.active:hover { color: var(--white) !important; } .shape-top-left { position: absolute; left: 0; top: 0; z-index: -1; max-width: 22%; } .shape-top-left img { height: 100%; } /* ============================================================== # Blog Style =================================================================== */ .blog-area.blog-grid .single-item { margin-bottom: 30px; } .blog-style-one { background: var(--white); overflow: hidden; border-radius: 8px; box-shadow: 0 5px 3px rgb(3 27 78 / 8%); } .blog-grid .blog-style-one { box-shadow: 0 25px 70px rgb(0 0 0 / 7%); } .secondary .blog-style-one { box-shadow: rgb(0 0 0 / 5%) 0px 10px 30px 0px; } .blog-style-one .thumb .tags { position: absolute; right: 45px; top: 45px; z-index: 1; } .blog-style-one .thumb .tags a { display: inline-block; background: var(--color-primary); color: var(--white); padding: 2px 20px; border-radius: 5px; z-index: 1; font-weight: 500; } .blog-style-one .thumb img { border-radius: 5px; } .blog-style-one .thumb { padding: 15px; padding-bottom: 0; position: relative; z-index: 1; } .blog-style-one .info { padding: 30px; } .blog-style-one .btn-simple { margin-top: 5px; text-transform: capitalize; } .blog-style-one h4 { font-size: 24px; line-height: 1.3; } .blog-style-one p { margin: 0; } .blog-meta { display: block; margin-bottom: 15px; } .blog-meta ul { padding-left: 0; margin-bottom: 0; list-style: none; } .blog-meta ul li { position: relative; z-index: 1; font-size: 13px; text-transform: uppercase; padding-right: 60px; display: flex; align-items: center; font-weight: 500; } .blog-meta ul li, .blog-meta ul li a { color: var(--color-paragraph); } .blog-meta ul li img { height: 35px; width: 35px !important; border-radius: 50% !important; margin-right: 12px !important; } .blog-meta ul li:last-child { padding-right: 0; } .blog-meta ul { display: flex; align-items: center; } .blog-meta ul li::after { position: absolute; right: 15px; top: 50%; content: ""; height: 1px; width: 30px; background: #dddddd; } .blog-meta ul li:last-child::after { display: none; } .blog-meta ul li a { margin-left: 3px; display: inline-block; line-height: 1.4; } .blog-meta ul li a:hover { color: var(--color-primary); } .secondary .blog-meta ul li a:hover { color: var(--color-secondary); } .secondary .blog-meta ul li a:hover { color: var(--color-secondary); } .blog-meta i { font-size: 16px; font-weight: 100; margin-right: 5px; } .blog-style-one.flex { display: grid; grid-template-columns: 1fr 1.2fr; padding: 0; grid-column-gap: 30px; } .blog-style-one.flex .thumb img { margin: 0; border-radius: inherit; } .blog-style-one.flex .thumb { padding: 0; } .blog-style-one.flex .info { padding: 0; display: flex; flex-direction: column; justify-content: center; } .blog-style-one.flex .thumb .tags { right: auto; left: 30px; top: 30px; } .blog-style-one.solid li { font-size: 13px; } .blog-style-one.solid.thumbless .info { position: inherit; background: var(--dark); left: 0; bottom: 0; right: 0; padding: 50px; } .blog-style-one.solid.thumbless .thumb::after { display: none; } .blog-style-one.solid .info { position: absolute; left: 30px; bottom: 30px; right: 30px; z-index: 9; padding: 30px; padding-bottom: 15px; } .blog-style-one.solid .thumb { padding: 0; box-shadow: inherit; position: relative; z-index: 1; } .blog-style-one.solid .thumb img { margin: 0; border-radius: inherit; transition: all 0.35s ease-in-out; } .blog-style-one.solid:hover .thumb img { transform: scale(1.2); } .blog-style-one.solid { box-shadow: inherit; position: relative; z-index: 1; border-radius: inherit; } .blog-style-one.solid .info h4 { margin: 0; } .blog-style-one.solid .info p { margin-top: 15px; } .blog-style-one.solid .thumb::after { position: absolute; left: 0; bottom: 0; content: ""; height: 80%; width: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%) repeat scroll 0 0; transition: all 0.35s ease-in-out; } .blog-style-one.solid:hover .thumb::after { height: 100%; } .blog-style-one.solid a, .blog-style-one.solid p, .blog-style-one.solid li, .blog-style-one.solid .blog-meta a { color: var(--white); } .secondary .blog-style-one a:hover { color: var(--color-secondary); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-meta ul li img { display: none; } } /* ============================================================== # Contact Us =================================================================== */ .contact-stye-one { position: relative; } .shape-animated-arrow { position: absolute; left: -12%; top: 0; } .contact-shape { position: absolute; right: -15%; bottom: 0; max-width: 30%; } .half-shape-top { position: relative; z-index: 1; } .half-shape-top::after { position: absolute; left: 0; top: 0; content: ""; height: 120px; width: 100%; background: var(--bg-gray); z-index: -1; } .contact-area { background-size: 20%; background-repeat: no-repeat; background-position: right bottom; } .contact-area .shape-left-top { max-width: 30%; top: 60px; opacity: 0.1; } .contact-style-one-info li { display: flex; margin-top: 30px; } .contact-style-one-info li i { display: inline-block; height: 60px; width: 60px; text-align: center; line-height: 60px; background: var(--color-primary); border-radius: 50%; color: var(--white); font-size: 25px; margin-right: 20px; } .contact-style-one-info li:nth-child(2) i { background: var(--color-secondary); } .contact-style-one-info li:nth-child(3) i { background: var(--dark); } .contact-style-one-info li p { margin: 0; } .contact-style-one-info li h5 { font-weight: 600; margin-bottom: 5px; font-size: 20px; } .contact-style-one-info li a { font-weight: 400; } .contact-style-one-info h2 { font-size: 36px; font-weight: 600; margin-bottom: 15px; line-height: 1; } .contact-style-one-info ul { margin: 0; padding: 0; list-style: none; margin-top: 50px; } .contact-form-style-one { box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); padding: 60px 80px; border-radius: 10px; position: relative; background: var(--white); } .contact-form-style-one .illustration { position: absolute; left: -130px; bottom: -60px; z-index: -1; } .contact-form-style-one .sub-heading { margin-bottom: 15px; } .contact-form-style-one .heading { margin-bottom: 30px; font-size: 36px; } .contact-form-style-one input, .contact-form-style-one textarea { margin-bottom: 15px; padding: 15px 0; border: none; background: transparent; border-bottom: 2px solid #d6d6d6; border-radius: 0; font-size: 18px; } .contact-form-style-one input:focus, .contact-form-style-one textarea:focus { box-shadow: inherit; } .contact-form-style-one textarea { height: 180px; width: 100%; } .contact-form-style-one button { display: inline-block; font-weight: 600; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 6px; -webkit-box-shadow: inherit; box-shadow: inherit; font-size: 17px; letter-spacing: 0; position: relative; z-index: 1; color: var(--white); border: none; background: var(--color-primary); padding: 16px 52px; } .contact-form-style-one button::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .contact-form-style-one button:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .contact-form-style-one button:hover { color: var(--white); } img.loader { margin-left: 8px; } .contact-style-one-info h2 span { position: relative; z-index: 1; } .contact-style-one-info h2 span svg { position: absolute; top: auto; left: 50%; width: 80%; height: 100%; transform: translate(-50%); overflow: visible; bottom: 0; z-index: -1; } .contact-style-one-info h2 span path { stroke: var( --color-secondary); stroke-width: 10; stroke-dasharray: 1500; fill: none; } .maps-area iframe { min-height: 550px; margin-bottom: -10px; left: 0; top: 0; height: 100%; width: 100%; } .error-box h1 { font-size: 200px; font-weight: 600; line-height: 150px; margin-bottom: 30px; } .error-box h2 { font-weight: 600; margin-bottom: 20px; } .alert-notification { margin-top: 30px; } .alert-notification .alert { margin: 0; } .alert-notification h3 { font-weight: 600; margin-bottom: 8px; font-size: 22px; color: red; } .alert-notification p { margin: 0; } .alert-notification p strong { color: #232323; } .alert-notification .alert.alert-success h3 { color: green; } /* ============================================================== # Footer Style =================================================================== */ footer .widget-title { font-weight: 600; font-size: 24px; margin-bottom: 30px; } footer .logo img { height: 60px; } footer .logo { margin-bottom: 30px; height: 60px; } footer .newsletter form { border: 2px solid rgba(255, 255, 255, 0.3); position: relative; } footer .newsletter form input { background: transparent !important; border: none; box-shadow: inherit !important; color: var(--white) !important; min-height: 56px; padding: 15px; } footer .newsletter form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #d2d2d4; } footer .newsletter form input::-moz-placeholder { /* Firefox 19+ */ color: #d2d2d4; } footer .newsletter form input:-ms-input-placeholder { /* IE 10+ */ color: #d2d2d4; } footer .newsletter form input:-moz-placeholder { /* Firefox 18- */ color: #d2d2d4; } footer .newsletter form button, .woocommerce footer .newsletter form button { position: absolute !important; right: 5px; top: 5px; padding: 9px 20px !important; text-transform: uppercase; background: var(--color-primary); border: none; color: var(--white); font-weight: 600; border-radius: inherit; } footer .newsletter form button::after, .woocommerce footer .newsletter form button::after { display: none; } footer .newsletter.secondary form button { background: var(--color-secondary); } footer .newsletter { margin-top: 30px; } footer p, footer li, footer li a { color: #d2d2d4 !important; transition: all 0.35s ease-in-out; } footer li a:hover { color: var(--white) !important; } footer li a { font-weight: 400; } footer .link li { margin-top: 10px; } footer .link li:first-child { margin-top: 0; } .footer-item { margin-top: 50px; } .footer-bottom li { display: inline-block; } .footer-bottom p { margin: 0; } .footer-bottom { padding: 15px 0; background: #0c0e13; } .footer-bottom .text-end li { margin-left: 20px; } .f-items { position: relative; z-index: 1; } .f-items .shape-animated-top { position: absolute; left: -200px; top: 80px; } .f-items .shape-animated-top img { max-width: 250px; opacity: 0.03; } .footer-bottom .container { position: relative; } .footer-bottom .menu-copyright-menu-container .menu { padding-left: 0; margin-bottom: 0; list-style: none; } footer { position: relative; z-index: 1; overflow: hidden; } footer::after { position: absolute; left: -9%; top: -10%; content: ""; height: 500px; width: 500px; background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 130%) repeat scroll 0 0; z-index: -1; transform: skewX(10deg); } .footer-shape { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .footer-shape .item:first-child { position: absolute; right: 0; top: 50px; height: 250px; } .footer-shape .item:nth-child(2) { position: absolute; left: 30px; bottom: 45px; height: 30px; } .footer-shape .item img, .footer-shape .item:nth-child(2) img { height: auto; animation: spinner 20s infinite linear; } .footer-shape .item:nth-child(3) { position: absolute; left: 0; top: 0; height: 40%; opacity: 0.3; } .footer-shape .item:nth-child(3) img { height: 100%; } .footer-shape .item.bottom { top: auto; bottom: 60px; height: 70%; } .opening-hours { margin-top: 30px; } .opening-hours li { margin-top: 10px; position: relative; z-index: 1; } .opening-hours h5 { text-transform: uppercase; font-weight: 600; font-size: 15px; } .opening-hours .working-day, .opening-hours .working-hour { width: 1%; display: table-cell; white-space: nowrap; } .opening-hours .working-day { padding-right: 10px; } .opening-hours .working-hour { padding-left: 10px; text-transform: uppercase; } .opening-hours .marker { width: 98%; display: table-cell; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.3); bottom: 10px; } .footer-social li { display: inline-block; margin-right: 15px; } .footer-social li a { display: inline-block; height: 40px; width: 40px; line-height: 40px; text-align: center; background: rgba(255, 255, 255, 0.1); border-radius: 5px; color: var(--white) !important; } .footer-social { margin-top: 30px; } .footer-social li a:hover { background: var(--white); color: var(--color-heading) !important; } /* ============================================================== # 404 page =================================================================== */ .error-page-area { position: relative; z-index: 1; } .error-page-area .shape-left { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 20%; background-position: left !important; background-repeat: no-repeat !important; z-index: -1; opacity: 0.3; background-size: contain !important; } .error-page-area .shape-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 20%; background-position: right !important; background-repeat: no-repeat !important; z-index: -1; opacity: 0.3; background-size: contain !important; } .error-box h1 { font-size: 150px; line-height: 110px; font-weight: 800; margin-bottom: 40px; text-shadow: 3px 3px #c0c0c0; } .error-box h2 { font-weight: 700; margin-bottom: 20px; } .error-box p { padding: 0 10%; } /* ============================================================== # Home Solar Energy =================================================================== */ .home-solar a:hover { color: var(--color-optional); } .home-solar .bg-theme { background: var(--color-optional); } .home-solar .bg-gradient { background: linear-gradient(90deg, #57B33E 0%, #d2ff09 100%) !important; } .home-solar nav.navbar.validnavs.navbar-fixed.navbar-style-three.no-background .container::after { background: var(--color-optional); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .home-solar nav.navbar.validnavs.navbar-fixed.navbar-style-three .attr-right .attr-nav li.button a::after { background: var(--color-optional); } .top-bar-area.top-bar-style-three { background: transparent; position: absolute; left: 0; top: 0; width: 100%; z-index: 9; padding: 15px 0; overflow: hidden; } .top-bar-area.top-bar-style-three::after { position: absolute; right: 45%; top: -50px; height: 200px; width: 400%; background: var(--dark); content: ""; z-index: -1; } .top-bar-style-three .item-flex li i { color: var(--color-optional); font-weight: 600; } .top-bar-area.top-bar-style-three li a:hover { color: var(--color-optional); } .top-bar-area.top-bar-style-three .social a { color: var(--color-heading); } /* Banner */ .banner-area.banner-solar .banner-thumb { width: 45%; right: 0; left: auto; position: absolute; } .banner-area.banner-solar { padding-top: 130px; background-size: 15% !important; background-repeat: no-repeat !important; background-position: left bottom !important; } .banner-area.banner-area.banner-solar .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } @media (min-width: 1024px) { .banner-area.banner-area.banner-solar.navigation-circle .swiper-button-prev, .banner-area.banner-area.banner-solar.navigation-circle .swiper-button-next { margin-top: 50px; } } .home-solar .video-play-button.with-text .effect { background: var(--color-optional); } .home-solar .video-play-button.with-text .effect::after { background: var(--color-optional); } .banner-style-five h4 { text-transform: uppercase; font-weight: 600; } .banner-style-five h2 { font-size: 55px; font-weight: 600; } .banner-area.banner-solar .button { margin-top: 10px; } /* Feature */ .feature-style-four-single { border-top: 2px dashed rgba(255, 255, 255, 0.3); position: relative; z-index: 1; } .feature-style-four-single:nth-child(2n) { border: none; border-bottom: 2px dashed rgba(255, 255, 255, 0.3); border-radius: 30px; } .feature-style-four img { height: 100px; margin-bottom: 30px; } .feature-style-four { padding: 60px; } .feature-style-four p { opacity: 0.9; } .feature-style-four-single:first-child { border-top-right-radius: 30px; } .feature-style-four-single:nth-child(3) { border-top-left-radius: 30px; } .feature-style-four-single:nth-child(2n)::after { position: absolute; right: 0; top: 30px; bottom: 30px; width: 100%; border-left: 2px dashed rgba(255, 255, 255, 0.2); content: ""; border-right: 2px dashed rgba(255, 255, 255, 0.2); z-index: -1; } /* About */ .about-style-five-thumb { position: relative; z-index: 1; display: grid; grid-template-columns: 2fr 1fr; grid-column-gap: 30px; align-items: end; margin-top: 50px; } .about-style-five-thumb h2 { margin: 0; background: var(--color-optional); font-size: 40px; position: absolute; left: 40%; top: -50px; right: 0; padding: 48px 50px; font-weight: 600; color: var(--white); clip-path: polygon( 45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975% ); height: 340px; width: 340px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; } .about-style-five-thumb h2 strong { display: block; font-size: 60px; line-height: 1; font-weight: 600; } .about-style-five-info h2 { font-weight: 600; margin-bottom: 35px; } .about-style-five-info ul { padding-left: 0; margin-bottom: 0; list-style: none; } .about-style-five-info ul li { float: left; margin-right: 30px; padding-right: 30px; border-right: 1px solid #dddddd; display: flex; } .about-style-five-info ul li:last-child { margin-right: 0; padding-right: 0; border: none; } .about-style-five-info ul li .counter { font-size: 30px; font-weight: 700; } .about-style-five-info ul li i { display: inline-block; font-size: 60px; line-height: 1; margin-right: 20px; color: var(--color-optional); } .about-style-five-info ul li i::before { line-height: inherit; } .about-style-five-info ul li span.medium { color: var(--color-paragraph); } .about-style-five-info ul { margin-top: 40px; } /* Services */ .home-solar .sub-heading { text-transform: uppercase; color: var(--color-primary); font-weight: 600; background: var(--bg-gradient-optional); -webkit-background-clip: text !important; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; z-index: 1; margin-bottom: 20px; } .home-solar .site-heading .devider { background: var(--color-optional); } .home-solar .site-heading .devider::before { background: var(--color-optional); } .service-style-four { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); } .service-style-four .info { padding: 60px 40px; } .service-style-four .info .icon { display: flex; align-items: center; position: relative; justify-content: space-between; margin-top: 40px; overflow: hidden; border-radius: 5px; } .service-style-four .info .icon img { height: 65px; } .service-style-four .info .icon .thumb { height: 100px; width: 100px; background: var(--dark); text-align: center; line-height: 100px; min-width: 100px; } .service-style-four > .thumb { margin-top: -100px; } .service-style-four .info .icon .link { background: var(--color-optional); color: var(--white); height: 100px; line-height: 100px; width: 100%; text-align: center; text-transform: uppercase; } .service-style-four .info .icon .link i { transform: rotate(-45deg); margin-left: 4px; } /* Footer */ .home-solar footer .newsletter form button { background: var(--color-optional); } .home-solar .footer-social li a:hover { background: var(--color-optional); } .home-solar footer.bg-dark .logo { filter: brightness(0) invert(1); } /* Process */ .process-style-two-area { background-size: 60%; background-repeat: no-repeat; background-position: center; } .process-style-two .thumb { position: relative; z-index: 1; height: 250px; margin: auto; } .process-style-two .thumb::after { position: absolute; left: 50%; top: 50%; content: ""; height: 100%; width: 100%; transform: translate(-50%, -50%) rotate(-30deg); background: url(../img/shape/process.png); background-size: contain; background-repeat: no-repeat; background-position: center; margin-left: -6px; margin-top: 3px; z-index: -1; } .process-style-two .thumb img { height: 100%; border-radius: 50%; padding: 36px; } .process-style-two .thumb span { position: absolute; right: 30px; top: 55px; font-size: 60px; font-weight: 900; -webkit-text-stroke: 1px var(--color-heading); color: transparent; font-family: sans-serif; } .process-style-two h3 { font-weight: 600; margin: 0; margin-top: 30px; } /* Testimonial */ .home-solar .testimonial-style-one .rating { color: var(--color-optional); } .insurance .testimonial-style-one .rating { color: var(--color-secondary); } .home-solar .testimonial-thumb::after { background: var(--bg-gradient-optional); } /* Gallery */ .gallery-style-four { overflow: hidden; position: relative; z-index: 1; border-radius: 10px; } .gallery-style-four .overlay { position: absolute; left: 30px; bottom: 30px; background: var(--white); padding: 30px 40px; border-radius: 10px; right: 30px; transition: all 0.35s ease-in-out; transform: translateY(50px); opacity: 0; visibility: hidden; padding-bottom: 0; } .gallery-style-four .overlay span { text-transform: uppercase; background: var(--color-optional); color: var(--white); padding: 5px 20px; border-radius: 6px 6px 0 0; margin-top: 5px; display: inline-block; } .swiper-slide.swiper-slide-active .gallery-style-four .overlay { opacity: 1; visibility: visible; transform: translateY(0); } .gallery-style-four-carousel .swiper-wrapper { padding-bottom: 60px; } .gallery-style-four-carousel .swiper-pagination { margin-bottom: -5px; display: flex; align-items: center; justify-content: center; } .gallery-style-four-carousel .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { height: 15px; width: 15px; background: var(--color-optional); } .home-solar .btn-simple:hover i { background: var(--color-optional); border-color: var(--color-optional); color: var(--white); } .home-solar .blog-meta ul li a:hover { color: var(--color-optional); } /* ============================================================== # Home Software =================================================================== */ .banner-style-six .content { padding-top: 200px; } .banner-style-six .content .thumb { position: relative; z-index: 1; } .banner-style-six .content .thumb img { border-radius: 20px; box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); } .banner-style-six .content .thumb img:nth-child(2) { position: absolute; right: -18px; bottom: -150px; transform: rotate(18deg); max-height: 100%; box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); } .banner-style-six .content .thumb img:first-child { transform: rotate(-8deg); position: relative; bottom: -60px; } .banner-style-six-area { overflow: hidden; } .banner-style-six .content .thumb::after { position: absolute; left: 50%; top: -50px; content: ""; transform: translateX(-50%); height: 700px; width: 700px; background: rgba(0, 0, 0, 0.1); z-index: -1; border-radius: 50%; } .banner-style-six h4 { font-weight: 500; margin-bottom: 20px; } .banner-style-six h4 strong { display: inline-block; background: var(--dark); padding: 5px 10px; border-radius: 5px; font-weight: 600; margin-right: 10px; font-size: 18px; color: var(--white); } .banner-style-six h2 { font-size: 55px; line-height: 1.1; font-weight: 600; margin-bottom: 30px; } .banner-style-six p { padding-right: 15%; font-size: 18px; line-height: 1.7; } /* Feature Style Five */ .feature-style-five-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 30px; } .feature-style-five { padding: 60px 50px; background: #f4e5ff; border-radius: 10px; } .feature-style-five:nth-child(2) { background: #fef1e9; } .feature-style-five:nth-child(3) { background: #e2f7f3; } .feature-style-five .thumb { display: inline-block; margin-bottom: 50px; position: relative; z-index: 1; } .feature-style-five .thumb::after { position: absolute; left: 0; top: 50%; content: ""; height: 130px; width: 130px; background: linear-gradient(50deg, transparent, var(--white)); z-index: -1; transform: translateY(-50%); border-radius: 50%; } .feature-style-five img { height: 100px; } .feature-style-five h2, .feature-style-five h3, .feature-style-five h4, .feature-style-five h5 { font-weight: 600; } .feature-style-five p { margin: 0; } /* Fun Fact */ .fun-factor-style-two-box { border-bottom: 1px solid #cccccc; padding: 100px 0; } .fun-factor-style-two-box .fun-fact { display: flex; align-items: center; } .fun-factor-style-two-box .fun-fact .counter { margin-right: 25px; min-width: 125px; } .fun-factor-style-two-box .fun-fact .medium { font-size: 19px; color: var(--color-paragprah); font-weight: 400; } @media only screen and (min-width: 1200px) { .fun-factor-style-two-box .row { --bs-gutter-x: 50px; } } /* About */ .about-style-six-thumb > img:first-child { border-radius: 10px; padding: 30px; background: var(--white); box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 50%); } .about-style-six-thumb { padding-left: 30%; position: relative; z-index: 1; padding-right: 110px; margin-top: 50px; } .about-style-six-thumb .shape { position: absolute; right: 0; bottom: 0; z-index: -1; width: 110px; text-align: right; } .about-style-six-thumb .shape img { width: 100%; height: 100%; } .about-style-six-thumb img:nth-child(2) { position: absolute; left: 0; top: -50px; } .about-style-six-thumb::before { position: absolute; left: 100px; top: 50px; bottom: 100px; content: ""; width: 50%; background: var(--color-secondary); z-index: -1; border-radius: 10px; } .about-style-six-info h2 { margin-bottom: 25px; } ul.list-regular { margin-top: 25px; list-style: none; margin-bottom: 0; padding-left: 0; } ul.list-regular li { font-size: 20px; font-weight: 500; margin-top: 20px; color: var(--color-heading); padding-left: 40px; position: relative; z-index: 1; } ul.list-regular li::after { position: absolute; left: 0; top: 3px; content: "\f00c"; height: 23px; width: 23px; line-height: 23px; background: var(--dark); font-family: "Font Awesome 5 Pro"; color: var(--white); text-align: center; border-radius: 50%; font-size: 16px; } /* Software Overview */ .software-tab-navs { margin: 0; border: none; margin-bottom: 50px; display: grid; grid-column-gap: 30px; grid-row-gap: 30px; } .software-tab-navs::before, .software-tab-navs::after { display: none; } .software-tab-navs.nav-tabs .nav-link { border-radius: 10px; padding: 30px 50px; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--white); position: relative; z-index: 1; text-align: left; } .software-tab-navs.nav-tabs .nav-link span { position: absolute; top: 50%; transform: translateY(-50%); -webkit-text-stroke: 1px var(--white); font-weight: 900; font-size: 50px; color: transparent; z-index: -1; opacity: 0.1; font-family: sans-serif; right: 30px; } .software-tab-navs.nav-tabs .nav-link.active, .software-tab-navs.nav-tabs .nav-link:hover { background: #353741; } .soft-overview { padding-right: 30%; position: relative; padding-bottom: 50px; } .soft-overview img { border-radius: 10px; } .soft-overview .overlay { position: absolute; right: 0; bottom: 0; background: var(--white); max-width: 50%; padding: 50px; box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 50%); border-radius: 15px; z-index: 1; } .soft-overview .overlay::after { position: absolute; right: 0; top: -160px; content: ""; height: 100%; width: 100%; background: url(../img/shape/software.png); background-repeat: no-repeat; background-position: right; z-index: -1; } .soft-overview .overlay h1, .soft-overview .overlay h2, .soft-overview .overlay h3, .soft-overview .overlay h4, .soft-overview .overlay h5, .soft-overview .overlay h6 { font-weight: 600; color: var(--color-heading); } .soft-overview .overlay p { color: var(--color-paragraph); } .soft-overview .overlay a { color: transparent; -webkit-text-stroke: 1px var(--color-secondary); font-size: 50px; margin-top: 5px; display: inline-block; } .soft-overview .overlay a i { transform: rotate(-45deg); } /* Software Video */ .video-bg-live { position: absolute !important; right: 0; top: 0; height: 100%; width: 150%; z-index: 1; background-attachment: inherit !important; background-position: center !important; } .software-video-preview { padding: 300px 0; position: relative; } .video-bg-live .shadow-overlay { position: absolute !important; right: 0; top: 0; height: 100%; width: 100%; background: var(--bg-gradient-secondary); opacity: 0.3; } .software-video-preview .video-play-button { z-index: 999; position: absolute; left: 58%; top: 50%; transform: translateY(-50%); } .software-video-preview .video-play-button { height: 100px; width: 100px; line-height: 100px; background: var(--color-secondary); color: var(--white); } .software-video-preview .video-play-button i { font-size: 30px; top: 5px; } .software-video-preview .video-play-button .effect { background: var(--dark); height: 150px; width: 150px; } .software-video-preview .video-play-button .effect::after { background: var(--color-secondary); height: 100px; width: 100px; } .secondary .team-style-one .thumb::before { background: var(--color-secondary); } .secondary .team-style-one .thumb .social { background: var(--dark); } .secondary .contact-style-one-info li:first-child i { background: #22c6bb; } .secondary .contact-form-style-one button { background: var(--color-secondary); } /* ============================================================== # Responsive CSS =================================================================== */ @media (max-width: 1023px) { .banner-area { height: auto; } .banner-area div { height: auto; } .blog-style-one.solid .thumb img { width: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .align-center { align-items: center; } .about-style-three-area .align-center { align-items: inherit; } .banner-style-two .container .banner-thumb img { height: auto; max-width: 50%; margin: 0; min-height: auto; } .banner-style-two .container .banner-thumb { text-align: right; display: flex; justify-content: right; top: auto; height: auto; display: none; } .banner-style-four h2 { font-size: 60px; } /* About */ .about-style-one-area { overflow: hidden; } .about-style-four .fun-fact { display: block; margin: 0; padding: 0; border: none; margin-top: 30px; } .about-style-four-area.shape-light-bottom::after { display: none; } .company-autor { position: inherit; margin-top: 30px; } .company-autor .right-info { display: none; } .about-style-four-area { padding-bottom: 120px; } .shape-right-bottom-actual { bottom: 0; } .about-style-one-area .shape-animated-left { display: none; } .about-style-three .thumb .sub-item img:first-child { left: 30px; max-width: 200px; bottom: -70px; } .about-style-three .thumb .sub-item img:nth-child(2) { bottom: -120px; } .owner-info { display: block; } .owner-info .right-info { display: none; } .owner-info .left-info { border: none; margin: 0; padding: 0; } /* Team Single */ .team-single-area .team-content-top { bottom: 0; margin: 0; padding-bottom: 120px; } .team-single-area .team-content-top .right-info { margin-bottom: 0; } .team-style-two .thumb::after { display: none; } /* Service */ .service-nav-info { margin: 0; } /* Partner */ .partner-heading::before { right: -50px; } .partner-heading::after { right: -50px; } /* Why Choose Us */ .choose-us-style-one-area::after { width: 65%; } .partner-style-one-area .align-center { align-items: center; } .bottom-shape-light::after { top: 480px; } /* Feature */ .half-angle-shape::after { transform: skewX(-7deg); width: 53%; } .feature-style-one-heading .arrow-shape { right: -150px; } /* Pricing */ .pricing-badge { display: none; } /* Home solar */ .banner-style-five h2 { font-size: 45px; } .about-style-five-area .align-center { align-items: normal; } .about-style-five-info ul li { margin: 0; padding: 0; border: none; width: 100%; margin-top: 30px; } .about-style-five-info ul li:first-child { margin-top: 0; } .process-style-two h3 { font-size: 20px; } .process-style-two .thumb span { right: 0; font-size: 40px; } /* Home Software Landing */ .soft-overview .overlay { position: inherit; top: 0; margin-top: 30px; max-width: 100%; } .soft-overview { padding-right: 0; padding-bottom: 0; } } /* Tablet Layout Custom */ @media only screen and (min-width: 768px) and (max-width: 1023px) { } @media screen and (max-width: 991px) { /* global reset - start */ .order-last { order: 0; } } /* Tablet Layout: 768px.*/ @media only screen and (min-width: 768px) and (max-width: 991px) { /* Topbar */ .top-bar-area .social { display: none; } .top-bar-area .item-flex { justify-content: center; } .top-bar-area .call-entry { display: none; } .top-bar-style-two { border-bottom: 1px solid #e7e7e7; background: var(--bg-gray); } /* Banner */ .banner-style-two .container .banner-thumb { position: inherit; height: auto; max-width: 60%; margin: auto; display: none; } .banner-style-two .content { padding-top: 100px; padding-bottom: 120px; } .banner-style-two .container .banner-thumb img { margin-top: 50px; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev { left: 50%; margin-left: -50px; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-next { right: auto; left: 50%; margin-right: -50px; } .banner-style-four .thumb { display: none; } .banner-style-four .content { padding-top: 120px; } /* About */ .thumb-shape-bottom { right: 0; } .thumb-shape-bottom img { height: 150px; right: -10px; } .about-thumb { margin-top: 50px; margin-bottom: 0; } .shape-animated-left { display: none; } .about-style-one .about-card { position: relative; left: 0; top: 0; bottom: auto; width: 100%; margin-top: 30px; } .triangle-shape { display: none; } .about-style-one .about-card ul { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; } .about-card li { margin: 0; padding: 0; border: navajowhite; } .about-style-two .thumb img:nth-child(2) { left: 0; border: 2px solid var(--white); box-shadow: 0 25px 70px rgb(0 0 0 / 7%) !important; display: none; } .about-style-two .thumb { padding-left: 0; margin-bottom: 50px; } .about-style-two .experience { left: 50px; } .about-style-two .thumb .shape { display: none; } .shape-right-bottom { max-width: 30%; bottom: -150px; display: none; } .feature-style-two-area { background-size: 0; } .about-style-three .thumb .sub-item img:first-child { left: 30px; bottom: -30px; } .about-style-three .thumb .sub-item img:nth-child(2) { right: 0; } .about-style-three .thumb { margin-bottom: 90px; } /* About Style Four */ .company-autor { position: inherit; margin-top: 30px; } .shape-light-bottom::after { display: none; } .about-style-four-area { padding-bottom: 60px; } .shape-right-bottom-actual { bottom: 0; } .company-autor .right-info { display: none; } .about-style-four .thumb img { margin: 0; max-width: 100%; margin-bottom: 40px; } .about-style-four .experience { display: none; } .about-style-four .thumb { padding-top: 0; } /* Estimate */ .estimate-thumb { margin-top: 50px; text-align: center; } .estimate-thumb img { width: 100%; } /* Services */ .services-style-one { background: var(--white); padding: 60px 37px; } .service-nav-info { margin-right: 30px; } .services-style-two .thumb .title::after { transform: none; right: 0; } .services-style-two .thumb .title { right: 0; } /* Process */ .process-style-one { margin-top: 60px; padding: 0 25%; } .col-lg-4:first-child .process-style-one { margin-top: 0; } /* Faq */ .faq-style-one.default-padding { padding-bottom: 0; } .faq-thumb { text-align: center; } .faq-thumb img { max-width: 50%; margin-top: 20px; } .faq-style-one-area { background-size: contain; } /* Partner */ .partner-heading { margin-bottom: 15px; } .partner-heading::after { display: none; } .partner-heading::before { display: none; } .partner-style-two-area { text-align: center; } .partner-heading h3 strong { color: var(--white); } /* Choose Us */ .choose-us-style-one-area::after { width: 100%; transform: inherit; left: 0; } .choose-us-style-one-area .text-invisible { font-size: 100px; bottom: 20px; } /* Partner */ .partner-map { text-align: center; margin-bottom: 50px; } .partner-items ul li { border: 1px solid #e7e7e7; } /* Portfolio */ .gallery-items.colums-2 .gallery-item, .gallery-items.colums-3 .gallery-item { width: 50%; } .project-swiper-nav { position: relative; top: 0; } .project-style-one .info { padding: 50px; left: 0; margin: 0; } .project-style-one-carousel .swiper-wrapper { padding-bottom: 30px; } .project-swiper-nav .project-pagination { color: var(--color-heading); } .project-style-one-carousel { margin: 0; padding: 0; } .gallery-style-two .overlay { left: 30px; right: 30px; } .gallery-item.active .overlay { opacity: 0; visibility: hidden; transform: translateX(60px); } .gallery-item.active .shape { bottom: -30%; opacity: 0; visibility: hidden; } .shape-animated-arrow { display: none; } .project-details-area .top-info { margin-top: 30px; } /* Team Single */ .team-single-area .team-content-top .right-info { padding: 0 15px; margin: 0; } .team-single-area .team-content-top img { margin-bottom: 40px; } .team-single-area .team-content-top { margin: 0; bottom: 0; padding-bottom: 120px; } .team-single-area .bottom-info .skill-items { padding-left: 0; margin-top: 50px; } /* Request Call Back */ .request-call-back-area .text-end { text-align: left !important; } .achivement-counter ul { margin: 0 -15px; } .achivement-counter { border: none; padding: 0; margin-top: 50px; } .achivement-counter li { margin: 0; width: 50%; float: left; border-right: 1px solid rgba(255, 255, 255, 0.3); padding: 0 30px; } .achivement-counter li .icon { float: left; } .achivement-counter li:last-child { border: navajowhite; } .achivement-counter .fun-fact .medium { margin-top: 8px; display: block; } .achivement-counter li i { line-height: 0; } .request-call-back-area .achivement-counter { display: none; } /* Pricing */ .pricing-badge { display: none; } /* Testimonial */ .testimonial-style-one-area { text-align: center; } .testimonial-thumb::after { height: 500px; width: 500px; } .testimonial-thumb .thumb-item img { max-width: 490px; } .testimonial-thumb .thumb-item img { border-radius: 0 0 400px 400px; position: relative; } .testimonial-thumb .thumb-item { margin-bottom: 50px; margin-top: -35px; } .testimonial-thumb .mini-shape { right: 10%; top: 35%; } .testimonial-style-one .provider { justify-content: center; } /* Cirlce Progressbar */ .half-angle-shape::after { width: 100%; transform: inherit; left: 0; } .feature-style-one-heading .arrow-shape { right: auto; top: -70px; height: 40px; left: -30px; } .circle-progress { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 50px; display: none; } .circle-progress .progressbar { display: inline-block; margin-right: 70px; } .feature-style-one { width: 50%; float: left; margin: 0; border: none; padding: 0 30px; display: block; } .feature-style-one:first-child { padding-left: 0; } .feature-style-one:last-child { padding-right: 0; } .feature-style-one h4 { color: var(--white); } .feature-style-one p { color: var(--white); opacity: 0.8; } .feature-style-one .icon { margin: 0; margin-bottom: 20px; } /* Contact */ .contact-style-one-area.half-shape-top::after { height: 100%; background: transparent; } /* Footer */ .footer-bottom { text-align: center; } .footer-bottom .text-end { text-align: center !important; margin-top: 10px; } .footer-shape .item:nth-child(2) img { display: none; } .footer-bottom .text-end li { margin: 0 15px; } .footer-shape .item.bottom { height: auto; top: auto; bottom: 0; max-width: 30%; } /* Home Software Landing */ .feature-style-five-grid { grid-template-columns: 1fr 1fr; } .banner-style-six .content { padding-top: 120px; } .banner-style-six .content .thumb img:first-child { transform: inherit; } .banner-style-six .content .thumb img:nth-child(2) { transform: inherit; right: 0; } .banner-style-six .content .thumb { padding-right: 50px; } .fun-factor-style-two-box .fun-fact { display: block; text-align: center; } .fun-factor-style-two-box .fun-fact .counter { margin: 0; align-items: center; justify-content: center; margin-bottom: 15px; } .fun-factor-style-two-box { border: beige; padding-top: 60px; padding-bottom: 0; } .about-style-six-thumb { margin-bottom: 50px; } .soft-overview { padding: 0; } .soft-overview .overlay { position: inherit; margin-top: 30px; max-width: 100%; } .video-bg-live { width: 100%; } .software-video-preview { padding: 180px 0; margin-bottom: 20px; } .software-video-preview .video-play-button { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Home solar */ .banner-area.banner-solar { background-color: var(--bg-gray) !important; padding-top: 0; } .banner-area.banner-solar .banner-thumb { display: none; } .feature-style-four { border: 2px dashed rgba(255, 255, 255, 0.2); border-radius: 10px; overflow: hidden; } .feature-style-four-single { border: none !important; margin-top: 30px; } .feature-style-four-single::before, .feature-style-four-single::after { display: none; } .feature-style-four-single:first-child { margin-top: 0; } .about-style-five-thumb h2 { display: none; } .about-style-five-thumb { margin-bottom: 30px; grid-template-columns: 1fr; grid-row-gap: 30px; margin-top: 0; } .about-style-five-thumb img { width: 100%; } .about-style-five-thumb img:nth-child(2) { display: none; } .process-style-two .thumb { width: 320px; position: relative; left: -20px; } .process-style-two .thumb span { right: 0; font-size: 50px; } .process-style-two-area { overflow: hidden; background-size: contain; background-position: center top; } .process-style-two { margin-top: 50px; } .process-style-two-items { margin-top: -20px; } .service-style-four .info { padding: 60px 30px; } .gallery-style-four img { width: 100%; } } /* Mobile Layout: 320px. */ @media only screen and (max-width: 767px) { /* Topbar */ .top-bar-area { display: none; } .btn-animation span { font-size: 18px; } .heading { margin-top: 0; font-size: 36px; line-height: 1.2; } /* Banner Area */ .banner-area h2 { font-size: 36px !important; line-height: 1.2 !important; } .banner-area.banner-style-one .content { padding-bottom: 100px; } .banner-style-four h2 { font-size: 36px; line-height: 1.2; } .banner-style-four .content { padding: 60px 0; } .banner-style-four .thumb { display: none; } .banner-style-two .container .banner-thumb { display: none; } /* About */ .shape-animated-left { display: none; } .thumb-shape-bottom { display: none; } .about-style-one .about-card { left: 0; top: 0; bottom: auto; position: relative; width: 100%; margin-top: 30px; } .about-thumb { margin-top: 30px; margin-bottom: 0; } .triangle-shape { display: none; } .about-card li:last-child { padding-bottom: 0; margin-bottom: 0; border: none; } .about-card li { padding-bottom: 30px; } /* About Style Two */ .about-style-two .thumb img:nth-child(2) { display: none; } .about-style-two .thumb { padding: 0; margin-bottom: 30px; } .about-style-two .experience { position: relative; top: 0; margin-bottom: 30px; margin-top: 30px; width: 100%; text-align: center; display: none; } .about-style-two .thumb .shape { display: none; } /* About Style Four */ .company-autor { position: inherit; margin-top: 30px; } .shape-light-bottom::after { display: none; } .about-style-four-area { padding-bottom: 60px; } .shape-right-bottom-actual { bottom: 0; } .company-autor .right-info { display: none; } .about-style-four .thumb img { margin: 0; max-width: 100%; margin-bottom: 40px; } .about-style-four .experience { display: none; } .about-style-four .thumb { padding-top: 0; } /* Services */ .service-nav-info { margin: 0; padding: 0; background: transparent; box-shadow: none; text-align: center; } .service-nav-info::before { display: none; } .service-tab-navs .nav-link i { margin-right: 20px; display: none; } .services-tab-content { margin: 0; text-align: center; } .services-style-one { background: var(--white); padding: 60px 30px; } .service-tab-navs .nav-link { background: var(--white); justify-content: center; } /* Service Style Three */ .services-style-three { text-align: center; } .services-style-two .thumb .title::after { transform: none; right: 0; } .services-style-two .thumb .title { right: 0; } /* Team Single */ .team-single-area .team-content-top .right-info { padding: 0 15px; margin: 0; } .team-single-area .team-content-top img { margin-bottom: 40px; } .team-single-area .team-content-top { margin: 0; bottom: 0; padding-bottom: 60px; } .team-single-area .bottom-info .skill-items { padding-left: 0; margin-top: 50px; } /* Process */ .process-style-one { margin-top: 50px; } .col-lg-4:first-child .process-style-one { margin-top: 0; } .process-style-one .thumb::before { opacity: 1; visibility: visible; } /* Why Choose Us */ .choose-us-style-one-area .cover-bg { width: 100%; display: none; } .choose-us-style-one-area::after { transform: none; width: 100%; left: 0; opacity: 1; } .list-item::after { display: none; } .list-item { padding-left: 0; } .choose-us-style-one-area .text-invisible { font-size: 60px; right: auto; left: 10px; bottom: 0; opacity: 0.2; display: none; } /* Estimate Form */ .price-range-slider .range-bar { float: left; width: 100%; margin-top: 15px; } .price-range-slider .range-value input { float: left; width: 100%; text-align: left; margin-top: 10px; } .price-range-slider .range-value span { font-size: 20px; } .estimate-thumb { margin-top: 40px; } .estimate-thumb .shape { display: none; } /* Our Mission */ .shape-top-left { display: none; } .mission-tab-navs button { margin: 0 !important; width: 100%; margin-bottom: 15px !important; border: 1px solid var(--dark) !important; } .mission-tab-navs button:last-child { margin-bottom: 0 !important; } /* Team */ .team-style-two .thumb { padding-left: 0; } .team-style-two .info { max-width: 100%; padding: 15px 30px; } .team-style-two .thumb img { border-radius: 10px 10px 0 0; } .team-style-two .social { left: 30px; bottom: 15px; } .team-style-two .thumb::after { left: 40px; top: 30px; display: none; } .team-style-two:hover .thumb::after { height: 30%; } .team-single-list { grid-template-columns: 1fr; grid-row-gap: 40px; } /* Partner */ .partner-map { text-align: center; } .partner-items ul { grid-template-columns: 1fr 1fr; margin-top: 50px; } .partner-items ul li::after { display: none; } .partner-items ul li { border: 1px solid #e7e7e7; } /* Feature */ .half-angle-shape::after { display: none; } .feature-style-one-heading h2 { color: var(--color-heading); } .feature-style-one-heading.text-light p { color: var(--color-paragraph); opacity: 1; } .circle-progress .circle strong { color: var(--color-heading); } .feature-style-one { display: block; } .feature-style-one .icon { margin: 0; margin-bottom: 30px; } .circle-progress .progressbar h4 { color: var(--color-heading); opacity: 1; } .feature-style-one-heading .arrow-shape { display: none; } /* Feature */ .circle-progress { grid-template-columns: 1fr; grid-row-gap: 30px; } .feature-style-one-area { text-align: center; } .default-features { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; } /* SEO Form */ form.seo-form button { position: inherit; border: none; width: 100%; left: 0; right: 0; min-height: 60px; } form.seo-form input { background: rgba(255, 255, 255, 0.2); border-radius: 30px; margin-bottom: 10px; border: none !important; text-align: center; } form.seo-form { text-align: center; padding: 30px; } form.seo-form input[type="email"] { padding-right: 30px; } /* Testimonial */ .testimonial-thumb .mini-shape { right: 0; } .testimonial-thumb .thumb-item { margin-bottom: 30px; text-align: center; } .testimonial-style-one { text-align: center; } .testimonial-style-one .provider { justify-content: center; text-align: left; } .testimonial-thumb .thumb-item > img { height: 500px; border-radius: 0 0 480px 485px; } .testimonial-thumb .thumb-item { border-radius: inherit; margin-top: -30px; } /* Why Choose us */ .about-style-three .thumb .sub-item img:first-child { left: 15px; max-width: 50%; bottom: -30px; } .about-style-three .thumb .sub-item img:nth-child(2) { right: 0; max-width: 60%; } .shape-right-bottom { display: none; } .about-style-three .thumb { margin-bottom: 70px; } /* Partner */ .partner-heading { margin-bottom: 15px; } .partner-heading::after { display: none; } .partner-heading::before { display: none; } .partner-style-two-area { text-align: center; } .partner-heading h3 strong { color: var(--white); } /* Fun Factor */ .fun-factor-style-one-box .item { margin-top: 30px; } .fun-factor-style-one-box .item .fun-fact { border-top: 1px solid #dddddd; display: block; padding-top: 30px; } .fun-factor-style-one-box .item:first-child { margin-top: 0; } .fun-factor-style-one-box .item:first-child .fun-fact { padding-top: 0; border: none; } /* Request Call Back */ .achivement-counter { border: none; padding: 0; margin-top: 60px; display: block; } .request-call-back-area { text-align: center; } .achivement-counter li { display: block; text-align: center; margin-top: 60px; } .achivement-counter li i { margin: 0; margin-bottom: 10px; line-height: 1; } .achivement-counter .fun-fact .counter { justify-content: center; } /* Marketing Type */ .marketing-types { height: 100%; width: 100%; border: none; padding: 0; display: block; text-align: left; margin: 0; } .marketing-types::before, .marketing-types::after { display: none; } .marketing-types .icon { display: none; } .marketing-types .blur-shape { display: none; } .types-list { grid-template-columns: 1fr; grid-row-gap: 10px; } /* FAQ */ .faq-thumb img { max-width: 50%; margin: auto; } .faq-thumb { text-align: center; } .faq-style-one-area { background-size: contain; } /* Pricing */ .pricing-badge { display: none; } /* Portfolio */ .project-swiper-nav { position: relative; top: 0; } .project-style-one .info { padding: 50px; left: 0; margin: 0; } .project-style-one-carousel .swiper-wrapper { padding-bottom: 30px; } .project-swiper-nav .project-pagination { color: var(--color-heading); } .gallery-style-two .overlay { left: 30px; right: 30px; } .gallery-item.active .overlay { opacity: 0; visibility: hidden; transform: translateX(60px); } .gallery-item.active .shape { bottom: -30%; opacity: 0; visibility: hidden; } .shape-animated-arrow { display: none; } .load-more-info { display: none; } .project-details-area .top-info { margin-top: 15px; } ul.check-list { grid-template-columns: 1fr; } /* Home Blog */ .blog-meta ul { display: block; } .blog-meta ul li::after { display: none; } .blog-meta ul li { display: inline-block; padding-right: 18px; } /* Contact */ .contact-style-one-area.half-shape-top::after { height: 100%; } .contact-style-one-area.half-shape-top::after { height: 100%; background: transparent; } .contact-shape { display: none; } .contact-form-style-one { margin-top: 30px; padding: 50px 30px; } .maps-area iframe { min-height: 360px; } /* Footer */ .footer-bottom { text-align: center; } .footer-bottom .menu-copyright-menu-container .menu { text-align: center; } .footer-bottom .text-end { text-align: center !important; margin-top: 10px; } .footer-shape .item:nth-child(2) img { display: none; } .footer-bottom .text-end li { margin: 0 15px; } .footer-shape .item.bottom { height: auto; top: auto; bottom: 0; max-width: 50%; } /* Home Software Landing */ .feature-style-five-grid { grid-template-columns: 1fr; } .banner-style-six .content { padding-top: 60px; } .banner-style-six h2 { font-size: 36px; } .banner-style-six h4 { font-size: 18px; } .banner-style-six h4 strong { font-size: 16px; } .banner-style-six .content .thumb::after { display: none; } .banner-style-six .content .thumb img:first-child { transform: inherit; } .banner-style-six .content .thumb img:nth-child(2) { transform: inherit; right: 0; } .banner-style-six .content .thumb { padding-right: 50px; } .title { font-size: 36px; } .fun-factor-style-two-box .fun-fact { display: block; text-align: center; border-top: 1px solid #dddddd; padding-top: 30px; } .fun-factor-style-two-box .fun-fact .counter { margin: 0; align-items: center; justify-content: center; margin-bottom: 15px; } .fun-factor-style-two-box .item { margin-top: 30px; } .fun-factor-style-two-box .item:first-child { margin-top: 0; } .fun-factor-style-two-box .item:first-child .fun-fact { padding-top: 0; border: none; } .fun-factor-style-two-box { border: beige; padding-top: 60px; padding-bottom: 0; } .about-style-six-thumb { padding: 0; margin: 0; margin-bottom: 40px; } .about-style-six-thumb img:nth-child(2) { position: inherit; top: 0; width: 100%; margin-top: 30px; } .about-style-six-thumb::before { display: none; } .about-style-six-thumb .shape { display: none; } .soft-overview { padding: 0; } .soft-overview .overlay { position: inherit; margin-top: 30px; max-width: 100%; } .video-bg-live { width: 100%; } .software-video-preview { padding: 180px 0; margin-bottom: 20px; } .software-video-preview .video-play-button { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Home solar */ .banner-area.banner-solar { background-color: var(--bg-gray) !important; padding-top: 0; } .banner-area.banner-solar .banner-thumb { display: none; } .feature-style-four { border: 2px dashed rgba(255, 255, 255, 0.2); border-radius: 10px; overflow: hidden; } .feature-style-four-single { border: none !important; margin-top: 30px; } .feature-style-four-single::before, .feature-style-four-single::after { display: none; } .feature-style-four-single:first-child { margin-top: 0; } .about-style-five-thumb h2 { display: none; } .about-style-five-thumb { margin-bottom: 30px; grid-template-columns: 1fr; grid-row-gap: 30px; margin-top: 0; } .about-style-five-thumb img { width: 100%; } .about-style-five-thumb img:nth-child(2) { display: none; } .process-style-two .thumb { width: 320px; position: relative; left: -20px; } .process-style-two .thumb span { right: 0; font-size: 50px; } .process-style-two-area { overflow: hidden; background-size: contain; background-position: center top; } .process-style-two { margin-top: 50px; } .process-style-two-items { margin-top: -20px; } } /* Max Wide Mobile Layout: 600px. */ @media only screen and (min-width: 600px) and (max-width: 767px) { } /* Max Wide Mobile Layout: 600px. */ @media only screen and (min-width: 600px) and (max-width: 1200px) { /* Portfolio */ .gallery-items.colums-4 .pf-item { width: 50%; } } /* Wide Mobile Layout: 480px. */ @media only screen and (min-width: 480px) and (max-width: 767px) { } @media only screen and (max-width: 500px) { /* About */ .owner-info .right-info { display: none; } .owner-info .left-info { margin: 0; padding: 0; border: none; } .about-card li { display: block; text-align: center; } .about-card li .fun-fact { text-align: center; } .about-card li .icon { margin-bottom: 40px; } .about-card .fun-fact .counter { justify-content: center; } .about-style-four .fun-fact { display: block; border: none; margin: 0; padding: 0; margin-top: 30px; } /* Testimonial */ .testimonial-style-two .provider { display: block; } .testimonial-style-two .provider .thumb { margin-top: 15px; } /* Team */ .team-single-area .right-info .social .share-link { display: none; } /* Blog */ .blog-style-one.solid .thumb .tags { display: none; } .blog-style-one.solid .info { padding: 0; } /* Home solar */ .about-style-five-info ul li { margin: 0; padding: 0; border: none; display: block; width: 100%; margin-top: 30px; text-align: center; } .about-style-five-info ul li i { margin: 0; margin-bottom: 15px; } .about-style-five-info ul li .fun-fact { text-align: center; justify-content: center; align-items: center; display: block; } .about-style-five-info ul li .counter { justify-content: center; } .about-style-five-info ul li:first-child { margin-top: 0; } .about-style-five-info { text-align: center; } .service-style-four .info .icon .thumb { height: 80px; width: 80px; min-width: 80px; line-height: 80px; } .service-style-four .info .icon img { height: 55px; } .service-style-four .info .icon .link { height: 80px; line-height: 80px; } } @media only screen and (max-width: 400px) { /* About */ .default-features { grid-template-columns: 1fr; grid-row-gap: 30px; } .default-feature-item { text-align: center; } /* Testimonial */ .testimonial-thumb .mini-shape { right: 0; } .testimonial-thumb::after { height: 320px; width: 320px; bottom: 0; } .testimonial-thumb .thumb-item { padding: 0 30px; margin-bottom: 30px; } .testimonial-thumb .thumb-item > img { border-radius: 0 0 400px 400px; position: relative; margin-bottom: -4px; height: auto; } .testimonial-thumb .mini-shape { right: 0; } .testimonial-thumb::after { height: 320px; width: 320px; bottom: 0; } .testimonial-thumb .thumb-item { padding: 0 30px; margin-bottom: 30px; } .testimonial-thumb .thumb-item img { border-radius: 0 0 400px 400px; position: relative; margin-bottom: -4px; } .testimonial-style-one { text-align: center; } .testimonial-style-one .provider { justify-content: center; text-align: left; } .testimonial-style-one p { font-size: 20px; } .testimonial-style-one h4 { font-size: 20px; } .testimonial-style-one .provider i { font-size: 70px; } .blog-style-one.solid .blog-meta { margin-bottom: 10px; } .blog-style-one.solid .info h4 { font-size: 18px; } } /* ============================================================== # Preloader =================================================================== */ .consua-preloader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: default; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 9000; } .consua-preloader .animation-preloader { z-index: 1000; } .consua-preloader .animation-preloader .spinner { -webkit-animation: spinner 1s infinite linear; animation: spinner 1s infinite linear; border-radius: 50%; border: 3px solid rgba(2, 109, 255, 0.2); border-top-color: var(--color-primary); height: 110px; margin: 0 auto 30px auto; width: 110px; } .consua-preloader.secondary .animation-preloader .spinner { border-top-color: var(--color-secondary); } .consua-preloader .animation-preloader .txt-loading { font: bold 4em 'Outfit', sans-serif; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .consua-preloader .animation-preloader .txt-loading .letters-loading { color: rgba(0, 0, 0, 0.2); position: relative; } .consua-preloader .animation-preloader .txt-loading .letters-loading:before { -webkit-animation: letters-loading 4s infinite; animation: letters-loading 4s infinite; color: #000000; content: attr(data-text-preloader); left: 0; opacity: 0; font-family: 'Outfit', sans-serif; position: absolute; top: -3px; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } .consua-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .consua-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .consua-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .consua-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .consua-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { -webkit-animation-delay: 1s; animation-delay: 1s; } .consua-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .consua-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .consua-preloader.dark .animation-preloader .spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; } .consua-preloader.dark .animation-preloader .txt-loading .letters-loading { color: rgba(255, 255, 255, 0.2); } .consua-preloader.dark .animation-preloader .txt-loading .letters-loading:before { color: #fff; } .consua-preloader p { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 8px; color: #3b3b3b; } .consua-preloader .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; z-index: 1; pointer-events: none; } .consua-preloader .loader .row { height: 100%; } .consua-preloader .loader .loader-section { padding: 0px; } .consua-preloader .loader .loader-section .bg { background-color: #ffffff; height: 100%; left: 0; width: 100%; -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); } .consua-preloader .loader.dark_bg .loader-section .bg { background: #111339; } .consua-preloader.loaded .animation-preloader { opacity: 0; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .consua-preloader.loaded .loader-section .bg { width: 0; -webkit-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); -o-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); } @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @media screen and (max-width: 767px) { .consua-preloader .animation-preloader .spinner { height: 5em; width: 5em; } .consua-preloader .animation-preloader .txt-loading { font: bold 3.5em 'Outfit', sans-serif; } } @media screen and (max-width: 500px) { .consua-preloader .animation-preloader .spinner { height: 5em; width: 5em; } .consua-preloader .animation-preloader .txt-loading { font: bold 2em 'Outfit', sans-serif; } } .footer-bottom p{ color: #d2d2d4 !important; transition: all 0.35s ease-in-out; } .footer-bottom a{ color: var(--white); }
©
2018.