/*-- 12-17-2023 --*/ .thm-btn-two { position: relative; display: inline-block; vertical-align: middle; -webkit-appearance: none; appearance: none; outline: none; background-color: var(--oxpins-base); color: var(--oxpins-white); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; border-radius: 100px; padding: 13px 39px; transition: all 0.5s linear; overflow: hidden; z-index: 1; border: none; } .thm-btn-two:hover { color: var(--oxpins-white); } .thm-btn-two::before { transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: -230%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: -1; background-color: var(--oxpins-primary); } .thm-btn-two:hover::before { top: -40%; } .thm-btn-two i { width: 28px; height: 28px; position: relative; display: inline-flex; align-items: center; justify-content: center; background-color: var(--oxpins-gray3); font-size: 14px; color: var(--oxpins-black); border-radius: 50%; margin-left: 10px; overflow: hidden; } .thm-btn-two i::before { transition: all 0.7s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .thm-btn-two:hover i::before { animation: iconTranslateY 0.4s forwards; } @keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51% { opacity: 1; } } .section-title { position: relative; margin-bottom: 45px; } @media (max-width: 767px) { .section-title { margin-bottom: 40px; } } .section-title__tagline { color: var(--oxpins-secondary); } .section-title__title { font-size: 33px; line-height: 40px; letter-spacing: -1.2px; } @media (max-width: 767px) { .section-title__title { font-size: 32px; } } .section-title--home-five { position: relative; margin-bottom: 45px; } @media (max-width: 767px) { .section-title--home-five { margin-bottom: 35px; } } .section-title--home-five .section-title__tagline { font-family: var(--oxpins-font); font-weight: 500; font-size: 16px; color: var(--oxpins-gray); line-height: 1; position: relative; } .section-title--home-five .section-title__tagline__left-icon { position: relative; display: inline-block; color: var(--oxpins-base); font-size: 13px; margin-right: 4px; } .section-title--home-five .section-title__tagline__right-icon { position: relative; display: inline-block; color: var(--oxpins-base); font-size: 13px; margin-left: 4px; } .section-title--home-five .section-title__title { margin-top: 4px; font-weight: 400; line-height: 50px; } @media (max-width: 767px) { .section-title--home-five .section-title__title { font-size: 30px; line-height: 40px; } } /*-------------------------------------------------------------- # Home 04 Header --------------------------------------------------------------*/ .main-header-four { position: relative; left: 0; top: 0px; width: 100%; background-color: #f3e7d2; z-index: 99; } .main-header-four.stricky-header { position: fixed; z-index: 991; top: 0; left: 0; background-color: #f3e7d2; width: 100%; visibility: hidden; transform: translateY(-120%); transition: visibility 500ms ease; transition: transform 500ms ease, visibility 500ms ease; box-shadow: 1px 5px 20px 0px rgb(206 206 206 / 50%); } .main-header-four.stricky-header.stricky-fixed { transform: translateY(0); visibility: visible; } .main-header-four__inner { display: flex; position: relative; width: 100%; padding: 0 95px; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center; } @media (max-width: 1399px) { .main-header-four__inner { padding: 0 25px; } } @media (max-width: 1299px) { .main-header-four__inner { padding: 0 15px; } } @media (max-width: 1199px) { .main-header-four__inner { padding: 0 15px; } } .main-header-four__main-menu { position: static; padding-right: 150px; } @media (max-width: 1299px) { .main-header-four__main-menu { padding-left: 50px; } } @media (max-width: 1199px) { .main-header-four__main-menu { margin-right: auto; padding-left: 0; } } .main-header-four .main-menu .main-menu__list > li.megamenu, .main-header-four.stricky-header .main-menu__list > li.megamenu { position: static; } .main-header-four .main-menu .main-menu__list > li.megamenu > ul, .main-header-four.stricky-header .main-menu__list > li.megamenu > ul { left: auto; } .main-header-four .home-showcase__inner { padding: 40px 0 40px; background-color: transparent; box-shadow: none; border-radius: 0; } .main-header-four .main-menu .main-menu__list > li > a, .main-header-four.stricky-header .main-menu__list > li > a { color: #9d7c63; } .main-header-four .main-menu .main-menu__list > li, .main-header-four.stricky-header .main-menu__list > li { padding-top: 30px; padding-bottom: 30px; } .main-header-four .main-menu .main-menu__list > li.current > a, .main-header-four .main-menu .main-menu__list > li.current-menu-ancestor > a, .main-header-four .main-menu .main-menu__list > li.current-menu-item > a, .main-header-four .main-menu .main-menu__list > li.current-menu-page > a, .main-header-four .main-menu .main-menu__list > li.current_page_item > a, .main-header-four .main-menu .main-menu__list > li:hover > a, .main-header-four.stricky-header .main-menu__list > li.current > a, .main-header-four.stricky-header .main-menu__list > li.current_page_item > a, .main-header-four.stricky-header .main-menu__list > li.current-menu-ancestor > a, .main-header-four.stricky-header .main-menu__list > li.current-menu-item > a, .main-header-four.stricky-header .main-menu__list > li.current-menu-page > a, .main-header-four.stricky-header .main-menu__list > li:hover > a { color: #22140c; } .main-header-four .main-menu .mobile-nav__toggler { color: var(--oxpins-gray2); } .main-header-four__btn { position: relative; display: flex; align-items: center; } @media (max-width: 1199px) { .main-header-four__btn { margin-left: 20px; } } @media (max-width: 767px) { .main-header-four__btn { margin-left: 0; } } .main-header-four__btn .thm-btn { background-color: var(--oxpins-white); padding: 5px 30px; } @media (max-width: 767px) { .main-header-four__btn .thm-btn { display: none; } } .main-header-four__btn .thm-btn::before { background-color: var(--oxpins-base); } .main-header-four__btn__border { width: 1px; height: 40px; background-color: rgba(var(--oxpins-gray2-rgb), 0.2); margin-left: 35px; margin-right: 15px; } @media (max-width: 1299px) { .main-header-four__btn__border { margin-left: 20px; margin-right: 0; } } .main-header-four__search, .main-header-four__cart { position: relative; display: inline-block; color: #9d7c63; font-size: 20px; transition: all 500ms ease; margin-right: 20px; } .main-header-four__search:hover, .main-header-four__cart:hover { color: #2f1a0c; } .topbar-five { position: relative; z-index: 2; background-color: #1E1E1E; padding: 10px 0; } @media (max-width: 767px) { .topbar-five { display: none; } } .topbar-five::before { position: absolute; left: 0; top: 0; width: 15.77%; height: 100%; content: ""; background-color: var(--oxpins-white); } @media (max-width: 1599px) { .topbar-five::before { display: none; } } .topbar-five::after { position: absolute; right: 0; top: 0; width: 7.89%; height: 100%; content: ""; background-color: var(--oxpins-white); } @media (max-width: 1599px) { .topbar-five::after { display: none; } } .topbar-five__info { display: flex; align-items: center; gap: 35px; position: relative; width: 100%; } .topbar-five__info li { position: relative; font-size: 14px; font-weight: 600; color: var(--oxpins-gray); } .topbar-five__info li i { font-size: 12px; color: var(--oxpins-base); margin-right: 1px; } .topbar-five__info li i.oxpins-icon-two-envelop { position: relative; top: 1px; } .topbar-five__info li a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .topbar-five__info li a:hover { color: var(--oxpins-base); background-size: 100% 1px; } .topbar-five__info li:last-child { margin-left: auto; } .main-header-five { position: absolute; left: 0; top: 50px; width: 100%; background-color: transparent; z-index: 99; } @media (max-width: 767px) { .main-header-five { top: 0; } } .main-header-five::after { position: absolute; right: 0; top: 0; width: 92.11%; height: 100%; content: ""; background-color: var(--oxpins-white); z-index: -1; } @media (max-width: 1599px) { .main-header-five::after { width: 100%; } } .main-header-five::before { position: absolute; right: 0; top: 0; width: 15.77%; height: 100%; content: ""; background-color: var(--oxpins-base); } @media (max-width: 1599px) { .main-header-five::before { width: 12%; } } @media (max-width: 1299px) { .main-header-five::before { width: 110px; } } @media (max-width: 767px) { .main-header-five::before { display: none; } } .main-header-five.stricky-header { position: fixed; z-index: 991; top: 0; left: 0; background-color: var(--oxpins-white); width: 100%; visibility: hidden; transform: translateY(-120%); transition: visibility 500ms ease; transition: transform 500ms ease, visibility 500ms ease; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); } .main-header-five.stricky-header.stricky-fixed { transform: translateY(0); visibility: visible; } .main-header-five__inner { display: flex; align-items: center; position: relative; width: 100%; } @media (min-width: 1600px) { .main-header-five__inner { padding-right: 7.89%; padding-left: 10%; } .main-header-five__inner::before { position: absolute; left: 0; top: 0; width: 8%; height: 40px; content: ""; background-color: var(--oxpins-white); z-index: -1; } } @media (max-width: 1399px) { .main-header-five__inner { padding: 0 15px; } } .main-header-five__main-menu { position: static; padding-left: 112px; } @media (max-width: 1599px) { .main-header-five__main-menu { padding-left: 20px; } } @media (max-width: 1199px) { .main-header-five__main-menu { margin-left: auto; padding-left: 0; } } .main-header-five .main-menu .main-menu__list > li.megamenu, .main-header-five.stricky-header .main-menu__list > li.megamenu { position: static; } .main-header-five .main-menu .main-menu__list > li.megamenu > ul, .main-header-five.stricky-header .main-menu__list > li.megamenu > ul { left: auto; } .main-header-five .home-showcase__inner { padding: 40px 0 40px; background-color: transparent; box-shadow: none; border-radius: 0; } .main-header-five .main-menu .main-menu__list > li > a, .main-header-five.stricky-header .main-menu__list > li > a { color: var(--oxpins-gray); } .main-header-five .main-menu .main-menu__list > li, .main-header-five.stricky-header .main-menu__list > li { padding-top: 25px; padding-bottom: 25px; margin-left: 40px; } .main-header-five .main-menu .main-menu__list > li.current > a, .main-header-five .main-menu .main-menu__list > li.current-menu-ancestor > a, .main-header-five .main-menu .main-menu__list > li.current-menu-item > a, .main-header-five .main-menu .main-menu__list > li.current-menu-page > a, .main-header-five .main-menu .main-menu__list > li.current_page_item > a, .main-header-five .main-menu .main-menu__list > li:hover > a, .main-header-five.stricky-header .main-menu__list > li.current > a, .main-header-five.stricky-header .main-menu__list > li.current_page_item > a, .main-header-five.stricky-header .main-menu__list > li.current-menu-ancestor > a, .main-header-five.stricky-header .main-menu__list > li.current-menu-item > a, .main-header-five.stricky-header .main-menu__list > li.current-menu-page > a, .main-header-five.stricky-header .main-menu__list > li:hover > a { color: var(--oxpins-base); } .main-header-five .main-menu .mobile-nav__toggler { color: var(--oxpins-gray); } .main-header-five__btn { position: relative; display: flex; align-items: center; justify-content: flex-end; margin-left: auto; } @media (max-width: 1199px) { .main-header-five__btn { margin-left: 20px; } } @media (max-width: 767px) { .main-header-five__btn { margin-left: 0; } } .main-header-five__btn .thm-btn-two { border-radius: 6px; padding: 5px 30px; } @media (max-width: 1299px) { .main-header-five__btn .thm-btn-two { padding: 5px 20px; } } @media (max-width: 767px) { .main-header-five__btn .thm-btn-two { display: none; } } .main-header-five__btn__border { width: 1px; height: 40px; background-color: rgba(var(--oxpins-base-rgb), 0.2); margin-left: 35px; margin-right: 11px; } @media (max-width: 1299px) { .main-header-five__btn__border { margin-left: 20px; margin-right: 0; } } .main-header-five__search, .main-header-five__cart { position: relative; display: inline-block; color: var(--oxpins-black); font-size: 20px; transition: all 500ms ease; margin-left: 20px; } @media (max-width: 1299px) { .main-header-five__search, .main-header-five__cart { margin-left: 15px; } } .main-header-five__search:hover, .main-header-five__cart:hover { color: var(--oxpins-base); } .main-header-five__social { position: relative; display: flex; align-items: center; gap: 25px; margin-left: 65px; } @media (max-width: 1299px) { .main-header-five__social { margin-left: 25px; gap: 12px; } } @media (max-width: 767px) { .main-header-five__social { display: none; } } .main-header-five__social a { font-size: 14px; color: var(--oxpins-white); transition: all 500ms ease; } .main-header-five__social a:hover { color: var(--oxpins-black); } /*-------------------------------------------------------------- # Home Slider --------------------------------------------------------------*/ .main-slider-four { position: relative; background-color: var(--oxpins-base); } .main-slider-four__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; mix-blend-mode: luminosity; background-color: var(--oxpins-base); } .main-slider-four__content { position: relative; z-index: 2; padding-top: 250px; padding-bottom: 196px; } @media (max-width: 1199px) { .main-slider-four__content { padding-top: 200px; padding-bottom: 126px; } } @media (max-width: 767px) { .main-slider-four__content { padding-top: 170px; padding-bottom: 90px; } } .main-slider-four__sub-title { font-family: var(--oxpins-font-three); font-size: 30px; font-weight: 700; color: var(--oxpins-primary); margin: 0 0 18px; opacity: 0; visibility: hidden; transform: translateY(-120px); transition-delay: 1000ms; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; } @media (max-width: 767px) { .main-slider-four__sub-title { font-size: 25px; } } .main-slider-four__title { font-size: 70px; font-weight: 900; line-height: 107.9%; letter-spacing: -2.1px; color: var(--oxpins-white); margin: 0 0 26px; opacity: 0; visibility: hidden; transform: translateX(-120px); transition-delay: 1100ms; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; } @media (max-width: 767px) { .main-slider-four__title { font-size: 38px; letter-spacing: -1px; } } .main-slider-four__text { font-size: 18px; font-weight: 600; line-height: 30px; color: var(--oxpins-gray2); max-width: 560px; margin: 0 0 42px; opacity: 0; visibility: hidden; transform: translateX(120px); transition-delay: 1200ms; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; } @media (max-width: 767px) { .main-slider-four__text { font-size: 16px; } } .main-slider-four__btn-box { position: relative; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(120px); transition-delay: 1300ms; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; } .main-slider-four .thm-btn-two { background-color: var(--oxpins-primary); } .main-slider-four .thm-btn-two::before { background-color: var(--oxpins-black); } .main-slider-four .thm-btn-two i { background-color: var(--oxpins-white); } .main-slider-four__image { position: absolute; bottom: 0; z-index: 2; max-width: 748px; width: 100%; text-align: center; margin-left: -102px; transition: transform 1000ms ease, opacity 1000ms ease; transform: translatex(50%) scaleY(2); filter: blur(10px); opacity: 0; } @media (max-width: 1399px) { .main-slider-four__image { max-width: 640px; } } @media (max-width: 1199px) { .main-slider-four__image { display: none; } } .main-slider-four__image__border { position: absolute; left: 0; bottom: 0; width: 100%; height: 803px; } @media (max-width: 1399px) { .main-slider-four__image__border { background-position: bottom center; background-repeat: no-repeat; background-size: contain; } } .main-slider-four__image__inner { mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: bottom center; mask-size: auto; } @media (max-width: 1399px) { .main-slider-four__image__inner { width: 86%; margin: 0 auto; } } .main-slider-four__image__shape-one { position: absolute; left: -76px; bottom: 85px; width: 132px; height: 132px; border-radius: 50%; border: 12px solid var(--oxpins-primary); animation: arrowMove 3s linear 0s infinite; } .main-slider-four__image__shape-one img { width: 100%; height: 100%; object-fit: cover; } @keyframes arrowMove { 0%, 100% { transform: rotate(0deg) translateY(0); } 25%, 75% { transform: rotate(-2deg) translateY(10px); } 50% { transform: rotate(-4deg) translateY(15px); } } .main-slider-four__image__shape-two { position: absolute; right: -68px; bottom: 198px; width: 111px; height: 97px; animation: zoomBig2 3s linear 0s infinite; } .main-slider-four__image__shape-two img { width: 100%; height: 100%; object-fit: cover; } @keyframes zoomBig2 { 0% { transform: scale(1, 1); } 50% { transform: scale(0.9, 0.9); } 100% { transform: scale(1, 1); } } .main-slider-four__image__shape-three { position: absolute; right: 79px; top: 0; width: 142px; height: 142px; border-radius: 50%; border: 13px solid var(--oxpins-primary); animation: airTree 3s linear 0s infinite; } .main-slider-four__image__shape-three img { width: 100%; height: 100%; object-fit: cover; } @keyframes airTree { 0%, 100% { -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); } 25%, 75% { -webkit-transform: rotate(5deg) translateX(15px); transform: rotate(5deg) translateX(15px); } 50% { -webkit-transform: rotate(10deg) translateX(30px); transform: rotate(10deg) translateX(30px); } } .main-slider-four .swiper-slide-active .main-slider-four__image { opacity: 1; transform: translatex(0) scaleY(1); filter: blur(0); transition-delay: 1200ms; } .main-slider-four .swiper-slide-active .main-slider-four__sub-title, .main-slider-four .swiper-slide-active .main-slider-four__title, .main-slider-four .swiper-slide-active .main-slider-four__text, .main-slider-four .swiper-slide-active .main-slider-four__btn-box { visibility: visible; opacity: 1; -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } .main-slider-five { position: relative; } .main-slider-five__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: var(--oxpins-black); transform: scale(1); transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease; transition: transform 7000ms ease, opacity 1500ms ease-in; } .main-slider-five__bg::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-color: var(--oxpins-black); opacity: 0.7; } .main-slider-five .swiper-slide-active .main-slider-five__bg { transform: scale(1.1); } .main-slider-five__shape { position: absolute; left: 0; left: 9%; top: 5%; bottom: 0; margin: auto; display: flex; align-items: center; width: 100%; height: 70%; background-position: left top; background-repeat: no-repeat; opacity: 0.35; mix-blend-mode: luminosity; animation: movebounce3 3s linear 0s infinite; } .main-slider-five__content { position: relative; z-index: 2; padding-top: 274px; padding-bottom: 266px; } @media (max-width: 1199px) { .main-slider-five__content { padding-top: 200px; padding-bottom: 180px; } } @media (max-width: 767px) { .main-slider-five__content { padding-top: 150px; padding-bottom: 180px; } } .main-slider-five__sub-title { position: relative; margin: 0 0 -12px 188px; opacity: 0; visibility: hidden; transform: translateY(-120px); transition-delay: 1000ms; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; } @media (max-width: 767px) { .main-slider-five__sub-title { margin: 0 0 -12px 75px; } } .main-slider-five__sub-title span { font-family: var(--oxpins-font); font-size: 14px; font-weight: 800; color: var(--oxpins-white); padding: 16px 44px 47px 43px; display: inline-block; animation: float-bob-y-3 3s linear 0s infinite; background-color: var(--oxpins-base); mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; } .main-slider-five__sub-title span i { font-style: normal; transform: rotate(2.533deg); position: relative; display: block; } @keyframes float-bob-y-3 { 0% { transform: translateY(0px) translateX(0px) rotate(0deg); } 50% { transform: translateY(10px) translateX(10px) rotate(5deg); } 100% { transform: translateY(0px) translateX(0px) rotate(0deg); } } .main-slider-five__title { font-size: 70px; font-weight: 400; line-height: 90px; letter-spacing: 0; color: var(--oxpins-white); margin: 0 0 5px; opacity: 0; visibility: hidden; transform: translateX(-120px); transition-delay: 1100ms; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; } @media (max-width: 991px) { .main-slider-five__title { font-size: 65px; line-height: 80px; } } @media (max-width: 767px) { .main-slider-five__title { font-size: 38px; line-height: 50px; } } .main-slider-five__text { font-size: 18px; font-weight: 600; line-height: 30px; color: rgba(227, 227, 227, 0.7); margin: 0 0 42px; opacity: 0; visibility: hidden; transform: translateX(120px); transition-delay: 1200ms; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; } @media (max-width: 767px) { .main-slider-five__text { font-size: 16px; } .main-slider-five__text br { display: none; } } .main-slider-five__btn-box { position: relative; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(120px); transition-delay: 1300ms; transition: opacity 2000ms ease, -webkit-transform 2000ms ease; transition: transform 2000ms ease, opacity 2000ms ease; } .main-slider-five .thm-btn-two { position: relative; padding: 13px 40px; border-radius: 6px; } .main-slider-five .swiper-slide-active .main-slider-five__sub-title, .main-slider-five .swiper-slide-active .main-slider-five__title, .main-slider-five .swiper-slide-active .main-slider-five__text, .main-slider-five .swiper-slide-active .main-slider-five__btn-box { visibility: visible; opacity: 1; -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } .main-slider-five__nav { width: 100%; max-width: 100%; padding: 0; position: absolute; top: 50%; left: 50%; z-index: 100; transform: translateY(-50%) translateX(-50%); display: flex; align-items: center; justify-content: space-between; height: 0; line-height: 0; } @media (max-width: 767px) { .main-slider-five__nav { display: none; } } .main-slider-five__nav .swiper-button-prev { position: absolute; left: 30px; top: 0; width: 50px; height: 50px; background-color: var(--oxpins-white); font-size: 18px; color: var(--oxpins-black); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s linear; } @media (min-width: 1500px) { .main-slider-five__nav .swiper-button-prev { left: 100px; } } @media (max-width: 1300px) { .main-slider-five__nav .swiper-button-prev { left: auto; right: 30px; top: 30px; } } .main-slider-five__nav .swiper-button-prev::after { display: none; } .main-slider-five__nav .swiper-button-prev:hover { background-color: var(--oxpins-base); color: var(--oxpins-white); } .main-slider-five__nav .swiper-button-next { position: absolute; right: 30px; top: 0; width: 50px; height: 50px; background-color: var(--oxpins-white); font-size: 18px; color: var(--oxpins-black); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s linear; } @media (min-width: 1500px) { .main-slider-five__nav .swiper-button-next { right: 100px; } } @media (max-width: 1300px) { .main-slider-five__nav .swiper-button-next { top: -30px; } } .main-slider-five__nav .swiper-button-next::after { display: none; } .main-slider-five__nav .swiper-button-next:hover { background-color: var(--oxpins-base); color: var(--oxpins-white); } /*-------------------------------------------------------------- # Pillar and About --------------------------------------------------------------*/ .about-pillar { position: relative; z-index: 5; } .about-pillar__bg { position: absolute; top: 0; left: 0; right: 0; max-width: 1637px; width: 100%; height: 100%; margin: 0 auto; background-color: var(--oxpins-gray3); mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; } .pillar { position: relative; z-index: 5; padding: 120px 0; } @media (max-width: 767px) { .pillar { padding: 80px 0; } } .pillar__wrapper { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0; } @media (max-width: 1199px) { .pillar__wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } } @media (max-width: 767px) { .pillar__wrapper { display: block; } } .pillar__item { position: relative; width: 209px; height: 209px; background-color: var(--oxpins-white); border-radius: 50%; display: flex; align-items: center; flex-direction: column; overflow: hidden; justify-content: center; filter: drop-shadow(0px 4.94px 37.049px rgba(0, 0, 0, 0.06)); transition: all 0.4s linear; z-index: 2; } @media (max-width: 767px) { .pillar__item { margin: 0 auto 30px; } } .pillar__item::before { transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: -230%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: -1; background-color: var(--oxpins-base); } .pillar__item:hover::before { top: -50%; } .pillar__item img { max-width: 100%; max-height: 79px; } .pillar__item__title { font-size: 24px; color: var(--oxpins-black); font-weight: 700; display: block; margin: 10px 0 0; transition: all 0.4s linear; } .pillar__item:hover .pillar__item__title { color: var(--oxpins-white); } .about-five { position: relative; z-index: 3; padding: 0 0 300px; } @media (max-width: 767px) { .about-five { padding: 0 0 230px; } } .about-five__image { position: relative; border-radius: 583px; background: rgba(var(--oxpins-white-rgb), 0.5); padding: 31px; } @media (min-width: 1200px) { .about-five__image { margin-left: -13px; } } .about-five__image__inner { mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; } .about-five__image__inner img { max-width: 100%; } .about-five__image__info { position: absolute; left: 0; bottom: 92px; border-radius: 20px; background: var(--oxpins-white); box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.06); width: 299px; min-height: 51px; padding: 22px 20px 23px 99px; } @media (min-width: 992px) and (max-width: 1199px) { .about-five__image__info { bottom: 0; } } @media (max-width: 767px) { .about-five__image__info { bottom: 0; } } .about-five__image__info__icon { width: 51px; height: 51px; background-color: var(--oxpins-base); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--oxpins-primary); font-size: 25px; position: absolute; left: 26px; top: 0; bottom: 0; margin: auto; } .about-five__image__info__icon span { display: block; transition: all 0.6s ease; } .about-five__image__info:hover .about-five__image__info__icon span { transform: rotateY(180deg); } .about-five__image__info__title { font-family: var(--oxpins-font-three); font-size: 16px; font-weight: 400; margin: 0 0 0; } .about-five__image__info__text { font-size: 22px; font-weight: 800; color: var(--oxpins-black); margin: 0; } .about-five__image__info__text a { transition: all 0.4s ease; color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; } .about-five__image__info__text a:hover { color: var(--oxpins-base); background-size: 100% 1px; } .about-five__content { position: relative; padding: 50px 0 0 27px; } @media (max-width: 1199px) { .about-five__content { padding-left: 0; } } @media (max-width: 991px) { .about-five__content { padding: 50px 0 0; } } .about-five__content .section-title__title { line-height: 60px; } @media (max-width: 767px) { .about-five__content .section-title__title { line-height: 40px; } } .about-five__content .section-title { margin-bottom: 6px; } .about-five__content__text { font-weight: 600; font-size: 16px; margin: 0 0 30px; } .about-five__content .thm-btn-two { margin-top: 14px; } .about-five__feature { position: relative; display: flex; align-items: center; gap: 20px; background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 20px 38px; width: 100%; z-index: 1; margin: 0 0 20px; } .about-five__feature > img { flex-shrink: 0; width: 30px; } .about-five__feature__title { font-size: 20px; font-weight: 800; margin: 0; position: relative; z-index: 2; } .about-five__feature__price { font-size: 20px; font-weight: 800; margin: 0; margin-left: auto; font-family: var(--oxpins-font); } .about-five__feature .hover-item__box { position: absolute; width: 115px; height: 116px; top: 50%; left: 0; pointer-events: none; border-radius: 12px; overflow: hidden; opacity: 0; transition: all 0.5s ease-out; } .about-five__feature .hover-item__box .hover-item__box-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: transform 0.4s ease-out; } .call-to-action { position: relative; background-color: var(--oxpins-base); padding: 168px 0 170px; margin-top: -120px; z-index: 2; } @media (max-width: 767px) { .call-to-action { padding: 150px 0 120px; } } .call-to-action__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--oxpins-base); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.5; z-index: -1; } .call-to-action__title { font-size: 60px; font-weight: 900; line-height: 70px; letter-spacing: -1.8px; color: var(--oxpins-white); margin: 0 0 36px; } @media (max-width: 1199px) { .call-to-action__title { font-size: 55px; } } @media (max-width: 991px) { .call-to-action__title { font-size: 45px; line-height: 65px; } } @media (max-width: 767px) { .call-to-action__title { font-size: 40px; line-height: 50px; letter-spacing: 0; } } .call-to-action .thm-btn-two { background-color: var(--oxpins-primary); } .call-to-action .thm-btn-two::before { background-color: var(--oxpins-black); } .about-six { position: relative; padding: 100px 0 120px; } @media (max-width: 767px) { .about-six { padding: 80px 0; } } .about-six__content { position: relative; padding: 28px 0 0; } @media (max-width: 991px) { .about-six__content { padding: 0 0 45px; } } .about-six__content .section-title--home-five { margin-bottom: 16px; } .about-six__content__text { font-size: 16px; font-weight: 600; letter-spacing: 0.48px; margin: 0 0 23px; } @media (min-width: 1200px) { .about-six__content__text { padding-right: 40px; } } .about-six__content__list { margin: 0 0 47px; padding: 0; list-style: none; } .about-six__content__list li { position: relative; padding: 0 0 0 35px; font-size: 20px; font-weight: 700; color: var(--oxpins-black); margin: 0 0 19px; } .about-six__content__list li i { font-size: 17px; position: absolute; left: 0; top: 0; color: var(--oxpins-base); line-height: inherit; } .about-six__content .thm-btn-two { border-radius: 6px; padding: 13px 42px; } .about-six__image { position: relative; } @media (max-width: 991px) { .about-six__image { max-width: 570px; margin: 0 auto; } } .about-six__image__one { position: relative; z-index: 2; text-align: right; padding: 29px 32px 0 0; } .about-six__image__one img { max-width: 100%; height: auto; border-radius: 6px; } .about-six__image__one::after { position: absolute; right: 0; top: 0; width: 65%; height: 61.6%; content: ""; background-color: var(--oxpins-black); z-index: -1; border-radius: 6px; } .about-six__image__two { position: relative; z-index: 2; margin: -102px 0 0 -30px; } @media (min-width: 992px) and (max-width: 1199px) { .about-six__image__two { margin-left: -15px; } } @media (max-width: 767px) { .about-six__image__two { margin: 20px 0 0; } } .about-six__image__two img { max-width: 100%; height: auto; border-radius: 6px; } .about-six__image__expriance { width: 204px; height: 198px; background-color: var(--oxpins-base); border-radius: 50%; border: 15px solid var(--oxpins-white); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; box-shadow: 0px 5.203px 20.812px 0px rgba(0, 0, 0, 0.06); position: absolute; right: 65px; bottom: 0; z-index: 2; } @media (min-width: 992px) and (max-width: 1199px) { .about-six__image__expriance { right: 0; } } @media (max-width: 767px) { .about-six__image__expriance { position: relative; right: 0; margin: -30px 0 0; } } .about-six__image__expriance__number { display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: var(--oxpins-white); font-family: var(--oxpins-font); } .about-six__image__expriance__number * { font-family: inherit !important; } .about-six__image__expriance__text { font-size: 20px; margin: 3px 0 0; font-weight: 400; color: var(--oxpins-white); } /*-------------------------------------------------------------- # Counter --------------------------------------------------------------*/ .counter-two { position: relative; margin-top: -50px; z-index: 3; } .counter-two__inner { border-radius: 30px; background-color: var(--oxpins-secondary); overflow: hidden; } .counter-two__inner .col-lg-4 { width: 28%; } @media (max-width: 991px) { .counter-two__inner .col-lg-4 { width: 100%; } } .counter-two__inner .col-lg-8 { width: 72%; } @media (max-width: 991px) { .counter-two__inner .col-lg-8 { width: 100%; } } .counter-two__image { position: relative; margin-right: -1px; } @media (max-width: 991px) { .counter-two__image { text-align: center; margin: 0 auto; } } .counter-two__image img { max-width: 100%; height: auto; } .counter-two__list { margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; } @media (max-width: 767px) { .counter-two__list { display: block; height: auto; } } .counter-two__single { position: relative; display: flex; align-items: center; flex-direction: column; border-right: 1px solid #985211; width: 25%; height: 100%; justify-content: center; } .counter-two__single:last-child { border: none; } .counter-two__single:hover .counter-two__icon i { transform: rotateY(360deg); } @media (max-width: 991px) { .counter-two__single { padding: 50px 0; } } @media (max-width: 767px) { .counter-two__single { width: 100%; height: auto; border-bottom: 1px solid #985211; } } .counter-two__icon { font-size: 60px; line-height: 60px; color: var(--oxpins-primary); margin: 0 0 9px; } .counter-two__icon i { display: block; -webkit-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .counter-two__count-box { display: flex; justify-content: center; align-items: center; color: var(--oxpins-white); font-size: 50px; letter-spacing: -1.5px; font-weight: 900; margin: 0 0 0; } @media (max-width: 1199px) { .counter-two__count-box { font-size: 45px; } } .counter-two__text { font-size: 20px; font-weight: 700; margin: 0; color: var(--oxpins-white); font-family: var(--oxpins-font-three); line-height: 24px; } .counter-three { position: relative; } .counter-three__bg { border-radius: 6px 0 0 6px; position: absolute; right: 0; top: 0; width: 80.7%; height: 100%; background-position: right top; background-repeat: no-repeat; background-size: cover; z-index: 2; } @media (max-width: 1499px) { .counter-three__bg { width: 92.7%; } } @media (max-width: 1199px) { .counter-three__bg { width: 100%; } } .counter-three__list { margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; z-index: 3; position: relative; } @media (max-width: 767px) { .counter-three__list { display: block; height: auto; } } .counter-three__single { position: relative; display: flex; align-items: center; flex-direction: column; border-right: 1px solid rgba(255, 255, 255, 0.1); height: 100%; justify-content: center; padding: 77px 90px 70px; } .counter-three__single:last-child { border: none; padding-right: 0; } .counter-three__single:hover .counter-three__icon i { transform: rotateY(360deg); } @media (max-width: 1199px) { .counter-three__single { padding: 77px 50px 70px; } } @media (max-width: 991px) { .counter-three__single { padding: 50px 24px; } } @media (max-width: 767px) { .counter-three__single { width: 100%; height: auto; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } } .counter-three__icon { font-size: 60px; line-height: 60px; color: var(--oxpins-white); margin: 0 0 15px; } .counter-three__icon i { display: block; -webkit-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .counter-three__count-box { display: flex; justify-content: center; align-items: center; color: var(--oxpins-white); font-size: 50px; letter-spacing: -1.5px; font-weight: 400; margin: 0 0 2px; } @media (max-width: 1199px) { .counter-three__count-box { font-size: 45px; } } .counter-three__text { font-size: 20px; font-weight: 700; margin: 0; color: var(--oxpins-white); font-family: var(--oxpins-font); line-height: 24px; } /*-------------------------------------------------------------- # Cause --------------------------------------------------------------*/ .causes-four { position: relative; padding: 120px 0; } @media (max-width: 767px) { .causes-four { padding: 80px 0; } } .causes-four__single { position: relative; background-color: var(--oxpins-gray3); overflow: hidden; border-radius: 30px; } .causes-four__img { position: relative; } .causes-four__img img { width: 100%; height: auto; } .causes-four__content { position: relative; padding: 30px 34px 32px; } .causes-four__cat { position: relative; display: flex; align-items: center; margin: 0 0 12px; } .causes-four__cat p { margin: 0; color: var(--oxpins-white); background-color: var(--oxpins-base); font-family: var(--oxpins-font-three); font-size: 18px; font-weight: 700; border-radius: 20px; padding: 0 20px; height: 31px; } .causes-four__title { margin: 0; color: var(--oxpins-black); font-size: 26px; line-height: 37px; font-weight: 800; letter-spacing: -1.04px; margin-bottom: 4px; } .causes-four__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .causes-four__title a:hover { color: var(--oxpins-base); background-size: 100% 1px; } .causes-four__text { font-size: 15px; line-height: 25px; font-weight: 600; margin: 0 0 30px; } .causes-four__progress { position: relative; } .causes-four__progress .bar { position: relative; width: 100%; height: 10px; background: var(--oxpins-white); border-radius: 12px; margin-bottom: 10px; } .causes-four__progress .bar-inner { position: relative; display: block; width: 0px; height: 100%; border-radius: 12px; background: var(--oxpins-primary); -webkit-transition: all 1500ms ease; -ms-transition: all 1500ms ease; -o-transition: all 1500ms ease; -moz-transition: all 1500ms ease; transition: all 1500ms ease; } .causes-four__progress .bar-inner::after { position: absolute; right: 0; top: -7px; width: 23px; height: 23px; content: ""; background-color: var(--oxpins-white); border-radius: 50%; } .causes-four__progress .bar-inner::before { position: absolute; right: 7px; top: 0; z-index: 1; bottom: 0; margin: auto; width: 9px; height: 9px; content: ""; background-color: var(--oxpins-primary); border-radius: 50%; } .causes-four__progress .count-text { position: absolute; right: -4px; bottom: 18px; color: var(--oxpins-black); line-height: 20px; font-size: 14px; text-align: center; font-weight: 600; opacity: 0; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease; } .causes-four__progress .bar-inner.counted .count-text { opacity: 1; } .causes-four__goals { position: relative; display: flex; align-items: center; justify-content: space-between; } .causes-four__goals__price { font-size: 14px; font-weight: 600; color: var(--oxpins-black); margin: 0; } .causes-four__goals__price span { color: var(--oxpins-gray); } .causes-five { position: relative; padding: 120px 0 0; } @media (max-width: 767px) { .causes-five { padding: 80px 0 0; } } .causes-five__single { position: relative; } .causes-five__img { position: relative; overflow: hidden; border-radius: 6px; } .causes-five__img img { width: 100%; height: auto; } .causes-five__img::after { border-radius: 6px; background: linear-gradient(0deg, #2D2A2A 23.53%, rgba(45, 42, 42, 0) 100%); position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; content: ""; } .causes-five__content { position: absolute; left: 0; bottom: 0; width: 100%; padding: 20px 41px 30px; z-index: 2; } @media (max-width: 1199px) { .causes-five__content { padding-left: 30px; padding-right: 30px; } } .causes-five__cat { position: relative; display: flex; align-items: center; margin: 0 0 12px; } .causes-five__cat p { margin: 0; color: var(--oxpins-white); background-color: var(--oxpins-base); font-family: var(--oxpins-font); font-size: 14px; font-weight: 700; border-radius: 20px; padding: 0 27px; height: 31px; } .causes-five__title { margin: 0; color: var(--oxpins-white); font-size: 26px; line-height: 35px; font-weight: 400; letter-spacing: -1.04px; margin-bottom: 41px; } .causes-five__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .causes-five__title a:hover { color: var(--oxpins-base); background-size: 100% 1px; } .causes-five__progress { position: relative; } .causes-five__progress .bar { position: relative; width: 100%; height: 10px; background: var(--oxpins-white); border-radius: 12px; margin-bottom: 10px; } .causes-five__progress .bar-inner { position: relative; display: block; width: 0px; height: 100%; border-radius: 12px; background: var(--oxpins-base); transition: all 1500ms ease; } .causes-five__progress .bar-inner::after { position: absolute; right: 0; top: -6px; width: 23px; height: 23px; content: ""; background-color: var(--oxpins-white); border-radius: 50%; } .causes-five__progress .bar-inner::before { position: absolute; right: 7px; top: 0; z-index: 1; bottom: 0; margin: auto; width: 9px; height: 9px; content: ""; background-color: var(--oxpins-primary); border-radius: 50%; } .causes-five__progress .count-text { position: absolute; right: -4px; bottom: 18px; color: var(--oxpins-white); line-height: 20px; font-size: 14px; text-align: center; font-weight: 600; opacity: 0; transition: all 500ms ease; } .causes-five__progress .bar-inner.counted .count-text { opacity: 1; } .causes-five__goals { position: relative; display: flex; align-items: center; justify-content: space-between; } .causes-five__goals__price { font-size: 14px; font-weight: 600; color: var(--oxpins-white); margin: 0; } .causes-five__goals__price span { color: var(--oxpins-gray); } .causes-five__bottom { position: relative; display: flex; align-items: center; justify-content: center; gap: 38px; margin: 80px 0 0; } @media (max-width: 767px) { .causes-five__bottom { margin: 50px 0 0; flex-wrap: wrap; gap: 20px; text-align: center; } } .causes-five__bottom__title { margin: 0; color: var(--oxpins-black); font-size: 24px; font-weight: 400; letter-spacing: -0.72px; } .causes-five__bottom .thm-btn-two { padding: 5px 30px; border-radius: 6px; } /*-------------------------------------------------------------- # Gallery --------------------------------------------------------------*/ .gallery-three { direction: ltr; position: relative; z-index: 2; } .gallery-three .container { max-width: 1590px; } .gallery-three__item { position: relative; overflow: hidden; border-radius: 24px; } .gallery-three__item::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 0; opacity: 0; background: var(--oxpins-base); visibility: hidden; transition: all ease 0.4s; } .gallery-three__item:hover::after { height: 100%; opacity: 0.83; visibility: visible; } .gallery-three__item img { width: 100%; height: auto; } .gallery-three__item .img-popup { width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 2; color: var(--oxpins-white); font-size: 20px; visibility: hidden; opacity: 0; transform: translateY(20px); transition: all ease 0.6s; } .gallery-three__item .img-popup::after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; content: ""; width: 100%; height: 100%; background-color: var(--oxpins-white); mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; z-index: -1; transition: all ease 0.6s; } .gallery-three__item .img-popup:hover { color: var(--oxpins-primary); } .gallery-three__item .img-popup:hover::after { background-color: var(--oxpins-primary); } .gallery-three__item:hover .img-popup { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.2s; } .gallery-four { position: relative; z-index: 1; overflow: hidden; } .gallery-four__item { position: relative; overflow: hidden; } .gallery-four__item::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 0; opacity: 0; background: var(--oxpins-base); visibility: hidden; transition: all ease 0.4s; } .gallery-four__item:hover::after { height: 100%; opacity: 0.9; visibility: visible; } .gallery-four__item img { width: 100%; height: auto; } .gallery-four__item .img-popup { width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 2; border: 1px solid var(--oxpins-white); border-radius: 50%; font-size: 20px; visibility: hidden; opacity: 0; transform: translateY(20px); transition: all ease 0.4s; } .gallery-four__item .img-popup::after, .gallery-four__item .img-popup::before { content: ""; width: 2px; height: 22px; background-color: var(--oxpins-white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 1.5px; transition: all ease 0.6s; } .gallery-four__item .img-popup::after { transform: translate(-50%, -50%) rotate(90deg); } .gallery-four__item .img-popup:hover { border-color: var(--oxpins-black); } .gallery-four__item .img-popup:hover::before, .gallery-four__item .img-popup:hover::after { background-color: var(--oxpins-black); } .gallery-four__item:hover .img-popup { transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.2s; } /*-------------------------------------------------------------- # Testiomonial --------------------------------------------------------------*/ .testimonial-four { direction: ltr; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #f0e9cc7a; padding: 60px 0; } @media (max-width: 767px) { .testimonial-four { padding: 220px 0 80px; } } .testimonial-four__shape { position: absolute; left: 0; bottom: 0; width: 100%; height: 241px; background-position: center center; background-repeat: repeat-x; background-size: cover; animation: cloudMove 60s linear 0s infinite; } @keyframes cloudMove { 0% { background-position: -1920px 100%; } 100% { background-position: 0 100%; } } .testimonial-four__single { position: relative; text-align: center; background-color: var(--oxpins-white); mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; transition: all ease 0.4s; padding: 160px 30px 96px; } @media (max-width: 767px) { .testimonial-four__single { padding: 100px 30px 80px; } } .testimonial-four__single::after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; content: ""; width: calc(100% - 40px); height: calc(100% - 24px); background-color: var(--oxpins-bdr-color); mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; transition: all ease 0.4s; } .testimonial-four__single::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; content: ""; width: calc(100% - 40px); height: calc(100% - 24px); background-color: var(--oxpins-white); mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; transition: all ease 0.4s; } .testimonial-four__single__shape { position: absolute; width: calc(100% - 70px); height: calc(100% - 70px); top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .testimonial-four__rating { display: flex; align-items: center; justify-content: center; font-size: 27px; color: var(--oxpins-primary); letter-spacing: 3px; margin: 0 0 26px; position: relative; z-index: 5; } .testimonial-four__text { direction: rtl; font-family: 'Naskh'; font-size: 16px; line-height: 40px; font-weight: 600; color: var(--oxpins-black); margin: 0 auto 40px; max-width: 600px; position: relative; z-index: 5; padding: 0 20px; } .testimonial-four__author { position: relative; position: relative; z-index: 5; } .testimonial-four__author img { width: 70px !important; height: 70px; border-radius: 50%; margin: 0 auto; } .testimonial-four__quote { width: 32px; height: 32px; background-color: var(--oxpins-base); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--oxpins-white); font-size: 17px; position: absolute; left: 72px; top: 20px; right: 0; margin: 0 auto; } .testimonial-four__title { font-size: 16px; font-weight: 900; margin: 12px 0 0; text-transform: capitalize; } .testimonial-four__designation { display: block; font-size: 14px; font-weight: 600; line-height: 1; margin: 0; } .testimonial-four .center .testimonial-four__single { background-color: var(--oxpins-base); } .testimonial-five { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: var(--oxpins-gray); padding: 120px 0; } @media (max-width: 767px) { .testimonial-five { padding: 80px 0; } } .testimonial-five .owl-carousel { position: relative; } .testimonial-five .owl-carousel .owl-nav { position: absolute; right: 0; top: -106px; display: flex; align-items: center; margin: 0; gap: 15px; } .testimonial-five .owl-carousel .owl-nav button { width: 42px; height: 42px; margin: 0; padding: 0; background-color: var(--oxpins-white); border: none; outline: none; box-shadow: none; transition: all ease 0.4s; font-size: 16px; color: var(--oxpins-black); border-radius: 50%; } .testimonial-five .owl-carousel .owl-nav button:hover { background-color: var(--oxpins-black); color: var(--oxpins-white); } .testimonial-five__single { position: relative; background-color: var(--oxpins-white); transition: all ease 0.4s; padding: 50px 40px 19px; border-radius: 6px; overflow: hidden; } .testimonial-five__single__shape { position: absolute; width: 208px; height: 114px; top: 0; right: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; } .testimonial-five__single__quote { position: absolute; right: 50px; bottom: 23px; content: ""; width: 126px; height: 94px; background-position: center center; background-repeat: no-repeat; background-size: cover; } @media (max-width: 1199px) { .testimonial-five__single__quote { right: 25px; } } .testimonial-five__rating { display: flex; align-items: center; font-size: 16px; color: var(--oxpins-primary); letter-spacing: 3px; margin: 0 0 21px; } .testimonial-five__text { font-size: 18px; line-height: 30px; font-weight: 600; color: var(--oxpins-gray); text-transform: capitalize; margin: 0 0 42px; } .testimonial-five__author { position: relative; z-index: 1; background-color: var(--oxpins-base); margin-left: -40px; max-width: 250px; padding: 20px 15px 20px 110px; border-radius: 0 6px 6px 0; min-height: 51px; } .testimonial-five__author img { width: 51px !important; height: 51px; border-radius: 50%; position: absolute; left: 40px; top: 0; bottom: 0; margin: auto; border: 3px solid var(--oxpins-white); } .testimonial-five__author::before { position: absolute; left: 0; bottom: -19px; content: ""; width: 53px; height: 19px; background-color: var(--oxpins-primary); mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; transition: all ease 0.4s; } .testimonial-five__title { font-size: 16px; font-weight: 400; line-height: 1; margin: 0 0 10px; color: var(--oxpins-white); text-transform: uppercase; } .testimonial-five__designation { display: block; font-size: 14px; font-weight: 500; color: var(--oxpins-bdr-color); line-height: 1; margin: 0; } /*-------------------------------------------------------------- # Events --------------------------------------------------------------*/ .events-three { position: relative; padding: 120px 0; } @media (max-width: 767px) { .events-three { padding: 80px 0; } } .events-three__item { position: relative; overflow: hidden; max-width: 370px; margin: auto; text-align: center; mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; transition: all ease 0.4s; } .events-three__item img { width: 100%; height: auto; } .events-three__item::after { position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 50%; background-color: var(--oxpins-base); content: ""; visibility: hidden; opacity: 0; transition: all ease 0.5s; } .events-three__item:hover::after { visibility: visible; opacity: 0.9; height: 100%; } .events-three__item__normal { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 316px; height: 279px; background-color: var(--oxpins-base); mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 20px 18px; -webkit-transition: -webkit-transform 400ms ease; transition: -webkit-transform 400ms ease; transition: transform 400ms ease; transition: transform 400ms ease, -webkit-transform 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .events-three__item__normal { width: 100%; } } .events-three__item__normal__date { font-size: 20px; font-weight: 700; line-height: 40px; letter-spacing: -0.6px; font-family: var(--oxpins-font-three); text-transform: capitalize; color: var(--oxpins-primary); } .events-three__item__normal__meta { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; line-height: 1.2; margin: 4px 0 2px; } .events-three__item__normal__meta__text { position: relative; font-size: 16px; font-weight: 900; color: var(--oxpins-white); font-family: var(--oxpins-font-two); letter-spacing: -0.48px; margin: 0; } .events-three__item__normal__meta__text i { font-size: 12px; color: var(--oxpins-primary); margin-right: 8px; } .events-three__item__normal__title { font-size: 24px; font-weight: 900; line-height: 40px; letter-spacing: -0.72px; color: var(--oxpins-white); margin: 0; } .events-three__item:hover .events-three__item__normal { background-position: bottom left; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; } .events-three__item__hover { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; max-width: 280px; text-align: center; padding: 35px 20px 30px; flex-direction: column; visibility: hidden; opacity: 0; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: flex; justify-content: center; align-items: center; z-index: 5; } .events-three__item__hover__date { font-size: 20px; font-weight: 700; line-height: 40px; letter-spacing: -0.6px; font-family: var(--oxpins-font-three); text-transform: capitalize; color: var(--oxpins-primary); } .events-three__item__hover__meta { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; line-height: 1.2; margin: 4px 0 3px; } .events-three__item__hover__meta__text { position: relative; font-size: 16px; font-weight: 900; color: var(--oxpins-white); font-family: var(--oxpins-font-two); letter-spacing: -0.48px; margin: 0; } .events-three__item__hover__meta__text i { font-size: 12px; color: var(--oxpins-primary); margin-right: 8px; } .events-three__item__hover__title { font-size: 24px; font-weight: 900; line-height: 40px; letter-spacing: -0.72px; color: var(--oxpins-white); margin: 0 0 26px; } .events-three__item__hover__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .events-three__item__hover__title a:hover { color: var(--oxpins-primary); background-size: 100% 1px; } .events-three__item__hover__rm { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; color: var(--oxpins-white); font-size: 20px; transition: all ease 0.6s; } .events-three__item__hover__rm::after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; content: ""; width: 100%; height: 100%; background-color: var(--oxpins-white); mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center center; mask-size: cover; z-index: -1; transition: all ease 0.6s; } .events-three__item__hover__rm:hover { color: var(--oxpins-primary); } .events-three__item__hover__rm:hover::after { background-color: var(--oxpins-primary); } .events-three__item:hover .events-three__item__hover { visibility: visible; opacity: 1; animation-delay: 0.25s; animation-name: fadeInDown; } /*-------------------------------------------------------------- # Donate --------------------------------------------------------------*/ .donate-one { position: relative; background-color: #FFE6C8; background-position: left top; background-repeat: repeat-x; background-size: auto; background-blend-mode: luminosity; } .donate-one__shape { position: absolute; left: 0; top: 0; bottom: 0; margin: auto; background-position: left center; background-repeat: no-repeat; background-size: auto; height: 100%; width: 15%; animation: movebounce3 3s linear 0s infinite; } @media (max-width: 1600px) { .donate-one__shape { display: none; } } @keyframes movebounce3 { 0% { transform: translateY(0px); } 50% { transform: translateY(15px); } 100% { transform: translateY(0px); } } .donate-one__content { position: relative; max-width: 570px; padding: 119px 0; } @media (max-width: 1199px) { .donate-one__content { margin: 0 auto; } } @media (max-width: 767px) { .donate-one__content { padding: 80px 0; } } .donate-one__content .section-title { margin-bottom: 34px; } .donate-one__form { position: relative; } .donate-one__form__amount { position: relative; } .donate-one__form__amount__input { width: 100%; height: 60px; background-color: var(--oxpins-white); font-family: var(--oxpins-font); font-size: 18px; color: var(--oxpins-black); font-weight: 700; border-radius: 20px; border: none; outline: none; padding-left: 30px; text-align: left; } .donate-one__form__amount__buttons { margin: 20px 0 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .donate-one__form__amount__btn { text-align: center; padding: 11px 20px; border-radius: 30px; outline: 0; border: 0; font-family: var(--oxpins-font); font-size: 18px; font-weight: 700; line-height: 1; color: var(--oxpins-gray); text-transform: capitalize; background-color: var(--oxpins-white); transition: all 400ms ease; } .donate-one__form__amount__btn.active, .donate-one__form__amount__btn:hover { color: var(--oxpins-white); background-color: var(--oxpins-secondary); } .donate-one__image { position: relative; text-align: right; } @media (max-width: 1199px) { .donate-one__image { text-align: center; } } .donate-one__image img { max-width: 100%; } @media (min-width: 1200px) { .donate-one__image img { max-width: none; } } /*-------------------------------------------------------------- # Team --------------------------------------------------------------*/ .team-two { position: relative; padding: 120px 0; } @media (max-width: 767px) { .team-two { padding: 80px 0; } } .team-two__single { position: relative; text-align: center; } .team-two__single__image { position: relative; text-align: center; } .team-two__single__image img { max-width: 100%; } .team-two__single__image::after { position: absolute; left: 0; bottom: 0; margin: auto; content: ""; width: 100%; height: 85.6%; background-color: #FFE6C8; mask: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: top center; mask-size: cover; z-index: -1; transition: all ease 0.5s; } .team-two__single:hover .team-two__single__image::after { background-color: var(--oxpins-base); } .team-two__single__social { position: absolute; left: 0; right: 0; bottom: -19px; z-index: 2; background-color: var(--oxpins-primary); border-radius: 30px; padding: 13px 0px; max-width: 136px; opacity: 0; visibility: hidden; margin: 0 auto; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: all ease 0.5s; } .team-two__single__social a { display: inline-block; color: var(--oxpins-white); font-size: 10px; border-right: 2px solid rgba(var(--oxpins-gray3-rgb), 0.2); height: 13px; line-height: 13px; padding: 0 10px; transition: all ease 0.5s; } .team-two__single__social a:last-child { border: none; } .team-two__single__social a:hover { color: var(--oxpins-secondary); } .team-two__single:hover .team-two__single__social { transform: scale(1); opacity: 1; visibility: visible; } .team-two__single__content { position: relative; padding: 37px 0 0; } .team-two__single__title { font-size: 30px; font-weight: 800; letter-spacing: -0.9px; text-transform: capitalize; line-height: 1; margin: 0 0 5px; } .team-two__single__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; display: inline-block; } .team-two__single__title a:hover { color: var(--oxpins-secondary); background-size: 100% 1px; } .team-two__single__designation { font-family: var(--oxpins-font-three); font-size: 24px; font-weight: 700; text-transform: capitalize; line-height: 1; color: var(--oxpins-secondary); margin: 0; } /*-------------------------------------------------------------- # Blog --------------------------------------------------------------*/ .news-three { position: relative; padding: 120px 0 90px; border-top: 1px solid var(--oxpins-bdr-color); } @media (max-width: 767px) { .news-three { padding: 80px 0; } } .news-three__single { position: relative; display: flex; align-items: center; background-color: var(--oxpins-gray3); border-radius: 30px; overflow: hidden; margin-bottom: 30px; } @media (max-width: 767px) { .news-three__single { display: block; } } .news-three__single__img { position: relative; display: inline-block; max-width: 330px; width: 100%; min-height: 171px; overflow: hidden; } @media (max-width: 767px) { .news-three__single__img { max-width: 100%; } } .news-three__single__img img { width: 100%; height: auto; } @media (min-width: 992px) and (max-width: 1199px) { .news-three__single__img img { min-height: 301px; object-fit: cover; } } .news-three__single__cats { position: absolute; left: 20px; top: 20px; display: flex; align-items: center; gap: 5px; } .news-three__single__cats a { display: inline-block; background-color: var(--oxpins-base); color: var(--oxpins-white); border-radius: 30px; font-family: var(--oxpins-font-three); font-size: 18px; text-transform: capitalize; font-weight: 700; padding: 0px 27px 1px; transition: all ease 0.5s; } .news-three__single__cats a:hover { background-color: var(--oxpins-primary); } .news-three__single__content { position: relative; padding: 30px 40px; } @media (min-width: 768px) and (max-width: 1199px) { .news-three__single__content { padding: 25px 30px; } } @media (max-width: 767px) { .news-three__single__content { padding: 20px 30px 30px; } } .news-three__single__meta { position: relative; margin: 0 0 7px; padding: 0; display: flex; align-items: center; gap: 15px; } .news-three__single__meta li { list-style: none; font-size: 16px; color: var(--oxpins-gray); font-weight: 500; line-height: 26px; } .news-three__single__meta li i { color: var(--oxpins-secondary); margin-right: 10px; } .news-three__single__meta li i.oxpins-icon-two-oxpins-icon-two-comments { font-size: 19px; } .news-three__single__title { font-size: 30px; line-height: 40px; font-weight: 900; letter-spacing: -0.9px; margin: 0 0 12px; } @media (min-width: 768px) and (max-width: 1199px) { .news-three__single__title { font-size: 26px; line-height: 36px; } } .news-three__single__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .news-three__single__title a:hover { color: var(--oxpins-secondary); background-size: 100% 1px; } .news-three__single__text { font-size: 15px; font-weight: 600; line-height: 25px; margin: 0 0 20px; padding: 0 0 26px; border-bottom: 1px solid var(--oxpins-bdr-color); } @media (min-width: 768px) and (max-width: 1199px) { .news-three__single__text { margin: 0 0 12px; padding: 0 0 16px; } } .news-three__single__rm { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--oxpins-gray); text-transform: capitalize; transition: all ease 0.5s; } .news-three__single__rm i { font-size: 16px; color: var(--oxpins-black); transition: all ease 0.5s; } .news-three__single__rm:hover { color: var(--oxpins-secondary); } .news-three__single__rm:hover i { color: var(--oxpins-secondary); } .news-three__list { margin: 0; list-style: none; position: relative; background-color: var(--oxpins-gray3); border-radius: 30px; padding: 47px 50px 44px; } @media (min-width: 992px) and (max-width: 1199px) { .news-three__list { padding: 35px 35px 30px; } } @media (max-width: 767px) { .news-three__list { padding: 30px; } } .news-three__list li { position: relative; border-top: 1px solid var(--oxpins-bdr-color); padding-top: 54px; margin-top: 38px; } @media (max-width: 767px) { .news-three__list li { padding-top: 34px; margin-top: 18px; } } .news-three__list li:first-child { border: none; padding-top: 0; margin-top: 0; } .news-three__list__meta { position: relative; margin: 0 0 7px; padding: 0; display: flex; align-items: center; list-style: none; font-size: 16px; color: var(--oxpins-gray); font-weight: 500; line-height: 26px; } .news-three__list__meta i { font-size: 19px; color: var(--oxpins-secondary); margin-right: 10px; } .news-three__list__title { font-size: 20px; line-height: 30px; font-weight: 900; letter-spacing: -0.66px; margin: 0 0 12px; } .news-three__list__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .news-three__list__title a:hover { color: var(--oxpins-secondary); background-size: 100% 1px; } .news-four { position: relative; padding: 120px 0; } @media (max-width: 767px) { .news-four { padding: 80px 0; } } .news-four__single { position: relative; } .news-four__single--reverse { display: flex; flex-direction: column-reverse; } .news-four__single--reverse .news-four__single__content { margin: -13px auto 0; border-top: none; border-bottom: 5px solid var(--oxpins-white); } .news-four__single__content { position: relative; z-index: 2; width: calc(100% - 30px); border-radius: 6px; background: var(--oxpins-white); margin: 0 auto -13px; box-shadow: 0px 4px 60px 4px rgba(0, 0, 0, 0.06); padding: 29px 30px 20px; border-top: 5px solid var(--oxpins-white); transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .news-four__single__content { padding-left: 20px; padding-right: 20px; width: calc(100% - 20px); } } .news-four__single:hover .news-four__single__content { border-color: var(--oxpins-base); } .news-four__single__meta { position: relative; margin: 0 0 4px; font-size: 14px; color: var(--oxpins-gray); font-weight: 500; line-height: 26px; display: flex; align-items: center; } .news-four__single__meta i { font-size: 19px; color: var(--oxpins-base); margin-right: 6px; } .news-four__single__title { font-size: 22px; line-height: 30px; font-weight: 400; letter-spacing: 0; margin: 0 0 1px; } .news-four__single__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .news-four__single__title a:hover { color: var(--oxpins-base); background-size: 100% 1px; } .news-four__single__rm { display: inline-block; font-size: 14px; font-weight: 400; line-height: 1; font-family: var(--oxpins-font-two); color: var(--oxpins-black); text-transform: capitalize; transition: all ease 0.5s; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; } .news-four__single__rm:hover { color: var(--oxpins-base); background-size: 100% 1px; } .news-four__single__img { position: relative; overflow: hidden; border-radius: 6px; } .news-four__single__img img { width: 100%; height: auto; } /*-------------------------------------------------------------- # Brand Carousel --------------------------------------------------------------*/ .brand-four { padding: 5px 0 120px; } @media (max-width: 767px) { .brand-four { padding: 5px 0 80px; } } .brand-four--border { border-top: 1px solid var(--oxpins-bdr2-color); padding: 110px 0 120px; } @media (max-width: 767px) { .brand-four--border { padding: 70px 0 80px; } } .brand-four__tilte { text-align: center; display: block; color: var(--oxpins-black); font-family: var(--oxpins-font); font-weight: 600; border-top: 2px solid var(--oxpins-bdr-color); font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase; margin: 0 0 46px; } .brand-four__tilte span { display: inline-block; background-color: var(--oxpins-white); padding: 0 22px; z-index: 2; position: relative; top: -10px; } .brand-four .brand-four__carousel { position: relative; } .brand-four .brand-four__carousel .brand-four__carousel__item { display: flex; align-items: center; justify-content: center; transition: 500ms; cursor: pointer; } .brand-four .brand-four__carousel .brand-four__carousel__item img { transition: 500ms; opacity: 0.2; max-width: 100%; width: auto; } .brand-four .brand-four__carousel .brand-four__carousel__item:hover img { opacity: 1; } /*-------------------------------------------------------------- # Become Volunter --------------------------------------------------------------*/ .become-volunteer-two { background-color: #ede5cd; position: relative; padding: 0 50px; } .become-volunteer-two__inner { position: relative; display: flex; align-items: center; justify-content: space-between; background-color: var(--oxpins-secondary); border-radius: 30px; padding: 70px 60px 60px 70px; background-position: top right; background-repeat: no-repeat; z-index: 2; } @media (max-width: 767px) { .become-volunteer-two__inner { display: block; padding: 30px 20px; } } .become-volunteer-two__title { color: var(--oxpins-white); font-size: 36px; line-height: 44px; font-weight: 900; letter-spacing: -1.08px; margin: 0; } @media (max-width: 767px) { .become-volunteer-two__title { margin: 0 0 5px; } } .become-volunteer-two .thm-btn-two { background-color: var(--oxpins-white); color: var(--oxpins-black); padding: 13px 24px; } .become-volunteer-two .thm-btn-two::before { background-color: var(--oxpins-base); } .become-volunteer-two .thm-btn-two:hover { color: var(--oxpins-white); } .become-volunteer-three { position: relative; padding: 120px 0; } @media (max-width: 767px) { .become-volunteer-three { padding: 80px 0; } } .become-volunteer-three__inner { position: relative; background-color: var(--oxpins-base); border-radius: 6px; padding: 0; background-position: top left; background-repeat: no-repeat; background-blend-mode: luminosity; z-index: 2; padding: 54px 0 60px 65px; } @media (min-width: 992px) and (max-width: 1199px) { .become-volunteer-three__inner { padding: 40px 0 40px 40px; } } @media (max-width: 991px) { .become-volunteer-three__inner { padding: 50px 30px 0; } } .become-volunteer-three__inner__shape { position: absolute; right: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .become-volunteer-three__inner__shape::after { position: absolute; right: -15px; top: 50px; content: ""; width: 258.483px; height: 259.006px; transform: rotate(-45deg); border-radius: 6px; background: linear-gradient(180deg, #272727 0%, rgba(39, 39, 39, 0) 100%); opacity: 0.3; mix-blend-mode: luminosity; } @media (max-width: 991px) { .become-volunteer-three__inner__shape::after { right: 0; left: 0; top: auto; bottom: 0; margin: auto; } } .become-volunteer-three__content { position: relative; } .become-volunteer-three__title { color: var(--oxpins-white); font-size: 40px; line-height: 50px; font-weight: 400; letter-spacing: -1.2px; margin: 0 0 16px; } @media (min-width: 992px) and (max-width: 1199px) { .become-volunteer-three__title { font-size: 36px; line-height: 45px; } } @media (max-width: 767px) { .become-volunteer-three__title { font-size: 30px; line-height: 40px; } } .become-volunteer-three__text { color: var(--oxpins-white); opacity: 0.7; font-size: 16px; font-weight: 600; line-height: 30px; letter-spacing: 0.48px; margin: 0 0 31px; } .become-volunteer-three .thm-btn-two { background-color: var(--oxpins-white); color: var(--oxpins-black); padding: 13px 40px; border-radius: 6px; } .become-volunteer-three .thm-btn-two::before { background-color: var(--oxpins-black); } .become-volunteer-three .thm-btn-two:hover { color: var(--oxpins-white); } .become-volunteer-three__image { position: absolute; right: -67px; bottom: 0; animation: messageMove 3s linear 0s infinite; } @media (min-width: 992px) and (max-width: 1199px) { .become-volunteer-three__image { text-align: right; right: -35px; } .become-volunteer-three__image img { max-width: 82%; } } @media (max-width: 991px) { .become-volunteer-three__image { position: relative; right: 0; text-align: center; margin-top: 20px; } .become-volunteer-three__image img { max-width: 100%; } } @keyframes messageMove { 0% { transform: translateX(0px); } 50% { transform: translateX(-10px); } 100% { transform: translateX(0px); } } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .scroll-to-top i { color: var(--oxpins-white); transition: 500ms; } .site-footer-two { position: relative; background-color: var(--oxpins-black); margin-top: -46px; } .site-footer-two__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: left top; background-repeat: no-repeat; background-size: cover; } .site-footer-two__top { position: relative; display: block; padding: 166px 0 110px; } @media (max-width: 767px) { .site-footer-two__top { padding: 130px 0 80px; } } .site-footer-two .footer-widget__about { padding-top: 4px; } .site-footer-two .footer-widget__about-text { color: var(--oxpins-gray4); font-size: 16px; font-weight: 600; } .site-footer-two .site-footer-two__social { position: relative; display: flex; align-items: center; gap: 15px; } .site-footer-two .site-footer-two__social a { width: 36px; height: 36px; font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(157, 157, 157, 0.14); color: var(--oxpins-white); transition: 500ms; } .site-footer-two .site-footer-two__social a:hover { background-color: var(--oxpins-primary); } .site-footer-two .footer-widget__title { font-size: 18px; letter-spacing: -0.72px; font-family: var(--oxpins-font); margin-bottom: 22px; } .site-footer-two .footer-widget__non-profit-list li, .site-footer-two .footer-widget__links-list li { line-height: 24px; } .site-footer-two .footer-widget__non-profit-list li a, .site-footer-two .footer-widget__links-list li a { font-size: 16px; color: var(--oxpins-gray4); font-weight: 600; } .site-footer-two .footer-widget__non-profit-list li a:hover, .site-footer-two .footer-widget__links-list li a:hover { color: var(--oxpins-primary); } .site-footer-two .footer-widget__non-profit-list li { margin-right: -10px; } .site-footer-two .footer-widget__contact { max-width: 302px; } @media (min-width: 1200px) { .site-footer-two .footer-widget__contact { margin-left: 20px; } } .site-footer-two .footer-widget__contact-text { font-size: 16px; color: var(--oxpins-gray4); font-weight: 600; } .site-footer-two .footer-widget__contact-list li .icon i { font-size: 16px; } .site-footer-two .footer-widget__contact-text { font-size: 16px; font-weight: 600; padding-bottom: 4px; } .site-footer-two .footer-widget__contact-list li .text p { font-size: 16px; font-weight: 600; } .footer-widget__form { position: relative; width: 100%; margin: 12px 0 0; } .footer-widget__form input[type=text] { width: 100%; display: block; border: none; outline: none; height: 56px; background-color: var(--oxpins-white); color: var(--oxpins-gray4); border-radius: 10px; font-size: 14px; font-weight: 600; padding-left: 50px; padding-right: 10px; transition: all 500ms ease; font-family: var(--oxpins-font-two); } .footer-widget__form button { background-color: transparent; position: absolute; left: 5px; top: 0; line-height: 55px; color: var(--oxpins-base); font-size: 20px; transition: all 500ms ease; border: none; outline: none; box-shadow: none; } .footer-widget__form button:hover { color: var(--oxpins-primary); } .footer-widget__checked-box { position: relative; margin: 15px 0 0; } .footer-widget__checked-box input[type=checkbox] { display: none; } .footer-widget__checked-box label { position: relative; display: block; padding-right: 25px; margin: 0; color: #ffedd3; font-size: 14px; line-height: 24px; font-weight: 600; text-transform: none; cursor: pointer; font-family: var(--oxpins-font-two); } .footer-widget__checked-box label span:before { position: absolute; top: 1.5px; left: 2px; display: block; content: "\f00c"; font-family: "FontAwesome"; font-weight: 900; font-size: 8px; pointer-events: none; transition: all 0.15s ease-in-out; opacity: 0; line-height: 1; } .footer-widget__checked-box input[type=checkbox] + label span { position: absolute; top: 5px; right: 0; width: 15px; height: 15px; border-radius: 50%; vertical-align: middle; background-color: transparent; background: #6d492e; cursor: pointer; transition: all 300ms ease; border: 2px solid rgb(255 237 211); } .footer-widget__checked-box input[type=checkbox]:checked + label span:before { opacity: 1; } .site-footer-two__bottom { position: relative; display: block; background-color: var(--oxpins-black2); } .site-footer-two__bottom-inner { position: relative; display: block; text-align: center; padding: 25px 0; } .site-footer-two__bottom-text { font-family: 'Naskh'; font-size: 16px; color: var(--oxpins-gray4); font-weight: 600; margin: 0; } .site-footer-two__bottom-text a { color: inherit; transition: all ease 0.5s; } .site-footer-two__bottom-text a:hover { color: var(--oxpins-white); } .site-footer-three { position: relative; background-color: var(--oxpins-black); } .site-footer-three__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: top left; background-repeat: no-repeat; background-size: auto; opacity: 0.03; } .site-footer-three__wrapper { position: relative; z-index: 2; display: block; padding: 78px 0 110px; } @media (max-width: 767px) { .site-footer-three__wrapper { padding-bottom: 70px; } } .site-footer-three__top { position: relative; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 16px 30px; margin: 0 0 58px; } @media (max-width: 767px) { .site-footer-three__top { margin-bottom: 30px; padding: 16px 15px; } } .site-footer-three__logo { position: relative; } .site-footer-three__logo img { max-width: 100%; } .site-footer-three .site-footer-three__social { position: relative; display: flex; align-items: center; gap: 15px; } @media (max-width: 767px) { .site-footer-three .site-footer-three__social { gap: 7px; } } .site-footer-three .site-footer-three__social a { width: 36px; height: 36px; font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(157, 157, 157, 0.14); color: var(--oxpins-white); transition: 500ms; } .site-footer-three .site-footer-three__social a:hover { background-color: var(--oxpins-primary); } .site-footer-three .footer-widget__title { font-size: 18px; font-weight: 400; letter-spacing: -0.72px; margin-bottom: 19px; } @media (min-width: 1200px) { .site-footer-three .footer-widget__non-profit { margin-left: 5px; } } @media (min-width: 768px) and (max-width: 1199px) { .site-footer-three .footer-widget__non-profit { margin-top: 0; } } .site-footer-three .footer-widget__non-profit-list li, .site-footer-three .footer-widget__links-list li { line-height: 24px; } .site-footer-three .footer-widget__non-profit-list li a, .site-footer-three .footer-widget__links-list li a { font-size: 16px; color: var(--oxpins-gray); font-weight: 600; } .site-footer-three .footer-widget__non-profit-list li a:hover, .site-footer-three .footer-widget__links-list li a:hover { color: var(--oxpins-primary); } @media (min-width: 1200px) { .site-footer-three .footer-widget__contact { margin-left: -35px; } } .site-footer-three .footer-widget__contact-text { font-size: 16px; color: var(--oxpins-gray); font-weight: 600; } .site-footer-three .footer-widget__contact-list li .icon i { font-size: 16px; } .site-footer-three .footer-widget__contact-text { font-size: 16px; font-weight: 600; padding-bottom: 4px; } .site-footer-three .footer-widget__contact-list li .text p { font-size: 16px; font-weight: 600; } .site-footer-three .footer-widget__newsletter { position: relative; } @media (max-width: 1199px) { .site-footer-three .footer-widget__newsletter { margin-top: 35px; } } .site-footer-three .footer-widget__form { position: relative; width: 100%; margin: 25px 0 0; display: flex; align-items: center; gap: 12px; } .site-footer-three .footer-widget__form input[type=text] { width: 100%; display: block; border: none; outline: none; height: 56px; background-color: var(--oxpins-white); color: var(--oxpins-gray); border-radius: 6px; text-transform: uppercase; font-size: 14px; font-weight: 700; padding: 0 30px; transition: all 500ms ease; } .site-footer-three .footer-widget__form button { background-color: var(--oxpins-primary); width: 56px; height: 56px; border-radius: 6px; position: relative; text-align: center; line-height: 55px; color: var(--oxpins-white); flex-shrink: 0; font-size: 24px; transition: all 500ms ease; border: none; outline: none; box-shadow: none; } .site-footer-three .footer-widget__form button i { display: block; transition: all 300ms ease; } .site-footer-three .footer-widget__form button:hover { background-color: var(--oxpins-white); color: var(--oxpins-primary); } .site-footer-three .footer-widget__form button:hover i { transform: rotate(30deg); } .site-footer-three .footer-widget__checked-box { position: relative; margin: 15px 0 0; } .site-footer-three .footer-widget__checked-box input[type=checkbox] { display: none; } .site-footer-three .footer-widget__checked-box label { position: relative; display: block; padding-left: 25px; margin: 0; color: var(--oxpins-gray); font-size: 16px; line-height: 24px; font-weight: 600; text-transform: none; cursor: pointer; font-family: var(--oxpins-font); } .site-footer-three .footer-widget__checked-box label span:before { position: absolute; top: 1.5px; left: 2px; display: block; content: "\f00c"; font-family: "FontAwesome"; font-weight: 900; font-size: 8px; pointer-events: none; transition: all 0.15s ease-in-out; opacity: 0; line-height: 1; } .site-footer-three .footer-widget__checked-box input[type=checkbox] + label span { position: absolute; top: 5px; left: 0; width: 15px; height: 15px; border-radius: 50%; vertical-align: middle; background-color: transparent; background: transparent; cursor: pointer; transition: all 300ms ease; border: 2px solid var(--oxpins-gray); } .site-footer-three .footer-widget__checked-box input[type=checkbox]:checked + label span:before { opacity: 1; } .site-footer-three__bottom { position: relative; display: block; background-color: #161616; } .site-footer-three__bottom-inner { position: relative; display: block; text-align: center; padding: 25px 0; } .site-footer-three__bottom-text { font-size: 16px; color: var(--oxpins-gray); font-weight: 600; margin: 0; } .site-footer-three__bottom-text a { color: inherit; transition: all ease 0.5s; } .site-footer-three__bottom-text a:hover { color: var(--oxpins-white); } /*-------------------------------------------------------------- # FAQ --------------------------------------------------------------*/ .faq-three { position: relative; padding: 120px 0 0; } @media (max-width: 767px) { .faq-three { padding: 80px 0 0; } } .faq-three__image { position: relative; z-index: 1; display: inline-block; padding: 20px 20px 0 0; } .faq-three__image::after { position: absolute; right: 0; top: 0; width: 171px; height: 356px; content: ""; border-radius: 6px; background-color: var(--oxpins-black); z-index: -1; } .faq-three__image img { max-width: 100%; height: auto; border-radius: 6px; } .faq-three__info { position: relative; max-width: 371px; border-radius: 6px; background: var(--oxpins-white); box-shadow: 0px 4px 60px 4px rgba(0, 0, 0, 0.06); padding: 37px 40px 30px; margin-top: -45px; } @media (max-width: 767px) { .faq-three__info { padding: 37px 25px 30px; } } .faq-three__info__icon { width: 74px; height: 74px; background-color: var(--oxpins-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; right: -37px; top: 0; bottom: 0; margin: auto; } .faq-three__info__title { font-size: 24px; font-weight: 400; margin: 0 0 0; } .faq-three__info__text { color: var(--oxpins-black); font-size: 16px; font-weight: 500; margin: 0; } .faq-three__info__text a { font-weight: 800; color: var(--oxpins-base); background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .faq-three__info__text a:hover { background-size: 100% 1px; } .faq-three__accrodion { position: relative; margin-top: -9px; } @media (max-width: 991px) { .faq-three__accrodion { margin-top: 30px; } } .faq-three__accrodion .accrodion { position: relative; border-bottom: 1px solid var(--oxpins-bdr2-color); padding: 37px 0 21px; } .faq-three__accrodion .accrodion .accrodion-title { position: relative; transition: 500ms; } .faq-three__accrodion .accrodion .accrodion-title h4 { margin: 0; padding: 0; font-size: 18px; font-weight: 400; transition: 500ms; cursor: pointer; width: 100%; padding-right: 40px; position: relative; } .faq-three__accrodion .accrodion .accrodion-title h4::after { position: absolute; right: 0; top: -7px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--oxpins-black); border-radius: 50%; font-family: "icomoon" !important; content: "\e906"; transform: rotate(-30deg); transition: 500ms; font-size: 15px; color: var(--oxpins-black); } .faq-three__accrodion .accrodion .accrodion-title h4:hover { color: var(--oxpins-base); } .faq-three__accrodion .accrodion .accrodion-title h4:hover::after { color: var(--oxpins-white); background-color: var(--oxpins-base); border-color: var(--oxpins-base); transform: rotate(-140deg); } .faq-three__accrodion .accrodion .inner { position: relative; padding: 22px 0 0; } .faq-three__accrodion .accrodion .inner p { font-size: 16px; font-weight: 600; } .faq-three__accrodion .accrodion .inner p:last-child { margin: 0; } .faq-three__accrodion .accrodion.active .accrodion-title h4 { color: var(--oxpins-base); } .faq-three__accrodion .accrodion.active .accrodion-title h4::after { color: var(--oxpins-white); background-color: var(--oxpins-base); border-color: var(--oxpins-base); transform: rotate(-140deg); } /*-------------------------------------------------------------- # Why Choose us --------------------------------------------------------------*/ .why-choose-one { position: relative; background-color: var(--oxpins-black); background-position: top right; background-repeat: no-repeat; background-size: auto; padding: 120px 0; } @media (max-width: 1199px) { .why-choose-one { padding: 0 0 120px; } } @media (max-width: 767px) { .why-choose-one { padding: 0 0 80px; } } .why-choose-one__image { position: absolute; z-index: 2; left: 0; top: 0; text-align: left; width: 46%; } @media (max-width: 1199px) { .why-choose-one__image { text-align: center; position: relative; width: 100%; margin: 0 0 50px; } } .why-choose-one__image img { max-width: 100%; min-height: 952px; object-fit: cover; } @media (max-width: 1199px) { .why-choose-one__image img { min-height: auto; } } .why-choose-one .container { position: relative; z-index: 3; } .why-choose-one__content { position: relative; margin: 0 0 51px; } .why-choose-one__content .section-title--home-five { margin-bottom: 16px; } .why-choose-one__content .section-title--home-five .section-title__tagline { color: var(--oxpins-bdr-color); } .why-choose-one__content .section-title--home-five .section-title__title { color: var(--oxpins-white); } .why-choose-one__content__text { font-size: 16px; font-weight: 600; line-height: 30px; letter-spacing: 0.48px; margin: 0; } .why-choose-one__box { position: relative; z-index: 3; background-color: var(--oxpins-white); border-radius: 6px; padding: 40px 40px 32px; transition: 500ms; } @media (min-width: 992px) and (max-width: 1199px) { .why-choose-one__box { padding: 40px 30px 32px; } } .why-choose-one__box__icon { width: 80px; height: 80px; background-color: var(--oxpins-bdr-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--oxpins-base); font-size: 50px; transition: 400ms; margin: 0 0 18px; } .why-choose-one__box__icon i { display: inline-block; transition: all 500ms linear; transition-delay: 0s; transition-delay: 0.1s; transform: scale(1); } .why-choose-one__box:hover .why-choose-one__box__icon { color: var(--oxpins-black); } .why-choose-one__box:hover .why-choose-one__box__icon i { transform: scale(0.9); } .why-choose-one__box__title { font-size: 20px; font-weight: 400; margin: 0 0 15px; } .why-choose-one__box__text { font-size: 18px; font-weight: 600; margin: 0; } /*-------------------------------------------------------------- # Services --------------------------------------------------------------*/ .service-one { position: relative; background-color: var(--oxpins-black); background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 120px 0; overflow: hidden; } @media (max-width: 767px) { .service-one { padding: 80px 0; } } .service-one__shape { position: absolute; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; width: 362px; height: 318px; animation: br-translate 3s ease infinite; } @media (max-width: 1300px) { .service-one__shape { display: none; } } @keyframes br-translate { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(-5px) translateY(-5px); } 100% { transform: translateX(0px) translateY(0px); } } .service-one .section-title--home-five .section-title__tagline { color: var(--oxpins-bdr-color); } .service-one .section-title--home-five .section-title__title { color: var(--oxpins-white); } .service-one__item { position: relative; min-height: 370px; overflow: hidden; border-radius: 6px; } .service-one__item__normal { position: relative; background-color: var(--oxpins-white); perspective: 300px; } .service-one__item__normal__icon { font-size: 50px; line-height: 50px; display: block; color: var(--oxpins-black); padding: 29px 30px 0; margin: 0 0 24px; } .service-one__item__normal__title { font-size: 24px; font-weight: 400; padding: 0 30px; margin: 0 0 2px; } .service-one__item__normal__text { font-size: 16px; font-weight: 600; padding: 0 30px; margin: 0 0 24px; } .service-one__item__normal__thumb { max-height: 119px; position: relative; overflow: hidden; } .service-one__item__normal__thumb img { width: 100%; height: 119px; object-fit: cover; } .service-one__item:hover .service-one__item__hover { transition: transform 500ms ease, top 500ms ease; transform: translateY(0%) translateZ(0px) scaleY(1) rotateX(0deg); } .service-one__item__hover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: transform 700ms ease, top 700ms ease; background-color: var(--oxpins-base); transform: translateY(0%) translateZ(150px) scaleY(0) rotateX(90deg); perspective: 300px; transform-origin: center center; padding: 30px 30px; } .service-one__item__hover::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-color: var(--oxpins-base); opacity: 0.8; } .service-one__item__hover__icon { font-size: 50px; line-height: 50px; display: block; color: var(--oxpins-white); margin: 0 0 24px; position: relative; z-index: 2; } .service-one__item__hover__title { font-size: 24px; font-weight: 400; color: var(--oxpins-white); margin: 0 0 2px; position: relative; z-index: 2; } .service-one__item__hover__text { font-size: 16px; font-weight: 600; color: var(--oxpins-white); position: relative; z-index: 2; margin: 0 0 27px; } .service-one__item__hover__btn { position: relative; z-index: 2; display: block; width: 76px; height: 76px; } .service-one__item__hover__btn a { width: 76px; height: 76px; background-color: var(--oxpins-white); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 24px; color: var(--oxpins-base); transition: all 300ms ease; } .service-one__item__hover__btn a:hover { background-color: var(--oxpins-black); color: var(--oxpins-white); transform: rotate(30deg); } /*-------------------------------------------------------------- # Feature --------------------------------------------------------------*/ .feature-five { position: relative; padding: 0 0 50px; } .feature-five__inner { margin-top: -82px; position: relative; z-index: 2; border-radius: 6px; background: var(--oxpins-white); box-shadow: 0px 4px 60px 4px rgba(0, 0, 0, 0.06); background-position: top right; background-repeat: no-repeat; background-size: auto; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 991px) { .feature-five__inner { display: grid; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .feature-five__inner { grid-template-columns: repeat(1, 1fr); } } .feature-five__item { position: relative; border-right: 1px solid var(--oxpins-bdr-color); padding: 50px 50px 42px; } @media (max-width: 1199px) { .feature-five__item { padding: 50px 32px 42px; } } @media (max-width: 767px) { .feature-five__item { border: none; } } .feature-five__item:last-child { border: none; } .feature-five__item__icon { width: 80px; height: 80px; background-color: var(--oxpins-bdr-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--oxpins-black); font-size: 44px; transition: 400ms; margin: 0 0 17px; } .feature-five__item__icon span { display: block; transition: all 0.5s ease; } .feature-five__item:hover .feature-five__item__icon { background-color: var(--oxpins-base); color: var(--oxpins-white); } .feature-five__item:hover .feature-five__item__icon span { transform: rotateY(180deg); } .feature-five__item__title { font-size: 20px; font-weight: 400; margin: 0 0 14px; } .feature-five__item__text { font-size: 18px; font-weight: 600; margin: 0; } .feature-five__item__rm { width: 55px; height: 55px; background-color: var(--oxpins-white); position: absolute; left: 0; right: 0; bottom: -27px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all ease 0.4s; } .feature-five__item__rm::after, .feature-five__item__rm::before { content: ""; width: 3px; height: 22px; background-color: var(--oxpins-black); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 20px; transition: all ease 0.4s; } .feature-five__item__rm::after { transform: translate(-50%, -50%) rotate(90deg); } .feature-five__item__rm:hover { background-color: var(--oxpins-base); } .feature-five__item__rm:hover::after, .feature-five__item__rm:hover::before { background-color: var(--oxpins-white); } /*-------------------------------------------------------------- # --------------------------------------------------------------*/