/*----------------------------------------------------------------------------------- Template Name:PetZo HTML5 Template Author: Hamina-Themes Version: 1.0 ----------------------------------------------------------------------------------- CSS INDEX =================== 01. Theme default CSS 02. variables 03. mixins 04. common 05. overlay 06. header 07. breadcrumb 08. mobile-menu 09. typography 10. search 11. custom-animation 12. btn 13. section-title 14. theme-banner 36. footer -----------------------------------------------------------------------------------*/ /* 1. Theme default css */ @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap"); html::-webkit-scrollbar, body::-webkit-scrollbar { width: 5px; } html::-moz-scrollbar, body::-moz-scrollbar { width: 5px; } html::-ms-scrollbar, body::-ms-scrollbar { width: 5px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #c1c1c1; } html::-moz-scrollbar-track, body::-moz-scrollbar-track { background: #c1c1c1; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background-color: #f98700; outline: none; } html::-moz-scrollbar-thumb, body::-moz-scrollbar-thumb { background-color: #f98700; outline: none; } html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active { background: #000000; } html::-moz-scrollbar-thumb:active, body::-moz-scrollbar-thumb:active { background: #000000; } .alt50{height: 80px;} .slick-track > [class*=col] { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-top: var(--bs-gutter-y); } body { font-family: "Satoshi-Regular"; font-size: 18px; line-height: 34px; font-weight: 400; font-style: normal; color: #000000; } .main-page-wrapper { overflow-x: hidden; } .body-bg-3 { background: #F5F2ED; } .body-bg-5 { background: #000; } .fix { overflow: hidden; } a, .button { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: medium none; text-decoration: none; } button:focus, input:focus, input:focus, textarea, textarea:focus { outline: 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Fredoka", serif; color: #000000; line-height: 1.4; font-style: normal; font-weight: 700; text-transform: normal; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } h1 { font-size: 40px; } h2 { font-size: 35px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } .list-none { margin: 0px; padding: 0px; } p { font-size: 18px; font-weight: 400; line-height: 34px; font-family: "Satoshi-Regular"; color: #000000; margin-bottom: 15px; } hr { border-bottom: 1px solid rgab(#ffffff, 0.1); border-top: 0 none; margin: 30px 0; padding: 0; } label { cursor: pointer; font-size: 14px; font-weight: 400; } *::-moz-selection { background: #000; color: #ffffff; text-shadow: none; } ::-moz-selection { background: #000; color: #ffffff; text-shadow: none; } ::selection { background: #000; color: #ffffff; text-shadow: none; } /*-- - Input Placeholder -----------------------------------------*/ *::-moz-placeholder { color: #000; font-size: 14px; opacity: 1; } *::placeholder { color: #000; font-size: 14px; opacity: 1; } /*-- - Common Classes -----------------------------------------*/ .fix { overflow: hidden; } .clear { clear: both; } .overlay-bg { position: relative; z-index: 2; } .overlay-bg::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; } .background-image { background-position: center; background-size: cover; background-repeat: no-repeat; } .popup-video { color: #ffffff; border-radius: 50%; background: #FFE149; border-radius: 50%; font-size: 20px; line-height: 90px; display: inline-block; width: 90px; height: 90px; text-align: center; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; position: relative; z-index: 1; animation: pulseBig infinite 5s linear; } .popup-video:hover { color: #ffffff; background: #f98700; } .custom-container-1600 { padding-left: 145px; padding-right: 145px; } @media only screen and (max-width: 1800px) { .custom-container-1600 { padding-left: 0; padding-right: 0; } } .ctn-preloader { height: 100%; position: fixed; left: 0; top: 0; width: 100%; z-index: 999999; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; } .ctn-preloader .icon { animation: rotated 8s infinite linear; } .ctn-preloader .txt-loading { user-select: none; margin-top: 30px; } .ctn-preloader .txt-loading .letters-loading { font-family: "Fredoka", serif; font-weight: 700; letter-spacing: 8px; display: inline-block; color: rgba(0, 0, 0, 0.12); position: relative; font-size: 50px; line-height: 30px; } .ctn-preloader .txt-loading .letters-loading::before { animation: letters-loading 4s infinite; color: #000000; content: attr(data-text-preloader); left: 0; opacity: 0; top: 0; line-height: 30px; position: absolute; } .ctn-preloader .txt-loading .letters-loading:nth-child(2):before { animation-delay: 0.2s; } .ctn-preloader .txt-loading .letters-loading:nth-child(3):before { animation-delay: 0.4s; } .ctn-preloader .txt-loading .letters-loading:nth-child(4):before { animation-delay: 0.6s; } .ctn-preloader .txt-loading .letters-loading:nth-child(5):before { animation-delay: 0.8s; } .ctn-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s; } .ctn-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s; } .ctn-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s; } @keyframes spinner { to { transform: rotateZ(360deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); } 25%, 50% { opacity: 1; transform: rotateY(0deg); } } #scrollToTopBtn { font-size: 18px; display: inline-block; background: #f98700; position: fixed; width: 35px; height: 35px; right: 7px; bottom: 7px; border-radius: 6px; line-height: 35px; text-align: center; transition: background-color 0.3s, opacity 0.5s, visibility 0.5s; opacity: 0; visibility: hidden; z-index: 1000; } #scrollToTopBtn i { color: #fff; } #scrollToTopBtn:hover { cursor: pointer; background-color: #333; } #scrollToTopBtn.show { opacity: 1; visibility: visible; } /*-- - Overlay ------------------------------------------*/ .overlay-soft { position: relative; z-index: 1; } .overlay-soft::after { content: ""; position: absolute; background: rgba(0, 0, 0, 0.2); height: 100%; width: 100%; left: 0; top: 0; z-index: -1; } [data-overlay] { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; } [data-overlay]::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; } /*-- Overlay Color --*/ [data-overlay=light]::before { background-color: #ffffff; } [data-overlay=dark]::before { background-color: #f98700; } /*-- Overlay Opacity --*/ [data-opacity="1"]::before { opacity: 0.1; } [data-opacity="2"]::before { opacity: 0.2; } [data-opacity="3"]::before { opacity: 0.3; } [data-opacity="4"]::before { opacity: 0.4; } [data-opacity="5"]::before { opacity: 0.5; } [data-opacity="6"]::before { opacity: 0.6; } [data-opacity="7"]::before { opacity: 0.7; } [data-opacity="8"]::before { opacity: 0.8; } [data-opacity="9"]::before { opacity: 0.9; } .main-header-area { position: relative; width: 100%; left: 0; z-index: 999; } .offset-sidebar { display: block; margin-top: 30px; } .theme-main-menu .ht-promo, .theme-main-menu .ht-phone, .theme-main-menu .ht-email { color: #000000; font-size: 18px; font-family: "Satoshi-Medium"; font-weight: 500; padding-right: 10px; margin-right: 10px; display: inline-block; position: relative; z-index: 1; } .theme-main-menu .ht-promo { font-family: "Fredoka", serif; } .theme-main-menu .ht-promo span { color: rgba(0, 0, 0, 0.6); } .theme-main-menu .hamburger-menu { width: 60px; height: 60px; border: 1.5px solid rgb(0, 0, 0); border-radius: 100%; margin-left: 20px; display: flex; align-items: center; cursor: pointer; justify-content: center; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .theme-main-menu .hamburger-menu .bar-wrap { display: flex; align-items: flex-end; flex-direction: column; gap: 5px; } .theme-main-menu .hamburger-menu .bar-wrap .bar-1 { width: 20px; height: 2px; background: #000000; border-radius: 50px; } .theme-main-menu .hamburger-menu .bar-wrap .bar-2 { width: 16px; height: 2px; background: #000000; border-radius: 50px; } .theme-main-menu .hamburger-menu .bar-wrap .bar-3 { width: 20px; height: 2px; background: #000000; border-radius: 50px; } .theme-main-menu .hamburger-menu:hover { background: #f98700; color: #ffffff; } @media only screen and (max-width: 767.98px) { .theme-main-menu .hamburger-menu { width: 50px; height: 50px; } .theme-main-menu .hamburger-menu .bar-wrap .bar-1 { width: 16px; } .theme-main-menu .hamburger-menu .bar-wrap .bar-2 { width: 12px; } .theme-main-menu .hamburger-menu .bar-wrap .bar-3 { width: 16px; } } .header-social a { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: #ffffff; color: #000000; font-size: 14px; text-align: center; line-height: 30px; margin: 0 5px; } .header-social a:hover { color: #ffffff; background: #F47932; } .main-menu { position: relative; z-index: 11; } .main-menu ul { padding: 0; margin: 0; } .main-menu ul li { list-style: none; position: relative; z-index: 1; display: inline-block; margin: 0 26px 0 26px; } @media only screen and (max-width: 1600px) { .main-menu ul li { margin: 0 28px 0 0; } } .main-menu ul li:last-child { margin-right: 0; } .main-menu ul li:last-child a { margin-right: 0; } .main-menu ul li:last-child a::before { display: none; } .main-menu ul li.active { color: #000000; } .main-menu ul li.active a { color: #000000; } .main-menu ul li a { color: #000000; font-family: "Satoshi-Medium"; font-size: 20px; font-weight: 500; line-height: 1; display: inline-block; position: relative; padding: 19px 0 20px 0; } .main-menu .tem_menu a::before { content: "\f282"; font-family: "bootstrap-icons"; font-weight: 700; position: absolute; font-size: 16px; right: -18px; top: 22px; z-index: 1; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .main-menu ul li a::before { display: none; } } .main-menu ul li a::after { display: none; } .main-menu ul li a:hover { color: #f98700; } .main-menu ul li a i { font-size: 10px; } .main-menu ul li:hover > a { color: #f98700; } .main-menu ul li ul.sub-menu { border: 0; position: absolute; z-index: 5; background: #ffffff; border-radius: 0; display: block; right: 0; left: 0; padding: 0; top: 100%; visibility: hidden; transform: scaleY(0); opacity: 0; min-width: 320px; box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.05); margin: 0; transform-origin: 0 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .main-menu ul li ul.sub-menu.mega-menu { min-width: 600px; } .main-menu ul li ul.sub-menu li { display: block; position: relative; z-index: 1; margin-right: 0; margin-left: 0; } .main-menu ul li ul.sub-menu li ul.sub-menu { position: absolute; right: 0; left: 100%; top: 0; } .main-menu ul li ul.sub-menu li a { color: #000000; font-size: 16px; font-family: "Satoshi-Medium"; font-weight: 500; padding: 14px 25px; display: block; transition: all 0.3s ease-in-out; width: 100%; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .main-menu ul li ul.sub-menu li a::before { display: none; } .main-menu ul li ul.sub-menu li a .sub-menu-arrow { float: right; } .main-menu ul li ul.sub-menu li a.active { background-color: transparent; } .main-menu ul li ul.sub-menu li a:hover { background-color: transparent; transform: translateX(5px); text-decoration: underline; } .main-menu ul li:hover > .sub-menu { opacity: 1; visibility: visible; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .sticky-menu { position: fixed; background: #ffffff; top: 0; animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); padding-top: 0; padding-bottom: 0; } .theme-menu-one { position: absolute; top: 0; left: 0; right: 0; z-index: 999; border-bottom: 1.5px solid rgba(0, 0, 0, 0.25); padding-left: 85px; padding-right: 85px; } .theme-menu-one .call-btn { color: rgba(0, 0, 0, 0.3); font-size: 20px; font-weight: 700; font-family: "Satoshi-Bold"; font-style: italic; } .theme-menu-one .call-btn .phone-number { color: #000000; border-bottom: 1px solid #000000; } .theme-menu-one .header-top { padding-top: 18px; padding-bottom: 17px; position: relative; z-index: 1010; } .theme-menu-one .main-header-area { padding: 25px 0; } .theme-menu-one .sticky-menu { padding: 10px 85px; } @media (max-width: 991.98px) { .theme-menu-one .sticky-menu { padding-top: 15px; padding-bottom: 15px; } } .theme-menu-one .cart-menu .shopping-cart:hover { color: #ffffff; background: #f98700; border-color: #f98700; } .theme-menu-one .hamburger-menu:hover { background: #f98700; border-color: #f98700; } .theme-menu-one .hamburger-menu:hover .bar-wrap .bar-1, .theme-menu-one .hamburger-menu:hover .bar-wrap .bar-2, .theme-menu-one .hamburger-menu:hover .bar-wrap .bar-3 { background: #ffffff; } .theme-menu-one .bs-btn { padding: 22px 40px; transform: translateY(6px); } .theme-menu-one .bs-btn::before { background: #F47932; } @media only screen and (max-width: 1800px) { .theme-menu-one { padding-left: 0; padding-right: 0; } .theme-menu-one .main-header-area { padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 1200px) { .theme-menu-one .logo-area img { width: 80%; } } @media only screen and (max-width: 767.98px) { .theme-menu-one .logo-area img { width: 100%; } } .theme-menu-two { background: #EAEAFF; border-bottom: 1px solid rgba(0, 0, 0, 0.15); position: relative; width: 100%; z-index: 999; } .theme-menu-two .cart-menu .shopping-cart { color: #000; background: white; border: 1.5px solid #000; } .theme-menu-two .cart-menu .shopping-cart span { background: #F47932; } .theme-menu-two .cart-menu .shopping-cart:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .theme-menu-two .hamburger-menu { background: #ffffff; border-color: #000; } .theme-menu-two .hamburger-menu .bar-wrap .bar-1, .theme-menu-two .hamburger-menu .bar-wrap .bar-2, .theme-menu-two .hamburger-menu .bar-wrap .bar-3 { background: #000; } .theme-menu-two .bs-btn { color: #ffffff; background: #F47932; font-size: 18px; padding: 20px 45px 20px 45px; border-radius: 32.5px 0 32.5px 32.5px; border-width: 0; transform: translateY(5px); } .theme-menu-two .bs-btn::before { background: #000; } .theme-menu-two .logo { display: inline-block; visibility: visible; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-two .sticky-logo { display: none; visibility: hidden; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-two .main-header-area { padding: 15px 45px 15px 45px; } .theme-menu-two .main-header-area.sticky-menu { padding-top: 10px; padding-bottom: 10px; } .theme-menu-two .main-header-area.sticky-menu .logo { display: none; visibility: hidden; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-two .main-header-area.sticky-menu .sticky-logo { display: inline-block; visibility: visible; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-two .main-menu ul li a { color: #000000; } @media only screen and (max-width: 1600px) { .theme-menu-two .topbar, .theme-menu-two .main-header-area { padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 767.98px) { .theme-menu-two .logo-area img { max-width: 100%; } } .theme-menu-three { position: absolute; top: 20px; left: 0; right: 0; margin: 0 auto; z-index: 999; } .theme-menu-three .cart-menu .shopping-cart { color: #000; border-color: #ffffff; background: #ffffff; } .theme-menu-three .cart-menu .shopping-cart:hover { color: #ffffff; border-color: #F47932; background: #F47932; } .theme-menu-three .cart-menu .shopping-cart span { background: #F47932; } .theme-menu-three .bs-btn { color: #ffffff; background: #F47932; font-size: 18px; padding: 23px 50px 23px 50px; border-radius: 50px; transform: translateY(5px); } .theme-menu-three .bs-btn::before { background: #ffffff; } .theme-menu-three .bs-btn:hover { color: #000; } .theme-menu-three .logo { display: inline-block; visibility: visible; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-three .sticky-logo { display: none; visibility: hidden; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-three .header-top { background: #f98700; border-radius: 30px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; margin-left: 20px; margin-right: 20px; } .theme-menu-three .hamburger-menu { border-color: #ffffff; background: #ffffff; } .theme-menu-three .main-header-area { background: transparent; margin-top: 70px; padding-left: 80px; padding-right: 80px; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .theme-menu-three .main-header-area.sticky-menu { padding-top: 10px; padding-bottom: 10px; border: 0; margin-top: 0; background: #ffffff; } .theme-menu-three .main-header-area.sticky-menu .hamburger-menu { border-color: #F47932; background: #F47932; } .theme-menu-three .main-header-area.sticky-menu .hamburger-menu .bar-wrap .bar-1, .theme-menu-three .main-header-area.sticky-menu .hamburger-menu .bar-wrap .bar-2, .theme-menu-three .main-header-area.sticky-menu .hamburger-menu .bar-wrap .bar-3 { background: #ffffff; } .theme-menu-three .main-header-area.sticky-menu .main-menu ul li a { color: #000000; } .theme-menu-three .main-header-area.sticky-menu .logo { display: none; visibility: hidden; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-three .main-header-area.sticky-menu .sticky-logo { display: inline-block; visibility: visible; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-three .main-header-area.sticky-menu .cart-menu .shopping-cart { color: #ffffff; border-color: #F47932; background: #F47932; } .theme-menu-three .main-header-area.sticky-menu .cart-menu .shopping-cart:hover { color: #ffffff; border-color: #F47932; background: #F47932; } .theme-menu-three .main-header-area.sticky-menu .cart-menu .shopping-cart span { background: #F47932; } .theme-menu-three .main-menu ul li a { color: #ffffff; } .theme-menu-three .main-menu ul li:hover > a { color: #F47932; } @media only screen and (max-width: 1600px) { .theme-menu-three .main-header-area { padding-left: 15px; padding-right: 15px; } } @media only screen and (max-width: 1200px) { .theme-menu-three .main-header-area { padding-left: 15px; padding-right: 15px; } } @media only screen and (max-width: 767.98px) { .theme-menu-three .logo-area img { max-width: 100%; } } .theme-menu-four { border: 1px solid #E8E4E4; margin-left: 100px; margin-right: 100px; position: relative; border-radius: 100px; margin-top: 30px; left: 0; right: 0; z-index: 999; position: fixed; background-color: #fff; } .theme-menu-four .main-header-area { padding-top: 20px; padding-bottom: 20px; padding-left: 35px; padding-right: 35px; } .theme-menu-four .hamburger-menu { border-color: #000; background: #ffffff; } .theme-menu-four .cart-menu .shopping-cart { color: #000000; background: #ffffff; border-color: #000; } .theme-menu-four .cart-menu .shopping-cart span { background: #f98700; } .theme-menu-four .cart-menu .shopping-cart:hover { color: #ffffff; border-color: #f98700; background: #f98700; } .theme-menu-four .search-area .search-input { color: #000; background: #ffffff; border-color: #ffffff; } .theme-menu-four .search-area .search-input:hover { color: #ffffff; border-color: #f98700; background: #f98700; } .theme-menu-four .bs-btn { color: #ffffff; padding: 22px 43px 22px 43px; border-radius: 40px; background: #229ebd; } .theme-menu-four .bs-btn::before { background: #f98700; } .theme-menu-four .bs-btn:hover { color: #000000; background: #f98700; } @media only screen and (max-width: 1600px) { .theme-menu-four { margin-left: 0; margin-right: 0; } .theme-menu-four .main-header-area { padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 767.98px) { .theme-menu-four .logo-area img { max-width: 100%; } } .theme-menu-five { position: absolute; z-index: 999; top: 30px; left: 0; right: 0; width: 100%; } .theme-menu-five .logo { display: inline-block; visibility: visible; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-five .sticky-logo { display: none; visibility: hidden; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-five .cart-menu .shopping-cart { color: #000; border: 2px solid #000; background: #ffffff; } .theme-menu-five .cart-menu .shopping-cart span { background: #F47932; } .theme-menu-five .cart-menu .shopping-cart:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .theme-menu-five .hamburger-menu { background: #F47932; border-color: #F47932; } .theme-menu-five .hamburger-menu .bar-wrap .bar-1, .theme-menu-five .hamburger-menu .bar-wrap .bar-2, .theme-menu-five .hamburger-menu .bar-wrap .bar-3 { background: #ffffff; } .theme-menu-five .main-header-area { padding-top: 20px; padding-bottom: 20px; padding-left: 85px; padding-right: 38px; } .theme-menu-five .main-header-area .main-menu ul li a:hover { color: #FFBA05; } .theme-menu-five .main-header-area .logo { display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-five .main-header-area .sticky-logo { display: none; visibility: hidden; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-five .main-header-area.sticky-menu { padding-top: 10px; padding-bottom: 10px; } .theme-menu-five .main-header-area.sticky-menu .logo { display: none; } .theme-menu-five .main-header-area.sticky-menu .sticky-logo { display: inline-block; visibility: visible; } .theme-menu-five .main-header-area.sticky-menu .hamburger-menu { background: #F47932; border-color: #F47932; } .theme-menu-five .main-header-area.sticky-menu .hamburger-menu .bar-wrap .bar-1, .theme-menu-five .main-header-area.sticky-menu .hamburger-menu .bar-wrap .bar-2, .theme-menu-five .main-header-area.sticky-menu .hamburger-menu .bar-wrap .bar-3 { background: #000; } .theme-menu-five .bs-btn { font-size: 20px; color: #000000; background: #FFBA05; border: 2px solid #000; border-radius: 50px; padding-top: 21px; padding-bottom: 21px; } .theme-menu-five .bs-btn::before { background: #F47932; } .theme-menu-five .bs-btn:hover { color: #ffffff; border-color: #F47932; } @media only screen and (max-width: 1600px) { .theme-menu-five .header-top, .theme-menu-five .main-header-area { padding-left: 10px; padding-right: 10px; } } @media only screen and (max-width: 1200px) { .theme-menu-five .main-header-area .logo { display: none; } .theme-menu-five .main-header-area .sticky-logo { display: inline-block; visibility: visible; } } @media only screen and (max-width: 767.98px) { .theme-menu-five .logo-area img { max-width: 100%; } } .theme-menu-six { background: transparent; position: absolute; left: 0; right: 0; top: 0; width: 100%; z-index: 999; margin-top: 30px; } .theme-menu-six .cart-menu .shopping-cart { color: #000; background: white; border: 1.5px solid #000; } .theme-menu-six .cart-menu .shopping-cart span { background: #F47932; } .theme-menu-six .cart-menu .shopping-cart:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .theme-menu-six .hamburger-menu { background: #ffffff; border-color: #000; } .theme-menu-six .hamburger-menu .bar-wrap .bar-1, .theme-menu-six .hamburger-menu .bar-wrap .bar-2, .theme-menu-six .hamburger-menu .bar-wrap .bar-3 { background: #000; } .theme-menu-six .bs-btn { color: #ffffff; background: #F47932; font-size: 18px; padding: 20px 45px 20px 45px; border-radius: 32.5px 0 32.5px 32.5px; border-width: 0; transform: translateY(5px); } .theme-menu-six .bs-btn::before { background: #000; } .theme-menu-six .logo { display: inline-block; visibility: visible; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-six .sticky-logo { display: none; visibility: hidden; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-six .main-header-area { padding: 15px 45px 15px 45px; } .theme-menu-six .main-header-area.sticky-menu { padding-top: 10px; padding-bottom: 10px; } .theme-menu-six .main-header-area.sticky-menu .logo { display: none; visibility: hidden; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-six .main-header-area.sticky-menu .sticky-logo { display: inline-block; visibility: visible; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-menu-six .main-menu ul li a { color: #000000; } @media only screen and (max-width: 1600px) { .theme-menu-six .topbar, .theme-menu-six .main-header-area { padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 767.98px) { .theme-menu-six .logo-area img { max-width: 100%; } } .onepage-nav .main-menu ul li a::before { display: none; } .breadcrumb-wrapper { padding-top: 250px; padding-bottom: 155px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2; } .breadcrumb-wrapper .breadcrumb-shape { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; } .breadcrumb-wrapper::before { content: ""; position: absolute; background: rgba(0, 0, 0, 0); width: 100%; height: 100%; left: 0; top: 0; z-index: -1; } .breadcrumb-wrapper .breadcrumb-title { color: #fff; font-size: 70px; line-height: 1; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 25px; } .breadcrumb-wrapper .breadcumb-img-shape { position: absolute; right: 9.7%; bottom: 0; z-index: 1; max-width: 100%; } @media only screen and (max-width: 1600px) { .breadcrumb-wrapper .breadcrumb-title { font-size: 35px; } .breadcrumb-wrapper .breadcumb-img-shape { max-width: 30%; } } @media only screen and (max-width: 1200px) { .breadcrumb-wrapper { padding-top: 170px; padding-bottom: 110px; } } @media only screen and (max-width: 991.98px) { .breadcrumb-wrapper .page-title { font-size: 28px; } .breadcrumb-wrapper .breadcumb-img-shape { right: 0; } } @media only screen and (max-width: 767.98px) { .breadcrumb-wrapper .page-title { font-size: 28px; } } ul.breadcumb-menu { display: inline-block; padding: 0; position: relative; z-index: 2; } ul.breadcumb-menu li { display: inline-block; } ul.breadcumb-menu li:last-child a { color: #000000; margin-right: 0; padding-right: 0; } ul.breadcumb-menu li:last-child a::before { display: none; } ul.breadcumb-menu li { color: rgba(255, 255, 255,1); font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; line-height: 1; display: inline-block; padding-right: 10px; margin-right: 10px; position: relative; z-index: 1; } ul.breadcumb-menu li a { color: rgba(255, 255, 255,1); font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; line-height: 1; display: inline-block; padding-right: 10px; margin-right: 10px; position: relative; z-index: 1; } ul.breadcumb-menu li a::before { content: ""; position: absolute; background: rgba(0, 0, 0, 0.4); width: 2px; height: 21px; right: -4px; top: 4px; z-index: 1; transform: rotate(23deg); } @media only screen and (max-width: 1600px) { ul.breadcumb-menu li a { font-size: 18px; } ul.breadcumb-menu li a::before { top: 0; } } /*! ####################################################################### MeanMenu 2.0.7 -------- To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/) ####################################################################### */ /* hide the link until viewport size is reached */ a.meanmenu-reveal { display: none; } /* when under viewport size, .mean-container is added to body */ .mean-container .mean-bar { float: left; width: 100%; position: relative; background: none; padding: 4px 0; min-height: 42px; z-index: 999999; } .mean-container a.meanmenu-reveal { width: 22px; height: 22px; padding: 13px 13px 11px 13px; position: absolute; top: 0; right: 0; cursor: pointer; color: #fff; text-decoration: none; font-size: 16px; text-indent: -9999em; line-height: 22px; font-size: 1px; display: none !important; font-family: Arial, Helvetica, sans-serif; font-weight: 700; } .mean-container a.meanmenu-reveal span { display: block; background: #fff; height: 3px; margin-top: 3px; } .mean-container .mean-nav { float: left; width: 100%; background: none; margin-top: 0; } .mean-container .mean-nav > ul { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; } .mean-container .mean-nav ul li { list-style-type: none !important; position: relative; float: left; width: 100%; } .mean-container .mean-nav ul li a { font-size: 16px; display: block; float: left; width: 100%; padding: 0.5em 5% 0.5em 0; margin: 0; text-align: left; color: #fff; /* border-top: 1px solid #383838; border-top: 1px solid rgba(255, 255, 255, 0.5); */ text-decoration: none; text-transform: uppercase; } .mean-container .mean-nav ul li li a { font-size: 15px; width: 80%; padding: 0.4em 5%; border-top: 1px solid #f1f1f1; border-top: 1px solid rgba(255, 255, 255, 0.25); opacity: 0.8; /* filter: alpha(opacity=75); text-shadow: none !important; */ visibility: visible; } .mean-container .mean-nav ul li.mean-last a { border-bottom: none; margin-bottom: 0; } .mean-container .mean-nav ul li li li a { width: 70%; padding: 1em 15%; } .mean-container .mean-nav ul li li li li a { width: 60%; padding: 1em 20%; } .mean-container .mean-nav ul li li li li li a { width: 50%; padding: 1em 25%; } .mean-container .mean-nav ul li a:hover { background: #252525; background: rgba(255, 255, 255, 0.1); } .mean-container .mean-nav ul li a.mean-expand { margin-top: 1px; width: 26px; height: 32px; padding: 4px 8px !important; text-align: center; position: absolute; right: 0; top: 0; z-index: 2; font-weight: 700; background: rgba(255, 255, 255, 0.1); border: none !important; /* border-left: 1px solid rgba(255, 255, 255, 0.4) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; */ } .mean-container .mean-nav ul li a.mean-expand:hover { background: rgba(0, 0, 0, 0.9); } .mean-container .mean-push { float: left; width: 100%; padding: 0; margin: 0; clear: both; } .mean-nav .wrapper { width: 100%; padding: 0; margin: 0; } /* Fix for box sizing on Foundation Framework etc. */ .mean-container .mean-bar, .mean-container .mean-bar * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .mean-remove { display: none !important; } .ht-menu-wrapper { position: fixed; top: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 999999; width: 0; width: 100%; height: 100%; -webkit-transition: all ease 0.8s; transition: all ease 0.8s; opacity: 0; visibility: hidden; } .ht-menu-wrapper .mobile-logo { border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding-bottom: 31px; } .ht-menu-wrapper .mobile-menu-wrapper { overflow-y: scroll; max-height: calc(100vh - 200px); padding-bottom: 40px; margin-top: 33px; text-align: left; } .ht-menu-wrapper .mobile-menu-wrapper span.float-end { display: none; } .ht-menu-wrapper .ht-menu-area { padding: 50px 20px; width: 100%; max-width: 310px; background-color: #000000; border-right: 3px solid #f98700; height: 100%; position: relative; left: -110%; opacity: 0; visibility: hidden; -webkit-transition: all ease 1s; transition: all ease 1s; z-index: 1; } .ht-menu-wrapper .ht-menu-toggle { border: none; font-size: 22px; position: absolute; right: 5px; top: 25px; padding: 0; line-height: 1; width: 33px; height: 33px; line-height: 35px; font-size: 16px; z-index: 1; color: #ffffff; background-color: #f98700; border-radius: 50%; } .ht-menu-wrapper.ht-body-visible { opacity: 1; visibility: visible; } .ht-menu-wrapper.ht-body-visible .ht-menu-area { left: 0; opacity: 1; visibility: visible; } @media only screen and (max-width: 991.98px) { .ht-menu-wrapper.ht-body-visible .ht-menu-area { overflow: scroll; } } .ht-mobile-menu ul li { border-bottom: 1px solid #fdedf1; list-style-type: none; } .ht-mobile-menu ul li { border-bottom: 1px solid #fdedf1; list-style-type: none; } .ht-mobile-menu ul li a { display: block; position: relative; padding: 12px 0; line-height: 1.4; font-size: 16px; text-transform: capitalize; color: var(--white-color); padding-left: 18px; } .offset-widget { margin-top: 50px; } .offset-widget.offset-logo { border-bottom: 1px solid #eeecec; padding-bottom: 20px; } .offset-widget .info-widget .offset-title { color: #ffffff; font-size: 20px; font-weight: 800; color: #ffffff; } .offset-widget .info-widget p { color: #ffffff; } .offset-widget .info-widget.info-widget2 p { margin-bottom: 15px; } .offset-widget .info-widget.info-widget2 p i { margin-right: 7px; color: #ffffff; } .fw-exbold { font-weight: 800 !important; } .fw-bold { font-weight: 700 !important; } .fw-semi { font-weight: 600 !important; } .fw-medium { font-weight: 500 !important; } .fw-normal { font-weight: 400 !important; } .fw-light { font-weight: 300 !important; } .fw-thin { font-weight: 100 !important; } .text-xl { font-size: 30px; font-weight: 500; font-family: "Satoshi-Medium"; line-height: 1.8; } @media only screen and (max-width: 1600px) { .text-xl { font-size: 20px; } } .text-lg { font-size: 22px !important; line-height: 45px; } @media only screen and (max-width: 1200px) { .text-lg { font-size: 20px !important; line-height: 34px; } } @media only screen and (max-width: 991.98px) { .text-lg { font-size: 18px !important; line-height: 34px; } } .fs-20 { font-size: 20px !important; } .fs-18 { font-size: 18px !important; } .fs-16 { font-size: 16px !important; } .fs-14 { font-size: 14px !important; } .fs-12 { font-size: 12px !important; } /*-- - Background color -----------------------------------------*/ .grey-bg { background: #E4F0F0; } .light-bg { background: #F4F4F4; } .light-grey-bg { background: #EBF3FF; } .white-bg { background: #ffffff; } .black-bg { background: #000000 !important; } .heding-bg { background: #000000 !important; } .theme-bg { background: #f98700 !important; } .theme-bg2 { background: #F47932 !important; } /*-- - color -----------------------------------------*/ .text-white { color: #ffffff; } .text-black { color: #000; } .text-theme { color: #f98700 !important; } .text-theme2 { color: #F47932 !important; } .text-body { color: #000000 !important; } .text-body2 { color: #000000 !important; } .text-heding { color: #000000 !important; } .text-heding2 { color: #000000 !important; } /*-- - fonts -----------------------------------------*/ .body-font { font-family: "Satoshi-Regular" !important; } .heding-font { font-family: "Fredoka", serif !important; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .bg-none { background: none !important; } .before-none::before { display: none !important; } .after-none::before { display: none !important; } .border-rad { border-radius: 50px; } @media only screen and (max-width: 1200px) { .border-rad { border-radius: 15px; } } .space-20 { margin-left: 20px; margin-right: 20px; } @media only screen and (max-width: 1200px) { .space-20 { margin-left: 10px; margin-right: 10px; } } /*---font family----*/ .satoshibold { font-family: "Satoshi-Bold" !important; } .satoshiregular { font-family: "Satoshi-Regular" !important; } .satoshimedium { font-family: "Fredoka", serif !important; } .radiofont { font-family: "Fredoka", serif !important; } /* search-area */ .search-area .search-input { color: #000000; font-size: 20px; width: 60px; height: 60px; display: inline-block; border: 1.5px solid #000000; border-radius: 50%; text-align: center; line-height: 60px; position: relative; z-index: 1; } .search-area .search-input:hover { background: #f98700; color: #ffffff; } /* Full screen search -------------------------------------------------------*/ .offcanvas-top { min-height: 150px; } .offcanvas-top .search-close { position: absolute; top: 50px; right: 50px; font-size: 30px; color: #fff; cursor: pointer; } .search-wrap { padding-bottom: 100px; } .search-wrap input { color: #ffffff; font-size: 80px; width: 100%; background: transparent; border: 0; text-align: center; display: inline-block; height: auto; padding: 0; display: inline-block; display: flex; justify-content: center; margin: 0 auto; border-bottom: 2px solid #ffffff; } .search-wrap input::placeholder { color: #ffffff; padding-bottom: 80px; font-size: 80px; font-family: "Fredoka", serif; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .search-wrap input::placeholder { font-size: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { .search-wrap input::placeholder { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .search-wrap input::placeholder { font-size: 30px; } } @media (max-width: 767px) { .search-wrap input::placeholder { font-size: 20px; } } .search-wrap input::-moz-placeholder, .search-wrap input::-webkit-placeholder, .search-wrap input::-o-placeholder, .search-wrap input::-ms-placeholder { color: #ffffff; padding-bottom: 80px; font-size: 80px; font-family: "Fredoka", serif; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .search-wrap input::-moz-placeholder, .search-wrap input::-webkit-placeholder, .search-wrap input::-o-placeholder, .search-wrap input::-ms-placeholder { font-size: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { .search-wrap input::-moz-placeholder, .search-wrap input::-webkit-placeholder, .search-wrap input::-o-placeholder, .search-wrap input::-ms-placeholder { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .search-wrap input::-moz-placeholder, .search-wrap input::-webkit-placeholder, .search-wrap input::-o-placeholder, .search-wrap input::-ms-placeholder { font-size: 30px; } } @media (max-width: 767px) { .search-wrap input::-moz-placeholder, .search-wrap input::-webkit-placeholder, .search-wrap input::-o-placeholder, .search-wrap input::-ms-placeholder { font-size: 30px; } } @media (min-width: 1600px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1470px; } } .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { --bs-gutter-x: 30px; } .row { --bs-gutter-x: 30px; } .gx-50 { --bs-gutter-x: 50px; } @media only screen and (max-width: 1600px) { .gx-50 { --bs-gutter-x: 30px; } } .gx-40 { --bs-gutter-x: 40px; } @media only screen and (max-width: 1600px) { .gx-40 { --bs-gutter-x: 30px; } } .gx-60 { --bs-gutter-x: 60px; } @media only screen and (max-width: 1600px) { .gx-60 { --bs-gutter-x: 30px; } } .custom-container { max-width: 1550px; } @-webkit-keyframes rotated { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes rotated { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @-webkit-keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @-webkit-keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.2); transform: scale(0.2); } } @keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.2); transform: scale(0.2); } } @-webkit-keyframes scale-right { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes scale-right { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes fade-in { 0% { opacity: 0.5; } 40% { opacity: 1; } 100% { opacity: 0.7; } } @keyframes fade-in { 0% { opacity: 0.5; } 40% { opacity: 1; } 100% { opacity: 0.7; } } @keyframes hvr-ripple-out { 0% { top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 1; } 100% { top: -6px; right: -6px; bottom: -6px; left: -6px; opacity: 0; } } @keyframes hvr-ripple-out-two { 0% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @-webkit-keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-up-one-1 { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-one-1 { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes animationFramesOne { 0% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, 72px) rotate(72deg); } 60% { transform: translate(83px, 122px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } } @-webkit-keyframes animationFramesOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); } } /* Move frame*/ @keyframes moveRound { 0% { background-color: #eee3ff; left: -24px; top: 0px; } 25% { background-color: #feddfc; left: 100px; top: 0px; } 50% { background-color: #efe4ff; left: 100px; top: 100px; } 75% { background-color: #e2fcf4; left: -24px; top: 200px; } 100% { background-color: #eee3ff; left: -24px; top: 0px; } } @-webkit-keyframes moveRound { 0% { background-color: #eee3ff; left: -24px; top: 0px; } 25% { background-color: #feddfc; left: 100px; top: 0px; } 50% { background-color: #efe4ff; left: 100px; top: 200px; } 75% { background-color: #e2fcf4; left: -24px; top: 100px; } 100% { background-color: #eee3ff; left: -24px; top: 0px; } } @keyframes moveShap { 0% { left: 0px; top: 0px; } 25% { left: 100px; top: 0px; } 50% { left: 100px; top: 100px; } 75% { left: 0px; top: 200px; } 100% { left: 0px; top: 0px; } } @keyframes moveShap2 { 0% { right: 0px; top: 0px; } 25% { right: 100px; top: 0px; } 50% { right: 100px; top: 100px; } 75% { right: 0px; top: 200px; } 100% { right: 0px; top: 0px; } } /* Heartbeat frame*/ @-webkit-keyframes heartbeat { to { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes heartbeat { to { -webkit-transform: scale(1.2); transform: scale(1.2); } } /* Rotation frame*/ @keyframes rotation { to { transform: rotate(360deg); } } .rotation { animation: rotation 50s infinite linear; } /* pulseBig */ @keyframes pulseBig { 0% { box-shadow: 0 0 0 0 rgba(55, 140, 255, 0.2); } 50% { box-shadow: 0 0 0 30px rgba(1, 93, 199, 0); } 100% { box-shadow: 0 0 0 0 rgba(1, 93, 199, 0); } } .scaleUp1 { -webkit-animation-name: scaleUp1; animation-name: scaleUp1; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes scaleUp1 { 0% { -webkit-transform: translateY(1); transform: translateY(1); } 20% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 40% { -webkit-transform: translateY(1); transform: translateY(1); } 80% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(1); transform: translateY(1); } } @keyframes scaleUp1 { 0% { -webkit-transform: translateY(1); transform: translateY(1); } 20% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 40% { -webkit-transform: translateY(1); transform: translateY(1); } 80% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(1); transform: translateY(1); } } @keyframes runs { 0% { transform: translateY(0) rotate(90deg); } 50% { transform: translateY(300px) rotate(90deg); } 100% { transform: translateY(-300px) rotate(180deg); } } @-webkit-keyframes runs { 0% { transform: translateY(0) rotate(90deg); } 50% { transform: translateY(300px) rotate(90deg); } 100% { transform: translateY(-300px) rotate(180deg); } } @-moz-keyframes runs { 0% { transform: translateY(0) rotate(90deg); } 50% { transform: translateY(300px) rotate(90deg); } 100% { transform: translateY(-300px) rotate(180deg); } } @-o-keyframes runs { 0% { transform: translateY(0) rotate(90deg); } 50% { transform: translateY(300px) rotate(90deg); } 100% { transform: translateY(-300px) rotate(180deg); } } @keyframes zoomIncolor { 0% { transform: scale(0.8); } 50% { transform: scale(1); background: #f98700; opacity: 0.5; } 100% { transform: scale(1.3); background: #f98700; opacity: 0.8; } } @-webkit-keyframes zoomIncolor { 0% { transform: scale(0.8); } 50% { transform: scale(1); background: #f98700; opacity: 0.5; } 100% { transform: scale(1.3); background: #f98700; opacity: 0.8; } } @-moz-keyframes zoomIncolor { 0% { transform: scale(0.8); } 50% { transform: scale(1); background: #f98700; opacity: 0.5; } 100% { transform: scale(1.3); background: #f98700; opacity: 0.8; } } @keyframes squareMove { 0% { transform: translateX(0px) rotate(0deg); } 33% { transform: translateY(-100px) rotate(180deg); } 66% { transform: translateX(200px) rotate(-90deg); } 100% { transform: translateX(0px) rotate(0deg); } } @-webkit-keyframes squareMove { 0% { transform: translateX(0px); } 33% { transform: translateY(-100px); } 66% { transform: translateX(200px); } 100% { transform: translateX(0px); } } @-moz-keyframes squareMove { 0% { transform: translateX(0px); } 33% { transform: translateY(-100px); } 66% { transform: translateX(200px); } 100% { transform: translateX(0px); } } @keyframes float-bob { 0% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } 50% { transform: translateY(-100px); -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); } 100% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } } .movingX { animation: movingX 8s linear infinite; } @keyframes movingX { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(0); } } .jump { animation: jumpAni 7s linear infinite; } .jump2 { animation: jumpAni 9s linear infinite; } @keyframes jumpAni { 0% { transform: translateY(0); } 40% { transform: translateY(-30px); } 100% { transform: translateY(0); } } .jump-reverse { animation: jumpReverseAni 7s linear infinite; } @keyframes jumpReverseAni { 0% { transform: translateY(0); } 50% { transform: translateY(30px); } 100% { transform: translateY(0); } } .spin { animation: spin 15s linear infinite; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0); } 50% { transform: rotate(40deg); } 100% { transform: rotate(0); } } @keyframes marqueslide { from { transform: translateX(0); } to { transform: translateX(-100%); } } .jump { animation: jumpAni 7s linear infinite; } @keyframes jumpAni { 0% { transform: translateY(0); } 40% { transform: translateY(-30px); } 100% { transform: translateY(0); } } .jump-reverse { animation: jumpReverseAni 7s linear infinite; } @keyframes jumpReverseAni { 0% { transform: translateY(0); } 50% { transform: translateY(30px); } 100% { transform: translateY(0); } } @-webkit-keyframes fade-in { 0% { opacity: 0.2; } 40% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes fade-in { 0% { opacity: 0.2; } 40% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes hvr-ripple-out { 0% { top: -5px; right: -5px; bottom: -5px; left: -5px; } 50% { top: -15px; right: -15px; bottom: -15px; left: -15px; opacity: 0.8; } 100% { top: -5px; right: -5px; bottom: -5px; left: -5px; opacity: 1; } } @keyframes hvr-ripple-out-two { 0% { top: 0; right: 0; bottom: 0; left: 0; } 100% { top: -30px; right: -30px; bottom: -30px; left: -30px; opacity: 0; } } @-webkit-keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-up-two { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes scale-up-two { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes scale-up-three { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(2); transform: scale(2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-three { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(2); transform: scale(2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { 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 { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(150px); -ms-transform: translateY(150px); transform: translateY(150px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-200px); -ms-transform: translateX(-200px); transform: translateX(-200px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes jump { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jump { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes jumpTwo { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jumpTwo { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes jumpThree { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jumpThree { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes jumpFour { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jumpFour { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes jumpFive { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jumpFive { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes prXOne { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes prXOne { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes prXTwo { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(15px); transform: translateX(15px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes prXTwo { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(15px); transform: translateX(15px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotatedTwo { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotatedTwo { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @-webkit-keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @-webkit-keyframes scale-right { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50% { -webkit-transform: translateX(20%); transform: translateX(20%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes scale-right { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50% { -webkit-transform: translateX(20%); transform: translateX(20%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes fade-in { 0% { opacity: 0.2; } 40% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes fade-in { 0% { opacity: 0.2; } 40% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes hvr-ripple-out { 0% { top: -5px; right: -5px; bottom: -5px; left: -5px; } 50% { top: -15px; right: -15px; bottom: -15px; left: -15px; opacity: 0.8; } 100% { top: -5px; right: -5px; bottom: -5px; left: -5px; opacity: 1; } } @keyframes hvr-ripple-out-two { 0% { top: 0; right: 0; bottom: 0; left: 0; } 100% { top: -30px; right: -30px; bottom: -30px; left: -30px; opacity: 0; } } @-webkit-keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-up-two { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes scale-up-two { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes scale-up-three { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(2); transform: scale(2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-three { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(2); transform: scale(2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /*------------------------------------- theme-btn ---------------------------------------*/ .ht-btn { overflow: hidden; color: #000; font-size: 18px; font-family: "Fredoka", serif; font-weight: 600; line-height: 1; background-color: #f98700; padding: 23px 51px 22px 50px; border-radius: 15px; position: relative; z-index: 1; cursor: pointer; text-decoration: none; text-transform: uppercase; display: inline-block; transition: all; -webkit-transition-duration: 800ms; transition-duration: 800ms; } .ht-btn::before { -webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 0px; height: 100%; content: ""; left: 0; top: 0; bottom: 0; z-index: -1; background: #F47932; } .ht-btn:hover { color: #ffffff; } .ht-btn:hover::before { width: 100%; height: 100%; right: 0; border-radius: 10px; } @media only screen and (max-width: 767.98px) { .ht-btn { padding-left: 30px; padding-right: 30px; } } .ht-btn.style-2 { border: 1.5px solid #000; background: transparent; } .ht-btn.style-2::before { background: #f98700; } .ht-btn.style-2:hover { border-color: #f98700; color: #000000; } .ht-btn.style-3 { background: #ffffff; } .ht-btn.style-3::before { background: #000; } .ht-btn.style-3:hover { color: #ffffff; } .ht-btn.style-4 { color: #ffffff; background: #F47932; border-radius: 37.5px 0 37.5px 37.5px; } .ht-btn.style-4::before { background: #000; border-radius: 37.5px 0 37.5px 37.5px; } .ht-btn.style-4:hover { color: #ffffff; } .ht-btn.style-5 { background: #ffffff; border: 1.5px solid #000; border-radius: 37.5px 0 37.5px 37.5px; } .ht-btn.style-5::before { background: #000; border-radius: 37.5px 0 37.5px 37.5px; } .ht-btn.style-5:hover { color: #ffffff; } .ht-btn.style-6 { border: 1.5px solid #000; background: transparent; border-radius: 50px; padding-right: 25px; } .ht-btn.style-6::before { background: #F47932; } .ht-btn.style-6 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-btn.style-6:hover { border-color: #F47932; color: #ffffff; } .ht-btn.style-6:hover img { filter: invert(1); } .ht-btn.style-7 { color: #000000; border-radius: 40px; background: #ffffff; padding-left: 50px; padding-right: 25px; } .ht-btn.style-7::before { background: #F47932; } .ht-btn.style-7 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-btn.style-7 .btn-icon { margin-left: 28px; } .ht-btn.style-7:hover { color: #ffffff; } .ht-btn.style-7:hover img { filter: invert(1); } .ht-btn.style-8 { border: 1.5px solid #000; background: transparent; border-radius: 50px; padding-right: 25px; } .ht-btn.style-8::before { background: #F47932; } .ht-btn.style-8 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-btn.style-8 .btn-icon { margin-left: 28px; } .ht-btn.style-8:hover { border-color: #F47932; color: #ffffff; } .ht-btn.style-8:hover img { filter: invert(1); } .ht-btn.style-9 { color: #ffffff; background: #F47932; border-radius: 50px; } .ht-btn.style-9::before { background: #f98700; } .ht-btn.style-10 { border: 1.5px solid #000; background: transparent; border-radius: 50px; } .ht-btn.style-10::before { background: #F47932; } .ht-btn.style-10 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-btn.style-10:hover { border-color: #F47932; color: #ffffff; } .ht-btn.style-10:hover img { filter: invert(1); } .ht-btn.style-11 { background: #ffffff; border-radius: 50px; } .ht-btn.style-11::before { background: #000; } .ht-btn.style-11:hover { color: #ffffff; } .ht-btn.style-12 { color: #ffffff; background: #000; border-radius: 50px; } .ht-btn.style-12::before { background: #f98700; } .ht-btn.style-12:hover { color: #000000; background: #f98700; } .ht-btn.style-13 { color: #000000; border-radius: 40px; background: #FFBA05; border: 2px solid #000; padding-left: 50px; padding-right: 25px; } .ht-btn.style-13::before { background: #F47932; } .ht-btn.style-13 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-btn.style-13 .btn-icon { margin-left: 28px; } .ht-btn.style-13:hover { color: #ffffff; border-color: #F47932; } .ht-btn.style-13:hover img { filter: invert(1); } .ht-btn.style-14 { color: #000000; border-radius: 40px; background: #FFBA05; border: 2px solid #000; } .ht-btn.style-14::before { background: #F47932; } .ht-btn.style-14 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-btn.style-14 .btn-icon { margin-left: 28px; } .ht-btn.style-14:hover { color: #ffffff; border-color: #F47932; } .ht-btn.style-14:hover img { filter: invert(1); } .ht-btn.style-15 { color: #000000; border-radius: 40px; background: #ffffff; border: 2px solid #000; padding-left: 50px; padding-right: 25px; } .ht-btn.style-15::before { background: #F47932; } .ht-btn.style-15 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-btn.style-15 .btn-icon { margin-left: 28px; } .ht-btn.style-15:hover { color: #ffffff; border-color: #F47932; } .ht-btn.style-15:hover img { filter: invert(1); } .ht-btn.style-16 { background: transparent; border: 1.5px solid #000; border-radius: 37.5px 0 37.5px 37.5px; } .ht-btn.style-16::before { background: #000; border-radius: 37.5px 0 37.5px 37.5px; } .ht-btn.style-16:hover { color: #ffffff; } .ht-btn.style-17 { color: #000000; background: #ffffff; border-radius: 37.5px 0 37.5px 37.5px; } .ht-btn.style-17::before { background: #000; border-radius: 37.5px 0 37.5px 37.5px; } .ht-btn.style-17:hover { color: #ffffff; } .ht-btn.style-18 { border: 1.5px solid #000; background: transparent; border-radius: 50px; } .ht-btn.style-18::before { background: #f98700; } .ht-btn.style-18 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-btn.style-18:hover { border-color: #f98700; color: #000000; } .ht-btn.style-18:hover img { filter: invert(1); } @media only screen and (max-width: 991.98px) { .ht-btn.style-2, .ht-btn.style-3, .ht-btn.style-4, .ht-btn.style-5, .ht-btn.style-6, .ht-btn.style-7, .ht-btn.style-8, .ht-btn.style-9, .ht-btn.style-10, .ht-btn.style-11, .ht-btn.style-12, .ht-btn.style-13, .ht-btn.style-14, .ht-btn.style-15, .ht-btn.style-16, .ht-btn.style-17, .ht-btn.style-18 { padding-left: 25px; padding-right: 25px; } } ul.slick-dots { padding: 0; margin: 0; position: absolute; left: 0; right: 0; margin: 0 auto; margin-top: 45px; text-align: center; } ul.slick-dots li { display: inline-block; border: 0; width: unset; height: unset; } ul.slick-dots li button { border: 0; font-size: 0; width: 12px; height: 12px; margin: 0px 5px 0px 5px; border: 0; padding: 0; border-radius: 50%; background: #000; } ul.slick-dots li.slick-active button { width: 12px; height: 12px; background: #f98700; transform: translateY(-1px); } .dot-style-1 ul.slick-dots::before { content: ""; position: absolute; width: 100%; height: 1.5px; left: 0; top: 12px; background-color: #000; z-index: -2; } .dot-style-1 ul.slick-dots::after { content: ""; position: absolute; width: 120px; height: 50px; left: 50%; transform: translateX(-50%); margin: 0 auto; top: 0; background-color: #ffffff; z-index: -1; } .arrow-style-1 .slick-prev, .arrow-style-1 .slick-next, .arrow-style-1 .next-p1, .arrow-style-1 .prev-p1, .arrow-style-1 .slick-arrow, .arrow-style-3 .slick-prev, .arrow-style-3 .slick-next, .arrow-style-3 .next-p1, .arrow-style-3 .prev-p1, .arrow-style-3 .slick-arrow, .arrow-style-4 .slick-prev, .arrow-style-4 .slick-next, .arrow-style-4 .next-p1, .arrow-style-4 .prev-p1, .arrow-style-4 .slick-arrow, .arrow-style-6 .slick-prev, .arrow-style-6 .slick-next, .arrow-style-6 .next-p1, .arrow-style-6 .prev-p1, .arrow-style-6 .slick-arrow { text-align: center; background: transparent; padding: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; width: 70px; height: 70px; border-radius: 50% 0 50% 50%; border: 1.5px solid #000; cursor: pointer; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .arrow-style-1 .slick-prev img, .arrow-style-1 .slick-next img, .arrow-style-1 .next-p1 img, .arrow-style-1 .prev-p1 img, .arrow-style-1 .slick-arrow img, .arrow-style-3 .slick-prev img, .arrow-style-3 .slick-next img, .arrow-style-3 .next-p1 img, .arrow-style-3 .prev-p1 img, .arrow-style-3 .slick-arrow img, .arrow-style-4 .slick-prev img, .arrow-style-4 .slick-next img, .arrow-style-4 .next-p1 img, .arrow-style-4 .prev-p1 img, .arrow-style-4 .slick-arrow img, .arrow-style-6 .slick-prev img, .arrow-style-6 .slick-next img, .arrow-style-6 .next-p1 img, .arrow-style-6 .prev-p1 img, .arrow-style-6 .slick-arrow img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .arrow-style-1 .slick-prev:hover, .arrow-style-1 .slick-next:hover, .arrow-style-1 .next-p1:hover, .arrow-style-1 .prev-p1:hover, .arrow-style-1 .slick-arrow:hover, .arrow-style-3 .slick-prev:hover, .arrow-style-3 .slick-next:hover, .arrow-style-3 .next-p1:hover, .arrow-style-3 .prev-p1:hover, .arrow-style-3 .slick-arrow:hover, .arrow-style-4 .slick-prev:hover, .arrow-style-4 .slick-next:hover, .arrow-style-4 .next-p1:hover, .arrow-style-4 .prev-p1:hover, .arrow-style-4 .slick-arrow:hover, .arrow-style-6 .slick-prev:hover, .arrow-style-6 .slick-next:hover, .arrow-style-6 .next-p1:hover, .arrow-style-6 .prev-p1:hover, .arrow-style-6 .slick-arrow:hover { border-color: #F47932; background: #F47932; } .arrow-style-1 .slick-prev:hover img, .arrow-style-1 .slick-next:hover img, .arrow-style-1 .next-p1:hover img, .arrow-style-1 .prev-p1:hover img, .arrow-style-1 .slick-arrow:hover img, .arrow-style-3 .slick-prev:hover img, .arrow-style-3 .slick-next:hover img, .arrow-style-3 .next-p1:hover img, .arrow-style-3 .prev-p1:hover img, .arrow-style-3 .slick-arrow:hover img, .arrow-style-4 .slick-prev:hover img, .arrow-style-4 .slick-next:hover img, .arrow-style-4 .next-p1:hover img, .arrow-style-4 .prev-p1:hover img, .arrow-style-4 .slick-arrow:hover img, .arrow-style-6 .slick-prev:hover img, .arrow-style-6 .slick-next:hover img, .arrow-style-6 .next-p1:hover img, .arrow-style-6 .prev-p1:hover img, .arrow-style-6 .slick-arrow:hover img { transform: scale(1.1); filter: invert(1); } .arrow-style-1 .slick-prev, .arrow-style-3 .slick-prev, .arrow-style-4 .slick-prev, .arrow-style-6 .slick-prev { margin-right: 20px; } .arrow-style-1 .slick-prev::before, .arrow-style-3 .slick-prev::before, .arrow-style-4 .slick-prev::before, .arrow-style-6 .slick-prev::before { left: -23px; right: auto; } .arrow-style-1 .slick-prev::after, .arrow-style-3 .slick-prev::after, .arrow-style-4 .slick-prev::after, .arrow-style-6 .slick-prev::after { left: auto; right: 0; } .arrow-style-2, .arrow-style-5 { top: 58%; transform: translateY(-58%); left: 0; } .arrow-style-2 .slick-arrow, .arrow-style-5 .slick-arrow { border: 0; background: transparent; position: absolute; z-index: 1; } .arrow-style-2 .slick-arrow::before, .arrow-style-5 .slick-arrow::before { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid #000; z-index: -1; } .arrow-style-2 .slick-arrow::after, .arrow-style-5 .slick-arrow::after { content: ""; position: absolute; background: #000; width: 26px; height: 2px; z-index: 1; } .arrow-style-2 .slick-arrow:hover::before, .arrow-style-5 .slick-arrow:hover::before { border-color: #F47932; background: #F47932; } .arrow-style-2 .slick-arrow:hover img, .arrow-style-5 .slick-arrow:hover img { filter: invert(1); } .arrow-style-2 .slick-prev, .arrow-style-5 .slick-prev { left: 0; } .arrow-style-2 .slick-prev::before, .arrow-style-5 .slick-prev::before { top: -10px; left: -18px; } .arrow-style-2 .slick-prev::after, .arrow-style-5 .slick-prev::after { top: 19px; right: 6px; } .arrow-style-2 .slick-next, .arrow-style-5 .slick-next { right: 0; } .arrow-style-2 .slick-next::before, .arrow-style-5 .slick-next::before { top: -10px; right: -18px; } .arrow-style-2 .slick-next::after, .arrow-style-5 .slick-next::after { top: 19px; left: 6px; } .arrow-style-3 .slick-arrow, .arrow-style-3 .slick-next, .arrow-style-3 .slick-prev { background: #ffffff; border-color: #ffffff; border-radius: 50% 50% 50% 50%; } .arrow-style-3 .slick-arrow:hover, .arrow-style-3 .slick-next:hover, .arrow-style-3 .slick-prev:hover { background: #F47932; border-color: #F47932; } .arrow-style-4 .slick-arrow, .arrow-style-4 .slick-next, .arrow-style-4 .slick-prev { background: transparent; border-color: #000; border-radius: 50%; } .arrow-style-4 .slick-arrow img, .arrow-style-4 .slick-next img, .arrow-style-4 .slick-prev img { display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .arrow-style-4 .slick-arrow:hover, .arrow-style-4 .slick-next:hover, .arrow-style-4 .slick-prev:hover { background: #000; border-color: #000; } .arrow-style-4 .slick-arrow:hover img, .arrow-style-4 .slick-next:hover img, .arrow-style-4 .slick-prev:hover img { filter: invert(1); } .arrow-style-5 .slick-arrow, .arrow-style-5 .slick-next, .arrow-style-5 .slick-prev { border: 2px solid #000; width: 80px; height: 80px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .arrow-style-5 .slick-arrow::before, .arrow-style-5 .slick-arrow::after, .arrow-style-5 .slick-next::before, .arrow-style-5 .slick-next::after, .arrow-style-5 .slick-prev::before, .arrow-style-5 .slick-prev::after { display: none; } .arrow-style-5 .slick-arrow:hover, .arrow-style-5 .slick-next:hover, .arrow-style-5 .slick-prev:hover { background: #FFBA05; } .arrow-style-5 .slick-arrow:hover img, .arrow-style-5 .slick-next:hover img, .arrow-style-5 .slick-prev:hover img { filter: invert(0); } .arrow-style-6 .slick-arrow, .arrow-style-6 .slick-next, .arrow-style-6 .slick-prev { background: transparent; border-color: #000; border-radius: 50%; } .arrow-style-6 .slick-arrow img, .arrow-style-6 .slick-next img, .arrow-style-6 .slick-prev img { display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .arrow-style-6 .slick-arrow:hover, .arrow-style-6 .slick-next:hover, .arrow-style-6 .slick-prev:hover { background: #F47932; border-color: #F47932; } .arrow-style-6 .slick-arrow:hover img, .arrow-style-6 .slick-next:hover img, .arrow-style-6 .slick-prev:hover img { filter: invert(1); } .feature-slider-wrap { position: relative; z-index: 1; } .feature-slider-wrap .feature-arrow-border { width: 100%; height: 2px; background: #000; position: absolute; z-index: -1; } .feature-slider-wrap .arrow-style-2 { position: absolute; bottom: -30px; right: 23.5%; } .feature-slider-wrap.border-arrow-2 .arrow-style-2 { width: max-content; right: 40%; } .number-wrapper { position: relative; z-index: 1; } .number-wrapper::before { content: ""; background: #000000; width: 518px; height: 2px; position: relative; left: 0; top: -6px; display: inline-block; margin-right: 35px; } .number-wrapper .number-pagination { color: #000000; font-size: 34px; font-weight: 600; font-family: "Fredoka", serif; display: inline-block; line-height: 1; } .number-wrapper .total-pagination { font-size: 34px; color: #000000; font-weight: 600; font-family: "Fredoka", serif; display: inline-block; line-height: 1; } .number-wrapper .divider-line { width: 2px; height: 17px; background: #000; display: inline-block; margin: 0 6px 0 4px; line-height: 1; transform: rotate(20deg) translateY(1px); } .faq-que-list .accordion-item:first-of-type > .accordion-header .accordion-button { border-top-left-radius: 15px; border-top-right-radius: 15px; } .faq-que-list .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed { border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } .faq-que-list .accordion-item { border: 0; background-color: transparent; margin-bottom: 30px; } .faq-que-list .accordion-item button:focus, .faq-que-list .accordion-item input:focus, .faq-que-list .accordion-item input:focus, .faq-que-list .accordion-item textarea, .faq-que-list .accordion-item textarea:focus { outline: 0; } .faq-que-list .accordion-item.active { border: 1.5px solid #000; border-radius: 15px; } .faq-que-list .accordion-item .accordion-button { border: 0; border-radius: 0; border-top-left-radius: 15px; border-top-right-radius: 15px; transition: unset; color: #000000; font-size: 26px; font-family: "Fredoka", serif; font-weight: 600; line-height: 1.875rem; box-shadow: none; background: transparent; padding: 0; padding: 34px 0 24px 20px; position: relative; box-shadow: 0; -webkit-transition: unset; -moz-transition: unset; -ms-transition: unset; -o-transition: unset; word-wrap: normal; display: inline-block; } .faq-que-list .accordion-item .accordion-button.collapsed { border: 0; border-radius: 15px; padding-bottom: 30px; background: #F4F4F4; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .faq-que-list .accordion-item .accordion-button { padding: 21px 20px; font-size: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { .faq-que-list .accordion-item .accordion-button { padding: 21px 20px; font-size: 18px; } } @media (max-width: 767px) { .faq-que-list .accordion-item .accordion-button { padding: 21px 10px; font-size: 18px; } } .faq-que-list .accordion-item .accordion-button:focus { box-shadow: none; outline: 0; } .faq-que-list .accordion-item .accordion-button::before { content: "\f63b"; position: absolute; font-family: "bootstrap-icons"; font-size: 20px; font-weight: 300; color: #000000; text-align: center; border-radius: 50%; width: 40px; height: 40px; line-height: 40px; background: #f98700; border-radius: 50%; right: 20px; top: 50%; transform: translateY(-50%); transition: 0.3s linear; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq-que-list .accordion-item .accordion-button::before { right: 10px; font-size: 16px; } } @media (max-width: 767px) { .faq-que-list .accordion-item .accordion-button::before { right: 5px; font-size: 16px; } } .faq-que-list .accordion-item .accordion-button::after { display: none; } .faq-que-list .accordion-item .collapsed { color: #000000; border: 0; } .faq-que-list .accordion-item .collapsed::before { content: "\f282"; color: #ffffff; transform: translateY(-50%); background-color: #000; } .faq-que-list .accordion-item .accordion-body { padding-top: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top: 1px solid rgba(255, 255, 255, 0.5); } @media only screen and (max-width: 991.98px) { .faq-que-list .accordion-item { font-size: 20px; } } .faq-style-2 .accordion-item, .faq-style-5 .accordion-item { border-radius: 55px; border: 1.5px solid rgba(0, 0, 0, 0.2); padding: 0 30px; } .faq-style-2 .accordion-item.active, .faq-style-5 .accordion-item.active { border: 1.5px solid #000; border-radius: 95px; } .faq-style-2 .accordion-item .accordion-button, .faq-style-5 .accordion-item .accordion-button { background: transparent; color: #000000; background: transparent; border: 0; } .faq-style-2 .accordion-item .accordion-button::before, .faq-style-5 .accordion-item .accordion-button::before { content: "\f63b"; color: #000000; background: #f98700; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; } .faq-style-2 .accordion-item .accordion-button.collapsed, .faq-style-5 .accordion-item .accordion-button.collapsed { border: 0; background: transparent; } .faq-style-2 .accordion-item .collapsed, .faq-style-5 .accordion-item .collapsed { border: 0; } .faq-style-2 .accordion-item .collapsed::before, .faq-style-5 .accordion-item .collapsed::before { content: "\f282"; color: #000000; background: #E0E0E0; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; transform: translateY(-50%) rotate(0deg); } .faq-style-2 .accordion-item .accordion-body, .faq-style-5 .accordion-item .accordion-body { background: transparent; border-top: 0; padding-top: 0; } .faq-style-2 .accordion-item .accordion-body p, .faq-style-5 .accordion-item .accordion-body p { color: #000000; } @media only screen and (max-width: 1200px) { .faq-style-2 .accordion-item, .faq-style-5 .accordion-item { border-radius: 30px; padding-left: 0; padding-right: 0; } .faq-style-2 .accordion-item.active, .faq-style-5 .accordion-item.active { border-radius: 30px; } .faq-style-2 .accordion-item .accordion-button, .faq-style-5 .accordion-item .accordion-button { font-size: 20px; } } @media only screen and (max-width: 767.98px) { .faq-style-2 .accordion-item .accordion-button, .faq-style-5 .accordion-item .accordion-button { font-size: 18px; } } .faq-style-3 .accordion-item { border-radius: 0; border-bottom: 1.5px solid #000; margin-bottom: 5px; } .faq-style-3 .accordion-item.active { border: 0; border-radius: 0; border-bottom: 1.5px solid #000; } .faq-style-3 .accordion-item .accordion-button { padding-left: 0; padding-right: 0; background: transparent; color: #000000; border: 0; } .faq-style-3 .accordion-item .accordion-button::before { content: "\f63b"; color: #000000; background: #f98700; border: 2px solid #000; width: 40px; height: 40px; line-height: 37px; border-radius: 50%; right: 0; } .faq-style-3 .accordion-item .accordion-button.collapsed { border: 0; background: transparent; } @media only screen and (max-width: 991.98px) { .faq-style-3 .accordion-item .accordion-button { font-size: 20px; } } .faq-style-3 .accordion-item .collapsed { border: 0; background: transparent; } .faq-style-3 .accordion-item .collapsed::before { content: "\f282"; color: #000000; background: #ffffff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; border: 2px solid #ffffff; transform: translateY(-50%) rotate(0deg); right: 0; } .faq-style-3 .accordion-item .accordion-body { background: transparent; border-top: 0; padding: 0; } .faq-style-3 .accordion-item .accordion-body p { color: #000000; } .faq-style-4 .accordion-item { border-radius: 0; border-bottom: 1.5px solid #E6E6E6; margin-bottom: 5px; } .faq-style-4 .accordion-item.active { border: 0; border-radius: 0; border-bottom: 1.5px solid #E6E6E6; } .faq-style-4 .accordion-item .accordion-button { font-size: 24px; font-family: "Satoshi-Medium"; font-weight: 500; padding-left: 0; padding-right: 0; background: transparent; color: #000000; border: 0; } .faq-style-4 .accordion-item .accordion-button::before { content: "\f63b"; color: #000000; background: transparent; width: 40px; height: 40px; line-height: 37px; border-radius: 50%; right: 0; } .faq-style-4 .accordion-item .accordion-button.collapsed { border: 0; background: transparent; } @media only screen and (max-width: 991.98px) { .faq-style-4 .accordion-item .accordion-button { font-size: 20px; } } .faq-style-4 .accordion-item .collapsed { border: 0; background: transparent; } .faq-style-4 .accordion-item .collapsed::before { content: "\f282"; color: #000000; background: transparent; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; transform: translateY(-50%) rotate(0deg); right: 0; } .faq-style-4 .accordion-item .accordion-body { background: transparent; border-top: 0; padding: 0; } .faq-style-4 .accordion-item .accordion-body p { color: #000000; } .faq-style-5 .accordion-item { border-radius: 25px; } .faq-style-5 .accordion-item.active { border-radius: 25px; } .faq-style-5 .accordion-item .accordion-body p { max-width: 74%; } @media only screen and (max-width: 1200px) { .faq-style-5 .accordion-item .accordion-body p { max-width: 100%; } } .feature-list-one { display: flex; align-items: center; margin-bottom: 40px; } .feature-list-one .icon { color: #ffffff; display: inline-block; background: #F47932; font-size: 20px; width: 25px; height: 25px; border-radius: 50%; line-height: 25px; text-align: center; display: inline-block; margin-right: 10px; } .feature-list-one .feature-title { color: #000000; font-size: 26px; font-weight: 500; font-family: "Fredoka", serif; margin-bottom: 0; line-height: 1; } @media only screen and (max-width: 1600px) { .feature-list-one .icon { margin-right: 5px; } } @media only screen and (max-width: 1200px) { .feature-list-one .feature-title { font-size: 20px; } } @media only screen and (max-width: 1200px) { .feature-list-one .feature-title { font-size: 18px; } } .feature-list-two { display: flex; align-items: center; margin-bottom: 40px; } .feature-list-two .icon { color: #ffffff; display: inline-block; background: #000; font-size: 20px; width: 25px; height: 25px; border-radius: 50%; line-height: 25px; text-align: center; display: inline-block; margin-right: 10px; } .feature-list-two .feature-title { color: #000000; font-size: 26px; font-weight: 500; font-family: "Fredoka", serif; margin-bottom: 0; line-height: 1; } @media only screen and (max-width: 1600px) { .feature-list-two .icon { margin-right: 5px; } } @media only screen and (max-width: 1200px) { .feature-list-two .feature-title { font-size: 20px; } } @media only screen and (max-width: 1200px) { .feature-list-two .feature-title { font-size: 18px; } } .feature-list-three { display: flex; align-items: center; padding: 20px 53px 20px 30px; border: 1.5px solid rgba(0, 0, 0, 0.1); border-radius: 50px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-list-three .icon { color: #000000; font-size: 26px; font-weight: 500; font-family: "Satoshi-Medium"; margin-right: 32px; } .feature-list-three .feature-title { color: #000000; font-size: 26px; font-weight: 600; font-family: "Fredoka", serif; } .feature-list-three:hover { background: #f98700; border-color: #f98700; } @media only screen and (max-width: 1200px) { .feature-list-three { padding: 10px; } .feature-list-three .feature-title { font-size: 18px; } .feature-list-three .icon { margin-right: 5px; font-size: 18px; } } .feature-list-four { display: flex; align-items: start; margin-bottom: 0px; } .feature-list-four .icon { color: #ffffff; background: #F47932; font-size: 20px; width: 25px; height: 25px; border-radius: 50%; line-height: 25px; text-align: center; display: inline-block; margin-right: 10px; margin-top: 10px; } .feature-list-four .feature-title { flex: 1; color: #000000; font-size: 26px; font-weight: 400; font-family: "Satoshi-Regular"; margin-bottom: 0; line-height: 38px; } .feature-list-four .feature-title b { font-size: 22px; font-family: "Satoshi-Bold"; } @media only screen and (max-width: 1600px) { .feature-list-four .icon { margin-right: 5px; } } @media only screen and (max-width: 1200px) { .feature-list-four .feature-title { font-size: 20px; } } @media only screen and (max-width: 1200px) { .feature-list-four .feature-title { font-size: 18px; } } .feature-list-five { display: flex; align-items: center; margin-bottom: 40px; } .feature-list-five .icon { color: #ffffff; display: inline-block; background: #F47932; font-size: 20px; width: 25px; height: 25px; border-radius: 50%; line-height: 25px; text-align: center; display: inline-block; margin-right: 10px; } .feature-list-five .feature-title { color: #000000; font-size: 26px; font-weight: 500; font-family: "Satoshi-Medium"; margin-bottom: 0; line-height: 1; } @media only screen and (max-width: 1600px) { .feature-list-five .icon { margin-right: 5px; } } @media only screen and (max-width: 1200px) { .feature-list-five .feature-title { font-size: 20px; } } @media only screen and (max-width: 1200px) { .feature-list-five .feature-title { font-size: 18px; } } .feature-bg-1 { margin-left: 85px; margin-right: 85px; } @media only screen and (max-width: 1900px) { .feature-bg-1 { margin-left: 0; margin-right: 0; } } .feature-bg-3 { background: #f98700; margin-left: 100px; margin-right: 100px; padding-left: 35px; padding-right: 35px; border-radius: 50px; } @media only screen and (max-width: 1900px) { .feature-bg-3 { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } .feature-wrap-1 { display: flex; padding: 45px 27px 25px 45px; border-radius: 300px; background-color: #FFAF83; border-color: #000; border-width: 0 0 0 7px; border-style: solid; margin-bottom: 45px; position: relative; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-1::before { position: absolute; content: ""; left: 0; top: 0; width: 130%; height: 100%; background: #FFAF83; z-index: -1; border-radius: 300px 0 0 300px; } .feature-wrap-1.fbg-2 { border-radius: 300px; background-color: #FFEF74; } .feature-wrap-1.fbg-2::before { background: #FFEF74; } .feature-wrap-1.fbg-3 { border-radius: 300px; background-color: #91E5FA; } .feature-wrap-1.fbg-3::before { background: #91E5FA; width: 100%; border-radius: 300px; } .feature-wrap-1 .icon { width: 75px; height: 75px; border-radius: 50%; text-align: center; line-height: 75px; margin-bottom: 26px; margin-right: 25px; background: #ffffff; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-1 .front-icon { display: inline-block; visibility: visible; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-1 .content { flex: 1; } .feature-wrap-1 .feature-title { font-size: 40px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 15px; line-height: 1; } .feature-wrap-1 .feature-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-1 .description { color: #000000; margin-bottom: 0; } @media only screen and (max-width: 1600px) { .feature-wrap-1 { padding-left: 15px; padding-right: 15px; } .feature-wrap-1 .feature-title { font-size: 24px; } } @media only screen and (max-width: 1200px) { .feature-wrap-1 { display: block; border-radius: 15px; } .feature-wrap-1::before { display: none; } .feature-wrap-1.fbg-2, .feature-wrap-1.fbg-3 { border-radius: 15px; } } @media only screen and (max-width: 767.98px) { .feature-wrap-1 { padding-bottom: 0px; } } .feature-wrap-2 { background: #ffffff; border-radius: 15px; padding: 25px 30px 30px 25px; margin-bottom: 45px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-2 .icon { width: 70px; height: 70px; border-radius: 50%; background: #F47932; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 16px; } .feature-wrap-2 .feature-title { font-size: 24px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 14px; } .feature-wrap-2 .feature-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-2 .description { font-size: 16px; line-height: 26px; margin-bottom: 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } @media only screen and (max-width: 1600px) { .feature-wrap-2 { padding-left: 15px; padding-right: 15px; } .feature-wrap-2 .feature-title { font-size: 24px; } } .feature-wrap-3 { padding: 59px 27px 15px 45px; margin-bottom: 45px; position: relative; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-3.border-wrap { position: relative; z-index: 1; } .feature-wrap-3.border-wrap::before { content: ""; position: absolute; left: -47px; top: 20%; background: rgba(0, 0, 0, 0.1); width: 1px; height: 255px; transform: rotate(16deg); } .feature-wrap-3.border-wrap::after { content: ""; position: absolute; right: -20px; top: 20%; background: rgba(0, 0, 0, 0.1); width: 1px; height: 255px; transform: rotate(16deg); } .feature-wrap-3 .icon { width: 75px; height: 75px; border-radius: 50%; text-align: center; line-height: 75px; margin-bottom: 42px; background: #ffffff; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-3 .front-icon { display: inline-block; visibility: visible; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-3 .feature-title { font-size: 40px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 19px; line-height: 1; } .feature-wrap-3 .feature-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-3 .description { color: #000000; margin-bottom: 0; } @media only screen and (max-width: 1600px) { .feature-wrap-3 { padding-left: 15px; padding-right: 15px; } .feature-wrap-3 .feature-title { font-size: 24px; } } .feature-wrap-4 { background: #ffffff; border-radius: 15px; padding: 25px 30px 30px 25px; border: 1.5px solid #000; margin-bottom: 45px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-4 .icon { width: 70px; height: 70px; border-radius: 50%; background: #F47932; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 16px; } .feature-wrap-4 .feature-title { font-size: 24px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 14px; } .feature-wrap-4 .feature-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .feature-wrap-4 .description { font-size: 16px; line-height: 26px; margin-bottom: 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } @media only screen and (max-width: 1600px) { .feature-wrap-4 { padding-left: 15px; padding-right: 15px; } .feature-wrap-4 .feature-title { font-size: 24px; } } .block-style-1 { text-align: center; } .block-style-1 .block-thumb { margin-bottom: 30px; position: relative; z-index: 1; overflow: hidden; border-radius: 200px 50px 50px 200px; } .block-style-1 .block-thumb .main-img { width: 100%; border-radius: 200px 50px 50px 200px; border: 10px solid #f98700; } .block-style-1 .shape-img { position: absolute; left: -12px; top: 50%; transform: translateY(-50%); z-index: 1; } .block-style-1 .title { font-size: 36px; font-weight: 600; font-family: "Fredoka", serif; } @media only screen and (max-width: 1200px) { .block-style-1 .title { font-size: 28px; } } @media only screen and (max-width: 767.98px) { .block-style-1 .title { font-size: 24px; } } .block-style-2 { text-align: center; } .block-style-2 .block-thumb { border-radius: 50px 200px 200px 50px; margin-bottom: 30px; position: relative; z-index: 1; overflow: hidden; } .block-style-2 .block-thumb .main-img { width: 100%; border-radius: 50px 200px 200px 50px; border: 10px solid #f98700; overflow: hidden; } .block-style-2 .block-thumb .shape-img { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); z-index: 1; } .block-style-2 .title { font-size: 36px; font-weight: 600; font-family: "Fredoka", serif; } @media only screen and (max-width: 1200px) { .block-style-2 .title { font-size: 28px; } } @media only screen and (max-width: 767.98px) { .block-style-2 .title { font-size: 24px; } } .widget-title { font-size: 26px; font-weight: 600; font-family: "Fredoka", serif; } .blog-sidebar, .service-widget { border-radius: 25px; } .blog-sidebar .widget-title, .service-widget .widget-title { margin-bottom: 26px; } .blog-sidebar .widget, .service-widget .widget { padding: 50px; margin-bottom: 50px; border-radius: 25px; background: #f4f4f4; } @media only screen and (max-width: 1600px) { .blog-sidebar .widget, .service-widget .widget { padding: 25px 15px; } } @media only screen and (max-width: 1200px) { .blog-sidebar, .service-widget { border-radius: 15px; } } .social-links a { color: #000000; font-size: 20px; border: 1px solid #000; margin-right: 10px; display: inline-block; width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 50%; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .social-links a:last-child { margin-right: 0; } .social-links a:hover { color: #ffffff; background: #f98700; border-color: #f98700; } .social-links2 a { color: #000000; font-size: 22px; border-style: solid; border-width: 1px; border-color: rgb(0, 0, 0); margin-right: 10px; display: inline-block; width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 50%; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .social-links2 a:last-child { margin-right: 0; } .social-links2 a:hover { border-color: #F47932; background: #F47932; } .service-category-widget li:last-child a, .category-widget li:last-child a { margin-bottom: 0; } .service-category-widget li a, .category-widget li a { color: #000000; font-size: 18px; font-weight: 500; line-height: 30px; font-family: "Satoshi-Medium"; background: #ffffff; padding: 14px 20px 14px 20px; border: 0.5px solid #000; border-radius: 55px; margin-bottom: 20px; display: block; position: relative; z-index: 1; } .service-category-widget li a:hover, .category-widget li a:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .blog-sidebar .category-widget li a { background: transparent; } .blog-sidebar .category-widget li a:hover { color: #000000; border-color: #000; background: #ffffff; } .widget-file-download { background: #f4f4f4; border-radius: 10px; padding: 20px 30px 20px 25px; } .widget-file-download .file-download { display: flex; align-items: center; position: relative; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .widget-file-download .file-download .icon { width: 60px; height: 60px; background: #F47932; border-radius: 50%; color: #ffffff; font-size: 30px; display: inline-flex; align-items: center; justify-content: center; } .widget-file-download .file-download .file-intro { flex: 1; margin-left: 20px; } .widget-file-download .file-download .file-intro p { color: #000000; font-size: 18px; font-weight: 500; line-height: 30px; font-family: "Satoshi-Medium"; margin-bottom: 0; } .widget-file-download .file-download .file-intro span { font-size: 14px; } @media only screen and (max-width: 767.98px) { .widget-file-download .file-download .file-intro p { font-size: 14px; } } .widget-file-download .file-download .download-link { font-size: 30px; } .widget-file-download .file-download .download-link:hover { color: #F47932; } @media only screen and (max-width: 767.98px) { .widget-file-download { padding-left: 10px; padding-right: 10px; } } .comment-form input, .comment-form textarea { border: 0; background: #F4F4F4; border-radius: 0; color: #000000; font-size: 18px; display: block; height: 60px; width: 100%; padding-left: 20px; margin-bottom: 40px; border-radius: 10px; } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: #000000; } .comment-form input::placeholder, .comment-form textarea::placeholder { color: #000000; font-size: 18px; } .comment-form input::-moz-placeholder, .comment-form textarea::-moz-placeholder { color: #000000; font-size: 18px; } .comment-form input::-webkit-placeholder, .comment-form textarea::-webkit-placeholder { color: #000000; font-size: 18px; } .comment-form input::-o-placeholder, .comment-form textarea::-o-placeholder { color: #000000; font-size: 18px; } .comment-form input::-ms-placeholder, .comment-form textarea::-ms-placeholder { color: #000000; font-size: 18px; } .comment-form textarea { height: 170px; resize: none; padding-top: 10px; } .comment-form button { color: #000; padding: 22px 40px 22px 40px; background: #f98700; text-transform: capitalize; border: 0; } .comment-form p { display: flex; align-items: center; } .comment-form p input { width: 20px; height: 20px; margin-bottom: 0; margin-right: 10px; } .page-navigation .page-item:first-child .page-link { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .page-navigation .page-item:last-child .page-link { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .page-navigation .page-link { display: inline-block; color: #000000; background: transparent; font-size: 22px; font-weight: 500; font-family: "Satoshi-Medium"; width: 40px; height: 40px; line-height: 40px; text-align: center; margin-right: 20px; padding: 0; border-radius: 5px; border: 1px solid #000000; } .page-navigation .page-link i { font-size: 20px; } .page-navigation .page-link:focus { z-index: 2; color: #000000; border-color: unset; outline: none; box-shadow: none; } .page-navigation .page-link:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .recent-post { display: flex; align-items: center; } .recent-post .post-thumb { width: 100px; height: 85px; display: inline-block; margin-right: 15px; margin-bottom: 0; background-size: cover; background-position: center; border-radius: 8px; background-repeat: no-repeat; } .recent-post h5 { font-size: 16px; font-family: "Fredoka", serif; font-weight: 500; line-height: 22px; } .recent-post h5 a { color: #000000; } .recent-post h5 a:hover { color: #F47932; } .recent-post span { color: #000000; font-size: 12px; font-weight: 400; font-family: "Satoshi-Regular"; } .recent-post span i { color: #000000; } @media (max-width: 1599.98px) { .recent-post h5 { font-size: 18px; } } .widget-search .search-form { position: relative; z-index: 1; } .widget-search .search-form input { color: #000000; font-size: 20px; height: 60px; width: 100%; line-height: 60px; padding-left: 22px; background: #ffffff; border-radius: 8px; border: 0; } .widget-search .search-form input::placeholder { font-size: 20px; color: #000000; } .widget-search .search-form input::-webkit-placeholder { font-size: 20px; color: #000000; } .widget-search .search-form input::-moz-placeholder { font-size: 20px; color: #000000; } .widget-search .search-form input::-o-placeholder { font-size: 20px; color: #000000; } .widget-search .search-form .widget-btn { color: #ffffff; background: transparent; border: 0; width: 54px; height: 50px; line-height: 50px; color: #ffffff; position: absolute; right: 5px; top: 5px; border-radius: 6px; z-index: 1; } .widget-search .search-form .widget-btn i { color: #000; font-size: 20px; } .tagcloud span { color: #000000; font-size: 22px; font-weight: 500; font-family: "Fredoka", serif; display: inline-block; margin-right: 10px; } .tagcloud a { color: #000000; font-size: 14px; line-height: 16px; font-weight: 500; font-family: "Fredoka", serif; border: 1px solid #000; display: inline-block; padding: 10px 15px; margin: 5px 5px; border-radius: 4px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; position: relative; z-index: 1; } .tagcloud a::before { content: ""; position: absolute; z-index: 1; background: #ffffff; width: 0px; height: 100%; left: 0; bottom: 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; z-index: -1; } .tagcloud a:hover { color: #ffffff; border-color: #F47932; } .tagcloud a:hover::before { width: 100%; background: #F47932; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .tagcloud a { padding: 16px 16px; margin: 5px 2px; } } @media (max-width: 767px) { .tagcloud a { padding: 16px 10px; margin: 5px 2px; } } .widget-contact { text-align: center; border: 0.5px solid #e3e3e3; border-radius: 25px; overflow: hidden; } .widget-contact .widget-img img { display: inline-block; border-radius: 25px 25px 0 0; } .widget-contact .content { padding: 25px 50px 33px 50px; } .widget-contact .call-btn { color: #000000; font-size: 22px; background: #F47932; border-radius: 50px; width: max-content; padding: 12px 20px; margin: 0 auto; } .widget-contact .call-btn a { color: #ffffff; } .widget-contact .call-btn span { color: #000000; font-size: 18px; display: inline-block; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; background: #ffffff; margin-right: 15px; } .widget-contact .contact-title { color: #000000; font-size: 32px; font-weight: 600; font-family: "Fredoka", serif; } @media only screen and (max-width: 1200px) { .widget-contact .contact-title { font-size: 22px; line-height: 40px; } } .widget-contact .contact-btn { color: #000; font-size: 16px; font-weight: 600; font-family: "Fredoka", serif; border-radius: 50px; background: #F47932; color: #000; padding: 15px 40px; width: 100%; display: inline-block; } .widget-contact .contact-btn:hover { color: #ffffff; background: #000; } @media only screen and (max-width: 1200px) { .widget-contact .content { padding-left: 15px; padding-right: 15px; } .widget-contact .call-btn { font-size: 16px; } } .cart-list-form { border: 1px solid rgba(7, 17, 6, 0.1); } .cart-list-form .table th { font-weight: 400; font-size: 18px; border: none; border-bottom: 1px solid rgba(7, 17, 6, 0.1); padding: 15px 30px; text-align: start; color: #000000; } .cart-list-form .table .product-thumbnails { padding-left: 20px; width: 100px; } .cart-list-form .table .product-thumbnails img { max-height: 100%; max-width: none; } .cart-list-form .table .product-img { display: block; max-width: 100px; max-height: 100px; overflow: hidden; } .cart-list-form .table tbody td { border: none; vertical-align: middle; text-align: center; padding: 30px 0; } @media only screen and (max-width: 991.98px) { .cart-list-form .table .product-thumbnails { padding-left: 10px; } } .cart-list-form .table-responsive { margin-bottom: 30px; } .cart-list-form .table-responsive::-webkit-scrollbar { width: 0.3em; height: 10px; } .cart-list-form .table-responsive::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); } .cart-list-form .table-responsive::-webkit-scrollbar-thumb { background-color: #f98700; } .cart-list-form .table .product-info { padding-left: 30px; text-align: left; } .cart-list-form .table .product-info ul.style-none { padding: 0; margin: 0; } .cart-list-form .table .product-info ul.style-none li { font-weight: 500; display: inline-block; font-size: 15px; color: #000000; padding-right: 15px; } .cart-list-form .table .product-info .product-name { font-weight: 500; letter-spacing: -0.5px; font-size: 20px; color: #000000; } @media only screen and (max-width: 991.98px) { .cart-list-form .table .product-info .product-name { font-size: 18px; } } .cart-list-form .table .product-info .serial { font-size: 15px; color: #000000; padding-bottom: 6px; } @media only screen and (max-width: 991.98px) { .cart-list-form .table .product-info { padding-left: 15px; } } .cart-list-form .table .quantity .product-value { font-weight: 500; font-size: 18px; color: #000000; max-width: 55px; background: 0 0; border: none; text-align: center; padding-left: 12px; } @media only screen and (max-width: 991.98px) { .cart-list-form .table .quantity .product-value { max-width: 20px; padding-left: 0; } } .cart-list-form .table .quantity .order-box { padding: 0; margin: 0; } .cart-list-form .table .quantity li { display: inline-block; line-height: 40px; max-height: 40px; } .cart-list-form .table .quantity li .btn { font-size: 24px; padding: 0; border: none; vertical-align: inherit; color: #000000; background: #EBF3FF; width: 36px; height: 36px; border-radius: 50%; } @media only screen and (max-width: 991.98px) { .cart-list-form .table .quantity li .btn { width: 25px; height: 25px; line-height: 25px; } } .cart-list-form .table .remove-product { color: #f98700; font-size: 22px; } .cart-list-form .table tbody tr { padding: 10px 0; border-bottom: 1px solid rgba(119, 124, 144, 0.2); } .cart-list-form .table .price, .cat__section .cart-footer .cart-total-table tr td { font-size: 18px; color: #000000; font-weight: 500; } .cart-footer .coupon-form { background: #FCF1EC; position: relative; z-index: 1; } .cart-footer .coupon-form input { width: 275px; border: none; background: #EBF3FF; font-size: 16px; color: #000000; padding-left: 14px; height: 40px; border-radius: 6px; } .cart-footer .coupon-form input::placeholder { font-size: 16px; color: #000000; } .cart-footer .coupon-form input::-moz-placeholder { font-size: 16px; color: #000000; } .cart-footer .coupon-form input::-o-placeholder { font-size: 16px; color: #000000; } .cart-footer .coupon-form input::-webkit-placeholder { font-size: 16px; color: #000000; } .cart-footer .coupon-form input::-ms-placeholder { font-size: 16px; color: #000000; } .cart-footer .coupon-form .coupon_btn { font-size: 16px; font-weight: 400; position: absolute; right: 0; top: 1px; border: 0; height: 40px; padding: 0; width: 130px; text-transform: capitalize; } .cart-footer .coupon-form .coupon_btn:hover { color: #000000; } .cart-footer .coupon-form .coupon_btn:hover::before { background: #f98700; } .cart-footer .update-section p { color: #000000; margin-bottom: 10px; cursor: pointer; } .cart-footer .update-cart-button { color: #ffffff; font-size: 16px; font-weight: 500; border: 0; background: #000000; width: max-content; height: 40px; display: inline-block; margin-top: -3px; } .cart-total-section { padding: 40px 30px; border-radius: 6px; background: #F4F4F4; } .cart-total-section .checkout-process { width: 100%; text-align: center; background: #000000; color: #ffffff; font-size: 16px; font-weight: 500; display: block; padding: 10px 25px; } .cart-total-section .checkout-process:hover { background: #F47932; } @media only screen and (max-width: 767.98px) { .cart-total-section { padding: 40px 15px; } } .cart-total-table tbody tr { padding-bottom: 25px; border-bottom: 1px solid rgba(119, 124, 144, 0.2); margin-bottom: 25px; } .cart-total-table tbody tr:last-child { border-bottom: 0; } .cart-total-table tbody th, .cart-total-table tbody td { color: #000000; font-size: 16px; font-weight: 500; padding: 10px 0px; } .checkout-form label { color: #000000; font-size: 16px; display: inline-block; margin-bottom: 10px; } .checkout-form .single-input-wrapper, .checkout-form textarea { width: 100%; border-radius: 4px; background: #f4f4f4; border: 0; color: #000000; font-size: 16px; font-weight: 400; width: 100%; height: 60px; padding-left: 20px; line-height: 60px; margin-bottom: 25px; border-radius: 6px; } .checkout-form .single-input-wrapper::placeholder, .checkout-form textarea::placeholder { color: #000000; font-size: 16px; font-weight: 400; } .checkout-form .single-input-wrapper::-ms-placeholder, .checkout-form textarea::-ms-placeholder { color: #000000; font-size: 16px; } .checkout-form .single-input-wrapper::-o-placeholder, .checkout-form textarea::-o-placeholder { color: #000000; font-size: 16px; } .checkout-form .single-input-wrapper::-moz-placeholder, .checkout-form textarea::-moz-placeholder { color: #000000; font-size: 16px; } .checkout-form .single-input-wrapper::-webkit-placeholder, .checkout-form textarea::-webkit-placeholder { color: #000000; font-size: 16px; } .checkout-form .ht-select-menu { width: 100%; border-radius: 6px; background: #f4f4f4; border: 0; color: #000000; font-size: 18px; font-weight: 400; width: 100%; height: 60px; padding-left: 20px; line-height: 60px; position: relative; z-index: 10; margin-bottom: 40px; } .checkout-form .nice-select { position: relative; z-index: 10; } .checkout-form .nice-select .option { color: #000000; } .checkout-form textarea { height: 200px; } .checkout-form .checkbox-list { list-style: none; padding: 0; } .payment-list { padding: 0; list-style: none; } .payment-list p { color: #000000; } .payment-list .credit-card-form h6 { font-size: 16px; font-weight: 600; font-family: "Satoshi-Regular"; } .payment-list .credit-card-form input { width: 100%; border: 1px solid rgba(119, 124, 144, 0.15); padding-left: 10px; display: block; margin-bottom: 15px; height: 40px; line-height: 40px; color: #000000; } .payment-list .credit-card-form input::placeholder { color: #000000; } .payment-list .credit-card-form input::-moz-placeholder { color: #000000; } .payment-list .credit-card-form input::-ms-placeholder { color: #000000; } .payment-list .credit-card-form input::-o-placeholder { color: #000000; } .payment-list .credit-card-form input::-webkit-placeholder { color: #000000; } .checkout__section { overflow: hidden; } .cart-info-title, .cart-total-title { font-size: 32px; font-weight: 600; font-family: "Satoshi-Regular"; margin-bottom: 30px; text-decoration: underline; } @media only screen and (max-width: 1200px) { .cart-info-title, .cart-total-title { font-size: 24px; } } .shopping-cart { color: #000000; font-size: 20px; width: 60px; height: 60px; display: inline-block; border: 1.5px solid rgb(0, 0, 0); border-radius: 50%; text-align: center; line-height: 57px; position: relative; } .shopping-cart span { position: absolute; background: #f98700; border-radius: 50%; width: 17px; height: 17px; padding: 0; line-height: 17px; top: -9px; right: -9px; left: auto; } .shopping-cart:hover { background: #f98700; color: #ffffff; } @media only screen and (max-width: 767.98px) { .shopping-cart { font-size: 18px; width: 50px; height: 50px; line-height: 47px; } } .categories-accordion .accordion-item { background-color: transparent; border: 0; } .categories-accordion .accordion-item:first-of-type .accordion-button { border-top-left-radius: 0; border-top-right-radius: 0; } .categories-accordion .accordion-button { border-radius: 0; position: relative; display: flex; align-items: center; width: 100%; padding: 0; font-size: 16px; color: #000000; font-weight: 400; border: 0; background-color: rgba(7, 17, 6, 0.03); padding: 5px 8px; border-radius: 0px; } .categories-accordion .accordion-button:focus { z-index: 3; border-color: none; outline: 0; box-shadow: none; } .categories-accordion .accordion-button::after { content: "\f078"; font-size: 16px; font-family: "Font Awesome 5 Pro"; background: none; transition: transform 0.2s ease-in-out; height: unset; width: unset; } .categories-accordion .accordion-button:not(.collapsed)::after { content: "\f078"; font-size: 16px; font-family: "Font Awesome 5 Pro"; background: none; transform: rotate(180deg); height: unset; width: unset; } .categories-accordion .accordion-button:not(.collapsed) { color: #000000; } .categories-accordion .accordion-item .accordion-collapse { list-style: none; border: 0; border-width: 0; background-color: rgba(7, 17, 6, 0.05); padding-left: 0; } .categories-accordion .accordion-item .accordion-collapse li { padding: 13px 0 0 22px; } .categories-accordion .accordion-item .accordion-collapse li:last-child { padding-bottom: 20px; } .categories-accordion .accordion-item .accordion-collapse li a { color: #000000; font-size: 15px; line-height: 1; } .highlight_content li:first-child { margin-bottom: 8px; } .highlight_content li a { color: #000000; font-size: 15px; font-weight: 300; } .price-range { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .price-range .filter { border: 0; background: #f98700; color: #fff; font-size: 16px; line-height: 1; text-transform: capitalize; display: inline-block; padding: 10px 13px; } .price-range label { color: #000000; cursor: pointer; font-size: 16px; font-weight: 500; display: inline-block; margin-right: 15px; margin-left: 15px; } .price-range #amount { background: 0; color: #000000 !important; display: inline-block; } .ui-widget.ui-widget-content { position: relative; border: 0; } .ui-widget-content { border: 1px solid #ffffff; background: #f98700; color: #ffffff; border: 0; border-radius: 4px; } .ui-slider-horizontal { height: 6px; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 15px; height: 15px; cursor: default; -ms-touch-action: none; touch-action: none; border-radius: 50%; border: 3px solid #000000; top: -4px; background: #FFE149; } .ui-widget-header { border: 0; background: #e6e6e6; color: #ffffff; font-weight: bold; position: absolute; height: 100%; } .ui-state-active, .ui-state-hover:hover, .ui-state-active:focus { border-color: red; background-color: #ffffff; } .widget-review .form-check .form-check-input { background: none; border: 1px solid #e6e6e6; border-radius: 0; width: 20px; height: 20px; background: rgba(0, 0, 0, 0.1); margin-right: 8px; } .widget-review .form-check .form-check-input:focus { border-color: transparent; outline: 0; box-shadow: none; } .widget-review .form-check input[type=checkbox] { color: #fbb807; } .widget-review .form-check input { color: #fbb807; } .widget-review .products_rating a { color: #fbb807; } .widget-review .products_rating span { color: #000000; } .color-picker a { width: 30px; height: 30px; display: inline-block; border-radius: 50%; margin-right: 13px; margin-bottom: 10px; } .product-wrapper { padding: 15px 15px 15px 15px; overflow: hidden; position: relative; z-index: 1; background: #f3f3f3; box-shadow: 4px 5px 45px 0px rgba(7, 17, 6, 0.03); } .product-wrapper .product-tag { color: #f98700; font-size: 20px; line-height: 1; font-weight: 500; font-family: "Satoshi-Medium"; display: inline-block; margin-bottom: 13px; } .product-wrapper .product-img { position: relative; z-index: 1; overflow: hidden; margin-bottom: 29px; } .product-wrapper .product-img img { display: block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .product-wrapper .product-img .add-to-cart { position: absolute; left: 15%; right: 15%; text-align: center; margin: 0 auto; bottom: -65px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } @media only screen and (max-width: 767.98px) { .product-wrapper .product-img .add-to-cart { width: 100%; } } .product-wrapper .add-to-cart.ht-btn { padding: 22px 10px; justify-content: center; } .product-wrapper .product-title { color: #000; font-size: 32px; font-weight: 500; font-family: "Fredoka", serif; margin-bottom: 8px; } .product-wrapper .product-title:hover { color: #F47932; } .product-wrapper .price { color: #000000; font-size: 24px; font-weight: 500; font-family: "Fredoka", serif; } .product-wrapper .price .old-price { margin-right: 12px; } .product-wrapper .price .new-price { color: rgba(0, 0, 0, 0.5); } .product-wrapper .content-info { display: flex; justify-content: space-between; } .product-wrapper .content { text-align: start; } .product-wrapper:hover .product-icon { right: 16px; } .product-wrapper:hover .product-img img { transform: scale(1.1); } .product-wrapper:hover .product-img .add-to-cart { bottom: 16px; } @media only screen and (max-width: 767.98px) { .product-wrapper .product-title { font-size: 26px; } } .product-icon { position: absolute; top: 20px; right: -50px; z-index: 1; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .product-icon a { color: #000000; font-size: 15px; display: block; line-height: 32px; background: #f98700; width: 32px; height: 32px; border-radius: 50%; text-align: center; margin-bottom: 5px; } .product-icon a:nth-child(2) { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .product-icon a:nth-child(3) { -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .product-icon a:nth-child(4) { -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -ms-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } .product-icon a:hover { color: #ffffff; background: #000000; } .prstyle-1 { text-align: center; background: #FFEF74; border-radius: 175px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .prstyle-1 .product-title { position: relative; z-index: 2; margin-bottom: 58px; } .prstyle-1 .add-to-cart { position: relative; width: 47px; height: 47px; border-radius: 50%; font-size: 25px; line-height: 47px; } .prstyle-1 .pr-price { display: block; font-size: 24px; font-weight: 500; font-family: "Fredoka", serif; margin-bottom: 5px; } .prstyle-1 .add-to-cart { width: 47px; height: 47px; border-radius: 50%; display: inline-block; background: #ffffff; margin-bottom: 22px; } .prstyle-1 .bottom-wrapper { margin-bottom: 15px; position: relative; z-index: 1; } .prstyle-1 .bg-shape { position: absolute; z-index: -1; left: 0; right: 0; margin: 0 auto; bottom: 0; opacity: 0.3; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .prstyle-1 .product-icon { top: 70px; } .prstyle-1.bg-2 { background: #FFAF83; } .prstyle-1.bg-3 { background: #91E5FA; } .prstyle-1.bg-4 { background: #C2E498; } .prstyle-1:hover .add-to-cart { background: #FFEF74; } .prstyle-1:hover .bg-shape { opacity: 1; } @media only screen and (max-width: 1200px) { .prstyle-1 .product-title { font-size: 22px; } } .prstyle-2 { background: transparent; border: 1.5px solid rgba(0, 0, 0, 0.1); border-radius: 50px 0 50px 50px; text-align: center; padding: 20px 57px 40px 57px; } .prstyle-2 .tag { font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; } .prstyle-2 .product-title { margin-bottom: 25px; } .prstyle-2 .btn-wrapper { border: 1.5px solid #000; border-radius: 32.5px; display: flex; justify-content: space-between; align-items: center; padding: 8px; } .prstyle-2 .pr-price { font-size: 20px; font-weight: 600; font-family: "Fredoka", serif; padding-left: 22px; } .prstyle-2 .add-to-cart { width: 50px; height: 50px; border-radius: 50%; display: inline-block; background: #F47932; font-size: 24px; line-height: 50px; color: #ffffff; } .prstyle-2 .add-to-cart:hover { background: #000; } .prstyle-2 .product-icon a { color: #ffffff; background: #F47932; } .prstyle-2 .product-icon a:hover { background: #000; } @media only screen and (max-width: 1200px) { .prstyle-2 .product-title { font-size: 22px; } } @media only screen and (max-width: 991.98px) { .prstyle-2 { padding-left: 15px; padding-right: 15px; } } .prstyle-3 { background: #ffffff; border: 1.5px solid #ffffff; border-radius: 30px; text-align: center; padding: 20px 0 40px 0; margin-bottom: 45px; } .prstyle-3 .tag { font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; } .prstyle-3 .product-title { margin-bottom: 25px; } .prstyle-3 .btn-wrapper { border: 1.5px solid #000; border-radius: 32.5px; display: flex; justify-content: space-between; align-items: center; padding: 8px; } .prstyle-3 .pr-price { font-size: 20px; font-weight: 600; font-family: "Fredoka", serif; padding-left: 22px; } .prstyle-3 .add-to-cart { width: 50px; height: 50px; border-radius: 50%; display: inline-block; background: #F47932; font-size: 24px; line-height: 50px; color: #ffffff; } .prstyle-3 .add-to-cart:hover { background: #000; } .prstyle-3 .product-icon a { color: #ffffff; background: #F47932; } .prstyle-3 .product-icon a:hover { background: #000; } .prstyle-3 .content { text-align: center; padding-left: 58px; padding-right: 58px; } @media only screen and (max-width: 1200px) { .prstyle-3 .content { padding-left: 10px; padding-right: 10px; } .prstyle-3 .product-title { font-size: 22px; } .prstyle-3 .promotion-time { margin-top: 15px; } } .prstyle-4 { text-align: center; background: #ffffff; border-radius: 175px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .prstyle-4 .product-img { margin-bottom: 60px; margin-top: 10px; } .prstyle-4 .product-img img { margin: 0 auto; } .prstyle-4 .tag { font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; } .prstyle-4 .product-title { font-size: 32px; font-family: "Fredoka", serif; position: relative; z-index: 2; margin-bottom: 10px; } .prstyle-4 .product-title:hover { color: #F47932; } .prstyle-4 .add-to-cart { position: relative; font-size: 25px; line-height: 47px; display: inline-block; margin-bottom: 12px; } .prstyle-4 .pr-price { color: #000000; display: block; font-size: 24px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 65px; } .prstyle-4 .bottom-wrapper { position: relative; z-index: 1; } .prstyle-4 .bg-shape { position: absolute; z-index: -1; left: 0; right: 0; margin: 0 auto; opacity: 0; bottom: -100%; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .prstyle-4 .product-icon { top: 70px; } .prstyle-4:hover .bg-shape { opacity: 1; bottom: -16px; } @media only screen and (max-width: 1200px) { .prstyle-4 .product-title { font-size: 22px; } } .prstyle-5 { background: rgba(255, 255, 255, 0.5); border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 30px; padding: 20px 0 40px 0; margin-bottom: 45px; } .prstyle-5 .sale-badge { font-size: 14px; font-weight: 500; line-height: 30px; font-family: "Fredoka", serif; border: 1px solid #000; border-radius: 15px; display: inline-block; text-align: center; min-width: 75px; position: absolute; left: 20px; top: 0; z-index: 2; } .prstyle-5 .product-img { margin-bottom: 47px; } .prstyle-5 .product-title { font-size: 24px; font-weight: 500; font-family: "Fredoka", serif; margin-bottom: 13px; max-width: 75%; } .prstyle-5 .pr-price, .prstyle-5 .old-price { font-size: 20px; font-weight: 600; font-family: "Satoshi-Bold"; } .prstyle-5 .old-price { color: rgba(0, 0, 0, 0.2); font-family: "Satoshi-Medium"; margin-left: 20px; } .prstyle-5 .product-icon { top: unset; right: 30px; bottom: 30px; } .prstyle-5 .product-icon a { color: #ffffff; background: #ffffff; display: inline-flex; justify-content: center; align-items: center; width: 70px; height: 70px; } .prstyle-5 .content { padding-left: 40px; margin-bottom: 5px; } .prstyle-5:hover { background: #ffffff; border-color: #000; } .prstyle-5:hover .sale-badge { border-color: #FFBA05; background: #FFBA05; } .prstyle-5:hover .product-icon a { background: #FFBA05; } @media only screen and (max-width: 1200px) { .prstyle-5 .content { padding-left: 10px; } .prstyle-5 .old-price, .prstyle-5 .pr-price { font-size: 16px; } .prstyle-5 .old-price { margin-left: 10px; } .prstyle-5 .product-title { font-size: 22px; } .prstyle-5 .promotion-time { margin-top: 15px; } .prstyle-5 .product-icon { right: 10px; } } .product-offer-cart { border-radius: 30px; margin-bottom: 45px; } .product-offer-cart .product-img { margin: 25px 50px 25px 25px; } .product-offer-cart .product-img img { border-radius: 15px; } .product-offer-cart .product-icon a { background: #F47932; } .product-offer-cart .product-icon a:hover { background: #000; } .product-offer-cart .weekly-offer { display: inline-block; color: #ffffff; background: #F47932; font-size: 22px; font-family: "Fredoka", serif; font-weight: 500; line-height: 65px; padding: 0 19px; border-radius: 20px 20px 0 0; position: absolute; z-index: 2; bottom: 0; margin: 0 auto; width: max-content; left: 0; right: 0; } .product-offer-cart .tag { font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; display: inline-block; } .product-offer-cart .product-title { margin-bottom: 12px; } .product-offer-cart .pr-price, .product-offer-cart .old-price { font-size: 24px; font-weight: 400; font-family: "Fredoka", serif; } .product-offer-cart .pr-price { font-weight: 500; } .product-offer-cart .old-price { color: rgba(0, 0, 0, 0.5); margin-right: 10px; } .product-offer-cart .offer-tag { color: #ffffff; font-size: 14px; font-weight: 500; font-family: "Fredoka", serif; background: #F47932; border-radius: 30px; line-height: 30px; padding-left: 19px; padding-right: 19px; margin-left: 30px; } .product-offer-cart .promotion-time { padding: 0; margin: 0; margin-top: 67px; display: flex; flex-wrap: wrap; list-style-type: none; gap: 10px; } .product-offer-cart .promotion-time .time { background: rgba(255, 255, 255, 0.5); width: 90px; height: 90px; border-radius: 50%; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; } .product-offer-cart .promotion-time .number { color: #000000; font-size: 30px; font-weight: 500; font-family: "Fredoka", serif; margin-bottom: 2px; line-height: 1; } .product-offer-cart .promotion-time .days { font-size: 16px; font-weight: 400; font-family: "Fredoka", serif; margin-bottom: 0; line-height: 1; } .product-offer-cart .add-to-cart { border: 1.5px solid #000; border-radius: 50px; color: #000000; font-size: 18px; font-weight: 500; font-family: "Fredoka", serif; padding: 13px 40px; display: inline-block; margin-top: 40px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .product-offer-cart .add-to-cart:hover { color: #ffffff; background: #F47932; border-color: #F47932; } @media only screen and (max-width: 1200px) { .product-offer-cart .product-img { margin: 0; margin-right: 10px; } .product-offer-cart .product-title { font-size: 22px; } .product-offer-cart .pr-price, .product-offer-cart .old-price { font-size: 16px; } .product-offer-cart .promotion-time { margin-top: 15px; } .product-offer-cart .promotion-time .time { width: 55px; height: 55px; } .product-offer-cart .promotion-time .number { font-size: 16px; } .product-offer-cart .add-to-cart { margin-top: 15px; } .product-offer-cart .offer-tag { font-size: 10px; line-height: 30px; padding-left: 5px; padding-right: 5px; margin-left: 3px; } } .offer-cart-2 { background: #FFBA05; } .offer-cart-2 .weekly-offer { background: #000; } .offer-cart-2 .offer-tag { color: #000000; background: #ffffff; } .offer-cart-2 .product-icon a { background: #FFBA05; } .offer-cart-2 .promotion-time .titme { background: rgba(255, 255, 255, 0.5); } .offer-cart-2 .add-to-cart { background: #ffffff; } .product-slider-2 { width: 125vw; position: relative; left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 991.98px) { .product-slider-2 { width: 100%; padding-left: 15px; padding-right: 15px; } } .cart-btn { overflow: hidden; color: #ffffff; font-size: 16px; line-height: 1; background: #000000; width: 100%; display: block; text-align: center; padding: 18px 0; border-radius: 0; position: relative; z-index: 1; } .cart-btn::before { -webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: -200%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: -1; background: #F47932; } .cart-btn:hover { color: #ffffff; } .cart-btn:hover::before { top: -40%; } .shop-sidebar .widget-title { margin-bottom: 15px; } .sort-item { color: #000000; font-size: 16px; font-weight: 600; font-family: "Satoshi-Regular"; } .sort-item .sort-btn { line-height: 1; background: #E4F0F0; padding: 12px 21px; margin-left: 15px; border: 0; } .sort-item .sort-btn i { margin-left: 16px; } .sort-item .sort-btn::after { display: none; } .sort-item .sort-btn:hover { color: #ffffff; background: #f98700; } .product-item-slider .product-item { text-align: center; border: 1px solid rgba(0, 0, 0, 0.1); } .product-item-slider .product-item img { display: inline-block; padding: 10px; padding-left: 0; } @media (max-width: 991.98px) { .product-item-slider .product-item img { width: 100%; padding: 0; } } .product-thumb-slider .product-item { border-right: 1px solid rgba(0, 0, 0, 0.1); text-align: center; } .product-thumb-slider .product-item img { object-fit: cover; display: inline-block; padding: 10px; padding-left: 0; width: 100px; height: 100px; } .cart-plus-minus { position: relative; display: inline-block; } .cart-plus-minus input { color: #000000; background: rgba(7, 17, 6, 0.03); border: 0; height: 50px; width: 130px; font-size: 25px; line-height: 1; text-align: center; margin-top: 1px; border-radius: 0; } .cart-plus-minus .qtybutton { background: rgba(0, 0, 0, 0.3); width: 35px; height: 35px; line-height: 30px; position: absolute; border-radius: 50%; font-size: 25px; color: #fff; left: 7px; top: 18%; z-index: 1; cursor: pointer; } .cart-plus-minus .inc { left: auto; right: 7px; line-height: 35px; } .product-details .product-title { color: #000000; font-size: 40px; font-weight: 600; font-family: "Fredoka", serif; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .product-details .product-title { font-size: 28px; } } @media (max-width: 991.98px) { .product-details .product-title { font-size: 24px; } } .product-details .price-list .old-price { font-size: 20px; color: #000000; margin-right: 10px; } .product-details .price-list .new-price { font-size: 22px; color: #f98700; font-family: "Fredoka", serif; } .product-details .add-to-cart { overflow: hidden; color: #ffffff; font-size: 16px; line-height: 20px; font-family: "Fredoka", serif; font-weight: 500; background: #F47932; padding: 14px 40px; border-radius: 4px; position: relative; z-index: 1; } .product-details .add-to-cart::before { -webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: -200%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: -1; background: #000000; } .product-details .add-to-cart:hover { color: #ffffff; } .product-details .add-to-cart:hover::before { top: -40%; } @media (max-width: 767px) { .product-details .add-to-cart { text-align: center; width: 100%; padding: 16px 23px; } } .product-details .cart-btn { width: unset; padding: 16px 133px; line-height: 20px; display: inline-block; border-radius: 4px; } @media (max-width: 767px) { .product-details .cart-btn { width: 100%; padding: 16px 23px; } } .product-rating a { color: #f7c600; font-size: 18px; } .color-mode { display: flex; align-items: center; } .color-mode p { color: #000000; margin-bottom: 0; } .color-mode .color-cus { background: #ffffff; width: 35px; height: 35px; display: inline-block; border-radius: 50%; margin: 0 7px; } .product-tab { border: 0; background: 0; border-radius: 0; justify-content: center; background: rgba(0, 0, 0, 0.03); padding: 2px 0; } .product-tab .nav-link { border: 0; border-radius: 0; color: #000000; font-size: 20px; font-family: "Satoshi-Medium"; font-weight: 500; line-height: 30px; display: inline-block; padding: 15px 0; margin: 0 30px; } .product-tab .nav-link.active, .product-tab .nav-link:hover { color: #F47932; background-color: transparent; border-bottom: 2px solid #F47932; } .cart-menu-right { opacity: 0; visibility: hidden; transition: all 0.5s ease-in-out; } .cart-menu-right.cart-info { right: 0; opacity: 1; visibility: visible; display: block; transition: all 0.5s ease-in-out; } .cart-menu-right .close-icon a { color: #222222; padding-left: 10px; position: absolute; top: 36px; border: 1px solid #f98700; padding-left: 0; width: 30px; height: 30px; text-align: center; line-height: 30px; left: 30px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .cart-menu-right .close-icon a i { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .cart-menu-right .close-icon a:hover { color: #f98700; } .cart-menu-right .close-icon a:hover i { transform: rotate(180deg); } .cart-style-1 { padding: 100px 30px 30px 20px; position: fixed; z-index: 1200; width: 450px; height: 100%; left: auto; right: -450px; top: 0; background: #ffffff; box-shadow: 0 1px 21px 0 rgba(43, 43, 43, 0.08); transition: all 0.5s ease-in-out; } .cart-style-1 .dropdown-cart-products { overflow-y: auto; } .cart-style-1 .product { display: flex; align-items: flex-start; padding: 10px 20px 25px 10px; position: relative; border-bottom: 1px solid #ededed; margin-bottom: 15px; } .cart-style-1 .product__cart-details { margin-bottom: 0; } .cart-style-1 .product__cart-details .product-title { color: #000000; font-weight: 400; font-family: "Satoshi-Regular"; margin-bottom: 10px; } .cart-style-1 .product__cart-details .product-title a:hover { color: #f98700; } .cart-style-1 .product .cart-product-info { color: #000000; } .cart-style-1 .product figure { margin-bottom: 0; } .cart-style-1 .product .product-img { display: block; width: 132px; height: auto; } .cart-style-1 .product .remove-btn { position: absolute; z-index: 1; right: 0; top: 50%; display: flex; align-items: center; transform: translateY(-100%); } .cart-style-1 .product .remove-btn i { color: #000000; font-size: 14px; line-height: 1; } .cart-style-1 .cart-total { display: flex; align-items: flex-end; color: #000000; text-transform: uppercase; } .cart-style-1 .cart-total .cart-total-price { margin-left: auto; } .cart-style-1 .cart-action .btn { background: #f98700; border-radius: 0; padding: 6px 20px; border: 0; } .cart-style-1 .cart-action .btn-outline-primary-2 { background: transparent; border: 1px solid #f98700; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; padding: 6px 30px 6px 20px; margin-left: 10px; } .cart-style-1 .cart-action .btn-outline-primary-2 i { transform: translateX(10px); line-height: 1; } .cart-style-1 .cart-action .btn-outline-primary-2:hover { color: #ffffff; background: #f98700; } @media only screen and (max-width: 767.98px) { .cart-style-1 { width: 315px; } .cart-style-1 .product .product-img { width: 88px; } .cart-style-1 .product .product-img img { width: 100%; } } .social-links-two a { color: #000000; font-size: 20px; display: inline-block; border: 1px solid #000; margin-right: 10px; width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .social-links-two a:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .product-category-wrap { text-align: center; display: inline-block; border-radius: 50%; position: relative; z-index: 1; } .product-category-wrap .category-thumb { display: block; position: relative; z-index: 1; } .product-category-wrap .category-thumb::before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(11, 10, 10, 0.25); border-radius: 50%; left: 0; top: 0; z-index: 1; } .product-category-wrap .category-thumb img { width: 100%; } .product-category-wrap .category-tag { color: #ffffff; font-size: 36px; font-weight: 500; font-family: "Fredoka", serif; text-transform: uppercase; } .product-category-wrap .content { position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center; top: 50%; transform: translateY(-50%); z-index: 2; } .product-category-wrap .category-btn { color: #ffffff; font-size: 15px; text-transform: uppercase; border: 1.5px solid #ffffff; border-radius: 5px; line-height: 45px; padding-left: 32px; padding-right: 32px; transform: scale(0); -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; visibility: hidden; display: none; } .product-category-wrap .category-btn:hover { border-color: #f98700; background: #f98700; } .product-category-wrap:hover .category-btn { display: inline-block; visibility: visible; transform: scale(1); } .offer-bg-section { background: #FFFBF4; position: relative; z-index: 1; } .offer-bg-section::before { content: ""; display: block; width: 97%; height: 94%; position: absolute; z-index: 2; left: 27px; top: 20px; right: 20px; bottom: 20px; border: 1px solid rgb(0, 0, 0); } @media only screen and (max-width: 1600px) { .offer-bg-section::before { display: none; } } .bg-product-section { background: #F5F5F5; } .theme-banner-one { padding-top: 123px; padding-bottom: 100px; padding-left: 85px; padding-right: 85px; position: relative; z-index: 1; } .theme-banner-one .main-title { color: #000000; font-size: 108px; font-weight: 600; line-height: 1; margin-bottom: 68px; } .theme-banner-one .img-holder { position: relative; z-index: 1; } .theme-banner-one .img-holder .title-shape { position: absolute; right: 1px; bottom: -25px; z-index: -1; } .theme-banner-one .hero-description { color: #000000; font-size: 28px; line-height: 45px; margin-bottom: 88px; } .theme-banner-one .bstyle { color: #ffffff; padding: 29px 60px 26px 62px; background: #000; } .theme-banner-one .bstyle::before { background: #f98700; } .theme-banner-one .bstyle:hover { color: #000; } .theme-banner-one .bstyle-2 { color: #ffffff; font-size: 20px; padding: 12px 12px 12px 40px; display: inline-flex; align-items: center; background: #000; position: relative; z-index: 1; } .theme-banner-one .bstyle-2::before { display: none; } .theme-banner-one .bstyle-2 .btn-icon { color: #ffffff; width: 50px; height: 50px; color: #000; font-size: 35px; line-height: 44px; border-radius: 50%; background: #ffffff; display: inline-block; position: relative; text-align: center; } .theme-banner-one .bstyle-2 .btn-icon i { color: #ffffff; } .theme-banner-one .bstyle-2 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-banner-one .bstyle-2:hover { color: #000000; background: #f98700; border-color: #f98700; } .theme-banner-one .bstyle-2:hover img { transform: rotate(-45deg); } .theme-banner-one .main-img { position: relative; z-index: 1; } .theme-banner-one .hero-img { display: inline-block; position: relative; } .theme-banner-one .sticker-shape { display: inline-block; position: absolute; left: -6%; bottom: 52px; z-index: 2; } .theme-banner-one .sticker-shape .main-img-shape { position: relative; animation: rotation infinite linear 20s; } .theme-banner-one .sticker-shape .main-img-shape-2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } .theme-banner-one ul.slick-dots { display: none !important; } @media only screen and (max-width: 1900px) { .theme-banner-one { padding-left: 0; padding-right: 0; padding-top: 150px; padding-bottom: 100px; } .theme-banner-one .main-title { font-size: 65px; } .theme-banner-one .main-img { width: 100%; margin-left: 0; } } @media only screen and (max-width: 1200px) { .theme-banner-one .hero-description { font-size: 22px; max-width: 100%; } } @media only screen and (max-width: 767.98px) { .theme-banner-one .main-title { font-size: 45px; } } .theme-banner-two { background: #EAEAFF; padding-left: 100px; position: relative; } .theme-banner-two .main-title { color: #000000; font-size: 111px; line-height: 1; margin-bottom: 30px; } .theme-banner-two p { color: #000000; font-size: 28px; line-height: 45px; margin-bottom: 50px; max-width: 99%; } .theme-banner-two .sub-title { color: #ffffff; font-size: 16px; font-family: "Satoshi-Medium"; font-weight: 500; line-height: 35px; margin-bottom: 24px; background: #F47932; display: inline-block; padding-left: 25px; padding-right: 45px; border-radius: 50px; } .theme-banner-two .sub-title img { margin-right: 15px; } .theme-banner-two .user-content-wrap-1 { background: #ffffff; border-radius: 100px 0 100px 100px; padding: 20px 57px; position: absolute; bottom: 169px; left: 16px; z-index: 2; } .theme-banner-two .user-title { color: #000000; font-size: 24px; font-family: "Satoshi-Medium"; font-weight: 500; } .theme-banner-two .sticker-shape { position: absolute; right: 90px; bottom: 320px; animation: float-bob-y infinite linear 5s; } .theme-banner-two .bs-style { font-size: 20px; font-weight: 600; padding-top: 28px; padding-bottom: 26px; } .theme-banner-two .bs-style::before { background: #ffffff; } .theme-banner-two .bs-style:hover { color: #000000; } .theme-banner-two .bstyle-2 { color: #000000; font-size: 20px; font-weight: 600; text-transform: uppercase; border: 2px solid #000; padding-left: 40px; padding-right: 40px; padding-top: 27px; padding-bottom: 25px; display: inline-flex; align-items: center; background: #ffffff; position: relative; z-index: 1; } .theme-banner-two .bstyle-2::before { display: none; } .theme-banner-two .bstyle-2 .btn-icon { margin-left: 20px; } .theme-banner-two .bstyle-2 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-banner-two .bstyle-2:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .theme-banner-two .bstyle-2:hover img { filter: invert(1); } .theme-banner-two .hero-img { padding-top: 8px; padding-bottom: 15px; } .theme-banner-two .sticker-shape-2 { position: absolute; left: -26%; top: 80px; } .theme-banner-two .hero-bg-shape { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; } @media only screen and (max-width: 1600px) { .theme-banner-two { padding-left: 15px; } .theme-banner-two .main-title { font-size: 75px; } .theme-banner-two p { font-size: 22px; } } @media only screen and (max-width: 1200px) { .theme-banner-two { padding-bottom: 55px; } .theme-banner-two .main-title { font-size: 65px; } .theme-banner-two p { font-size: 22px; } } @media only screen and (max-width: 991.98px) { .theme-banner-two .main-title { font-size: 45px; line-height: 1.3; } .theme-banner-two p { font-size: 18px; line-height: 34px; } } @media only screen and (max-width: 767.98px) { .theme-banner-two { padding-left: 0; padding-right: 0; } .theme-banner-two .main-title { font-size: 35px; margin-bottom: 40px; } .theme-banner-two p { font-size: 20px; line-height: 34px; max-width: 100%; } .theme-banner-two .bstyle-2 { display: none; } .theme-banner-two .sub-title { padding-left: 15px; padding-right: 15px; } } .theme-banner-three { margin-top: 90px; margin-left: 20px; margin-right: 20px; position: relative; display: block; z-index: 2; } .theme-banner-three .theme-banner-wrapper { padding-top: 187px; padding-bottom: 130px; padding-left: 80px; border-radius: 40px; position: relative; z-index: 1; } .theme-banner-three .theme-banner-wrapper::before { content: ""; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.52) 40.26%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 100%); position: absolute; left: 0; top: 0; width: 76.3%; height: 100%; z-index: -1; border-radius: 40px 0 0 40px; } .theme-banner-three .theme-banner-wrapper::after { content: ""; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.52) 40.26%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 100%); position: absolute; left: 0; top: 0; width: 76.3%; height: 100%; z-index: -1; border-radius: 40px 0 0 40px; } .theme-banner-three .main-title { color: #ffffff; font-size: 110px; font-family: "Fredoka", serif; font-weight: 600; line-height: 1; margin-bottom: 28px; } .theme-banner-three p { color: #ffffff; font-size: 28px; line-height: 45px; font-family: "Satoshi-Regular"; margin-bottom: 73px; max-width: 79%; } .theme-banner-three .bstyle { color: #000000; background: #ffffff; border-radius: 50px; padding: 25px 50px 25px 50px; } .theme-banner-three .bstyle::before { background: #F47932; } .theme-banner-three .bstyle:hover { color: #ffffff; background: #F47932; } .theme-banner-three .bstyle-2 { color: #000000; background: #ffffff; border-radius: 50px; padding: 25px 40px 25px 40px; } .theme-banner-three .bstyle-2::before { background: #F47932; } .theme-banner-three .bstyle-2 .btn-icon { margin-left: 20px; } .theme-banner-three .bstyle-2 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-banner-three .bstyle-2:hover { color: #ffffff; background: #F47932; } .theme-banner-three .bstyle-2:hover img { filter: invert(1); } @media only screen and (max-width: 1800px) { .theme-banner-three .main-title { font-size: 75px; } } @media only screen and (max-width: 1600px) { .theme-banner-three .theme-banner-wrapper { padding-left: 0; } .theme-banner-three .main-title { font-size: 75px; } .theme-banner-three p { font-size: 22px; } } @media only screen and (max-width: 991.98px) { .theme-banner-three .main-title { font-size: 55px; } } @media only screen and (max-width: 767.98px) { .theme-banner-three { margin-left: 0; margin-right: 0; } .theme-banner-three .main-title { font-size: 45px; } .theme-banner-three .bstyle { padding: 25px 30px 25px 30px; } .theme-banner-three p { max-width: 100%; } .theme-banner-three .theme-banner-wrapper { padding-bottom: 100px; } } .theme-banner-four { padding-left: 100px; padding-right: 100px; padding-top: 16%; padding-bottom: 108px; position: relative; display: block; z-index: 2; background-size: cover; } .theme-banner-four .bottom-animal { left: 50%; bottom: -4px; transform: translateX(-50%); } .theme-banner-four .hero-content { padding-right: 67px; } .theme-banner-four .main-title { color: #fff; font-size: 75px; line-height: 1; font-family: "Fredoka", serif; margin-bottom: 30px; } .theme-banner-four .main-title .title-shape { position: relative; display: inline-block; transform: translateY(-36px); } .theme-banner-four p { color: #fff; font-size: 28px; line-height: 45px; font-family: "Satoshi-Regular"; max-width: 87%; margin-bottom: 73px; } .theme-banner-four .bstyle { color: #000000; text-transform: uppercase; background: #f98700; border-radius: 40px; padding-top: 28px; padding-bottom: 25px; } .theme-banner-four .bstyle::before { background: #ffffff; } .theme-banner-four .bstyle:hover { color: #000; } .theme-banner-four .hero-img-1, .theme-banner-four .hero-img-2, .theme-banner-four .hero-img-3 { margin-bottom: 30px; } .theme-banner-four .hero-img-1 img, .theme-banner-four .hero-img-2 img, .theme-banner-four .hero-img-3 img { display: inline-block; max-width: 100%; border-radius: 200px; } .theme-banner-four .hero-img { padding-left: 90px; padding-right: 50px; } .theme-banner-four .hero-video { display: inline-block; position: relative; z-index: 1; } .theme-banner-four .hero-video .bg-shape { display: inline-block; max-width: 100%; animation: rotation infinite linear 55s; border-radius: 50%; } .theme-banner-four .hero-video .popup-video { color: #f98700; font-size: 80px; position: absolute; background: transparent; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: unset; } .theme-banner-four .hero-video .popup-video:hover { color: #F47932; } .theme-banner-four .bstyle { background: #000; color: #ffffff; } .theme-banner-four .bstyle::before { background: #f98700; } .theme-banner-four .bstyle:hover { background: #f98700; } .theme-banner-four .bstyle-2 { font-size: 20px; display: inline-flex; align-items: center; background: transparent; border: 1.5px solid #000; padding: 24px 43px 25px 38px; border-radius: 50px; position: relative; z-index: 1; } .theme-banner-four .bstyle-2::before { background: #f98700; } .theme-banner-four .bstyle-2 .btn-icon { margin-left: 20px; } .theme-banner-four .bstyle-2 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-banner-four .bstyle-2:hover { color: #000; background: #f98700; border-color: #f98700; } @media only screen and (max-width: 1600px) { .theme-banner-four { padding-left: 15px; padding-right: 0; } .theme-banner-four .hero-img { padding-left: 0; padding-right: 0; } .theme-banner-four .hero-content { padding-right: 0; } .theme-banner-four .main-title { font-size: 75px; } .theme-banner-four p { font-size: 22px; line-height: 38px; } } @media only screen and (max-width: 1200px) { .theme-banner-four { padding-top: 100px; padding-left: 0; padding-bottom: 100px; } .theme-banner-four .main-title { font-size: 55px; } .theme-banner-four p { font-size: 22px; } } @media only screen and (max-width: 991.98px) { .theme-banner-four .main-title { font-size: 55px; } .theme-banner-four p { font-size: 18px; } } @media only screen and (max-width: 767.98px) { .theme-banner-four .main-title { font-size: 45px; margin-bottom: 40px; } .theme-banner-four p { font-size: 20px; line-height: 34px; max-width: 100%; } } .theme-banner-five { background: #FFE4DD; padding-top: 180px; padding-left: 80px; margin: 20px; position: relative; z-index: 1; } .theme-banner-five .main-title { color: #000000; font-size: 110px; font-family: "Fredoka", serif; font-weight: 600; line-height: 1; margin-bottom: 36px; } .theme-banner-five p { color: #000000; font-size: 28px; line-height: 45px; margin-bottom: 55px; max-width: 99%; } .theme-banner-five .card-shape { position: absolute; right: 0; bottom: 0; z-index: -1; } .theme-banner-five .card-shape-2 { position: absolute; left: 0; top: 0; z-index: -1; } .theme-banner-five .bstyle { font-size: 20px; color: #000000; background: #FFBA05; border: 2px solid #000; border-radius: 50px; padding-top: 25px; padding-bottom: 25px; } .theme-banner-five .bstyle::before { background: #F47932; } .theme-banner-five .bstyle:hover { color: #ffffff; border-color: #F47932; } .theme-banner-five .bstyle-2 { color: #000; font-size: 20px; background: #ffffff; border: 2px solid #000; border-radius: 50px; padding: 25px 40px 25px 40px; } .theme-banner-five .bstyle-2::before { background: #F47932; } .theme-banner-five .bstyle-2 img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .theme-banner-five .bstyle-2 .btn-icon { margin-left: 18px; } .theme-banner-five .bstyle-2:hover { color: #ffffff; border-color: #F47932; } .theme-banner-five .bstyle-2:hover img { filter: invert(1); } .theme-banner-five .number { font-size: 36px; font-weight: 500; font-family: "Fredoka", serif; margin-bottom: 0; } .theme-banner-five .counter-title { font-size: 22px; font-weight: 400; font-family: "Satoshi-Regular"; } @media only screen and (max-width: 1800px) { .theme-banner-five .main-img { width: 100%; } } @media only screen and (max-width: 1600px) { .theme-banner-five { padding-left: 15px; padding-right: 15px; } .theme-banner-five .main-title { font-size: 75px; } .theme-banner-five p { font-size: 22px; } } @media only screen and (max-width: 1200px) { .theme-banner-five { margin-left: 10px; margin-right: 10px; } .theme-banner-five .main-title { font-size: 65px; } .theme-banner-five p { font-size: 22px; } } @media only screen and (max-width: 991.98px) { .theme-banner-five { padding-top: 140px; } .theme-banner-five .main-title { font-size: 65px; line-height: 1.1; } .theme-banner-five p { font-size: 18px; line-height: 34px; } } @media only screen and (max-width: 767.98px) { .theme-banner-five { padding-left: 0; padding-right: 0; } .theme-banner-five .main-title { font-size: 45px; margin-bottom: 40px; } .theme-banner-five p { font-size: 20px; line-height: 34px; max-width: 100%; } } .user-list, .feedback-user-list { padding: 0; margin: 0; display: flex; align-items: center; list-style: none; padding-bottom: 25px; border-radius: 70px; width: max-content; } .user-list img, .feedback-user-list img { border-radius: 50%; border: 4px solid #ffffff; } .user-list li, .feedback-user-list li { margin-left: -18px; position: relative; z-index: 1; } .user-list li:first-child, .feedback-user-list li:first-child { margin-left: 0; } .user-list .number, .feedback-user-list .number { border-radius: 50%; background: #000; font-size: 20px; color: #ffffff; width: 65px; height: 65px; display: inline-flex; align-items: center; justify-content: center; border: 4px solid #ffffff; } /*title-one*/ .title-one .sub-title { color: #000000; font-size: 18px; font-weight: 500; font-family: "Fredoka", serif; text-transform: uppercase; margin-bottom: 12px; } .title-one .title { font-size: 82px; line-height: 1.04; font-family: "Fredoka", serif; font-weight: 600; margin-bottom: 24px; } .title-one p { font-size: 22px; line-height: 38px; } .title-one .img-holder { display: inline-block; position: relative; z-index: 1; } .title-one .img-holder .title-shape { position: absolute; right: 0; top: 94%; z-index: -1; } @media only screen and (max-width: 1600px) { .title-one .title { font-size: 55px; } .title-one p { font-size: 18px; line-height: 34px; } .title-one .title-shape { display: none; } } @media only screen and (max-width: 1200px) { .title-one .title { font-size: 45px; } .title-one p { font-size: 18px; line-height: 34px; } } @media only screen and (max-width: 991.98px) { .title-one .title { font-size: 32px; } } /*title-two*/ .title-two .sub-title { color: #F47932; font-size: 18px; font-weight: 500; font-family: "Fredoka", serif; text-transform: uppercase; margin-bottom: 12px; } .title-two .title { font-size: 46px; line-height: 1.14; font-family: "Fredoka", serif; font-weight: 600; margin-bottom: 20px; } .title-two p { font-size: 22px; line-height: 38px; } @media only screen and (max-width: 1600px) { .title-two .title { font-size: 46px; } .title-two p { font-size: 18px; line-height: 34px; } } @media only screen and (max-width: 1200px) { .title-two .title { font-size: 45px; } .title-two p { font-size: 18px; line-height: 34px; } } @media only screen and (max-width: 991.98px) { .title-two .title { font-size: 32px; } } /*title-two*/ .title-three .sub-title { color: #000000; font-size: 18px; font-weight: 500; font-family: "Fredoka", serif; text-transform: uppercase; margin-bottom: 12px; } .title-three .title { color: #000000; font-size: 82px; line-height: 1.14; font-family: "Fredoka", serif; font-weight: 600; margin-bottom: 20px; } .title-three p { color: #000000; font-size: 22px; line-height: 38px; } @media only screen and (max-width: 1600px) { .title-three .title { font-size: 55px; } .title-three p { font-size: 18px; line-height: 34px; } } @media only screen and (max-width: 1200px) { .title-three .title { font-size: 45px; } .title-three p { font-size: 18px; line-height: 34px; } } @media only screen and (max-width: 991.98px) { .title-three .title { font-size: 32px; } } .cta-title { font-size: 82px; font-weight: 600; font-family: "Fredoka", serif; line-height: 1.1; } @media only screen and (max-width: 1600px) { .cta-title { font-size: 55px; } } @media only screen and (max-width: 991.98px) { .cta-title { font-size: 32px; } } .semi-title { font-size: 60px; font-weight: 600; font-family: "Fredoka", serif; } @media only screen and (max-width: 1600px) { .semi-title { font-size: 36px; } } @media only screen and (max-width: 1200px) { .semi-title { font-size: 28px; } } .semi-title-2 { font-size: 40px; font-weight: 500; font-family: "Fredoka", serif; } @media only screen and (max-width: 1200px) { .semi-title-2 { font-size: 32px; } } @media only screen and (max-width: 767.98px) { .semi-title-2 { font-size: 24px; } } .img-wrapper-one .main-img { position: relative; z-index: 2; } .img-wrapper-one .float-content-1 { text-align: center; position: absolute; left: -17px; top: -20px; z-index: 3; background: #f98700; border-radius: 30px; border: 20px solid #ffffff; padding: 22px 35px 32px 35px; } .img-wrapper-one .float-content-1 .number { color: #000000; font-size: 70px; font-weight: 500; font-family: "Fredoka", serif; line-height: 1; margin-bottom: 5px; } .img-wrapper-one .float-content-1 .text-title { color: #000000; font-size: 18px; font-family: "Fredoka", serif; font-weight: 400; margin-bottom: 0; line-height: 1; } @media only screen and (max-width: 1600px) { .img-wrapper-one .shape-2 { display: none; } } @media only screen and (max-width: 767.98px) { .img-wrapper-one .float-content-1 { display: none; } } .img-wrapper-two { position: relative; z-index: 1; } .img-wrapper-two .main-img { border-radius: 30px; position: relative; z-index: 2; } .img-wrapper-two .img-shape-1 { position: absolute; left: -52px; bottom: 40px; z-index: -1; border-radius: 27px; } .float-content-2, .float-content-5 { position: absolute; right: 20%; top: 60%; z-index: 2; } .float-content-2 .call-box, .float-content-5 .call-box { left: 55px; top: 42%; z-index: 1; } .call-box .icon { background: #F47932; width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; } .call-box .call-title { font-size: 16px; font-weight: 400; font-family: "Satoshi-Regular"; margin-bottom: 0; } .call-box .call-number { font-size: 24px; font-weight: 700; font-family: "Satoshi-Bold"; margin-bottom: 0; } .img-wrapper-three { position: relative; z-index: 1; } .img-wrapper-three .img-shape-1 { position: absolute; bottom: 80px; right: 24%; } .img-wrapper-three .img-shape-2 { position: absolute; top: 0; right: -70px; } .img-wrapper-four { position: relative; z-index: 1; } .img-wrapper-four .main-img-1 img { border-radius: 30px; border: 15px solid #ffffff; max-width: 100%; } .img-wrapper-four .main-img-2 { position: absolute; z-index: 2; bottom: -39px; } .img-wrapper-four .main-img-2 img { border-radius: 30px; border: 15px solid #ffffff; max-width: 100%; } @media only screen and (max-width: 1600px) { .img-wrapper-four .main-img-2 { display: none; } } .float-content-3 { display: flex; align-items: center; position: absolute; left: 0; top: 85 px; z-index: 3; background: #ffffff; border-radius: 30px; box-shadow: 0px 50px 100px 0px rgba(0, 0, 0, 0.2); padding: 30px 38px 40px 44px; } .float-content-3 .content { flex: 1; } .float-content-3 .icon { color: #F47932; font-size: 60px; margin-right: 24px; } .float-content-3 .number { color: #000000; font-size: 70px; font-weight: 500; font-family: "Fredoka", serif; line-height: 1; margin-bottom: 3px; } .float-content-3 .text-title { color: #000000; font-size: 18px; font-family: "Fredoka", serif; font-weight: 400; margin-bottom: 0; line-height: 1; } .img-wrapper-five { position: relative; z-index: 1; } .img-wrapper-five .main-img-2 { position: absolute; left: 0; top: 38%; z-index: 2; } .img-wrapper-five .main-img-3 { position: absolute; right: -58px; top: -20px; z-index: 2; animation: jumpAni infinite linear 7s; } .img-wrapper-six { position: relative; z-index: 1; } .img-wrapper-six .main-img-1 { position: relative; z-index: 1; } .img-wrapper-six .main-img-1 img { border-radius: 241.5px; } .img-wrapper-six .main-img-2 { position: absolute; z-index: 2; right: 80px; bottom: 0; } .img-wrapper-six .main-img-2 img { border-radius: 136px; border: 15px solid #ffffff; } .img-wrapper-six .float-content-4 { top: 67px; right: 15px; } .float-content-4 { display: flex; align-items: center; border-radius: 75px; background: #ffffff; padding-right: 58px; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06); } .float-content-4 .float-media { margin-right: 15px; margin-left: 35px; margin-top: 30px; margin-bottom: 30px; } .float-content-4 .float-media img { display: inline-block; border-radius: 50%; } .float-content-4 .float-title { font-size: 22px; line-height: 32px; font-family: "Satoshi-Bold"; margin-bottom: 0; } .img-wrapper-seven { position: relative; z-index: 1; } .img-wrapper-seven .main-img-1 { position: relative; z-index: 1; } .img-wrapper-seven .main-img-1 img { border-radius: 229px; } .img-wrapper-seven .main-img-2 { position: absolute; z-index: 2; left: 13px; bottom: 0; } .img-wrapper-seven .main-img-2 img { border-radius: 229px; border: 15px solid #ffffff; } .img-wrapper-seven .main-img-3 { position: absolute; z-index: 2; top: 31px; left: -26px; animation: jumpAni infinite linear 7s; } .img-wrapper-eight { position: relative; z-index: 1; } .img-wrapper-eight .main-img { border-radius: 50px; border: 15px solid #000; position: relative; z-index: 2; } .img-wrapper-eight .img-shape-1 { position: absolute; left: -52px; bottom: 40px; z-index: -1; border-radius: 27px; } .float-content-5 { right: 26%; } .float-content-5 .call-box .call-number { font-size: 20px; } .float-content-5 .call-box .icon { background: #000; } .text-wrapper-one { background: #ffffff; border-radius: 50px; padding: 80px 60px 85px 89px; } @media only screen and (max-width: 1200px) { .text-wrapper-one { padding: 35px 25px; } } .video-wrap-1 { width: 223px; height: 223px; border-radius: 50%; position: relative; z-index: 1; margin-right: -125px; top: -22px; } .video-wrap-1 .popup-video { color: #ffffff; font-size: 55px; width: 100%; height: 100%; background: #f98700; display: inline-flex; justify-content: center; align-items: center; background: transparent; animation: unset; } @media only screen and (max-width: 1200px) { .video-wrap-1 { width: 200px; height: 166px; } } @media only screen and (max-width: 991.98px) { .video-wrap-1 { width: 223px; height: 223px; } } @media only screen and (max-width: 767.98px) { .video-wrap-1 { margin-right: 0; top: 0; } } .counter-wrap-1 { background: #F4F4F4; border-radius: 10px; padding: 29px 35px 0 35px; text-align: center; justify-content: space-between; margin-bottom: 20px; } .counter-wrap-1 .number { color: #000000; font-size: 40px; font-weight: 900; font-family: "Satoshi-Black"; line-height: 1; margin-bottom: 30px; } .counter-wrap-1 .counter-title { color: #000000; font-size: 26px; font-family: "Satoshi-Medium"; font-weight: 500; margin-bottom: 30px; } @media only screen and (max-width: 767.98px) { .counter-wrap-1 { padding-bottom: 10px; } } .counter-wrap-2 { display: flex; flex-direction: column; justify-content: end; background: #F47932; border-radius: 110px; padding: 45px 68px 21px 160px; width: 460px; display: inline-block; } .counter-wrap-2 .number { color: #ffffff; font-size: 82px; font-weight: 400; font-family: "Satoshi-Bold"; margin-bottom: 10px; line-height: 1; flex: 1; } .counter-wrap-2 .counter-title { color: #ffffff; font-size: 24px; line-height: 42px; font-family: "Satoshi-Medium"; font-weight: 500; } @media only screen and (max-width: 1200px) { .counter-wrap-2 { padding-right: 0; } .counter-wrap-2 .number { font-size: 40px; } } .counter-wrap-3 .number { color: #000000; font-size: 50px; font-weight: 500; font-family: "Fredoka", serif; line-height: 1; display: inline-block; } .counter-wrap-3 .counter-title { color: #000000; font-size: 18px; line-height: 1; font-family: "Satoshi-Regular"; font-weight: 400; } @media only screen and (max-width: 1200px) { .counter-wrap-3 { padding: 20px 15px; } .counter-wrap-3 .number { font-size: 40px; } } @media only screen and (max-width: 767.98px) { .counter-wrap-3 .counter-title { margin-left: 0; } } .counter-wrap-4 { margin-bottom: 45px; } .counter-wrap-4 .number { color: #000000; font-size: 100px; font-weight: 500; font-family: "Fredoka", serif; line-height: 1; display: inline-block; } .counter-wrap-4 .counter-title { color: #000000; font-size: 22px; line-height: 1; font-family: "Satoshi-Regular"; font-weight: 400; } @media only screen and (max-width: 1200px) { .counter-wrap-4 .number { font-size: 40px; } } @media only screen and (max-width: 767.98px) { .counter-wrap-4 { text-align: center; } } .author-quote { text-align: center; background: #2F2E45; padding: 51px 45px 74px 45px; border-radius: 30px; } .author-quote .icon { background: #f98700; width: 70px; height: 70px; border-radius: 50%; display: inline-block; text-align: center; line-height: 70px; margin-bottom: 37px; } .author-quote .icon img { display: inline-block; } .author-quote .quote-text { color: #ffffff; font-size: 34px; line-height: 1.6; font-family: "Satoshi-Regular"; margin-bottom: 57px; } .author-quote .name { color: #ffffff; font-size: 20px; font-family: "Satoshi-Regular"; font-weight: 500; } .author-quote .name span { color: rgba(255, 255, 255, 0.6); } @media only screen and (max-width: 1600px) { .author-quote { padding-left: 15px; padding-right: 15px; } .author-quote .quote-text { font-size: 30px; } } @media only screen and (max-width: 767.98px) { .author-quote .quote-text { font-size: 22px; line-height: 30px; } } .service-tag-list a { color: #000000; font-size: 20px; font-weight: 500; font-family: "Satoshi-Regular"; display: inline-block; border-radius: 50px; background: #ffffff; padding: 8px 40px; margin: 3px 1px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-tag-list a:hover { color: #ffffff; background: #F47932; } .brand-wrap-1 { max-width: 86vw; margin: 0 auto; } .brand-wrap-1 .brand-item { text-align: center; } .brand-wrap-1 .brand-item a { display: inline-block; } .brand-wrap-1 .brand-item img { display: inline-block; } @media only screen and (max-width: 1200px) { .brand-wrap-1 { padding-left: 0; text-align: center; } } .icon-box img { margin-bottom: 20px; } .icon-box h4 { font-size: 24px; margin-bottom: 15px; font-weight: 600; } .icon-box .icon { color: #f98700; font-size: 20px; display: inline-block; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 50px; background: rgba(255, 214, 78, 0.1); -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .icon-box:hover .icon { color: #ffffff; background: #f98700; } .skill-wrapper-box { padding-left: 80px; padding-right: 315px; height: 100%; padding-top: 100px; padding-bottom: 50px; } @media (max-width: 1800px) { .skill-wrapper-box { padding-right: 50px; padding-top: 42px; } } @media (max-width: 991px) { .skill-wrapper-box { padding-right: 15px; padding-left: 15px; padding-top: 60px; } } .skill-wrapper { position: relative; z-index: 1; } .skill-wrapper .skill-title { font-size: 16px; font-weight: 500; color: #000000; font-family: "Satoshi-Medium"; } .skill-wrapper .progress { height: 9px; background: rgba(0, 0, 0, 0.06); border-radius: 10px; overflow: visible; position: relative; z-index: 1; } .skill-wrapper .progress .progress-bar { height: 9px; background: #F47932; width: 72%; border-radius: 10px; overflow: visible; } .skill-wrapper .progress span { color: #000000; font-size: 20px; font-weight: 500; font-family: "Fredoka", serif; position: absolute; right: 13%; top: -30px; } .skill-wrapper.sk-2 .progress .progress-bar { width: 55%; } .skill-wrapper.sk-2 .skill-title span { right: 15%; } .skill-wrapper.sk-3 .progress .progress-bar { width: 95%; } .skill-wrapper.sk-3 .skill-title span { right: 8%; } .progressbar-content { text-align: center; display: inline-block; } .progressbar-content .chart, .progressbar-content .chart2 { display: inline-block; text-align: center; position: relative; z-index: 1; } .progressbar-content .chart span, .progressbar-content .chart2 span { color: #000000; font-size: 60px; font-family: "Fredoka", serif; font-weight: 500; position: absolute; left: 0; right: 0; margin: 0 auto; top: 50%; transform: translateY(-77%); } .progressbar-content .progress-title { font-size: 28px; font-family: "Satoshi-Medium"; font-weight: 500; margin-top: 5px; } @media only screen and (max-width: 1200px) { .progressbar-content .chart span { font-size: 48px; } .progressbar-content .progress-title { font-size: 22px; } } .ht-marquee-wrapper { overflow: hidden; white-space: nowrap; position: relative; display: flex; align-items: center; } .ht-marquee-wrapper:hover .marquee-slide { animation-play-state: paused; } .marquee-slide { display: inline-block; animation: 35s marqueslide infinite linear; padding: 14px 0; display: flex; align-items: center; } .marquee-slide .marquee-text { color: transparent; font-size: 200px; font-weight: 600; line-height: 1; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1); position: relative; } .marquee-slide .marquee-text::before { content: attr(data-text); position: absolute; width: 0; height: 100%; color: #000000; -webkit-text-stroke: 0px transparent; overflow: hidden; transition: width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0.01; } .marquee-slide .marquee-text:hover::before { width: 100%; } @media only screen and (max-width: 1600px) { .marquee-slide .marquee-text { font-size: 120px; } } .website-timer { padding: 0; margin: 0 auto; list-style: none; max-width: 450px; display: flex; justify-content: center; justify-content: space-between; } .working-process-section { border-radius: 40px; margin-left: 20px; margin-right: 20px; } .working-process-section .shape-1 { position: absolute; top: 60px; left: 170px; } .working-process-section .shape-2 { position: absolute; right: 88px; top: 105px; } .process-wrap-1 { margin-bottom: 45px; text-align: center; } .process-wrap-1 .icon { background: #F47932; width: 90px; height: 90px; line-height: 90px; text-align: center; border-radius: 50%; margin: 0 auto; margin-bottom: 35px; } .process-wrap-1 .process-title { color: #ffffff; font-size: 40px; font-family: "Fredoka", serif; font-weight: 600; } .process-wrap-1 .description { color: #ffffff; } @media only screen and (max-width: 1600px) { .process-wrap-1 .process-title { font-size: 24px; } } .intagram-post-wrap { display: inline-block; } .intagram-post-wrap a { display: inline-block; position: relative; z-index: 1; cursor: pointer; } .intagram-post-wrap a::before { content: ""; position: absolute; background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; border-radius: 50%; left: 0; top: 0; opacity: 0; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .intagram-post-wrap img { width: 100%; border-radius: 50%; display: block; } .intagram-post-wrap:hover a::before { opacity: 1; } .service-wrap-1 span{font-size: 16px} .service-wrap-1 { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; border: 1.5px solid rgba(0, 0, 0, 0.15); border-radius: 15px; margin-bottom: 40px; position: relative; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-1 .service-title { font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 0; } .service-wrap-1 .service-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-1 .more-btn { color: #000000; font-size: 28px; font-weight: 600; font-family: "Fredoka", serif; text-transform: uppercase; width: 65px; height: 65px; background: #ffffff; border: 1.5px solid #000; border-radius: 50%; display: inline-block; text-align: center; line-height: 65px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-1:hover { background: #229ebd; border-color: #229ebd; color: #fff; } .service-wrap-1:hover h3{ color: #fff;} .service-wrap-1:hover .more-btn { border-color: #ffffff; transform: rotate(-45deg); } @media only screen and (max-width: 1600px) { .service-wrap-1 { padding: 15px 7px; } .service-wrap-1 .service-title { font-size: 24px; } .service-wrap-1 .description { margin-bottom: 10px; } } @media only screen and (max-width: 767.98px) { .service-wrap-1 { padding-left: 0; padding-right: 0; } } .service-single-thumb { margin-bottom: 40px; position: relative; z-index: 1; } .service-single-thumb .thumb { border-radius: 25px; border: 10px solid #f98700; } .service-single-thumb .service-anchor { position: absolute; z-index: 2; bottom: -95px; left: 50%; transform: translateX(-50%); } .service-single-thumb .main-shape { position: relative; z-index: 1; animation: rotation linear infinite 30s; } .service-single-thumb .main-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; } @media only screen and (max-width: 1200px) { .service-single-thumb .service-anchor { bottom: 0; } } .service-wrap-2 { margin-bottom: 45px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-2 .service-title { font-size: 32px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 5px; } .service-wrap-2 .service-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-2 .service-price { color: #000000; font-size: 24px; font-family: "Satoshi-Bold"; font-weight: 700; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-2 .service-thumb { margin-bottom: 20px; position: relative; z-index: 1; } .service-wrap-2 .service-thumb img { border-radius: 35px; width: 100%; } .service-wrap-2 .more-btn { text-align: center; color: #ffffff; font-size: 28px; font-weight: 600; font-family: "Fredoka", serif; height: 90px; width: 90px; line-height: 70px; background: #000; border-radius: 35px 0 35px 35px; border: 10px solid #ffffff; position: absolute; right: -10px; bottom: -10px; z-index: 1; } .service-wrap-2:hover .more-btn { background: #F47932; } @media only screen and (max-width: 1200px) { .service-wrap-2 .service-title { font-size: 24px; } .service-wrap-2 .service-price { font-size: 20px; } } .service-wrap-3 { background: #ffffff; border-radius: 30px; padding: 50px 90px 8px 60px; margin-bottom: 30px; position: relative; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-3 .icon { margin-right: 50px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-3 .icon .front-icon { display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-3 .content { flex: 1; } .service-wrap-3 .service-title { font-size: 18px; font-weight: 400; font-family: "Satoshi-Regular"; line-height: 1; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 26px; } .service-wrap-3 .service-title a { color: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-3 .service-title a:hover { color: #F47932; } .service-wrap-3 .description { color: #000000; font-size: 26px; line-height: 38px; font-family: "Fredoka", serif; font-weight: 500; margin-bottom: 44px; } .service-wrap-3 .more-btn { width: 81px; height: 81px; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 10px solid #F5F2ED; position: absolute; right: -10px; bottom: -10px; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-3 .more-btn img { display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-3 .more-btn:hover { background: #F47932; } .service-wrap-3 .more-btn:hover img { filter: invert(1); transform: rotate(-45deg); } @media only screen and (max-width: 1600px) { .service-wrap-3 { padding: 30px 15px; } .service-wrap-3 .icon { margin-right: 15px; } .service-wrap-3 .description { font-size: 20px; margin-bottom: 10px; } } @media only screen and (max-width: 767.98px) { .service-wrap-3 .icon { margin-right: 0; margin-bottom: 20px; } } .service-wrap-4 { background: #ec8324; text-align: center; border-radius: 30px; padding: 55px 49px 6px 49px; margin-left: 22.5px; margin-right: 22.5px; margin-bottom: 30px; position: relative; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-4.sw-bg-2 { background: #2ea9b8; } .service-wrap-4.sw-bg-3 { background: #0b2634;color: #fff; } .service-wrap-4.sw-bg-4 { background: #b3ddf1; } .service-wrap-4.sw-bg-3 .service-title{ color: #fff;} .service-wrap-4 .icon { background: #ffffff; width: 190px; height: 190px; border-radius: 50%; display: inline-block; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 53px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-4 .icon .front-icon { display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 110px; height: 110px; background-size: contain; background-position: center; background-repeat: no-repeat } .service-wrap-4 .service-number { color: #000000; font-size: 24px; font-weight: 400; font-family: "Fredoka", serif; background: #ffffff; width: 47px; height: 47px; border-radius: 50%; line-height: 47px; text-align: center; display: block; margin: 0 auto; margin-bottom: 35px; } .service-wrap-4 .service-title { font-size: 24px; font-weight: 400; font-family: "Satoshi-Regular"; line-height: 1; letter-spacing: 2px; margin-bottom: 22px; } .service-wrap-4 .service-title a { color: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-4 .service-title a:hover { color: #F47932; } .service-wrap-4 .description { color: #000000; font-size: 26px; line-height: 38px; font-family: "Fredoka", serif; font-weight: 500; margin-bottom: 44px; } @media only screen and (max-width: 1600px) { .service-wrap-4 { padding: 30px 15px; } .service-wrap-4 .description { font-size: 20px; } } @media only screen and (max-width: 991.98px) { .service-wrap-4 { margin-left: 15px; margin-right: 15px; } } @media only screen and (max-width: 767.98px) { .service-wrap-4 { margin-left: 0; margin-right: 0; } } .service-slider-4 { width: 77vw; margin-left: 42px; } @media only screen and (max-width: 991.98px) { .service-slider-4 { width: 100%; margin-left: 0; } } .service-wrap-5, .service-wrap-6 { background: rgba(255, 255, 255, 0.5); border-radius: 20px; padding: 50px 45px 48px 45px; border: 2px solid rgba(255, 255, 255, 0.5); margin-bottom: 45px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-5 .icon, .service-wrap-6 .icon { margin-bottom: 33px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-5 .icon .front-icon, .service-wrap-6 .icon .front-icon { display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-5 .service-title, .service-wrap-6 .service-title { font-size: 40px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 10px; } .service-wrap-5 .service-title a, .service-wrap-6 .service-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-5 .description, .service-wrap-6 .description { margin-bottom: 40px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .service-wrap-5 .more-btn, .service-wrap-6 .more-btn { display: inline-block; } .service-wrap-5:hover, .service-wrap-6:hover { background: #ffffff; border-color: #000; } @media only screen and (max-width: 1600px) { .service-wrap-5, .service-wrap-6 { padding-left: 15px; padding-right: 15px; } .service-wrap-5 .service-title, .service-wrap-6 .service-title { font-size: 28px; } } .service-slider-5 { width: 104vw; } @media only screen and (max-width: 991.98px) { .service-slider-5 { width: 100%; } } .service-slider-5 .service-item.slick-slide.slick-current.slick-active .service-wrap-5 { background: #ffffff; border-color: #000; } .service-wrap-6 { border-color: #000; background: #F4F4F4; } .portfolio-slider-1 { width: 110vw; position: relative; left: 50%; transform: translateX(-50%); } .bottom-bg-color { position: absolute; height: 345px; width: 100%; bottom: 0; left: 0; right: 0; z-index: -1; } .portfolio-wrap-1 { overflow: hidden; position: relative; z-index: 1; } .portfolio-wrap-1 .portfolio-thumb { position: relative; z-index: 1; } .portfolio-wrap-1 .portfolio-thumb img { border: 15px solid #ffffff; border-radius: 30px; width: 100%; } .portfolio-wrap-1 .pf-title { color: #000000; font-size: 30px; font-weight: 600; font-family: "Fredoka", serif; line-height: 1; transition: all 0.4s; } .portfolio-wrap-1 .pf-tag { color: #000000; font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; display: inline-block; margin-bottom: 5px; } .portfolio-wrap-1 .content { background: #f98700; border-radius: 20px; padding: 16px 40px 16px 30px; position: absolute; z-index: 2; bottom: -100%; left: 50px; right: 50px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .portfolio-wrap-1:hover .content { bottom: 65px; } @media only screen and (max-width: 1200px) { .portfolio-wrap-1 .pf-title { font-size: 24px; } } .slick-slide.slick-current.slick-active.slick-center .portfolio-wrap-1 .content { bottom: 65px; } .portfolio-wrap-2 { overflow: hidden; background: #ffffff; border-radius: 30px; position: relative; z-index: 1; } .portfolio-wrap-2 .portfolio-thumb { margin-bottom: 10px; position: relative; z-index: 1; } .portfolio-wrap-2 .portfolio-thumb img { border-radius: 30px 30px 0 0; width: 100%; } .portfolio-wrap-2 .pf-title { color: #000000; font-size: 28px; font-weight: 600; font-family: "Fredoka", serif; line-height: 1.1; margin-bottom: 17px; transition: all 0.4s; } .portfolio-wrap-2 .pf-tag { color: #000000; font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; display: inline-block; margin-bottom: 5px; } .portfolio-wrap-2 .more-btn { width: 81px; height: 81px; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 10px solid #f98700; position: absolute; right: -10px; bottom: -10px; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .portfolio-wrap-2 .more-btn img { display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .portfolio-wrap-2 .more-btn:hover { background: #000; } .portfolio-wrap-2 .more-btn:hover img { filter: invert(1); } .portfolio-wrap-2 .content { padding: 16px 40px 16px 30px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } @media only screen and (max-width: 1200px) { .portfolio-wrap-2 .pf-title { font-size: 24px; } } .portfolio-wrap-3 { margin-bottom: 45px; overflow: hidden; background: #F4F4F4; border-radius: 30px; position: relative; z-index: 1; } .portfolio-wrap-3 .portfolio-thumb { margin-bottom: 10px; position: relative; z-index: 1; } .portfolio-wrap-3 .portfolio-thumb img { border-radius: 30px 30px 0 0; width: 100%; } .portfolio-wrap-3 .pf-title { font-size: 28px; font-weight: 600; font-family: "Fredoka", serif; line-height: 1.1; margin-bottom: 17px; transition: all 0.4s; } .portfolio-wrap-3 .pf-title a { color: #000000; transition: all 0.4s; } .portfolio-wrap-3 .pf-title a:hover { color: #F47932; } .portfolio-wrap-3 .pf-tag { color: #000000; font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; display: inline-block; margin-bottom: 5px; } .portfolio-wrap-3 .more-btn { width: 81px; height: 81px; background: #000; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 10px solid #ffffff; position: absolute; right: -10px; bottom: -10px; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .portfolio-wrap-3 .more-btn img { display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .portfolio-wrap-3 .more-btn:hover { background: #F47932; } .portfolio-wrap-3 .content { padding: 16px 40px 16px 30px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } @media only screen and (max-width: 1200px) { .portfolio-wrap-3 .pf-title { font-size: 24px; } } .project-details-content .img-holder img { border-radius: 30px 30px 0 0; } .portfolio-menu { padding: 10px 10px 0px 10px; border-radius: 50px; width: max-content; border: 1px solid #000; } .portfolio-menu .gf_btn { color: #000; font-size: 20px; font-weight: 500; font-family: "Fredoka", serif; line-height: 18px; padding: 11px 20px; border: 0px; border-radius: 40px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; background: transparent; position: relative; z-index: 1; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; } .portfolio-menu .gf_btn:hover, .portfolio-menu .gf_btn.active { background: #F47932; color: #ffffff; } @media only screen and (max-width: 991.98px) { .portfolio-menu .gf_btn { font-size: 16px; padding: 10px; } } .project-info { background: #EAEAFF; border-radius: 0 0 30px 30px; padding-top: 35px; } .project-info .info-box { margin-bottom: 28px; } .project-info .info-box .icon { color: #ffffff; width: 60px; height: 60px; text-align: center; line-height: 60px; background: #F47932; border-radius: 50%; font-size: 26px; margin-right: 20px; } .project-info .info-box p { font-size: 20px; color: rgba(0, 0, 0, 0.6); margin-bottom: 0px; } .project-info .info-box h5 { font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; } .contact-form-wrapper { padding: 90px 94px 75px 20px; } @media only screen and (max-width: 1200px) { .contact-form-wrapper { padding: 15px 15px 12px 15px; } } @media only screen and (max-width: 991.98px) { .contact-form-wrapper { padding: 30px 15px; } } .contact-form-wrapper-2 { padding: 90px 94px 75px 20px; } @media only screen and (max-width: 1200px) { .contact-form-wrapper-2 { padding: 15px 15px 12px 15px; } } @media only screen and (max-width: 991.98px) { .contact-form-wrapper-2 { padding: 30px 15px; } } @media only screen and (max-width: 991.98px) { .contact-form-wrapper-2 { padding-left: 0; padding-right: 0; } } .contact-border-wrapper { border: 10px solid #ffffff; border-radius: 30px; } .contact-border-wrapper-2 { border: 15px solid #229ebd; border-radius: 30px; } @media only screen and (max-width: 767.98px) { .contact-border-wrapper-2 { border: 0; } } .contact-form .input-wrapper { position: relative; z-index: 1; margin-bottom: 30px; } .contact-form .input-wrapper input { width: 100%; height: 70px; border: 0; background: #ffffff; color: #000; font-size: 18px; font-weight: 500; font-family: "Satoshi-Medium"; border-radius: 10px; border: 1px solid #ffffff; padding-left: 25px; } .contact-form .input-wrapper input::placeholder { color: #000; font-size: 18px; } .contact-form .input-wrapper input::-moz-placeholder { color: #000; font-size: 18px; } .contact-form .input-wrapper input::-webkit-placeholder { color: #000; font-size: 18px; } .contact-form .input-wrapper input::-o-placeholder { color: #000; font-size: 18px; } .contact-form .input-wrapper input::-ms-placeholder { color: #000; font-size: 18px; } .contact-form .input-wrapper textarea { width: 100%; height: 140px; border: 0; background: rgb(255, 255, 255); color: #000; font-size: 14px; font-family: "Satoshi-Regular"; padding-top: 10px; padding-left: 25px; border-radius: 10px; border: 1px solid #ffffff; } .contact-form .input-wrapper textarea::placeholder { color: #000; font-size: 16px; } .contact-form .input-wrapper textarea::-moz-placeholder { color: #000; font-size: 16px; } .contact-form .input-wrapper textarea::-webkit-placeholder { color: #000; font-size: 16px; } .contact-form .input-wrapper textarea::-o-placeholder { color: #000; font-size: 16px; } .contact-form .input-wrapper textarea::-ms-placeholder { color: #000; font-size: 16px; } .contact-form .submit-btn { color: #ffffff; font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; height: 65px; line-height: 60px; padding-left: 55px; padding-right: 55px; text-transform: uppercase; letter-spacing: 0.05px; border-radius: 50px; border: 0; background: #F47932; border: 2px solid #F47932; width: 100%; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .contact-form .submit-btn:hover { color: #ffffff; background: #f98700; border-color: #f98700; } @media only screen and (max-width: 1200px) { .contact-form .input-wrapper { margin-bottom: 25px; } } .contact-form.form-2 .input-wrapper input, .contact-form.form-2 .input-wrapper textarea { color: #000; padding-left: 25px; background: #f4f4f4; border-radius: 8px; } .contact-form.form-2 .input-wrapper input::placeholder, .contact-form.form-2 .input-wrapper textarea::placeholder { color: #000; font-size: 18px; } .contact-form.form-2 .input-wrapper input::-moz-placeholder, .contact-form.form-2 .input-wrapper textarea::-moz-placeholder { color: #000; font-size: 18px; } .contact-form.form-2 .input-wrapper input::-webkit-placeholder, .contact-form.form-2 .input-wrapper textarea::-webkit-placeholder { color: #000; font-size: 18px; } .contact-form.form-2 .input-wrapper input::-o-placeholder, .contact-form.form-2 .input-wrapper textarea::-o-placeholder { color: #000; font-size: 18px; } .contact-form.form-2 .input-wrapper input::-ms-placeholder, .contact-form.form-2 .input-wrapper textarea::-ms-placeholder { color: #000; font-size: 18px; } .contact-form.form-2 .submit-btn { color: #ffffff; width: auto; background: #F47932; border-radius: 8px; } .contact-form.form-2 .submit-btn:hover { background: #000; border-color: #000; } .subscribe-form { width: 100%; position: relative; z-index: 1; } .subscribe-form input { width: 100%; height: 70px; border: 0; color: #000000; font-size: 18px; font-family: "Satoshi-Regular"; border: 0; padding-left: 30px; border-radius: 10px; } .subscribe-form input::placeholder { color: #000000; font-size: 16px; } .subscribe-form input::-moz-placeholder { color: #000000; font-size: 16px; } .subscribe-form input::-webkit-placeholder { color: #000000; font-size: 16px; } .subscribe-form input::-o-placeholder { color: #000000; font-size: 16px; } .subscribe-form input::-ms-placeholder { color: #000000; font-size: 16px; } .subscribe-form button { color: #ffffff; font-size: 18px; font-family: "Fredoka", serif; border: 0; font-weight: 600; line-height: 1; text-transform: capitalize; display: inline-block; background: #F47932; position: absolute; right: 12px; top: 12px; border-radius: 6px; height: 50px; width: max-content; padding: 0px 15px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .subscribe-form button:hover { color: #000000; background: #f98700; } .subscribe-form.sub-form-2 { display: inline-block; } .subscribe-form.sub-form-2 input { height: 70px; line-height: 70px; display: block; border-radius: 10px; } .subscribe-form.sub-form-2 input::placeholder { color: #000000; } .subscribe-form.sub-form-2 button { color: #000000; font-size: 18px; background: #f98700; min-height: 55px; line-height: 55px; padding-left: 30px; padding-right: 30px; width: auto; border-radius: 8px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .subscribe-form.sub-form-2 button:hover { color: #ffffff; background: #F47932; } @media only screen and (max-width: 991.98px) { .subscribe-form.sub-form-2 input { width: 100%; margin-bottom: 15px; } .subscribe-form.sub-form-2 button { right: 0; } } .subscribe-form.sub-form-3 { border-bottom: 1px solid #000; } .subscribe-form.sub-form-3 input { border: 0; border-radius: 0; height: 65px; line-height: 65px; font-size: 16px; font-weight: 500; font-family: "Satoshi-Medium"; padding-left: 0; } .subscribe-form.sub-form-3 input::placeholder { color: #000000; font-size: 16px; } .subscribe-form.sub-form-3 input::-moz-placeholder { color: #000000; font-size: 16px; } .subscribe-form.sub-form-3 input::-webkit-placeholder { color: #000000; font-size: 16px; } .subscribe-form.sub-form-3 input::-o-placeholder { color: #000000; font-size: 16px; } .subscribe-form.sub-form-3 input::-ms-placeholder { color: #000000; font-size: 16px; } .subscribe-form.sub-form-3 button { color: #000000; font-size: 20px; font-weight: 600; font-family: "Fredoka", serif; background: transparent; position: relative; z-index: 1; min-width: max-content; min-height: 65px; padding: 0; text-transform: capitalize; right: unset; top: unset; margin-left: 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .subscribe-form.sub-form-3 button:hover { color: #000; background: transparent; } @media only screen and (max-width: 767.98px) { .subscribe-form.sub-form-3 input { border-bottom: 1px solid #000; } .subscribe-form.sub-form-3 button { margin-left: 0; } } .subscribe-form.sub-form-4 { display: inline-block; max-width: 525px; } .subscribe-form.sub-form-4 input { width: 100%; height: 80px; line-height: 65px; border-radius: 10px; border: 0; background: #ffffff; display: block; } .subscribe-form.sub-form-4 button { color: #000000; font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; text-transform: uppercase; background: #FFBA05; border-radius: 8px; min-height: 55px; line-height: 55px; padding-left: 30px; padding-right: 30px; width: auto; transform: translateY(1px); -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .subscribe-form.sub-form-4 button:hover { color: #ffffff; background: #000; } @media only screen and (max-width: 991.98px) { .subscribe-form.sub-form-4 input { width: 100%; margin-bottom: 15px; } .subscribe-form.sub-form-4 button { right: 0; } } @media only screen and (max-width: 767.98px) { .subscribe-form.sub-form-4 button { width: 100%; } } @media only screen and (max-width: 767.98px) { .subscribe-form { text-align: center; width: 100%; } .subscribe-form button { width: 100%; position: relative; top: unset; right: unset; margin-top: 10px; } .subscribe-form button.black-btn { background: #000000; } } .subscribe-agreement-checkbox label { color: #000000; font-size: 14px; font-weight: 500; font-family: "Satoshi-Medium"; } .cta-shape { top: 73%; left: -77px; } .contact-map iframe { height: 750px; width: 100%; display: block; } @media only screen and (max-width: 1600px) { .contact-map iframe { height: 600px; } } @media only screen and (max-width: 1600px) { .contact-map iframe { height: 400px; } } .signup-form-section .contact-wrapper { background: rgba(244, 244, 244, 0.5); padding: 50px; border-radius: 30px; } @media only screen and (max-width: 767.98px) { .signup-form-section .contact-wrapper { padding-left: 10px; padding-right: 10px; } } .signup-form-section .contact-form .input-wrapper span { left: 21px; } .signup-form-section button.signup-btn { border: 0; width: 100%; height: 45px; background: transparent; color: #000000; font-weight: 600; } .info-box2 { background: #F3F3F3; border-radius: 20px; padding: 40px 40px 30px 40px; margin-bottom: 45px; display: flex; } .info-box2 .icon { color: #ffffff; width: 70px; height: 70px; background: #F47932; border-radius: 50%; font-size: 40px; text-align: center; line-height: 70px; margin-right: 20px; margin-bottom: 20px; } .info-box2 .info-content { flex: 1; } .info-box2 .info-title { font-size: 30px; font-weight: 500; font-family: "Fredoka", serif; margin-bottom: 11px; } .info-box2 p { margin-bottom: 0; } @media only screen and (max-width: 1200px) { .info-box2 { padding-right: 0; } .info-box2 .icon { margin-bottom: 30px; } .info-box2 .info-title { font-size: 22px; } } @media only screen and (max-width: 767.98px) { .info-box2 { padding-left: 10px; padding-right: 10px; display: block; text-align: center; } .info-box2 .icon { margin: 0 auto; margin-bottom: 20px; } } .feedback-wrap-1 { background-position: center; background-size: cover; background-repeat: no-repeat; text-align: center; padding: 50px 78px 0 78px; height: 535px; } .feedback-wrap-1 .quote-icon { width: 70px; height: 70px; border-radius: 50%; text-align: center; line-height: 65px; background: #ffffff; display: inline-block; } .feedback-wrap-1 .quote-icon img { display: inline-block; } .feedback-wrap-1 .feedback-text { font-size: 30px; font-family: "Satoshi-Bold"; font-weight: 700; color: #000000; line-height: 1.45; margin-top: 30px; margin-bottom: 40px; } .feedback-wrap-1 .name { width: max-content; margin: 0 auto; color: #000000; font-size: 20px; font-weight: 700; font-family: "Satoshi-Bold"; padding-left: 30px; position: relative; z-index: 1; } .feedback-wrap-1 .name::before { content: ""; position: absolute; left: 0; top: 48%; width: 21px; height: 2px; background: #000000; } .feedback-wrap-1 .designation { color: #000000; font-family: "Satoshi-Medium"; font-weight: 500; } @media only screen and (max-width: 1200px) { .feedback-wrap-1 { padding-left: 15px; padding-right: 15px; padding-top: 25px; padding-bottom: 20px; } .feedback-wrap-1 .feedback-text { margin-bottom: 20px; } .feedback-wrap-1 .name { font-size: 20px; } } @media only screen and (max-width: 767.98px) { .feedback-wrap-1 .feedback-text { font-size: 24px; line-height: 38px; margin-bottom: 25px; } .feedback-wrap-1 .name { font-size: 20px; } } .feedback-wrap-2 .quote-icon { text-align: center; line-height: 75px; display: inline-block; width: 80px; height: 80px; border-radius: 50%; background: #F47932; margin-bottom: 16px; } .feedback-wrap-2 .quote-icon img { display: inline-block; } .feedback-wrap-2 .title { font-size: 72px; line-height: 1.14; font-family: "Fredoka", serif; font-weight: 600; } .feedback-wrap-2 b { font-weight: 700; font-family: "Satoshi-Bold"; } .feedback-wrap-2 .border-line { border-bottom: 1px solid #000; } .feedback-wrap-2 .author-avatar { position: relative; margin-top: -80px; } .feedback-wrap-2 .author-avatar img { display: inline-block; } .feedback-wrap-2 .name { color: #000000; font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; margin-bottom: 0; } .feedback-wrap-2 .designation { color: #000000; font-size: 16px; margin-bottom: 0; } .feedback-wrap-2 .feedback-text-bg { min-height: 431px; display: flex; align-items: center; } .feedback-wrap-2 .feedback-text { color: #000000; font-size: 36px; font-weight: 500; font-family: "Fredoka", serif; line-height: 62px; padding-left: 87px; padding-right: 87px; } .feedback-wrap-2 .sub-title { font-size: 22px; margin-bottom: 55px; } .feedback-wrap-2 .feedback-rating { text-align: center; padding-top: 5px; padding-bottom: 25px; } .feedback-wrap-2 .feedback-rating a { color: #F47932; font-size: 24px; margin: 0 4px; } .feedback-wrap-2 .author-content { padding-left: 40px; } @media only screen and (max-width: 1200px) { .feedback-wrap-2 { padding-left: 25px; } .feedback-wrap-2 .title { font-size: 55px; } .feedback-wrap-2 .feedback-text-bg { min-height: unset; } .feedback-wrap-2 .feedback-text { font-size: 28px; line-height: 40px; padding-left: 30px; padding-right: 30px; margin-bottom: 20px; } .feedback-wrap-2 .author-content { padding-left: 0; } } @media only screen and (max-width: 991.98px) { .feedback-wrap-2 { padding-bottom: 40px; padding-left: 15px; padding-right: 0; } .feedback-wrap-2 .title { font-size: 45px; } .feedback-wrap-2 .author-avatar { text-align: center; margin-bottom: 30px; } .feedback-wrap-2 .rating { left: 0; right: 0; bottom: 0; } .feedback-wrap-2 .quote-icon { margin-left: 0; margin-bottom: 20px; } .feedback-wrap-2 .feedback-text { font-size: 24px; padding-top: 20px; padding-bottom: 20px; padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 767.98px) { .feedback-wrap-2 .feedback-text { padding-left: 0; } } .feedback-slider-two .author-avatar img { border-radius: 50%; } .feedback-slider-two .author-avatar .item:not(:last-child) { padding-top: 10px; padding-bottom: 10px; margin-right: 20px; display: inline-block; } .feedback-slider-two .author-avatar .item:not(:last-child) img { display: inline-block; opacity: 0.5; } .feedback-slider-two .author-avatar .item:not(:last-child).slick-current.slick-active.slick-center img { opacity: 1; transform: scale(1.3); } .feedback-wrap-3 { background: #ebedec; border-radius: 20px; } .feedback-wrap-3 .author-avatar { flex: 1; } .feedback-wrap-3 .author-avatar img { display: inline-block; border-radius: 20px 0 0 20px; } .feedback-wrap-3 .content { padding-left: 39px; padding-right: 39px; } .feedback-wrap-3 .quote { margin-bottom: 45px; } .feedback-wrap-3 .quote img { display: inline-block; } .feedback-wrap-3 .feedback-text { font-size: 24px; font-family: "Satoshi-Bold"; font-weight: 500; color: #000000; line-height: 1.4; margin-bottom: 60px; } .feedback-wrap-3 .name { color: #000000; font-size: 22px; font-weight: 700; font-family: "Satoshi-Bold"; margin-bottom: 0; } .feedback-wrap-3 .designation { font-size: 18px; font-family: "Satoshi-Regular"; font-weight: 400; } .feedback-wrap-3 .feedback-rating { color: #F47932; font-size: 25px; margin-bottom: 18px; } @media only screen and (max-width: 767.98px) { .feedback-wrap-3 .author-avatar img { width: 100%; } .feedback-wrap-3 .content { padding: 25px 15px; } .feedback-wrap-3 .feedback-text { font-size: 24px; line-height: 38px; margin-bottom: 25px; } .feedback-wrap-3 .name { font-size: 20px; } } .feedback-slider-three { width: 143vw; position: relative; left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 1200px) { .feedback-slider-three { width: 100%; } } .feedback-wrap-4 { background: #D4A4FF; border-radius: 30px; padding: 45px 62px 60px 60px; margin-bottom: 40px; margin-top: 65px; } .feedback-wrap-4.fw-bg-2 { background: #A0F2D4; } .feedback-wrap-4.fw-bg-3 { background: #f98700; } .feedback-wrap-4 .quote { background: #ffffff; width: 70px; height: 70px; border-radius: 50%; text-align: center; line-height: 60px; display: inline-block; margin-right: -50px; display: inline-block; position: relative; z-index: 2; } .feedback-wrap-4 .author { width: 120px; height: 120px; border-radius: 50%; margin-top: -105px; margin-bottom: 43px; position: relative; z-index: 2; } .feedback-wrap-4 .author img { display: inline-block; } .feedback-wrap-4 .name { color: #000000; font-size: 24px; font-weight: 700; font-family: "Satoshi-Bold"; margin-bottom: 2px; } .feedback-wrap-4 .designation { color: #000000; font-size: 18px; font-family: "Satoshi-Regular"; font-weight: 400; margin-bottom: 0; } .feedback-wrap-4 .feedback-text { color: #000000; font-size: 30px; font-weight: 500; font-family: "Fredoka", serif; line-height: 1.4; margin-bottom: 65px; margin-top: 23px; } .feedback-wrap-4 .feedback-rating a { color: #000000; font-size: 25px; margin-right: 7px; } .feedback-wrap-4 .flag-box { display: inline-block; position: relative; z-index: 1; } .feedback-wrap-4 .flag-box img { display: inline-block; } .feedback-wrap-4 .author-country { border-radius: 50%; } @media only screen and (max-width: 1600px) { .feedback-wrap-4 { padding-left: 25px; padding-right: 25px; } .feedback-wrap-4 .feedback-text { font-size: 24px; } } @media only screen and (max-width: 1200px) { .feedback-wrap-4 .feedback-text { margin-bottom: 30px; } .feedback-wrap-4 .name { font-size: 20px; } } @media only screen and (max-width: 767.98px) { .feedback-wrap-4 { padding-left: 15px; padding-right: 15px; } .feedback-wrap-4 .feedback-text { font-size: 20px; } } .feedback-slider-four { width: 114vw; } @media only screen and (max-width: 767.98px) { .feedback-slider-four { width: 100%; } } .feedback-wrap-5 .feedback-title { color: rgba(255, 255, 255, 0.8); font-size: 18px; font-weight: 500; font-family: "Satoshi-Medium"; text-transform: uppercase; display: inline-block; margin-bottom: 0; position: relative; z-index: 1; } .feedback-wrap-5 .feedback-title::before { content: ""; position: absolute; right: -33px; top: 10px; width: 20px; height: 1.5px; background: rgba(255, 255, 255, 0.8); } .feedback-wrap-5 .name { color: #ffffff; font-size: 24px; font-weight: 500; font-family: "Satoshi-Medium"; margin-bottom: 6px; } .feedback-wrap-5 .designation { color: #ffffff; font-size: 18px; font-family: "Satoshi-Regular"; font-weight: 400; margin-bottom: 0; } .feedback-wrap-5 .feedback-text { color: #ffffff; font-size: 60px; font-weight: 600; font-family: "Fredoka", serif; font-style: italic; line-height: 1.28; margin-bottom: 60px; margin-top: 16px; } @media only screen and (max-width: 1600px) { .feedback-wrap-5 .feedback-text { font-size: 38px; } } @media only screen and (max-width: 767.98px) { .feedback-wrap-5 .feedback-text { font-size: 28px; } } .team-wrap-1 { border-radius: 30px; background: #ffffff; padding: 25px; border-radius: 25px; margin-bottom: 40px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-1 .team-thumb { overflow: hidden; position: relative; z-index: 1; } .team-wrap-1 .team-thumb img { border-radius: 10px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-1 .team-social a:not(:last-child) { margin-right: 15px; } .team-wrap-1 .content { padding-left: 30px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-1 .name { font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; margin-bottom: 35px; } .team-wrap-1 .name a { color: rgba(0, 0, 0, 0.5); } .team-wrap-1 .name a:hover { color: #F47932; } .team-wrap-1 .designation { color: #000000; font-size: 28px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 20px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } @media only screen and (max-width: 1200px) { .team-wrap-1 { padding: 15px; } .team-wrap-1 .content { padding-left: 10px; } .team-wrap-1 .designation { font-size: 20px; } .team-wrap-1 .team-social a:not(:last-child) { margin-right: 3px; } } @media only screen and (max-width: 991.98px) { .team-wrap-1 { text-align: center; padding-bottom: 35px; } .team-wrap-1 .content { padding-left: 0; margin-top: 25px; } .team-wrap-1 .name { margin-bottom: 20px; } } .team-wrap-2 { overflow: hidden; background: rgba(255, 255, 255, 0.5); border: 2px solid transparent; border-radius: 185px; text-align: center; margin-bottom: 45px; position: relative; z-index: 1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-2 .team-thumb { overflow: hidden; position: relative; z-index: 1; } .team-wrap-2 .team-thumb img { width: 100%; border-radius: 30px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-2 .team-social { display: inline-flex; flex-direction: column; justify-content: center; gap: 10px; position: absolute; top: 130px; right: -100px; z-index: 2; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-2 .team-social a { font-size: 20px; width: 50px; height: 50px; line-height: 50px; } .team-wrap-2 .team-social a:hover { color: #ffffff; border-color: #FFBA05; background: #FFBA05; } .team-wrap-2 .content { position: absolute; bottom: 75px; left: 0; right: 0; z-index: 3; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-2 .designation { color: #ffffff; font-size: 20px; font-weight: 400; font-family: "Satoshi-Regular"; margin-bottom: 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-2 .name { color: #ffffff; font-size: 32px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 4px; } .team-wrap-2 .bg-shape { width: 100%; position: absolute; left: 0; right: 0; bottom: -180px; z-index: 2; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-2:hover { background: #ffffff; border-color: #000; } .team-wrap-2:hover .team-social { right: 10px; } .team-wrap-2:hover .name a { color: #000000; } .team-wrap-2:hover .designation { color: #000000; } .team-wrap-2:hover .bg-shape { bottom: 0px; visibility: visible; opacity: 1; } @media only screen and (max-width: 1200px) { .team-wrap-2 .name a { font-size: 20px; } .team-wrap-2 .designation { font-size: 18px; } } .team-wrap-3 { border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 25px; padding: 25px; margin-bottom: 40px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-3 .team-thumb { overflow: hidden; position: relative; z-index: 1; } .team-wrap-3 .team-thumb img { border-radius: 10px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-3 .team-social a:not(:last-child) { margin-right: 15px; } .team-wrap-3 .content { padding-left: 30px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-wrap-3 .name { font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; margin-bottom: 35px; } .team-wrap-3 .name a { color: rgba(0, 0, 0, 0.5); } .team-wrap-3 .name a:hover { color: #F47932; } .team-wrap-3 .designation { color: #000000; font-size: 28px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 20px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } @media only screen and (max-width: 1200px) { .team-wrap-3 { text-align: center; } .team-wrap-3 .team-thumb { margin-bottom: 20px; } .team-wrap-3 .content { padding-left: 0; } .team-wrap-3 .name { margin-bottom: 20px; } } @media only screen and (max-width: 991.98px) { .team-wrap-3 { padding: 15px 15px 25px 15px; } .team-wrap-3 .designation { font-size: 20px; } } .team-social a { color: #000000; font-size: 20px; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid #000; text-align: center; line-height: 50px; display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-social a i { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .team-social a:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .team-social a:hover i { transform: scale(1.2); } .biography-content-wrap { border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 25px; } .biography-content-wrap .team-biography img { border-radius: 15px; } @media only screen and (max-width: 991.98px) { .biography-content-wrap .team-biography { padding: 15px; } .biography-content-wrap .team-biography img { width: 100%; } } .biography-content-wrap .name { font-size: 60px; font-weight: 600; font-family: "Fredoka", serif; } .biography-content-wrap .name a { color: #000000; } .biography-content-wrap .designation { font-size: 20px; margin-bottom: 0; } .biography-content-wrap .description { font-size: 22px; line-height: 38px; max-width: 100%; } .biography-content-wrap .text-desc-divider { height: 1px; display: inline-block; width: 100%; background: rgba(0, 0, 0, 0.2); margin-bottom: 40px; margin-top: 20px; } .biography-content-wrap .addres-line { color: #000000; font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; padding-bottom: 15px; } .biography-content-wrap .addres-line span { font-weight: 400; font-family: "Satoshi-Regular"; } .biography-content-wrap .contact-btn { border: 1px solid #000; border-radius: 30px; padding: 14px 40px; font-weight: 600; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .biography-content-wrap .contact-btn:hover { color: #ffffff; background: #f98700; border-color: #f98700; } @media only screen and (max-width: 1200px) { .biography-content-wrap .name { font-size: 32px; } .biography-content-wrap h3 { font-size: 24px; } .biography-content-wrap .description { max-width: 100%; } .biography-content-wrap .addres-line { font-size: 18px; padding-bottom: 10px; } } .biography-content { padding: 67px 95px 67px 0; border-radius: 30px; position: relative; z-index: 1; } .biography-content .team-social { position: absolute; right: 90px; bottom: 65px; display: flex; gap: 15px; } @media only screen and (max-width: 1200px) { .biography-content { padding: 25px 15px; } .biography-content .team-social { position: relative; bottom: 0; left: 0; gap: 10px; } } .education-skill, .education-history { background: #F4F4F4; border-radius: 25px; padding: 50px; } @media only screen and (max-width: 1200px) { .education-skill, .education-history { padding: 25px 15px; } } .blog-one, .blog-six { margin-bottom: 50px; position: relative; z-index: 1; } .blog-one .blog-content, .blog-six .blog-content { flex: 1; margin-left: 90px; } .blog-one .blog-thumb, .blog-six .blog-thumb { position: relative; z-index: 3; } .blog-one .blog-thumb img, .blog-six .blog-thumb img { width: 100%; border-radius: 192px 40px 40px 192px; border: 10px solid #f98700; } .blog-one .blog-date, .blog-six .blog-date { color: #000000; font-size: 14px; font-weight: 500; font-family: "Satoshi-Medium"; line-height: 20px; padding: 14px 22px 12px 22px; background: #f98700; border-radius: 8px 0 40px 40px; position: absolute; z-index: 1; left: 26%; top: 0; } .blog-one .blog-date b, .blog-six .blog-date b { font-size: 24px; font-family: "Satoshi-Bold"; line-height: 1; } .blog-one .blog-meta, .blog-six .blog-meta { margin-bottom: 12px; } .blog-one .blog-meta a, .blog-six .blog-meta a { color: #000000; font-size: 14px; font-weight: 700; font-family: "Satoshi-Bold"; display: inline-block; padding: 0px 16px; border-radius: 40px; line-height: 35px; background: #f98700; margin-right: 6px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .blog-one .blog-meta a:last-child, .blog-six .blog-meta a:last-child { margin-right: 0; margin-left: 4px; } .blog-one .blog-meta .divider, .blog-six .blog-meta .divider { display: inline-block; width: 1.4px; height: 14px; background: rgba(0, 0, 0, 0.6); transform: rotate(32deg) translateY(2px); } .blog-one .blog-title, .blog-six .blog-title { font-size: 60px; line-height: 1.1; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 20px; } .blog-one .blog-title a, .blog-six .blog-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .blog-one .blog-text, .blog-six .blog-text { margin-bottom: 48px; } .blog-one .blog-btn, .blog-six .blog-btn { color: #000000; font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; text-transform: uppercase; letter-spacing: 0.05px; border-bottom: 1.5px solid #000; display: inline-block; transition: all 0.4s ease 0s; } .blog-one .blog-btn i, .blog-six .blog-btn i { margin-left: 19px; } @media only screen and (max-width: 1600px) { .blog-one .blog-content, .blog-six .blog-content { margin-left: 30px; } .blog-one .blog-title, .blog-six .blog-title { font-size: 38px; } .blog-one .blog-text, .blog-six .blog-text { margin-bottom: 20px; } } @media only screen and (max-width: 1200px) { .blog-one .blog-content, .blog-six .blog-content { margin-left: 0; margin-top: 30px; } } @media only screen and (max-width: 767.98px) { .blog-one .blog-title, .blog-six .blog-title { font-size: 28px; } .blog-one .blog-tag, .blog-six .blog-tag { left: 15px; top: 15px; } } .blog-two { position: relative; z-index: 1; margin-bottom: 45px; } .blog-two .blog-thumb { margin-bottom: 20px; position: relative; z-index: 1; } .blog-two .blog-thumb img { max-width: 100%; border-radius: 40px 0 40px 40px; } .blog-two .blog-tag { color: #000; font-size: 14px; font-weight: 500; font-family: "Satoshi-Medium"; line-height: 35px; display: inline-block; padding: 0 15px; background: #ffffff; border-radius: 0 17px 17px 0px; position: absolute; z-index: 1; left: 0; bottom: 45px; } .blog-two .blog-meta { margin-bottom: 5px; } .blog-two .blog-meta a { color: rgba(0, 0, 0, 0.6); font-size: 18px; font-weight: 400; font-family: "Satoshi-Regular"; display: inline-block; margin-right: 4px; } .blog-two .divider { display: inline-block; background: rgba(0, 0, 0, 0.6); width: 1.5px; height: 13px; transform: rotate(15deg); margin-right: 4px; } .blog-two .blog-title { font-size: 36px; line-height: 46px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 30px; } .blog-two .blog-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .blog-two p { margin-bottom: 60px; } .blog-two .more-btn { color: #000000; font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; text-transform: uppercase; display: inline-flex; align-items: center; transition: all 0.4s ease 0s; } .blog-two .more-btn .btn-icon { position: relative; z-index: 1; } .blog-two .more-btn .btn-icon::before { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #000; z-index: -1; top: -1px; right: -15px; transition: all 0.4s ease 0s; } .blog-two .more-btn .btn-icon::after { content: ""; position: absolute; background: #000; width: 21px; height: 1.5px; z-index: 1; left: 20px; top: 18px; transition: all 0.4s ease 0s; } .blog-two .more-btn img { display: inline-block; transition: all 0.4s ease 0s; margin-left: 20px; } .blog-two .more-btn:hover .btn-icon::before { background: #F47932; border-color: #F47932; } .blog-two .more-btn:hover img { filter: invert(1); } @media only screen and (max-width: 1600px) { .blog-two .blog-title { font-size: 24px; line-height: 36px; } } @media only screen and (max-width: 767.98px) { .blog-two .blog-title { font-size: 20px; line-height: 30px; } } .blog-three { position: relative; z-index: 1; margin-bottom: 45px; } .blog-three .blog-thumb { margin-bottom: 20px; position: relative; z-index: 1; } .blog-three .blog-thumb img { max-width: 100%; border-radius: 30px; border: 15px solid #ffffff; } .blog-three .blog-tag { color: #000; font-size: 14px; font-weight: 500; font-family: "Satoshi-Medium"; line-height: 35px; display: inline-block; padding: 0 15px; background: #f98700; border-radius: 20px; position: absolute; z-index: 1; right: 25px; top: 25px; } .blog-three .blog-meta { margin-bottom: 5px; } .blog-three .blog-meta a { color: rgba(0, 0, 0, 0.6); font-size: 18px; font-weight: 400; font-family: "Satoshi-Regular"; display: inline-block; margin-right: 4px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .blog-three .blog-meta a:hover { color: #F47932; } .blog-three .divider { display: inline-block; background: rgba(0, 0, 0, 0.6); width: 1.5px; height: 13px; transform: rotate(15deg); margin-right: 4px; } .blog-three .blog-title { font-size: 36px; line-height: 46px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 30px; } .blog-three .blog-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .blog-three .blog-title a:hover { color: #F47932; } .blog-three p { margin-bottom: 60px; } .blog-three .more-btn { color: #000000; font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; text-transform: uppercase; display: inline-flex; align-items: center; border-bottom: 1.5px solid #000; transition: all 0.4s ease 0s; } .blog-three .more-btn .btn-icon { margin-left: 40px; } .blog-three .more-btn:hover { color: #F47932; border-color: #F47932; } .blog-three .blog-content { padding-right: 10px; } @media only screen and (max-width: 1600px) { .blog-three .blog-title { font-size: 24px; line-height: 36px; } .blog-three .blog-content { padding-right: 0; } } @media only screen and (max-width: 767.98px) { .blog-three .blog-title { font-size: 20px; line-height: 30px; } } .blog-four { margin-bottom: 50px; position: relative; z-index: 1; } .blog-four.space-right .blog-content { margin-left: 0; margin-right: 90px; } @media only screen and (max-width: 1600px) { .blog-four.space-right .blog-content { margin-right: 30px; } } @media only screen and (max-width: 1200px) { .blog-four.space-right .blog-content { margin-right: 0; } } .blog-four .blog-content { flex: 1; margin-left: 90px; } .blog-four .blog-thumb { position: relative; z-index: 3; } .blog-four .blog-thumb img { width: 100%; border-radius: 192.5px; } .blog-four .blog-date { color: #000000; font-size: 14px; font-weight: 500; font-family: "Satoshi-Medium"; line-height: 20px; padding: 14px 22px 12px 22px; background: #f98700; border-radius: 8px 0 40px 40px; position: absolute; z-index: 1; left: 26%; top: 0; } .blog-four .blog-date b { font-size: 24px; font-family: "Satoshi-Bold"; line-height: 1; } .blog-four .blog-meta { margin-bottom: 12px; } .blog-four .blog-meta a { color: #000000; font-size: 14px; font-weight: 700; font-family: "Satoshi-Bold"; display: inline-block; padding: 0px 16px; border-radius: 40px; line-height: 35px; background: #f98700; margin-right: 6px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .blog-four .blog-meta a:last-child { margin-right: 0; margin-left: 4px; } .blog-four .blog-meta .divider { display: inline-block; width: 1.4px; height: 14px; background: rgba(0, 0, 0, 0.6); transform: rotate(32deg) translateY(2px); } .blog-four .blog-title { font-size: 60px; line-height: 1.1; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 20px; } .blog-four .blog-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .blog-four .blog-text { margin-bottom: 48px; } .blog-four .blog-btn { color: #000000; font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; text-transform: uppercase; letter-spacing: 0.05px; border-bottom: 1.5px solid #000; display: inline-block; transition: all 0.4s ease 0s; } .blog-four .blog-btn i { margin-left: 19px; } @media only screen and (max-width: 1600px) { .blog-four .blog-content { margin-left: 30px; } .blog-four .blog-title { font-size: 38px; } .blog-four .blog-text { margin-bottom: 20px; } } @media only screen and (max-width: 1200px) { .blog-four .blog-content { margin-left: 0; margin-top: 30px; } } @media only screen and (max-width: 767.98px) { .blog-four .blog-title { font-size: 28px; } .blog-four .blog-tag { left: 15px; top: 15px; } .blog-four .blog-date { font-size: 12px; line-height: 16px; padding: 6px 15px 6px 15px; } .blog-four .blog-date b { font-size: 14px; } } .blog-five { position: relative; z-index: 1; margin-bottom: 45px; } .blog-five .blog-thumb { margin-bottom: 20px; position: relative; z-index: 1; } .blog-five .blog-thumb img { max-width: 100%; border-radius: 30px; } .blog-five .blog-tag { color: #000; font-size: 14px; font-weight: 500; font-family: "Satoshi-Medium"; line-height: 35px; display: inline-block; padding: 0 15px; background: #ffffff; border-radius: 30px; position: absolute; z-index: 1; left: 25px; top: 25px; } .blog-five .blog-meta { margin-bottom: 5px; } .blog-five .blog-meta a { color: rgba(0, 0, 0, 0.6); font-size: 18px; font-weight: 400; font-family: "Satoshi-Regular"; display: inline-block; margin-right: 4px; } .blog-five .divider { display: inline-block; background: rgba(0, 0, 0, 0.6); width: 1.5px; height: 13px; transform: rotate(15deg); margin-right: 4px; } .blog-five .blog-title { font-size: 36px; line-height: 46px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 30px; } .blog-five .blog-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .blog-five p { margin-bottom: 60px; } .blog-five .more-btn { color: #000000; font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; text-transform: uppercase; display: inline-flex; align-items: center; transition: all 0.4s ease 0s; } .blog-five .more-btn .btn-icon { position: relative; z-index: 1; } .blog-five .more-btn .btn-icon::before { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #000; background: #ffffff; z-index: -1; top: -1px; right: -15px; transition: all 0.4s ease 0s; } .blog-five .more-btn .btn-icon::after { content: ""; position: absolute; background: #000; width: 21px; height: 2px; z-index: 1; left: 20px; top: 19px; transition: all 0.4s ease 0s; } .blog-five .more-btn img { display: inline-block; transition: all 0.4s ease 0s; margin-left: 20px; } .blog-five .more-btn:hover .btn-icon::before { background: #FFBA05; border-color: #FFBA05; } .blog-five .more-btn:hover img { filter: invert(1); } @media only screen and (max-width: 1600px) { .blog-five .blog-title { font-size: 24px; line-height: 36px; } } @media only screen and (max-width: 767.98px) { .blog-five .blog-title { font-size: 20px; line-height: 30px; } } .blog-six .blog-thumb img { border-radius: 192.5px; } .classic-style { margin-bottom: 60px; position: relative; z-index: 1; } .classic-style .blog-thumb { position: relative; z-index: 1; } .classic-style .blog-thumb img { max-width: 100%; border-radius: 40px 0 40px 40px; } .classic-style .popup-video { color: #000000; font-size: 50px; width: 120px; height: 120px; line-height: 120px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #f98700; position: absolute; } .classic-style .popup-video img { width: 20px; } .classic-style button.slick-arrow { font-size: 24px; border: 0; background: rgba(7, 17, 6, 0.3); width: 45px; height: 45px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .classic-style button.slick-next { left: auto; right: 30px; } .classic-style button.slick-prev { left: 30px; } .classic-style .blog-tag { color: #000; font-size: 14px; font-weight: 500; font-family: "Satoshi-Medium"; line-height: 35px; display: inline-block; padding: 0 15px; background: #ffffff; border-radius: 0 17px 17px 0px; position: absolute; z-index: 1; left: 0; bottom: 45px; } .classic-style .blog-meta { margin-bottom: 5px; } .classic-style .blog-meta a { color: rgba(0, 0, 0, 0.6); font-size: 18px; font-weight: 400; font-family: "Satoshi-Regular"; display: inline-block; margin-right: 4px; margin-bottom: 6px; } .classic-style .blog-meta a:hover { color: #F47932; } .classic-style .blog-meta a:last-child { margin-right: 0; margin-left: 4px; } .classic-style .blog-meta .divider { display: inline-block; background: rgba(0, 0, 0, 0.6); width: 1.5px; height: 13px; transform: rotate(15deg); margin-right: 4px; } .classic-style .blog-title { font-size: 36px; line-height: 46px; font-weight: 600; font-family: "Fredoka", serif; margin-bottom: 30px; margin-top: 5px; } .classic-style .blog-title a { color: #000000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .classic-style .blog-title a:hover { color: #F47932; } .classic-style .blog-content { padding-top: 30px; } .classic-style p { margin-bottom: 30px; } .classic-style .blog-btn { color: #000000; font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; text-transform: uppercase; display: inline-flex; align-items: center; transition: all 0.4s ease 0s; } .classic-style .blog-btn .btn-icon { position: relative; z-index: 1; } .classic-style .blog-btn .btn-icon::before { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #000; z-index: -1; top: -1px; right: -15px; transition: all 0.4s ease 0s; } .classic-style .blog-btn .btn-icon::after { content: ""; position: absolute; background: #000; width: 21px; height: 1.5px; z-index: 1; left: 20px; top: 18px; transition: all 0.4s ease 0s; } .classic-style .blog-btn img { display: inline-block; transition: all 0.4s ease 0s; margin-left: 20px; } .classic-style .blog-btn:hover .btn-icon::before { background: #F47932; border-color: #F47932; } .classic-style .blog-btn:hover img { filter: invert(1); } @media only screen and (max-width: 1200px) { .classic-style .blog-meta a { font-size: 15px; font-weight: 400; } .classic-style .blog-meta a:first-child { margin-right: 3px; } .classic-style .blog-title { font-size: 28px; line-height: 1.4; } } @media only screen and (max-width: 1600px) { .classic-style { font-size: 36px; } } @media only screen and (max-width: 1200px) { .classic-style { font-size: 28px; } } @media only screen and (max-width: 767.98px) { .classic-style { margin-left: 0; } } .blockquote { background: #EAEAFF; padding: 40px 70px 44px 60px; border-left: 6px solid #F47932; border-radius: 25px; position: relative; z-index: 1; } .blockquote img { display: inline-block; } .blockquote .quote-icon { display: inline-block; } .blockquote p { color: #000000; font-family: "Fredoka", serif; font-weight: 600; font-size: 36px; line-height: 1.32; margin-bottom: 22px; margin-top: 15px; } @media only screen and (max-width: 1200px) { .blockquote p { font-size: 20px; } } .blockquote .blockquote-footer { color: #000000; display: inline-block; font-size: 22px; font-weight: 500; font-family: "Satoshi-Medium"; position: relative; } .blockquote .blockquote-footer::before { color: #000; width: 30px; height: 2px; border-radius: 6px; left: 10px; } @media only screen and (max-width: 1200px) { .blockquote .blockquote-footer { font-size: 20px; } } @media only screen and (max-width: 1200px) { .blockquote { padding-left: 15px; padding-right: 15px; } } .blog-details-wrapper .classic-style { border: 0; } .blog-details-wrapper .classic-style .blog-title { font-size: 60px; font-weight: 600; font-family: "Fredoka", serif; line-height: 1.1; } @media only screen and (max-width: 1600px) { .blog-details-wrapper .classic-style .blog-title { font-size: 45px; } } @media only screen and (max-width: 1200px) { .blog-details-wrapper .classic-style .blog-title { font-size: 36px; } } @media only screen and (max-width: 767.98px) { .blog-details-wrapper .classic-style .blog-title { font-size: 28px; } } .blog-details-wrapper .classic-style .blog-content { padding-left: 0; padding-right: 0; } .blog-details-wrapper .img-box img { border-radius: 30px 0 30px 30px; } .comment-reply-title, .comment-title, .blog-details-title { font-size: 42px; font-weight: 600; font-family: "Fredoka", serif; } @media only screen and (max-width: 1200px) { .comment-reply-title, .comment-title, .blog-details-title { font-size: 24px; } } .comment-box { position: relative; z-index: 1; border-bottom: 2px solid rgba(7, 17, 6, 0.05); } .comment-box .date { color: rgba(0, 0, 0, 0.6); font-size: 16px; font-family: "Satoshi-Regular"; margin-bottom: 0; } .comment-box .name { font-size: 20px; font-weight: 600; color: #000000; } .comment-box .comment-avatar { float: left; margin-right: 30px; margin-top: 8px; } .comment-box .comment-avatar img { width: 100px; height: 100px; } @media (max-width: 767px) { .comment-box .comment-avatar { float: none; margin-right: 0; margin-top: 0; margin-bottom: 15px; } } .comment-box .comment-content { overflow: hidden; } .comment-box .comment-content p i { margin-right: 5px; } .comment-box .comment-content h5 { margin-bottom: 3px; } .comment-box .comment-reply-link { color: #ffffff; font-size: 16px; font-weight: 500; font-family: "Fredoka", serif; padding: 10px 22px; line-height: 1; position: absolute; background: #000; z-index: 1; right: 0; top: 8px; border-radius: 4px; } @media (max-width: 767px) { .comment-box .comment-reply-link { float: none; margin-right: 0; margin-top: 0; position: relative; } } .comment-box .comment-reply-link:hover { color: #ffffff; background: #000000; } .comment-list { list-style: none; padding: 0; margin: 0; } .comment-list li { padding-bottom: 20px; margin-bottom: 45px; } .media-content { background: #EAEAFF; border-radius: 15px; margin-top: 50px; } .media-content .social-links span { color: #000000; font-size: 22px; font-weight: 500; font-family: "Fredoka", serif; display: inline-block; margin-right: 10px; } .media-content .social-links a:hover { background: #F47932; } .ht-plan { background: #ffffff; border-radius: 40px; position: relative; z-index: 2; } .ht-plan .front-shape { position: absolute; right: -101px; top: -85px; } .ht-plan .shape-holder { position: absolute; right: 0; top: 0; } .ht-plan .shape-holder .icon, .ht-plan .shape-holder .back-icon { position: absolute; right: 33px; top: 43px; } .ht-plan .shape-holder .front-shape { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-plan .shape-holder .back-shape, .ht-plan .shape-holder .back-icon { display: none; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } @media only screen and (max-width: 767.98px) { .ht-plan .shape-holder { display: none; } } .ht-plan .plan-title { color: #000000; font-size: 14px; font-weight: 700; font-family: "Satoshi-Bold"; text-transform: uppercase; margin-bottom: 0; } .ht-plan .plan-desc { font-size: 20px; font-weight: 400; font-family: "Satoshi-Regular"; margin-bottom: 32px; } .ht-plan .plan-price { color: #000000; font-size: 82px; font-weight: 500; font-family: "Fredoka", serif; } .ht-plan .price-border { height: 1px; width: 100%; background: rgba(0, 0, 0, 0.15); display: block; margin-bottom: 38px; } .ht-plan .feature-list { list-style: none; padding: 0; margin: 0; } .ht-plan .feature-list li { font-size: 18px; font-weight: 700; color: #000000; font-family: "Satoshi-Bold"; display: block; padding-bottom: 17px; } .ht-plan .feature-list li .check-mark { color: #ffffff; font-size: 14px; line-height: 18px; font-weight: 700; display: inline-block; text-align: center; width: 18px; height: 18px; border-radius: 50%; background: #F47932; margin-right: 10px; } .ht-plan .feature-list li.price-available .check-mark { color: #ffffff; } .ht-plan .feature-list li.unavailable { color: rgba(0, 0, 0, 0.4); } .ht-plan .feature-list li.unavailable .check-mark { color: #000000; background: #F4F4F4; } .ht-plan .price-btn { color: #000000; font-size: 18px; font-weight: 600; font-family: "Fredoka", serif; text-transform: uppercase; padding: 13px 30px 12px 25px; display: inline-flex; justify-content: space-between; border: 1.5px solid #000; border-radius: 32.5px 0 32.5px 32.5px; width: 100%; background: transparent; margin-top: 35px; } .ht-plan .price-btn::before { background: #000; } .ht-plan .price-btn img { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .ht-plan.active .price-btn, .ht-plan:hover .price-btn { color: #ffffff; border-color: #F47932; background: #F47932; } .ht-plan.active .price-btn img, .ht-plan:hover .price-btn img { filter: invert(1); } @media only screen and (max-width: 1600px) { .ht-plan .plan-price { font-size: 45px; } } @media only screen and (max-width: 1200px) { .ht-plan .price-title { font-size: 24px; } } @media only screen and (max-width: 991.98px) { .ht-plan .feature-list li { font-size: 16px; } .ht-plan .plan-price { font-size: 32px; } } @media only screen and (max-width: 767.98px) { .ht-plan .front-shape { display: none; } .ht-plan .price-btn { font-size: 16px; } .ht-plan .feature-list li .check-mark { margin-right: 0; } } .ht-plan-tag { border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000; text-align: center; background: #0BC270; position: absolute; width: 100%; top: 0; left: 0; border-radius: 20px 20px 0px 0px; color: #fff; font-weight: 700; font-family: "Fredoka", serif; height: 50px; line-height: 50px; } .ht-plan-header { padding-left: 50px; padding-right: 50px; padding-top: 50px; } @media only screen and (max-width: 1600px) { .ht-plan-header { padding-left: 15px; padding-right: 15px; } } .ht-plan-inner { padding: 0 43px 50px 43px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } @media only screen and (max-width: 1600px) { .ht-plan-inner { padding: 0 15px 40px 15px; } } .pricing-nav, .pricing-nav-2 { padding: 0; margin: 0; border: 0; background: #ffffff; display: inline-flex; justify-content: center; border-radius: 40px; width: max-content; text-align: center; margin: 0 auto; padding: 7px 8px; } .pricing-nav .nav-item, .pricing-nav-2 .nav-item { border: 0; padding: 0; margin: 0; } .pricing-nav .nav-item:first-child .nav-link, .pricing-nav-2 .nav-item:first-child .nav-link { margin-right: 15px; } .pricing-nav .nav-item .nav-link, .pricing-nav-2 .nav-item .nav-link { color: #000000; font-family: "Fredoka", serif; font-size: 24px; font-weight: 500; line-height: 1; background: transparent; border: 0; border-radius: 70px; padding: 18px 33px 18px 33px; } .pricing-nav .nav-item .nav-link.active, .pricing-nav-2 .nav-item .nav-link.active { color: #ffffff; background: #F47932; } @media only screen and (max-width: 767.98px) { .pricing-nav .nav-item .nav-link, .pricing-nav-2 .nav-item .nav-link { font-size: 20px; padding: 15px; } } .pricing-nav-2 { border: 1px solid #000; } .plan-style-2 { border: 1px solid #000; } .copyright-text { font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; color: #000000; } .copyright-text a { color: #000000; font-family: "Satoshi-Bold"; font-weight: 700; } .copyright-text a:hover { color: #F47932; } @media only screen and (max-width: 991.98px) { .copyright-text { font-size: 18px; } } .footer-widget { position: relative; z-index: 1; } .footer-widget .widget-title { color: #fff; font-size: 28px; font-weight: 500; font-family: "Fredoka", serif; margin-bottom: 30px; } .footer-widget ul { padding-left: 0; } .footer-widget ul li { list-style: none; } .footer-widget ul li a { color: #000000; font-size: 18px; line-height: 10px; font-weight: 400; font-family: "Satoshi-Regular"; display: inline-block; margin-bottom: 15px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .footer-widget ul li a:hover { color: #F47932; } @media only screen and (max-width: 991.98px) { .footer-widget .widget-title { font-size: 24px; } } .ht-widget-contact .info-box { display: flex; } .ht-widget-contact .info-box-icon { font-size: 24px; margin-right: 15px; color: #f98700; line-height: 1; margin-top: 10px; } .ht-widget-contact .ht-content { font-size: 16px; } .ht-widget-contact .ht-content:hover { color: #f98700; } .ht-widget-contact .info-box-label { display: block; font-size: 18px; font-weight: 600; line-height: 1; margin-bottom: 10px; } .copyright-wrap { border-top: 1px solid rgba(0, 0, 0, 0.2); } .footer-menu { padding: 0; margin: 0; list-style: none; } .footer-menu li { display: inline-block; } .footer-menu li:last-child a { margin-right: 0; } .footer-menu li a { color: #000000; font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; margin: 0 10px; display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .copyright-wrap .footer-menu li a { color: #000000; font-size: 14px!important; font-weight: 500; font-family: "Satoshi-Medium"; margin: 0 10px; display: inline-block; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .copyright-wrap{ font-size: 14px!important;} .footer-four .copyright-text a { font-weight: 500; font-family: "Satoshi-Medium";font-size: 14px!important; } .footer-menu li a:hover { color: #F47932; } @media only screen and (max-width: 1200px) { .footer-menu li a { font-size: 18px; } } .footer-gallery { display: flex; gap: 10px; flex-wrap: wrap; } .footer-gallery a { display: inline-block; } .footer-gallery a img { border-radius: 15px; display: inline-block; } .footer-one { position: relative; z-index: 1; } .footer-one .widget-title { color: #000000; } .footer-one p { color: #000000; font-size: 20px; line-height: 36px; } .footer-one .copyright-wrap { border-top: 1px solid rgba(0, 0, 0, 0.2); } .footer-two { background: #EAEAFF; } .footer-two .copyright-wrap { padding-bottom: 30px; border-color: rgba(0, 0, 0, 0.2); } .footer-two .footer-logo { margin-bottom: 26px; } .footer-two .widget-title { color: #000000; } .footer-two p { color: #000000; font-size: 20px; line-height: 36px; } .footer-two .description-text { margin-bottom: 70px; } .footer-two .footer-widget ul li a { color: #000000; } .footer-two .footer-widget ul li a:hover { color: #F47932; } .footer-two .social-links a:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .footer-two .footer-menu li a { color: #000000; } .footer-two .footer-menu li a:hover { color: #F47932; } .footer-two .copyright-text { color: #000000; } .footer-two .copyright-text a { color: #000000; } .footer-two .copyright-text a:hover { color: #F47932; } .footer-three .copyright-wrap { padding-bottom: 30px; border-color: rgba(0, 0, 0, 0.2); } .footer-three .footer-logo { margin-bottom: 26px; } .footer-three .widget-title { color: #000000; } .footer-three p { color: #000000; font-size: 20px; line-height: 36px; } .footer-three .description-text { margin-bottom: 70px; } .footer-three .footer-widget ul li a { color: #000000; } .footer-three .footer-widget ul li a:hover { color: #F47932; } .footer-three .social-links a:hover { color: #ffffff; background: #F47932; border-color: #F47932; } .footer-three .footer-menu li a { color: #000000; } .footer-three .footer-menu li a:hover { color: #F47932; } .footer-three .copyright-text { color: #000000; } .footer-three .copyright-text a { color: #000000; } .footer-three .copyright-text a:hover { color: #F47932; } .footer-four { position: relative; z-index: 1; } .footer-four .footer-shape { position: absolute; top: -82px; z-index: 3; right: 28%; transform: translateX(-28%); } .footer-four .footer-border { border-top: 1px solid rgba(0, 0, 0, 0.2); } .footer-four .widget-title { margin-bottom: 40px; } .footer-four .description-text { font-size: 16px; line-height: 20px; max-width: 63%; margin-bottom: 48px; } .footer-four .footer-logo { margin-bottom: 30px; } .footer-four .footer-widget ul { gap: 55px; } .footer-four .footer-widget ul li a { color: #fff; font-size: 20px; font-weight: 500; font-family: "Fredoka", serif; display: flex; } .footer-four .footer-widget ul li a:hover { color: #f98700; } .footer-four .footer-menu li a { color: #fff; } .footer-four .footer-menu li a:hover { color: #F47932; } .footer-four .copyright-text a { color: #fff; } .footer-four .copyright-text a:hover { color: #F47932; } .footer-four .social-links a { color: #000000; border-color: #ffffff; background: #ffffff; } .footer-four .social-links a:hover { color: #ffffff; background: #000; border-color: #000; } .footer-four .copyright-wrap { border-top: 1px solid rgba(249, 135, 0, 1); } .footer-four .copyright-text a { font-weight: 500; font-family: "Satoshi-Medium"; } @media only screen and (max-width: 1600px) { .footer-four .footer-shape { dxisplay: none; } } @media only screen and (max-width: 1200px) { .footer-four .description-text { max-width: 100%; } } @media only screen and (max-width: 991.98px) { .footer-four .footer-widget ul { gap: 20px; } } .footer-five { position: relative; z-index: 1; background: #FFE4DD; border-radius: 50px; margin-left: 20px; margin-right: 20px; } .footer-five .newsletter-title { font-size: 110px; font-family: "Fredoka", serif; font-weight: 600; line-height: 1; } @media only screen and (max-width: 1600px) { .footer-five .newsletter-title { font-size: 75px; } } @media only screen and (max-width: 1200px) { .footer-five .newsletter-title { font-size: 55px; } } @media only screen and (max-width: 767.98px) { .footer-five .newsletter-title { font-size: 45px; } } .footer-five .copyright-wrap { padding-top: 30px; padding-bottom: 30px; border-color: rgba(0, 0, 0, 0.2); } .footer-five .social-links a { color: #000000; width: 50px; height: 50px; background: #ffffff; border-color: #ffffff; } .footer-five .social-links a:hover { border-color: #000; background: #FFBA05; } .footer-five .footer-menu li a:hover { color: #FFBA05; } .footer-five .copyright-text a { font-size: 20px; font-weight: 500; font-family: "Satoshi-Medium"; } .footer-five .copyright-text a:hover { color: #FFBA05; } /*# sourceMappingURL=main.css.map */ .whats_float img{width: 80px} .whats_float { position: fixed; bottom: 70px; right: 45px; width: 70px; z-index: 999; }.whats_float:hover { transform: scale(1.2); } .bgcinza{background-color: #f5f2ed} .broder{border-radius: 25px} .only_desktop{display: block} .only_mobile{display: none} .caixa_servicos{width: 100%; height: 300px; overflow:hidden;transition: all 0.5s ease;} .caixa_servicos:hover .foto_servicos{ transform: scale(1.2)} .foto_servicos{width: 100%; height: 300px; background-size: cover; background-position: center;transition: all 0.5s ease;} .foto_servicos-gde{width: 100%; min-height: 460px; background-size: cover; background-position: center;transition: all 0.5s ease; border-radius: 12px} .theme-bg-preto{background-color:#229ebd } .theme-bg-preto {color:#fff } .theme-bg-preto p{color:#fff } .depoimentofoto{width: 350px; height: 400px; background-size: cover; background-position: center;-webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;} @media (max-width: 1400px) { .portfolio-wrap-2 .pf-title { font-size: 20px; } .service-wrap-1 .service-title { font-size: 19px; } .feature-list-one .feature-title { font-size: 17px; } .breadcrumb-wrapper { padding-top: 211px; padding-bottom: 92px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2; } .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 90%; } .footer-four .footer-shape { margin-left: 25px;left: 45%; } } .branco{color: #fff} textarea{font-size: 16px!important; color: #000; font-weight: 500} .alt80{width: 100%; height: 80px} @media (max-width: 767px) { } .theme-banner-four { background-image: url(https://petzelodaycare.com.br/wp-content/themes/tema/assets/img/banner.jpg); } @media (max-width: 767px) { .theme-menu-four { width: 94%; margin: auto; padding-top: 25; margin-top: 25px; } .theme-banner-four { background-size: cover; background-color:#f5690b; background-repeat: no-repeat; background-image: url(https://petzelodaycare.com.br/wp-content/themes/tema/assets/img/banner-mobile.jpg); } .pt-lg-120 { padding-top:40px; } .offset-widget .info-widget p { color: #ffffff; font-size: 16px; } .ht-menu-wrapper .ht-menu-area { background-color: #229ebd; } .theme-banner-four { padding-top: 100px; padding-left: 0; padding-bottom: 2px; } .footer-four .footer-shape { display: none; } .only_desktop{display: none} .only_mobile{display: block} }