/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Utility # Cards # Common # Form # Navigations # Animations # Mobile Nav # Search Popup # Page Header # Google Map # Client Carousel --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Common --------------------------------------------------------------*/ :root { --finris-font: "DM Sans", sans-serif; --finris-font-two: "Koulen", sans-serif; --finris-gray: #5D6B81; --finris-gray-rgb: 93, 107, 129; --finris-base: #1A4936; --finris-base-rgb: 98, 50, 248; --finris-primary: #FEB72B; --finris-primary-rgb: 254, 183, 43; --finris-black: #243855; --finris-black-rgb: 36, 56, 85; --finris-white: #ffffff; --finris-white-rgb: 255, 255, 255; --finris-bdr-color: #E7E7E8; --finris-bdr-color-rgb: 231, 231, 232; } .row { --bs-gutter-x: 30px; } .gutter-y-30 { --bs-gutter-y: 30px; } body { font-family: var(--finris-font); color: var(--finris-gray); font-size: 16px; line-height: 26px; font-weight: 400; } body.locked { overflow: hidden; } a { color: var(--finris-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; } a, a:hover, a:focus, a:visited { text-decoration: none; } ::-webkit-input-placeholder { color: inherit; opacity: 1; } :-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::placeholder { color: inherit; opacity: 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--finris-font-two); color: var(--finris-black); margin: 0; } p { margin: 0; } dl, ol, ul { margin-top: 0; margin-bottom: 0; } ::-webkit-input-placeholder { color: inherit; opacity: 1; } :-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::placeholder { color: inherit; opacity: 1; } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; } .container { padding-left: 15px; padding-right: 15px; } /*=============== scrollbar-Css =============*/ ::-webkit-scrollbar-track, ::-webkit-scrollbar-track { box-shadow: none; -webkit-box-shadow: none; background-color: var(--finris-base); border-radius: 10px; } ::-webkit-scrollbar, ::-webkit-scrollbar { width: 8px; background-color: var(--finris-base); } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb { border-radius: 10px; background-image: linear-gradient(0deg, var(--finris-base) 0%, var(--finris-primary) 47.60%, var(--finris-primary) 99.23%); } .xs-sidebar-widget::-webkit-scrollbar { width: 0px; } @media (min-width: 1320px) { .container { max-width: 1320px; } } ::-webkit-input-placeholder { color: inherit; opacity: 1; } :-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::placeholder { color: inherit; opacity: 1; } #particles-js { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-position: 50% 50%; opacity: 0.4; z-index: -1; } /*-------------------------------------------------------------- # Custom Cursor --------------------------------------------------------------*/ .custom-cursor__cursor { width: 25px; height: 25px; border-radius: 100%; border: 1px solid var(--finris-base); -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out; position: fixed; pointer-events: none; left: 0; top: 0; -webkit-transform: translate(calc(-50% + 5px), -50%); transform: translate(calc(-50% + 5px), -50%); z-index: 999991; } .custom-cursor__cursor-two { width: 10px; height: 10px; border-radius: 100%; background-color: var(--finris-base); opacity: .3; position: fixed; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; -webkit-transition: width .3s, height .3s, opacity .3s; transition: width .3s, height .3s, opacity .3s; z-index: 999991; } .custom-cursor__hover { background-color: var(--finris-base); opacity: 0.4; } .custom-cursor__innerhover { width: 25px; height: 25px; opacity: .4; } /* Section Title Css */ .section-title { position: relative; display: block; margin-bottom: 47px; z-index: 1; } .section-title__tagline-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .section-title__tagline-icon-box { position: relative; display: flex; align-items: center; } .section-title__tagline-icon-1 { position: relative; display: block; width: 14px; height: 14px; background-color: var(--finris-base); transform: rotate(45deg); border-radius: 4px; z-index: 2; } .section-title__tagline-icon-2 { position: relative; display: block; width: 16px; height: 16px; border: 1px solid var(--finris-black); transform: rotate(45deg); border-radius: 4px; margin-left: -8px; z-index: 1; } .section-title__tagline { position: relative; display: inline-block; font-size: 16px; line-height: 1em; color: var(--finris-black); font-weight: 500; } .section-title__title { color: var(--finris-black); font-size: 48px; line-height: 1.2em; font-weight: 400; text-transform: uppercase; margin: 21px 0 0; } .section-title__title span { color: var(--finris-base); position: relative; display: inline-block; } .section-title__title .split-line { text-transform: uppercase; } .section-title-two { position: relative; display: block; margin-bottom: 47px; z-index: 1; } .section-title-two__tagline-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .section-title-two__tagline-icon-box { position: relative; display: flex; align-items: center; } .section-title-two__tagline-icon-1 { position: relative; display: block; width: 14px; height: 14px; border: 1px solid var(--finris-black); border-radius: 50%; z-index: 1; } .section-title-two__tagline-icon-2 { position: relative; display: block; width: 14px; height: 14px; background-color: var(--finris-base); border-radius: 50%; margin-left: -9px; z-index: 1; } .section-title-two__tagline { position: relative; display: inline-block; font-size: 17px; line-height: 1em; color: var(--finris-base); font-weight: 400; font-family: var(--finris-font-two); text-transform: uppercase; } .section-title-two__title { color: var(--finris-black); font-size: 40px; line-height: 1.3em; font-weight: 400; text-transform: uppercase; margin: 21px 0 0; } .section-title-two__title span { color: var(--finris-base); position: relative; display: inline-block; } .section-title-two__title span:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1A4936 0%, rgba(98, 50, 248, 0) 100%); } .section-title-two__title .split-line { text-transform: uppercase; } /* Thm Btn Css */ .thm-btn { position: relative; display: inline-block; vertical-align: middle; -webkit-appearance: none; outline: none !important; background-color: var(--finris-base); color: var(--finris-white); font-size: 18px; line-height: 18px; font-weight: 500; padding: 21px 30px 21px; overflow: hidden; border-radius: 12px; transition: all 0.5s linear; z-index: 1; } .thm-btn>span { position: relative; font-size: 16px; font-weight: 500; margin-right: 4px; } .thm-btn::before { position: absolute; top: 0; left: 0; content: ""; width: 50%; height: 0; visibility: hidden; background-color: var(--finris-black); opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } .thm-btn:hover:before { width: 100%; height: 100%; visibility: visible; opacity: 1; } .thm-btn::after { position: absolute; background-color: var(--finris-black); bottom: 0; right: 0; content: ""; width: 50%; height: 0; visibility: hidden; opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } .thm-btn:hover::after { width: 100%; height: 100%; visibility: visible; opacity: 1; } .thm-btn:hover { color: var(--finris-white); } .thm-btn-two { border-radius: 30px; } /*--------------------------------- Preloader CSS -----------------------------------*/ .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 20000; overflow-x: hidden !important; display: flex; align-items: center; justify-content: center; } .loader div { width: 20px; height: 20px; margin: 0 10px 0; border-radius: 50px; transform-origin: 50% 0; display: inline-block; animation: bouncing 1.4s linear infinite; } .loader div:last-child { margin: 0; } .loader div:nth-child(1) { background-color: rgba(var(--finris-base-rgb), 1.0); } .loader div:nth-child(2) { background-color: rgba(var(--finris-base-rgb), 0.70); animation-delay: 0.2s; } .loader div:nth-child(3) { background-color: rgba(var(--finris-base-rgb), 0.40); animation-delay: 0.4s; } @keyframes bouncing { 0%, 100% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-in; } 45% { transform: translateY(50px) scale(1, 1); animation-timing-function: linear; } 50% { transform: translateY(50px) scale(1.5, 0.5); animation-timing-function: linear; } 55% { transform: translateY(50px) scale(1, 1); animation-timing-function: ease-out; } } /* scroll to top */ .scroll-to-top { display: flex; align-items: center; width: auto; height: 35px; background: transparent; position: fixed; bottom: 60px; right: -12px; z-index: 99; text-align: center; opacity: 0; visibility: hidden; transform: rotate(-90deg); cursor: pointer; transition: all 0.2s ease; } .scroll-to-top:hover { color: var(--finris-base); } .scroll-to-top__text { display: inline; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-left: 10px; } .scroll-to-top__wrapper { display: inline-block; width: 30px; height: 4px; background-color: var(--finris-base); position: relative; overflow: hidden; } .scroll-to-top__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--finris-black); } .scroll-to-top.show { opacity: 1; visibility: visible; bottom: 70px; } /** xs sidebar **/ .xs-sidebar-group .xs-overlay { left: 0%; top: 0; position: fixed; height: 100%; opacity: 0; width: 100%; visibility: hidden; -webkit-transition: all .4s ease-in .8s; -o-transition: all .4s ease-in .8s; transition: all .4s ease-in .8s; cursor: url(../images/icon/cross-out.png), pointer; z-index: 9999; } .xs-sidebar-group.isActive .xs-overlay { opacity: .8; visibility: visible; -webkit-transition: all .8s ease-out 0s; -o-transition: all .8s ease-out 0s; transition: all .8s ease-out 0s; right: 100%; } .xs-sidebar-group .widget-heading { position: absolute; top: 0; right: 0; padding: 25px; } .xs-sidebar-group .widget-heading a { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; line-height: 30px; text-align: center; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 16px; font-weight: 400; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .xs-sidebar-group .widget-heading a:hover { color: var(--finris-base); border-color: var(--finris-base); } .xs-sidebar-widget { position: fixed; left: -100%; top: 0; bottom: 0; width: 100%; max-width: 360px; z-index: 999999; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; -o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; visibility: hidden; opacity: 0; } .xs-sidebar-group.isActive .xs-sidebar-widget { opacity: 1; visibility: visible; left: 0; background-color: var(--finris-black); -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; -o-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; } .sidebar-textwidget { padding: 70px 30px; } .sidebar-widget-container { position: relative; top: 150px; opacity: 0; visibility: hidden; -webkit-transition: all .3s ease-in .3s; -o-transition: all .3s ease-in .3s; transition: all .3s ease-in .3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .xs-sidebar-group.isActive .sidebar-widget-container { top: 0px; opacity: 1; visibility: visible; -webkit-transition: all 1s ease-out 1.2s; -o-transition: all 1s ease-out 1.2s; transition: all 1s ease-out 1.2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .xs-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .8; z-index: 0; } .xs-bg-black { background-color: #000000; } .xs-sidebar-group .content-inner .logo { position: relative; max-width: 172px; width: 100%; margin-bottom: 30px; } .xs-sidebar-group .content-inner h4 { position: relative; display: block; font-size: 20px; line-height: 30px; color: #fff; font-weight: 400; text-transform: uppercase; margin-bottom: 15px; } .xs-sidebar-group .content-inner .content-box { margin-bottom: 30px; padding-right: 15px; } .xs-sidebar-group .content-inner .content-box p { color: #ffffff; } .xs-sidebar-group .content-inner .form-inner .form-group { position: relative; margin-bottom: 20px; } .xs-sidebar-group .content-inner .form-inner .form-group:last-child { margin-bottom: 0px; } .xs-sidebar-group .content-inner .form-inner .form-group input[type='text'], .xs-sidebar-group .content-inner .form-inner .form-group input[type='email'], .xs-sidebar-group .content-inner .form-inner .form-group textarea { position: relative; display: block; width: 100%; height: 50px; font-size: 15px; padding: 10px 20px; color: #848484; border: none; outline: none; transition: all 500ms ease; } .xs-sidebar-group .content-inner .form-inner .form-group .form-inner__btn { border: none; outline: none; background-color: var(--finris-white); color: var(--finris-black); display: inline-block; font-size: 18px; font-weight: 500; padding: 21px 45px 21px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .xs-sidebar-group .content-inner .form-inner .form-group .form-inner__btn:hover { color: var(--finris-white); } .xs-sidebar-group .content-inner .form-inner .form-group .form-inner__btn:after { background-color: var(--finris-base); } .xs-sidebar-group .content-inner .form-inner .form-group textarea { resize: none; height: 120px; } .xs-sidebar-group .content-inner .form-inner .form-group input:focus, .xs-sidebar-group .content-inner .form-inner .form-group textarea:focus { border-color: #00224f; } /*-------------------------------------------------------------- # Navigations One --------------------------------------------------------------*/ .main-header { background: transparent; position: absolute; left: 0; right: 0; width: 100%; transition: all 500ms ease; z-index: 999; } .main-header:after { position: absolute; bottom: 0; left: 0; right: 0; top: 0; content: ""; background-color: rgba(var(--finris-white-rgb), 0.05); z-index: -1; } .main-menu { position: relative; display: block; } .main-menu__wrapper { position: relative; display: block; border-bottom: 1px solid rgba(var(--finris-black-rgb), .10); } .main-menu__wrapper-inner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .main-menu__left { display: block; } .main-menu__logo { display: block; padding: 30.5px 0; } .main-menu__main-menu-box { display: block; } .main-menu__right { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 30px; } .main-menu__search-box { position: relative; display: block; } .main-menu__search { position: relative; display: flex; align-items: center; font-size: 26px; color: var(--finris-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer; } .main-menu__search:hover { color: var(--finris-base); } .main-menu__btn-box { position: relative; display: block; } .main-menu__nav-sidebar-icon { position: relative; display: block; } .main-menu__nav-sidebar-icon a { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; border: 1px solid var(--finris-black); border-radius: 50%; font-size: 20px; color: var(--finris-black); } .main-menu__nav-sidebar-icon a:hover { border: 1px solid var(--finris-base); background-color: var(--finris-base); color: var(--finris-white); } .stricky-header.main-menu { background-color: #fbe1ec; } .main-menu .main-menu__list, .main-menu .main-menu__list>li>ul, .main-menu .main-menu__list>li>ul>li>ul, .stricky-header .main-menu__list, .stricky-header .main-menu__list>li>ul, .stricky-header .main-menu__list>li>ul>li>ul { margin: 0; padding: 0; list-style-type: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: none; } @media (min-width: 1200px) { .main-menu .main-menu__list, .main-menu .main-menu__list>li>ul, .main-menu .main-menu__list>li>ul>li>ul, .stricky-header .main-menu__list, .stricky-header .main-menu__list>li>ul, .stricky-header .main-menu__list>li>ul>li>ul { display: -webkit-box; display: -ms-flexbox; display: flex; } } .main-menu .main-menu__list>li, .stricky-header .main-menu__list>li { padding-top: 27px; padding-bottom: 27px; position: relative; } .main-menu .main-menu__list>li+li, .stricky-header .main-menu__list>li+li { margin-left: 19px; } .main-menu .main-menu__list>li>a, .stricky-header .main-menu__list>li>a { font-size: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--finris-black); position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; font-weight: 500; line-height: 16px; padding: 10px 15px 10px; border-radius: 18px; } .main-menu .main-menu__list>li>a::before, .stricky-header .main-menu__list>li>a::before { content: ""; border: 1px solid var(--finris-black); border-radius: 18px; position: absolute; bottom: 0; left: 0px; right: 0px; top: 0; transition: transform 500ms ease; transform: scale(0, 1); transform-origin: left center; z-index: 1; } .main-menu .main-menu__list>li.dropdown>a { padding-right: 30px; } .main-menu .main-menu__list>li.dropdown>a:after { position: absolute; top: 50%; right: 15px; font-family: "Font Awesome 5 Pro"; content: "\f107"; font-size: 14px; color: var(--finris-black); transform: translateY(-50%); font-weight: 700; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } img.clickMe { position: absolute; width: 30px; left: 21px; bottom: -22px; opacity: 0.20; } .main-menu .main-menu__list>li>ul, .main-menu .main-menu__list>li>ul>li>ul, .stricky-header .main-menu__list>li>ul, .stricky-header .main-menu__list>li>ul>li>ul { position: absolute; top: 100%; left: 0; background-color: #121A46; min-width: 280px; padding: 25px 30px 25px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; opacity: 0; visibility: hidden; z-index: 99; transform: perspective(500px) rotatex(-20deg); transform-origin: 50% 0%; -webkit-box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%); -khtml-box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%); -moz-box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%); -ms-box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%); -o-box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%); box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%); -webkit-transition: all 300ms linear 0ms; -khtml-transition: all 300ms linear 0ms; -moz-transition: all 300ms linear 0ms; -ms-transition: all 300ms linear 0ms; -o-transition: all 300ms linear 0ms; transition: all 300ms linear 0ms; } .main-menu .main-menu__list>li:hover>ul, .main-menu .main-menu__list>li>ul>li:hover>ul, .stricky-header .main-menu__list>li:hover>ul, .stricky-header .main-menu__list>li>ul>li:hover>ul { opacity: 1; visibility: visible; transform: perspective(500px) rotatex(0); } .main-menu .main-menu__list>li>ul>li>ul>li>ul, .stricky-header .main-menu__list>li>ul>li>ul>li>ul { display: none; } .main-menu .main-menu__list>li>ul>li, .main-menu .main-menu__list>li>ul>li>ul>li, .stricky-header .main-menu__list>li>ul>li, .stricky-header .main-menu__list>li>ul>li>ul>li { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; width: 100%; position: relative; } .main-menu .main-menu__list>li>ul>li+li, .main-menu .main-menu__list>li>ul>li>ul>li+li, .stricky-header .main-menu__list>li>ul>li+li, .stricky-header .main-menu__list>li>ul>li>ul>li+li { border-top: 1px solid rgba(var(--finris-white-rgb), 0.05); margin-top: 0px; } .main-menu .main-menu__list>li>ul>li>a, .main-menu .main-menu__list>li>ul>li>ul>li>a, .stricky-header .main-menu__list>li>ul>li>a, .stricky-header .main-menu__list>li>ul>li>ul>li>a { position: relative; display: flex; align-items: center; color: rgba(var(--finris-white-rgb), 0.80); font-size: 16px; line-height: 16px; font-weight: 400; padding: 17px 0px 17px; -webkit-transition: all 200ms linear 0ms; -khtml-transition: all 200ms linear 0ms; -moz-transition: all 200ms linear 0ms; -ms-transition: all 200ms linear 0ms; -o-transition: all 200ms linear 0ms; transition: all 200ms linear 0ms; } .main-menu .main-menu__list>li>ul>li:hover>a, .main-menu .main-menu__list>li>ul>li>ul>li:hover>a, .stricky-header .main-menu__list>li>ul>li:hover>a, .stricky-header .main-menu__list>li>ul>li>ul>li:hover>a { color: rgba(var(--finris-white-rgb), 1.0); padding-left: 5px; } .main-menu .main-menu__list>li>ul>li.dropdown>a::before, .main-menu .main-menu__list>li>ul>li>ul>li.dropdown>a::before, .stricky-header .main-menu__list>li>ul>li.dropdown>a::before, .stricky-header .main-menu__list>li>ul>li>ul>li.dropdown>a::before { position: absolute; top: 50%; right: 0px; font-family: "Font Awesome 5 Pro"; font-weight: 400; content: "\f105"; font-size: 14px; color: var(--finris-white); transform: translateY(-50%) scale(1.0) rotate(0deg); -webkit-transition: 500ms; transition: 500ms; } .main-menu .main-menu__list>li>ul>li.dropdown:hover>a::before, .main-menu .main-menu__list>li>ul>li>ul>li.dropdown:hover>a::before, .stricky-header .main-menu__list>li>ul>li.dropdown:hover>a::before, .stricky-header .main-menu__list>li>ul>li>ul>li.dropdown:hover>a::before { color: var(--finris-base); transform: translateY(-50%) scale(1) rotate(90deg); } .main-menu .main-menu__list>li>ul>li>ul, .stricky-header .main-menu__list>li>ul>li>ul { top: 0; left: 100%; border-left: 40px solid transparent; background-color: transparent; width: 320px; } .main-menu .main-menu__list>li>ul>li>ul::before, .stricky-header .main-menu__list>li>ul>li>ul::before { content: ""; position: absolute; top: 0; left: 0px; bottom: 0; right: 0; background-color: #121A46; } .main-menu .main-menu__list li ul li>ul.right-align, .stricky-header .main-menu__list li ul li>ul.right-align { top: 0; left: auto; right: 100%; } .stricky-header { position: fixed; z-index: 991; top: 0; left: 0; background-color: #fff; width: 100%; visibility: hidden; -webkit-transform: translateY(-120%); transform: translateY(-120%); -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: transform 500ms ease, visibility 500ms ease; transition: transform 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); } @media (max-width: 1199px) { .stricky-header { display: none !important; } } .stricky-header.stricky-fixed { -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; } .stricky-header .main-menu__inner { -webkit-box-shadow: none; box-shadow: none; padding-right: 0; max-width: 1170px; width: 100%; margin: 0 auto; } .mobile-nav__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: auto; margin-right: 10px; } @media (min-width: 1200px) { .mobile-nav__buttons { display: none; } } .mobile-nav__buttons a { font-size: 20px; color: var(--finris-base); cursor: pointer; } .mobile-nav__buttons a+a { margin-left: 10px; } .mobile-nav__buttons a:hover { color: var(--finris-base); } .main-menu .mobile-nav__toggler { font-size: 20px; color: var(--finris-base); cursor: pointer; -webkit-transition: 500ms; transition: 500ms; position: relative; top: 2px; } .main-menu .mobile-nav__toggler:hover { color: var(--finris-black); } @media (min-width: 1200px) { .main-menu .mobile-nav__toggler { display: none; } } /*-------------------------------------------------------------- # Mobile Nav --------------------------------------------------------------*/ .mobile-nav__wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; transition: transform 500ms ease 500ms, visibility 500ms ease 500ms; transition: transform 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; visibility: hidden; } .mobile-nav__wrapper .container { padding-left: 0; padding-right: 0; } .mobile-nav__wrapper.expanded { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); visibility: visible; -webkit-transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; transition: transform 500ms ease 0ms, visibility 500ms ease 0ms; transition: transform 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; } .mobile-nav__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; opacity: 0.5; cursor: pointer; } .mobile-nav__content { width: 300px; background-color: var(--finris-black); z-index: 10; position: relative; height: 100%; overflow-y: auto; padding-top: 30px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; opacity: 0; visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms; transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms; transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms, -webkit-transform 500ms ease 0ms; } .mobile-nav__wrapper.expanded .mobile-nav__content { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms; transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms; transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms, -webkit-transform 500ms ease 500ms; } .mobile-nav__content .logo-box { margin-bottom: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; } .mobile-nav__close { position: absolute; top: 20px; right: 15px; font-size: 18px; color: var(--finris-white); cursor: pointer; } .mobile-nav__content .main-menu__list, .mobile-nav__content .main-menu__list>li>ul, .mobile-nav__content .main-menu__list>li>ul>li>ul { margin: 0; padding: 0; list-style-type: none; } .mobile-nav__content .main-menu__list>li>ul, .mobile-nav__content .main-menu__list>li>ul>li>ul { display: none; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-left: 0.5em; } .mobile-nav__content .main-menu__list>li:not(:last-child), .mobile-nav__content .main-menu__list>li>ul>li:not(:last-child), .mobile-nav__content .main-menu__list>li>ul>li>ul>li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav__content .main-menu__list>li>a>.main-menu-border { display: none !important; } .mobile-nav__content .main-menu__list>li>a, .mobile-nav__content .main-menu__list>li>ul>li>a, .mobile-nav__content .main-menu__list>li>ul>li>ul>li>a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; line-height: 30px; color: #ffffff; font-size: 14px; font-family: var(--finris-font, "Rubik", sans-serif); font-weight: 500; height: 46px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: 500ms; transition: 500ms; } .mobile-nav__content .main-menu__list>li>a.expanded .mobile-nav__content .main-menu__list>li>ul>li>a.expanded .mobile-nav__content .main-menu__list>li>ul>li>ul>li>a.expanded { color: var(--finris-base); } .mobile-nav__content .main-menu__list li a.expanded { color: var(--finris-base); } .mobile-nav__content .main-menu__list>li>a>button, .mobile-nav__content .main-menu__list>li>ul>li>a>button, .mobile-nav__content .main-menu__list>li>ul>li>ul>li>a>button { width: 30px; height: 30px; background-color: var(--finris-base); border: none; outline: none; color: #fff; 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; text-align: center; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; padding: 0; } .mobile-nav__content .main-menu__list>li>a>button.expanded, .mobile-nav__content .main-menu__list>li>ul>li>a>button.expanded, .mobile-nav__content .main-menu__list>li>ul>li>ul>li>a>button.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); background-color: #fff; color: var(--finris-base); } /* no menu after 2rd level dropdown */ .mobile-nav__content .main-menu__list>li>ul>li>ul>li>a>button, .mobile-nav__content .main-menu__list>li>ul>li>ul>li>ul { display: none !important; } .mobile-nav__content .main-menu__list li.cart-btn span { position: relative; top: auto; right: auto; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .mobile-nav__content .main-menu__list li.cart-btn i { font-size: 16px; } .mobile-nav__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 30px; } .mobile-nav__top .main-menu__login a { color: var(--finris-text-dark); } .mobile-nav__container { border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav__social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mobile-nav__social a { font-size: 16px; color: var(--finris-white); -webkit-transition: 500ms; transition: 500ms; } .mobile-nav__social a+a { margin-left: 30px; } .mobile-nav__social a:hover { color: var(--finris-base); } .mobile-nav__contact { margin-bottom: 0; margin-top: 20px; margin-bottom: 20px; } .mobile-nav__contact li { color: var(--finris-text-dark); font-size: 14px; font-weight: 500; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mobile-nav__contact li+li { margin-top: 15px; } .mobile-nav__contact li a { color: #ffffff; -webkit-transition: 500ms; transition: 500ms; } .mobile-nav__contact li a:hover { color: var(--finris-base); } .mobile-nav__contact li>i { width: 30px; height: 30px; border-radius: 50%; background-color: var(--finris-base); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-size: 11px; margin-right: 10px; color: #fff; } .mobile-nav__container .main-logo, .mobile-nav__container .topbar__buttons, .mobile-nav__container .main-menu__language, .mobile-nav__container .main-menu__login { display: none; } /*-------------------------------------------------------------- # Megamenu Popup --------------------------------------------------------------*/ .mobile-nav__container .main-menu__list>.megamenu.megamenu-clickable>ul, .main-menu .main-menu__list>.megamenu.megamenu-clickable>ul, .stricky-header .main-menu__list>.megamenu.megamenu-clickable>ul { position: fixed; top: 0 !important; left: 0 !important; width: 100vw; height: 100vh; visibility: visible; overflow-y: scroll; visibility: hidden; opacity: 0; transform: translateY(100px); -webkit-transform-origin: bottom center; transform-origin: bottom center; transition: transform 0.7s ease, opacity 0.7s ease, visibility 0.7s ease; z-index: 999999; -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; padding: 0; background-color: #121A46; display: block !important; margin: 0; } .main-menu__list>li.megamenu-clickable>ul::-webkit-scrollbar { display: none; } .mobile-nav__container .main-menu__list>.megamenu.megamenu-clickable>ul.megamenu-clickable--active, .main-menu .main-menu__list>.megamenu.megamenu-clickable>ul.megamenu-clickable--active, .stricky-header .main-menu__list>.megamenu.megamenu-clickable>ul.megamenu-clickable--active { -webkit-transform-origin: top center; transform-origin: top center; transform: translateY(0px); opacity: 1; visibility: visible; transition: transform 0.7s ease, opacity 0.7s ease, visibility 0.7s ease; } body.megamenu-popup-active { overflow: hidden; } body.megamenu-popup-active .stricky-header { bottom: 0; } body.megamenu-popup-active .mobile-nav__content { overflow: unset; } .mobile-nav__content .megamenu-popup-content-one .container { padding-left: 15px; padding-right: 15px; } .megamenu-popup { position: relative; } .megamenu-popup .megamenu-clickable--close { position: absolute; top: 0px; right: 0px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: var(--finris-white); background-color: rgba(255, 255, 255, 0.2); } @media (min-width: 1300px) { .megamenu-popup .megamenu-clickable--close { top: 0px; right: 0px; } } .megamenu-popup .megamenu-clickable--close:hover { color: var(--finris-primary); } .megamenu-popup .megamenu-clickable--close span { width: 24px; height: 24px; display: block; position: relative; color: currentColor; transition: all 500ms ease; } .megamenu-popup .megamenu-clickable--close span::before, .megamenu-popup .megamenu-clickable--close span::after { content: ""; width: 100%; height: 2px; background-color: currentColor; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .megamenu-popup .megamenu-clickable--close span::after { transform: translate(-50%, -50%) rotate(45deg); } /*-------------------------------------------------------------- # Home Showcase --------------------------------------------------------------*/ .megamenu-popup-content-one { padding-top: 120px; padding-bottom: 120px; } .megamenu-popup-content-one .row { --bs-gutter-y: 30px; justify-content: center; } .megamenu-popup-content-one__single { background-color: var(--finris-white); box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 7%); text-align: center; border-radius: var(--finris-bdr-radius); transition: 500ms ease; transform: translateY(0px); } .megamenu-popup-content-one__single:hover { transform: translateY(-10px); } .megamenu-popup-content-one__image { position: relative; overflow: hidden; border-top-left-radius: var(--finris-bdr-radius); border-top-right-radius: var(--finris-bdr-radius); } .megamenu-popup-content-one__image img { max-width: 100%; width: 100%; border-top-left-radius: var(--finris-bdr-radius); border-top-right-radius: var(--finris-bdr-radius); transition: filter 500ms ease; filter: blur(0px); } .megamenu-popup-content-one__single:hover .megamenu-popup-content-one__image img { filter: blur(2px); } .megamenu-popup-content-one__btns { background-color: rgba(var(--finris-black-rgb), .70); position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 20px; transform: scale(1, 0); transition: transform 500ms ease, opacity 600ms linear; transform-origin: top center; opacity: 0; } .megamenu-popup-content-one__single:hover .megamenu-popup-content-one__btns { transform: scale(1, 1); opacity: 1; transform-origin: bottom center; } .megamenu-popup-content-one__title { margin: 0; text-align: center; font-size: 20px; line-height: 20px; font-weight: 400; color: var(--finris-white); background-color: var(--finris-base); text-transform: uppercase; padding-top: 18px; padding-bottom: 16px; letter-spacing: 0.09em; } .megamenu-popup-content-one__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .megamenu-popup-content-one__title a:hover { background-size: 100% 1px; } .megamenu-popup-content-one__btn { padding: 19px 20px 19px; width: 155px; text-align: center; } .megamenu-popup-content-one__btn::after { background-color: var(--finris-white); } .megamenu-popup-content-one__btn:hover { color: var(--finris-black); } @media (max-width: 1199px) { .megamenu-popup-content-one__btns { flex-direction: column; } } /*-------------------------------------------------------------- # Navigations Two --------------------------------------------------------------*/ .main-header-two { background: transparent; position: absolute; left: 0; right: 0; width: 100%; transition: all 500ms ease; z-index: 999; } .main-header-two:after { position: absolute; bottom: 0; left: 0; right: 0; top: 0; content: ""; background-color: rgba(var(--finris-white-rgb), 0.02); z-index: -1; } .main-menu-two__top { position: relative; display: block; } .main-menu-two__top-inner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 55px 9px; border-bottom: 1px solid rgba(var(--finris-white-rgb), .10); } .main-menu-two__contact-list { position: relative; display: flex; align-items: center; } .main-menu-two__contact-list li { position: relative; display: flex; align-items: center; } .main-menu-two__contact-list li+li { margin-left: 46px; } .main-menu-two__contact-list li:before { content: ""; position: absolute; top: 1px; bottom: 2px; left: -23px; width: 1px; background-color: rgba(var(--finris-white-rgb), .20); } .main-menu-two__contact-list li:first-child:before { display: none; } .main-menu-two__contact-list li .icon { position: relative; display: flex; align-items: center; } .main-menu-two__contact-list li .icon i { font-size: 16px; color: var(--finris-primary); position: relative; display: inline-block; } .main-menu-two__contact-list li .text { margin-left: 10px; } .main-menu-two__contact-list li .text p { font-size: 16px; font-weight: 400; color: var(--finris-white); text-transform: uppercase; font-family: var(--finris-font-two); letter-spacing: 0.03em; line-height: 16px; } .main-menu-two__contact-list li .text p a { color: var(--finris-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-two__contact-list li .text p a:hover { color: var(--finris-primary); } .main-menu-two__top-welcome-text { font-size: 16px; font-weight: 400; color: var(--finris-white); text-transform: uppercase; font-family: var(--finris-font-two); letter-spacing: 0.03em; line-height: 16px; } .main-menu-two__top-right { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .main-menu-two__top-time { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .main-menu-two__top-time-icon { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .main-menu-two__top-time-icon span { position: relative; display: inline-block; font-size: 16px; color: var(--finris-primary); } .main-menu-two__top-text { font-size: 16px; font-weight: 400; color: var(--finris-white); text-transform: uppercase; font-family: var(--finris-font-two); letter-spacing: 0.03em; line-height: 16px; margin-left: 10px; } .main-menu-two__social { position: relative; display: flex; align-items: center; margin-left: 40px; } .main-menu-two__social a { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; border: 1px solid rgba(var(--finris-white-rgb), .10); border-radius: 5px; font-size: 15px; color: var(--finris-white); background-color: transparent; overflow: hidden; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; z-index: 1; } .main-menu-two__social a:hover { color: var(--finris-white); border: 1px solid var(--finris-primary); } .main-menu-two__social a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: var(--finris-primary); transform: scale(0.5); border-radius: 5px; opacity: 0; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; z-index: -1; } .main-menu-two__social a:hover::before { transform: scale(1.0); opacity: 1; } .main-menu-two__social a+a { margin-left: 5px; } .main-menu-two__wrapper { position: relative; display: block; } .main-menu-two__wrapper-inner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 55px; } .main-menu-two__left { display: block; } .main-menu-two__logo { display: block; } .main-menu-two__main-menu-box { display: block; } .main-menu-two__right { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 30px; } .main-menu-two__call { position: relative; display: flex; align-items: center; } .main-menu-two__call-icon { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; background-color: var(--finris-base); border-radius: 50%; color: var(--finris-white); font-size: 17px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-two__call-icon:hover { background-color: var(--finris-primary); color: var(--finris-white); } .main-menu-two__call-content { position: relative; display: block; margin-left: 10px; } .main-menu-two__call-sub-title { font-size: 14px; font-weight: 400; color: rgba(var(--finris-white-rgb), .90); line-height: 14px; font-family: var(--finris-font-two); letter-spacing: 0.03em; text-transform: uppercase; } .main-menu-two__call-number { font-size: 20px; font-weight: 400; line-height: 20px; margin-top: 6px; font-family: var(--finris-font-two); letter-spacing: 0.03em; text-transform: uppercase; } .main-menu-two__call-number a { color: var(--finris-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-two__call-number a:hover { color: var(--finris-primary); } .main-menu-two__search-cart-box { position: relative; display: flex; align-items: center; } .main-menu-two__search-box { position: relative; display: block; } .main-menu-two__search { position: relative; display: flex; align-items: center; font-size: 24px; color: var(--finris-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer; } .main-menu-two__search:hover { color: var(--finris-primary); } .main-menu-two__cart-box { position: relative; display: block; margin-left: 20px; } .main-menu-two__cart { position: relative; display: flex; align-items: center; font-size: 24px; color: var(--finris-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-menu-two__cart:hover { color: var(--finris-primary); } .main-menu-two__btn::after { background-color: var(--finris-white); } .main-menu-two__btn:hover { color: var(--finris-black); } .main-menu-two .main-menu__list>li>a, .stricky-header.main-menu-two .main-menu__list>li>a { color: var(--finris-white); } .main-menu-two .main-menu__list>li>a::before, .stricky-header.main-menu-two .main-menu__list>li>a::before { border: 1px solid var(--finris-primary); } .stricky-header.main-menu-two { background-color: #22265F; } /*-------------------------------------------------------------- # Navigations three --------------------------------------------------------------*/ .main-header-three { background: transparent; position: absolute; left: 0; right: 0; width: 100%; transition: all 500ms ease; z-index: 999; } /*-------------------------------------------------------------- # Search Popup --------------------------------------------------------------*/ .search-popup { position: fixed; left: 0; top: 0; height: 120px; width: 100%; z-index: 99999; transform: translateY(-100%); transition: all 0.5s; } .search-active .search-popup { transform: translateY(0%); } .search-popup .color-layer { position: absolute; content: ''; left: 0; top: 0; height: 120px; width: 100%; background-color: var(--finris-base); transition: all 0.5s; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.05); } .sidenav-bar-visible .search-popup { display: none; } .search-popup .close-search { position: absolute; right: 25px; top: 25px; display: flex; align-items: center; justify-content: center; width: 60px; height: 70px; background-color: rgba(255, 255, 255, 0.2); border-radius: 0%; cursor: pointer; color: #ffffff; font-size: 30px; transition: all 0.5s; border: none; opacity: 0; transform: translateX(100px); visibility: hidden; z-index: 9999; } .search-popup .close-search:hover { color: var(--finris-base); background-color: rgba(255, 255, 255, 1.0); } .search-active .search-popup .close-search { opacity: 1; transform: translateX(0px); visibility: visible; -webkit-transition-delay: 1500ms; -moz-transition-delay: 1500ms; -ms-transition-delay: 1500ms; -o-transition-delay: 1500ms; transition-delay: 1500ms; } .search-popup form { position: absolute; max-width: 700px; top: 25px; left: 0px; right: 0px; margin: 0px auto 0; opacity: 0; transition: all 0.5s; z-index: 999; } .search-active .search-popup form { opacity: 1; } .search-popup .form-group { position: relative; display: block; overflow: hidden; margin: 0; } .search-popup .form-group input[type="text"], .search-popup .form-group input[type="search"] { position: relative; display: block; background-color: rgba(255, 255, 255, 1.0); font-size: 18px; color: var(--finris-black); height: 70px; width: 100%; padding: 10px 30px 10px 75px; font-weight: 500; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; text-transform: capitalize; border: 0px solid rgba(0, 0, 0, 0.10) } .search-popup .form-group input[type="text"], .search-popup .form-group input[type="search"]:focus { outline: none; } .search-popup .form-group input[type="submit"], .search-popup .form-group button { position: absolute; left: 0px; top: 0px; height: 70px; background: var(--finris-black); text-align: center; font-size: 20px; color: var(--finris-white); padding: 0; cursor: pointer; border: none; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; width: 60px; } .search-popup .form-group button i { font-style: normal; } .search-popup .form-group input[type="submit"]:hover, .search-popup .form-group button:hover { background-color: var(--finris-primary); } .search-popup input::placeholder { color: var(--finris-black); } /*-------------------------------------------------------------- # Edit All Css --------------------------------------------------------------*/ .portfolio-one__btn::after { background-color: var(--finris-white); } .portfolio-one__btn::before { background-color: var(--finris-white); } .portfolio-one__btn:hover { color: var(--finris-black); } .comment-one__btn { display: inline-flex; align-items: center; font-size: 14px; line-height: 14px; font-weight: 500; padding: 5px 9px 5px; border-radius: 13px; gap: 5px; } .comment-one__btn span { font-size: 10px; } .sidebar__subscribe-btn { border: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; font-size: 15px; line-height: 15px; padding: 19px 25px 19px; } .cta-three__btn { border: none; } .services-details__contact-btn { font-size: 16px; line-height: 16px; font-weight: 400; padding: 21px 25px 21px; gap: 5px; border-radius: 30px; } .services-details__contact-btn i { position: relative; top: 2px; margin-right: 5px; } /*-------------------------------------------------------------- # Carousle Dot Style --------------------------------------------------------------*/ .carousel-dot-style.owl-carousel .owl-stage-outer { overflow: visible; } .carousel-dot-style.owl-carousel .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .carousel-dot-style.owl-carousel .owl-item.active { opacity: 1; visibility: visible; } .carousel-dot-style.owl-carousel .owl-dots { position: absolute; bottom: -50px; left: 0px; right: 0; text-align: center; margin: 0 !important; display: flex; align-items: center; justify-content: center; } .carousel-dot-style.owl-carousel .owl-dots .owl-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--finris-base); margin: 0px 5px; padding: 0px; transition: all 100ms linear; transition-delay: 0.1s; } .carousel-dot-style.owl-carousel .owl-dot.active { width: 10px; height: 10px; background-color: var(--finris-black); } .carousel-dot-style.owl-carousel .owl-dot:focus { outline: none; } .carousel-dot-style.owl-carousel .owl-dots .owl-dot span { display: none; } .banner-two__btn::after { background-color: var(--finris-white); } .banner-two__btn:hover { color: var(--finris-black); } .slider-position{ margin-top: 90px; } /* @charset "UTF-8";/*! * animate.css - https://animate.style/ * Version - 4.1.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2020 Animate.css */ */ :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; } .not-animated, [data-animate]:not(.animated) { opacity: 0; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.repeat-1 { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-iteration-count: var(--animate-repeat); animation-iteration-count: var(--animate-repeat); } .animated.repeat-2 { -webkit-animation-iteration-count: calc(1 * 2); animation-iteration-count: calc(1 * 2); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); animation-iteration-count: calc(var(--animate-repeat) * 2); } .animated.repeat-3 { -webkit-animation-iteration-count: calc(1 * 3); animation-iteration-count: calc(1 * 3); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); animation-iteration-count: calc(var(--animate-repeat) * 3); } .animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay); } .animated.delay-2s { -webkit-animation-delay: calc(1s * 2); animation-delay: calc(1s * 2); -webkit-animation-delay: calc(var(--animate-delay) * 2); animation-delay: calc(var(--animate-delay) * 2); } .animated.delay-3s { -webkit-animation-delay: calc(1s * 3); animation-delay: calc(1s * 3); -webkit-animation-delay: calc(var(--animate-delay) * 3); animation-delay: calc(var(--animate-delay) * 3); } .animated.delay-4s { -webkit-animation-delay: calc(1s * 4); animation-delay: calc(1s * 4); -webkit-animation-delay: calc(var(--animate-delay) * 4); animation-delay: calc(var(--animate-delay) * 4); } .animated.delay-5s { -webkit-animation-delay: calc(1s * 5); animation-delay: calc(1s * 5); -webkit-animation-delay: calc(var(--animate-delay) * 5); animation-delay: calc(var(--animate-delay) * 5); } .animated.faster { -webkit-animation-duration: calc(1s / 2); animation-duration: calc(1s / 2); -webkit-animation-duration: calc(var(--animate-duration) / 2); animation-duration: calc(var(--animate-duration) / 2); } .animated.fast { -webkit-animation-duration: calc(1s * 0.8); animation-duration: calc(1s * 0.8); -webkit-animation-duration: calc(var(--animate-duration) * 0.8); animation-duration: calc(var(--animate-duration) * 0.8); } .animated.slow { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); } .animated.slower { -webkit-animation-duration: calc(1s * 3); animation-duration: calc(1s * 3); -webkit-animation-duration: calc(var(--animate-duration) * 3); animation-duration: calc(var(--animate-duration) * 3); } @media print, (prefers-reduced-motion: reduce) { .animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } .animated[class*='Out'] { opacity: 0; } } /* Attention seekers */ @-webkit-keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shakeX { -webkit-animation-name: shakeX; animation-name: shakeX; } @-webkit-keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } .shakeY { -webkit-animation-name: shakeY; animation-name: shakeY; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: calc(1s * 1.3); animation-duration: calc(1s * 1.3); -webkit-animation-duration: calc(var(--animate-duration) * 1.3); animation-duration: calc(var(--animate-duration) * 1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } /* Back entrances */ @-webkit-keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .backInDown { -webkit-animation-name: backInDown; animation-name: backInDown; } @-webkit-keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .backInLeft { -webkit-animation-name: backInLeft; animation-name: backInLeft; } @-webkit-keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .backInRight { -webkit-animation-name: backInRight; animation-name: backInRight; } @-webkit-keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .backInUp { -webkit-animation-name: backInUp; animation-name: backInUp; } /* Back exits */ @-webkit-keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } @keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } .backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown; } @-webkit-keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } .backOutLeft { -webkit-animation-name: backOutLeft; animation-name: backOutLeft; } @-webkit-keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } .backOutRight { -webkit-animation-name: backOutRight; animation-name: backOutRight; } @-webkit-keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } @keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } .backOutUp { -webkit-animation-name: backOutUp; animation-name: backOutUp; } /* Bouncing entrances */ @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } /* Bouncing exits */ @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } /* Fading entrances */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInTopLeft { -webkit-animation-name: fadeInTopLeft; animation-name: fadeInTopLeft; } @-webkit-keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInTopRight { -webkit-animation-name: fadeInTopRight; animation-name: fadeInTopRight; } @-webkit-keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInBottomLeft { -webkit-animation-name: fadeInBottomLeft; animation-name: fadeInBottomLeft; } @-webkit-keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInBottomRight { -webkit-animation-name: fadeInBottomRight; animation-name: fadeInBottomRight; } /* Fading exits */ @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } @keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } .fadeOutTopLeft { -webkit-animation-name: fadeOutTopLeft; animation-name: fadeOutTopLeft; } @-webkit-keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } @keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } .fadeOutTopRight { -webkit-animation-name: fadeOutTopRight; animation-name: fadeOutTopRight; } @-webkit-keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } @keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } .fadeOutBottomRight { -webkit-animation-name: fadeOutBottomRight; animation-name: fadeOutBottomRight; } @-webkit-keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } @keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } .fadeOutBottomLeft { -webkit-animation-name: fadeOutBottomLeft; animation-name: fadeOutBottomLeft; } /* Flippers */ @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } /* Lightspeed */ @-webkit-keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } .lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /* Rotating entrances */ @-webkit-keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Rotating exits */ @-webkit-keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Specials */ @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); -webkit-animation-name: hinge; animation-name: hinge; -webkit-transform-origin: top left; transform-origin: top left; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* Zooming entrances */ @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } /* Zooming exits */ @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-transform-origin: left center; transform-origin: left center; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-transform-origin: right center; transform-origin: right center; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-transform-origin: center bottom; transform-origin: center bottom; } /* Sliding entrances */ @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } /* Sliding exits */ @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /*-------------------------------------------------------------- # About One --------------------------------------------------------------*/ .about-one { position: relative; display: block; padding: 90px 0 180px; z-index: 1; } .about-one__shape-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .about-one__star { position: absolute; top: 40px; right: 135px; z-index: -1; } .about-one__star img { width: auto; } .about-one__left { position: relative; display: block; margin-top: 15px; margin-right: 128px; } .about-one__img-box { position: relative; display: block; z-index: 1; } .about-one__shape-1 { position: absolute; top: -17px; left: -17px; height: 180px; width: 180px; background-color: rgba(var(--finris-base-rgb), .20); border-radius: 50%; z-index: 3; } .about-one__shape-2 { position: absolute; top: -7px; left: -7px; height: 28px; width: 28px; background-color: rgba(var(--finris-base-rgb), 1); border-radius: 50%; z-index: 3; } .about-one__img { position: relative; display: block; border: 1px dashed var(--finris-base); padding: 20px; border-radius: 32px; overflow: hidden; z-index: 1; } .about-one__img::before { background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; z-index: 9; pointer-events: none; } .about-one__img:hover::before { height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .about-one__img img { width: 100%; border-radius: 16px; } .about-one__img-two { position: absolute; bottom: -66px; right: -44px; border-radius: 50%; width: 295px; z-index: 2; } .about-one__img-two img { width: 100%; border-radius: 50%; border: 3px solid var(--finris-base); } .about-one__img-two:before { content: ""; position: absolute; top: 27px; right: 34px; height: 28px; width: 28px; background-color: rgba(var(--finris-base-rgb), 1); border-radius: 50%; z-index: 2; } .about-one__img-two:after { content: ""; position: absolute; bottom: 27px; left: 34px; height: 28px; width: 28px; background-color: rgba(var(--finris-base-rgb), 1); border-radius: 50%; z-index: 2; } .about-one__right { position: relative; display: block; } .about-one__right .section-title { margin-bottom: 14px; } .about-one__text { margin-bottom: 30px; } .about-one__right-content-box { position: relative; display: block; border: 1px solid var(--finris-bdr-color); padding: 35px 30px 30px; border-radius: 16px; } .about-one__points-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 35px; } .about-one__points { position: relative; display: block; } .about-one__points li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .about-one__points li+li { margin-top: 14px; } .about-one__points li .icon { position: relative; display: flex; align-items: center; justify-content: center; height: 14px; width: 14px; background-color: var(--finris-base); border-radius: 50%; font-size: 8px; color: var(--finris-white); } .about-one__points li .text { position: relative; display: block; } .about-one__points li .text p { font-weight: 500; color: var(--finris-black); } .about-one__btn-and-call-box { position: relative; display: flex; align-items: center; gap: 80px; margin-top: 39px; } .about-one__btn-box { position: relative; display: block; } .about-one__call { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; } .about-one__call:before { content: ""; position: absolute; top: -5px; bottom: -5px; left: -40px; width: 1px; background-color: var(--finris-bdr-color); } .about-one__call-icon { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; width: 48px; border: 2px solid var(--finris-base); border-radius: 100px; font-size: 20px; color: var(--finris-base); } .about-one__call-content { position: relative; display: block; } .about-one__call-title { font-size: 20px; font-weight: 400; line-height: 20px; text-transform: uppercase; margin-bottom: 6px; } .about-one__call-title a { color: var(--finris-black); } .about-one__call-title a:hover { color: var(--finris-base); } .about-one__call-sub-title { font-size: 14px; font-weight: 500; line-height: 14px; } /*-------------------------------------------------------------- # About Two --------------------------------------------------------------*/ .about-two { position: relative; display: block; padding: 118px 0 120px; z-index: 1; } .about-two__shape-box { position: absolute; top: -585px; right: -350px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: -1; } .about-two__shape-1 { position: relative; display: flex; align-items: center; justify-content: center; width: 1396px; height: 1396px; background: rgba(241, 150, 4, 0.01); border-radius: 50%; } .about-two__shape-2 { position: relative; display: flex; align-items: center; justify-content: center; width: 1160px; height: 1160px; background: rgba(241, 150, 4, 0.01); border-radius: 50%; } .about-two__shape-3 { position: relative; display: flex; align-items: center; justify-content: center; width: 903px; height: 903px; background: rgba(241, 150, 4, 0.01); border-radius: 50%; } .about-two__left { position: relative; display: block; } .about-two__img { position: relative; display: block; overflow: hidden; margin-right: 85px; z-index: 1; } .about-two__img::before { background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; z-index: 9; pointer-events: none; } .about-two__img:hover::before { height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .about-two__img img { width: 100%; transition: .5s ease; transform: scale(1.05); } .about-two__img:hover img { transform: scale(1); } .about-two__right { position: relative; display: block; margin-top: 36px; margin-right: 80px; } .about-two__points-box { position: relative; display: flex; align-items: center; gap: 25px; margin-top: 95px; } .about-two__points { position: relative; display: block; } .about-two__points li { position: relative; display: flex; gap: 20px; } .about-two__points li+li { margin-top: 40px; } .about-two__points li .icon { position: relative; display: block; top: 7px; transition-delay: 0.1s; transition: all 500ms ease; } .about-two__points li:hover .icon { transform: rotateY(180deg); transition-delay: 0.1s; } .about-two__points li .icon img { width: auto; } .about-two__points li .content { position: relative; display: block; } .about-two__points li .content h3 { font-size: 24px; line-height: 34px; font-weight: 400; text-transform: uppercase; margin-bottom: 8px; } .about-two__bottom { position: relative; display: block; } .about-two__btn-and-call-box { position: relative; display: flex; align-items: center; gap: 60px; margin-top: 47px; border: 1px dashed var(--finris-bdr-color); padding: 19px 19px 19px; border-radius: 48px; max-width: 220px; width: 100%; } .about-two__btn-box { position: relative; display: block; } .about-two__call { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; flex: 1; } .about-two__call:before { content: ""; position: absolute; top: -5px; bottom: -5px; left: -30px; width: 1px; background-color: var(--finris-bdr-color); } .about-two__call-icon { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; width: 48px; background-color: var(--finris-black); border-radius: 100px; font-size: 20px; color: var(--finris-white); } .about-two__call-content { position: relative; display: block; } .about-two__call-number { font-size: 18px; font-weight: 400; line-height: 18px; text-transform: uppercase; margin-top: 6px; } .about-two__call-number a { color: var(--finris-black); } .about-two__call-number a:hover { color: var(--finris-base); } .about-two__call-sub-title { font-size: 14px; font-weight: 500; line-height: 14px; text-transform: capitalize; } /*-------------------------------------------------------------- # About Three --------------------------------------------------------------*/ .about-three { position: relative; display: block; padding-top: 120px; z-index: 1; } .about-three__left { position: relative; display: block; margin-right: 295px; } .about-three__img-box { position: relative; display: block; } .about-three__img { position: relative; display: block; overflow: hidden; border-radius: 40px; z-index: 1; } .about-three__img::before { background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; z-index: 9; pointer-events: none; } .about-three__img:hover:before { height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .about-three__img img { width: 100%; border-radius: 40px; } .about-three__img-2 { position: absolute; bottom: -66px; right: -163px; border-radius: 40px; } .about-three__img-2 img { border-radius: 40px; border: 10px solid var(--finris-white); } .about-three__experience-box { position: absolute; left: 47px; bottom: -58px; display: flex; align-items: center; gap: 15px; background-color: var(--finris-base); border-radius: 50px; padding: 20px 40px 20px; z-index: 2; } .about-three__count { position: relative; display: block; } .about-three__count h3 { font-size: 60px; font-weight: 400; line-height: 60px; color: var(--finris-white); } .about-three__count-text { font-size: 18px; font-weight: 500; line-height: 23px; color: var(--finris-white); } .about-three__video-link { position: absolute; top: 108px; right: -120px; } .about-three__video-icon { position: relative; 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; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 18px; color: var(--finris-white); background-color: rgba(255, 56, 56, .60); border-radius: 50%; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; z-index: 1; } .about-three__video-icon:before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-color: rgba(255, 56, 56, .60); border-radius: 50%; z-index: -1; } .about-three__video-icon:after { content: ""; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background-color: rgba(255, 56, 56, .60); border-radius: 50%; z-index: -1; } .about-three__video-link .ripple, .about-three__video-icon .ripple:before, .about-three__video-icon .ripple:after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -ms-box-shadow: 0 0 0 0 rgba(255, 56, 56, .60); -o-box-shadow: 0 0 0 0 rgba(255, 56, 56, .60); -webkit-box-shadow: 0 0 0 0 rgba(255, 56, 56, .60); box-shadow: 0 0 0 0 rgba(255, 56, 56, .60); -webkit-animation: ripple 3s infinite; animation: ripple 3s infinite; } .about-three__video-icon .ripple:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .about-three__video-icon .ripple:after { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .about-three__shape-1 { position: absolute; top: 22PX; left: 30px; width: 550px; height: 550px; border: 1px dashed var(--finris-base); border-radius: 50%; z-index: -1; } .about-three__shape-2 { position: absolute; top: 83px; right: -183px; width: 298px; height: 298px; background: #FDDAEB; filter: blur(100px); border-radius: 50%; z-index: -1; } .about-three__shape-3 { position: absolute; width: 432px; height: 432px; bottom: -130px; left: 10px; background: rgba(51, 255, 0, 0.07); border-radius: 50%; z-index: -1; } .about-three__shape-4 { position: absolute; width: 364px; height: 364px; left: 45px; bottom: -97px; background: rgba(51, 255, 0, 0.07); border-radius: 50%; z-index: -1; } .about-three__shape-5 { position: absolute; right: 138px; bottom: -110px; } .about-three__shape-5 img { width: auto; } .about-three__right { position: relative; display: block; } .about-three__right .section-title-two { margin-bottom: 19px; } .about-three__client-and-text-box { position: relative; display: flex; align-items: center; gap: 55px; margin-top: 28px; } .about-three__client-box { position: relative; display: flex; align-items: center; gap: 15px; max-width: 210px; width: 100%; } .about-three__client-img { position: relative; display: block; max-width: 60px; width: 100%; } .about-three__client-img img { width: 100%; border: 1px solid var(--finris-gray); border-radius: 50%; } .about-three__client-content { position: relative; display: block; } .about-three__client-content h3 { font-size: 20px; font-weight: 700; line-height: 28px; font-family: var(--finris-font); } .about-three__client-text { color: var(--finris-base); } .about-three__points-list { position: relative; display: block; margin-top: 44px; } .about-three__points-list li { position: relative; display: flex; align-items: flex-start; gap: 25px; } .about-three__points-list li+li { margin-top: 23px; } .about-three__points-list li .icon { position: relative; display: inline-block; } .about-three__points-list li .icon img { width: auto; -webkit-transition: all 0.90s ease; -o-transition: all 0.90s ease; transition: all 0.90s ease; } .about-three__points-list li:hover .icon img { transform: scale(.9) translateX(2px); } .about-three__points-list li .content { position: relative; display: block; } .about-three__points-list li .content h3 { font-size: 20px; font-weight: 400; line-height: 30px; margin-bottom: 3px; } .footer-widget-two__about p{ color: #ffff; } /*-------------------------------------------------------------- # Awards One --------------------------------------------------------------*/ .awards-one { position: relative; display: block; padding: 120px 0 67px; z-index: 1; } .awards-one__left { position: relative; display: block; } .awards-one__left .section-title-two { margin-bottom: 57px; } .awards-one__img-box { position: relative; display: block; margin-right: 216px; } .awards-one__img { position: relative; display: block; } .awards-one__img img { width: 100%; } .awards-one__img-2 { position: absolute; right: -136px; bottom: -43px; border: 4px solid var(--finris-white); border-radius: 16px; overflow: hidden; } .awards-one__img-2 img { width: auto; border-radius: 16px; } .awards-one__experience-box { position: absolute; bottom: 24px; left: 25px; z-index: 2; } .awards-one__count { position: relative; display: flex; align-items: center; } .awards-one__count h3 { font-size: 60px; font-weight: 700; line-height: 60px; font-family: var(--finris-font); color: var(--finris-white); } .awards-one__count span { font-size: 60px; font-weight: 700; line-height: 60px; font-family: var(--finris-font); color: var(--finris-white); } .awards-one__count-text { font-size: 20px; font-weight: 500; color: var(--finris-white); margin-top: 2px; } .awards-one__shape-1 { position: absolute; bottom: -100px; left: -34px; width: 279px; height: 279px; background-color: rgba(10, 87, 239, 0.69); border-radius: 50%; } .awards-one__shape-2 { position: absolute; bottom: -80px; left: -15px; width: 236px; height: 236px; background-color: rgba(10, 87, 239, 0.69); border-radius: 50%; } .awards-one__right { position: relative; display: block; margin-top: 200px; } .awards-one__awards-list { position: relative; display: block; } .awards-one__awards-list::before { content: ""; position: absolute; top: 0; left: 29px; bottom: 0; width: 1px; background-color: var(--finris-bdr-color); } .awards-one__awards-list li { position: relative; display: flex; align-items: flex-start; gap: 50px; } .awards-one__awards-list li+li { margin-top: 38px; } .awards-one__awards-list li .icon { position: relative; display: flex; align-items: center; justify-content: center; max-width: 60px; width: 100%; height: 60px; background-color: var(--finris-base); border-radius: 50%; } .awards-one__awards-list li .icon span { position: relative; display: inline-block; font-size: 24px; color: var(--finris-white); } .awards-one__awards-list li .content { position: relative; display: block; } .awards-one__awards-list li .content h3 { font-size: 24px; font-weight: 400; line-height: 34px; } .awards-one__awards-list li .content p { margin-top: 10px; margin-bottom: 11px; } .awards-one__tag-and-date { position: relative; display: flex; align-items: center; gap: 10px; } .awards-one__tag { position: relative; display: block; } .awards-one__tag>p { position: relative; display: flex; align-items: center; gap: 8px; background-color: #FEB72B; font-size: 14px; font-weight: 500; color: var(--finris-black); padding: 2px 12px 2px; border-radius: 15px; } .awards-one__tag>p>span { font-size: 16px; } .awards-one__date { position: relative; display: block; } .awards-one__date>p { position: relative; display: flex; align-items: center; gap: 8px; background-color: transparent; font-size: 14px; font-weight: 500; color: var(--finris-gray); padding: 1px 11px 1px; border-radius: 15px; border: 1px solid var(--finris-bdr-color); } /*-------------------------------------------------------------- # Blog One --------------------------------------------------------------*/ .blog-one { position: relative; display: block; padding: 90px 0 120px; z-index: 1; } .blog-one__star { position: absolute; top: 140px; right: 735px; z-index: -1; } .blog-one__star img { width: auto; } .blog-one__carousel { position: relative; display: block; } .blog-one__single { position: relative; display: block; padding: 20px 20px 25px; background-color: var(--finris-white); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); border-radius: 8px; z-index: 1; } .blog-one__img { position: relative; display: block; overflow: hidden; border-radius: 10px; z-index: 1; } .blog-one__img::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-color: var(--finris-black); transition: opacity 0.5s ease; transition: all 0.5s ease; z-index: 1; } .blog-one__single:hover .blog-one__img::before { opacity: 0.8; } .blog-one__img img { width: 100%; border-radius: 10px; transform: scale(1.0); transition: all 1500ms ease; } .blog-one__single:hover .blog-one__img img { transform: scale(1.05) rotate(0deg); } .blog-one__plus { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; bottom: 45px; right: 0; opacity: 0; transform: perspective(400px) rotateY(0deg) translateY(-30px); transform-origin: bottom; transition: all 500ms ease; z-index: 3; } .blog-one__single:hover .blog-one__plus { bottom: 0px; opacity: 1; transform: perspective(400px) rotateY(0deg) translateY(0px); transition-delay: 300ms; } .blog-one__plus a { position: relative; display: inline-block; color: var(--finris-white); font-size: 20px; transition: all 200ms linear; transition-delay: 0.1s; } .blog-one__plus a:hover { color: var(--finris-primary); } .blog-one__tags { position: absolute; bottom: 10px; left: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; z-index: 5; } .blog-one__tags span { position: relative; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--finris-white); font-weight: 400; line-height: 14px; font-family: var(--finris-font-two); text-transform: uppercase; background-color: var(--finris-base); border: 1px solid var(--finris-bdr-color); border-radius: 14px; padding: 7px 12px 5px; } .blog-one__content { position: relative; display: block; margin-top: 23px; } .blog-one__title { font-size: 24px; line-height: 34px; font-weight: 400; text-transform: uppercase; } .blog-one__title a { color: var(--finris-black); } .blog-one__title a:hover { color: var(--finris-base); } .blog-one__text { margin-top: 13px; margin-bottom: 17px; } .blog-one__user { position: relative; display: flex; align-items: center; gap: 10px; } .blog-one__user-img { position: relative; display: block; height: 56px; width: 56px; overflow: hidden; border-radius: 50%; } .blog-one__user-img img { width: 100%; border-radius: 50%; } .blog-one__user-content { position: relative; display: block; } .blog-one__user-name { font-size: 16px; line-height: 18px; font-weight: 400; text-transform: uppercase; margin-bottom: 4px; } .blog-one__user-name a { color: var(--finris-black); } .blog-one__user-name a:hover { color: var(--finris-base); } .blog-one__date { font-size: 14px; font-weight: 500; line-height: 14px; } .blog-one__carousel.owl-carousel .owl-stage-outer { overflow: visible; } .blog-one__carousel.owl-carousel .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .blog-one__carousel.owl-carousel .owl-item.active { opacity: 1; visibility: visible; } .blog-one__carousel .owl-nav { position: absolute; top: -110px; right: 0; margin: 0 !important; } .blog-one__carousel.owl-theme .owl-nav .owl-next { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-one__carousel.owl-theme .owl-nav .owl-prev { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-one__carousel.owl-theme .owl-nav .owl-next { margin-left: 5px; } .blog-one__carousel.owl-theme .owl-nav .owl-prev { margin-right: 5px; } .blog-one__carousel.owl-theme .owl-nav .owl-next span, .blog-one__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .blog-one__carousel.owl-theme .owl-nav .owl-next:hover, .blog-one__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--finris-black); color: var(--finris-white); } /*-------------------------------------------------------------- # Blog Two --------------------------------------------------------------*/ .blog-two { position: relative; display: block; padding: 120px 0 120px; z-index: 1; } .blog-two:before { content: ""; position: absolute; top: 109px; bottom: 120px; left: 0; right: 0; background: linear-gradient(180deg, #FFFFFF 0%, #FFFAF4 50%, #FFFFFF 100%); z-index: -1; } .blog-two__shape-1 { position: absolute; bottom: 235px; left: -140px; opacity: .18; z-index: -1; } .blog-two__shape-1 img { width: auto; } .blog-two__shape-2 { position: absolute; bottom: 315px; right: 50px; z-index: -1; } .blog-two__shape-2 img { width: auto; } .blog-two__carousel { position: relative; display: block; } .blog-two__single { position: relative; display: block; box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.05); border-radius: 12px; padding: 24px 24px 23px; } .blog-two__img { position: relative; display: block; overflow: hidden; border-radius: 8px; z-index: 1; } .blog-two__img::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-color: var(--finris-black); transition: opacity 0.5s ease; transition: all 0.5s ease; z-index: 1; } .blog-two__single:hover .blog-two__img::before { opacity: 0.8; } .blog-two__img img { width: 100%; border-radius: 8px; transform: scale(1.0); transition: all 1500ms ease; } .blog-two__single:hover .blog-two__img img { transform: scale(1.05) rotate(0deg); } .blog-two__plus { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; bottom: 45px; right: 0; opacity: 0; transform: perspective(400px) rotateY(0deg) translateY(-30px); transform-origin: bottom; transition: all 500ms ease; z-index: 3; } .blog-two__single:hover .blog-two__plus { bottom: 0px; opacity: 1; transform: perspective(400px) rotateY(0deg) translateY(0px); transition-delay: 300ms; } .blog-two__plus a { position: relative; display: inline-block; color: var(--finris-white); font-size: 20px; transition: all 200ms linear; transition-delay: 0.1s; } .blog-two__plus a:hover { color: var(--finris-primary); } .blog-two__content { position: relative; display: block; margin-top: 22px; } .blog-two__date { position: absolute; top: 66px; left: -64px; border: 1px solid var(--finris-bdr-color); border-radius: 5px; padding: 4.5px 7px 4.5px; transform: rotate(-90deg); z-index: 2; } .blog-two__date p { font-size: 14px; font-weight: 500; line-height: 14px; } .blog-two__date p span { position: relative; display: inline-block; padding-left: 10px; } .blog-two__content-inner { position: relative; display: block; margin-left: 42px; } .blog-two__tag { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .blog-two__tag li { position: relative; display: block; } .blog-two__tag li p { font-size: 14px; font-weight: 500; } .blog-two__title { font-size: 24px; line-height: 31px; font-weight: 400; text-transform: uppercase; margin-top: 11px; margin-bottom: 11px; } .blog-two__title a { color: var(--finris-black); } .blog-two__title a:hover { color: var(--finris-base); } .blog-two__read-more { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 15px; } .blog-two__read-more-line { position: relative; display: block; width: 64px; height: 1px; background: rgb(98, 50, 248); background: linear-gradient(90deg, rgba(98, 50, 248, 0) 1%, rgba(98, 50, 248, 0.6951155462184874) 54%); } .blog-two__read-more-line:before { content: ""; position: absolute; top: -3px; right: 0; height: 6px; width: 6px; background-color: var(--finris-base); border-radius: 50%; } .blog-two__read-more-text { color: var(--finris-base); font-weight: 500; } .blog-two__read-more-text:hover { color: var(--finris-primary); } .blog-two__carousel.owl-carousel .owl-stage-outer { overflow: visible; } .blog-two__carousel.owl-carousel .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .blog-two__carousel.owl-carousel .owl-item.active { opacity: 1; visibility: visible; } .blog-two__carousel.owl-carousel .owl-dots { position: absolute; bottom: -70px; right: 0; text-align: center; display: flex; align-items: center; justify-content: center; margin: 0px !important; } .blog-two__carousel.owl-carousel .owl-dots .owl-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: transparent; border: 1px solid var(--finris-black); margin: 0px; padding: 0px; transition: all 100ms linear; transition-delay: 0.1s; } .blog-two__carousel.owl-carousel .owl-dots .owl-dot+.owl-dot { margin-left: 10px; } .blog-two__carousel.owl-carousel .owl-dot.active { background-color: var(--finris-black); } .blog-two__carousel.owl-carousel .owl-dots .owl-dot:before { position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; content: ""; border: 1px solid var(--finris-black); border-radius: 50%; transform: scale(0); transition: all 100ms linear; transition-delay: 0.1s; } .blog-two__carousel.owl-carousel .owl-dot.active:before { transform: scale(1); } .blog-two__carousel.owl-carousel .owl-dot:focus { outline: none; } .blog-two__carousel.owl-carousel .owl-dots .owl-dot span { display: none; } .blog-two__bottom { position: relative; display: block; margin-top: 50px; } .blog-two__btn-box-two { position: relative; display: block; } .blog-two__btn-box-two a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; color: var(--finris-black); font-weight: 700; padding: 18px 30px 18px; border: 1px dashed var(--finris-black); border-radius: 50%; } .blog-two__btn-box-two a:hover { background-color: var(--finris-black); color: var(--finris-white); } /*-------------------------------------------------------------- # Blog Details --------------------------------------------------------------*/ .blog-details { position: relative; display: block; padding: 120px 0 32px; z-index: 1; } .blog-details__left { position: relative; display: block; margin-right: 105px; } .blog-details__img { position: relative; display: block; } .blog-details__img img { width: 100%; border-radius: 16px; } .blog-details__content { position: relative; display: block; margin-top: 24px; } .blog-details__meta { position: relative; display: flex; align-items: center; gap: 35px; border: 1px dashed var(--finris-bdr-color); border-radius: 16px; padding: 19px 19px 19px; } .blog-details__meta li { position: relative; display: flex; align-items: center; gap: 10px; } .blog-details__client-img { position: relative; display: block; max-width: 40px; width: 100%; border-radius: 50%; } .blog-details__client-img::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--finris-black); border-radius: 50%; } .blog-details__client-img img { width: 100%; border-radius: 50%; } .blog-details__meta li .icon { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--finris-bdr-color); border-radius: 50%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-details__meta li .icon:hover { border: 1px solid var(--finris-base); background-color: var(--finris-base); } .blog-details__meta li .icon span { position: relative; display: inline-block; font-size: 16px; color: var(--finris-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-details__meta li .icon:hover span { color: var(--finris-white); } .blog-details__meta li .content { position: relative; display: block; } .blog-details__meta li .content p { font-size: 14px; line-height: 14px; } .blog-details__meta li .content h4 { font-size: 16px; font-weight: 500; line-height: 16px; font-family: var(--finris-font); margin-top: 4px; } .blog-details__title-1 { font-size: 40px; font-weight: 400; line-height: 56px; margin-top: 20px; margin-bottom: 17px; } .blog-details__text-2 { margin-top: 27px; margin-bottom: 57px; } .blog-details__title-2 { font-size: 30px; font-weight: 400; line-height: 40px; } .blog-details__text-3 { margin-top: 17px; margin-bottom: 24px; } .blog-details__points { position: relative; display: block; } .blog-details__points li { position: relative; display: flex; align-items: center; gap: 20px; } .blog-details__points li+li { margin-top: 20px; } .blog-details__points li .icon { position: relative; display: block; max-width: 14px; width: 100%; height: 14px; border: 1px solid var(--finris-black); transform: rotate(45deg); border-radius: 4px; } .blog-details__points li .icon::before { content: ""; position: absolute; right: -3px; top: -3px; width: 14px; height: 14px; background-color: var(--finris-base); border-radius: 4px; z-index: -1; } .blog-details__img-box { position: relative; display: flex; align-items: center; gap: 30px; margin-top: 22px; } .blog-details__img-box-img { position: relative; display: block; margin-bottom: 30px; } .blog-details__img-box-img img { width: auto; border-radius: 16px; } .blog-details__title-3 { font-size: 30px; font-weight: 400; line-height: 40px; margin-top: 28px; margin-bottom: 17px; } .blog-details__text-box { position: relative; display: block; text-align: center; border: 1px solid var(--finris-base); border-left: 5px solid var(--finris-base); border-radius: 20px; padding: 43px 60px 23px; margin-top: 40px; margin-bottom: 58px; } .blog-details__text-box-client-name { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; } .blog-details__text-box-client-name span { position: relative; display: inline-block; width: 9px; height: 2px; background-color: var(--finris-black); } .blog-details__text-box-client-name p { font-size: 20px; font-weight: 500; line-height: 30px; font-style: italic; color: var(--finris-black); } .blog-details__text-box-text { font-size: 30px; font-weight: 500; line-height: 45px; font-style: italic; color: var(--finris-black); margin-top: 20px; margin-bottom: 20px; } .blog-details__text-box-icon { position: relative; display: inline-block; } .blog-details__text-box-icon span { position: relative; display: inline-block; font-size: 60px; color: transparent; -webkit-text-stroke: 1px var(--finris-gray); } .blog-details__title-4 { font-size: 30px; font-weight: 400; line-height: 40px; } .blog-details__text-5 { margin-top: 17px; margin-bottom: 18px; } .blog-details__points-2 { position: relative; display: block; } .blog-details__points-2 li { position: relative; display: flex; align-items: center; gap: 15px; } .blog-details__points-2 li+li { margin-top: 10px; } .blog-details__points-2 li .icon { position: relative; display: inline-block; } .blog-details__points-2 li .icon span { position: relative; display: inline-block; font-size: 14px; color: var(--finris-black); } .blog-details__points-2 li p { font-size: 18px; font-weight: 500; line-height: 28px; color: var(--finris-black); } .blog-details__tag-and-share { position: relative; display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--finris-bdr-color); border-bottom: 1px dashed var(--finris-bdr-color); padding: 15px 0 15px; margin-top: 51px; margin-bottom: 40px; } .blog-details__tag { position: relative; display: flex; align-items: center; gap: 10px; } .blog-details__tag-title { font-weight: 500; color: var(--finris-black); } .blog-details__tag-list { position: relative; display: flex; align-items: center; gap: 10px; } .blog-details__tag-list li { position: relative; display: flex; align-items: center; gap: 10px; } .blog-details__tag-list li a { font-weight: 500; color: var(--finris-gray); } .blog-details__tag-list li a:hover { color: var(--finris-base); } .blog-details__tag-list li span { position: relative; display: block; width: 5px; height: 5px; background-color: var(--finris-base); border-radius: 50%; } .blog-details__share { position: relative; display: flex; align-items: center; gap: 10px; } .blog-details__share-title { font-weight: 500; color: var(--finris-black); } .blog-details__share-list { position: relative; display: inline-flex; align-items: center; gap: 12px; } .blog-details__share-list::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: var(--finris-bdr-color); transform: translateY(-50%); } .blog-details__share-list a { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 12px; color: var(--finris-black); border: 1px solid var(--finris-bdr-color); background-color: var(--finris-white); border-radius: 50%; } .blog-details__share-list a:hover { color: var(--finris-white); background-color: var(--finris-base); border: 1px solid var(--finris-base); } .blog-details__prev-next { position: relative; display: block; } .blog-details__prev { position: relative; display: flex; align-items: center; gap: 15px; margin-bottom: 30px; } .blog-details__prev-img { position: relative; display: block; max-width: 80px; width: 100%; } .blog-details__prev-img img { width: 100%; border-radius: 3px; } .blog-details__prev-content { position: relative; display: block; } .blog-details__prev-btn { position: relative; display: flex; align-items: center; gap: 5px; font-weight: 400; font-family: var(--finris-font-two); } .blog-details__prev-btn span { font-weight: 900; transform: rotate(180deg); top: -1px; position: relative; } .blog-details__prev-btn:hover { color: var(--finris-black); } .blog-details__prev-title { font-size: 20px; font-weight: 400; line-height: 26px; margin-top: 3px; } .blog-details__prev-title a { color: var(--finris-black); } .blog-details__prev-title a:hover { color: var(--finris-base); } .blog-details__next { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 15px; margin-bottom: 30px; } .blog-details__next-img { position: relative; display: block; max-width: 80px; width: 100%; } .blog-details__next-img img { width: 100%; border-radius: 3px; } .blog-details__next-content { position: relative; display: block; text-align: right; } .blog-details__next-btn { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-weight: 400; font-family: var(--finris-font-two); } .blog-details__next-btn span { font-weight: 900; top: -1px; position: relative; } .blog-details__next-btn:hover { color: var(--finris-black); } .blog-details__next-title { font-size: 20px; font-weight: 400; line-height: 26px; margin-top: 3px; } .blog-details__next-title a { color: var(--finris-black); } .blog-details__next-title a:hover { color: var(--finris-base); } .comment-one { position: relative; display: block; margin-top: 92px; } .comment-one__title-box { position: relative; display: flex; align-items: center; gap: 20px; margin-bottom: 48px; } .comment-one__title-icon { position: relative; display: block; top: -4px; } .comment-one__title-icon img { width: auto; } .comment-one__title { font-size: 36px; font-weight: 400; line-height: 46px; } .comment-one__inner { position: relative; display: block; } .comment-one__single { position: relative; display: flex; align-items: flex-start; gap: 25px; } .comment-one__list+.comment-one__list { margin-top: 50px; } .comment-one__list { position: relative; display: block; border: 1px solid var(--finris-bdr-color); border-radius: 20px; padding: 30px 30px 22px; } .comment-one__list li { position: relative; display: block; } .comment-one__list li+li { margin-top: 40px; } .comment-one__list li:nth-child(2) { margin-left: 80px; } .comment-one__image { position: relative; display: block; max-width: 80px; width: 100%; } .comment-one__image img { width: 100%; border-radius: 8px; } .comment-one__content { position: relative; display: block; } .comment-one__content h3 { position: relative; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; line-height: 30px; font-family: var(--finris-font); } .comment-one__content h3 span { font-size: 16px; font-weight: 400; line-height: 16px; color: var(--finris-gray); padding-left: 10px; border-left: 1px solid var(--finris-bdr-color); } .comment-one__content p { margin-top: 14px; } .comment-one__btn-box { position: absolute; top: 0; right: 0; } .comment-form { position: relative; display: block; background: linear-gradient(360deg, #F3F7FF 0%, #FFFFFF 50%, #F9FAFC 100%); border-radius: 16px; margin-top: 80px; padding: 47px 50px 60px; } .comment-form__form { position: relative; display: block; } .comment-form__input-box { position: relative; display: block; margin-bottom: 25px; } .comment-form__input-box input[type="text"], .comment-form__input-box input[type="email"] { height: 64px; width: 100%; border: 1px solid var(--finris-bdr-color); background-color: transparent; padding-left: 25px; padding-right: 25px; outline: none; font-size: 16px; font-weight: 500; color: var(--finris-gray); display: block; border-radius: 8px; } .comment-form__input-box textarea { font-size: 16px; color: var(--finris-gray); height: 185px; width: 100%; border: 1px solid var(--finris-bdr-color); border-radius: 8px; background-color: transparent; padding: 20px 25px 30px; outline: none; font-weight: 500; margin-bottom: 0px; } .comment-form__input-box.text-message-box { height: 185px; margin-bottom: 30px; } .comment-form__btn { border: none; } .comment-form__input-icon { position: absolute; right: 25px; top: 20px; } .comment-form__input-icon span { position: relative; display: inline-block; font-size: 16px; color: var(--finris-gray); } /*-------------------------------------------------------------- # Sidebar --------------------------------------------------------------*/ .sidebar { position: relative; display: block; } .sidebar__single+.sidebar__single { margin-top: 40px; } .sidebar__search { position: relative; display: block; padding: 20px 25px 25px; background: #FFFFFF; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); border-radius: 16px; } .sidebar__title-box { position: relative; display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--finris-bdr-color); padding-bottom: 10px; margin-bottom: 23px; } .sidebar__title-icon { position: relative; display: block; top: -3px; } .sidebar__title-icon img { width: auto; } .sidebar__title { font-size: 24px; font-weight: 500; line-height: 34px; font-family: var(--finris-font); } .sidebar__search-text { margin-bottom: 19px; } .sidebar__search-form { position: relative; display: block; } .sidebar__search-form input[type="search"] { display: block; outline: none; background-color: transparent; border: 1px solid var(--finris-bdr-color); font-weight: 500; font-size: 15px; height: 56px; width: 100%; padding-left: 20px; padding-right: 60px; color: var(--finris-gray); border-radius: 28px; } .sidebar__search-form button[type="submit"] { color: var(--finris-white); font-size: 16px; position: absolute; top: 8px; right: 8px; bottom: 8px; max-width: 40px; width: 100%; outline: none; border: none; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background-color: var(--finris-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .sidebar__search-form button[type="submit"]:hover { background-color: var(--finris-black); color: var(--finris-white); } .sidebar__category { position: relative; display: block; padding: 20px 25px 25px; background: #FFFFFF; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); border-radius: 16px; } .sidebar__category-list { position: relative; display: block; } .sidebar__category-list li { position: relative; display: block; } .sidebar__category-list li+li { margin-top: 8px; } .sidebar__category-list li a { position: relative; display: flex; align-items: center; justify-content: space-between; font-weight: 500; color: var(--finris-gray); background-color: transparent; border-radius: 8px; padding: 11px 20px 11px; overflow: hidden; z-index: 1; } .sidebar__category-list li.active a { color: var(--finris-white); } .sidebar__category-list li:hover a { color: var(--finris-white); } .sidebar__category-list li>a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 8px; background-color: var(--finris-base); transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; transform-origin: bottom right; -webkit-transform: scale(1, 0); transform: scale(1, 0); z-index: -1; } .sidebar__category-list li:hover a::before { -webkit-transform: scale(1, 1); transform: scale(1, 1); transform-origin: top center; } .sidebar__category-list li.active a::before { -webkit-transform: scale(1, 1); transform: scale(1, 1); transform-origin: top center; } .sidebar__post { position: relative; display: block; padding: 20px 25px 25px; background: #FFFFFF; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); border-radius: 16px; } .sidebar__post-list { position: relative; display: block; } .sidebar__post-list li { position: relative; display: flex; align-items: center; gap: 15px; } .sidebar__post-list li+li { margin-top: 25px; } .sidebar__post-image { position: relative; display: block; max-width: 80px; width: 100%; } .sidebar__post-image img { width: 100%; border-radius: 12px; } .sidebar__post-content { position: relative; display: block; } .sidebar__post-content h3 { font-size: 16px; font-weight: 500; line-height: 22px; font-family: var(--finris-font); } .sidebar__post-content h3 a { color: var(--finris-black); } .sidebar__post-content h3 a:hover { color: var(--finris-base); } .sidebar__post-date { position: relative; display: inline-flex; align-items: center; gap: 6px; background-color: var(--finris-base); font-size: 12px; font-weight: 500; line-height: 22px; color: var(--finris-white); padding: 2px 8px 1px; border-radius: 13px; margin-top: 9px; } .sidebar__tags { position: relative; display: block; padding: 20px 25px 25px; background: #FFFFFF; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); border-radius: 16px; } .sidebar__tags-list { position: relative; display: block; margin-left: -8px; } .sidebar__tags-list a { color: var(--finris-gray); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; display: inline-block; padding: 6px 16px 6px; border: 1px solid var(--finris-bdr-color); margin-left: 4px; font-weight: 400; border-radius: 20px; } .sidebar__tags-list a+a { margin-top: 8px; } .sidebar__tags-list a:hover { color: var(--finris-white); background-color: var(--finris-base); border: 1px solid var(--finris-base); } .sidebar__subscribe { position: relative; display: block; padding: 20px 25px 25px; background: #FFFFFF; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); border-radius: 16px; } .sidebar__subscribe-text { margin-bottom: 21px; color: var(--finris-black); } .sidebar__subscribe-form { position: relative; display: block; } .sidebar__subscribe-email { position: relative; display: block; margin-bottom: 10px; } .sidebar__subscribe-form input[type="email"] { position: relative; display: block; outline: none; background-color: transparent; border: 1px solid var(--finris-bdr-color); font-weight: 500; font-size: 15px; height: 56px; width: 100%; padding-left: 20px; padding-right: 60px; color: var(--finris-gray); border-radius: 12px; } .sidebar__subscribe-email-icon { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } .sidebar__subscribe-email-icon span { position: relative; display: inline-block; font-size: 14px; color: var(--finris-gray); } /*-------------------------------------------------------------- # Blog List --------------------------------------------------------------*/ .blog-list { position: relative; display: block; padding: 120px 0 120px; z-index: 1; } .blog-list__left { position: relative; display: block; margin-right: 110px; } .blog-list__single { position: relative; display: block; border: 1px solid var(--finris-bdr-color); border-radius: 20px; padding: 23px 23px 23px; margin-bottom: 60px; } .blog-list__img-box { position: relative; display: block; } .blog-list__img { position: relative; display: block; overflow: hidden; border-radius: 16px; z-index: 1; } .blog-list__img::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-color: var(--finris-black); transition: opacity 0.5s ease; transition: all 0.5s ease; z-index: 1; } .blog-list__single:hover .blog-list__img::before { opacity: 0.8; } .blog-list__img img { width: 100%; border-radius: 16px; transform: scale(1.0); transition: all 1500ms ease; } .blog-list__single:hover .blog-list__img img { transform: scale(1.05) rotate(0deg); } .blog-list__plus { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; bottom: 45px; right: 0; opacity: 0; transform: perspective(400px) rotateY(0deg) translateY(-30px); transform-origin: bottom; transition: all 500ms ease; z-index: 3; } .blog-list__single:hover .blog-list__plus { bottom: 0px; opacity: 1; transform: perspective(400px) rotateY(0deg) translateY(0px); transition-delay: 300ms; } .blog-list__plus a { position: relative; display: inline-block; color: var(--finris-white); font-size: 20px; transition: all 200ms linear; transition-delay: 0.1s; } .blog-list__plus a:hover { color: var(--finris-primary); } .blog-list__content { position: relative; display: block; margin-top: 33px; } .blog-list__date-and-comment { position: relative; display: inline-flex; align-items: center; gap: 23px; } .blog-list__date-and-comment::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: var(--finris-bdr-color); transform: translateY(-50%); } .blog-list__date { position: relative; display: block; } .blog-list__date p { position: relative; display: inline-flex; align-items: center; gap: 6px; background-color: var(--finris-base); font-size: 16px; font-weight: 500; line-height: 22px; color: var(--finris-white); padding: 6px 13px 6px; border-radius: 17px; } .blog-list__comment { position: relative; display: block; } .blog-list__comment p { position: relative; display: inline-flex; align-items: center; gap: 6px; background-color: var(--finris-white); border: 1px solid var(--finris-bdr-color); font-size: 16px; font-weight: 500; line-height: 22px; color: var(--finris-black); padding: 5px 12px 5px; border-radius: 17px; } .blog-list__title { font-size: 30px; font-weight: 400; line-height: 45px; margin-top: 20px; margin-bottom: 20px; } .blog-list__title a { color: var(--finris-black); } .blog-list__title a:hover { color: var(--finris-base); } .blog-list__text { font-size: 20px; line-height: 30px; } .blog-list__client-info { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 20px; } .blog-list__client-img { position: relative; display: block; max-width: 40px; width: 100%; border: 1px solid var(--finris-black); border-radius: 50%; } .blog-list__client-img img { width: 100%; border-radius: 50%; } .blog-list__client-content { position: relative; display: block; } .blog-list__client-content span { font-size: 14px; line-height: 14px; position: relative; display: block; } .blog-list__client-content p { font-weight: 500; color: var(--finris-black); } .blog-list__single-shape-1 { position: absolute; right: 0; bottom: 0; } .blog-list__single-shape-1 img { width: auto; } .blog-list__single-shape-2 { position: absolute; right: 0; bottom: 0; } .blog-list__single-shape-2 img { width: auto; opacity: .19; } .blog-list__single-2 { background-color: var(--finris-base); } .blog-list__single-2 .blog-list__date p { background-color: var(--finris-base); border: 1px solid var(--finris-white); padding: 5px 12px 5px; } .blog-list__single-2 .blog-list__comment p { border: 1px solid var(--finris-white); background-color: var(--finris-base); color: var(--finris-white); } .blog-list__single-2 .blog-list__title a { color: var(--finris-white); } .blog-list__single-2 .blog-list__title a:hover { color: var(--finris-primary); } .blog-list__single-2 .blog-list__text { color: var(--finris-white); } .blog-list__single-2 .blog-list__client-content span { color: var(--finris-white); } .blog-list__single-2 .blog-list__client-content p { color: var(--finris-white); } .blog-list__single-2 .blog-list__content { margin-top: 0px; } .blog-list__pagination { position: relative; display: block; text-align: center; } .blog-list__pagination .pg-pagination li { position: relative; display: inline-block; } .blog-list__pagination .pg-pagination li+li { margin-left: 16px; } .blog-list__pagination .pg-pagination li a { height: 48px; width: 48px; text-align: center; line-height: 48px; display: inline-block; color: var(--finris-gray); background-color: transparent; border: 1px solid var(--finris-gray); border-radius: 50%; font-weight: 500; font-size: 14px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .blog-list__pagination .pg-pagination li a:hover { background-color: var(--finris-base); color: var(--finris-white); } /*-------------------------------------------------------------- # Blog Page --------------------------------------------------------------*/ .blog-page { position: relative; display: block; padding: 120px 0 120px; } .blog-page .blog-two__single { margin-bottom: 30px; } .blog-page .blog-list__pagination { text-align: left; margin-top: 20px; } /*-------------------------------------------------------------- # Blog Carousel Page --------------------------------------------------------------*/ .blog-carousel-page { position: relative; display: block; padding: 120px 0 170px; } .blog-carousel-page .blog-two__single { margin-bottom: 0; } /*-------------------------------------------------------------- # One Page Blog One --------------------------------------------------------------*/ .one-page-blog-one { padding: 90px 0 0px; } /*-------------------------------------------------------------- # One Page Blog Two --------------------------------------------------------------*/ .one-page-blog-two { padding: 120px 0 0px; } /*-------------------------------------------------------------- # Brand One --------------------------------------------------------------*/ .brand-one { position: relative; display: block; background-color: #FFFDFC; border-top: 1px solid #ECD8E7; border-bottom: 1px dashed #ECD8E7; padding: 39px 0 39px; z-index: 1; } .brand-one.border-top-none { border-top: none; } .brand-one__left { position: relative; display: block; } .brand-one__text { font-size: 20px; color: var(--finris-black); font-weight: 500; line-height: 1.5em; } .brand-one__text span { color: var(--finris-base); font-weight: 700; } .brand-one__right { position: relative; display: block; } .brand-one__carousel { position: relative; display: block; } .brand-one__single { position: relative; display: block; } .brand-one__img { position: relative; display: block; } .brand-one__img img { width: auto !important; margin: 0 auto; } /*-------------------------------------------------------------- # Why Choose One --------------------------------------------------------------*/ .why-choose-one { position: relative; display: block; padding: 80px 0 120px; z-index: 1; } .why-choose-one.pdt120 { padding-top: 120px; } .why-choose-one__shape-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.06; z-index: -1; } .why-choose-one__left { position: relative; display: block; margin-right: 100px; } .why-choose-one__left .section-title { margin-bottom: 20px; } .why-choose-one__text { margin-bottom: 27px; } .why-choose-one__list { position: relative; display: block; } .why-choose-one__list li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 25px; } .why-choose-one__list li+li { margin-top: 40px; } .why-choose-one__list li .icon { position: relative; display: flex; align-items: center; transition-delay: 0.1s; transition: all 500ms ease; } .why-choose-one__list li:hover .icon { transform: rotateY(180deg); transition-delay: 0.1s; } .why-choose-one__list li .icon img { width: auto; } .why-choose-one__list li .content { position: relative; display: block; } .why-choose-one__list li .content p { font-size: 20px; color: var(--finris-black); font-weight: 500; line-height: 30px; margin-bottom: 3px; } .why-choose-one__list li .content p a { color: var(--finris-black); } .why-choose-one__list li:hover .content p a { color: var(--finris-base); } .why-choose-one__right { position: relative; display: block; z-index: 1; } .why-choose-one__circle { position: absolute; top: 48px; right: 100px; height: 448px; width: 448px; border-radius: 50%; border: 2px dashed var(--finris-base); transform: rotate(0deg); z-index: -1; } .why-choose-one__content-one { position: relative; display: block; } .why-choose-one__img-one { position: relative; display: block; border-radius: 16px; overflow: hidden; z-index: 1; } .why-choose-one__img-one::before { background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; z-index: 9; pointer-events: none; } .why-choose-one__img-one:hover:before { height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .why-choose-one__img-one img { width: 100%; border-radius: 16px; transition: .5s ease; transform: scale(1.05); } .why-choose-one__img-one:hover img { transform: scale(1); } .why-choose-one__content-two { position: relative; display: block; margin-top: 27px; } .why-choose-one__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 68px; width: 68px; border: 2px solid rgba(var(--finris-base-rgb), .15); background-color: var(--finris-white); border-radius: 50%; margin-left: 38px; margin-bottom: 38px; animation: topBottom 3s ease-in-out infinite; } .why-choose-one__icon img { width: auto; } .why-choose-one__img-two { position: relative; display: block; border-radius: 16px; overflow: hidden; z-index: 1; } .why-choose-one__img-two::before { background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; z-index: 9; pointer-events: none; } .why-choose-one__img-two:hover:before { height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .why-choose-one__img-two img { width: 100%; border-radius: 16px; transition: .5s ease; transform: scale(1.05); } .why-choose-one__img-two:hover img { transform: scale(1); } .why-choose-one__round-text-box { position: relative; display: block; width: 180px; height: 180px; border-radius: 50%; background-color: var(--finris-base); margin-top: 20px; margin-left: 105px; z-index: 5; } .why-choose-one__round-text-box-inner { position: relative; display: block; width: 180px; height: 180px; } .why-choose-one__curved-circle { position: absolute; top: 4px; left: 0px; bottom: 0; right: 0; color: var(--finris-white); font-size: 20px; font-weight: 400; text-transform: uppercase; letter-spacing: 0px; word-spacing: -1px; transform: rotate(0deg); height: 170px !important; font-family: var(--finris-font-two); } /*-------------------------------------------------------------- # Why Choose Two --------------------------------------------------------------*/ .why-choose-two { position: relative; display: block; padding: 120px 0 0; overflow: hidden; z-index: 1; } .why-choose-two__shape-bg { position: absolute; top: 116px; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .10; z-index: -1; } .why-choose-two__star { position: absolute; top: 150px; right: 83px; z-index: -1; } .why-choose-two__star img { width: auto; } .why-choose-two__left { position: relative; display: block; margin-top: 57px; } .why-choose-two__review { position: relative; display: block; margin-bottom: 28px; margin-left: 15px; z-index: 1; } .why-choose-two__review:before { content: ""; position: absolute; top: -10px; left: -15px; height: 70px; width: 70px; background-color: #FFFBF2; border-radius: 50%; z-index: -1; } .why-choose-two__review-shape { position: relative; display: block; } .why-choose-two__review-shape img { width: auto; } .why-choose-two__review-count-box { position: relative; display: flex; align-items: center; gap: 4px; } .why-choose-two__review-count { position: relative; display: flex; align-items: center; } .why-choose-two__review-count p { font-weight: 500; } .why-choose-two__count-letter { font-weight: 500; } .why-choose-two__review-count-text { font-weight: 500; } .why-choose-two__rating { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border: 1px solid var(--finris-bdr-color); border-radius: 8px; max-width: 185px; width: 100%; padding: 6px 15px 8px; background-color: var(--finris-white); margin-left: 15px; z-index: 2; } .why-choose-two__rating-count { position: relative; display: flex; align-items: center; top: 3px; } .why-choose-two__rating-count p { font-size: 30px; font-weight: 400; color: var(--finris-black); line-height: 30px; font-family: var(--finris-font-two); text-transform: uppercase; } .why-choose-two__rating-count-letter { font-size: 30px; font-weight: 400; color: var(--finris-black); line-height: 30px; font-family: var(--finris-font-two); text-transform: uppercase; } .why-choose-two__rating-content { position: relative; display: block; } .why-choose-two__star-rating { position: relative; display: inline-flex; justify-content: flex-start; direction: rtl; } .why-choose-two__star-rating input[type="radio"] { display: none; } .why-choose-two__star-rating label { position: relative; display: inline-block; cursor: pointer; color: var(--finris-primary); font-size: 24px; padding: 0 1px; transition: all 200ms linear; transition-delay: 0.1s; } .why-choose-two__star-rating input[type="radio"]:checked~label { color: var(--finris-base); } .why-choose-two__star-rating label:hover, .why-choose-two__star-rating label:hover~label { color: var(--finris-base); } .why-choose-two__rating-text { font-size: 14px; line-height: 14px; font-weight: 500; position: relative; display: block; margin-top: -5px; } .why-choose-two__img-box { position: relative; display: block; margin-top: -125px; } .why-choose-two__img { position: relative; display: block; } .why-choose-two__img img { width: 100%; animation: leftRight 4s ease-in-out infinite; } .why-choose-two__shape-box { position: absolute; display: flex; align-items: center; justify-content: center; width: 520px; height: 520px; background: rgba(122, 86, 250, 0.04); border-radius: 50%; top: 70px; left: 0; } .why-choose-two__shape-1 { position: relative; display: flex; align-items: center; justify-content: center; width: 438px; height: 438px; background: rgba(122, 86, 250, 0.04); border-radius: 50%; } .why-choose-two__shape-2 { position: relative; display: flex; align-items: center; justify-content: center; width: 355px; height: 355px; background: rgba(122, 86, 250, 0.04); border-radius: 50%; } .why-choose-two__right { position: relative; display: block; margin-right: 100px; margin-bottom: 100px; } .why-choose-two__right .section-title-two { margin-bottom: 23px; } .why-choose-two__points { position: relative; display: block; margin-top: 38px; margin-left: 110px; } .why-choose-two__points li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .why-choose-two__points li+li { margin-top: 34px; } .why-choose-two__points li .icon { position: relative; display: flex; align-items: center; justify-content: center; height: 64px; width: 64px; border: 1px solid var(--finris-bdr-color); border-radius: 50%; overflow: hidden; z-index: 1; } .why-choose-two__points li .icon:before { content: ""; position: absolute; bottom: -14px; right: -14px; height: 48px; width: 48px; background-color: rgba(var(--finris-base-rgb), .20); border-radius: 50%; z-index: -1; } .why-choose-two__points li .icon img { width: auto; -webkit-transition: all 0.90s ease; -o-transition: all 0.90s ease; transition: all 0.90s ease; } .why-choose-two__points li:hover .icon img { transform: scale(.9) translateX(2px); } .why-choose-two__points li .content { position: relative; display: block; max-width: 342px; width: 100%; } .why-choose-two__points li .content h4 { font-size: 18px; font-weight: 500; line-height: 23px; font-family: var(--finris-font); margin-bottom: 2px; } .why-choose-two__points li .content h4 a { color: var(--finris-black); } .why-choose-two__points li .content h4 a:hover { color: var(--finris-base); } /*-------------------------------------------------------------- # Why Choose Three --------------------------------------------------------------*/ .why-choose-three { position: relative; display: block; padding: 90px 0 180px; z-index: 1; } .why-choose-three__left { position: relative; display: block; margin-left: 48px; margin-right: 69px; margin-top: 35px; } .why-choose-three__img-box { position: relative; display: block; } .why-choose-three__review-box { position: absolute; top: -45px; left: -48px; height: 195px; width: 195px; background-color: var(--finris-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; } .why-choose-three__review-count { position: relative; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 7px; } .why-choose-three__review-count h4 { font-size: 40px; font-weight: 700; color: var(--finris-white); line-height: 40px; font-family: var(--finris-font); } .why-choose-three__review-count-plus { font-size: 40px; font-weight: 700; color: var(--finris-white); line-height: 40px; } .why-choose-three__review-count-text { font-size: 14px; line-height: 14px; color: var(--finris-white); } .why-choose-three__complete-project-box { position: absolute; bottom: -60px; right: 0px; height: 245px; width: 245px; background-color: rgba(var(--finris-base-rgb), .80); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; } .why-choose-three__complete-project-count { position: relative; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 7px; } .why-choose-three__complete-project-count h4 { font-size: 48px; font-weight: 700; color: var(--finris-white); line-height: 48px; font-family: var(--finris-font); } .why-choose-three__complete-project-count-plus { font-size: 48px; font-weight: 700; color: var(--finris-white); line-height: 48px; } .why-choose-three__complete-project-count-text { font-size: 16px; line-height: 16px; color: var(--finris-white); } .why-choose-three__shape-2 { position: absolute; bottom: -50px; left: 0; z-index: 1; } .why-choose-three__shape-2 img { width: auto; } .why-choose-three__shape-3 { position: absolute; top: 15px; right: -8px; z-index: 1; } .why-choose-three__shape-3 img { width: auto; } .why-choose-three__img { position: relative; display: block; border-radius: 50%; overflow: hidden; z-index: 1; } .why-choose-three__img::before { background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; z-index: 1; pointer-events: none; border-radius: 50%; } .why-choose-three__img:hover::before { height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .why-choose-three__img img { width: 100%; border-radius: 50%; transition: .5s ease; transform: scale(1.05); } .why-choose-three__img:hover img { transform: scale(1); } .why-choose-three__shape-1 { position: absolute; bottom: -50px; left: 0; z-index: 1; } .why-choose-three__shape-1 img { width: auto; } .why-choose-three__right { position: relative; display: block; } .why-choose-three__right .section-title-two { margin-bottom: 21px; } .why-choose-three__points-box { position: relative; display: block; margin-top: 33px; } .why-choose-three__single { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 48px; } .why-choose-three__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 60px; width: 60px; border-radius: 50%; background-color: rgba(5, 163, 221, .10); } .why-choose-three__icon img { width: auto; transition-delay: 0.1s; transition: all 500ms ease; } .why-choose-three__single:hover .why-choose-three__icon img { transform: rotateY(180deg); transition-delay: 0.1s; } .why-choose-three__content { position: relative; display: block; width: 220px; } .why-choose-three__content-title { font-size: 18px; font-weight: 400; text-transform: uppercase; line-height: 24px; } /*-------------------------------------------------------------- # Why Choose Four --------------------------------------------------------------*/ .why-choose-four { position: relative; display: block; padding: 152px 0 164px; z-index: 1; } .why-choose-four__left { position: relative; display: block; } .why-choose-four__left .section-title-two { margin-bottom: 23px; } .why-choose-four__img-box { position: relative; display: block; margin-top: 47px; margin-right: 272px; } .why-choose-four__img { position: relative; display: block; padding: 2px; } .why-choose-four__img::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--finris-white); border-radius: 16px; clip-path: polygon(0 0, 75% 0%, 100% 25%, 100% 100%, 0 100%, 0% 50%); } .why-choose-four__img img { width: 100%; border-radius: 16px; clip-path: polygon(0 0, 75% 0%, 100% 25%, 100% 100%, 0 100%, 0% 50%); } .why-choose-four__img-2 { position: absolute; bottom: -132px; right: -218px; z-index: -1; } .why-choose-four__img-2 img { width: auto; border-radius: 16px; } .why-choose-four__img-shape-1 { position: absolute; bottom: -90px; left: 97px; z-index: -1; } .why-choose-four__img-shape-1 img { width: auto; } .why-choose-four__right { position: relative; display: block; margin-top: 52px; } .why-choose-four__right-title { font-size: 80px; font-weight: 400; line-height: 80px; color: transparent; -webkit-text-stroke: 2px rgba(var(--finris-base-rgb), 0.09); margin-bottom: 102px; } .why-choose-four__single { position: relative; display: block; margin-bottom: 28px; } .why-choose-four__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; z-index: 1; } .why-choose-four__icon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--finris-bdr-color); border-radius: 16px; transform: rotate(-45deg); filter: drop-shadow(1px 1px 8px rgba(187, 187, 187, 0.77)); z-index: -1; } .why-choose-four__icon img { width: auto; -webkit-transition: all 0.90s ease; -o-transition: all 0.90s ease; transition: all 0.90s ease; } .why-choose-four__single:hover .why-choose-four__icon img { transform: scale(.9) translateX(2px); } .why-choose-four__single h3 { font-size: 20px; font-weight: 400; line-height: 30px; margin-top: 33px; margin-bottom: 9px; } /*-------------------------------------------------------------- # Welcome One --------------------------------------------------------------*/ .welcome-one { position: relative; display: block; padding: 120px 0px 90px; z-index: 1; } .welcome-one__single { position: relative; display: block; margin-bottom: 30px; } .welcome-one__img { position: relative; display: block; overflow: hidden; border-radius: 10px; z-index: 1; } .welcome-one__img::before { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: var(--finris-black); opacity: 0; transition: background-color 0.5s ease; transition: all 0.5s ease; z-index: 1; } .welcome-one__single:hover .welcome-one__img::before { opacity: .50; } .welcome-one__img img { width: 100%; border-radius: 10px; transform: scale3d(1, 1, 1); transition: transform 1s ease-in-out; } .welcome-one__single:hover .welcome-one__img img { transform: scale(1.05) rotate(0deg); } .welcome-one__content { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; background-color: var(--finris-white); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); padding: 20px 20px 20px; border-radius: 10px; margin-left: 18px; margin-right: 18px; margin-top: -40px; z-index: 2; } .welcome-one__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; background-color: var(--finris-base); border-radius: 5px; z-index: 1; } .welcome-one__icon::before { content: ""; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: var(--finris-black); border-radius: 5px; opacity: 0; transform: perspective(400px) scaleX(0); transform-origin: center; transition: all 500ms ease; } .welcome-one__single:hover .welcome-one__icon::before { opacity: 1; transform: perspective(400px) scaleX(1.0); transition-delay: 200ms; } .welcome-one__icon span { position: relative; display: inline-block; font-size: 25px; color: var(--finris-white); transition: all 500ms linear; transition-delay: 0.1s; transform: scale(1); } .welcome-one__single:hover .welcome-one__icon span { color: var(--finris-white); transform: scale(.9); } .welcome-one__title { font-size: 24px; font-weight: 400; text-transform: uppercase; line-height: 34px; } .welcome-one__title a { color: var(--finris-black); } .welcome-one__title a:hover { color: var(--finris-base); } /*-------------------------------------------------------------- # Testimonial One --------------------------------------------------------------*/ .testimonial-one { position: relative; display: block; padding: 120px 0 220px; background: linear-gradient(180deg, #FFFFFF 0%, #F1ECFE 48.5%, #FFFFFF 100%); z-index: 1; } .testimonial-one__shape-1 { position: absolute; top: 145px; right: 0; z-index: -1; } .testimonial-one__shape-1 img { width: auto; } .testimonial-one__star { position: absolute; top: 304px; left: 44px; z-index: -1; } .testimonial-one__star img { width: auto; } .testimonial-one__single { position: relative; display: block; } .testimonial-one__client-info { position: relative; display: flex; align-items: flex-end; } .testimonial-one__client-img-box { position: relative; display: flex; width: 160px; height: 160px; border: 1px solid var(--finris-bdr-color); border-radius: 50%; align-items: center; justify-content: center; } .testimonial-one__client-img { position: relative; display: block; width: 140px; border-radius: 50%; overflow: hidden; z-index: 1; } .testimonial-one__client-img::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-color: var(--finris-black); transition: opacity 0.5s ease; transition: all 0.5s ease; z-index: 1; } .testimonial-one__single:hover .testimonial-one__client-img::before { opacity: 0.6; } .testimonial-one__client-img img { width: 100%; border-radius: 50%; transform: scale(1.0); transition: all 1500ms ease; } .testimonial-one__single:hover .testimonial-one__client-img img { transform: scale(1.05) rotate(0deg); } .testimonial-one__quote { position: absolute; bottom: 8px; left: 0; height: 40px; width: 40px; background-color: var(--finris-base); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--finris-white); z-index: 2; } .testimonial-one__client-content { position: relative; display: block; padding-left: 12px; } .testimonial-one__client-content:before { content: ""; position: absolute; top: 2px; bottom: 8px; left: 0; width: 2px; background-color: var(--finris-base); } .testimonial-one__client-name { font-size: 18px; color: var(--finris-black); font-weight: 700; line-height: 18px; } .testimonial-one__client-name a { color: var(--finris-black); } .testimonial-one__client-name a:hover { color: var(--finris-base); } .testimonial-one__client-sub-title { font-size: 14px; font-weight: 500; line-height: 14px; margin-top: 2px; } .testimonial-one__text { font-size: 18px; margin-top: 23px; margin-bottom: 12px; } .testimonial-one__rating { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .testimonial-one__rating input[type="radio"] { display: none; } .testimonial-one__rating label { position: relative; display: flex; align-items: center; font-size: 22px; color: var(--finris-primary); transition: all 200ms linear; transition-delay: 0.1s; } .testimonial-one__rating input[type="radio"]:checked~label { color: var(--finris-base); } .testimonial-one__rating label:hover, .testimonial-one__rating label:hover~label { color: var(--finris-base); } .testimonial-one__carousel .owl-nav { position: absolute; bottom: -99px; right: 0; margin: 0 !important; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-one__carousel.owl-theme .owl-nav .owl-prev { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next { margin-left: 5px; } .testimonial-one__carousel.owl-theme .owl-nav .owl-prev { margin-right: 5px; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next span, .testimonial-one__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next:hover, .testimonial-one__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--finris-black); color: var(--finris-white); } .testimonial-one__carousel.owl-carousel .owl-dots { position: absolute; bottom: -70px; left: 0px; right: 0; text-align: center; margin: 0 !important; display: flex; align-items: center; justify-content: flex-start; line-height: 0; height: 0; } .testimonial-one__carousel.owl-carousel .owl-dots .owl-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: transparent; border: 1px solid var(--finris-black); margin: 0px; padding: 0px; transition: all 100ms linear; transition-delay: 0.1s; } .testimonial-one__carousel.owl-carousel .owl-dots .owl-dot+.owl-dot { margin-left: 10px; } .testimonial-one__carousel.owl-carousel .owl-dot.active { background-color: var(--finris-black); } .testimonial-one__carousel.owl-carousel .owl-dots .owl-dot:before { position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; content: ""; border: 1px solid var(--finris-black); border-radius: 50%; transform: scale(0); transition: all 100ms linear; transition-delay: 0.1s; } .testimonial-one__carousel.owl-carousel .owl-dot.active:before { transform: scale(1); } .testimonial-one__carousel.owl-carousel .owl-dot:focus { outline: none; } .testimonial-one__carousel.owl-carousel .owl-dots .owl-dot span { display: none; } /*-------------------------------------------------------------- # Testimonial Two --------------------------------------------------------------*/ .testimonial-two { position: relative; display: block; overflow: hidden; padding: 120px 0 120px; z-index: 1; } .testimonial-two__shape-bg-1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .testimonial-two__shape-bg-2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .60; z-index: -1; } .testimonial-two__shape-1 { position: absolute; top: -20px; left: 0; animation: topBottom 3s ease-in-out infinite; z-index: -1; } .testimonial-two__shape-1 img { width: auto; } .testimonial-two__shape-2 { position: absolute; bottom: 0; right: 0; animation: leftRight 4s ease-in-out infinite; z-index: -1; } .testimonial-two__shape-2 img { width: auto; } .testimonial-two__quote { position: absolute; bottom: 55px; left: 79px; z-index: -1; } .testimonial-two__quote span { position: relative; display: inline-block; font-size: 195px; line-height: 195px; color: transparent; -webkit-text-stroke: 4px var(--finris-base); opacity: .24; } .testimonial-two .section-title-two { margin-bottom: 73px; } .testimonial-two__carousel { position: relative; display: block; padding-left: 167px; } .testimonial-two__single { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 70px; } .testimonial-two__img-box { position: relative; display: block; } .testimonial-two__img-box:before { content: ""; position: absolute; top: 10px; bottom: 0; left: 118px; width: 36px; background-color: var(--finris-base); border-radius: 100px; transform: rotate(45deg); } .testimonial-two__img-box:after { content: ""; position: absolute; top: 36px; right: 150px; width: 36px; height: 395px; background-color: var(--finris-base); border-radius: 100px; transform: rotate(45deg); } .testimonial-two__img { position: relative; display: block; width: 320px; border-radius: 50%; overflow: hidden; z-index: 1; } .testimonial-two__img:before { content: ""; position: absolute; top: 60px; left: 0; right: 0; bottom: 0; background-color: var(--finris-primary); border-radius: 50%; z-index: -1; } .testimonial-two__img img { border-radius: 50%; } .testimonial-two__content { position: relative; display: block; max-width: 485px; width: 100%; } .testimonial-two__client-info { position: relative; display: flex; align-items: center; } .testimonial-two__client-name { font-size: 24px; font-weight: 400; line-height: 34px; text-transform: uppercase; } .testimonial-two__client-name a { color: var(--finris-black); } .testimonial-two__client-name a:hover { color: var(--finris-base); } .testimonial-two__client-title { position: relative; display: block; margin-left: 20px; } .testimonial-two__text { font-size: 24px; line-height: 34px; margin-top: 17px; margin-bottom: 16px; } .testimonial-two__star-rating { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .testimonial-two__star-rating input[type="radio"] { display: none; } .testimonial-two__star-rating label { position: relative; display: inline-block; cursor: pointer; color: var(--finris-base); font-size: 24px; padding: 0; transition: all 200ms linear; transition-delay: 0.1s; } .testimonial-two__star-rating label.stroke-clr { color: transparent; -webkit-text-stroke: 1px var(--finris-base); } .testimonial-two__star-rating input[type="radio"]:checked~label { color: var(--finris-primary); } .testimonial-two__star-rating label:hover, .testimonial-two__star-rating label:hover~label { color: var(--finris-primary); } .testimonial-two__star-rating label.stroke-clr:hover, .testimonial-two__star-rating label.stroke-clr:hover~label { color: var(--finris-base); -webkit-text-stroke: 1px var(--finris-base); } .testimonial-two__carousel .owl-nav { position: absolute; top: -110px; right: 0; margin: 0 !important; } .testimonial-two__carousel.owl-theme .owl-nav .owl-next { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-two__carousel.owl-theme .owl-nav .owl-prev { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-two__carousel.owl-theme .owl-nav .owl-next { margin-left: 5px; } .testimonial-two__carousel.owl-theme .owl-nav .owl-prev { margin-right: 5px; } .testimonial-two__carousel.owl-theme .owl-nav .owl-next span, .testimonial-two__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .testimonial-two__carousel.owl-theme .owl-nav .owl-next:hover, .testimonial-two__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--finris-black); color: var(--finris-white); } /*-------------------------------------------------------------- # Testimonials Page --------------------------------------------------------------*/ .testimonials-page { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } .testimonials-page .testimonial-one__single { margin-bottom: 24px; } /*-------------------------------------------------------------- # Blog Carousel Page --------------------------------------------------------------*/ .testimonial-carousel-page { position: relative; display: block; padding: 120px 0 170px; } /*-------------------------------------------------------------- # Contact Page --------------------------------------------------------------*/ .contact-page { position: relative; display: block; padding: 120px 0 60px; z-index: 1; } .contact-page::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 120px; background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%); z-index: -1; } .contact-page__left { position: relative; display: block; margin-top: 130px; } .contact-page__contact-single { position: relative; display: block; background-color: var(--finris-white); border: 1px solid var(--finris-bdr-color); border-radius: 16px; margin-bottom: 30px; padding: 19px 19px 19px; } .contact-page__contact-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: var(--finris-white); border-radius: 50%; border: 1px dashed var(--finris-base); overflow: hidden; } .contact-page__contact-icon-shape { position: absolute; bottom: -8px; right: -8px; width: 32px; height: 32px; background-color: rgba(98, 50, 248, 0.56); border-radius: 50%; } .contact-page__contact-icon span { position: relative; display: inline-block; font-size: 24px; color: var(--finris-black); -webkit-transition: all 0.90s ease; -o-transition: all 0.90s ease; transition: all 0.90s ease; } .contact-page__contact-single:hover .contact-page__contact-icon span { transform: scale(.9) translateX(2px); } .contact-page__contact-single-title { font-size: 20px; font-weight: 700; line-height: 30px; font-family: var(--finris-font); text-transform: capitalize; margin-top: 20px; margin-bottom: 14px; } .contact-page__contact-single p { font-weight: 500; line-height: 24px; } .contact-page__contact-single p a { color: var(--finris-gray); } .contact-page__contact-single p a:hover { color: var(--finris-base); } .contact-page__right { position: relative; display: block; background-color: var(--finris-white); box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.11); border-radius: 16px; padding: 40px 40px 55px; } .contact-page__contact-form-title-box { position: relative; display: flex; align-items: center; gap: 15px; } .contact-page__contact-form-title { font-size: 30px; font-weight: 400; line-height: 40px; } .contact-page__contact-form-title-icon { position: relative; display: block; top: -2px; } .contact-page__contact-form-title-icon img { width: auto; } .contact-page__contact-form-text { margin-top: 8px; margin-bottom: 31px; } .contact-page__form { position: relative; display: block; } .contact-page__input-box { position: relative; display: block; margin-bottom: 20px; } .contact-page__input-box input[type="text"], .contact-page__input-box input[type="email"] { height: 56px; width: 100%; background-color: transparent; border: 1px solid var(--finris-bdr-color); padding-left: 25px; padding-right: 50px; outline: none; font-size: 16px; color: var(--finris-gray); display: block; font-weight: 500; border-radius: 8px; } .contact-page__input-box textarea { position: relative; height: 180px; width: 100%; background-color: transparent; border: 1px solid var(--finris-bdr-color); padding-top: 15px; padding-left: 25px; padding-right: 50px; outline: none; font-size: 14px; color: var(--finris-gray); display: block; font-weight: 500; border-radius: 8px; } .contact-page__input-box.text-message-box { height: 180px; } .contact-page__btn-box { position: relative; display: block; } .contact-page__btn { border: none; } .contact-page__input-icon { position: absolute; top: 19px; right: 20px; } .contact-page__input-icon span { position: relative; display: inline-block; font-size: 16px; color: var(--finris-gray); } /*-------------------------------------------------------------- # Contact Page Two --------------------------------------------------------------*/ .contact-page-two { padding: 120px 0 120px; } /*-------------------------------------------------------------- # Serving One --------------------------------------------------------------*/ .serving-one { position: relative; display: block; padding: 120px 0 0px; z-index: 1; } .serving-one ul.row { --bs-gutter-x: 0px; } .serving-one ul li { position: relative; border-right: 1px solid var(--finris-bdr-color); border-bottom: 1px solid var(--finris-bdr-color); } .serving-one ul li:nth-child(6) { border-right: 0; } .serving-one ul li:nth-child(12) { border-right: 0; } .serving-one__single { position: relative; display: block; text-align: center; padding: 60px 0 52px; overflow: hidden; z-index: 1; } .serving-one__single:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--finris-base); opacity: 0; transform: translateY(50px); transition: background-color 0.7s ease; transition: all 0.7s ease; z-index: -1; } .serving-one__single:hover:before { opacity: 1; transform: translateY(0px); } .serving-one__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 80px; width: 80px; margin: 0 auto 0; background-color: rgba(var(--finris-base-rgb), .05); border-radius: 10px; overflow: hidden; z-index: 1; } .serving-one__icon::before { content: ""; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: var(--finris-white); opacity: 0; transform: perspective(400px) scaleX(0); transform-origin: center; transition: all 500ms ease; } .serving-one__single:hover .serving-one__icon::before { opacity: 1; transform: perspective(400px) scaleX(1.0); transition-delay: 200ms; } .serving-one__icon span { position: relative; display: inline-block; font-size: 40px; color: var(--finris-base); transition: all 500ms linear; transition-delay: 0.1s; transform: scale(1); } .serving-one__single:hover .serving-one__icon span { color: var(--finris-black); transform: scale(.9); } .serving-one__title { font-size: 24px; font-weight: 400; line-height: 30px; text-transform: uppercase; margin-top: 25px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .serving-one__single:hover .serving-one__title { color: var(--finris-white); } /*-------------------------------------------------------------- # Testimonial One --------------------------------------------------------------*/ .testimonial-one { position: relative; display: block; padding: 120px 0 220px; background: linear-gradient(180deg, #FFFFFF 0%, #F1ECFE 48.5%, #FFFFFF 100%); z-index: 1; } .testimonial-one__shape-1 { position: absolute; top: 145px; right: 0; z-index: -1; } .testimonial-one__shape-1 img { width: auto; } .testimonial-one__star { position: absolute; top: 304px; left: 44px; z-index: -1; } .testimonial-one__star img { width: auto; } .testimonial-one__single { position: relative; display: block; } .testimonial-one__client-info { position: relative; display: flex; align-items: flex-end; } .testimonial-one__client-img-box { position: relative; display: flex; width: 160px; height: 160px; border: 1px solid var(--finris-bdr-color); border-radius: 50%; align-items: center; justify-content: center; } .testimonial-one__client-img { position: relative; display: block; width: 140px; border-radius: 50%; overflow: hidden; z-index: 1; } .testimonial-one__client-img::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-color: var(--finris-black); transition: opacity 0.5s ease; transition: all 0.5s ease; z-index: 1; } .testimonial-one__single:hover .testimonial-one__client-img::before { opacity: 0.6; } .testimonial-one__client-img img { width: 100%; border-radius: 50%; transform: scale(1.0); transition: all 1500ms ease; } .testimonial-one__single:hover .testimonial-one__client-img img { transform: scale(1.05) rotate(0deg); } .testimonial-one__quote { position: absolute; bottom: 8px; left: 0; height: 40px; width: 40px; background-color: var(--finris-base); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--finris-white); z-index: 2; } .testimonial-one__client-content { position: relative; display: block; padding-left: 12px; } .testimonial-one__client-content:before { content: ""; position: absolute; top: 2px; bottom: 8px; left: 0; width: 2px; background-color: var(--finris-base); } .testimonial-one__client-name { font-size: 18px; color: var(--finris-black); font-weight: 700; line-height: 18px; } .testimonial-one__client-name a { color: var(--finris-black); } .testimonial-one__client-name a:hover { color: var(--finris-base); } .testimonial-one__client-sub-title { font-size: 14px; font-weight: 500; line-height: 14px; margin-top: 2px; } .testimonial-one__text { font-size: 18px; margin-top: 23px; margin-bottom: 12px; } .testimonial-one__rating { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .testimonial-one__rating input[type="radio"] { display: none; } .testimonial-one__rating label { position: relative; display: flex; align-items: center; font-size: 22px; color: var(--finris-primary); transition: all 200ms linear; transition-delay: 0.1s; } .testimonial-one__rating input[type="radio"]:checked~label { color: var(--finris-base); } .testimonial-one__rating label:hover, .testimonial-one__rating label:hover~label { color: var(--finris-base); } .testimonial-one__carousel .owl-nav { position: absolute; bottom: -99px; right: 0; margin: 0 !important; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-one__carousel.owl-theme .owl-nav .owl-prev { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next { margin-left: 5px; } .testimonial-one__carousel.owl-theme .owl-nav .owl-prev { margin-right: 5px; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next span, .testimonial-one__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .testimonial-one__carousel.owl-theme .owl-nav .owl-next:hover, .testimonial-one__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--finris-black); color: var(--finris-white); } .testimonial-one__carousel.owl-carousel .owl-dots { position: absolute; bottom: -70px; left: 0px; right: 0; text-align: center; margin: 0 !important; display: flex; align-items: center; justify-content: flex-start; line-height: 0; height: 0; } .testimonial-one__carousel.owl-carousel .owl-dots .owl-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: transparent; border: 1px solid var(--finris-black); margin: 0px; padding: 0px; transition: all 100ms linear; transition-delay: 0.1s; } .testimonial-one__carousel.owl-carousel .owl-dots .owl-dot+.owl-dot { margin-left: 10px; } .testimonial-one__carousel.owl-carousel .owl-dot.active { background-color: var(--finris-black); } .testimonial-one__carousel.owl-carousel .owl-dots .owl-dot:before { position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; content: ""; border: 1px solid var(--finris-black); border-radius: 50%; transform: scale(0); transition: all 100ms linear; transition-delay: 0.1s; } .testimonial-one__carousel.owl-carousel .owl-dot.active:before { transform: scale(1); } .testimonial-one__carousel.owl-carousel .owl-dot:focus { outline: none; } .testimonial-one__carousel.owl-carousel .owl-dots .owl-dot span { display: none; } /*-------------------------------------------------------------- # Testimonial Two --------------------------------------------------------------*/ .testimonial-two { position: relative; display: block; overflow: hidden; padding: 120px 0 120px; z-index: 1; } .testimonial-two__shape-bg-1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .testimonial-two__shape-bg-2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .60; z-index: -1; } .testimonial-two__shape-1 { position: absolute; top: -20px; left: 0; animation: topBottom 3s ease-in-out infinite; z-index: -1; } .testimonial-two__shape-1 img { width: auto; } .testimonial-two__shape-2 { position: absolute; bottom: 0; right: 0; animation: leftRight 4s ease-in-out infinite; z-index: -1; } .testimonial-two__shape-2 img { width: auto; } .testimonial-two__quote { position: absolute; bottom: 55px; left: 79px; z-index: -1; } .testimonial-two__quote span { position: relative; display: inline-block; font-size: 195px; line-height: 195px; color: transparent; -webkit-text-stroke: 4px var(--finris-base); opacity: .24; } .testimonial-two .section-title-two { margin-bottom: 73px; } .testimonial-two__carousel { position: relative; display: block; padding-left: 167px; } .testimonial-two__single { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 70px; } .testimonial-two__img-box { position: relative; display: block; } .testimonial-two__img-box:before { content: ""; position: absolute; top: 10px; bottom: 0; left: 118px; width: 36px; background-color: var(--finris-base); border-radius: 100px; transform: rotate(45deg); } .testimonial-two__img-box:after { content: ""; position: absolute; top: 36px; right: 150px; width: 36px; height: 395px; background-color: var(--finris-base); border-radius: 100px; transform: rotate(45deg); } .testimonial-two__img { position: relative; display: block; width: 320px; border-radius: 50%; overflow: hidden; z-index: 1; } .testimonial-two__img:before { content: ""; position: absolute; top: 60px; left: 0; right: 0; bottom: 0; background-color: var(--finris-primary); border-radius: 50%; z-index: -1; } .testimonial-two__img img { border-radius: 50%; } .testimonial-two__content { position: relative; display: block; max-width: 485px; width: 100%; } .testimonial-two__client-info { position: relative; display: flex; align-items: center; } .testimonial-two__client-name { font-size: 24px; font-weight: 400; line-height: 34px; text-transform: uppercase; } .testimonial-two__client-name a { color: var(--finris-black); } .testimonial-two__client-name a:hover { color: var(--finris-base); } .testimonial-two__client-title { position: relative; display: block; margin-left: 20px; } .testimonial-two__text { font-size: 24px; line-height: 34px; margin-top: 17px; margin-bottom: 16px; } .testimonial-two__star-rating { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .testimonial-two__star-rating input[type="radio"] { display: none; } .testimonial-two__star-rating label { position: relative; display: inline-block; cursor: pointer; color: var(--finris-base); font-size: 24px; padding: 0; transition: all 200ms linear; transition-delay: 0.1s; } .testimonial-two__star-rating label.stroke-clr { color: transparent; -webkit-text-stroke: 1px var(--finris-base); } .testimonial-two__star-rating input[type="radio"]:checked~label { color: var(--finris-primary); } .testimonial-two__star-rating label:hover, .testimonial-two__star-rating label:hover~label { color: var(--finris-primary); } .testimonial-two__star-rating label.stroke-clr:hover, .testimonial-two__star-rating label.stroke-clr:hover~label { color: var(--finris-base); -webkit-text-stroke: 1px var(--finris-base); } .testimonial-two__carousel .owl-nav { position: absolute; top: -110px; right: 0; margin: 0 !important; } .testimonial-two__carousel.owl-theme .owl-nav .owl-next { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-two__carousel.owl-theme .owl-nav .owl-prev { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .testimonial-two__carousel.owl-theme .owl-nav .owl-next { margin-left: 5px; } .testimonial-two__carousel.owl-theme .owl-nav .owl-prev { margin-right: 5px; } .testimonial-two__carousel.owl-theme .owl-nav .owl-next span, .testimonial-two__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .testimonial-two__carousel.owl-theme .owl-nav .owl-next:hover, .testimonial-two__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--finris-black); color: var(--finris-white); } /*-------------------------------------------------------------- # Testimonials Page --------------------------------------------------------------*/ .testimonials-page { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } .testimonials-page .testimonial-one__single { margin-bottom: 24px; } /*-------------------------------------------------------------- # Blog Carousel Page --------------------------------------------------------------*/ .testimonial-carousel-page { position: relative; display: block; padding: 120px 0 170px; } /*-------------------------------------------------------------- # Counter One --------------------------------------------------------------*/ .counter-one { position: relative; display: block; overflow: hidden; background-color: var(--finris-base); padding: 50px 0 50px; z-index: 1; } .counter-one__shape-1 { position: absolute; top: 0; right: -30px; bottom: 0; width: 61.4%; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .counter-one__list { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .counter-one__list li { position: relative; display: block; } .counter-one__list li:before { content: ""; position: absolute; top: 18px; left: -95px; height: 7px; width: 7px; background-color: var(--finris-white); border-radius: 50%; } .counter-one__list li:after { content: ""; position: absolute; bottom: 16px; left: -95px; height: 7px; width: 7px; background-color: var(--finris-white); border-radius: 50%; } .counter-one__list li:first-child:before, .counter-one__list li:first-child:after { display: none; } .counter-one__single { position: relative; display: block; text-align: center; } .counter-one__single:before { content: ""; position: absolute; top: 18px; bottom: 16px; left: -92px; width: 1px; background-color: var(--finris-white); } .counter-one__list li:first-child .counter-one__single:before { display: none; } .counter-one__count { position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; } .counter-one__count p { font-size: 60px; color: var(--finris-white); line-height: 60px; font-weight: 700; } .counter-one__count-plus { font-size: 60px; color: var(--finris-white); line-height: 60px; font-weight: 700; } .counter-one__text { font-size: 20px; font-weight: 500; color: var(--finris-white); } /*-------------------------------------------------------------- # CTA One --------------------------------------------------------------*/ .cta-one { position: relative; display: block; padding: 195px 0 0; z-index: 1; } .cta-one__inner { position: relative; display: block; z-index: 1; } .cta-one__img { position: absolute; bottom: 0; right: 70px; animation: leftRight 4s ease-in-out infinite; z-index: 2; } .cta-one__img img { width: auto; } .cta-one__inner-content { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 100px; background: linear-gradient(90deg, #003496 0%, #0057FC 100%); border-radius: 20px; overflow: hidden; padding: 57px 65px 55px; z-index: 1; } .cta-one__shape-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .cta-one__title { font-size: 40px; color: var(--finris-white); font-weight: 400; text-transform: uppercase; line-height: 1.3em; } .cta-one__btn { position: relative; display: block; } .cta-one__btn a { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--finris-white); font-size: 16px; font-weight: 500; border: 2px solid var(--finris-white); padding: 20px 40px 20px; border-radius: 35px; overflow: hidden; transition: all 200ms linear; transition-delay: 0.1s; z-index: 1; } .cta-one__btn a:hover { color: var(--finris-black); border-color: transparent; } .cta-one__btn a::after { position: absolute; background-color: var(--finris-white); bottom: 0; right: 0; content: ""; width: 50%; height: 0; visibility: hidden; opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } .cta-one__btn a:hover:after { width: 100%; height: 100%; visibility: visible; opacity: 1; } .cta-one__btn a:before { position: absolute; top: 0; left: 0; content: ""; width: 50%; height: 0; visibility: hidden; background-color: var(--finris-white); opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } .cta-one__btn a:hover::before { width: 100%; height: 100%; visibility: visible; opacity: 1; } /*-------------------------------------------------------------- # CTA Two --------------------------------------------------------------*/ .cta-two { padding: 175px 0 120px; } /*-------------------------------------------------------------- # CTA Three --------------------------------------------------------------*/ .cta-three { position: relative; display: block; background-color: #EEFFFC; padding: 100px 0 100px; z-index: 1; } .cta-three__left { position: relative; display: block; margin-top: 0px; margin-right: -25px; } .cta-three__left-content { position: relative; display: block; padding: 45px 40px 55px; border-radius: 16px; z-index: 1; } .cta-three__left-content:before { content: ""; position: absolute; top: 45px; bottom: 45px; right: 0; width: 80px; border: 1px dashed var(--finris-white); border-right: 0; border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .cta-three__left-content-shape-bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 16px; z-index: -1; } .cta-three__title-box { position: relative; display: block; margin-bottom: 19px; } .cta-three__title-tagline-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .cta-three__title-tagline-icon-box { position: relative; display: flex; align-items: center; } .cta-three__title-tagline-icon-1 { position: relative; display: block; width: 14px; height: 14px; border: 1px solid var(--finris-gray); border-radius: 50%; z-index: 1; } .cta-three__title-tagline-icon-2 { position: relative; display: block; width: 14px; height: 14px; background-color: var(--finris-primary); border-radius: 50%; margin-left: -9px; z-index: 1; } .cta-three__title-tagline { font-size: 20px; font-weight: 500; color: var(--finris-white); line-height: 20px; } .cta-three__title { font-size: 40px; color: var(--finris-white); text-transform: uppercase; line-height: 1.2em; font-weight: 400; } .cta-three__text { color: var(--finris-white); } .cta-three__user { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 20px; } .cta-three__user-img { position: relative; display: block; width: 60px; border-radius: 50%; } .cta-three__user-img img { width: 100%; border-radius: 50%; } .cta-three__user-content { position: relative; display: block; } .cta-three__user-name { font-size: 20px; font-weight: 500; color: var(--finris-primary); line-height: 25px; } .cta-three__user-sub-title { font-size: 14px; color: var(--finris-white); line-height: 14px; } .cta-three__right { position: relative; display: block; margin-left: 55px; margin-right: 170px; } .cta-three__form { position: relative; display: block; } .cta-three__form .row { --bs-gutter-x: 20px; } .cta-three__input-box { position: relative; display: block; margin-bottom: 20px; } .cta-three__input-box input[type="text"], .cta-three__input-box input[type="email"] { height: 52px; width: 100%; background-color: var(--finris-white); border: 1px solid var(--finris-bdr-color); padding-left: 20px; padding-right: 20px; outline: none; font-size: 16px; font-weight: 400; color: var(--finris-gray); display: block; border-radius: 12px; } .cta-three__input-box textarea { font-size: 16px; color: var(--finris-gray); height: 160px; width: 100%; background-color: var(--finris-white); border: 1px solid var(--finris-bdr-color); padding: 15px 20px 30px; border-radius: 20px; outline: none; font-weight: 400; position: relative; display: block; } .cta-three__input-box.text-message-box { height: 160px; } .cta-three__btn-box { position: relative; display: block; margin-top: 29px; } /*-------------------------------------------------------------- # CTA Four --------------------------------------------------------------*/ .cta-four { margin-bottom: 120px; } /*-------------------------------------------------------------- # Services One --------------------------------------------------------------*/ .services-one { position: relative; display: block; counter-reset: count; padding: 120px 0 0; z-index: 1; } .services-one__shape-1 { position: absolute; width: 180px; height: 180px; left: -14px; bottom: 80px; background: #FAEFD0; filter: blur(200px); z-index: -1; } .services-one__shape-2 { position: absolute; width: 180px; height: 180px; left: 76px; bottom: 120px; background: #CCCCCC; filter: blur(200px); z-index: -1; } .services-one__shape-3 { position: absolute; width: 180px; height: 180px; right: 76px; top: 300px; background: #907CFF; filter: blur(200px); z-index: -1; } .services-one__single { position: relative; display: block; border: 1px solid var(--finris-bdr-color); border-radius: 8px; background-color: var(--finris-white); padding: 50px 22px 30px; margin-bottom: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .services-one__single:hover { transform: translateY(-10px); box-shadow: 0px 0px 9px 8px #F7F7F7; } .services-one__count { position: relative; display: block; } .services-one__count:before { position: relative; display: block; font-size: 150px; line-height: 115px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px #E4E4E4; counter-increment: count; content: "0"counter(count); transition: all 200ms linear; transition-delay: 0.1s; } .services-one__single:hover .services-one__count:before { -webkit-text-stroke: 1px var(--finris-base); color: var(--finris-base); } .services-one__content-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; border-bottom: 1px solid var(--finris-bdr-color); margin-top: 40px; margin-bottom: 9px; padding-bottom: 9px; } .services-one__icon { position: relative; display: block; } .services-one__icon img { width: auto; } .services-one__title { font-size: 24px; font-weight: 400; line-height: 29px; } .services-one__title a { color: var(--finris-black); } .services-one__title a:hover { color: var(--finris-base); } .services-one__more-details { position: relative; display: block; } .services-one__more-details a { position: relative; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--finris-gray); } .services-one__more-details a:hover { color: var(--finris-base); } /*-------------------------------------------------------------- # Services Two --------------------------------------------------------------*/ .services-two { position: relative; display: block; padding: 85px 0 50px; z-index: 1; } .services-two__bg-shape { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .10; z-index: -1; } .services-two__single { position: relative; display: block; background-color: var(--finris-white); border-radius: 8px; padding: 29px 24px 30px; margin-bottom: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .services-two__single:hover { transform: translateY(-10px); } .services-two__icon { position: relative; display: block; margin-bottom: 41px; } .services-two__icon img { width: auto; -webkit-transition: all 0.90s ease; -o-transition: all 0.90s ease; transition: all 0.90s ease; } .services-two__single:hover .services-two__icon img { transform: scale(.9) translateX(2px); } .services-two__title { font-size: 30px; line-height: 39px; text-transform: uppercase; font-weight: 400; border-bottom: 1px solid var(--finris-bdr-color); padding-bottom: 15px; margin-bottom: 13px; } .services-two__title a { color: var(--finris-black); } .services-two__title a:hover { color: var(--finris-base); } .services-two__btn-box { position: relative; display: block; margin-top: 15px; } /*-------------------------------------------------------------- # Services Details --------------------------------------------------------------*/ .services-details { position: relative; display: block; padding: 120px 0 0; z-index: 1; } .services-details__left { position: relative; display: block; } .services-details__img { position: relative; display: block; } .services-details__img img { width: 100%; border-radius: 20px; } .services-details__content { position: relative; display: block; margin-top: 40px; } .services-details__title-1 { font-size: 48px; font-weight: 400; line-height: 66px; } .services-details__shape-1 { position: relative; display: block; max-width: 410px; border: 1px dashed var(--finris-bdr-color); margin-top: 11px; margin-bottom: 24px; } .services-details__shape-1::before { content: ""; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; background-color: var(--finris-bdr-color); border-radius: 50%; transform: translateY(-50%); } .services-details__shape-1::after { content: ""; position: absolute; top: 50%; right: 0; width: 6px; height: 6px; background-color: var(--finris-bdr-color); border-radius: 50%; transform: translateY(-50%); } .services-details__title-2 { font-size: 30px; font-weight: 400; line-height: 40px; margin-top: 58px; margin-bottom: 19px; } .services-details__points-box { position: relative; display: flex; align-items: center; gap: 140px; margin-top: 19px; margin-bottom: 50px; } .services-details__points-list { position: relative; display: block; } .services-details__points-list li { position: relative; display: flex; align-items: center; gap: 15px; } .services-details__points-list li+li { margin-top: 10px; } .services-details__points-list li .icon { position: relative; display: block; } .services-details__points-list li .icon span { position: relative; display: inline-block; font-size: 16px; color: var(--finris-base); } .services-details__points-list li p { font-weight: 500; color: var(--finris-black); } .services-details__single-service-box { position: relative; display: block; } .services-details__single-service { position: relative; display: block; text-align: center; background-color: var(--finris-white); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 24px 20px 21px; margin-bottom: 30px; } .services-details__single-icon { position: relative; display: block; } .services-details__single-icon img { width: auto; -webkit-transition: all 0.90s ease; -o-transition: all 0.90s ease; transition: all 0.90s ease; } .services-details__single-service:hover .services-details__single-icon img { transform: scale(1.02) translateX(2px); } .services-details__single-service p { font-weight: 500; color: var(--finris-black); text-transform: capitalize; margin-top: 14px; } .services-details__progress-box { position: relative; display: block; margin-top: 32px; } .services-details__progress-left { position: relative; display: block; } .services-details__progress-left-title { font-size: 30px; font-weight: 400; line-height: 40px; margin-bottom: 19px; } .services-details__progress-right { position: relative; display: block; } .services-details__progress-list { position: relative; display: block; } .services-details__progress-list li { position: relative; display: block; } .services-details__progress-list li+li { margin-top: 32px; } .services-details__progress-list li .progress-levels { position: relative; display: block; } .services-details__progress-list li .progress-levels .progress-box { position: relative; display: block; } .services-details__progress-list li .progress-levels .progress-box .inner { position: relative; display: block; } .services-details__progress-list li .progress-levels .progress-box .bar { position: relative; display: block; z-index: 1; } .services-details__progress-list li .progress-levels .progress-box .bar .bar-innner { position: relative; width: 100%; height: 8px; border-radius: 0; background: rgba(255, 56, 56, 0.03); } .services-details__progress-list li .progress-levels .progress-box .bar .bar-fill { position: relative; width: 0px; height: 8px; border-radius: 0px; background: linear-gradient(90deg, #0057FC 0%, rgba(0, 87, 252, 0) 100%); transition: all 2000ms ease 300ms; } .services-details__progress-list li .progress-levels .progress-box .bar .bar-innner .skill-percent { position: absolute; display: flex; align-items: center; top: -41px; right: 0px; width: 40px; height: 20px; padding: 0; z-index: 1; } .services-details__progress-list li .progress-levels .progress-box .inner .count-text { position: relative; color: var(--finris-black); font-size: 20px; line-height: 20px; font-weight: 500; display: inline-block; } .services-details__progress-list li .progress-levels .progress-box .inner .percent { position: relative; color: var(--finris-black); font-size: 20px; line-height: 20px; font-weight: 500; display: inline-block; } .services-details__progress-list li .progress-levels .progress-box .inner .text { position: relative; display: block; font-size: 20px; font-weight: 500; color: var(--finris-black); line-height: 30px; text-transform: capitalize; margin-bottom: 16px; } .services-details__title-3 { font-size: 30px; font-weight: 400; line-height: 40px; margin-top: 60px; margin-bottom: 10px; } .services-details__points-and-img { position: relative; display: block; margin-top: 23px; margin-bottom: 25px; } .services-details__points-1 { position: relative; display: block; } .services-details__points-1 li { position: relative; display: flex; align-items: center; gap: 17px; } .services-details__points-1 li+li { margin-top: 12px; } .services-details__points-1 li .icon { position: relative; display: inline-block; } .services-details__points-1 li .icon span { position: relative; display: inline-block; font-size: 16px; color: var(--finris-black); } .services-details__points-1 li p { font-weight: 500; color: var(--finris-black); } .services-details__points-img { position: relative; display: block; margin-left: 28px; margin-right: 3px; } .services-details__points-img img { width: 100%; border-radius: 16px; } .services-details__img-two { position: relative; display: block; margin-top: 55px; margin-bottom: 27px; } .services-details__img-two img { width: 100%; border-radius: 16px; } .services-details__title-4 { font-size: 30px; font-weight: 400; line-height: 40px; margin-bottom: 22px; } .services-details__right { position: relative; display: block; } .services-details__more-services { position: relative; display: block; border: 1px solid var(--finris-bdr-color); border-radius: 16px; padding: 21px 30px 23px; } .services-details__more-services h3 { position: relative; display: block; font-size: 24px; font-weight: 400; line-height: 34px; } .services-details__more-services span { position: relative; display: block; height: 2px; background-color: var(--finris-bdr-color); margin-top: 7px; margin-bottom: 23px; } .services-details__more-services span::before { content: ""; position: absolute; top: 50%; right: 0; width: 6px; height: 6px; background-color: var(--finris-bdr-color); border-radius: 50%; transform: translateY(-50%); } .services-details__more-services-list { position: relative; display: block; } .services-details__more-services-list li { position: relative; display: flex; align-items: center; gap: 15px; } .services-details__more-services-list li+li { margin-top: 16px; } .services-details__more-services-list li .icon { position: relative; display: block; } .services-details__more-services-list li .icon img { width: auto; } .services-details__more-services-list li p { font-size: 20px; font-weight: 500; line-height: 30px; text-transform: capitalize; } .services-details__more-services-list li p a { color: var(--finris-black); } .services-details__more-services-list li:hover p a, .services-details__more-services-list li.active p a { color: var(--finris-base); } .services-details__contact-box { position: relative; display: block; border: 1px solid var(--finris-bdr-color); border-radius: 16px; padding: 21px 30px 23px; margin-top: 50px; } .services-details__contact-box h3 { position: relative; display: block; font-size: 24px; font-weight: 400; line-height: 34px; } .services-details__contact-box span { position: relative; display: block; height: 2px; background-color: var(--finris-bdr-color); margin-top: 7px; margin-bottom: 23px; } .services-details__contact-box span::before { content: ""; position: absolute; top: 50%; right: 0; width: 6px; height: 6px; background-color: var(--finris-bdr-color); border-radius: 50%; transform: translateY(-50%); } .services-details__contact-btn-box { position: relative; display: block; margin-top: 22px; } /*-------------------------------------------------------------- # Services Three --------------------------------------------------------------*/ .services-three { position: relative; display: block; padding: 120px 0 90px; z-index: 1; } .services-three__shape-1 { position: absolute; width: 180px; height: 180px; left: -14px; bottom: 80px; background: #FAEFD0; filter: blur(200px); z-index: -1; } .services-three__shape-2 { position: absolute; width: 180px; height: 180px; left: 76px; bottom: 120px; background: var(--finris-base); filter: blur(100px); z-index: -1; } .services-three__shape-3 { position: absolute; width: 180px; height: 180px; right: 76px; top: 300px; background: #907CFF; filter: blur(200px); z-index: -1; } .services-three__single { position: relative; display: block; text-align: center; border: 1px solid var(--finris-bdr-color); border-radius: 8px; background-color: var(--finris-white); padding: 50px 22px 32px; margin-bottom: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .services-three__single:hover { transform: translateY(-10px); border-color: transparent; box-shadow: 0px 0px 9px 8px #F7F7F7; } .services-three__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 80px; width: 80px; border: 0px solid var(--finris-bdr-color); border-radius: 50%; margin: 0 auto 0; overflow: hidden; z-index: 1; } .services-three__icon span { position: relative; display: inline-block; color: var(--finris-base); font-size: 50px; transition: all 500ms linear; transition-delay: 0.1s; transform: scale(1); } .services-three__single:hover .services-three__icon span { transform: scale(0.9); } .services-three__content { position: relative; display: block; margin-top: 22px; } .services-three__title { font-size: 26px; line-height: 36px; text-transform: uppercase; font-weight: 400; margin-bottom: 13px; } .services-three__title a { color: var(--finris-black); } .services-three__title a:hover { color: var(--finris-base); } /*-------------------------------------------------------------- # Process One --------------------------------------------------------------*/ .process-one { position: relative; display: block; padding: 120px 0 95px; z-index: 1; } .process-one__top { position: relative; display: block; z-index: 1; } .process-one__top:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(98, 50, 248, 0.10) 0%, rgba(98, 50, 248, 0.00) 100%); width: calc((100% - -207px) / 2); z-index: -1; } .process-one__top-title-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 62px; padding: 65px 0 62px; padding-left: 50px; max-width: 745px; width: 100%; z-index: 1; } .process-one__top-icon { position: relative; display: flex; align-items: center; } .process-one__top-icon img { width: auto; } .process-one__top-title-box .section-title { margin-bottom: 0; } .process-one__top-title-box .section-title__title { margin: 27px 0 0; } .process-one__star { position: absolute; top: 47px; right: -315px; z-index: -1; } .process-one__star img { width: auto; } .sliding-text-one { position: relative; display: block; margin-top: -3px; z-index: 1; } .sliding-text-one--bg1::before { content: ""; position: absolute; top: 4px; left: 0; bottom: 11px; right: 0; background-color: rgba(var(--finris-primary-rgb), .05); z-index: -1; } .sliding-text-one__wrap { position: relative; display: block; } .sliding-text-one__list { position: relative; display: flex; align-items: center; flex-wrap: wrap; flex-wrap: nowrap; width: fit-content; } .sliding-text-one__list li { osition: relative; display: block; float: left; margin-right: 35px; } .sliding-text-one__list li span { position: relative; display: block; width: 75px; height: 48px; border: 1px solid var(--finris-bdr-color); border-radius: 24px; top: 25px; } .sliding-text-one__title { position: relative; display: flex; align-items: center; gap: 45px; color: transparent; -webkit-text-stroke: 1px var(--finris-bdr-color); font-size: 120px; line-height: 100px; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; font-family: var(--finris-font-two); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .sliding-text-one__list li .sliding-text-one__title:hover { color: transparent; -webkit-text-stroke: 1px transparent; } .sliding-text-one__title:before { overflow: hidden; position: absolute; top: 0; left: 0; width: 0; color: var(--finris-base); white-space: nowrap; content: attr(data-hover); transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87); } .sliding-text-one__list li:hover .sliding-text-one__title:before { width: 100%; color: var(--finris-base); } .process-one__bottom { position: relative; display: block; counter-reset: count; z-index: 3; } .process-one__bottom ul li:nth-child(1) { margin-top: 155px; } .process-one__bottom ul li:nth-child(2) { margin-top: 90px; } .process-one__bottom ul li:nth-child(3) { margin-top: 35px; } .process-one__single { position: relative; display: block; margin-bottom: 24px; } .process-one__title-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .process-one__icon { position: relative; display: flex; align-items: center; } .process-one__icon img { width: auto; -webkit-transition: all 0.90s ease; -o-transition: all 0.90s ease; transition: all 0.90s ease; } .process-one__single:hover .process-one__icon img { transform: scale(1.02) translateX(2px); } .process-one__title { font-size: 24px; font-weight: 400; line-height: 30px; text-transform: uppercase; } .process-one__text { margin-top: 16px; margin-bottom: 22px; } .process-one__count { position: relative; display: block; } .process-one__count:before { position: relative; display: block; font-size: 60px; line-height: 45px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--finris-base); counter-increment: count; content: "0"counter(count); transition: all 200ms linear; transition-delay: 0.1s; } .process-one__single:hover .process-one__count:before { color: var(--finris-base); -webkit-text-stroke: 1px var(--finris-base); } .process-one__arrow { position: absolute; bottom: 5px; left: 88px; animation: leftRight 4s ease-in-out infinite; } .process-one__arrow img { width: auto; } /*-------------------------------------------------------------- # Process Two --------------------------------------------------------------*/ .process-two { position: relative; display: block; overflow: hidden; padding: 118px 0 90px; z-index: 1; } .process-two__shape-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 106px; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.04; z-index: -1; } .process-two__shape-3 { position: absolute; top: 325px; left: 0; z-index: -1; } .process-two__shape-3 img { width: auto; } .process-two__shape-4 { position: absolute; top: 30px; right: 15px; z-index: -1; } .process-two__shape-4 img { width: auto; } .process-two .section-title-two { margin-bottom: 77px; } .process-two__inner { position: relative; display: block; } .process-two__inner li:nth-child(1) { margin-top: 110px; } .process-two__inner li:nth-child(3) { margin-top: 110px; } .process-two__single { position: relative; display: block; text-align: center; margin-bottom: 20px; z-index: 1; } .process-two__shape-1 { position: absolute; top: 0; left: 0; right: 0; height: 121px; background-repeat: no-repeat; background-position: center; z-index: -1; } .process-two__shape-2 { position: absolute; top: -14px; left: 0; right: 0; height: 121px; background-repeat: no-repeat; background-position: center; z-index: -1; } .process-two__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 80px; width: 80px; background-color: var(--finris-white); border: 1px dashed var(--finris-base); border-radius: 50%; margin: 0 auto 0; overflow: hidden; z-index: 1; } .process-two__icon:before { content: ""; position: absolute; bottom: -45px; right: -34px; height: 80px; width: 80px; background-color: rgba(var(--finris-base-rgb), .20); border-radius: 50%; z-index: -1; } .process-two__icon img { width: auto; -webkit-transition: all 0.90s ease; -o-transition: all 0.90s ease; transition: all 0.90s ease; } .process-two__single:hover .process-two__icon img { transform: scale(.9) translateX(2px); } .process-two__title { font-size: 24px; font-weight: 400; line-height: 34px; text-transform: uppercase; margin-top: 13px; margin-bottom: 14px; } /*-------------------------------------------------------------- # Process Three --------------------------------------------------------------*/ .process-three { position: relative; display: block; counter-reset: count; padding: 0 0 90px; z-index: 1; } .process-three__single { position: relative; display: block; text-align: center; margin-bottom: 22px; } .process-three__icon-box { position: relative; display: block; height: 100px; width: 100px; margin: 0 auto 0; } .process-three__count { position: absolute; top: -15px; left: -15px; height: 35px; width: 35px; border-radius: 0%; z-index: 2; } .process-three__count:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 16px; font-weight: 500; color: var(--finris-white); background-color: var(--finris-base); border-radius: 0%; counter-increment: count; content: "0"counter(count); transition: all 200ms linear; transition-delay: 0.1s; } .process-three__single:hover .process-three__count:before { color: var(--finris-base); background-color: var(--finris-white); box-shadow: 0px 0px 5px 1px #F7F7F7; } .process-three__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 100px; width: 100px; margin: 0 auto 0; border-radius: 0%; background-color: var(--finris-white); box-shadow: 0px 0px 9px 8px #F7F7F7; z-index: 1; } .process-three__icon:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; border-radius: 0%; background-color: var(--finris-base); transform: scale(0); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: -1; } .process-three__single:hover .process-three__icon:before { transform: scaleX(1); } .process-three__icon span { position: relative; display: inline-block; font-size: 40px; color: var(--finris-base); transition: all 500ms linear; transition-delay: 0.1s; transform: scale(1); } .process-three__single:hover .process-three__icon span { color: var(--finris-white); transform: scale(1.2); } .process-three__content { position: relative; display: block; margin-top: 32px; } .process-three__title { font-size: 24px; font-weight: 400; line-height: 30px; text-transform: uppercase; margin-bottom: 12px; } .process-three__single--two .process-three__content { margin-top: 0; margin-bottom: 32px; } /*-------------------------------------------------------------- # pricing One --------------------------------------------------------------*/ .pricing-one { position: relative; display: block; z-index: 1; } .pricing-one__shape-3 { position: absolute; bottom: 115px; left: 30px; z-index: -1; } .pricing-one__shape-3 img { width: auto; } .pricing-one__shape-4 { position: absolute; top: 90px; right: 75px; opacity: .20; z-index: -1; } .pricing-one__shape-4 img { width: auto; } .pricing-one .section-title { margin-bottom: 29px; } .pricing-one__switch-toggle { position: relative; display: block; margin-bottom: 60px; } .pricing-one__switch-toggle ul.switch-toggler-list { display: flex; align-items: center; justify-content: center; } .pricing-one__switch-toggle ul.switch-toggler-list li a { color: var(--finris-gray); font-size: 16px; font-weight: 500; padding-left: 10px; padding-right: 10px; display: block; } .pricing-one__switch-toggle ul.switch-toggler-list li.active a { color: var(--finris-base); } .pricing-one__switch-toggle .switch { position: relative; display: inline-block; vertical-align: middle; margin: 0; border-radius: 15px; width: 45px; height: 25px; } .pricing-one__switch-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: .4s; transition: .4s; background-color: var(--finris-base); } .pricing-one__switch-toggle .slider.round { border-radius: 15px; } .pricing-one__switch-toggle .slider:before { position: absolute; content: ""; height: 15px; width: 15px; left: 5px; right: 5px; top: 50%; -webkit-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); background-color: var(--finris-white); -webkit-transition: .4s; transition: .4s; } .pricing-one__switch-toggle .slider.round:before { border-radius: 50%; } .pricing-one__switch-toggle .switch.off .slider:before { -webkit-transform: translateX(20px) translateY(-50%); transform: translateX(20px) translateY(-50%); } .pricing-one .tabed-content { position: relative; display: block; height: 560px; overflow: hidden; } .pricing-one__single { position: relative; display: block; border: 1px solid var(--finris-bdr-color); border-radius: 16px; padding: 38px 25px 40px; margin-bottom: 30px; overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .pricing-one__single:hover { border: 1px solid var(--finris-base); } .pricing-one__single::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--finris-base); border-radius: 12px; transform: scaleX(0.7) rotateX(20deg); transition: all 0.4s linear; opacity: 0; z-index: -1; } .pricing-one__single:hover:before { transform: scaleX(1.0) rotateX(0deg); transition: all 0.4s linear; opacity: 1; } .pricing-one__title-box { position: relative; display: block; margin-bottom: 30px; } .pricing-one__title { font-size: 16px; color: var(--finris-gray); text-transform: uppercase; line-height: 16px; font-family: var(--finris-font-two); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pricing-one__single:hover .pricing-one__title { color: var(--finris-white); } .pricing-one__price-box { font-size: 36px; line-height: 40px; font-family: var(--finris-font); font-weight: 700; position: relative; display: flex; align-items: center; gap: 4px; margin-top: 9px; margin-bottom: 15px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pricing-one__price-box span { font-size: 16px; font-weight: 500; line-height: 20px; } .pricing-one__single:hover .pricing-one__price-box { color: var(--finris-white); } .pricing-one__border { position: relative; display: block; width: 80px; height: 4px; background-color: var(--finris-base); border-radius: 2px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pricing-one__single:hover .pricing-one__border { background-color: var(--finris-white); } .pricing-one__feature-list-box { position: relative; display: block; } .pricing-one__feature-title { font-size: 18px; font-weight: 400; text-transform: uppercase; line-height: 23px; margin-bottom: 18px; } .pricing-one__single:hover .pricing-one__feature-title { color: var(--finris-white); } .pricing-one__feature-list { position: relative; display: block; } .pricing-one__feature-list li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .pricing-one__feature-list li+li { margin-top: 10px; } .pricing-one__feature-list li .icon { position: relative; display: flex; align-items: center; justify-content: center; height: 12px; width: 12px; background-color: var(--finris-base); border-radius: 50%; font-size: 6px; color: var(--finris-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pricing-one__single:hover .pricing-one__feature-list li .icon { background-color: var(--finris-white); color: var(--finris-base); } .pricing-one__single:hover .pricing-one__feature-list li .text p { -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pricing-one__single:hover .pricing-one__feature-list li .text p { color: var(--finris-white); } .pricing-one__feature-list li:nth-child(5) .icon { background-color: var(--finris-gray); } .pricing-one__feature-list li:nth-child(6) .icon { background-color: var(--finris-gray); } .pricing-one__btn-box { position: relative; display: block; margin-top: 33px; } .pricing-one__single:hover .pricing-one__btn.thm-btn { color: var(--finris-base); background-color: var(--finris-white); } .pricing-one__single .pricing-one__btn.thm-btn:hover { color: var(--finris-white); } .pricing-one__single .pricing-one__btn.thm-btn:hover::before { background-color: var(--finris-black); } .pricing-one__single .pricing-one__btn.thm-btn:hover::after { background-color: var(--finris-black); } .pricing-one__shape-1 { position: absolute; bottom: -60px; right: -70px; width: 198px; height: 198px; background: linear-gradient(180deg, rgba(0, 87, 252, 0) 0%, rgba(0, 87, 252, 0.13) 100%); border-radius: 50%; opacity: 1; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: -1; } .pricing-one__single:hover .pricing-one__shape-1 { opacity: 0; transition-delay: 300ms; } .pricing-one__shape-2 { position: absolute; bottom: -60px; right: -70px; width: 198px; height: 198px; background: linear-gradient(180deg, rgba(7, 56, 150, 0.128) 0%, rgba(0, 38, 108, 0.4) 100%); border-radius: 50%; opacity: 0; transform: translateX(130px); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: -1; } .pricing-one__single:hover .pricing-one__shape-2 { opacity: 1; transform: translateX(0px); transition-delay: 300ms; } .pricing-one__single-last { position: relative; display: block; text-align: center; border: 1px solid var(--finris-bdr-color); border-radius: 16px; padding: 40px 25px 6px; margin-bottom: 30px; overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .pricing-one__custom-pricing-box { position: relative; display: block; } .pricing-one__custom-pricing-icon { position: relative; display: flex; align-items: center; justify-content: center; height: 80px; width: 80px; border-radius: 50%; margin: 0 auto 18px; z-index: 1; } .pricing-one__custom-pricing-icon:before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 50%; border: 3px solid transparent; background: linear-gradient(180deg, rgba(0, 87, 252, .71), rgba(0, 87, 252, .06)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; visibility: visible; opacity: 1; z-index: -1; } .pricing-one__custom-pricing-icon img { width: auto; } .pricing-one__custom-pricing-title { font-size: 20px; font-weight: 500; color: var(--finris-black); margin-bottom: 6px; } .pricing-one__custom-pricing-text { margin-bottom: 31px; } .pricing-one__btn-box-two { position: relative; display: block; } .pricing-one__custom-pricing-img { position: relative; display: block; width: 210px; margin: 4px auto 0; } .pricing-one__custom-pricing-img img { width: 100% } /*-------------------------------------------------------------- # Pricing Two --------------------------------------------------------------*/ .pricing-two { position: relative; display: block; padding: 0 0 120px; z-index: 1; } .pricing-two__main-tab-box { position: relative; display: block; } .pricing-two__main-tab-box .tab-buttons { position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid var(--finris-bdr-color); border-radius: 75px; height: 50px; width: 180px; margin: 0 auto 70px; } .pricing-two__main-tab-box .tab-buttons .tab-btn { position: relative; display: flex; align-items: center; } .pricing-two__main-tab-box .tab-buttons .tab-btn+.tab-btn { margin-left: 0px; } .pricing-two__main-tab-box .tab-buttons .tab-btn span { position: relative; display: block; text-align: center; font-size: 16px; line-height: 16px; color: var(--finris-black); background-color: var(--finris-white); padding: 11px 15px 11px; font-weight: 500; cursor: pointer; overflow: hidden; border-radius: 17px; transition: all 0.5s linear; z-index: 1; } .pricing-two__main-tab-box .tab-buttons .tab-btn.active-btn span { color: var(--finris-white); } .pricing-two__main-tab-box .tab-buttons .tab-btn span:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 0%; background-color: var(--finris-black); transition: all 0.3s ease; z-index: -1; } .pricing-two__main-tab-box .tab-buttons .tab-btn.active-btn span:before { height: 100%; } .pricing-two__main-tab-box .tabs-content { position: relative; display: block; } .pricing-two__main-tab-box .tabs-content .tab { position: relative; display: none; -webkit-transform: translateX(35px); -ms-transform: translateX(35px); transform: translateX(35px); -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; z-index: 10; } .pricing-two__main-tab-box .tabs-content .tab.active-tab { display: block; margin-top: 0px; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .pricing-two__inner { position: relative; display: block; border: 1px solid var(--finris-bdr-color); border-radius: 16px; background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%); z-index: 1; } .pricing-two__inner>ul.row { --bs-gutter-x: 0px; } .pricing-two__inner>ul>li:nth-child(2) .pricing-two__single { border-left: 1px solid var(--finris-bdr-color); border-right: 1px solid var(--finris-bdr-color); } .pricing-two__single { position: relative; display: block; padding: 33px 32px 35px; overflow: hidden; z-index: 1; } .pricing-two__single-shape-1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; z-index: -1; } .pricing-two__single-shape-1 img { width: auto; } .pricing-two__title-box { position: relative; display: block; margin-bottom: 45px; } .pricing-two__title { font-size: 16px; color: var(--finris-gray); text-transform: uppercase; line-height: 16px; font-weight: 700; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pricing-two__price-box { font-size: 48px; line-height: 48px; font-weight: 400; position: relative; display: flex; align-items: center; gap: 4px; margin-top: 11px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pricing-two__price-box span { font-size: 16px; font-weight: 400; line-height: 20px; color: var(--finris-gray); } .pricing-two__feature-list { position: relative; display: block; } .pricing-two__feature-list:before { content: ""; position: absolute; top: 7px; bottom: 7px; left: 7px; width: 1px; background-color: var(--finris-bdr-color); } .pricing-two__feature-list li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; } .pricing-two__feature-list li+li { margin-top: 14px; } .pricing-two__feature-list li .icon { position: relative; display: flex; align-items: center; justify-content: center; height: 15px; width: 15px; background-color: var(--finris-base); border-radius: 50%; font-size: 7px; color: var(--finris-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pricing-two__feature-list li .text p { font-size: 18px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pricing-two__feature-list li:nth-child(5) .icon { background-color: var(--finris-gray); } .pricing-two__feature-list li:nth-child(6) .icon { background-color: var(--finris-gray); } .pricing-two__btn-box { position: relative; display: block; margin-top: 45px; } /*-------------------------------------------------------------- # Pricing Page --------------------------------------------------------------*/ .pricing-page { padding: 120px 0 90px; } /*** ============================================= Product ============================================= ***/ .product { position: relative; display: block; padding: 120px 0 120px; } .product__sidebar { position: relative; display: block; } .product__sidebar-single+.product__sidebar-single { margin-top: 30px; } .product__sidebar-title { font-size: 20px; font-weight: 400; line-height: 20px; text-transform: uppercase; margin: 0; margin-bottom: 22px; } .shop-search { position: relative; display: block; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding: 30px 30px 30px; } .shop-search form { position: relative; } .shop-search form input[type=search], .shop-search form input[type=text] { width: 100%; height: 60px; background-color: var(--finris-white); padding-left: 30px; padding-right: 60px; font-size: 16px; color: var(--finris-gray); font-family: var(--finris-font); border: none; outline: none; font-weight: 500; } .shop-search form ::placeholder { color: inherit; opacity: 1; } .shop-search form button[type="submit"] { background-color: var(--finris-base); color: var(--finris-white); font-size: 18px; position: absolute; top: 5px; right: 5px; bottom: 5px; width: 50px; outline: none; border: none; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 3px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .shop-search form button:hover[type="submit"] { background-color: var(--finris-black); color: var(--finris-white); } .product__price-ranger { position: relative; padding: 28px 30px 27px; margin: 0; background-color: rgba(var(--finris-bdr-color-rgb), .50); } .product__price-ranger.price-ranger { margin-top: 7px; margin-bottom: 0px; } .product__price-ranger .price-ranger .ui-widget-content { background: var(--finris-white); border: none; height: 5px; } .product__price-ranger .price-ranger .ui-slider-handle { position: absolute; top: -5px; background: var(--finris-base); border: 0; height: 14px; width: 14px !important; border-radius: 50%; margin-left: -2px; outline: medium none; cursor: pointer; z-index: 2; } .product__price-ranger .price-ranger .ui-slider .ui-slider-range { background: var(--finris-base); } .product__price-ranger .price-ranger #slider-range { margin-left: 3px; margin-right: 0; margin-top: 0; } .product__price-ranger .price-ranger .ranger-min-max-block { position: relative; display: block; margin-top: 17px; } .product__price-ranger .price-ranger .ranger-min-max-block input { display: inline-block; } .product__price-ranger .price-ranger .ranger-min-max-block input[type="submit"] { position: relative; display: block; background: var(--finris-black); float: right; text-align: center; border: none; color: var(--finris-white); font-size: 12px; font-weight: 700; margin-top: 0; text-transform: uppercase; cursor: pointer; padding: 5px 20px; border-radius: 20px; letter-spacing: 0.1em; } .product__price-ranger .price-ranger .ranger-min-max-block input[type="text"] { position: relative; display: inline-block; color: var(--finris-gray); font-size: 14px; font-weight: 400; width: 40px; line-height: 30px; border: none; padding: 0; text-align: center; background-color: transparent; } .product__price-ranger .price-ranger .ranger-min-max-block span { position: relative; display: inline-block; color: var(--finris-gray); font-size: 14px; font-weight: 400; line-height: 40px; left: -2px; } .shop-category { position: relative; display: block; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding: 29px 15px 15px; } .shop-category .product__sidebar-title { margin-left: 15px; margin-bottom: 13px; } .shop-category ul { position: relative; display: block; } .shop-category ul li { position: relative; line-height: 24px; font-size: 16px; text-transform: capitalize; color: var(--finris-gray); margin-bottom: 5px; } .shop-category ul li:last-child { margin-bottom: 0; } .shop-category ul li a { position: relative; display: block; line-height: 24px; font-size: 16px; text-transform: capitalize; color: var(--finris-gray); font-weight: 500; border-radius: 8px; transition: all 0.3s ease; z-index: 1; padding: 8px 15px 8px; } .shop-category ul li a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: var(--finris-white); border-radius: 8px; z-index: -1; transform: scaleY(0.0); transform-origin: left; transform-style: preserve-3d; transition: all 200ms linear; transition-delay: 0.1s; } .shop-category ul li a:hover:before { transform: scaleY(1.0); } .shop-category ul li:hover a, .shop-category ul li.active a { color: var(--finris-black); background: var(--finris-white); } .shop-category ul li a:after { position: absolute; right: 20px; top: 5px; font-family: 'icomoon' !important; content: "\e915"; opacity: 1; font-size: 15px; color: var(--finris-base); line-height: 30px; font-weight: 700; transform: scale(0); transition: all 200ms linear; transition-delay: 0.1s; z-index: 1; } .shop-category ul li a:hover:after, .shop-category ul li.active a:after { color: var(--finris-base); transform: scale(1); text-shadow: none; } .shop-color-option { position: relative; display: block; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding: 29px 30px 27px; } .shop-color-option ul { position: relative; display: block; } .shop-color-option ul li { position: relative; display: block; font-size: 16px; color: var(--finris-gray); padding-left: 30px; } .shop-color-option ul li+li { margin-top: 6px; } .shop-color-option ul li:before { content: ""; position: absolute; top: 50%; left: 0; height: 18px; width: 18px; background-color: var(--finris-black); border-radius: 0%; transform: translateY(-50%); } .shop-color-option ul li:nth-child(2):before { background-color: blue; } .shop-color-option ul li:nth-child(3):before { background-color: brown; } .shop-color-option ul li:nth-child(4):before { background-color: pink; } .shop-color-option ul li:nth-child(5):before { background-color: orange; } .shop-product-tags { position: relative; display: block; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding: 25px 15px 30px; overflow: hidden; z-index: 1; } .shop-product-tags .product__sidebar-title { margin-left: 5px; } .shop-product__tags-list { margin-top: -10px; } .shop-product__tags-list a { font-size: 12px; color: var(--finris-black); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background: var(--finris-white); display: inline-block; padding: 5px 20px 5px; margin-left: 5px; font-weight: 700; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.1em; } .shop-product__tags-list a+a { margin-left: 5px; margin-top: 10px; } .shop-product__tags-list a:hover { color: var(--finris-white); background: var(--finris-base); } .shop-product-review { position: relative; display: block; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding: 28px 30px 30px; overflow: hidden; z-index: 1; } .sidebar-rating-box { position: relative; display: block; } .sidebar-rating-box ul { position: relative; display: block; overflow: hidden; padding: 0; } .sidebar-rating-box ul li { position: relative; display: block; } .sidebar-rating-box ul li+li { margin-top: 30px; } .sidebar-rating-box ul li input[type=radio] { position: absolute; top: 0; left: 0; opacity: 0; } .sidebar-rating-box ul li label { position: relative; display: block; padding-left: 30px; color: #ffc009; font-size: 16px; line-height: 16px; font-weight: 400; cursor: pointer; transition: all 200ms linear; transition-delay: 0.1s; } .sidebar-rating-box ul li label span.gray { color: #dddbdb; } .sidebar-rating-box ul li input[type=radio]+label i { position: absolute; top: 1px; left: 0; width: 15px; height: 15px; border: 1px solid var(--finris-gray); border-radius: 0%; transition: all 200ms linear; transition-delay: 0.1s; } .sidebar-rating-box ul li label i::before { content: ""; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; transform: scale(0); background-color: var(--finris-base); border-radius: 0%; transition: all 200ms linear; transition-delay: 0.1s; } .sidebar-rating-box ul li input[type=radio]:checked+label {} .sidebar-rating-box ul li input[type=radio]:checked+label i { border-color: var(--finris-base); } .sidebar-rating-box ul li input[type=radio]:checked+label i::before { transform: scale(1.0); } .shop-product-recent-products { position: relative; display: block; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding: 29px 30px 27px; } .shop-product-recent-products ul { position: relative; display: block; } .shop-product-recent-products ul li { position: relative; display: flex; align-items: center; border-bottom: 1px solid #dddbdb; padding-bottom: 20px; margin-bottom: 20px; } .shop-product-recent-products ul li:last-child { border-bottom: none; padding-bottom: 0px; margin-bottom: 0px; } .shop-product-recent-products ul li .img { position: relative; display: block; overflow: hidden; } .shop-product-recent-products ul li .img::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; background: rgba(var(--finris-black-rgb), 0.5); opacity: 0; z-index: 1; content: ""; } .shop-product-recent-products ul li:hover .img::before { opacity: 1; } .shop-product-recent-products ul li .img img { width: 100%; transition: .5s ease; transform: scale(1.05); } .shop-product-recent-products ul li:hover .img img { transform: scale(1); } .shop-product-recent-products ul li .img a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; color: var(--finris-white); font-size: 16px; line-height: 0; transform: translateY(10px) scale(0); z-index: 5; } .shop-product-recent-products ul li:hover .img a { transform: translateY(0) scale(1); } .shop-product-recent-products ul li .img a:hover { color: var(--finris-primary); transform: translateY(0) scale(1); } .shop-product-recent-products ul li .content { position: relative; display: block; flex: 1; margin-left: 20px; } .shop-product-recent-products ul li .content .title { position: relative; display: block; } .shop-product-recent-products ul li .content .title h5 { font-size: 15px; line-height: 20px; font-weight: 400; text-transform: uppercase; } .shop-product-recent-products ul li .content .title h5 a { color: var(--finris-black); transition: all 200ms linear; transition-delay: 0.1s; } .shop-product-recent-products ul li .content .title h5 a:hover { color: var(--finris-base); } .shop-product-recent-products ul li .content .price { position: relative; display: block; padding: 5px 0px 5px; } .shop-product-recent-products ul li .content .price p { color: var(--finris-base); } .shop-product-recent-products ul li .content .review { position: relative; display: flex; align-items: center; } .shop-product-recent-products ul li .content .review i { color: #ffc009; font-size: 12px; } .shop-product-recent-products ul li .content .review i.color { color: #dddbdb; } .shop-product-recent-products ul li .content .review i+i { margin-left: 5px; } .product__items { position: relative; display: block; } .product__showing-result { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .product__showing-text-box { position: relative; display: block; } .product__showing-text { font-size: 16px; font-weight: 400; } .product__showing-sort { position: relative; display: block; max-width: 340px; width: 100%; } .product__showing-sort .select-box .nice-select { background-color: rgba(var(--finris-bdr-color-rgb), .50); color: var(--finris-gray); font-size: 16px; font-weight: 400; height: 70px; line-height: 70px; padding-left: 30px; padding-right: 30px; width: 100%; margin-bottom: 0px; } .product__showing-sort .select-box .nice-select:after { position: absolute; right: 30px; } .product__all { position: relative; display: block; } .product__all-single { position: relative; display: block; margin-bottom: 30px; border: 1px solid var(--finris-bdr-color); background-color: var(--finris-white); padding: 0 0 30px; transition: all 500ms ease; z-index: 1; } .product__all-single:hover { box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); } .product__all-img { position: relative; display: block; overflow: hidden; z-index: 1; } .product__all-img img:first-child { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .product__all-single:hover .product__all-img img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .product__all-single:hover .product__all-img img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .product__all-img img { position: relative; width: 100%; display: block; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .product__all-content { position: relative; display: block; text-align: center; margin-top: 24px; } .product__all-title { font-size: 20px; font-weight: 400; line-height: 20px; margin-top: 12px; } .product__all-title a { color: var(--finris-black); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .product__all-title a:hover { color: var(--finris-base); } .product__all-price { font-size: 16px; font-weight: 500; color: var(--finris-gray); margin-top: 4px; } .product__all-review { position: relative; display: flex; align-items: center; justify-content: center; } .product__all-review i { font-size: 17px; color: var(--finris-base); } .product__all-review i+i { margin-left: 5px; } .product__all-btn-box { position: relative; display: block; margin-top: 11px; z-index: 2; } /*** ============================================= Product Details ============================================= ***/ .product-details { position: relative; display: block; padding: 120px 0px 56px; } .product-details__img { position: relative; display: block; overflow: hidden; } .product-details__img img { width: 100%; border: 1px solid var(--finris-bdr-color); border-radius: 15px; mix-blend-mode: luminosity; } .product-details__top { position: relative; display: block; margin-top: -9px; } .product-details__title { font-size: 34px; line-height: 44px; font-weight: 400; text-transform: uppercase; margin: 0; } .product-details__title span { position: relative; display: inline-block; color: var(--finris-base); font-size: 20px; line-height: 26px; font-weight: 400; margin-left: 25px; letter-spacing: 0; } .product-details__reveiw { display: flex; align-items: center; margin-top: 23px; padding-bottom: 33px; margin-bottom: 28px; border-bottom: 1px solid var(--finris-bdr-color); } .product-details__reveiw i { font-size: 16px; color: var(--finris-base); } .product-details__reveiw i+i { margin-left: 4px; } .product-details__reveiw span { position: relative; top: 1px; line-height: 1; font-size: 16px; color: var(--finris-gray); margin-left: 18px; } .product-details__content { position: relative; display: block; } .product-details__content-text1 { font-size: 16px; line-height: 30px; margin: 0; margin-bottom: 31px; } .product-details__content-text2 { font-size: 16px; line-height: 30px; margin: 0; } .product-details__quantity { position: relative; display: flex; align-items: center; margin-top: 20px; } .product-details__quantity-title { margin: 0; color: var(--finris-black); font-size: 18px; line-height: 30px; font-weight: 400; text-transform: uppercase; margin-right: 20px; } .product-details__quantity .quantity-box { position: relative; width: 98px; border-radius: 0px; height: 50px; } .product-details__quantity .quantity-box input { width: 98px; border-radius: 10px; height: 50px; border: 1px solid var(--finris-bdr-color); -webkit-appearance: textfield; -moz-appearance: textfield; font-family: var(--finris-font); padding-left: 30px; outline: none; font-size: 18px; font-weight: 700; color: var(--finris-gray); } .product-details__quantity .quantity-box button { width: 24px; height: 24px; background-color: transparent; color: var(--finris-gray); font-size: 8px; position: absolute; top: 1px; right: 1px; background-color: #fff; border: none; border-left: 1px solid var(--finris-bdr-color); border-top-right-radius: 10px; display: flex; align-items: center; justify-content: center; outline: none; } .product-details__quantity .quantity-box button.sub { bottom: 1px; top: auto; border-top: 1px solid var(--finris-bdr-color); border-top-right-radius: 0px; border-bottom-right-radius: 10px; } .product-details__buttons { position: relative; display: flex; align-items: center; margin-bottom: 30px; margin-top: 30px; } .product-details__buttons-1 { position: relative; display: block; } .product-details__buttons-1 .thm-btn { background: transparent; border: 1px solid var(--finris-base); color: var(--finris-base); padding: 20px 30px 19px; } .product-details__buttons-1 .thm-btn:hover { border-color: var(--finris-black); } .product-details__buttons-2 { position: relative; display: block; margin-left: 10px; } .product-details__buttons-2 .thm-btn { padding: 21px 30px 20px; } .product-details__social { position: relative; display: block; } .product-details__social .title { position: relative; display: block; } .product-details__social .title h3 { color: var(--finris-black); font-size: 20px; line-height: 30px; font-weight: 400; text-transform: uppercase; } .product-details__social-link { position: relative; display: flex; align-items: center; margin-top: 13px; } .product-details__social-link a { position: relative; display: flex; align-items: center; justify-content: center; color: var(--finris-white); font-size: 15px; transition: all 200ms linear; transition-delay: 0.1s; background-color: var(--finris-black); border-radius: 50%; height: 45px; width: 45px; } .product-details__social-link a+a { margin-left: 10px; } .product-details__social-link a:hover { color: var(--finris-white); background-color: var(--finris-base); } /*-------------------------------------------------------------- # Product Description --------------------------------------------------------------*/ .product-description { position: relative; display: block; background: #ffffff; padding: 0px 0px 50px; } .product-description__title { font-size: 30px; line-height: 30px; font-weight: 400; text-transform: uppercase; margin-bottom: 27px; } .product-description__text1 { font-size: 16px; line-height: 30px; margin: 0; } .product-description__list { position: relative; display: block; margin-top: 30px; margin-bottom: 30px; } .product-description__list ul { position: relative; display: block; } .product-description__list ul li { position: relative; display: block; margin-bottom: 2px; } .product-description__list ul li:last-child { margin-bottom: 0px; } .product-description__list ul li p { color: var(--finris-black); margin: 0; font-weight: 500; } .product-description__list ul li p span:before { position: relative; display: inline-block; color: var(--finris-base); font-size: 17px; line-height: 17px; margin-right: 11px; top: 2px; font-weight: 700; } .product-description__tex2 { font-size: 16px; line-height: 30px; margin: 0; } /*-------------------------------------------------------------- # Review One --------------------------------------------------------------*/ .review-one { position: relative; display: block; } .comments-area { position: relative; display: block; border-top: 1px solid var(--finris-bdr-color); padding-top: 56px; } .review-one__title { position: relative; display: block; margin-bottom: 36px; } .review-one__title h3 { font-size: 30px; line-height: 30px; font-weight: 400; text-transform: uppercase; margin: 0; } .comments-area .comment-box { position: relative; display: block; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--finris-bdr-color); } .comments-area .comment { position: relative; display: flex; align-items: center; } .comments-area .comment-box .author-thumb { position: relative; display: block; width: 165px; height: 165px; border-radius: 50%; overflow: hidden; } .comments-area .comment-box .author-thumb img { width: 100%; } .comments-area .comment-box .author-thumb figure { margin: 0; } .review-one__content { position: relative; display: block; padding-left: 45px; flex: 1; } .review-one__content-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .review-one__content-top .info { position: relative; display: block; } .review-one__content-top .info h2 { font-size: 20px; line-height: 32px; font-weight: 400; text-transform: uppercase; } .review-one__content-top .info h2 span { color: var(--finris-base); font-size: 16px; font-weight: 500; letter-spacing: 0; } .review-one__content-top .reply-btn { position: relative; display: block; } .review-one__content-top .reply-btn i:before { color: var(--finris-base); font-size: 17px; } .review-one__content-bottom { position: relative; display: block; } .review-one__content-bottom p { font-size: 16px; line-height: 30px; margin: 0px; } /*-------------------------------------------------------------- # Review Form One --------------------------------------------------------------*/ .review-form-one { position: relative; display: block; padding: 16px 0 120px; } .review-form-one__inner { position: relative; display: block; } .review-form-one__title { font-size: 30px; font-weight: 400; line-height: 30px; } .review-form-one__rate-box { position: relative; display: flex; align-items: center; margin-top: 16px; margin-bottom: 25px; } .review-form-one__rate-text { font-size: 16px; font-weight: 400; } .review-form-one__rate { position: relative; display: flex; align-items: center; margin-left: 20px; } .review-form-one__rate i { font-size: 17px; color: var(--finris-base); } .review-form-one__rate i+i { margin-left: 5px; } .review-form-one__form { position: relative; display: block; } .review-form-one__form .row { --bs-gutter-x: 20px; } .review-form-one__input-box textarea { font-size: 16px; color: var(--finris-gray); height: 190px; width: 100%; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding: 25px 30px 30px; border: none; outline: none; margin-bottom: 0px; font-weight: 400; border-radius: 8px; } .review-form-one__input-box.text-message-box { height: 190px; } .review-form-one__input-box { position: relative; display: block; margin-bottom: 20px; } .review-form-one__input-box input[type="text"], .review-form-one__input-box input[type="email"] { height: 60px; width: 100%; border: none; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding-left: 30px; padding-right: 30px; outline: none; font-size: 16px; color: var(--finris-gray); display: block; font-weight: 400; border-radius: 8px; } .review-form-one__btn { border: none; margin-top: 10px; } /*-------------------------------------------------------------- # Cart Page --------------------------------------------------------------*/ .cart-page { position: relative; display: block; background: var(--finris-white); padding: 112px 0px 112px; } .cart-page .table-responsive { position: relative; display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media(max-width: 1199px) { .cart-table { min-width: 1170px; } } .cart-table { margin-bottom: 60px; } .cart-table thead th { color: var(--finris-black); font-size: 20px; line-height: 30px; font-weight: 700; padding: 0; border: none; padding-bottom: 22px; } .cart-table thead th:last-child { text-align: right; } .cart-table tbody tr { vertical-align: middle; } .cart-table tbody tr:last-child { border-bottom: 1px solid var(--finris-bdr-color); } .cart-table tbody td { font-size: 18px; color: var(--finris-gray); vertical-align: middle; border-top: 1px solid var(--finris-bdr-color); border-bottom: 1px solid var(--finris-bdr-color); padding-top: 30px; padding-bottom: 30px; padding-left: 0; padding-right: 0; } .cart-table tbody td:last-child { text-align: right; } .cart-table .product-box { display: flex; align-items: center; } .cart-table .product-box .img-box { position: relative; display: block; width: 120px; border-radius: 0; overflow: hidden; margin-right: 35px; } .cart-table .product-box .img-box img { width: 100%; border: 1px solid var(--finris-bdr-color); border-radius: 10px; } .cart-table h3 { color: var(--finris-black); font-size: 20px; font-weight: 400; margin: 0; } .cart-table h3 a { color: var(--finris-black); transition: all 200ms linear; transition-delay: 0.1s; } .cart-table h3 a:hover { color: var(--finris-base); } .cart-table .quantity-box { position: relative; width: 98px; border-radius: 0px; height: 50px; } .cart-table .quantity-box input { width: 98px; border-radius: 10px; height: 50px; border: 1px solid var(--finris-bdr-color); -webkit-appearance: textfield; -moz-appearance: textfield; font-family: var(--finris-font); padding-left: 30px; outline: none; font-size: 18px; color: var(--finris-gray); font-weight: 700; } .cart-table .quantity-box button { width: 24px; height: 24px; background-color: transparent; color: var(--finris-black); font-size: 8px; position: absolute; top: 1px; right: 1px; background-color: #fff; border-top-right-radius: 10px; display: flex; align-items: center; justify-content: center; outline: none; border: none; border-left: 1px solid var(--finris-bdr-color); } .cart-table .quantity-box button.sub { bottom: 1px; top: auto; border-top: 1px solid var(--finris-bdr-color); border-top-right-radius: 0px; border-bottom-right-radius: 10px; } .cart-table .cross-icon { position: relative; display: block; } .cart-table .cross-icon i:before { position: relative; display: inline-block; color: var(--finris-black); font-size: 16px; } .cart-cupon__form { position: relative; display: block; margin-bottom: 30px; } .cart-cupon__input { width: 100%; max-width: 370px; border-radius: 15px; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding-left: 30px; padding-right: 30px; margin-right: 20px; font-family: var(--finris-font); font-size: 16px; color: var(--finris-gray); height: 60px; line-height: 60px; margin-bottom: 20px; border: none; outline: none; font-weight: 400; } .cart-cupon__form ::placeholder { color: var(--finris-gray); opacity: 1; } .cart-cupon__form .thm-btn { border: none; } .cart-cupon__form .thm-btn:hover { border-color: var(--finris-black); } .cart-total { position: relative; display: block; margin-bottom: 22px; margin-top: -9px; } .cart-total li { display: flex; justify-content: flex-end; align-items: center; color: var(--finris-gray); font-size: 18px; font-weight: 500; } .cart-total li+li { margin-top: 15px; } .cart-total li span:first-child { display: block; color: var(--finris-black); font-size: 20px; margin-right: 80px; font-weight: 700; width: 140px; text-align: right; } .cart-total li:nth-child(2) span:first-child { position: relative; right: 6px; } .cart-total-amount { color: var(--finris-base); } .cart-page__buttons { position: relative; display: flex; align-items: center; justify-content: flex-end; } .cart-page__buttons-1 { position: relative; display: block; } .cart-page__buttons-1 .thm-btn { background: transparent; border: 1px solid var(--finris-base); color: var(--finris-base); padding: 20px 30px 20px; } .cart-page__buttons-1 .thm-btn:hover { border-color: var(--finris-black); } .cart-page__buttons-2 { position: relative; display: block; margin-left: 10px; } /*-------------------------------------------------------------- # Checkout --------------------------------------------------------------*/ .checkout-page { position: relative; display: block; padding: 112px 0 120px; z-index: 1; } .checkout-page .billing_details { position: relative; display: block; } .billing_title { position: relative; display: block; margin-bottom: 35px; } .billing_title p { font-size: 16px; margin: 0; } .billing_title span { color: var(--finris-base); } .billing_title h2 { font-size: 30px; line-height: 30px; margin: 0; font-weight: 400; margin-top: 16px; } .billing_details_form { position: relative; display: block; } .billing_details_form .bs-gutter-x-20 { --bs-gutter-x: 20px; } .billing_details_form .btn-light { border: none; } .billing_details_form .btn-light:hover { border: none; } .billing_input_box { position: relative; display: block; margin-bottom: 20px; } .billing_input_box input[type="text"], .billing_input_box input[type="email"], .billing_input_box input[type="tel"] { height: 60px; width: 100%; border: none; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding-left: 30px; padding-right: 30px; border-radius: 0px; outline: none; font-size: 16px; color: var(--finris-gray); display: block; font-weight: 400; } .billing_details .checked-box { position: relative; display: block; margin-top: -4px; } .billing_details .checked-box label { position: relative; display: inline-block; padding-left: 30px; margin-right: 0px; margin-bottom: 0; color: var(--finris-gray); font-size: 16px; line-height: 26px; font-weight: 400; text-transform: none; cursor: pointer; font-family: var(--finris-font); } .billing_details .checked-box input[type="checkbox"] { display: none; } .billing_details .checked-box input[type="checkbox"]+label span { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; background-color: transparent; background: var(--finris-base); cursor: pointer; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 0; } .billing_details .checked-box label span:before { position: absolute; top: 4px; left: 6px; display: block; border-bottom: 2px solid var(--finris-white); border-right: 2px solid var(--finris-white); content: ''; width: 6px; height: 9px; pointer-events: none; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; opacity: 0; } .billing_details.checked-box input[type="checkbox"]:checked+label span { border-color: var(--finris-white); } .billing_details .checked-box input[type="checkbox"]:checked+label span:before { opacity: 1; } .ship_different_address_title { margin-top: 40px; } .ship_different_address_title h2 span::before { position: relative; display: inline-block; color: var(--finris-base); font-size: 19px; top: -2px; left: 15px; } .ship_different_address_form .ship_different_input { position: relative; display: block; height: 120px; } .ship_different_address_form .ship_different_input textarea { font-size: 16px; color: var(--finris-gray); height: 120px; width: 100%; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding: 15px 30px 20px; border: none; outline: none; margin-bottom: 0px; border-radius: 0px; font-weight: 400; } .billing_details_form .select-box .nice-select { background-color: rgba(var(--finris-bdr-color-rgb), .50); border-radius: 0px; color: var(--finris-gray); font-size: 16px; font-weight: 400; height: 60px; line-height: 60px; padding-left: 30px; padding-right: 30px; width: 100%; margin-bottom: 20px; } .billing_details_form .select-box .nice-select:after { position: absolute; right: 30px; } .your_order { position: relative; display: block; padding-top: 56px; } .your_order h2 { font-size: 30px; line-height: 30px; font-weight: 400; margin: 0; margin-bottom: 36px; } .order_table_box { position: relative; width: 100%; border-bottom: 1px solid var(--finris-bdr-color); padding-bottom: 24px; } .order_table_detail { position: relative; width: 100%; } .order_table_head { position: relative; width: 100%; border-bottom: 1px solid var(--finris-bdr-color); border-top: 1px solid var(--finris-bdr-color); } .order_table_head th { font-size: 20px; color: var(--finris-black); font-weight: 700; margin: 0; padding: 23px 0 22px; } .order_table_head th.right { float: right; } .order_table_detail tbody td { padding: 29px 0 2px; } .order_table_detail tbody td.pro__title { color: var(--finris-gray); font-size: 16px; line-height: 18px; font-weight: 400; } .order_table_detail tbody td.pro__price { color: var(--finris-gray); font-size: 16px; line-height: 18px; text-align: right; font-weight: 400; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .checkout__payment { background-color: rgba(var(--finris-bdr-color-rgb), .50); border-radius: 0; padding: 49px 50px 18px; margin-bottom: 30px; } .checkout__payment__item+.checkout__payment__item { margin-top: 41px; } .checkout__payment__title { display: flex; color: var(--finris-black); font-size: 18px; font-weight: 400; margin: 0; align-items: center; margin-bottom: 27px; cursor: pointer; } .checkout__payment__title::before { content: ''; width: 20px; height: 20px; background-color: var(--finris-white); border: 2px solid #dddddd; border-radius: 50%; margin-right: 10px; font-family: 'Font Awesome 5 Pro'; font-weight: 900; font-size: 10px; color: var(--finris-white); display: flex; justify-content: center; align-items: center; margin-right: 15px; position: relative; top: 0px; transition: all 500ms ease; } .checkout__payment__title img { margin-left: 15px; } .checkout__payment__item--active .checkout__payment__title::before { background-color: var(--finris-base); border-color: var(--finris-base); content: '\f00c'; } .checkout__payment__content { font-size: 16px; line-height: 30px; color: var(--finris-gray); font-weight: 400; } /*-------------------------------------------------------------- # Wishlist Page --------------------------------------------------------------*/ .wishlist-page { position: relative; display: block; background: var(--finris-white); padding: 120px 0px 120px; } .wishlist-page .table-responsive-box { position: relative; display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media(max-width: 1199px) { .wishlist-table { min-width: 1170px; } } .wishlist-table { min-width: 1170px; width: 100%; border: 1px solid var(--finris-bdr-color); } .wishlist-table tbody tr { vertical-align: middle; } .wishlist-table tbody tr:last-child { border-bottom: 1px solid var(--finris-bdr-color); } .wishlist-table tbody td { font-size: 18px; font-weight: 500; color: var(--finris-gray); vertical-align: middle; border-top: 1px solid var(--finris-bdr-color); border-bottom: 1px solid var(--finris-bdr-color); border-right: 1px solid var(--finris-bdr-color); padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; letter-spacing: 0; } .wishlist-table tbody td:first-child { width: 120px; } .wishlist-table tbody td:last-child { text-align: center; padding-left: 7px; padding-right: 14px; } .wishlist-table .product-box { position: relative; display: block; } .wishlist-table .product-box .img-box { position: relative; display: block; width: 120px; overflow: hidden; border-radius: 10px; } .wishlist-table .product-box .img-box img { width: 100%; border-radius: 10px; filter: grayscale(1); } .product-name-select-box { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; } .product-name-select-box .product-name { position: relative; display: block; } .product-name-select-box .product-name h4 { font-size: 22px; font-weight: 400; line-height: 22px; text-transform: uppercase; } .product-name-select-box .product-name p { font-size: 18px; font-weight: 400; } .product-name-select-box .product-select { position: relative; display: block; } .wishlist-table .cross-icon { position: relative; display: block; } .wishlist-table .cross-icon i:before { position: relative; display: inline-block; color: var(--finris-black); font-size: 16px; } /*-------------------------------------------------------------- # Account --------------------------------------------------------------*/ .account { position: relative; display: block; padding: 120px 0 120px; } .account .container { max-width: 760px; } .account__main-tab-box { position: relative; display: block; } .account__main-tab-box .tab-buttons { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .account__main-tab-box .tab-buttons .tab-btn { position: relative; flex: 0 0 50%; max-width: 50%; width: 100%; text-align: center; } .account__main-tab-box .tab-buttons .tab-btn:nth-child(1) span { border-top-left-radius: 20px; } .account__main-tab-box .tab-buttons .tab-btn:nth-child(2) span { border-top-right-radius: 20px; } .account__main-tab-box .tab-buttons .tab-btn span { position: relative; display: block; text-align: center; transition: all 200ms linear; transition-delay: 0.1s; font-size: 18px; line-height: 18px; color: var(--finris-black); background-color: transparent; padding: 22px 0px 18px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; z-index: 1; border: 1px solid var(--finris-bdr-color); font-family: var(--finris-font-two); text-transform: capitalize; letter-spacing: 0.1em; } .account__main-tab-box .tab-buttons .tab-btn.active-btn span { color: var(--finris-white); } .account__main-tab-box .tab-buttons .tab-btn span:before { position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; content: ""; background-color: var(--finris-base); transform: scaleY(0.0) rotateX(0deg); -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; z-index: -1; } .account__main-tab-box .tab-buttons .tab-btn:nth-child(1) span:before { border-top-left-radius: 20px; } .account__main-tab-box .tab-buttons .tab-btn:nth-child(2) span:before { border-top-right-radius: 20px; } .account__main-tab-box .tab-buttons .tab-btn.active-btn span:before { transform: scaleY(1.0) rotateX(0deg); -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } .account__main-tab-box .tabs-content { position: relative; display: block; border: 1px solid var(--finris-bdr-color); border-top: 0px; padding: 60px 80px 75px; } .account__main-tab-box .tabs-content .tab { position: relative; display: none; -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; z-index: 10; } .account__main-tab-box .tabs-content .tab.active-tab { display: block; margin-top: 0px; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .account__main-tab-inner { position: relative; display: block; } .account__form { position: relative; display: block; } .account__form-input-box { position: relative; display: block; margin-bottom: 20px; } .account__form-input-box input[type="text"], .account__form-input-box input[type="password"] { height: 50px; width: 100%; border: none; background-color: rgba(var(--finris-bdr-color-rgb), .50); padding-left: 30px; padding-right: 30px; border-radius: 20px; outline: none; font-size: 14px; color: var(--finris-gray); display: block; font-weight: 500; } .account__form-btn-box { position: relative; display: flex; align-items: center; } .account__form-btn { border: none; } .account__form-btn-box .checked-box { position: relative; display: block; margin-left: 20px; } .account__form-btn-box .checked-box label { position: relative; display: inline-block; padding-left: 30px; margin-right: 0px; margin-bottom: 0; color: var(--finris-gray); font-size: 16px; line-height: 22px; font-weight: 500; text-transform: none; cursor: pointer; font-family: var(--finris-font); } .account__form-btn-box .checked-box input[type="checkbox"] { display: none; } .account__form-btn-box .checked-box input[type="checkbox"]+label span { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; background: var(--finris-white); cursor: pointer; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 2px solid #dddddd; } .account__form-btn-box .checked-box label span:before { position: absolute; top: 3px; left: 4px; display: block; border-bottom: 2px solid #dddddd; border-right: 2px solid #dddddd; content: ''; width: 6px; height: 9px; pointer-events: none; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; opacity: 0; } .account__form-btn-box.checked-box input[type="checkbox"]:checked+label span { border-color: #dddddd; } .account__form-btn-box .checked-box input[type="checkbox"]:checked+label span:before { opacity: 1; } .account__form-forgot-password { position: relative; display: block; margin-top: 9px; } .account__form-forgot-password a { font-size: 16px; font-weight: 500; color: var(--finris-gray); position: relative; display: inline-block; } /*-------------------------------------------------------------- # Sign Up One --------------------------------------------------------------*/ .sign-up-one { position: relative; display: block; background-color: var(--finris-white); padding: 112px 0px 120px; z-index: 1; } .sign-up-one .container { max-width: 620px; } .sign-up-one__form { position: relative; display: block; } .sign-up-one__form .inner-title { position: relative; display: block; padding-bottom: 60px; } .sign-up-one__form .inner-title h2 { font-size: 60px; line-height: 1.0em; font-weight: 400; text-transform: uppercase; } .sign-up-one__form form { position: relative; display: block; background-color: var(--finris-white); box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.06); padding: 60px 50px 52px; } .sign-up-one__form form .form-group { position: relative; display: block; margin-bottom: 20px; } .sign-up-one__form form .input-box { position: relative; display: block; } .sign-up-one__form form input[type="text"], .sign-up-one__form form input[type="email"] { position: relative; display: block; border-radius: 10px; border: 1px solid rgba(var(--finris-bdr-color-rgb), .50); background-color: rgba(var(--finris-bdr-color-rgb), .50); width: 100%; height: 60px; color: var(--finris-gray); font-size: 16px; font-family: var(--finris-font); font-weight: 400; font-style: normal; padding-left: 30px; padding-right: 30px; outline: none; transition: all 500ms ease; } .sign-up-one__form form input[type="text"]:focus, .sign-up-one__form form input[type="email"]:focus { border-color: var(--finris-base); background-color: var(--finris-white); } .sign-up-one__form form input[type="text"]::-webkit-input-placeholder { color: var(--finris-gray); } .sign-up-one__form form input[type="text"]:-moz-placeholder { color: var(--finris-gray); } .sign-up-one__form form input[type="text"]::-moz-placeholder { color: var(--finris-gray); } .sign-up-one__form form input[type="text"]:-ms-input-placeholder { color: var(--finris-gray); } .sign-up-one__form form input[type="email"]::-webkit-input-placeholder { color: var(--finris-gray); } .sign-up-one__form form input[type="email"]:-moz-placeholder { color: var(--finris-gray); } .sign-up-one__form form input[type="email"]::-moz-placeholder { color: var(--finris-gray); } .sign-up-one__form form input[type="email"]:-ms-input-placeholder { color: var(--finris-gray); } .sign-up-one__form form .thm-btn { width: 100%; border: none; } .sign-up-one__form form .google-facebook { position: relative; display: flex; align-items: center; margin-top: 10px; } .sign-up-one__form form .google-facebook a { position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid var(--finris-gray); background-color: var(--finris-white); color: var(--finris-black); font-size: 16px; line-height: 28px; font-family: var(--finris-font); font-weight: 500; padding: 10px 15px 10px; border-radius: 5px; letter-spacing: -0.01em; transition: all 200ms linear; transition-delay: 0.1s; } .sign-up-one__form form .google-facebook a:hover { border: 1px solid var(--finris-base); background-color: var(--finris-white); } .sign-up-one__form form .google-facebook a+a { margin-left: 14px; } .sign-up-one__form form .google-facebook a .icon { position: relative; display: block; line-height: 0; margin-right: 10px; } .sign-up-one__form form .create-account { position: relative; display: block; padding-top: 22px; } .sign-up-one__form form .create-account p { margin: 0; } .sign-up-one__form form .create-account p a { font-weight: 500; } .sign-up-one__form form .create-account p a:hover { color: var(--finris-base); } /*-------------------------------------------------------------- # Login One --------------------------------------------------------------*/ .login-one { position: relative; display: block; background-color: var(--finris-white); padding: 112px 0px 120px; z-index: 1; } .login-one .container { max-width: 620px; } .login-one__form { position: relative; display: block; } .login-one__form .inner-title { position: relative; display: block; padding-bottom: 60px; } .login-one__form .inner-title h2 { font-size: 60px; line-height: 1.0em; font-weight: 400; text-transform: uppercase; } .login-one__form form { position: relative; display: block; background-color: var(--finris-white); box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.06); padding: 60px 50px 52px; } .login-one__form form .form-group { position: relative; display: block; margin-bottom: 20px; } .login-one__form form .input-box { position: relative; display: block; } .login-one__form form input[type="text"], .login-one__form form input[type="email"] { position: relative; display: block; border-radius: 10px; border: 1px solid rgba(var(--finris-bdr-color-rgb), .50); background-color: rgba(var(--finris-bdr-color-rgb), .50); width: 100%; height: 60px; color: var(--finris-gray); font-size: 16px; font-family: var(--finris-font); font-weight: 400; font-style: normal; padding-left: 30px; padding-right: 30px; outline: none; transition: all 500ms ease; } .login-one__form form input[type="text"]:focus, .login-one__form form input[type="email"]:focus { border-color: var(--finris-base); background-color: var(--finris-white); } .login-one__form form input[type="text"]::-webkit-input-placeholder { color: var(--finris-gray); } .login-one__form form input[type="text"]:-moz-placeholder { color: var(--finris-gray); } .login-one__form form input[type="text"]::-moz-placeholder { color: var(--finris-gray); } .login-one__form form input[type="text"]:-ms-input-placeholder { color: var(--finris-gray); } .login-one__form form input[type="email"]::-webkit-input-placeholder { color: var(--finris-gray); } .login-one__form form input[type="email"]:-moz-placeholder { color: var(--finris-gray); } .login-one__form form input[type="email"]::-moz-placeholder { color: var(--finris-gray); } .login-one__form form input[type="email"]:-ms-input-placeholder { color: var(--finris-gray); } .login-one__form form .thm-btn { width: 100%; border: none; } .login-one__form form .remember-forget { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 24px; } .login-one__form form .checked-box1 { position: relative; display: block; min-height: 26px; } .login-one__form form .checked-box1 input[type="checkbox"] { display: none; } .login-one__form form .checked-box1 label { position: relative; display: inline-block; padding-left: 25px; color: var(--finris-gray); font-size: 16px; line-height: 26px; font-weight: 400; cursor: pointer; font-family: var(--finris-font); } .login-one__form form .checked-box1 input[type="checkbox"]+label span { position: absolute; display: block; top: 5px; left: 0; width: 16px; height: 16px; vertical-align: middle; background-color: transparent; border: 1px solid #e3e4ea; cursor: pointer; border-radius: 4px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .login-one__form form .checked-box1 label span:before { position: absolute; top: 0px; left: 0px; bottom: 0; right: 0; content: ""; width: 8px; height: 8px; background: var(--finris-base); border-radius: 2px; margin: 3px auto 0px; transform: scale(0); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .login-one__form form .checked-box1 input[type="checkbox"]:checked+label span { border-color: var(--finris-base); } .login-one__form form .checked-box1 input[type="checkbox"]:checked+label span:before { transform: scale(1.0); } .login-one__form form .forget { position: relative; display: block; } .login-one__form form .forget a { color: var(--finris-black); font-size: 16px; line-height: 26px; font-family: var(--finris-font); font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; } .login-one__form form .forget a:hover { color: var(--finris-base); } .login-one__form form .create-account { position: relative; display: block; padding-top: 25px; } .login-one__form form .create-account p { color: var(--finris-black); } .login-one__form form .create-account p a { color: var(--finris-base); font-weight: 500; } /*** ============================================= Error Page ============================================= ***/ .error-page { position: relative; display: block; background: var(--finris-white); padding: 120px 0px 120px; z-index: 1; } .error-page__inner { position: relative; display: block; } .error-page__img { position: relative; display: block; mix-blend-mode: difference; } .error-page__img img { width: auto; } .error-page__content { position: relative; display: block; margin-top: 62px; } .error-page__content h2 { color: var(--finris-base); font-size: 28px; line-height: 35px; font-weight: 400; text-transform: uppercase; margin-bottom: 14px; } .error-page__content p { color: var(--finris-black); margin: 0; } .error-page__content .btn-box { position: relative; display: block; line-height: 0px; margin-top: 21px; } /*-------------------------------------------------------------- # Banner One --------------------------------------------------------------*/ .banner-one { position: relative; display: block; padding: 240px 0 85px; z-index: 1; } .banner-one__shape-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .20; z-index: -1; } .banner-one__shape-bg-2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .50; z-index: -1; } .banner-one__shape-bg-3 { position: absolute; top: 165px; left: 0; right: 0; bottom: 65px; background-repeat: no-repeat; background-position: bottom center; background-size: cover; z-index: -1; } .banner-one__shape-1 { position: absolute; top: 175px; left: 60px; z-index: -1; } .banner-one__shape-1 img { width: auto; } .banner-one__shape-2 { position: absolute; bottom: -55px; left: -60px; z-index: -1; } .banner-one__shape-2 img { width: auto; } .banner-one__shape-3 { position: absolute; bottom: 210px; left: 850px; z-index: -1; } .banner-one__shape-3 img { width: auto; } .banner-one__shape-4 { position: absolute; bottom: 265px; right: 50px; opacity: .90; z-index: -1; } .banner-one__shape-4 img { width: auto; } .banner-one__title-box { position: relative; display: block; } .banner-one__sub-title { font-size: 20px; font-weight: 400; line-height: 25px; text-transform: uppercase; position: relative; display: inline-block; background-color: rgba(var(--finris-primary-rgb), .20); border-radius: 4px; padding: 8px 16px 5px; } .banner-one__title { font-size: 100px; color: #061C3D; line-height: 1.1em; font-weight: 400; text-transform: uppercase; margin-top: 19px; } .banner-one__title span { color: #FF3838; } .banner-one__left { position: relative; display: block; margin-top: 44px; } .banner-one__text-1 { font-size: 18px; line-height: 28px; margin-bottom: 25px; } .banner-one__text-2 { font-size: 18px; line-height: 28px; } .banner-one__btn-and-satisfied-client-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 30px; margin-top: 47px; } .banner-one__btn-box { position: relative; display: block; } .banner-one__satisfied-client-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .banner-one__satisfied-client-list { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .banner-one__satisfied-client-list li+li { margin-left: -22px; } .banner-one__satisfied-client-img { position: relative; display: block; width: 44px; overflow: hidden; border-radius: 50%; border: 1px solid var(--finris-black); } .banner-one__satisfied-client-img img { width: 100%; border-radius: 50%; } .banner-one__satisfied-client-content { position: relative; display: block; top: 6px; } .banner-one__satisfied-client-count { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .banner-one__satisfied-client-count h4 { font-weight: 400; font-size: 24px; line-height: 24px; letter-spacing: 0.03em; text-transform: uppercase; position: relative; } .banner-one__satisfied-client-count-plus { font-weight: 400; font-size: 24px; line-height: 24px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--finris-black); position: relative; top: -2px; } .banner-one__satisfied-client-count-text { font-weight: 500; position: relative; top: -6px; } .banner-one__right { position: relative; display: block; margin-left: 30px; } .banner-one__img { position: relative; display: block; } .banner-one__img img { width: 100%; } /*-------------------------------------------------------------- # Banner Two --------------------------------------------------------------*/ .banner-two { position: relative; display: block; background-color: #121A46; padding: 300px 0 115px; z-index: 1; } .banner-two__shape-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 48.9%; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.06; z-index: -1; } .banner-two__shape-1 { position: absolute; top: 0; left: 0; z-index: -1; } .banner-two__shape-1 img { width: auto; } .banner-two__inner { position: relative; display: block; } .banner-two__left { position: relative; display: block; } .banner-two__left-content { position: relative; display: block; } .banner-two__title { position: relative; display: block; font-size: 52px; color: var(--finris-white); font-weight: 400; line-height: 1.1em; text-transform: uppercase; } .banner-two__title span { color: var(--finris-primary); } .banner-two__satisfied-client-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 124px; margin-bottom: 67px; } .banner-two__satisfied-client-list { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .banner-two__satisfied-client-list li+li { margin-left: -22px; } .banner-two__satisfied-client-img { position: relative; display: block; width: 44px; overflow: hidden; border-radius: 50%; border: 1px solid rgba(var(--finris-white-rgb), .70); } .banner-two__satisfied-client-img img { width: 100%; border-radius: 50%; } .banner-two__satisfied-client-content { position: relative; display: block; top: 6px; } .banner-two__satisfied-client-count { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .banner-two__satisfied-client-count h4 { font-weight: 400; font-size: 24px; line-height: 24px; letter-spacing: 0.03em; text-transform: uppercase; position: relative; color: var(--finris-primary); } .banner-two__satisfied-client-count-plus { font-weight: 400; font-size: 24px; line-height: 24px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--finris-primary); position: relative; top: -2px; } .banner-two__satisfied-client-count-text { font-weight: 500; position: relative; top: -6px; color: var(--finris-white); } .banner-two__img-box { position: relative; display: block; margin-left: 55px; margin-right: 55px; } .banner-two__img { position: relative; display: block; } .banner-two__img img { width: 100%; } .banner-two__img-shape-box { position: absolute; top: 0; left: 50%; right: 0; width: 533px; height: 533px; background: rgba(217, 217, 217, 0.02); border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); } .banner-two__img-shape-1 { position: relative; width: 433px; height: 433px; background: rgba(217, 217, 217, 0.02); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .banner-two__img-shape-2 { position: relative; width: 333px; height: 333px; background: rgba(217, 217, 217, 0.02); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .banner-two__right { position: relative; display: block; } .banner-two__text { color: rgba(var(--finris-white-rgb), .70); } .banner-two__active-customer-img-box { position: relative; display: block; max-width: 245px; width: 100%; margin-top: 20px; margin-bottom: 20px; animation: topBottom 3s ease-in-out infinite; } .banner-two__active-customer-img-box img { width: 100%; } .banner-two__active-customer { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 25px; } .banner-two__active-customer-count { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .banner-two__active-customer-count h4 { font-weight: 400; font-size: 40px; line-height: 40px; letter-spacing: 0.03em; text-transform: uppercase; position: relative; color: var(--finris-primary); } .banner-two__active-customer-count-plus { font-weight: 400; font-size: 40px; line-height: 40px; letter-spacing: 0.03em; text-transform: uppercase; position: relative; color: var(--finris-primary); font-family: var(--finris-font-two); } .banner-two__active-customer-text { color: var(--finris-white); font-size: 18px; line-height: 24px; } /*-------------------------------------------------------------- # Main Slider --------------------------------------------------------------*/ .main-slider { position: relative; display: block; overflow: hidden; background: linear-gradient(283.06deg, #040850 1.13%, #03063F 100%); z-index: 10; } .main-slider .item { position: relative; padding-top: 291px; padding-bottom: 150px; overflow: hidden; z-index: 10; } .main-slider__shape-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .main-slider__shape-bg-2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .60; z-index: -1; } .main-slider__shape-bg-3 { position: absolute; top: 0; left: 0; right: 0; bottom: 170px; background-repeat: no-repeat; background-position: top center; opacity: .06; z-index: -1; } .main-slider__shape-1 { position: absolute; top: 355px; left: 100px; z-index: -1; } .main-slider__shape-1 img { width: auto; } .main-slider__shape-2 { position: absolute; bottom: -65px; left: -165px; z-index: -1; } .main-slider__shape-2 img { width: auto; } .main-slider__shape-3 { position: absolute; top: 255px; right: 845px; opacity: .90; z-index: -1; } .main-slider__shape-3 img { width: auto; } .main-slider__shape-4 { position: absolute; bottom: 180px; right: 125px; opacity: .60; z-index: -1; } .main-slider__shape-4 img { width: auto; } .main-slider__img-box { position: absolute; bottom: 0; right: 314px; opacity: 0; transform: translateX(300px); -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; z-index: 1; } .active .main-slider__img-box { opacity: 1; transform: translateX(0); -webkit-transition-delay: 3000ms; -moz-transition-delay: 3000ms; -ms-transition-delay: 3000ms; -o-transition-delay: 3000ms; transition-delay: 3000ms; } .main-slider__img { position: relative; display: block; } .main-slider__img img { width: auto !important; } .main-slider__img-shape-box { position: absolute; top: 165px; left: 0; right: 0; width: 633px; height: 633px; background: rgba(217, 217, 217, 0.02); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .main-slider__img-shape-1 { position: relative; width: 533px; height: 533px; background: rgba(217, 217, 217, 0.02); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .main-slider__img-shape-2 { position: relative; width: 433px; height: 433px; background: rgba(217, 217, 217, 0.02); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .main-slider__content { position: relative; display: block; overflow: hidden; z-index: 10; } .main-slider__title-box { position: relative; display: inline-block; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateY(-120px); -ms-transform: perspective(400px) rotateY(0deg) translateY(-120px); transform: perspective(400px) rotateY(0deg) translateY(-120px); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .active .main-slider__title-box { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px); -ms-transform: perspective(400px) rotateY(0deg) translateY(0px); transform: perspective(400px) rotateY(0deg) translateY(0px); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } .main-slider__title { position: relative; display: block; font-size: 90px; color: var(--finris-white); font-weight: 400; line-height: 1em; text-transform: uppercase; } .main-slider__title span { color: var(--finris-primary); } .main-slider__btn { position: absolute; bottom: 16px; right: 93px; z-index: 1; } .main-slider__btn a { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border: 1px solid var(--finris-base); font-size: 26px; color: #E7E7E8; font-family: var(--finris-font-two); text-transform: uppercase; padding: 19px 25px 17px; border-radius: 32px; overflow: hidden; z-index: 1; } .main-slider__btn:before { content: ""; position: absolute; top: 3px; right: 4px; height: 12px; width: 12px; border-radius: 50%; background-color: var(--finris-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-slider__btn:hover:before { background-color: var(--finris-base); } .main-slider__btn a:hover { color: var(--finris-white); } .main-slider__btn a::after { position: absolute; background-color: var(--finris-base); bottom: 0; right: 0; content: ""; width: 50%; height: 0; visibility: hidden; opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } .main-slider__btn a:hover:after { width: 100%; height: 100%; visibility: visible; opacity: 1; } .main-slider__text { position: relative; display: block; font-size: 20px; line-height: 30px; color: var(--finris-white); margin-top: 26px; margin-bottom: 69px; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateX(-120px); -ms-transform: perspective(400px) rotateY(0deg) translateX(-120px); transform: perspective(400px) rotateY(0deg) translateX(-120px); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .active .main-slider__text { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateX(0px); -ms-transform: perspective(400px) rotateY(0deg) translateX(0px); transform: perspective(400px) rotateY(0deg) translateX(0px); -webkit-transition-delay: 1500ms; -moz-transition-delay: 1500ms; -ms-transition-delay: 1500ms; -o-transition-delay: 1500ms; transition-delay: 1500ms; } .main-slider__satisfied-client-and-rating-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 80px; } .main-slider__satisfied-client-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateX(-80px); -ms-transform: perspective(400px) rotateY(0deg) translateX(-80px); transform: perspective(400px) rotateY(0deg) translateX(-80px); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .active .main-slider__satisfied-client-box { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateX(0px); -ms-transform: perspective(400px) rotateY(0deg) translateX(0px); transform: perspective(400px) rotateY(0deg) translateX(0px); -webkit-transition-delay: 2000ms; -moz-transition-delay: 2000ms; -ms-transition-delay: 2000ms; -o-transition-delay: 2000ms; transition-delay: 2000ms; } .main-slider__satisfied-client-list { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .main-slider__satisfied-client-list li+li { margin-left: -22px; } .main-slider__satisfied-client-img { position: relative; display: block; width: 44px; overflow: hidden; border-radius: 50%; border: 1px solid var(--finris-black); } .main-slider__satisfied-client-img img { width: 100%; border-radius: 50%; } .main-slider__satisfied-client-content { position: relative; display: block; top: 6px; } .main-slider__satisfied-client-count { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .main-slider__satisfied-client-count h4 { font-weight: 400; font-size: 24px; line-height: 24px; text-transform: uppercase; position: relative; color: #E7E7E8; } .main-slider__satisfied-client-count-plus { font-weight: 400; font-size: 24px; line-height: 24px; text-transform: uppercase; color: #E7E7E8; position: relative; top: -2px; } .main-slider__satisfied-client-count-text { color: #E7E7E8; font-weight: 500; position: relative; top: -3px; } .main-slider__rating-box { position: relative; display: flex; align-items: center; gap: 12px; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateX(80px); -ms-transform: perspective(400px) rotateY(0deg) translateX(80px); transform: perspective(400px) rotateY(0deg) translateX(80px); -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .main-slider__rating-box:before { content: ""; position: absolute; top: 3px; bottom: 7px; left: -30px; width: 1px; background-color: var(--finris-white); } .active .main-slider__rating-box { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateX(0px); -ms-transform: perspective(400px) rotateY(0deg) translateX(0px); transform: perspective(400px) rotateY(0deg) translateX(0px); -webkit-transition-delay: 2500ms; -moz-transition-delay: 2500ms; -ms-transition-delay: 2500ms; -o-transition-delay: 2500ms; transition-delay: 2500ms; } .main-slider__rating-count { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .main-slider__rating-count h3 { font-size: 36px; color: #E7E7E8; font-weight: 400; line-height: 36px; text-transform: uppercase; } .main-slider__satisfied-client-count-letter { font-size: 36px; color: #E7E7E8; font-weight: 400; line-height: 36px; text-transform: uppercase; position: relative; top: -2px; } .main-slider__rating-content { position: relative; display: block; } .main-slider__rating-content-sub-title { font-size: 14px; color: #E7E7E8; line-height: 14px; margin-bottom: 5px; } .main-slider__rating-content-logo { position: relative; display: block; width: 44px; } .main-slider__rating-content-logo img { width: auto; } .main-slider .owl-theme .owl-dots { display: flex; align-items: center; justify-content: center; max-width: 1320px; width: 100%; position: absolute; bottom: 70px; left: 0; right: 0; padding: 0 15px; margin: 0 auto; height: 0; line-height: 0; } .main-slider .owl-theme .owl-dots .owl-dot+.owl-dot { margin-left: 10px; } .main-slider .owl-theme .owl-dots .owl-dot span { width: 15px; height: 15px; border-radius: 50%; background-color: rgba(var(--finris-white-rgb), .30); border: 2px solid transparent; margin: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-slider .owl-theme .owl-dots .owl-dot:hover span, .main-slider .owl-theme .owl-dots .owl-dot.active span { background-color: rgba(var(--finris-white-rgb), 0); border: 2px solid var(--finris-white); } .main-slider .owl-theme .owl-nav { position: absolute; top: 53%; right: 0; left: 0; z-index: 100; display: flex; align-items: center; flex-direction: row; justify-content: space-between; max-width: 100%; width: 100%; padding: 0px 80px; margin: 0 auto; height: 0; line-height: 0; transform: translateY(-50%); } .main-slider .owl-theme .owl-nav [class*=owl-] { position: relative; top: auto; left: auto; right: auto; bottom: auto; z-index: 100; width: 60px; height: 60px; font-size: 20px !important; color: rgba(var(--finris-white-rgb), .30) !important; opacity: 1; margin: 0; padding: 18px 0 !important; text-align: center; transition: all 500ms ease; border-radius: 50%; background-color: transparent !important; border: 2px solid rgba(var(--finris-white-rgb), .30) !important; } .main-slider .owl-theme .owl-nav [class*=owl-]:hover { color: rgba(var(--finris-white-rgb), 1) !important; border: 2px solid rgba(var(--finris-white-rgb), 1) !important; } .main-slider .owl-theme .owl-nav [class*=owl-]+[class*=owl-] { margin-left: 0px; } .main-slider .owl-theme .owl-nav .owl-prev { transform: rotate(180deg); } /*-------------------------------------------------------------- # Main Slider Two --------------------------------------------------------------*/ .main-slider-two { position: relative; background-color: var(--finris-black); z-index: 10; } .main-slider-two .item { position: relative; padding-top: 337px; padding-bottom: 337px; background-color: var(--finris-black); z-index: 10; } .main-slider-two__bg { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: luminosity; overflow: hidden; transform: scale(1); transition: transform 10000ms ease, -webkit-transform 10000ms ease; overflow: hidden; z-index: -1; } .active .main-slider-two__bg { transform: scale(1.1); } .main-slider-two__overly { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: #000000; opacity: 0.6; z-index: -1; } .main-slider-two__shape-1 { position: absolute; top: 0; right: 217px; border-top: 250px solid var(--finris-black); border-right: 215px solid transparent; border-left: 314px solid transparent; opacity: 0; transform: translateY(-200px); z-index: -1; } .active .main-slider-two__shape-1 { opacity: .50; transform: translateY(0px); transition: all 1000ms ease; transition-delay: 1600ms; } .main-slider-two__shape-2 { position: absolute; top: 0; right: -20px; border-top: 250px solid var(--finris-black); border-right: 195px solid transparent; border-left: 215px solid transparent; opacity: 0; transform: translateY(-200px); z-index: -1; } .active .main-slider-two__shape-2 { opacity: .50; transform: translateY(0px); transition: all 1000ms ease; transition-delay: 2000ms; } .main-slider-two__shape-3 { position: absolute; bottom: 0; left: 0; border-bottom: 415px solid var(--finris-black); border-right: 525px solid transparent; border-left: 725px solid transparent; opacity: 0; transform: translateY(400px); z-index: -1; } .active .main-slider-two__shape-3 { opacity: .30; transform: translateY(0px); transition: all 1000ms ease; transition-delay: 2400ms; } .main-slider-two__shape-4 { position: absolute; bottom: 0; right: 0; border-bottom: 415px solid var(--finris-black); border-right: 525px solid transparent; border-left: 725px solid transparent; opacity: 0; transform: translateY(400px); z-index: -1; } .active .main-slider-two__shape-4 { opacity: .30; transform: translateY(0px); transition: all 1000ms ease; transition-delay: 2800ms; } .main-slider-two__shape-5 { position: absolute; top: 0; left: -350px; -webkit-transform: translateY(-200px); transform: translateY(-200px); opacity: 0; z-index: -1; } .active .main-slider-two__shape-5 { opacity: .30; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 1800ms; transition-delay: 3200ms; } .main-slider-two__shape-5 img { width: auto !important; } .main-slider-two__shape-6 { position: absolute; bottom: 0; right: -150px; -webkit-transform: translateY(200px); transform: translateY(200px); opacity: 0; z-index: -1; } .active .main-slider-two__shape-6 { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 1800ms; transition-delay: 3600ms; } .main-slider-two__shape-6 img { width: auto !important; } .main-slider-two__name { -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(var(--finris-white-rgb), .15); font-size: 400px; text-transform: uppercase; text-align: center; position: absolute; left: 0; letter-spacing: 0.1em; right: 0; margin: auto; bottom: 0; top: 0px; display: flex; align-items: center; justify-content: center; visibility: hidden; transition: transform 1200ms ease, opacity 1200ms ease; transform: scale(0.1) rotate(0deg); } .active .main-slider-two__name { visibility: visible; transform: scale(1) rotate(10deg); transition-delay: 100ms; } .main-slider-two__content { position: relative; display: block; z-index: 10; } .main-slider-two__sub-title-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; opacity: 0; transition: transform 1200ms ease, opacity 1200ms ease; transform: translateX(-200px); } .active .main-slider-two__sub-title-box { opacity: 1; transform: translateX(0); transition-delay: 500ms; } .main-slider-two__sub-title { font-size: 24px; line-height: 24px; color: var(--finris-white); font-family: var(--finris-font-two); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; } .main-slider-two__sub-title-shape { position: relative; display: block; height: 1px; width: 40px; background-color: var(--finris-base); } .main-slider-two__title { position: relative; display: block; font-size: 120px; color: var(--finris-white); font-weight: 600; line-height: 120px; letter-spacing: 0.03em; text-transform: uppercase; margin-top: 22px; margin-bottom: 29px; opacity: 0; transition: transform 1200ms ease, opacity 1200ms ease; transform: translateX(200px); } .active .main-slider-two__title { opacity: 1; transform: translateX(0); transition-delay: 800ms; } .main-slider-two__btn-box { position: relative; display: block; opacity: 0; visibility: hidden; transform: perspective(400px) rotateY(0deg) translateY(80px); transform-origin: bottom; transition: transform 1200ms ease, opacity 1200ms ease; } .active .main-slider-two__btn-box { opacity: 1; visibility: visible; transform: perspective(400px) rotateY(0deg) translateY(0px); transition-delay: 1200ms; } .main-slider-two .owl-theme .owl-dots { display: flex; align-items: center; justify-content: center; max-width: 1320px; width: 100%; position: absolute; bottom: 90px; left: 0; right: 0; padding: 0 15px; margin: 0 auto; height: 0; line-height: 0; } .main-slider-two .owl-theme .owl-dots .owl-dot+.owl-dot { margin-left: 10px; } .main-slider-two .owl-theme .owl-dots .owl-dot span { width: 15px; height: 15px; border-radius: 50%; background-color: rgba(var(--finris-white-rgb), .30); border: 2px solid transparent; margin: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-slider-two .owl-theme .owl-dots .owl-dot:hover span, .main-slider-two .owl-theme .owl-dots .owl-dot.active span { background-color: rgba(var(--finris-white-rgb), 0); border: 2px solid var(--finris-white); } .main-slider-two .owl-theme .owl-nav { position: absolute; top: 45%; right: 0; left: 0; z-index: 100; display: flex; align-items: flex-end; flex-direction: column; max-width: 100%; width: 100%; padding: 0px 80px; margin: 0 auto; height: 0; line-height: 0; transform: translateY(-50%); } .main-slider-two .owl-theme .owl-nav [class*=owl-] { position: relative; top: auto; left: auto; right: auto; bottom: auto; z-index: 100; width: 60px; height: 60px; font-size: 20px !important; color: rgba(var(--finris-white-rgb), .30) !important; opacity: 1; margin: 0; text-align: center; transition: all 500ms ease; border-radius: 50%; padding: 18px 0px !important; background-color: transparent !important; border: 2px solid rgba(var(--finris-white-rgb), .30) !important; } .main-slider-two .owl-theme .owl-nav [class*=owl-]:hover { color: rgba(var(--finris-white-rgb), 1) !important; border: 2px solid rgba(var(--finris-white-rgb), 1) !important; } .main-slider-two .owl-theme .owl-nav [class*=owl-]+[class*=owl-] { margin-left: 0px; } .main-slider-two .owl-theme .owl-nav .owl-prev { transform: rotate(180deg); margin-bottom: 10px; } /*-------------------------------------------------------------- # Team One --------------------------------------------------------------*/ .team-one { position: relative; display: block; padding: 114px 0 120px; z-index: 1; } .team-one:before { content: ""; position: absolute; top: 100px; bottom: 120px; left: 0; right: 0; background: linear-gradient(180deg, #FFFFFF 0%, #FFFFF8 50%, #FFFFFF 100%); z-index: -1; } .team-one__carousel { position: relative; display: block; } .team-one__single { position: relative; display: block; background-color: var(--finris-white); border: 1px solid var(--finris-bdr-color); border-radius: 8px; text-align: center; padding: 25px 24px 0; overflow: hidden; z-index: 1; } .team-one__content { position: relative; display: block; } .team-one__name { font-size: 24px; font-weight: 400; line-height: 30px; text-transform: uppercase; } .team-one__name a { color: var(--finris-black); } .team-one__name a:hover { color: var(--finris-base); } .team-one__sub-title { font-weight: 500; } .team-one__social { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; z-index: 1; } .team-one__social:before { content: ""; position: absolute; top: 13px; left: 0px; right: 0px; height: 2px; background-color: var(--finris-bdr-color); z-index: -1; } .team-one__social a { position: relative; display: flex; align-items: center; justify-content: center; height: 28px; width: 28px; border: 1px solid var(--finris-bdr-color); background-color: var(--finris-white); border-radius: 50%; font-size: 12px; color: var(--finris-black); overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .team-one__social a:hover { color: var(--finris-white); background-color: var(--finris-base); border: 1px solid var(--finris-base); } .team-one__img-box { position: relative; display: block; margin-top: 24px; z-index: 1; } .team-one__shape-box { position: absolute; display: flex; align-items: center; justify-content: center; width: 300px; height: 300px; background: rgba(98, 50, 248, 0.04); border-radius: 50%; left: 50%; right: 0; bottom: -110px; transform: translateX(-50%); } .team-one__shape-1 { position: relative; display: flex; align-items: center; justify-content: center; width: 240px; height: 240px; background: rgba(98, 50, 248, 0.04); border-radius: 50%; transform: scale(1.0); opacity: 1; transition-delay: 0.6s; transition: .7s; } .team-one__single:hover .team-one__shape-1 { transform: scale(1.1); background: rgba(98, 50, 248, 0.09); } .team-one__img { position: relative; display: block; } .team-one__img img { width: 100%; } .team-one__carousel .owl-nav { position: absolute; top: -110px; right: 0; margin: 0 !important; } .team-one__carousel.owl-theme .owl-nav .owl-next { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .team-one__carousel.owl-theme .owl-nav .owl-prev { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-black); background-color: transparent; border: 1px solid var(--finris-black); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .team-one__carousel.owl-theme .owl-nav .owl-next { margin-left: 5px; } .team-one__carousel.owl-theme .owl-nav .owl-prev { margin-right: 5px; } .team-one__carousel.owl-theme .owl-nav .owl-next span, .team-one__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .team-one__carousel.owl-theme .owl-nav .owl-next:hover, .team-one__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--finris-black); color: var(--finris-white); } /*-------------------------------------------------------------- # Team Details --------------------------------------------------------------*/ .team-details { position: relative; display: block; padding: 120px 0 0px; z-index: 1; } .team-details__inner { position: relative; display: block; } .team-details__left { position: relative; display: block; margin-left: 109px; } .team-details__img { position: relative; display: block; margin-right: 115px; } .team-details__img::before { content: ""; position: absolute; top: 24px; left: 24px; right: 24px; bottom: 24px; border: 1px dashed var(--finris-white); border-radius: 15px; border-top-right-radius: 100px; } .team-details__img img { width: 100%; border-radius: 15px; border-top-right-radius: 100px; } .team-details__icon { position: absolute; right: -67px; top: 203px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid #243855; border-radius: 50%; } .team-details__icon img { width: auto; } .team-details__experience-box { position: absolute; bottom: 40px; right: -25px; max-width: 205px; width: 100%; display: flex; align-items: center; gap: 18px; background-color: var(--finris-base); border-radius: 10px; padding: 15px 15px 15px; } .team-details__count { position: relative; display: flex; align-items: center; gap: 5px; } .team-details__count p { font-size: 40px; font-weight: 500; line-height: 40px; color: var(--finris-white); } .team-details__count-plus { font-size: 40px; font-weight: 500; line-height: 40px; color: var(--finris-white); } .team-details__experience-text { font-weight: 500; color: var(--finris-white); } .team-details__right { position: relative; display: block; margin-right: 220px; margin-top: 60px; } .team-details__client-name { position: relative; display: block; border-bottom: 1px solid var(--finris-bdr-color); padding-bottom: 21px; margin-bottom: 18px; } .team-details__client-name h3 { font-size: 24px; font-weight: 500; line-height: 34px; font-family: var(--finris-font); } .team-details__client-name p { font-size: 20px; font-weight: 500; line-height: 28px; color: var(--finris-base); } .team-details__client-info-list { position: relative; display: block; } .team-details__client-info-list li { position: relative; display: flex; align-items: center; gap: 140px; } .team-details__client-info-list li+li { margin-top: 19px; } .team-details__client-info-list li p { position: relative; display: block; max-width: 80px; width: 100%; font-weight: 500; } .team-details__client-info-list li span { font-weight: 500; color: var(--finris-black); } .team-details__client-info-list li a { font-weight: 500; color: var(--finris-black); } .team-details__client-info-list li a:hover { color: var(--finris-base); } .team-details__social { position: relative; display: inline-flex; align-items: center; gap: 16px; margin-top: 26px; } .team-details__social::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background-color: var(--finris-bdr-color); transform: translateY(-50%); } .team-details__social a { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--finris-bdr-color); background-color: var(--finris-white); border-radius: 50%; font-size: 12px; color: var(--finris-black); } .team-details__social a:hover { color: var(--finris-white); background-color: var(--finris-base); } .team-details__bottom { position: relative; display: block; margin-left: 109px; margin-top: 94px; } .team-details__title-1 { font-size: 30px; font-weight: 400; line-height: 40px; } .team-details__text-1 { font-size: 18px; line-height: 27px; margin-top: 5px; margin-bottom: 49px; } .team-details__title-2 { font-size: 30px; font-weight: 400; line-height: 40px; } .team-details__text-2 { font-size: 18px; line-height: 27px; margin-top: 17px; margin-bottom: 30px; } .team-details__progress-box { position: relative; display: block; max-width: 415px; width: 100%; } .team-details__progress-list { position: relative; display: block; } .team-details__progress-list li { position: relative; display: block; } .team-details__progress-list li+li { margin-top: 32px; } .team-details__progress-list li .progress-levels { position: relative; display: block; } .team-details__progress-list li .progress-levels .progress-box { position: relative; display: block; } .team-details__progress-list li .progress-levels .progress-box .inner { position: relative; display: block; } .team-details__progress-list li .progress-levels .progress-box .bar { position: relative; display: block; z-index: 1; } .team-details__progress-list li .progress-levels .progress-box .bar .bar-innner { position: relative; width: 100%; height: 8px; border-radius: 0; background: rgba(255, 56, 56, 0.03); } .team-details__progress-list li .progress-levels .progress-box .bar .bar-fill { position: relative; width: 0px; height: 8px; border-radius: 0px; background: linear-gradient(90deg, #0057FC 0%, rgba(255, 56, 56, 0.03) 100%); transition: all 2000ms ease 300ms; } .team-details__progress-list li .progress-levels .progress-box .bar .bar-innner .skill-percent { position: absolute; display: flex; align-items: center; top: -41px; right: 0px; width: 40px; height: 20px; padding: 0; z-index: 1; } .team-details__progress-list li .progress-levels .progress-box .inner .count-text { position: relative; color: var(--finris-black); font-size: 20px; line-height: 20px; font-weight: 500; display: inline-block; } .team-details__progress-list li .progress-levels .progress-box .inner .percent { position: relative; color: var(--finris-black); font-size: 20px; line-height: 20px; font-weight: 500; display: inline-block; } .team-details__progress-list li .progress-levels .progress-box .inner .text { position: relative; display: block; font-size: 20px; font-weight: 500; color: var(--finris-black); line-height: 30px; text-transform: capitalize; margin-bottom: 16px; } /*-------------------------------------------------------------- # Team Page --------------------------------------------------------------*/ .team-page { position: relative; display: block; padding: 120px 0 80px; z-index: 1; } .team-page__single { position: relative; display: block; padding: 20px 20px 21px; background-color: var(--finris-white); border-radius: 12px; margin-bottom: 40px; z-index: 1; } .team-page__single::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; box-shadow: 0px 0px 32px rgba(224, 224, 224, 0.47); opacity: 0; transition: background-color 0.5s ease; transition: all 0.5s ease; z-index: -1; } .team-page__single:hover::before { opacity: 1; } .team-page__img-box { position: relative; display: block; } .team-page__img { position: relative; display: block; overflow: hidden; border-radius: 8px; } .team-page__img::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background: var(--finris-black); border-radius: 8px; opacity: 0; transition: background-color 0.5s ease; transition: all 0.5s ease; z-index: 1; } .team-page__single:hover .team-page__img::before { opacity: 0.50; } .team-page__img img { width: 100%; border-radius: 8px; object-fit: cover; transition: all 1s ease-in-out; } .team-page__single:hover .team-page__img img { transform: scale(1.1); } .team-page__content { position: relative; display: block; margin-top: 17px; } .team-page__title { font-size: 20px; font-weight: 400; line-height: 30px; } .team-page__title a { color: var(--finris-black); } .team-page__title a:hover { color: var(--finris-base); } .team-page__text { font-size: 14px; font-weight: 500; line-height: 24px; } .team-page__social { position: absolute; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; flex-direction: column; gap: 16px; background-color: var(--finris-white); padding: 12px 8px 12px; border-top-left-radius: 16px; z-index: 2; } .team-page__social::before { content: ""; position: absolute; top: 12px; left: 50%; bottom: 12px; width: 1px; background-color: var(--finris-bdr-color); transform: translateX(-50%); } .team-page__social a { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: var(--finris-white); border: 1px solid var(--finris-bdr-color); border-radius: 50%; font-size: 12px; color: var(--finris-black); } .team-page__social a:hover { color: var(--finris-white); background-color: var(--finris-base); border: 1px solid var(--finris-base); } .team-page__social-shape-1 { position: absolute; top: -22px; right: 0px; } .team-page__social-shape-1 img { width: auto; } .team-page__social-shape-2 { position: absolute; bottom: 71px; left: -24px; } .team-page__social-shape-2 img { width: auto; } /*-------------------------------------------------------------- # Team Carousel Page --------------------------------------------------------------*/ .team-carousel-page { position: relative; display: block; padding: 120px 0 170px; } .team-carousel-page .team-page__single { margin-bottom: 0; } .team-carousel-page .team-page__social-shape-1 { top: -16px; } .team-carousel-page .team-page__social-shape-1 img { width: auto !important; } .team-carousel-page .team-page__social-shape-2 img { width: auto !important; } /*-------------------------------------------------------------- # Faq One --------------------------------------------------------------*/ .faq-one { position: relative; display: block; padding: 120px 0 120px; overflow: hidden; z-index: 1; } .faq-one__shape-bg { position: absolute; top: 60px; bottom: 64px; left: 0; right: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .04; z-index: -1; } .faq-one__left { position: relative; display: block; margin-right: 150px; } .faq-one__left .section-title-two { margin-bottom: 22px; } .faq-one__text { margin-bottom: 32px; } .faq-one__btn-box { position: relative; display: block; } .faq-one__right { position: relative; display: block; margin-right: 155px; } .faq-one__right .faq-one-accrodion .accrodion { position: relative; display: block; background-color: rgba(var(--finris-bdr-color-rgb), .30); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .faq-one__right .faq-one-accrodion .accrodion-title { position: relative; display: block; cursor: pointer; padding: 19px 30px 16px; transition: all 200ms linear; transition-delay: 0.1s; padding-right: 25px; } .faq-one__right .faq-one-accrodion .accrodion-title h4 { margin: 0; font-size: 20px; font-weight: 400; line-height: 25px; color: var(--finris-black); text-transform: uppercase; position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .faq-one__right .faq-one-accrodion .accrodion+.accrodion { margin-top: 20px; } .faq-one__right .faq-one-accrodion .accrodion-title h4::before { content: "\e925"; font-family: 'icomoon' !important; font-weight: 700; font-size: 13px; color: var(--finris-base); position: absolute; top: 50%; right: 0; line-height: 13px; border-radius: 50%; display: flex; justify-content: center; align-items: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; text-align: center; } .faq-one__right .faq-one-accrodion .accrodion.active .accrodion-title h4::before { content: "\e942"; } .faq-one__right .faq-one-accrodion .accrodion-content { position: relative; padding-bottom: 32px; padding-left: 30px; padding-right: 50px; margin-top: -6px; } .faq-one__right .faq-one-accrodion .accrodion-content p { margin: 0; } /*-------------------------------------------------------------- # Faq Page --------------------------------------------------------------*/ .faq-page { position: relative; display: block; padding: 120px 0 100px; } .faq-page .faq-one__right { margin-right: 0; margin-bottom: 20px; } /*-------------------------------------------------------------- # Process One --------------------------------------------------------------*/ .portfolio-one { position: relative; display: block; padding: 120px 0 120px; z-index: 1; } .portfolio-one__shape-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .portfolio-one__shape-bg:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(6, 28, 61, .85); } .portfolio-one__shape-bg-two { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .06; z-index: -1; } .portfolio-one .section-title__tagline-icon-2 { border: 1px solid var(--finris-white); } .portfolio-one .section-title__tagline { color: var(--finris-white); } .portfolio-one .section-title__title { color: var(--finris-white); } .portfolio-one__single { position: relative; display: block; } .portfolio-one__img-box { position: relative; display: block; } .portfolio-one__img { position: relative; display: block; overflow: hidden; z-index: 1; } .portfolio-one__img img { width: 100%; transform: scale(1.0); transition-delay: 0.1s; transition-timing-function: ease-in-out; transition-duration: 0.7s; transition-property: all; } .portfolio-one__single:hover .portfolio-one__img img { transform: scale(1.10) rotate(0deg); } .portfolio-one__content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 95px 30px 0; background-color: rgba(6, 28, 61, .85); opacity: 0; transform: translateY(50px); transition: background-color 0.7s ease; transition: all 0.7s ease; z-index: 2; } .portfolio-one__single:hover .portfolio-one__content { opacity: 1; transform: translateY(0px); } .portfolio-one__title { position: relative; display: block; font-size: 48px; line-height: 60px; font-weight: 400; margin-bottom: 64px; } .portfolio-one__title:before { content: ""; position: absolute; bottom: -32px; left: 0; right: 200px; height: 1px; border-bottom: 1px solid rgba(var(--finris-white-rgb), .50); } .portfolio-one__title a { color: var(--finris-white); } .portfolio-one__title a:hover { color: var(--finris-primary); } .portfolio-one__text { color: var(--finris-white); margin-bottom: 32px; } .portfolio-one__btn-box { position: relative; display: block; } .portfolio-one__carousel .owl-nav { position: absolute; bottom: -109px; right: 315px; margin: 0 !important; } .portfolio-one__carousel.owl-theme .owl-nav .owl-next { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-white); background-color: transparent; border: 1px solid var(--finris-white); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .portfolio-one__carousel.owl-theme .owl-nav .owl-prev { position: relative; display: inline-block; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; color: var(--finris-white); background-color: transparent; border: 1px solid var(--finris-white); font-size: 25px; margin: 0; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .portfolio-one__carousel.owl-theme .owl-nav .owl-next { margin-left: 5px; } .portfolio-one__carousel.owl-theme .owl-nav .owl-prev { margin-right: 5px; } .portfolio-one__carousel.owl-theme .owl-nav .owl-next span, .portfolio-one__carousel.owl-theme .owl-nav .owl-prev span { position: relative; display: flex; align-items: center; justify-content: center; } .portfolio-one__carousel.owl-theme .owl-nav .owl-next:hover, .portfolio-one__carousel.owl-theme .owl-nav .owl-prev:hover { background-color: var(--finris-white); color: var(--finris-base); } .portfolio-one__bottom { position: relative; display: block; margin-top: 45px; } .portfolio-one__btn-box-two { position: relative; display: block; } .portfolio-one__btn-box-two a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; color: var(--finris-white); font-weight: 700; padding: 18px 30px 18px; border: 1px dashed var(--finris-white); border-radius: 50%; } .portfolio-one__btn-box-two a:hover { background-color: var(--finris-white); color: var(--finris-base); } /*-------------------------------------------------------------- Portfolio Two --------------------------------------------------------------*/ .portfolio-two { position: relative; display: block; overflow: hidden; padding: 0 0 4px; z-index: 1; } .portfolio-two__wrap { position: relative; display: block; max-width: 1800px; margin: 0 auto; } .portfolio-two__wrap .swiper-container { position: relative; } .portfolio-two__wrap .swiper { position: relative; display: block; } .portfolio-two__wrap .swiper-slide { position: relative; display: block; } .portfolio-two__wrap .swiper-slide-active .portfolio-two__content { opacity: 1; transform: translateY(0px); transition-delay: 500ms; } .portfolio-two__wrap .swiper-slide-active .portfolio-two__single .portfolio-two__img:before { opacity: 0.90; } .portfolio-two__wrap .swiper-button-prev { background: white; border-radius: 50%; top: 47%; left: 30px; width: 50px; height: 50px; box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.17); } .portfolio-two__wrap .swiper-button-prev::after { font-size: 20px; content: ""; } .portfolio-two__wrap .swiper-button-prev svg { width: 25px; color: #6232f8; } .portfolio-two__wrap .swiper-button-next { background: white; border-radius: 50%; top: 47%; right: 30px; width: 50px; height: 50px; box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.17); } .portfolio-two__wrap .swiper-button-next::after { font-size: 20px; content: ""; } .portfolio-two__wrap .swiper-button-next svg { width: 25px; color: #6232f8; } .portfolio-two__wrap .swiper-button-prev, .portfolio-two__wrap .swiper-button-next { display: none; } @media (min-width: 760px) { .portfolio-two__wrap .swiper-button-prev, .portfolio-two__wrap .swiper-button-next { display: flex; } } .portfolio-two__single { position: relative; display: block; } .portfolio-two__img { position: relative; display: block; overflow: hidden; border-radius: 20px; z-index: 1; } .portfolio-two__img::before { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--finris-black); opacity: 0; z-index: 1; transition: opacity 0.5s ease; transition: all 0.5s ease; } .portfolio-two__img img { border-radius: 20px; transform: scale(1.0); transition: all 1500ms ease; } .portfolio-two__single:hover .portfolio-two__img img { transform: scale(1.05) rotate(0deg); } .portfolio-two__content { position: absolute; bottom: 30px; left: 30px; right: 30px; background-color: var(--finris-white); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 22px 15px 22px; border-radius: 16px; opacity: 0; transform: translateY(50px); transition: background-color 0.7s ease; transition: all 0.7s ease; z-index: 2; } .portfolio-two__title-box { position: relative; display: block; } .portfolio-two__meta { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .portfolio-two__meta li { position: relative; display: block; } .portfolio-two__meta li a { position: relative; display: flex; align-items: center; font-size: 16px; color: var(--finris-gray); font-weight: 500; } .portfolio-two__title { font-size: 24px; line-height: 24px; text-transform: uppercase; font-weight: 400; margin-top: 5px; } .portfolio-two__title a { color: var(--finris-black); } .portfolio-two__title a:hover { color: var(--finris-base); } .portfolio-two__btn-box { position: relative; display: block; } .portfolio-two__carousel.owl-carousel .owl-dots { position: relative; text-align: center; display: flex; align-items: center; justify-content: center; margin-top: 50px !important; } .portfolio-two__carousel.owl-carousel .owl-dots .owl-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: transparent; border: 1px solid var(--finris-black); margin: 0px; padding: 0px; transition: all 100ms linear; transition-delay: 0.1s; } .portfolio-two__carousel.owl-carousel .owl-dots .owl-dot+.owl-dot { margin-left: 10px; } .portfolio-two__carousel.owl-carousel .owl-dot.active { background-color: var(--finris-black); } .portfolio-two__carousel.owl-carousel .owl-dots .owl-dot:before { position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; content: ""; border: 1px solid var(--finris-black); border-radius: 50%; transform: scale(0); transition: all 100ms linear; transition-delay: 0.1s; } .portfolio-two__carousel.owl-carousel .owl-dot.active:before { transform: scale(1); } .portfolio-two__carousel.owl-carousel .owl-dot:focus { outline: none; } .portfolio-two__carousel.owl-carousel .owl-dots .owl-dot span { display: none; } /*-------------------------------------------------------------- # Portfolio Details --------------------------------------------------------------*/ .portfolio-details { position: relative; display: block; padding: 120px 0 60px; z-index: 1; } .portfolio-details__left { position: relative; display: block; } .portfolio-details__summary { position: relative; display: block; border: 1px solid var(--finris-bdr-color); border-radius: 12px; padding: 27px 25px 30px; overflow: hidden; z-index: 1; } .portfolio-details__summary-shape-1 { position: absolute; width: 540px; height: 515px; bottom: -380px; left: 50%; transform: translateX(-50%); background-color: rgba(132, 167, 255, 0.04); border-radius: 50%; z-index: -1; } .portfolio-details__summary-shape-2 { position: absolute; width: 432px; height: 412px; bottom: -330px; left: 50%; transform: translateX(-50%); background-color: rgba(132, 167, 255, 0.04); border-radius: 50%; z-index: -1; } .portfolio-details__summary-shape-3 { position: absolute; width: 308px; height: 294px; bottom: -265px; left: 50%; transform: translateX(-50%); background-color: rgba(132, 167, 255, 0.04); border-radius: 50%; z-index: -1; } .portfolio-details__summary-title { font-size: 24px; font-weight: 400; line-height: 34px; } .portfolio-details__summary-text { font-size: 18px; line-height: 28px; margin-top: 6px; margin-bottom: 27px; } .portfolio-details__summary-list { position: relative; display: block; padding-left: 30px; } .portfolio-details__summary-list::before { content: ""; position: absolute; top: 10px; left: 5px; bottom: 10px; width: 2px; background-color: var(--finris-bdr-color); } .portfolio-details__summary-list li { position: relative; display: flex; align-items: center; gap: 60px; } .portfolio-details__summary-list li::before { content: ""; position: absolute; left: -30px; top: 50%; width: 12px; height: 12px; background-color: var(--finris-white); border: 1px solid var(--finris-bdr-color); border-radius: 50%; transform: translateY(-50%); } .portfolio-details__summary-list li+li { margin-top: 22px; } .portfolio-details__summary-list li p { font-weight: 500; color: var(--finris-black); } .portfolio-details__summary-list li p a { color: var(--finris-black); } .portfolio-details__summary-list li p a:hover { color: var(--finris-base); } .portfolio-details__summary-list li span { position: relative; display: block; max-width: 80px; width: 100%; } .portfolio-details__right { position: relative; display: block; } .portfolio-details__img { position: relative; display: block; } .portfolio-details__img img { width: 100%; border-radius: 16px; } .portfolio-details__content { position: relative; display: block; margin-top: 32px; } .portfolio-details__title-1 { font-size: 40px; font-weight: 400; line-height: 60px; } .portfolio-details__text-1 { margin-top: 17px; margin-bottom: 27px; } .portfolio-details__title-2 { font-size: 30px; font-weight: 400; line-height: 40px; margin-top: 62px; margin-bottom: 19px; } .portfolio-details__img-box { position: relative; display: block; margin-top: 55px; } .portfolio-details__img-box-img { position: relative; display: block; margin-bottom: 30px; } .portfolio-details__img-box-img img { width: 100%; border-radius: 16px; } .portfolio-details__img-box-img-2 { position: relative; display: block; margin-top: -33px; } .portfolio-details__img-box-img-2 img { width: 100%; border-radius: 16px; } .portfolio-details__title-3 { font-size: 30px; font-weight: 400; line-height: 40px; margin-top: 32px; margin-bottom: 19px; } .portfolio-details__list-and-img { position: relative; display: block; margin-top: 45px; } .portfolio-details__list { position: relative; display: block; } .portfolio-details__list li+li { margin-top: 24px; } .portfolio-details__list li { position: relative; display: block; padding-left: 20px; border-left: 3px solid var(--finris-base); } .portfolio-details__list li p { color: var(--finris-black); } .portfolio-details__list li p span { font-weight: 700; } .portfolio-details__img-box-2 { position: relative; display: block; margin-left: 58px; } .portfolio-details__img-box-two-img { position: relative; display: block; margin-bottom: 16px; } .portfolio-details__img-box-two-img img { width: 100%; border-radius: 16px; } .portfolio-details__title-4 { font-size: 30px; font-weight: 400; line-height: 40px; } .portfolio-details__text-5 { margin-bottom: 18px; margin-top: 19px; } .portfolio-details__points-box { position: relative; display: flex; align-items: center; gap: 140px; } .portfolio-details__points-list { position: relative; display: block; } .portfolio-details__points-list li { position: relative; display: flex; align-items: center; gap: 17px; } .portfolio-details__points-list li+li { margin-top: 10px; } .portfolio-details__points-list li .icon { position: relative; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 2px solid var(--finris-base); } .portfolio-details__points-list li .icon span { position: relative; display: inline-block; font-size: 8px; color: var(--finris-base); } .portfolio-details__points-list li p { color: var(--finris-black); } .portfolio-details__title-5 { font-size: 30px; font-weight: 400; line-height: 40px; margin-top: 58px; margin-bottom: 20px; } .portfolio-details__prev-and-next { position: relative; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--finris-bdr-color); border-radius: 16px; padding: 21px 21px 21px; margin-top: 48px; } .portfolio-details__prev { position: relative; display: block; } .portfolio-details__prev a { position: relative; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 400; font-family: var(--finris-font-two); color: var(--finris-black); } .portfolio-details__prev a:hover { color: var(--finris-base); } .portfolio-details__prev a span { font-size: 16px; } .portfolio-details__next { position: relative; display: block; } .portfolio-details__next a { position: relative; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 400; font-family: var(--finris-font-two); color: var(--finris-black); } .portfolio-details__next a:hover { color: var(--finris-base); } .portfolio-details__next a span { font-size: 16px; } /*-------------------------------------------------------------- # Portfolio Page --------------------------------------------------------------*/ .portfolio-page { position: relative; display: block; counter-reset: count; padding: 120px 0 1px; z-index: 1; } .portfolio-page .section-title { margin-bottom: 79px; } .portfolio-page ul li:nth-child(2) .portfolio-page__single { margin-right: 0; margin-left: 220px; } .portfolio-page ul li:nth-child(4) .portfolio-page__single { margin-right: 0; margin-left: 220px; } .portfolio-page ul li:nth-child(6) .portfolio-page__single { margin-right: 0; margin-left: 220px; } .portfolio-page__single { position: relative; display: block; margin-left: 110px; margin-right: 110px; margin-bottom: 119px; } .portfolio-page__single-inner { position: relative; display: block; } .portfolio-page__case-box { position: absolute; display: inline-flex; align-items: center; gap: 25px; border: 1px solid var(--finris-bdr-color); padding: 10px 25px 10px; border-radius: 24px; overflow: hidden; top: 314px; left: -194px; transform: rotate(-90deg); } .portfolio-page__case-box:before { content: ""; position: absolute; top: -6px; left: -37px; height: 56px; width: 56px; border-radius: 50%; background-color: rgba(var(--finris-base-rgb), .26); } .portfolio-page__case-text { position: relative; display: flex; align-items: center; font-size: 16px; font-weight: 500; color: var(--finris-black); gap: 5px; } .portfolio-page__case-count { position: relative; display: block; } .portfolio-page__case-count:before { position: relative; display: block; font-size: 16px; font-weight: 500; color: var(--finris-black); counter-increment: count; content: "0"counter(count); transition: all 200ms linear; transition-delay: 0.1s; } .portfolio-page__case-border { position: relative; display: block; width: 140px; height: 1px; background: rgb(6, 28, 61); background: linear-gradient(90deg, rgba(6, 28, 61, 0.7595413165266106) 0%, rgba(6, 28, 61, 0) 100%); } .portfolio-page__case-border:before { content: ""; position: absolute; top: -2px; left: 0; height: 5px; width: 5px; border-radius: 50%; background-color: var(--finris-black); } .portfolio-page__content { position: relative; display: block; } .portfolio-page__sub-title { font-weight: 500; color: var(--finris-base); margin-bottom: 6px; } .portfolio-page__title { font-size: 24px; font-weight: 400; text-transform: uppercase; line-height: 31px; } .portfolio-page__title a { color: var(--finris-black); } .portfolio-page__title a:hover { color: var(--finris-base); } .portfolio-page__img { position: relative; display: block; margin-top: 16px; margin-bottom: 15px; overflow: hidden; border-radius: 16px; z-index: 1; } .portfolio-page__img:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(6, 28, 61, .85); opacity: 0; transform: translateY(50px); transition: background-color 0.7s ease; transition: all 0.7s ease; z-index: 1; } .portfolio-page__single:hover .portfolio-page__img:before { opacity: 1; transform: translateY(0px); } .portfolio-page__img img { width: 100%; transform: scale(1.0); transition-delay: 0.1s; transition-timing-function: ease-in-out; transition-duration: 0.7s; transition-property: all; } .portfolio-page__single:hover .portfolio-page__img img { transform: scale(1.10) rotate(0deg); } .portfolio-page__btn-box { position: relative; display: block; } /*-------------------------------------------------------------- # Sliding Text Two --------------------------------------------------------------*/ .sliding-text-two { position: relative; display: block; padding: 0 0 72px; z-index: 1; } .sliding-text-two__wrap { position: relative; display: block; } .sliding-text-two__list { position: relative; display: flex; align-items: center; flex-wrap: wrap; flex-wrap: nowrap; width: fit-content; } .sliding-text-two__list li { osition: relative; display: block; float: left; margin-right: 35px; } .sliding-text-two__list li span { position: relative; display: block; width: 80px; height: 40px; border: 1px solid rgba(var(--finris-base-rgb), .15); border-radius: 20px; top: 10px; } .sliding-text-two__title { position: relative; display: flex; align-items: center; gap: 45px; color: transparent; -webkit-text-stroke: 1px rgba(var(--finris-base-rgb), .15); font-size: 80px; line-height: .8em; font-weight: 400; transition: all 200ms linear; transition-delay: 0.1s; font-family: var(--finris-font-two); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .sliding-text-two__list li .sliding-text-two__title:hover { color: transparent; -webkit-text-stroke: 1px transparent; } .sliding-text-two__title:before { overflow: hidden; position: absolute; top: 0; left: 0; width: 0; color: var(--finris-base); white-space: nowrap; content: attr(data-hover); transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87); } .sliding-text-two__list li:hover .sliding-text-two__title:before { width: 100%; color: var(--finris-base); } /*============================================== Site Footer ===============================================*/ .site-footer { position: relative; display: block; background-color: #121A46; overflow: hidden; z-index: 2; } .site-footer__shape-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 48.9%; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.06; z-index: -1; } .site-footer__big-text { font-weight: 400; font-size: 400px; line-height: 1em; background: linear-gradient(180deg, rgba(98, 50, 248, 0.05) 0%, rgba(98, 50, 248, 0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-family: var(--finris-font-two); position: absolute; top: 10px; left: 0; right: 0; text-align: center; z-index: -1; } .site-footer__top { position: relative; display: block; z-index: 1; } .site-footer__main-content { position: relative; display: block; padding: 114px 0 112px; } .site-footer__main-content-inner { position: relative; display: block; } .footer-widget__about { position: relative; display: block; padding-top: 4px; } .footer-widget__about-logo { position: relative; display: inline-block; } .footer-widget__about-text { margin: 0; color: var(--finris-white); font-size: 18px; line-height: 27px; padding-top: 52px; } .footer-widget__quick-links { position: relative; display: block; margin-left: 110px; } .footer-widget__title { position: relative; display: block; font-size: 20px; color: var(--finris-white); text-transform: uppercase; font-weight: 400; line-height: 29px; margin-bottom: 46px; } .footer-widget__title:before { position: absolute; bottom: -8px; left: 0; height: 2px; width: 40px; background-color: var(--finris-primary); border-radius: 2px; content: ""; } .footer-widget__title:after { position: absolute; bottom: -10px; left: 38px; height: 6px; width: 6px; background-color: var(--finris-primary); border-radius: 100px; content: ""; } .footer-widget__quick-links-list { position: relative; display: block; } .footer-widget__quick-links-list li+li { margin-top: 19px; } .footer-widget__quick-links-list li a { position: relative; display: inline-block; font-size: 16px; color: var(--finris-white); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .footer-widget__quick-links-list li a:hover { color: var(--finris-primary); } .footer-widget__quick-links-list li a:before { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--finris-primary); content: ""; transition: transform 500ms ease; transform: scale(0, 1); transform-origin: left center; } .footer-widget__quick-links-list li a:hover:before { transform: scale(1, 1); transform-origin: right center; } .footer-widget__support { position: relative; display: block; margin-left: 55px; } .footer-widget__support-list { position: relative; display: block; } .footer-widget__support-list li+li { margin-top: 19px; } .footer-widget__support-list li a { position: relative; display: inline-block; font-size: 16px; color: var(--finris-white); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .footer-widget__support-list li a:hover { color: var(--finris-primary); } .footer-widget__support-list li a:before { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--finris-primary); content: ""; transition: transform 500ms ease; transform: scale(0, 1); transform-origin: left center; } .footer-widget__support-list li a:hover:before { transform: scale(1, 1); transform-origin: right center; } .footer-widget__get-in-touch { position: relative; display: block; margin-left: 48px; } .footer-widget__get-in-touch-list { position: relative; display: block; } .footer-widget__get-in-touch-list li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-widget__get-in-touch-list li+li { margin-top: 18px; } .footer-widget__get-in-touch-list li .icon { position: relative; display: flex; align-items: center; } .footer-widget__get-in-touch-list li .icon span { position: relative; display: inline-block; font-size: 16px; color: var(--finris-white); } .footer-widget__get-in-touch-list li .text { position: relative; display: block; } .footer-widget__get-in-touch-list li .text p { font-size: 16px; color: var(--finris-white); } .footer-widget__get-in-touch-list li .text p a { color: var(--finris-white); } .footer-widget__get-in-touch-list li .text p a:hover { color: var(--finris-primary); } .site-footer__newsletter { position: relative; display: block; padding-bottom: 65px; } .site-footer__newsletter-inner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background-color: var(--finris-base); border-radius: 70px; padding: 30px 45px 30px; overflow: hidden; z-index: 1; } .site-footer__newsletter-left { position: relative; display: block; top: 3px; } .site-footer__newsletter-title-box { position: relative; display: block; } .site-footer__newsletter-title { font-size: 100px; font-weight: 400; text-transform: uppercase; line-height: .8em; color: transparent; -webkit-text-stroke: 1px var(--finris-white); } .site-footer__newsletter-right { position: relative; display: block; max-width: 535px; width: 100%; } .site-footer__newsletter-content { position: relative; display: block; } .site-footer__newsletter-form { position: relative; display: block; } .site-footer__newsletter-input { position: relative; display: block; } .site-footer__newsletter-input input[type="text"] { font-size: 18px; color: var(--finris-white); font-weight: 500; height: 75px; width: 100%; background: transparent; border: 1px solid var(--finris-white); border-radius: 37px; outline: none; padding: 0 40px 0; padding-right: 172px; } .site-footer__newsletter-btn { position: absolute; top: 10px; bottom: 10px; right: 10px; border: none; background-color: var(--finris-white); font-size: 18px; color: var(--finris-base); font-weight: 500; padding: 14.5px 32px; border-radius: 37px; overflow: hidden; transition: 0.5s ease-in-out; z-index: 1; } .site-footer__newsletter-btn:hover { color: var(--finris-white); } .site-footer__newsletter-btn:before { position: absolute; top: 0; left: 0; content: ""; width: 50%; height: 0; visibility: hidden; background-color: var(--finris-black); opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } .site-footer__newsletter-btn:hover::before { width: 100%; height: 100%; visibility: visible; opacity: 1; } .site-footer__newsletter-btn::after { position: absolute; background-color: var(--finris-black); bottom: 0; right: 0; content: ""; width: 50%; height: 0; visibility: hidden; opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } .site-footer__newsletter-btn:hover:after { width: 100%; height: 100%; visibility: visible; opacity: 1; } .site-footer__bottom { position: relative; display: block; padding: 31.5px 0; border-top: 2px solid rgba(var(--finris-base-rgb), .06); } .site-footer__bottom-inner { position: relative; display: flex; align-items: center; justify-content: space-between; } .site-footer__copyright { position: relative; display: block; top: 3px; } .site-footer__copyright-text { font-size: 18px; color: var(--finris-white); font-weight: 400; } .site-footer__copyright-text a { color: var(--finris-primary); } .site-footer__copyright-text a:hover { color: var(--finris-white); } .site-footer__social-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .site-footer__social-title { font-size: 18px; font-weight: 400; color: var(--finris-white); } .site-footer__social { position: relative; display: flex; align-items: center; } .site-footer__social a { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; color: var(--finris-white); background-color: rgba(var(--finris-white-rgb), .10); border-radius: 5px; font-size: 16px; height: 35px; width: 35px; transform: rotate(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .site-footer__social a:hover { color: var(--finris-white); } .site-footer__social a:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background-color: var(--finris-base); border-radius: 5px; transform: scale(0.0); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: -1; } .site-footer__social a:hover:before { transform: scaleX(1.0); } .site-footer__social a+a { margin-left: 15px; } /*-------------------------------------------------------------- # Site Footer Two --------------------------------------------------------------*/ .site-footer-two { position: relative; display: block; overflow: hidden; background-color: #151B4E; z-index: 1; } .site-footer-two__shape-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .20; z-index: -1; } .site-footer-two__shape-1 { position: absolute; bottom: -60px; left: -150px; width: 297px; height: 297px; background: rgba(103, 57, 248, 0.52); filter: blur(100px); border-radius: 50%; } .site-footer-two__shape-2 { position: absolute; top: 0px; right: -380px; width: 476px; height: 476px; background: rgba(0, 87, 252, 0.4); filter: blur(100px); border-radius: 50%; } .site-footer-two__top { position: relative; display: block; } .site-footer-two__main-content { position: relative; display: block; padding: 114px 0 120px; } .site-footer-two__main-content-inner { position: relative; display: block; } .site-footer-two__star { position: absolute; bottom: -35px; right: 95px; z-index: -1; } .site-footer-two__star img { width: auto; } .footer-widget-two__about { position: relative; display: block; margin-top: 4px; } .footer-widget-two__about-logo { position: relative; display: block; } .footer-widget-two__get-in-touch-list { position: relative; display: block; margin-top: 42px; margin-bottom: 45px; } .footer-widget-two__get-in-touch-list li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-widget-two__get-in-touch-list li+li { margin-top: 20px; } .footer-widget-two__get-in-touch-list li .icon { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; border: 1px solid var(--finris-gray); border-radius: 50%; font-size: 13px; color: var(--finris-white); overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .footer-widget-two__get-in-touch-list li:hover .icon { border: 1px solid var(--finris-base); } .footer-widget-two__get-in-touch-list li .icon:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 0%; content: ""; background-color: var(--finris-base); border-radius: 50%; transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: -1; } .footer-widget-two__get-in-touch-list li:hover .icon:before { height: 100%; } .footer-widget-two__get-in-touch-list li .text { position: relative; display: block; } .footer-widget-two__get-in-touch-list li .text p { font-size: 16px; color: var(--finris-white); } .footer-widget-two__get-in-touch-list li .text p a { color: var(--finris-white); } .footer-widget-two__get-in-touch-list li .text p a:hover { color: var(--finris-base); } .site-footer-two__social-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .site-footer-two__social-title { font-size: 18px; font-weight: 400; color: var(--finris-white); } .site-footer-two__social { position: relative; display: flex; align-items: center; z-index: 1; } .site-footer-two__social:before { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 1px; background-color: var(--finris-bdr-color); z-index: -1; } .site-footer-two__social a { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; color: var(--finris-white); background-color: #151B4E; border-radius: 50%; font-size: 12px; height: 30px; width: 30px; border: 1px solid var(--finris-white); transform: rotate(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .site-footer-two__social a:hover { color: var(--finris-white); border: 1px solid var(--finris-base); } .site-footer-two__social a:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background-color: var(--finris-base); border-radius: 50%; transform: scale(0.0); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: -1; } .site-footer-two__social a:hover:before { transform: scaleX(1.0); } .site-footer-two__social a+a { margin-left: 15px; } .footer-widget-two__quick-links { position: relative; display: block; margin-left: 110px; } .footer-widget-two__title { position: relative; display: block; font-size: 20px; color: var(--finris-white); text-transform: uppercase; font-weight: 400; line-height: 29px; margin-bottom: 46px; } .footer-widget-two__title:before { position: absolute; bottom: -8px; left: 0; height: 2px; width: 40px; background-color: var(--finris-primary); border-radius: 2px; content: ""; } .footer-widget-two__title:after { position: absolute; bottom: -10px; left: 38px; height: 6px; width: 6px; background-color: var(--finris-primary); border-radius: 100px; content: ""; } .footer-widget-two__quick-links-list { position: relative; display: block; } .footer-widget-two__quick-links-list li+li { margin-top: 19px; } .footer-widget-two__quick-links-list li a { position: relative; display: inline-block; font-size: 16px; color: var(--finris-white); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .footer-widget-two__quick-links-list li a:hover { color: var(--finris-primary); } .footer-widget-two__quick-links-list li a:before { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--finris-primary); content: ""; transition: transform 500ms ease; transform: scale(0, 1); transform-origin: left center; } .footer-widget-two__quick-links-list li a:hover:before { transform: scale(1, 1); transform-origin: right center; } .footer-widget-two__support { position: relative; display: block; } .footer-widget-two__services { position: relative; display: block; } .site-footer-two__bottom { position: relative; display: block; padding: 31.5px 0; border-top: 1px solid #2F5183; } .site-footer-two__bottom-inner { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; } .site-footer-two__copyright { position: relative; display: block; top: 3px; } .site-footer-two__copyright-text { font-size: 18px; color: var(--finris-white); font-weight: 400; } .site-footer-two__copyright-text a { color: var(--finris-primary); } .site-footer-two__copyright-text a:hover { color: var(--finris-white); } /*-------------------------------------------------------------- # Gallery Page --------------------------------------------------------------*/ .gallery-page { position: relative; display: block; padding: 120px 0 110px; } .gallery-page .row { --bs-gutter-x: 10px; } .gallery-page .container { max-width: 1572px; } .gallery-page__single { position: relative; display: block; margin-bottom: 10px; } .gallery-page__img { position: relative; display: block; overflow: hidden; border-radius: 8px; z-index: 1; } .gallery-page__img:before { content: ""; position: absolute; top: 0; bottom: -2px; left: 0; right: 0; background-color: var(--finris-black); border-radius: 8px; opacity: 0; visibility: hidden; -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: scaleY(0) translateZ(100px); transform: scaleY(0) translateZ(100px); -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease; transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease; z-index: 2; } .gallery-page__single:hover .gallery-page__img:before { opacity: .90; visibility: visible; -webkit-transform: scaleY(1) translateZ(0px); transform: scaleY(1) translateZ(0px); } .gallery-page__img-box { position: relative; display: block; overflow: hidden; border-radius: 8px; z-index: 1; } .gallery-page__img img { width: 100%; border-radius: 8px; } .gallery-page__icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; 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; z-index: 2; } .gallery-page__icon a { height: 50px; width: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 25px; color: var(--finris-white); -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 2; } .gallery-page__single:hover .gallery-page__icon a { -webkit-transform: scale(1); transform: scale(1); transition-delay: 500ms; opacity: 1; } .gallery-page__icon a:hover { color: var(--finris-base); } /*-------------------------------------------------------------- # Page Header --------------------------------------------------------------*/ .page-header { position: relative; display: block; background-color: #120340; overflow: hidden; z-index: 1; } .page-header__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .page-header__shape-1 { position: absolute; top: 0; left: 0; animation: topBottom 3s ease-in-out infinite; z-index: -1; } .page-header__shape-1 img { width: 100%; opacity: 0.01; } .page-header__inner { position: relative; display: block; padding: 290px 0 150px; text-align: center; z-index: 1; } .page-header__inner h2 { font-size: 56px; color: var(--finris-white); line-height: 66px; font-weight: 500; font-family: var(--finris-font); text-transform: capitalize; } .page-header__inner h2 span { color: var(--finris-primary); } .thm-breadcrumb__inner { position: relative; display: block; } .thm-breadcrumb { position: relative; display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.10); padding: 6px 21px 6px; border-radius: 20px; margin-top: 26px; } .thm-breadcrumb li { position: relative; display: inline-block; font-size: 14px; -webkit-transition: all 500ms ease; transition: all 500ms ease; font-weight: 500; text-transform: uppercase; color: var(--finris-white); } .thm-breadcrumb li i { position: relative; display: inline-block; margin-right: 6px; } .thm-breadcrumb li a { color: var(--finris-white); } .thm-breadcrumb li a:hover { color: var(--finris-primary); } .thm-breadcrumb li span { position: relative; display: block; width: 5px; height: 5px; background-color: var(--finris-base); border-radius: 50%; margin-right: 8px; margin-left: 8px; } /*============================================== Site Footer ===============================================*/ .site-footer { position: relative; display: block; background-color: #121A46; overflow: hidden; z-index: 2; } .site-footer__shape-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 48.9%; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.06; z-index: -1; } .site-footer__big-text { font-weight: 400; font-size: 400px; line-height: 1em; background: linear-gradient(180deg, rgba(98, 50, 248, 0.05) 0%, rgba(98, 50, 248, 0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-family: var(--finris-font-two); position: absolute; top: 10px; left: 0; right: 0; text-align: center; z-index: -1; } .site-footer__top { position: relative; display: block; z-index: 1; } .site-footer__main-content { position: relative; display: block; padding: 114px 0 112px; } .site-footer__main-content-inner { position: relative; display: block; } .footer-widget__about { position: relative; display: block; padding-top: 4px; } .footer-widget__about-logo { position: relative; display: inline-block; } .footer-widget__about-text { margin: 0; color: var(--finris-white); font-size: 18px; line-height: 27px; padding-top: 52px; } .footer-widget__quick-links { position: relative; display: block; margin-left: 110px; } .footer-widget__title { position: relative; display: block; font-size: 20px; color: var(--finris-white); text-transform: uppercase; font-weight: 400; line-height: 29px; margin-bottom: 46px; } .footer-widget__title:before { position: absolute; bottom: -8px; left: 0; height: 2px; width: 40px; background-color: var(--finris-primary); border-radius: 2px; content: ""; } .footer-widget__title:after { position: absolute; bottom: -10px; left: 38px; height: 6px; width: 6px; background-color: var(--finris-primary); border-radius: 100px; content: ""; } .footer-widget__quick-links-list { position: relative; display: block; } .footer-widget__quick-links-list li+li { margin-top: 19px; } .footer-widget__quick-links-list li a { position: relative; display: inline-block; font-size: 16px; color: var(--finris-white); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .footer-widget__quick-links-list li a:hover { color: var(--finris-primary); } .footer-widget__quick-links-list li a:before { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--finris-primary); content: ""; transition: transform 500ms ease; transform: scale(0, 1); transform-origin: left center; } .footer-widget__quick-links-list li a:hover:before { transform: scale(1, 1); transform-origin: right center; } .footer-widget__support { position: relative; display: block; margin-left: 55px; } .footer-widget__support-list { position: relative; display: block; } .footer-widget__support-list li+li { margin-top: 19px; } .footer-widget__support-list li a { position: relative; display: inline-block; font-size: 16px; color: var(--finris-white); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .footer-widget__support-list li a:hover { color: var(--finris-primary); } .footer-widget__support-list li a:before { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--finris-primary); content: ""; transition: transform 500ms ease; transform: scale(0, 1); transform-origin: left center; } .footer-widget__support-list li a:hover:before { transform: scale(1, 1); transform-origin: right center; } .footer-widget__get-in-touch { position: relative; display: block; margin-left: 48px; } .footer-widget__get-in-touch-list { position: relative; display: block; } .footer-widget__get-in-touch-list li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-widget__get-in-touch-list li+li { margin-top: 18px; } .footer-widget__get-in-touch-list li .icon { position: relative; display: flex; align-items: center; } .footer-widget__get-in-touch-list li .icon span { position: relative; display: inline-block; font-size: 16px; color: var(--finris-white); } .footer-widget__get-in-touch-list li .text { position: relative; display: block; } .footer-widget__get-in-touch-list li .text p { font-size: 16px; color: var(--finris-white); } .footer-widget__get-in-touch-list li .text p a { color: var(--finris-white); } .footer-widget__get-in-touch-list li .text p a:hover { color: var(--finris-primary); } .site-footer__newsletter { position: relative; display: block; padding-bottom: 65px; } .site-footer__newsletter-inner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background-color: var(--finris-base); border-radius: 70px; padding: 30px 45px 30px; overflow: hidden; z-index: 1; } .site-footer__newsletter-left { position: relative; display: block; top: 3px; } .site-footer__newsletter-title-box { position: relative; display: block; } .site-footer__newsletter-title { font-size: 100px; font-weight: 400; text-transform: uppercase; line-height: .8em; color: transparent; -webkit-text-stroke: 1px var(--finris-white); } .site-footer__newsletter-right { position: relative; display: block; max-width: 535px; width: 100%; } .site-footer__newsletter-content { position: relative; display: block; } .site-footer__newsletter-form { position: relative; display: block; } .site-footer__newsletter-input { position: relative; display: block; } .site-footer__newsletter-input input[type="text"] { font-size: 18px; color: var(--finris-white); font-weight: 500; height: 75px; width: 100%; background: transparent; border: 1px solid var(--finris-white); border-radius: 37px; outline: none; padding: 0 40px 0; padding-right: 172px; } .site-footer__newsletter-btn { position: absolute; top: 10px; bottom: 10px; right: 10px; border: none; background-color: var(--finris-white); font-size: 18px; color: var(--finris-base); font-weight: 500; padding: 14.5px 32px; border-radius: 37px; overflow: hidden; transition: 0.5s ease-in-out; z-index: 1; } .site-footer__newsletter-btn:hover { color: var(--finris-white); } .site-footer__newsletter-btn:before { position: absolute; top: 0; left: 0; content: ""; width: 50%; height: 0; visibility: hidden; background-color: var(--finris-black); opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } .site-footer__newsletter-btn:hover::before { width: 100%; height: 100%; visibility: visible; opacity: 1; } .site-footer__newsletter-btn::after { position: absolute; background-color: var(--finris-black); bottom: 0; right: 0; content: ""; width: 50%; height: 0; visibility: hidden; opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } .site-footer__newsletter-btn:hover:after { width: 100%; height: 100%; visibility: visible; opacity: 1; } .site-footer__bottom { position: relative; display: block; padding: 31.5px 0; border-top: 2px solid rgba(var(--finris-base-rgb), .06); } .site-footer__bottom-inner { position: relative; display: flex; align-items: center; justify-content: space-between; } .site-footer__copyright { position: relative; display: block; top: 3px; } .site-footer__copyright-text { font-size: 18px; color: var(--finris-white); font-weight: 400; } .site-footer__copyright-text a { color: var(--finris-primary); } .site-footer__copyright-text a:hover { color: var(--finris-white); } .site-footer__social-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .site-footer__social-title { font-size: 18px; font-weight: 400; color: var(--finris-white); } .site-footer__social { position: relative; display: flex; align-items: center; } .site-footer__social a { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; color: var(--finris-white); background-color: rgba(var(--finris-white-rgb), .10); border-radius: 5px; font-size: 16px; height: 35px; width: 35px; transform: rotate(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .site-footer__social a:hover { color: var(--finris-white); } .site-footer__social a:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background-color: var(--finris-base); border-radius: 5px; transform: scale(0.0); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: -1; } .site-footer__social a:hover:before { transform: scaleX(1.0); } .site-footer__social a+a { margin-left: 15px; } /*-------------------------------------------------------------- # Site Footer Two --------------------------------------------------------------*/ .site-footer-two { position: relative; display: block; overflow: hidden; background-color: #151B4E; z-index: 1; } .site-footer-two__shape-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .20; z-index: -1; } .site-footer-two__shape-1 { position: absolute; bottom: -60px; left: -150px; width: 297px; height: 297px; background: rgba(103, 57, 248, 0.52); filter: blur(100px); border-radius: 50%; } .site-footer-two__shape-2 { position: absolute; top: 0px; right: -380px; width: 476px; height: 476px; background: rgba(0, 87, 252, 0.4); filter: blur(100px); border-radius: 50%; } .site-footer-two__top { position: relative; display: block; } .site-footer-two__main-content { position: relative; display: block; padding: 114px 0 120px; } .site-footer-two__main-content-inner { position: relative; display: block; } .site-footer-two__star { position: absolute; bottom: -35px; right: 95px; z-index: -1; } .site-footer-two__star img { width: auto; } .footer-widget-two__about { position: relative; display: block; margin-top: 4px; } .footer-widget-two__about-logo { position: relative; display: block; } .footer-widget-two__get-in-touch-list { position: relative; display: block; margin-top: 42px; margin-bottom: 45px; } .footer-widget-two__get-in-touch-list li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-widget-two__get-in-touch-list li+li { margin-top: 20px; } .footer-widget-two__get-in-touch-list li .icon { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; border: 1px solid var(--finris-gray); border-radius: 50%; font-size: 13px; color: var(--finris-white); overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .footer-widget-two__get-in-touch-list li:hover .icon { border: 1px solid var(--finris-base); } .footer-widget-two__get-in-touch-list li .icon:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 0%; content: ""; background-color: var(--finris-base); border-radius: 50%; transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: -1; } .footer-widget-two__get-in-touch-list li:hover .icon:before { height: 100%; } .footer-widget-two__get-in-touch-list li .text { position: relative; display: block; } .footer-widget-two__get-in-touch-list li .text p { font-size: 16px; color: var(--finris-white); } .footer-widget-two__get-in-touch-list li .text p a { color: var(--finris-white); } .footer-widget-two__get-in-touch-list li .text p a:hover { color: var(--finris-base); } .site-footer-two__social-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .site-footer-two__social-title { font-size: 18px; font-weight: 400; color: var(--finris-white); } .site-footer-two__social { position: relative; display: flex; align-items: center; z-index: 1; } .site-footer-two__social:before { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 1px; background-color: var(--finris-bdr-color); z-index: -1; } .site-footer-two__social a { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; color: var(--finris-white); background-color: #151B4E; border-radius: 50%; font-size: 12px; height: 30px; width: 30px; border: 1px solid var(--finris-white); transform: rotate(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .site-footer-two__social a:hover { color: var(--finris-white); border: 1px solid var(--finris-base); } .site-footer-two__social a:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background-color: var(--finris-base); border-radius: 50%; transform: scale(0.0); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: -1; } .site-footer-two__social a:hover:before { transform: scaleX(1.0); } .site-footer-two__social a+a { margin-left: 15px; } .footer-widget-two__quick-links { position: relative; display: block; margin-left: 110px; } .footer-widget-two__title { position: relative; display: block; font-size: 20px; color: var(--finris-white); text-transform: uppercase; font-weight: 400; line-height: 29px; margin-bottom: 46px; } .footer-widget-two__title:before { position: absolute; bottom: -8px; left: 0; height: 2px; width: 40px; background-color: var(--finris-primary); border-radius: 2px; content: ""; } .footer-widget-two__title:after { position: absolute; bottom: -10px; left: 38px; height: 6px; width: 6px; background-color: var(--finris-primary); border-radius: 100px; content: ""; } .footer-widget-two__quick-links-list { position: relative; display: block; } .footer-widget-two__quick-links-list li+li { margin-top: 19px; } .footer-widget-two__quick-links-list li a { position: relative; display: inline-block; font-size: 16px; color: var(--finris-white); font-weight: 500; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .footer-widget-two__quick-links-list li a:hover { color: var(--finris-primary); } .footer-widget-two__quick-links-list li a:before { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--finris-primary); content: ""; transition: transform 500ms ease; transform: scale(0, 1); transform-origin: left center; } .footer-widget-two__quick-links-list li a:hover:before { transform: scale(1, 1); transform-origin: right center; } .footer-widget-two__support { position: relative; display: block; } .footer-widget-two__services { position: relative; display: block; } .site-footer-two__bottom { position: relative; display: block; padding: 31.5px 0; border-top: 1px solid #2F5183; } .site-footer-two__bottom-inner { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; } .site-footer-two__copyright { position: relative; display: block; top: 3px; } .site-footer-two__copyright-text { font-size: 18px; color: var(--finris-white); font-weight: 400; } .site-footer-two__copyright-text a { color: var(--finris-primary); } .site-footer-two__copyright-text a:hover { color: var(--finris-white); } /*-------------------------------------------------------------- # End --------------------------------------------------------------*/