/*----------------------------------------------------------------------------------- Project Name: Auxa - Digital Studio and Agency HTML Template Author: XpressBuddy -->> (https://themeforest.net/user/xpressbuddy) Support: support@xpressbuddy.com Description: Auxa - Digital Studio and Agency HTML Template Developer: Mohammad Wasim Mia -> contact@xpressbuddy.com Version: 1.0 ----------------------------------------------------------------------------------- CSS INDEX =================== 01. Theme default CSS 02. header 03. global 04. hero 05. about 06. services 07. counter 08. marquee 09. team 10. cta 11. project 12. award 13. testimonial 14. blog 15. careear 16. feature 17. brand 18. funfact 19. portfolio 20. contact 21. breadcrumb 22. whyus 23. career 24. story 25. shop 26. faq 27. backtotop 28. mobile-menu 29. preloader -----------------------------------------------------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Outfit&family=Outfit:wght@300;400;500;600;700&display=swap"); :root { --font-body: 'Outfit', sans-serif; --font-heading: 'Outfit', serif; --color-primary: #C4EF17; --color-heading: #131217; --xb-track-color: #16171B; --color-dark: #0F172A; --color-white: #fff; --color-black: #000; --color-default: #A8A8A8; --color-gray: #F8F8F8; --color-border: #EFF5F8; --easing: cubic-bezier(0.67, 0.04, 0.3, 0.91); } /* reset css start */ :root { scroll-behavior: auto; } html { scroll-behavior: smooth; } body { padding: 0; margin: 0; font-weight: 400; position: relative; font-family: var(--font-body); font-size: 16px; line-height: 27px; color: var(--color-default); background-color: var(--color-black); scrollbar-color: var(--color-primary) var(--xb-track-color); scrollbar-width: thin; } body::-webkit-scrollbar { width: 7px; } body::-webkit-scrollbar-track { background: var(--xb-track-color); border-radius: 10px; } body::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; } img { max-width: 100%; height: auto; } ul { margin: 0px; padding: 0px; } button { cursor: pointer; } *:focus { outline: none; } button { border: none; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } button:focus { outline: none; } a { text-decoration: none; } a:hover { color: inherit; } select { height: 55px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../img/icon/select-arrow.png); background-position: calc(100% - 10px) 50%; background-repeat: no-repeat; padding-right: 20px; background-color: transparent; border: 0; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], form select, textarea { width: 100%; height: 75px; border-radius: 0; padding: 24px 20px; border: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: var(--color-white); font-weight: 500; } input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, form select::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #888686; opacity: 1; } input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, form select::-moz-placeholder, textarea::-moz-placeholder { color: #888686; opacity: 1; } input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, form select:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #888686; opacity: 1; } input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder, input[type="email"]:-moz-placeholder, input[type="tel"]:-moz-placeholder, form select:-moz-placeholder, textarea:-moz-placeholder { color: #888686; opacity: 1; } textarea { height: 100px; } button { border: 0; } table { width: 100%; } p, li, span { margin-bottom: 0; } /* reset css end */ /* global css start */ .nice-select { background-color: transparent; height: 75px; line-height: 73px; min-height: 70px; padding: 0 20px; width: 100%; padding: 0 46px; margin-bottom: 20px; background-color: #F3F4F5; border: 0; font-size: 16px; } .nice-select::after { border-bottom: 1.9px solid #B1B4BA; border-right: 1.9px solid #B1B4BA; height: 6px; right: 20px; width: 6px; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #F3F4F5; } .nice-select .list { width: 100%; } .nice-select .list li { margin-right: 0 !important; } .nice-select .list .option { color: var(--color-dark); font-weight: 500; } .nice-select .list .option.selected { font-weight: 600; } .nice-select .list .option.selected, .nice-select .list .option:hover { border: none !important; } /* global css end */ .body_wrap { position: relative; overflow: hidden; } .bg_img { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } .footer-bg { background-color: #04060A; } .black-bg { background: var(--color-black); } .gray-bg { background-color: var(--color-gray); } .gray-bg-2 { background-color: var(--color-gray-2); } .dark-bg { background-color: var(--color-dark); } .white { color: var(--color-white); } .pos-rel { position: relative; } .pos-absolute { position: absolute; } .f-right { float: right; } .border-effect a, .border-effect-2 a { display: inline !important; width: 100%; background-repeat: no-repeat; background-position-y: -2px; background-image: linear-gradient(transparent calc(100% - 2px), currentColor 1px); -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); background-size: 0 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .border-effect a:hover, .border-effect-2 a:hover { background-size: 100% 100%; color: inherit; } .border-effect-2 a { background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px); } .btn-video { width: 88px; height: 88px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--color-primary); position: relative; background-color: var(--color-white); } @media (max-width: 767px) { .btn-video { width: 70px; height: 70px; font-size: 18px; } } .btn-video:hover { color: var(--color-primary); } .btn-video::before { content: ""; position: absolute; z-index: 0; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: var(--color-white); border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; -webkit-animation: pulse-border 1500ms ease-out infinite; z-index: -2; } .btn-video-center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .border_effect a { display: inline !important; width: 100%; background-repeat: no-repeat; background-position-y: -2px; background-image: linear-gradient(transparent calc(100% - 2px), currentColor 1px); transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); background-size: 0 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .border_effect a:hover { background-size: 100% 100%; color: inherit; } @media (max-width: 991px) { .tx-col-md-6 { width: 50%; } } @media (max-width: 767px) { .tx-col-md-6 { width: 100%; } } .xb-close { background: rgba(0, 0, 0, 0.04); border: 9px solid transparent; color: #777; width: 36px; height: 36px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; position: relative; } .xb-close::before, .xb-close::after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; transform-origin: 50% 50%; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); background-color: #1b1b1b; } .xb-close::before { -webkit-transform: rotate(45deg); -khtml-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .xb-close::after { -webkit-transform: rotate(-45deg); -khtml-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .xb-close:hover::before, .xb-close:hover::after { -webkit-transform: rotate(0); -khtml-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } /* order & unorder list reset - start */ .ul_li, .ul_li_right, .ul_li_center, .ul_li_between { margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; align-items: center; } .ul_li > li, .ul_li_right > li, .ul_li_center > li, .ul_li_between > li { float: left; list-style: none; display: inline-block; } .ul_li { justify-content: flex-start; } .ul_li_center { justify-content: center; } .ul_li_right { justify-content: flex-end; } .ul_li_between { justify-content: space-between; } .ul_li_block { margin: 0px; padding: 0px; display: block; } .ul_li_block > li { display: block; list-style: none; } .flex-1 { flex: 1; } .color-black { color: var(--color-black); } .pagination_wrap ul { display: flex; flex-wrap: wrap; justify-content: center; margin: -5px; list-style: none; } .pagination_wrap ul li { padding: 5px; } .pagination_wrap ul li a { height: 48px; width: 48px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #11142D; background-color: #E4E4E4; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 1; overflow: hidden; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; } @media (max-width: 767px) { .pagination_wrap ul li a { height: 40px; width: 40px; font-size: 15px; } } .pagination_wrap ul li a.current_page, .pagination_wrap ul li a:hover { background-color: var(--color-primary); } .pagination_wrap ul li a.pagination-next { background-color: #1B1D21; padding: 12px 15px; min-width: 94px; color: var(--color-white); } .pagination_wrap ul li a.pagination-next:hover { background-color: var(--color-primary); color: #11142D; } .mr-none-60 { margin-right: -60px; } .ml-none-60 { margin-left: -60px; } .pb-8 { padding-bottom: 8px; } /*-- - Margin & Padding -----------------------------------------*/ /*-- Margin Top --*/ .mt-none-5 { margin-top: -5px; } .mt-none-10 { margin-top: -10px; } .mt-none-15 { margin-top: -15px; } .mt-none-20 { margin-top: -20px; } .mt-none-25 { margin-top: -25px; } .mt-none-30 { margin-top: -30px; } .mt-none-35 { margin-top: -35px; } .mt-none-40 { margin-top: -40px; } .mt-none-45 { margin-top: -45px; } .mt-none-50 { margin-top: -50px; } .mt-none-55 { margin-top: -55px; } .mt-none-60 { margin-top: -60px; } .mt-none-65 { margin-top: -65px; } .mt-none-70 { margin-top: -70px; } .mt-none-75 { margin-top: -75px; } .mt-none-80 { margin-top: -80px; } .mt-none-85 { margin-top: -85px; } .mt-none-90 { margin-top: -90px; } .mt-none-95 { margin-top: -95px; } .mt-none-100 { margin-top: -100px; } /*-- Margin Top --*/ .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-85 { margin-top: 85px; } .mt-90 { margin-top: 90px; } .mt-95 { margin-top: 95px; } .mt-100 { margin-top: 100px; } .mt-105 { margin-top: 105px; } .mt-110 { margin-top: 110px; } .mt-115 { margin-top: 115px; } .mt-120 { margin-top: 120px; } .mt-125 { margin-top: 125px; } .mt-130 { margin-top: 130px; } .mt-135 { margin-top: 135px; } .mt-140 { margin-top: 140px; } .mt-145 { margin-top: 145px; } .mt-150 { margin-top: 150px; } .mt-155 { margin-top: 155px; } .mt-160 { margin-top: 160px; } .mt-165 { margin-top: 165px; } .mt-170 { margin-top: 170px; } .mt-175 { margin-top: 175px; } .mt-180 { margin-top: 180px; } .mt-185 { margin-top: 185px; } .mt-190 { margin-top: 190px; } .mt-195 { margin-top: 195px; } .mt-200 { margin-top: 200px; } /*-- Margin Bottom --*/ .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-85 { margin-bottom: 85px; } .mb-90 { margin-bottom: 90px; } .mb-95 { margin-bottom: 95px; } .mb-100 { margin-bottom: 100px; } .mb-105 { margin-bottom: 105px; } .mb-110 { margin-bottom: 110px; } .mb-115 { margin-bottom: 115px; } .mb-120 { margin-bottom: 120px; } .mb-125 { margin-bottom: 125px; } .mb-130 { margin-bottom: 130px; } .mb-135 { margin-bottom: 135px; } .mb-140 { margin-bottom: 140px; } .mb-145 { margin-bottom: 145px; } .mb-150 { margin-bottom: 150px; } .mb-155 { margin-bottom: 155px; } .mb-160 { margin-bottom: 160px; } .mb-165 { margin-bottom: 165px; } .mb-170 { margin-bottom: 170px; } .mb-175 { margin-bottom: 175px; } .mb-180 { margin-bottom: 180px; } .mb-185 { margin-bottom: 185px; } .mb-190 { margin-bottom: 190px; } .mb-195 { margin-bottom: 195px; } .mb-200 { margin-bottom: 200px; } /*-- Margin Left --*/ .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } .ml-55 { margin-left: 55px; } .ml-60 { margin-left: 60px; } .ml-65 { margin-left: 65px; } .ml-70 { margin-left: 70px; } .ml-75 { margin-left: 75px; } .ml-80 { margin-left: 80px; } .ml-85 { margin-left: 85px; } .ml-90 { margin-left: 90px; } .ml-95 { margin-left: 95px; } .ml-100 { margin-left: 100px; } .ml-105 { margin-left: 105px; } .ml-110 { margin-left: 110px; } .ml-115 { margin-left: 115px; } .ml-120 { margin-left: 120px; } .ml-125 { margin-left: 125px; } .ml-130 { margin-left: 130px; } .ml-135 { margin-left: 135px; } .ml-140 { margin-left: 140px; } .ml-145 { margin-left: 145px; } .ml-150 { margin-left: 150px; } .ml-155 { margin-left: 155px; } .ml-160 { margin-left: 160px; } .ml-165 { margin-left: 165px; } .ml-170 { margin-left: 170px; } .ml-175 { margin-left: 175px; } .ml-180 { margin-left: 180px; } .ml-185 { margin-left: 185px; } .ml-190 { margin-left: 190px; } .ml-195 { margin-left: 195px; } .ml-200 { margin-left: 200px; } /*-- Margin Right --*/ .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } .mr-55 { margin-right: 55px; } .mr-60 { margin-right: 60px; } .mr-65 { margin-right: 65px; } .mr-70 { margin-right: 70px; } .mr-75 { margin-right: 75px; } .mr-80 { margin-right: 80px; } .mr-85 { margin-right: 85px; } .mr-90 { margin-right: 90px; } .mr-95 { margin-right: 95px; } .mr-100 { margin-right: 100px; } .mr-105 { margin-right: 105px; } .mr-110 { margin-right: 110px; } .mr-115 { margin-right: 115px; } .mr-120 { margin-right: 120px; } .mr-125 { margin-right: 125px; } .mr-130 { margin-right: 130px; } .mr-135 { margin-right: 135px; } .mr-140 { margin-right: 140px; } .mr-145 { margin-right: 145px; } .mr-150 { margin-right: 150px; } .mr-155 { margin-right: 155px; } .mr-160 { margin-right: 160px; } .mr-165 { margin-right: 165px; } .mr-170 { margin-right: 170px; } .mr-175 { margin-right: 175px; } .mr-180 { margin-right: 180px; } .mr-185 { margin-right: 185px; } .mr-190 { margin-right: 190px; } .mr-195 { margin-right: 195px; } .mr-200 { margin-right: 200px; } /*-- Padding Top --*/ .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-85 { padding-top: 85px; } .pt-90 { padding-top: 90px; } .pt-95 { padding-top: 95px; } .pt-100 { padding-top: 100px; } .pt-105 { padding-top: 105px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 115px; } .pt-120 { padding-top: 120px; } .pt-125 { padding-top: 125px; } .pt-130 { padding-top: 130px; } .pt-135 { padding-top: 135px; } .pt-140 { padding-top: 140px; } .pt-145 { padding-top: 145px; } .pt-150 { padding-top: 150px; } .pt-155 { padding-top: 155px; } .pt-160 { padding-top: 160px; } .pt-165 { padding-top: 165px; } .pt-170 { padding-top: 170px; } .pt-175 { padding-top: 175px; } .pt-180 { padding-top: 180px; } .pt-185 { padding-top: 185px; } .pt-190 { padding-top: 190px; } .pt-195 { padding-top: 195px; } .pt-200 { padding-top: 200px; } /*-- Padding Bottom --*/ .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-85 { padding-bottom: 85px; } .pb-90 { padding-bottom: 90px; } .pb-95 { padding-bottom: 95px; } .pb-100 { padding-bottom: 100px; } .pb-105 { padding-bottom: 105px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; } .pb-120 { padding-bottom: 120px; } .pb-125 { padding-bottom: 125px; } .pb-130 { padding-bottom: 130px; } .pb-135 { padding-bottom: 135px; } .pb-140 { padding-bottom: 140px; } .pb-145 { padding-bottom: 145px; } .pb-150 { padding-bottom: 150px; } .pb-155 { padding-bottom: 155px; } .pb-160 { padding-bottom: 160px; } .pb-165 { padding-bottom: 165px; } .pb-170 { padding-bottom: 170px; } .pb-175 { padding-bottom: 175px; } .pb-180 { padding-bottom: 180px; } .pb-185 { padding-bottom: 185px; } .pb-190 { padding-bottom: 190px; } .pb-195 { padding-bottom: 195px; } .pb-200 { padding-bottom: 200px; } /*-- Padding Left --*/ .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } .pl-55 { padding-left: 55px; } .pl-60 { padding-left: 60px; } .pl-65 { padding-left: 65px; } .pl-70 { padding-left: 70px; } .pl-75 { padding-left: 75px; } .pl-80 { padding-left: 80px; } .pl-85 { padding-left: 85px; } .pl-90 { padding-left: 90px; } .pl-95 { padding-left: 95px; } .pl-100 { padding-left: 100px; } .pl-105 { padding-left: 105px; } .pl-110 { padding-left: 110px; } .pl-115 { padding-left: 115px; } .pl-120 { padding-left: 120px; } .pl-125 { padding-left: 125px; } .pl-130 { padding-left: 130px; } .pl-135 { padding-left: 135px; } .pl-140 { padding-left: 140px; } .pl-145 { padding-left: 145px; } .pl-150 { padding-left: 150px; } .pl-155 { padding-left: 155px; } .pl-160 { padding-left: 160px; } .pl-165 { padding-left: 165px; } .pl-170 { padding-left: 170px; } .pl-175 { padding-left: 175px; } .pl-180 { padding-left: 180px; } .pl-185 { padding-left: 185px; } .pl-190 { padding-left: 190px; } .pl-195 { padding-left: 195px; } .pl-200 { padding-left: 200px; } /*-- Padding Right --*/ .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pr-55 { padding-right: 55px; } .pr-60 { padding-right: 60px; } .pr-65 { padding-right: 65px; } .pr-70 { padding-right: 70px; } .pr-75 { padding-right: 75px; } .pr-80 { padding-right: 80px; } .pr-85 { padding-right: 85px; } .pr-90 { padding-right: 90px; } .pr-95 { padding-right: 95px; } .pr-100 { padding-right: 100px; } .pr-105 { padding-right: 105px; } .pr-110 { padding-right: 110px; } .pr-115 { padding-right: 115px; } .pr-120 { padding-right: 120px; } .pr-125 { padding-right: 125px; } .pr-130 { padding-right: 130px; } .pr-135 { padding-right: 135px; } .pr-140 { padding-right: 140px; } .pr-145 { padding-right: 145px; } .pr-150 { padding-right: 150px; } .pr-155 { padding-right: 155px; } .pr-160 { padding-right: 160px; } .pr-165 { padding-right: 165px; } .pr-170 { padding-right: 170px; } .pr-175 { padding-right: 175px; } .pr-180 { padding-right: 180px; } .pr-185 { padding-right: 185px; } .pr-190 { padding-right: 190px; } .pr-195 { padding-right: 195px; } .pr-200 { padding-right: 200px; } /* typography css start */ h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.3; color: var(--color-white); font-weight: 400; font-family: var(--font-heading); } h2 { font-size: 32px; } h3 { font-size: 22px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } /* typography css end */ @-webkit-keyframes jump { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jump { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @-webkit-keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @-webkit-keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.2); transform: scale(0.2); } } @keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.2); transform: scale(0.2); } } @-webkit-keyframes scale-right { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes scale-right { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes fade-in { 0% { opacity: 0.7; } 40% { opacity: 1; } 100% { opacity: 0.7; } } @keyframes fade-in { 0% { opacity: 0.7; } 40% { opacity: 1; } 100% { opacity: 0.7; } } @keyframes hvr-ripple-out { 0% { top: 0; right: 0; bottom: 0; left: 0; } 100% { top: -6px; right: -6px; bottom: -6px; left: -6px; } } @keyframes hvr-ripple-out-two { 0% { top: 0; right: 0; bottom: 0; left: 0; } 100% { top: -18px; right: -18px; bottom: -18px; left: -18px; opacity: 0; } } @-webkit-keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-up-two { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes scale-up-two { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes scale-up-three { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 40% { -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @keyframes scale-up-three { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 40% { -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @keyframes animationFramesOne { 0% { transform: translate(0px, 0px) rotate(0deg); -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); -webkit-transform: translate(73px, -1px) rotate(36deg); -moz-transform: translate(73px, -1px) rotate(36deg); -ms-transform: translate(73px, -1px) rotate(36deg); -o-transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, -20px) rotate(72deg); -webkit-transform: translate(141px, -20px) rotate(72deg); -moz-transform: translate(141px, -20px) rotate(72deg); -ms-transform: translate(141px, -20px) rotate(72deg); -o-transform: translate(141px, -20px) rotate(72deg); } 60% { transform: translate(83px, -60px) rotate(108deg); -webkit-transform: translate(83px, -60px) rotate(108deg); -moz-transform: translate(83px, -60px) rotate(108deg); -ms-transform: translate(83px, -60px) rotate(108deg); -o-transform: translate(83px, -60px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); -webkit-transform: translate(-40px, 72px) rotate(144deg); -moz-transform: translate(-40px, 72px) rotate(144deg); -ms-transform: translate(-40px, 72px) rotate(144deg); -o-transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); } } @-webkit-keyframes animationFramesOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); } } @keyframes animationFramesTwo { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 20% { transform: translate(73px, -1px) rotate(36deg) scale(0.9); } 40% { transform: translate(141px, 72px) rotate(72deg) scale(1); } 60% { transform: translate(83px, 122px) rotate(108deg) scale(1.2); } 80% { transform: translate(-40px, 72px) rotate(144deg) scale(1.1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } @-webkit-keyframes animationFramesTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg) scale(0.9); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg) scale(1); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg) scale(1.2); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg) scale(1.1); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1); } } @keyframes animationFramesThree { 0% { transform: translate(165px, -30px); -webkit-transform: translate(165px, -30px); -moz-transform: translate(165px, -30px); -ms-transform: translate(165px, -30px); -o-transform: translate(165px, -30px); } 100% { transform: translate(-60px, 80px); -webkit-transform: translate(-60px, 80px); -moz-transform: translate(-60px, 80px); -ms-transform: translate(-60px, 80px); -o-transform: translate(-60px, 80px); } } @-webkit-keyframes animationFramesThree { 0% { transform: translate(165px, -30px); -webkit-transform: translate(165px, -30px); -moz-transform: translate(165px, -30px); -ms-transform: translate(165px, -30px); -o-transform: translate(165px, -30px); } 100% { transform: translate(-60px, 80px); -webkit-transform: translate(-60px, 80px); -moz-transform: translate(-60px, 80px); -ms-transform: translate(-60px, 80px); -o-transform: translate(-60px, 80px); } } @keyframes animationFramesFour { 0% { transform: translate(0px, 60px) rotate(0deg); -webkit-transform: translate(0px, 60px) rotate(0deg); -moz-transform: translate(0px, 60px) rotate(0deg); -ms-transform: translate(0px, 60px) rotate(0deg); -o-transform: translate(0px, 60px) rotate(0deg); } 100% { transform: translate(-100px, -100px) rotate(180deg); -webkit-transform: translate(-100px, -100px) rotate(180deg); -moz-transform: translate(-100px, -100px) rotate(180deg); -ms-transform: translate(-100px, -100px) rotate(180deg); -o-transform: translate(-100px, -100px) rotate(180deg); } } @-webkit-keyframes animationFramesFour { 0% { transform: translate(0px, 60px) rotate(0deg); -webkit-transform: translate(0px, 60px) rotate(0deg); -moz-transform: translate(0px, 60px) rotate(0deg); -ms-transform: translate(0px, 60px) rotate(0deg); -o-transform: translate(0px, 60px) rotate(0deg); } 100% { transform: translate(-100px, -100px) rotate(180deg); -webkit-transform: translate(-100px, -100px) rotate(180deg); -moz-transform: translate(-100px, -100px) rotate(180deg); -ms-transform: translate(-100px, -100px) rotate(180deg); -o-transform: translate(-100px, -100px) rotate(180deg); } } @keyframes animationFramesFive { 0% { transform: translate(0, 0) rotate(0deg); -webkit-transform: translate(0, 0) rotate(0deg); -moz-transform: translate(0, 0) rotate(0deg); -ms-transform: translate(0, 0) rotate(0deg); -o-transform: translate(0, 0) rotate(0deg); } 21% { transform: translate(4px, -20px) rotate(38deg); -webkit-transform: translate(4px, -20px) rotate(38deg); -moz-transform: translate(4px, -20px) rotate(38deg); -ms-transform: translate(4px, -20px) rotate(38deg); -o-transform: translate(4px, -20px) rotate(38deg); } 41% { transform: translate(-50px, -60px) rotate(74deg); -webkit-transform: translate(-50px, -60px) rotate(74deg); -moz-transform: translate(-50px, -60px) rotate(74deg); -ms-transform: translate(-50px, -60px) rotate(74deg); -o-transform: translate(-50px, -60px) rotate(74deg); } 60% { transform: translate(-20px, -30px) rotate(108deg); -webkit-transform: translate(-20px, -30px) rotate(108deg); -moz-transform: translate(-20px, -30px) rotate(108deg); -ms-transform: translate(-20px, -30px) rotate(108deg); -o-transform: translate(-20px, -30px) rotate(108deg); } 80% { transform: translate(-195px, -49px) rotate(144deg); -webkit-transform: translate(-195px, -49px) rotate(144deg); -moz-transform: translate(-195px, -49px) rotate(144deg); -ms-transform: translate(-195px, -49px) rotate(144deg); -o-transform: translate(-195px, -49px) rotate(144deg); } 100% { transform: translate(-1px, 0px) rotate(180deg); -webkit-transform: translate(-1px, 0px) rotate(180deg); -moz-transform: translate(-1px, 0px) rotate(180deg); -ms-transform: translate(-1px, 0px) rotate(180deg); -o-transform: translate(-1px, 0px) rotate(180deg); } } @-webkit-keyframes animationFramesFive { 0% { transform: translate(0, 0) rotate(0deg); -webkit-transform: translate(0, 0) rotate(0deg); -moz-transform: translate(0, 0) rotate(0deg); -ms-transform: translate(0, 0) rotate(0deg); -o-transform: translate(0, 0) rotate(0deg); } 21% { transform: translate(4px, -20px) rotate(38deg); -webkit-transform: translate(4px, -20px) rotate(38deg); -moz-transform: translate(4px, -20px) rotate(38deg); -ms-transform: translate(4px, -20px) rotate(38deg); -o-transform: translate(4px, -20px) rotate(38deg); } 41% { transform: translate(-50px, -60px) rotate(74deg); -webkit-transform: translate(-50px, -60px) rotate(74deg); -moz-transform: translate(-50px, -60px) rotate(74deg); -ms-transform: translate(-50px, -60px) rotate(74deg); -o-transform: translate(-50px, -60px) rotate(74deg); } 60% { transform: translate(-20px, -30px) rotate(108deg); -webkit-transform: translate(-20px, -30px) rotate(108deg); -moz-transform: translate(-20px, -30px) rotate(108deg); -ms-transform: translate(-20px, -30px) rotate(108deg); -o-transform: translate(-20px, -30px) rotate(108deg); } 80% { transform: translate(-195px, -49px) rotate(144deg); -webkit-transform: translate(-195px, -49px) rotate(144deg); -moz-transform: translate(-195px, -49px) rotate(144deg); -ms-transform: translate(-195px, -49px) rotate(144deg); -o-transform: translate(-195px, -49px) rotate(144deg); } 100% { transform: translate(-1px, 0px) rotate(180deg); -webkit-transform: translate(-1px, 0px) rotate(180deg); -moz-transform: translate(-1px, 0px) rotate(180deg); -ms-transform: translate(-1px, 0px) rotate(180deg); -o-transform: translate(-1px, 0px) rotate(180deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spinrev { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @-webkit-keyframes zoominup { 0% { transform: scale(1.2); } 50% { transform: scale(1); } 100% { transform: scale(1.2); } } @-webkit-keyframes updown { 0% { transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } 50% { transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); } 100% { transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } } @-webkit-keyframes updown-2 { 0% { transform: translateY(-15px); -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); } 50% { transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); } 100% { transform: translateY(-15px); -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); } } @keyframes ltr { 0% { width: 0; } 15% { width: 95%; } 85% { opacity: 1; } 90% { width: 95%; opacity: 0; } to { width: 0; opacity: 0; } } /*circleAnimation*/ @-webkit-keyframes circleAnimation { 0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; -webkit-transform: translate3d(0, 0, 0) rotateZ(0.01deg); transform: translate3d(0, 0, 0) rotateZ(0.01deg); } 34% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; -webkit-transform: translate3d(0, 5px, 0) rotateZ(0.01deg); transform: translate3d(0, 5px, 0) rotateZ(0.01deg); } 50% { -webkit-transform: translate3d(0, 0, 0) rotateZ(0.01deg); transform: translate3d(0, 0, 0) rotateZ(0.01deg); } 67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; -webkit-transform: translate3d(0, -3px, 0) rotateZ(0.01deg); transform: translate3d(0, -3px, 0) rotateZ(0.01deg); } } @-webkit-keyframes icon-bounce { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 60% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } @keyframes icon-bounce { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 60% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } @keyframes lr-animation { 0% { -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes tb-animation { 0% { -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes xb_up_down { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } .slide-up-down { animation: xb_up_down 1s ease infinite alternate; } @keyframes xb_ltr { 0% { transform: translateY(0); } 100% { transform: translateX(-20px); } } .slide-ltr { animation: xb_ltr 1s ease infinite alternate; } @-webkit-keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes zoom { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } @keyframes zoom { 0% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 50% { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes shake { 0% { -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); } 50% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); } } @keyframes shake { 0% { -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); } 50% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); } } @-webkit-keyframes down { 0% { -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } 50% { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } } @keyframes down { 0% { -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } 50% { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } } @keyframes outer-ripple { 0% { transform: scale(1); filter: alpha(opacity=50); opacity: 0.5; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-filter: alpha(opacity=50); } 80% { transform: scale(1.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); } 100% { transform: scale(2.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(2.5); -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); } } @-webkit-keyframes outer-ripple { 0% { transform: scale(1); filter: alpha(opacity=50); opacity: 0.5; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } 80% { transform: scale(2.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(2.5); -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); } 100% { transform: scale(3.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(3.5); -moz-transform: scale(3.5); -ms-transform: scale(3.5); -o-transform: scale(3.5); } } @-moz-keyframes outer-ripple { 0% { transform: scale(1); filter: alpha(opacity=50); opacity: 0.5; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } 80% { transform: scale(2.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(2.5); -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); } 100% { transform: scale(3.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(3.5); -moz-transform: scale(3.5); -ms-transform: scale(3.5); -o-transform: scale(3.5); } } @keyframes blink { from, to { opacity: 0; } 50% { opacity: 1; } } @-moz-keyframes blink { from, to { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes blink { from, to { opacity: 0; } 50% { opacity: 1; } } @-ms-keyframes blink { from, to { opacity: 0; } 50% { opacity: 1; } } @-o-keyframes blink { from, to { opacity: 0; } 50% { opacity: 1; } } @keyframes pulse-border { 0% { transform: scale(1); opacity: 0.67; } 100% { transform: scale(1.8); opacity: 0; } } @-webkit-keyframes pulse-border { 0% { transform: scale(1); opacity: 0.67; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes pulse-border-big { 0% { transform: scale(1); opacity: 0.67; } 100% { transform: scale(3); opacity: 0; } } @-webkit-keyframes pulse-border-big { 0% { transform: scale(1); opacity: 0.67; } 100% { transform: scale(3); opacity: 0; } } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-5deg); transform: scale(0.9) rotate(-5deg); } 50%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(5deg); transform: scale(1.1) rotate(5deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-5deg); transform: scale(1.1) rotate(-5deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-5deg); -ms-transform: scale(0.9) rotate(-5deg); transform: scale(0.9) rotate(-5deg); } 50%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(5deg); -ms-transform: scale(1.1) rotate(5deg); transform: scale(1.1) rotate(5deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-5deg); -ms-transform: scale(1.1) rotate(-5deg); transform: scale(1.1) rotate(-5deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .wow.skewIn.animated { -webkit-animation-name: xbSkewIn; animation-name: xbSkewIn; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .7s; animation-duration: .7s; -webkit-animation-timing-function: cubic-bezier(0.67, 0.04, 0.3, 0.91); animation-timing-function: cubic-bezier(0.67, 0.04, 0.3, 0.91); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes xbSkewIn { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes xbSkewIn { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); -webkit-transform: translateX(0); transform: translateX(0); } } .skewInImg { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); display: inline-block; position: relative; overflow: hidden; transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); } .skewInImg img { transform-origin: 50% 50%; transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); max-width: 100%; height: auto; transform: scale(1.5) translate(100px, 0px); } .skewInImg.animated { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .skewInImg.animated img { transform: scale(1) translate(0px, 0px); } [data-aos=fade-up] { transform: translateY(50px); } [data-aos=fade-down] { transform: translateY(-50px); } [data-aos=fade-right] { transform: translate(-50px); } [data-aos=fade-left] { transform: translate(50px); } [data-aos=fade-up-right] { transform: translate(-50px, 50px); } [data-aos=fade-up-left] { transform: translate(50px, 50px); } [data-aos=fade-down-right] { transform: translate(-50px, -50px); } [data-aos=fade-down-left] { transform: translate(50px, -50px); } [data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] { transition-timing-function: cubic-bezier(0.18, 0.57, 0.25, 0.97); } @-webkit-keyframes xb-danceTop { 16% { -webkit-transform: skew(-14deg); transform: skew(-14deg); } 33% { -webkit-transform: skew(12deg); transform: skew(12deg); } 49% { -webkit-transform: skew(-8deg); transform: skew(-8deg); } 66% { -webkit-transform: skew(6deg); transform: skew(6deg); } 83% { -webkit-transform: skew(-4deg); transform: skew(-4deg); } } @keyframes xb-danceTop { 16% { -webkit-transform: skew(-14deg); transform: skew(-14deg); } 33% { -webkit-transform: skew(12deg); transform: skew(12deg); } 49% { -webkit-transform: skew(-8deg); transform: skew(-8deg); } 66% { -webkit-transform: skew(6deg); transform: skew(6deg); } 83% { -webkit-transform: skew(-4deg); transform: skew(-4deg); } } @keyframes xbzoominzoomup { 0% { transform: scale(0.8); } 50% { transform: scale(1.2); } 100% { transform: scale(0.8); } } /*-- - Overlay ------------------------------------------*/ [data-overlay] { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; } [data-overlay]::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; width: 100%; height: 100%; } /*-- Overlay Color --*/ [data-overlay="light"]::before { background-color: var(--color-white); } [data-overlay="dark"]::before { background-color: var(--color-black); } /*-- Overlay Opacity --*/ [data-opacity="1"]::before { opacity: 0.1; } [data-opacity="2"]::before { opacity: 0.2; } [data-opacity="3"]::before { opacity: 0.3; } [data-opacity="4"]::before { opacity: 0.4; } [data-opacity="5"]::before { opacity: 0.5; } [data-opacity="6"]::before { opacity: 0.6; } [data-opacity="7"]::before { opacity: 0.7; } [data-opacity="8"]::before { opacity: 0.8; } [data-opacity="9"]::before { opacity: 0.9; } /*----------------------------------------*/ /* 02. header /*----------------------------------------*/ .header-style-one { border-bottom: 1px solid #242424; } .header-style-one .side-menu a { background-color: var(--color-primary); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; width: 56px; height: 56px; } @media (max-width: 991px) { .header-style-one .side-menu a { width: 50px; height: 50px; } } .header-area { position: relative; z-index: 5; } @media (max-width: 991px) { .header-area .xb-header { padding: 10px 0; } } .side-menu a { display: flex; align-items: center; justify-content: center; position: relative; width: 50px; height: 50px; } .side-menu a span { position: absolute; left: 47px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-transform: uppercase; color: var(--color-white); font-size: 14px; font-weight: 600; padding-left: 8px; } .side-menu a svg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } .side-menu a svg path { fill: var(--color-primary); } .header-style-two#xb-header-area .xb-header-area-sticky { padding: 15px 0; background-color: #16171B; } .header-style-two .side-menu { margin-left: 27px; padding-right: 45px; } .header-style-two .xb-header__top { border-bottom: 1px solid #FFFFFF0F; padding: 14px 0; margin-bottom: 10px; } @media (max-width: 767px) { .header-style-two .xb-header__top { display: none; } } .header-style-two .xb-header__top .top-list li { font-size: 14px; font-weight: 600; color: #FFFFFF; letter-spacing: -0.21px; text-transform: uppercase; } .header-style-two .xb-header__midle { margin-left: auto; margin-right: 191px; } @media (max-width: 1199px) { .header-style-two .xb-header__midle { margin-right: auto; } } @media (max-width: 767px) { .header-style-two .xb-header__midle { display: none; } } .header-style-two .xb-header__midle li { list-style: none; display: inline-block; margin-left: 9px; } .header-style-two .xb-header__midle li a { color: #FFFFFF; font-size: 14px; font-weight: 600; letter-spacing: 2.94px; text-transform: uppercase; text-decoration-line: underline; } @media (max-width: 767px) { .header-style-two .xb-header__btn { display: none; } } .header-style-two .xb-header__btn a { margin-left: 30px; padding: 19px 27px; } .header-style-two .xb-header__btn a.thm-btn--stroke { padding: 17px 27px; } @media (max-width: 991px) { .header-style-two .xb-header__btn a.thm-btn--stroke { display: none; } } .header-transparent { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 3; } .header-style-three { z-index: 3; } .header-style-three .xb-left-header .header-logo { margin-right: 250px; } @media (max-width: 767px) { .header-style-three .xb-left-header .header-logo { margin-right: 0; } } .header-style-three .xb-header { padding: 30px 0; } @media (max-width: 1199px) { .header-style-three .xb-header { padding: 10px 0; } } .header-style-three .header-bar { width: 78px; height: 26px; position: relative; margin-left: 275px; margin-right: auto; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .header-style-three .header-bar { margin-left: 88px; } } @media (max-width: 1199px) { .header-style-three .header-bar { margin-right: auto; margin-left: 0; } } @media (max-width: 991px) { .header-style-three .header-bar { margin-right: auto; margin-left: -100px; } } @media (max-width: 767px) { .header-style-three .header-bar { margin-right: 0; margin-left: auto; } } .header-style-three .header-bar span { width: 100%; height: 2px; background: #020202; position: absolute; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .header-style-three .header-bar span:nth-child(1) { top: 0; } .header-style-three .header-bar span:nth-child(2) { top: 10px; } .header-style-three .header-bar span:nth-child(3) { bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .header-style-three .header-btn { margin-left: 40px; } } @media (max-width: 1199px) { .header-style-three .header-btn { margin-left: 40px; } } @media (max-width: 767px) { .header-style-three .header-btn { display: none; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .header-style-three .main-menu ul li:not(:last-child) { margin-right: 32px; } } .header-bg::before { position: absolute; left: 0; top: 0; width: 43.8%; height: 100%; content: ""; background-color: var(--color-primary); z-index: -1; } @media (max-width: 1199px) { .header-bg::before { width: 50%; } } @media (max-width: 767px) { .header-bg::before { width: 100%; } } #xb-header-area .xb-header-area-sticky .main-menu > ul > li > a { padding: 37px 0; } #xb-header-area.header-style-three .xb-header-area-sticky { padding: 20px 0; } @media (max-width: 991px) { #xb-header-area.header-style-three .xb-header-area-sticky { padding: 11px 0; } } #xb-header-area .xb-header-area-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; top: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; visibility: hidden; background-color: #16171b; } #xb-header-area .xb-header-area-sticky.xb-header-fixed { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); visibility: visible; -webkit-box-shadow: 0 3px 18px rgba(6, 27, 92, 0.09); -khtml-box-shadow: 0 3px 18px rgba(6, 27, 92, 0.09); -moz-box-shadow: 0 3px 18px rgba(6, 27, 92, 0.09); -ms-box-shadow: 0 3px 18px rgba(6, 27, 92, 0.09); -o-box-shadow: 0 3px 18px rgba(6, 27, 92, 0.09); box-shadow: 0 3px 18px rgba(6, 27, 92, 0.09); } #xb-header-area.header-style-five .xb-header-area-sticky { padding: 20px 0; } .xb-header_btn a { font-family: var(--font-heading); line-height: 28px; letter-spacing: -0.16px; color: var(--color-primary); padding: 6px 20px; border: 1px solid var(--color-primary); display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-header_btn a:hover { color: var(--color-white); border-color: var(--color-white); -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); } .side-menu-4 { margin-left: 40px; } .xb-bar { display: flex; align-items: center; } .xb-bar:hover .xb-bar__inner span:nth-child(1), .xb-bar:hover .xb-bar__inner span:nth-child(3) { -webkit-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); } .xb-bar:hover .xb-bar__inner span:nth-child(2) { margin-left: 5px; } .xb-bar__inner { width: 32px; height: 23px; position: relative; display: flex; align-items: center; justify-content: center; transform: rotate(-45deg); } .xb-bar__inner span { width: 100%; position: absolute; background-color: #fff; height: 3px; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-bar__inner span:nth-child(1) { top: 0; width: 22px; } .xb-bar__inner span:nth-child(2) { top: 48%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .xb-bar__inner span:nth-child(3) { bottom: 0; width: 22px; } .xb-bar__text { padding-left: 9px; color: var(--color-white); font-family: var(--font-heading); } /* Navigation css */ .main-menu { display: flex; align-items: center; flex-grow: 1; } .main-menu__wrap { position: static; } .main-menu ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .main-menu ul li { position: relative; } .main-menu ul li:not(:last-child) { margin-right: 56px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .main-menu ul li:not(:last-child) { margin-right: 45px; } } @media (max-width: 1199px) { .main-menu ul li:not(:last-child) { margin-right: 35px; } } .main-menu ul li .submenu li { margin-right: 0; } .main-menu ul li a { display: inline-block; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--color-white); letter-spacing: 1.96px; padding: 47px 0; position: relative; line-height: 22px; text-transform: uppercase; letter-spacing: 2.94px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .main-menu ul li a span i { font-size: 11px; margin-left: 5px; } .main-menu ul li.menu-item-has-children:hover > .submenu { opacity: 1; visibility: visible; top: 100%; pointer-events: all; } .main-menu ul li:hover > a, .main-menu ul li.active > a { color: var(--color-primary); } .main-menu ul li .submenu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; min-width: 260px; top: calc(100% + 10px); opacity: 0; visibility: hidden; background: #16171b; left: 0; padding: 21px 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 3; text-align: left; box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.1); } .main-menu ul li .submenu li { -webkit-transition: all 0.35s cubic-bezier(0.39, 0.66, 0.56, 1.05); -o-transition: all 0.35s cubic-bezier(0.39, 0.66, 0.56, 1.05); transition: all 0.35s cubic-bezier(0.39, 0.66, 0.56, 1.05); } .main-menu ul li .submenu li a { color: var(--color-white); padding: 8px 32px; display: block; margin: 0; font-size: 16px; text-transform: capitalize; letter-spacing: 0; font-weight: 500; } .main-menu ul li .submenu li:hover > a, .main-menu ul li .submenu li.active > a { color: var(--color-primary); } .main-menu ul li .submenu ul { left: 100%; top: 0px; } .main-menu ul li .submenu ul::before { display: none; } .main-menu ul li.has-mega-menu { position: static; } .main-menu ul li.has-mega-menu li { width: 100%; } .main-menu ul li .mega-menu { width: 100%; left: 0; right: 0; position: absolute; box-shadow: none; background-color: transparent; padding: 0; top: calc(100% + 10px); opacity: 0; visibility: hidden; padding: 40px 35px; padding-bottom: 0; background-color: #060607; } .main-menu ul li .mega-menu::before { display: none; } .main-menu ul li .mega-menu .mega-menu-content { max-width: 1287px; margin: 0 auto; } .main-menu ul li .mega-menu .mega-menu-content a { padding: 0; } .main-menu ul li .mega-menu .mega-menu-content .col { margin-bottom: 30px; } .main-menu ul li .mega-menu .mega-menu-content .demo-pic { margin-bottom: 10px; position: relative; height: 270px; overflow: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .main-menu ul li .mega-menu .mega-menu-content .demo-pic:hover { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } @media (max-width: 1199px) { .main-menu ul li .mega-menu .mega-menu-content .demo-pic { height: 230px; } } .main-menu ul li .mega-menu .mega-menu-content .demo-pic.coming-soon:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .main-menu ul li .mega-menu h3 { font-size: 15px; text-align: center; font-family: var(--font-body); font-weight: 500; } .main-menu ul li.menu-last ul.submenu { right: 0; left: auto; } .main-menu ul li.menu-last ul.submenu ul { right: auto; left: -100%; } .main-menu ul li ul.submenu .menu-item-has-children > a::after { position: absolute; top: 9px; right: 15px; content: "\f105"; font-size: 13px; } .section-title .sub-title { color: #DDDDDD; font-weight: 700; line-height: 32px; letter-spacing: 0.7px; font-size: 14px; margin-bottom: 15px; position: relative; padding-left: 20px; display: inline-block; text-transform: uppercase; display: inline-block; } .section-title .sub-title::before { content: ""; height: 10px; width: 10px; background: var(--color-primary); border-radius: 50px; top: 50%; left: 0; position: absolute; transform: translateY(-50%); } .section-title .title { color: #fff; font-size: 60px; letter-spacing: -1.2px; line-height: 61.5px; text-transform: uppercase; display: inline-block; } @media (max-width: 1199px) { .section-title .title { font-size: 42px; letter-spacing: -1px; line-height: 50px; } } @media (max-width: 767px) { .section-title .title { font-size: 32px; letter-spacing: 0; line-height: 38.5px; } } .section-title .title span { color: #868686; } .section-title .title span span { color: var(--color-primary); } .section-title--two .sub-title { color: #1D2026; letter-spacing: 0.7px; line-height: 32px; margin-bottom: 50px; padding-left: 0; position: unset; } @media (max-width: 767px) { .section-title--two .sub-title { margin-bottom: 28px; } } .section-title--two .sub-title::before { display: none; } .section-title--two .title { font-size: 60px; font-weight: 400; line-height: 61.5px; letter-spacing: -1.2px; text-transform: lowercase; color: #1D2026; } @media (max-width: 1199px) { .section-title--two .title { font-size: 46px; line-height: 57px; } } @media (max-width: 991px) { .section-title--two .title { font-size: 38px; line-height: 50px; } } @media (max-width: 767px) { .section-title--two .title { font-size: 27px; line-height: 40px; } .section-title--two .title br { display: none; } } .section-title--two .title::first-letter { text-transform: capitalize; } .section-title--two .number { position: absolute; top: 10px; left: -130px; background: #1D2026; height: 40px; width: 48px; display: flex; align-items: center; justify-content: center; color: #FFF; border-radius: 10px; } .section-title--white .sub-title::after { background-color: #fff; } .section-title--white .sub-title, .section-title--white .title { color: #FFFFFF; text-transform: uppercase; } .section-title--white .number { background: var(--color-primary); color: var(--color-black); } .section-title--size .title { text-transform: uppercase; } .section-title--size .number { background: #FFFFFF; color: var(--color-black); } .section-title--border .title { position: relative; } .section-title--border .title span { background-color: var(--color-black); color: var(--color-white); } .section-title--border .title span span { color: #868686; } .section-title--border .title::before { position: absolute; bottom: 8px; left: 0; width: 100%; height: 1px; background-color: #fff; opacity: .2; content: ""; z-index: -1; } .xb-sec-title-border { position: relative; } .xb-sec-title-border::after { position: absolute; top: 45px; height: 2px; background-color: #000; height: 1px; opacity: .2; content: ""; left: 0; right: 0; width: 0; transform: scaleX(0); transform-origin: 0 100%; transition: 1.5s; } @media (max-width: 767px) { .xb-sec-title-border::after { top: 36px; } } .xb-sec-title-border.border-white::after { background-color: var(--color-white); } .xb-sec-title-border.triggered::after { transform: scale(1); width: 100%; } /*----------------------------------------*/ /* 03. globel /*----------------------------------------*/ @media (min-width: 1024px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1320px; padding-left: 15px; padding-right: 15px; } } .home-two { background-color: #1D2026; } .home-two main { background-color: #1D2026; } .home-three { background-color: #020202; } .home-three main { background-color: #020202; } .mxw_1660 { max-width: 1660px; } .mxw_1820 { max-width: 1820px; } .px-60 { padding: 0 60px; } @media (max-width: 991px) { .container.px-60 { padding-left: 15px; padding-right: 15px; } } .g-15 { padding: 0 5px; } .g-15 > * { padding-left: 8px; padding-right: 8px; } .mt-12 { margin-top: 12px; } .mt-none-12 { margin-top: -12px; } .tagcloud, .tags-links { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; margin: -10px; } .tagcloud a, .tags-links a { display: block; color: #B0B0B0; border: 1px solid rgba(237, 243, 245, 0.2); min-height: 36px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 14px; text-transform: capitalize; text-decoration: none; font-weight: 500; padding: 2px 17px 3px; margin: 7px; position: relative; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .tagcloud a:hover, .tags-links a:hover { color: var(--color-white); border-color: var(--color-primary); } .body-overlay { background-color: #000000; height: 100%; width: 100%; position: fixed; top: 0; z-index: 1010; left: 0; opacity: 0; visibility: hidden; transition: all 0.3s linear 0s; transition: all 600ms ease; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .body-overlay.active { opacity: .5; visibility: visible; } .post-tags li { font-size: 15px; text-transform: capitalize; position: relative; } .post-tags li:not(:first-child, :last-child) { margin-right: 11px; padding-right: 15px; } .post-tags li:not(:first-child, :last-child)::before { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; background-color: var(--color-primary); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; content: ""; } .post-tags li span { display: inline-block; background-color: var(--color-primary); padding: 0px 10px; line-height: 25px; color: var(--color-white); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; margin-right: 12px; } .post-tags li a { color: var(--color-black); } .post-tags li a:hover { color: var(--color-black); } .mfp-zoom-in .mfp-content { opacity: 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .mfp-zoom-in.mfp-ready .mfp-content { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } body .mfp-wrap .mfp-container .mfp-content .mfp-close { padding: 0; right: 0; text-align: center; top: -36px; width: 36px; height: 36px; -webkit-border-radius: 0; -khtml-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: var(--color-white); cursor: pointer; opacity: 1; font-size: 0; border: 9px solid transparent; position: absolute; } body .mfp-wrap .mfp-container .mfp-content .mfp-figure .mfp-close { top: 4px; } body .mfp-wrap .mfp-container .mfp-content .mfp-close::before, body .mfp-wrap .mfp-container .mfp-content .mfp-close::after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; transform-origin: 50% 50%; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); background-color: #222; } body .mfp-wrap .mfp-container .mfp-content .mfp-close::before { -webkit-transform: rotate(45deg); -khtml-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } body .mfp-wrap .mfp-container .mfp-content .mfp-close::after { -webkit-transform: rotate(-45deg); -khtml-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } body .mfp-wrap .mfp-container .mfp-content .mfp-close:hover::before, body .mfp-wrap .mfp-container .mfp-content .mfp-close:hover::after { -webkit-transform: rotate(0); -khtml-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } body .mfp-wrap .mfp-container .mfp-content .mfp-close:hover::before, body .mfp-wrap .mfp-container .mfp-content .mfp-close:hover::after { -webkit-transform: rotate(0); -khtml-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .mfp-iframe-holder .mfp-content { max-width: 1170px; } .xb-carousel-inner { margin: -30px; } .xb-swiper-sliders { position: relative; } .xb-swiper-container { overflow: hidden; padding: 30px; } .xb-swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform,-webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .xb-swiper-slide:not(.swiper-slide-visible) { opacity: 0; } .xb-swiper-slide { -webkit-transition: opacity 0.25s cubic-bezier(0.71, 0.02, 0.31, 1); -khtml-transition: opacity 0.25s cubic-bezier(0.71, 0.02, 0.31, 1); -moz-transition: opacity 0.25s cubic-bezier(0.71, 0.02, 0.31, 1); -ms-transition: opacity 0.25s cubic-bezier(0.71, 0.02, 0.31, 1); -o-transition: opacity 0.25s cubic-bezier(0.71, 0.02, 0.31, 1); transition: opacity 0.25s cubic-bezier(0.71, 0.02, 0.31, 1); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; } .z-index-2 { z-index: 2; position: relative; } .xb-overlay { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .xb-overlay-link { z-index: 1; } .text-12 { font-size: 12px; } .letter-spacing-0 { letter-spacing: 0; } @media (max-width: 991px) { .margin-none-md { margin-bottom: 0; } } @media (max-width: 767px) { .mb-30-xs { margin-bottom: 30px; } } .br-20 { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .z-1 { z-index: 1; } .z-3 { position: relative; z-index: 3; } .ml-auto { margin-left: auto; } .align-end { align-items: flex-end; } .xb-hover-zoom:hover .xb-item--img img { -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); } .xb-hover-zoom .xb-item--img { overflow: hidden; } .xb-hover-zoom .xb-item--img img { -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .xb-law-swiper-arrow .xb-swiper-arrow { border: 1px solid rgba(255, 255, 255, 0.12); width: 60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-law-swiper-arrow .xb-swiper-arrow.xb-swiper-arrow-next { margin-left: 10px; } .xb-law-swiper-arrow .xb-swiper-arrow:hover, .xb-law-swiper-arrow .xb-swiper-arrow.xb-swiper-arrow-next { color: var(--color-law); background-color: var(--color-white); } .xb-law-swiper-arrow-main-color .xb-swiper-arrow { background-color: var(--color-law); color: var(--color-white); } .pagination-style1 { bottom: -60px; } .pagination-style1 .swiper-pagination-bullet { width: 14px; height: 14px; background-color: #162432; } .pagination-style1.style-white .swiper-pagination-bullet { background-color: var(--color-white); } .text-heading { color: var(--color-heading); } .text-24 { font-size: 24px; } .weight-medium { font-weight: 500; } .xb-blur { background: var(--color-primary); filter: blur(139px); height: 481px; width: 481px; border-radius: 50%; z-index: -2; } @media (max-width: 991px) { .xb-blur { height: 300px; width: 300px; } } @media (max-width: 767px) { .xb-blur { height: 150px; width: 150px; } } .social-icon li { margin-top: 10px; } .social-icon li:not(:last-child) { margin-right: 31px; } @media (max-width: 991px) { .social-icon li:not(:last-child) { margin-right: 20px; } } .social-icon li a { color: #FFFFFF; font-size: 24px; height: 64px; width: 64px; border-radius: 50px; display: flex; align-items: center; justify-content: center; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .social-icon li a { font-size: 18px; height: 55px; width: 54px; } } .social-icon li a::before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; z-index: -1; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: all 0.4s cubic-bezier(0.56, 0.26, 0.31, 1.32); -o-transition: all 0.4s cubic-bezier(0.56, 0.26, 0.31, 1.32); transition: all 0.4s cubic-bezier(0.56, 0.26, 0.31, 1.32); transition-delay: .1s; transform-style: preserve-3d; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); transform-origin: center; border: 1px solid rgba(255, 255, 255, 0.15); } .social-icon li a::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; z-index: -1; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: all 0.4s cubic-bezier(0.56, 0.26, 0.31, 1.32); -o-transition: all 0.4s cubic-bezier(0.56, 0.26, 0.31, 1.32); transition: all 0.4s cubic-bezier(0.56, 0.26, 0.31, 1.32); background-color: var(--color-primary); transition-delay: .1s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); transform-style: preserve-3d; transform-origin: center; } .social-icon li a:hover { color: #020202; } .social-icon li a:hover::before { transform: scale(0); } .social-icon li a:hover::after { transform: scaleX(1); } .row.g-150 { margin-left: -75px; margin-right: -75px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .row.g-150 { margin-left: -35px; margin-right: -35px; } } @media (max-width: 1199px) { .row.g-150 { margin-left: -20px; margin-right: -20px; } } .row.g-150 > * { padding-left: 75px; padding-right: 75px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .row.g-150 > * { padding-left: 35px; padding-right: 35px; } } @media (max-width: 1199px) { .row.g-150 > * { padding-left: 20px; padding-right: 20px; } } .row.g-140 { margin-left: -70px; margin-right: -70px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .row.g-140 { margin-left: -40px; margin-right: -40px; } } @media (max-width: 1199px) { .row.g-140 { margin-left: -20px; margin-right: -20px; } } .row.g-140 > * { padding-left: 70px; padding-right: 70px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .row.g-140 > * { padding-left: 40px; padding-right: 40px; } } @media (max-width: 1199px) { .row.g-140 > * { padding-left: 20px; padding-right: 20px; } } .row.g-50 { margin-left: -25px; margin-right: -25px; } .row.g-50 > * { padding-left: 25px; padding-right: 25px; } .line_wrap { top: 0px; bottom: 0px; width: 100%; display: block; position: absolute; max-width: 1292px; margin: auto; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .line_wrap { max-width: 1171px; } } @media (max-width: 1199px) { .line_wrap { display: none; } } .line_wrap .xb-line::before, .line_wrap .xb-line::after { position: absolute; top: 0; left: -1px; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.18); content: ""; z-index: 2; } .line_wrap .xb-line::after { left: auto; right: 1px; } .xb-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .xb-svg svg { display: block; position: absolute; width: 100%; height: 100%; overflow: visible; } .sidebar-area { padding-left: 10px; } @media (max-width: 1199px) { .sidebar-area { padding-left: 0; } } .widget__title { font-size: 22px; font-weight: 500; margin-bottom: 25px; text-transform: uppercase; } @media (max-width: 1199px) { .widget__title { font-size: 20px; } } .widget__search { position: relative; } .widget__search input { height: 60px; background-color: #16171B; padding: 20px; border: 0; font-size: 16px; font-weight: 400; margin-bottom: 0; } .widget__search input::-webkit-input-placeholder { color: #B0B0B0; opacity: 1; } .widget__search input::-moz-placeholder { color: #B0B0B0; opacity: 1; } .widget__search input:-ms-input-placeholder { color: #B0B0B0; opacity: 1; } .widget__search input:-moz-placeholder { color: #B0B0B0; opacity: 1; } .widget__search button { position: absolute; top: 0; right: 0; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: var(--color-black); background-color: var(--color-primary); font-size: 18px; } .widget__category li:not(:last-child) { margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid rgba(231, 233, 238, 0.2); } .widget__category li a { position: relative; display: block; z-index: 1; color: #888686; font-size: 16px; display: flex; align-items: center; justify-content: space-between; font-weight: 500; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .widget__category li a:hover, .widget__category li a.active { color: var(--color-primary); } .widget__category li a i { font-size: 13px; } .widget__post-item:not(:last-child) { margin-bottom: 20px; } .widget__post-item .post-thumb { width: 90px; height: 90px; overflow: hidden; margin-right: 20px; } .widget__post-item .post-thumb img { width: 100%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 100%; object-fit: cover; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .widget__post-item:hover .post-thumb img { -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); -webkit-filter: grayscale(0%); filter: grayscale(0%); } .widget__post-item:hover .post-title a { background-size: 100% 100%; } .widget__post-item .post-meta { margin-bottom: 5px; } .widget__post-item .post-meta a { font-size: 12px; color: #DDDDDD; position: relative; } .widget__post-item .post-meta a:not(:last-child) { margin-right: 9px; padding-right: 12px; } .widget__post-item .post-meta a:not(:last-child)::before { position: absolute; top: 50%; right: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 1px; height: 15px; background-color: #fff; opacity: 0.2; } .widget__post-item .post-meta a i { margin-right: 10px; color: #fff; } .widget__post-item .post-content { width: calc(100% - 110px); } .widget__post-item .post-content .post-title { font-size: 16px; color: var(--color-white); font-weight: 500; letter-spacing: -0.16px; } .widget__post-item .post-content .post-title a { color: inherit; } .comments-form { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 40px; } @media (max-width: 767px) { .comments-form { padding-top: 25px; } } .comments-form .comment-heading { margin-bottom: 30px; } .comments-form .title { font-size: 30px; margin-bottom: 7px; text-transform: uppercase; } @media (max-width: 767px) { .comments-form .title { font-size: 26px; } } .comments-form form input, .comments-form form textarea { height: 55px; margin-bottom: 20px; padding-left: 0; width: 100%; font-size: 15px; color: var(--color-white); border-radius: 0px; background-color: transparent; background-color: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .comments-form form input::-webkit-input-placeholder, .comments-form form textarea::-webkit-input-placeholder { color: #76797C; opacity: 1; } .comments-form form input::-moz-placeholder, .comments-form form textarea::-moz-placeholder { color: #76797C; opacity: 1; } .comments-form form input:-ms-input-placeholder, .comments-form form textarea:-ms-input-placeholder { color: #76797C; opacity: 1; } .comments-form form input:-moz-placeholder, .comments-form form textarea:-moz-placeholder { color: #76797C; opacity: 1; } .comments-form form input:focus, .comments-form form textarea:focus { border-color: var(--color-primary); } .comments-form form textarea { height: 150px; } .comments-form .xb-btn { font-size: 14px; font-weight: 700; text-transform: None; color: #242528; border-style: none; padding: 19px 31px; align-self: center; position: relative; display: inline-block; background-color: var(--color-primary); line-height: 1.1; letter-spacing: 0.6px; transition: all 0.2s cubic-bezier(0.68, 0.01, 0.58, 0.75); } .form-check-input { margin-top: 6px; margin-right: 5px; } /*----------------------------------------*/ /* 04. hero /*----------------------------------------*/ .hero__contant .title { font-size: 115px; text-transform: uppercase; line-height: 120.5px; letter-spacing: -3.45px; } @media (max-width: 1199px) { .hero__contant .title { font-size: 90px; line-height: 100px; letter-spacing: -2.45px; } } @media (max-width: 991px) { .hero__contant .title { font-size: 75px; line-height: 80px; } } @media (max-width: 767px) { .hero__contant .title { font-size: 40px; line-height: 42px; } } .hero__contant .title span.sp-one { color: var(--color-primary); } .hero__contant .title span.sp-two { color: #868686; } .hero__main-img { top: -105px; z-index: -1; } @media (max-width: 991px) { .hero__main-img { top: -80px; } } @media (max-width: 767px) { .hero__main-img { top: -40px; } } .hero__main-img::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(183deg, #000 5.45%, rgba(0, 0, 0, 0) 40.99%); } @media (max-width: 767px) { .hero__shape { display: none; } } .hero__shape .shape { position: absolute; height: 84px; width: 84px; border-radius: 50%; right: 52px; top: 77px; } @media (max-width: 991px) { .hero__shape .shape { width: 60px; height: 60px; right: 20px; } } .hero__shape .shape--1 { background: var(--color-primary); z-index: 1; margin-right: -52px; display: inline-block; } @media (max-width: 991px) { .hero__shape .shape--1 { margin-right: -33px; } } .hero__shape .shape--2 { border: 2px solid #FFF; display: inline-block; } .hero__bg-blur { right: -25px; bottom: 9%; position: absolute; } .hero__content-two .xb-item--title { font-size: 80px; line-height: 110px; letter-spacing: -2.4px; text-transform: uppercase; margin-bottom: 26px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero__content-two .xb-item--title { font-size: 63px; line-height: 90px; } } @media (max-width: 1199px) { .hero__content-two .xb-item--title { font-size: 60px; line-height: 86px; letter-spacing: -1.4px; } } @media (max-width: 767px) { .hero__content-two .xb-item--title { font-size: 38px; line-height: 56px; letter-spacing: 0; } } .hero__content-two .xb-item--title .span--one { color: var(--color-primary); } .hero__content-two .xb-item--title .span--two { color: #868686; } .hero__content-two .xb-item--sub_title { font-size: 20px; line-height: 32px; margin-bottom: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero__content-two .xb-item--sub_title { max-width: 600px; } } @media (max-width: 1199px) { .hero__content-two .xb-item--sub_title { max-width: 500px; } } .hero__content-two .xb-item--button { margin-bottom: 80px; } @media (max-width: 991px) { .hero__content-two .xb-item--button { margin-bottom: 40px; } } @media (max-width: 767px) { .hero__content-two .xb-item--button { margin-bottom: 10px; } } .hero__content-two .xb-item--counter .inner:not(:last-child) { margin-right: 73px; } @media (max-width: 767px) { .hero__content-two .xb-item--counter .inner:not(:last-child) { margin-right: 20px; } } .hero__content-two .xb-item--counter .inner .icon { display: flex; margin-right: 22px; } .hero__content-two .xb-item--counter .inner .holder .number { font-size: 60px; line-height: 1; letter-spacing: -1.2px; font-weight: 400; margin-bottom: 9px; } @media (max-width: 767px) { .hero__content-two .xb-item--counter .inner .holder .number { font-size: 48px; } } .hero__content-two .xb-item--counter .inner .holder .number .suffix { transform: translateY(5px); position: relative; display: inline-block; padding-left: 19px; } @media (max-width: 767px) { .hero__content-two .xb-item--counter .inner .holder .number .suffix { line-height: 1; } } .hero__content-two .xb-item--counter .inner .holder .content { font-size: 16px; font-weight: 700; color: #FFFFFF; text-transform: uppercase; line-height: 1; } .hero .hero-right_site { position: absolute; right: -25%; top: 72px; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero .hero-right_site { max-width: 900px; } } @media (max-width: 1199px) { .hero .hero-right_site { max-width: 700px; } } @media (max-width: 991px) { .hero .hero-right_site { position: relative; margin-top: 30px; right: 0; top: 0; } } .hero .hero-right_site > img { animation: spin 50s infinite linear; -webkit-animation: spin 50s infinite linear; } .hero .hero-right_site .hero-video { position: absolute; left: 5.5%; bottom: 29%; width: 105px; height: 105px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border: 1px solid var(--color-primary); background-color: #1D2026; z-index: 2; display: flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .hero .hero-right_site .hero-video { bottom: 58%; width: 80px; height: 80px; } } .hero .hero-right_site .hero-video .shape-border { position: absolute; top: -29px; left: -29px; } @media (max-width: 767px) { .hero .hero-right_site .hero-video .shape-border { top: -17px; left: -17px; } .hero .hero-right_site .hero-video .shape-border svg { width: 110px; height: 110px; } } .hero .hero-right_site .play-text { position: absolute; bottom: 14px; right: -95px; font-size: 14px; text-transform: uppercase; color: #fff; font-weight: 600; } .hero-style-two { min-height: 1050px; } @media (max-width: 1199px) { .hero-style-two { min-height: 900px; } } @media (max-width: 991px) { .hero-style-two { padding-bottom: 100px; padding-top: 100px; } } @media (max-width: 767px) { .hero-style-two { font-size: 38px; line-height: 62px; padding-bottom: 83px; padding-top: 60px; } } .hero-style-three { min-height: 1002px; position: relative; z-index: 1; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-style-three { min-height: 900px; } } @media (max-width: 1199px) { .hero-style-three { min-height: 750px; padding-bottom: 72px; } } @media (max-width: 991px) { .hero-style-three { min-height: 635px; padding-bottom: 55px; } } @media (max-width: 767px) { .hero-style-three { padding-bottom: 0; } } .hero-style-three .hero-sec-title-htree .title { font-size: 115px; line-height: 120.5px; letter-spacing: -3.45px; margin-bottom: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-style-three .hero-sec-title-htree .title { font-size: 90px; line-height: 110px; } } @media (max-width: 1199px) { .hero-style-three .hero-sec-title-htree .title { font-size: 70px; font-weight: 400; line-height: 84px; letter-spacing: -1.45px; } } @media (max-width: 991px) { .hero-style-three .hero-sec-title-htree .title { font-size: 56px; line-height: 64px; } } @media (max-width: 767px) { .hero-style-three .hero-sec-title-htree .title { font-size: 40px; line-height: 52px; letter-spacing: 0; margin-bottom: 20px; } } .hero-style-three .hero-sec-title-htree .sub-title { margin-bottom: 28px; } .hero-style-three .hero-sec-title-htree .sub-content { font-size: 22px; letter-spacing: 0.66px; line-height: 30px; text-transform: uppercase; color: #DDD; margin-bottom: 75px; } @media (max-width: 991px) { .hero-style-three .hero-sec-title-htree .sub-content { font-size: 16px; margin-bottom: 40px; } } .hero-style-three .heo-sec-img { position: absolute; bottom: 0; right: 0; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-style-three .heo-sec-img { max-width: 800px; } } @media (max-width: 1199px) { .hero-style-three .heo-sec-img { max-width: 700px; right: -5%; } } @media (max-width: 991px) { .hero-style-three .heo-sec-img { max-width: 500px; right: -8%; } } @media (max-width: 767px) { .hero-style-three .heo-sec-img { position: unset; } } .hero-cirlce-shape { position: absolute; right: -16%; bottom: -61%; z-index: -2; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-cirlce-shape { right: -15%; max-width: 1000px; } } @media (max-width: 1199px) { .hero-cirlce-shape { right: -28%; max-width: 1000px; } } @media (max-width: 991px) { .hero-cirlce-shape { right: -29%; max-width: 650px; bottom: -48%; } } .hero-cirlce-shape img { animation: spin 50s infinite linear; -webkit-animation: spin 50s infinite linear; } /*----------------------------------------*/ /* 05. about /*----------------------------------------*/ .about-top { margin-top: -268px; } @media (max-width: 991px) { .about-top { margin-top: -230px; padding-bottom: 100px; } } @media (max-width: 767px) { .about-top { margin-top: -140px; } } .about-nav { border-bottom: none; margin-bottom: 40px; } .about-nav .nav-item { margin-bottom: 10px; } .about-nav .nav-item:not(:last-child) { margin-right: 46px; } @media (max-width: 767px) { .about-nav .nav-item:not(:last-child) { margin-right: 20px; } } .about-nav .nav-item .nav-link { background: none; border: none; color: #DDD; font-size: 22px; font-weight: 400; opacity: 0.5; padding: 0; text-transform: uppercase; } @media (max-width: 767px) { .about-nav .nav-item .nav-link { font-size: 16px; } } .about-nav .nav-item .nav-link.active { opacity: 1; } .about-paragraph { padding-right: 170px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .about-paragraph { padding-right: 50px; } } @media (max-width: 1199px) { .about-paragraph { padding-right: 30px; } } .about-paragraph p { color: #A8A8A8; font-size: 16px; font-weight: 400; line-height: 26px; } .about-paragraph p:not(:last-child) { margin-bottom: 40px; } @media (max-width: 1199px) { .about-paragraph p:not(:last-child) { margin-bottom: 25px; } } @media (max-width: 991px) { .about-logo { max-width: 300px; } } @media (max-width: 767px) { .about-logo { max-width: 150px; } } .about-right .about-img img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .about-right .about-img .about-year { height: 168px; width: 168px; background: var(--color-primary); color: #000; text-align: center; align-items: center; position: absolute; left: 0; bottom: 0; padding-top: 33px; } @media (max-width: 767px) { .about-right .about-img .about-year { height: 146px; width: 140px; padding-top: 23px; } } .about-right .about-img .about-year h2 { font-size: 70px; font-weight: 700; color: #000; line-height: 54px; margin-bottom: 12px; } @media (max-width: 767px) { .about-right .about-img .about-year h2 { font-size: 50px; } } .about-right .about-img .about-year p { font-size: 12px; font-weight: 700; line-height: 15.5px; letter-spacing: 1.2px; text-transform: uppercase; } .about-icon { position: absolute; right: 88px; bottom: -35%; z-index: -1; } .about-area .about-year { min-height: 334px; min-width: 334px; background: var(--color-primary); color: #000; text-align: center; align-items: center; display: flex; justify-content: center; flex-direction: column; position: absolute; left: 0; bottom: 0; padding-top: 33px; padding: 50px 0; } @media (max-width: 991px) { .about-area .about-year { min-height: 250px; min-width: 250px; } } @media (max-width: 767px) { .about-area .about-year { min-height: auto; min-width: auto; padding: 20px; } } .about-area .about-year h2 { font-size: 139px; font-weight: 700; line-height: 107.581px; letter-spacing: -4.184px; color: #000; margin-bottom: -5px; } @media (max-width: 991px) { .about-area .about-year h2 { font-size: 100px; } } @media (max-width: 767px) { .about-area .about-year h2 { font-size: 50px; margin-bottom: 10px; line-height: 1; } } .about-area .about-year p { font-size: 23px; font-weight: 700; line-height: 30.88px; letter-spacing: 2.391px; text-transform: uppercase; margin-top: -5px; } @media (max-width: 767px) { .about-area .about-year p { font-size: 15px; font-weight: 700; line-height: 23.88px; letter-spacing: 0; } } .about-area .section-content { display: flex; justify-content: center; font-size: 20px; line-height: 30px; max-width: 570px; margin-left: 33%; } @media (max-width: 767px) { .about-area .section-content { margin-left: 0; } } .about-area .section-content-bottom { font-size: 16px; line-height: 26px; margin-left: 46px; } @media (max-width: 767px) { .about-area .section-content-bottom { margin-left: 0; margin-bottom: 40px; } } /*----------------------------------------*/ /* 06. services /*----------------------------------------*/ .xb-service-box { background-color: #16171B; z-index: 1; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service-box:hover { background: var(--color-primary); } .xb-service-box:hover .xb-item--title, .xb-service-box:hover .xb-item--content { color: var(--color-black); } .xb-service-box:hover .xb-item--shape { opacity: 1; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .xb-service-box::before { content: ""; position: absolute; z-index: -1; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: inherit; padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: add, add; mask-composite: add, add; -webkit-mask-composite: source-out; mask-composite: exclude; background: var(--grd, linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(250, 250, 250, 0.12) 0.01%, rgba(1, 3, 20, 0) 58.12%, rgba(255, 255, 255, 0.12) 109.99%)); } .xb-service-box .xb-item--inner { overflow: hidden; position: relative; padding: 55px 45px; } @media (max-width: 767px) { .xb-service-box .xb-item--inner { padding: 40px 20px; } } .xb-service-box .xb-item--icon { width: 76px; height: 76px; background-color: var(--color-white); margin-right: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } @media (max-width: 767px) { .xb-service-box .xb-item--icon { margin-right: 20px; } } .xb-service-box .xb-item--holder { width: calc(100% - 111px); } @media (max-width: 767px) { .xb-service-box .xb-item--holder { width: calc(100% - 96px); } } .xb-service-box .xb-item--title { margin-bottom: 11px; font-weight: 400; letter-spacing: -0.22px; text-transform: uppercase; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service-box .xb-item--content { color: #B2B6B8; margin-right: 0px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service-box .xb-item--shape { position: absolute; bottom: 0; right: 0; z-index: -1; opacity: 0; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } @media (max-width: 767px) { .xb-service-box .xb-item--shape { max-width: 120px; } } .service-shape { position: absolute; bottom: 127px; right: -8px; } .service-wrapper { padding: 66px 0; padding-left: 114px; padding-right: 84px; margin-bottom: 30px; position: relative; z-index: 1; } @media (max-width: 767px) { .service-wrapper { padding: 40px; } } .service-wrapper .service-left { margin-right: 157px; } @media (max-width: 1199px) { .service-wrapper .service-left { margin-right: 50px; } } @media (max-width: 767px) { .service-wrapper .service-left { margin-right: 0; } } .service-wrapper .xb-item--shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .service-wrapper .xb-item--shape svg { width: 100%; height: 100%; display: block; } .service-wrapper .xb-item--shape-border { position: absolute; top: 16px; left: 24px; bottom: 16px; right: 24px; z-index: -1; } @media (max-width: 767px) { .service-wrapper .xb-item--shape-border { top: 12px; left: 12px; bottom: 12px; right: 12px; } } .service-wrapper .xb-item--shape-border img { width: 100%; height: 100%; } .service-wrapper .xb-item--holder { display: flex; align-items: center; } @media (max-width: 991px) { .service-wrapper .xb-item--holder { flex-wrap: wrap; flex-direction: column-reverse; } } @media (max-width: 991px) { .service-wrapper .xb-item--holder .service-right { margin-bottom: 30px; } } .service-wrapper .xb-item--title { font-size: 45px; font-weight: 400; line-height: 55px; letter-spacing: -0.45px; margin-bottom: 22px; } @media (max-width: 767px) { .service-wrapper .xb-item--title { font-size: 28px; line-height: 35px; } } .service-wrapper .xb-item--title a { color: currentColor; } .service-wrapper .xb-item--content { line-height: 31.5px; margin-bottom: 74px; } .service-wrapper .xb-item--button { color: #FFF; border-radius: 8px; border: 0.52px solid #FFF; padding: 10px 20px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .service-wrapper .xb-item--button:hover { color: var(--color-primary); border-color: var(--color-primary); } .service-button { padding-top: 42px; } .xb-service:hover .xb-item--icon { background: #fff; } .xb-service:hover .xb-item--icon img { filter: brightness(0%); } .xb-service:hover .xb-item--title, .xb-service:hover .xb-item--content { text-decoration: underline; } .xb-service:hover .xb-item--arrow { border-color: var(--color-primary); } .xb-service:hover .xb-item--arrow i { color: var(--color-primary); } .xb-service .xb-item--icon { height: 76px; width: 76px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; border-radius: 50px; margin-bottom: 13px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service .xb-item--icon img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service .xb-item--title { font-weight: 400; line-height: 34px; letter-spacing: -0.22px; text-transform: uppercase; color: var(--color-default); margin-bottom: 12px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service .xb-item--content { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service .xb-item--arrow { margin-top: 33px; height: 24px; width: 19px; border-bottom: 1px solid var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service .xb-item--arrow i { transform: rotate(-43deg); font-size: 24px; color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .service-sec-title .sub-content { margin-left: 34%; } @media (max-width: 1199px) { .service-sec-title .sub-content { margin-left: 20%; } } @media (max-width: 991px) { .service-sec-title .sub-content { margin-left: 0%; } } .innar-service .title-link { font-family: var(--font-heading); font-size: 22px; letter-spacing: -0.22px; color: #FFF; } .innar-service .title-link span { height: 60px; width: 60px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; border-radius: 50px; margin-left: 8px; color: #292D32; } .xb-service2 { overflow: hidden; display: inline-block; } .xb-service2:hover .xb-item--image img { filter: grayscale(0); -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } .xb-service2:hover .xb-item--image::before { opacity: 1; } .xb-service2:hover .xb-item--title, .xb-service2:hover .xb-item--sub-title { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .xb-service2:hover .xb-item--sub-title { transition-delay: .2s; } .xb-service2 .xb-item--image { display: inline-block; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service2 .xb-item--image img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; filter: grayscale(100%); } .xb-service2 .xb-item--image::before { position: absolute; content: ""; bottom: 0; left: 0; height: 100%; width: 100%; opacity: 0; background: linear-gradient(359deg, var(--color-primary) 5.54%, rgba(111, 136, 9, 0) 84.62%); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 1; } .xb-service2 .xb-item--content { position: absolute; bottom: 97px; left: 0; right: 0; text-align: center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 2; padding: 10px; } .xb-service2 .xb-item--title { font-size: 40px; font-weight: 500; letter-spacing: -0.4px; text-transform: uppercase; margin-bottom: -2px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: var(--color-white); opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } @media (max-width: 991px) { .xb-service2 .xb-item--title { font-size: 30px; } } .xb-service2 .xb-item--title a { color: currentColor; } .xb-service2 .xb-item--sub-title { font-size: 20px; color: #FFF; font-weight: 500; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); display: inline-block; } .service-btn { position: absolute; right: 0; top: 126px; } @media (max-width: 767px) { .service-btn { position: unset; } } .service-tag .xb-item--tag { text-align: center; } .service-tag span { display: inline-block; font-size: 48px; font-weight: 400; line-height: 55px; letter-spacing: -0.96px; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 50px; padding: 20px; margin: 20px 15px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .service-tag span { font-size: 35px; } } @media (max-width: 1199px) { .service-tag span { font-size: 30px; padding: 10px 20px; margin: 13px 9px; } } @media (max-width: 991px) { .service-tag span { font-size: 24px; padding: 4px 20px; margin: 9px; } } @media (max-width: 767px) { .service-tag span { font-size: 18px; padding: 6px 20px; margin: 9px; line-height: 30px; } } @media (max-width: 767px) { .service-logo { max-width: 60px; } } .service-details_image { filter: grayscale(100%); } .section-title { margin-top: -7px; } .service-slider { margin: 0 -100px; } @media (max-width: 1199px) { .service-slider { margin: 0; } } .sv-details .sv-title { font-weight: 400; line-height: 36px; text-transform: uppercase; margin-bottom: 30px; } .sv-details .sv-list li { font-size: 22px; font-weight: 400; letter-spacing: -0.22px; font-family: var(--font-heading); margin-left: 31px; color: #B2B6B8; text-transform: uppercase; } .sv-details .sv-list li:not(:last-child) { margin-bottom: 29px; } .sd-details { background: #16171B; padding: 40px 36px; } .sd-details .sd-title { font-weight: 400; letter-spacing: -0.22px; line-height: 36px; margin-bottom: 18px; } .sd-details .sd-button { color: var(--color-primary); text-transform: uppercase; border: 1px solid var(--color-primary); padding: 10px 16px; border-radius: 50px; line-height: 28px; letter-spacing: -0.32px; } .sd-details .sd-button img { margin-left: 6px; } .sd-contents { text-transform: uppercase; font-weight: 400; line-height: 36px; letter-spacing: -0.22px; } .service-nav-item:hover .sd-link i { -webkit-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); } .service-nav-item .sd-link { font-size: 24px; font-weight: 400; color: #868686; line-height: 32px; letter-spacing: -0.48px; font-family: var(--font-heading); text-transform: uppercase; } .service-nav-item .sd-link i { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .service-nav-item .sd-title { font-size: 30px; font-weight: 400; line-height: 48px; letter-spacing: -0.6px; } .service-nav-item--next { text-align: right; } .service-nav-item--next:hover .sd-link i { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .service-nav-item--next .sd-link { text-align: right; } .service-single-content { padding-right: 90px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .service-single-content { padding-right: 0; } } @media (max-width: 1199px) { .service-single-content { padding-right: 0; } } .service-gallery-slider { padding-bottom: 70px; } .service-gallery-slider .xb-item--image { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .service-gallery-slider .swiper-pagination { bottom: 5px; } .service-gallery-slider .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #B2B6B8; opacity: 1; margin: 0 8px; position: relative; } .service-gallery-slider .swiper-pagination .swiper-pagination-bullet::before { position: absolute; top: -8px; left: -8px; width: 28px; height: 28px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border: 1px solid var(--color-primary); content: ""; opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .service-gallery-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--color-white); } .service-gallery-slider .swiper-pagination .swiper-pagination-bullet-active::before { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /*----------------------------------------*/ /* 07. counter /*----------------------------------------*/ .xb-couter-box .xb-item--title { font-size: 60px; color: #000; font-weight: 400; line-height: 1.2; letter-spacing: -1.2px; } .xb-couter-box .xb-item--content { color: #000; font-weight: 700; text-transform: uppercase; } .xb-counter { border-radius: 10px; padding-top: 40px; position: relative; z-index: 1; min-height: 394px; } @media (max-width: 767px) { .xb-counter { min-height: 365px; } } .xb-counter .xb-item--image { position: absolute; bottom: 0; left: 0; right: 0; } .xb-counter .xb-item--count { font-size: 60px; letter-spacing: -1.2px; text-transform: uppercase; font-weight: 400; margin-bottom: 15px; } .xb-counter .xb-item--content { line-height: 31.5px; margin-bottom: 23px; } .divided { background: #FFF; height: 1px; opacity: .2; } .cta-content { margin-left: -15px; } @media (max-width: 991px) { .cta-content { margin-left: 0; margin-top: 20px; } } .cta-content .content { line-height: 31.5px; margin-bottom: 33px; } .xb-couter-box { margin-top: 30px; } .xb-couter-box .suffix { transform: translateY(5px); position: relative; display: inline-block; padding-left: 19px; } .xb-couter-box .xb-item--icon { margin-right: 23px; } .xb-odm { overflow: hidden; } .xb-odm .xbo.xbo-auto-theme .xbo-digit .xbo-digit-inner, .xb-odm .xbo.xbo-theme-default .xbo-digit .xbo-digit-inner { overflow: initial; overscroll-behavior-y: hidden; } /*----------------------------------------*/ /* 08. marquee /*----------------------------------------*/ @media only screen and (min-width: 1200px) and (max-width: 1500px) { .marquee-space { padding-top: 30px; padding-bottom: 50px; } } @media (max-width: 1199px) { .marquee-space { padding-top: 20px; padding-bottom: 40px; } } @media (max-width: 767px) { .marquee-space { padding-top: 0; padding-bottom: 20px; } } .js-marquee, .js-marquee-wrapper { display: flex; align-items: center; } .xb-marquee { padding: 52px 0; margin-left: -10px; margin-right: -10px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-marquee { padding: 28px 0; } } @media (max-width: 1199px) { .xb-marquee { padding: 28px 0; } } .xb-marquee.marquee-left { background-color: #242424; transform: rotate(4.363deg); margin-bottom: -150px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-marquee.marquee-left { margin-bottom: -98px; } } @media (max-width: 1199px) { .xb-marquee.marquee-left { margin-bottom: -75px; } } @media (max-width: 767px) { .xb-marquee.marquee-left { transform: rotate(0deg); margin-bottom: 0; } } .xb-marquee.marquee-right { background-color: var(--color-primary); transform: rotate(-4.363deg); } @media (max-width: 1199px) { .xb-marquee.marquee-right { transform: rotate(-5.363deg); } } @media (max-width: 767px) { .xb-marquee.marquee-right { transform: rotate(0deg); } } .xb-marquee .xb-marquee-item { margin-right: 128px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-marquee .xb-marquee-item { margin-right: 50px; } } @media (max-width: 1199px) { .xb-marquee .xb-marquee-item { margin-right: 50px; } } @media (max-width: 991px) { .xb-marquee .xb-marquee-item { margin-right: 30px; } } @media (max-width: 767px) { .marquee-two { padding-top: 100px; padding-bottom: 60px; } } .marquee-two .db-marquee { background: var(--color-primary); transform: rotate(-1.081deg); } .marquee-two .db-marquee .marquee-item { font-size: 24px; color: #000; font-weight: 400; line-height: 40.5px; letter-spacing: -0.48px; text-transform: uppercase; font-family: var(--font-heading); margin-right: 25px; position: relative; } .marquee-two .db-marquee .marquee-item::before { position: absolute; content: ''; height: 6px; width: 6px; background: #000; left: -16px; top: 17px; border-radius: 50px; margin-right: 87px; display: inline-block; } .sd-marquee .marquee-item { display: inline-block; font-size: 48px; font-weight: 400; line-height: 55px; letter-spacing: -0.96px; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 50px; padding: 20px; margin-right: 30px; } @media (max-width: 991px) { .sd-marquee .marquee-item { font-size: 30px; line-height: 40px; padding: 10px 20px; } } @media (max-width: 767px) { .sd-marquee .marquee-item { font-size: 20px; line-height: 30px; padding: 5px 20px; margin-right: 10px; } } /*----------------------------------------*/ /* 09. team /*----------------------------------------*/ .team-slider { margin: 0 -55px; } @media (max-width: 767px) { .team-slider { margin: 0; padding: 0 30px; } } .xb-team:hover .xb-item--title { color: var(--color-black); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .xb-team:hover .xb-item--title a { color: var(--color-black); } .xb-team:hover .xb-item--desig { color: var(--color-black); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .xb-team:hover .xb-item--img::after { opacity: 0; } .xb-team:hover .xb-item--img::before { opacity: 1; height: 100%; } .xb-team:hover .xb-item--img img { -webkit-filter: grayscale(0); filter: grayscale(0); } .xb-team:hover .xb-item--icon { opacity: 1; visibility: visible; transition-delay: .2s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .xb-team .xb-item--img img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; width: 100%; } .xb-team .xb-item--img::before, .xb-team .xb-item--img::after { position: absolute; content: ""; bottom: 0; left: 0; height: 47%; width: 100%; background: linear-gradient(180deg, rgba(8, 8, 8, 0) 6.64%, #080808 99.93%); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-team .xb-item--img::before { background: linear-gradient(359deg, var(--color-primary) 6.31%, rgba(111, 136, 9, 0) 62%); opacity: 0; z-index: 1; } .xb-team .xb-item--holder { position: absolute; bottom: 10px; left: 64px; left: 0; right: 0; padding: 20px; z-index: 2; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-team .xb-item--title { font-size: 22px; font-weight: 500; line-height: 31px; letter-spacing: -0.22px; margin-bottom: 5px; text-transform: uppercase; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-team .xb-item--title a { color: currentColor; } .xb-team .xb-item--desig { font-size: 14px; font-weight: 500; text-transform: uppercase; margin-bottom: 12px; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-team .xb-item--icon { opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } .xb-team .xb-item--icon li:not(:last-child) { margin-right: 10px; } .xb-team .xb-item--icon li a { height: 36px; width: 36px; background: var(--color-white); border-radius: 50px; display: flex; align-items: center; justify-content: center; color: var(--color-black); } .team-sec-title .xb-item--sub-title { margin-bottom: 30px; } .team-sec-title .xb-item--title { font-size: 45px; font-weight: 400; line-height: 55px; letter-spacing: -0.45px; text-transform: capitalize; } @media (max-width: 767px) { .team-sec-title .xb-item--title { font-size: 32px; line-height: 46px; } } .team-slider-two { height: 470px; } .xb-team-two .xb-item--img { filter: grayscale(100%); width: 117px; margin-right: 13px; } .xb-team-two .xb-item--content { width: calc(100% - 130px); } .xb-team-two .xb-item--title { font-size: 24px; font-weight: 400; letter-spacing: -0.45px; text-transform: uppercase; margin-bottom: 7px; } .xb-team-two .xb-item--sub-title { font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: -0.16px; color: #8E8E8E; } .xb-team-two .xb-item--skill-tilte { margin-top: 20px; text-transform: uppercase; color: #8E8E8E; font-size: 16px; font-weight: 400; letter-spacing: -0.16px; margin-bottom: 9px; } .xb-team-two .xb-item--skill { list-style: none; display: flex; gap: 16px; } .xb-team-two .xb-item--skill li { display: inline-block; background: var(--color-primary); padding: 10px 10px; color: #1D2026; line-height: 24px; letter-spacing: -0.16px; text-transform: uppercase; } .section-title .title .team-sec-title { color: #000000; background: var(--color-primary); padding-top: 27px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .section-title .title .team-sec-title { padding-top: 0px; } } @media (max-width: 1199px) { .section-title .title .team-sec-title { padding-top: 0px; } } .team-year { height: 334px; width: 334px; background: var(--color-primary); color: #000; text-align: center; position: absolute; bottom: 0; padding: 68px 0; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; } @media (max-width: 991px) { .team-year { height: auto; width: 250px; padding: 43px 0; } } @media (max-width: 767px) { .team-year { padding: 20px 0; width: 180px; } } .team-year h2 { font-size: 139px; font-weight: 700; line-height: 1; letter-spacing: -4.184px; color: #000; margin-bottom: 18px; margin-top: -26px; } @media (max-width: 991px) { .team-year h2 { font-size: 70px; margin-top: -5px; } } @media (max-width: 767px) { .team-year h2 { font-size: 40px; margin-top: -5px; letter-spacing: 0; margin-bottom: 4px; } } .team-year h2 span { line-height: 1; } .team-year p { font-size: 23px; font-weight: 700; line-height: 30.88px; letter-spacing: 2.391px; text-transform: uppercase; margin-top: -27px; } @media (max-width: 991px) { .team-year p { margin-top: -15px; } } @media (max-width: 767px) { .team-year p { font-size: 16px; margin-top: -5px; letter-spacing: 0; line-height: 26px; } } .team-details__inner .title { font-size: 22px; line-height: 36px; text-decoration: underline; text-transform: uppercase; } .team-details__inner .content { text-transform: none; } .team-details__title .td-title { font-size: 140px; line-height: 140px; font-weight: 400; letter-spacing: -2.8px; } @media (max-width: 1199px) { .team-details__title .td-title { font-size: 100px; line-height: 120px; } } @media (max-width: 991px) { .team-details__title .td-title { font-size: 60px; line-height: 70px; } } @media (max-width: 767px) { .team-details__title .td-title { font-size: 40px; line-height: 60px; } } @media (max-width: 991px) { .team-details__title .td-title span img { height: 60px; } } @media (max-width: 767px) { .team-details__title .td-title span img { height: 37px; } } .team-details__title .td-content { font-size: 22px; font-weight: 400; line-height: 36px; letter-spacing: -0.22px; max-width: 80%; } .team-details__holder .td-item { font-size: 30px; font-weight: 400; line-height: 40px; margin-bottom: 6px; } .team-details__holder .td-item span { font-size: 20px; color: #828282; text-transform: uppercase; letter-spacing: -0.2px; margin-left: 6px; } .team-details__experience .title { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 25px; width: 82%; } .team-details__experience .content { font-size: 20px; line-height: 30px; } .team-details__skils li { color: #1D2026; text-transform: uppercase; line-height: 24px; letter-spacing: -0.16px; background: var(--color-primary); padding: 10px; margin-right: 16px; } .team-details__content { padding-right: 100px; } .team-details__info { align-items: end; } .team-details__left { padding-left: 77px; } @media (max-width: 991px) { .team-details__left { padding-left: 0; } } .xb-team-inner { padding: 80px; padding-right: 70px; padding-left: 100px; z-index: 1; } @media (max-width: 767px) { .xb-team-inner { padding: 40px 0; } } .xb-team-inner .xb-team-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } @media (max-width: 767px) { .xb-team-inner .xb-team-shape { display: none; } } .xb-team-inner .xb-team-shape img { width: 100%; height: 100%; } .team-slider-two .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin: 8px 0; opacity: 1; background-color: #8E8E8E; } .team-slider-two .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); background-color: var(--color-primary); } .team-sec-logo { -webkit-transform: translateY(55px); -ms-transform: translateY(55px); transform: translateY(55px); } .ti-image img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .team-inner-wrap { padding: 0 46px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .team-inner-wrap { padding: 0 30px; } } @media (max-width: 1199px) { .team-inner-wrap { padding: 0 30px; } } @media (max-width: 991px) { .team-inner-wrap { padding: 0 20px; } } @media (max-width: 991px) { .team-inner-wrap { padding: 0; } } /*----------------------------------------*/ /* 10. cta /*----------------------------------------*/ .cta-bg { min-height: 938px; width: 100%; padding: 223px 0; position: relative; } @media (max-width: 1199px) { .cta-bg { min-height: 800px; padding: 130px 0; } } @media (max-width: 991px) { .cta-bg { min-height: 750px; } } .cta-title { z-index: 1; } .cta-title .title { font-size: 129px; font-weight: 400; line-height: 116.5px; letter-spacing: -2.58px; text-transform: uppercase; margin-bottom: 45px; } @media (max-width: 1199px) { .cta-title .title { font-size: 90px; line-height: 100px; letter-spacing: -1.45px; } } @media (max-width: 991px) { .cta-title .title { font-size: 70px; line-height: 75px; } } @media (max-width: 767px) { .cta-title .title { font-size: 45px; line-height: 50px; } } .cta-title .title span { color: var(--color-primary); } .cta-title a { font-size: 16px; padding: 25px 35px; background-color: var(--color-white); font-weight: 600; color: var(--color-black); display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; letter-spacing: 0.8px; text-transform: uppercase; } .cta-title a:hover span img { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .cta-title a span { transform: translateY(-1px); display: inline-block; } .cta-title a span img { display: inline-block; margin-left: 42px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .cta-bg { position: relative; } .cta-bg::before { content: ''; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; position: absolute; background: linear-gradient(357deg, #000 9.75%, rgba(0, 0, 0, 0.7) 62.14%, rgba(0, 0, 0, 0) 110.96%); } .cta-bg-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /*----------------------------------------*/ /* 11. project /*----------------------------------------*/ .pm-title { font-size: 60px; line-height: 61.5px; letter-spacing: -1.2px; text-transform: uppercase; } @media (max-width: 991px) { .pm-title { font-size: 40px; line-height: 45px; } } .ap-inner .ap-title { font-size: 32px; line-height: 42px; letter-spacing: -0.32px; text-transform: uppercase; } @media (max-width: 767px) { .ap-inner .ap-title { font-size: 24px; } } .ap-inner .ap-sub-title { font-size: 22px; line-height: 36px; letter-spacing: -0.22px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } @media (max-width: 767px) { .ap-inner .ap-sub-title { font-size: 18px; } } .ap-content { font-size: 20px; text-transform: lowercase; line-height: 30px; } @media (max-width: 767px) { .ap-content { font-size: 18px; } } .ap-link { font-family: var(--font-heading); font-size: 22px; letter-spacing: -0.22px; color: #FFF; position: absolute; right: 0; bottom: 0; } .ap-link:hover { color: #FFF; } .ap-link span { height: 60px; width: 60px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; border-radius: 50px; margin-left: 8px; color: #292D32; } .pd-title { padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .pd-details .pd-list li { font-size: 20px; } .pd-result { margin-left: 165px; } @media (max-width: 991px) { .pd-result { margin-left: 0; } } .pd-wrpper { margin-bottom: 55px; } .pd-wrpper .pd-parcentage { font-size: 40px; line-height: 50px; margin-bottom: 5px; } .pd-wrpper .pd-contect { font-weight: 400; color: #828282; text-transform: uppercase; } .pd-poster-title { font-size: 40px; line-height: 50px; letter-spacing: -0.4px; text-transform: uppercase; margin-bottom: 30px; } .pd-image { filter: grayscale(100%); } /*----------------------------------------*/ /* 12. award /*----------------------------------------*/ .award-top { margin-top: -215px; z-index: 2; position: relative; } .xb-award-box { padding: 50px 45px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .xb-award-box { padding: 45px 20px; } } .xb-award-box:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-primary); content: ""; z-index: -1; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-award-box::after { position: absolute; bottom: 0; left: 45px; width: calc(100% - 75px); height: 1px; background-color: #242424; content: ""; z-index: -2; } @media (max-width: 767px) { .xb-award-box::after { left: 25px; width: calc(100% - 45px); } } .xb-award-box:hover::before { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .xb-award-box:hover .xb-item--icon { filter: brightness(0%); } .xb-award-box:hover .xb-item--arrow { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .xb-award-box:hover .xb-item--title { color: var(--color-black); } .xb-award-box .xb-item--icon { margin-right: 73px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 1199px) { .xb-award-box .xb-item--icon { margin-right: 30px; } } .xb-award-box .xb-item--title { font-size: 22px; font-weight: 400; line-height: 30px; letter-spacing: -0.22px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-award-box .xb-item--arrow { height: 55px; width: 55px; background: #16171B; font-size: 22px; align-items: center; justify-content: center; display: flex; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 30px; color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .xb-award-box .xb-item--arrow { height: 40px; width: 40px; right: 20px; } } .award-area .award-box::before { content: ''; top: -35px; left: 59px; position: absolute; height: 120px; width: 1px; background: #292A37; } .award-area .award-box .year { position: absolute; top: -67px; left: 44px; font-size: 14px; font-weight: 700; letter-spacing: 0.56px; color: #92939E; } .award-area .award-inner { background: #16171B; border-radius: 15px; padding: 74px 51px; position: relative; } .award-area .award-inner::before { content: ""; position: absolute; z-index: -1; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: inherit; padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: add, add; mask-composite: add, add; mask-composite: add, add; -webkit-mask-composite: source-out; mask-composite: exclude; background: var(--grd, linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(250, 250, 250, 0.12) 0.01%, rgba(1, 3, 20, 0) 58.12%, rgba(255, 255, 255, 0.12) 109.99%)); } .award-area .award-inner .title { font-size: 24px; letter-spacing: -0.72px; margin-bottom: 15px; margin-left: 45px; } .award-area .award-inner .title::before { content: ''; height: 16px; width: 16px; background: var(--color-primary); border-radius: 16px; position: absolute; margin-left: -45px; margin-top: 7px; } .award-area .award-inner .title::after { content: ''; height: 32px; width: 32px; background: rgba(255, 255, 255, 0.11); border-radius: 32px; position: absolute; margin-left: -45px; margin-top: 7px; top: -8px; left: -8px; opacity: 0.5; } .award-area .award-carousel-button { position: absolute; position: absolute; top: 0; right: 0; display: flex; z-index: 2; } @media (max-width: 767px) { .award-area .award-carousel-button { top: auto; bottom: -42px; } } .award-area .award-carousel-button .xb-swiper-arrow { height: 55px; width: 55px; background: var(--color-white); display: flex; align-items: center; justify-content: center; border-radius: 50px; color: var(--color-black); margin-left: 18px; } .award-slider { margin-right: -500px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .award-slider { margin-right: -400px; } } @media (max-width: 1199px) { .award-slider { margin-right: -200px; } } @media (max-width: 767px) { .award-slider { margin-right: 0; } } /*----------------------------------------*/ /* 13. testimonial /*----------------------------------------*/ .xb-testimonial-wrapper { background: #16171B; padding: 70px 47px 109px; height: 100%; } @media (max-width: 767px) { .xb-testimonial-wrapper { padding: 50px 30px; } } .xb-testimonial-wrapper .xb-item--inner { margin-bottom: 50px; } .xb-testimonial-wrapper .xb-item--image { display: flex; margin-right: 22px; position: relative; } .xb-testimonial-wrapper .xb-item--image img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .xb-testimonial-wrapper .xb-item--image::before { content: '\f10e'; color: #242424; font-family: "Font Awesome 5 Pro"; font-weight: 900; top: 0; right: -4px; height: 26px; width: 26px; display: flex; justify-content: center; text-align: center; background: var(--color-primary); border-radius: 50px; position: absolute; z-index: 1; } .xb-testimonial-wrapper .xb-item--holder { width: calc(100% - 153px); } .xb-testimonial-wrapper .xb-item--title { text-transform: uppercase; font-size: 20px; } .xb-testimonial-wrapper .xb-item--title span { color: #838383; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: -0.2px; text-transform: uppercase; } .xb-testimonial-wrapper .comment-box .comment-title { font-size: 22px; letter-spacing: -0.22px; text-transform: uppercase; margin-bottom: 45px; } .xb-testimonial-wrapper .comment-box .comment { color: #A8A8A8; line-height: 30px; margin-right: 11px; } .xb-testimonial-wrapper .xb-icon { position: absolute; top: 63px; right: 75px; } @media (max-width: 1199px) { .xb-testimonial-wrapper .xb-icon { top: 55px; right: 40px; max-width: 120px; } } @media (max-width: 767px) { .xb-testimonial-wrapper .xb-icon { top: 49px; right: 28px; max-width: 60px; } } .testimonial-shape { position: absolute; left: 39.5%; bottom: 305px; height: 447px; width: 447px; background: var(--color-primary); filter: blur(176px); } .testimonial-quote { width: 407px; height: 407px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(178, 182, 184, 0.5); } @media (max-width: 767px) { .testimonial-quote { width: 200px; height: 200px; } .testimonial-quote img { max-width: 80px; } } .testimonial-inner { padding-left: 35px; } @media (max-width: 767px) { .testimonial-inner { padding-left: 0; } } .xb-testimonial .xb-item--holder, .xb-testimonial .xb-item--title, .xb-testimonial .xb-item--content, .xb-testimonial .xb-item--avatar, .xb-testimonial .xb-item--name, .xb-testimonial .xb-item--desig { opacity: 0; visibility: hidden; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } .xb-testimonial .xb-item--holder { max-width: 591px; } .xb-testimonial .xb-item--title { font-size: 22px; font-weight: 400; letter-spacing: -0.22px; margin-bottom: 27px; text-transform: uppercase; } .xb-testimonial .xb-item--content { line-height: 30px; } .xb-testimonial .xb-item--author { margin-top: 13px; margin-left: -145px; } @media (max-width: 991px) { .xb-testimonial .xb-item--author { margin-top: 20px; margin-left: 0; } } .xb-testimonial .xb-item--avatar { width: 90px; height: 90px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; overflow: hidden; border: 5px solid var(--color-primary); margin-bottom: 14px; } .xb-testimonial .xb-item--avatar img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .xb-testimonial .xb-item--name { font-size: 20px; font-weight: 400; letter-spacing: -0.2px; text-transform: uppercase; } .xb-testimonial .xb-item--desig { color: #838383; font-family: var(--font-heading); line-height: 24px; letter-spacing: -0.16px; text-transform: uppercase; display: inline-block; } .testimonial-slider .swiper-slide-active .xb-item--holder, .testimonial-slider .swiper-slide-active .xb-item--title, .testimonial-slider .swiper-slide-active .xb-item--content, .testimonial-slider .swiper-slide-active .xb-item--avatar, .testimonial-slider .swiper-slide-active .xb-item--name, .testimonial-slider .swiper-slide-active .xb-item--desig { opacity: 1; visibility: visible; -webkit-transition: all 500ms cubic-bezier(0.25, 0.7, 0.58, 1); -o-transition: all 500ms cubic-bezier(0.25, 0.7, 0.58, 1); transition: all 500ms cubic-bezier(0.25, 0.7, 0.58, 1); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .testimonial-slider .swiper-slide-active .xb-item--content { -webkit-transition-delay: 200ms; transition-delay: 200ms; } .testimonial-slider .swiper-slide-active .xb-item--avatar { -webkit-transition-delay: 400ms; transition-delay: 400ms; } .testimonial-slider .swiper-slide-active .xb-item--name, .testimonial-slider .swiper-slide-active .xb-item--desig { -webkit-transition-delay: 600ms; transition-delay: 600ms; } .testimonial-carousel { position: absolute; right: 96px; bottom: 6px; z-index: 1; } @media (max-width: 991px) { .testimonial-carousel { right: 0; } } @media (max-width: 767px) { .testimonial-carousel { position: unset; margin-top: 30px; } } .testimonial-carousel .xb-swiper-arrow { width: 76px; height: 76px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .testimonial-carousel .xb-swiper-arrow img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .testimonial-carousel .xb-swiper-arrow:hover { background-color: var(--color-primary); } .testimonial-carousel .xb-swiper-arrow:hover img { filter: brightness(0%); } .testimonial-carousel .xb-swiper-arrow.xb-swiper-arrow-prev { margin-right: 20px; } /*----------------------------------------*/ /* 14. blog /*----------------------------------------*/ .xb-blog { padding: 40px 48px; border-top: 1px solid #2E2E2E; border-bottom: 1px solid #2E2E2E; margin-top: -1px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .xb-blog { padding: 30px 25px; } } .xb-blog:before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ''; background-color: #16171B; opacity: 0; z-index: -1; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-blog:hover::before { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .xb-blog .xb-item--img { width: 374px; margin-right: 67px; filter: grayscale(100%); } @media (max-width: 1199px) { .xb-blog .xb-item--img { width: 300px; margin-right: 45px; } } @media (max-width: 991px) { .xb-blog .xb-item--img { width: 400px; margin-right: 0; } } @media (max-width: 767px) { .xb-blog .xb-item--img { width: 100%; } } .xb-blog .xb-item--inner { width: calc(100% - 441px); } @media (max-width: 1199px) { .xb-blog .xb-item--inner { width: calc(100% - 345px); } } @media (max-width: 991px) { .xb-blog .xb-item--inner { width: 100%; margin-top: 30px; } } @media (max-width: 767px) { .xb-blog .xb-item--inner { width: 100%; } } .xb-blog .xb-item--author { filter: grayscale(100%); width: 200px; margin-right: 50px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-blog .xb-item--author { width: 150px; margin-right: 30px; } } @media (max-width: 1199px) { .xb-blog .xb-item--author { width: 160px; margin-right: 20px; } } @media (max-width: 767px) { .xb-blog .xb-item--author { width: 100%; } } .xb-blog .xb-item--holder { width: calc(100% - 250px); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-blog .xb-item--holder { width: calc(100% - 180px); } } @media (max-width: 1199px) { .xb-blog .xb-item--holder { width: calc(100% - 180px); } } @media (max-width: 767px) { .xb-blog .xb-item--holder { width: 100%; margin-top: 20px; } } .xb-blog .xb-item--avatar { margin-bottom: 15px; } .xb-blog .xb-item--name { font-size: 18px; font-weight: 500; letter-spacing: -0.18px; line-height: 24px; text-transform: uppercase; } .xb-blog .xb-item--name span { color: #797979; } .xb-blog .xb-item--date { font-size: 12px; font-weight: 500; letter-spacing: -0.12px; line-height: 24px; text-transform: uppercase; color: #8E8E8E; } .xb-blog .xb-item--title { font-size: 30px; font-weight: 400; line-height: 38px; letter-spacing: -0.3px; text-transform: uppercase; margin-bottom: 15px; } @media (max-width: 1199px) { .xb-blog .xb-item--title { font-size: 24px; } } .xb-blog .xb-item--content { font-size: 16px; font-weight: 400; line-height: 26px; color: #B0B0B0; } .single-post-item { padding: 30px; border: 1px solid rgba(255, 255, 255, 0.2); } @media (max-width: 767px) { .single-post-item { padding: 30px 15px; } } .post-thumbnail-wrapper { position: relative; overflow: hidden; margin-bottom: 30px; } .post-thumbnail-wrapper img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1); -o-transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1); transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1); } .post-meta { margin-bottom: 25px; margin-top: -4px; } .post-meta li { font-size: 16px; line-height: 25px; margin-right: 50px; color: #B0B0B0; margin-top: 7px; } .post-meta li i { margin-right: 5px; color: #fff; } .post-meta li a { color: #B0B0B0; } article .post-title { margin-top: 0; margin-bottom: 14px; font-size: 30px; line-height: 1.4; word-break: break-word; letter-spacing: -.6px; text-transform: uppercase; } @media (max-width: 1199px) { article .post-title { font-size: 26px; } } @media (max-width: 767px) { article .post-title { font-size: 20px; } } article .post-title a { color: currentColor; } .post-read-more { margin-top: 35px; } .post-read-more .xb-btn { padding: 18px 40px; } .single-post-item { margin-bottom: 40px; } .single-post-item:hover .post-thumbnail-wrapper img { -webkit-filter: grayscale(0%); filter: grayscale(0%); -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); } .post-details .post-thumb { margin-bottom: 30px; } .post-details .post-thumb img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .post-details h2 { font-size: 32px; font-weight: 700; margin-bottom: 30px; text-transform: uppercase; } @media (max-width: 767px) { .post-details h2 { font-size: 24px; } } .post-details h3 { font-size: 28px; font-weight: 700; margin-bottom: 25px; text-transform: uppercase; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .post-details h3 { font-size: 22px; } } .post-details p { font-size: 18px; line-height: 30px; } .post-details p:not(:last-child) { margin-bottom: 30px; } blockquote { background-color: #16171B; background-repeat: no-repeat; background-size: cover; padding: 40px 55px; padding-left: 130px; position: relative; font-family: var(--font-heading); margin: 40px 0; border-top-left-radius: 20px; } @media (max-width: 767px) { blockquote { padding: 30px 55px; padding-left: 55px; padding-left: 100px; } } blockquote p { font-size: 20px; font-weight: 500; color: #fff; line-height: 34px; margin-bottom: 20px !important; } blockquote span { font-size: 18px; font-weight: 500; color: #B0B0B0; padding-left: 27px; position: relative; } blockquote span::before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 17px; height: 1px; background-color: #B0B0B0; content: ""; } blockquote .quote { position: absolute; top: 0; left: 0; width: 80px; height: 80px; background-color: var(--color-primary); display: flex; align-items: center; justify-content: center; border-radius: 20px 0; -webkit-border-radius: 20px 0; -moz-border-radius: 20px 0; -ms-border-radius: 20px 0; -o-border-radius: 20px 0; } .post-info-list { padding-left: 5; } @media (max-width: 1199px) { .post-info-list { padding-left: 0; } } .post-info-list li { font-size: 18px; } .post-info-list li:not(:last-child) { margin-bottom: 18px; } .post-info-list li img { margin-right: 12px; } .post-tags .tags-links { margin-top: 10px; } .post-tags .tag-title { font-size: 20px; margin-right: 15px; margin-top: 20px; font-weight: 600; } .social-share .post-share { margin-top: 20px; } .social-share li:not(:last-child) { margin-right: 20px; } .social-share li a { border: 1px solid rgba(255, 255, 255, 0.2); color: #B0B0B0; font-size: 14px; width: 40px; height: 40px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; display: flex; align-items: center; justify-content: center; } .social-share li a:hover { color: var(--color-white); border-color: var(--color-primary); } .social-share .title { font-size: 20px; margin-right: 15px; margin-top: 20px; font-weight: 600; } /* comment css */ .post-comments { padding-bottom: 80px; } .post-comments .title { font-size: 30px; margin-bottom: 30px; text-transform: uppercase; } .latest__comments .comments-box { border-top: 1px solid var(--color-border-2); padding: 30px 0; } .latest__comments .comments-text { overflow: hidden; font-size: 18px; line-height: 30px; } .latest__comments .comments-avatar { border-radius: 50%; float: left; } @media (max-width: 767px) { .latest__comments .comments-avatar { float: none; margin-bottom: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .latest__comments .comments-avatar { float: left; margin-bottom: 0px; } } .latest__comments .comments-avatar img { border-radius: 50%; width: 80px !important; margin-right: 30px; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .latest__comments li:last-child .comments-box { padding-bottom: 0px; } .latest__comments li:first-child .comments-box { border-top: 0; padding-top: 0; } .latest__comments li.children { margin-left: 100px; } @media (max-width: 767px) { .latest__comments li.children { margin-left: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .latest__comments li.children { margin-left: 50px; } } .latest__comments .avatar-name { margin-bottom: 15px; overflow: hidden; position: relative; } .latest__comments .avatar-name h5 { font-size: 20px; margin-bottom: 0px; font-weight: 600; letter-spacing: -0.2px; font-family: var(--font-body); } .latest__comments .avatar-name span { font-size: 15px; color: var(--color-default); } .latest__comments .reply { color: #B0B0B0; display: inline-block; font-size: 12px; font-weight: 500; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; line-height: 1; position: absolute; right: 0; margin-top: 0; top: 0; text-decoration: none; background: #16171B; padding: 9px 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .latest__comments .reply:hover { background-color: var(--color-primary); color: var(--color-black); } .blog-sidebar .widget, .shop-sidebar .widget { padding: 30px; border: 1px solid rgba(255, 255, 255, 0.2); } @media (max-width: 767px) { .blog-sidebar .widget, .shop-sidebar .widget { padding: 30px 20px; } } /*----------------------------------------*/ /* 15. careear /*----------------------------------------*/ .xb-careear { padding: 60px 30px; border-radius: 20px; position: relative; z-index: 1; } .xb-careear .xb-item--shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .xb-careear .xb-item--shape svg { display: block; position: absolute; width: 100%; height: 100%; overflow: visible; } .xb-careear .xb-item--line-shape { position: absolute; top: 12px; left: 12px; bottom: 12px; right: 12px; z-index: -1; } .xb-careear .xb-item--line-shape img { width: 100%; height: 100%; } .xb-careear .xb-item--content { font-size: 12px; font-weight: 400; color: #1D2026; background: rgba(0, 0, 0, 0.04); border-radius: 80px; padding: 1px 10px; border: 1px solid #DDF2FF; letter-spacing: -0.24px; margin-bottom: 78px; display: inline-block; } @media (max-width: 767px) { .xb-careear .xb-item--content { margin-bottom: 40px; } } .xb-careear .xb-item--content img, .xb-careear .xb-item--content svg { display: inline-block; margin-right: 4px; } .xb-careear .xb-item--title { color: #1D2026; font-size: 22px; font-weight: 400; line-height: 24px; letter-spacing: -0.22px; margin-bottom: 65px; } @media (max-width: 767px) { .xb-careear .xb-item--title { margin-bottom: 40px; } } .xb-careear .xb-item--link { color: #000; display: inline-block; padding: 7px 12px; border-radius: 10px; position: relative; } .xb-careear .xb-item--link:hover svg path { stroke: var(--color-primary); } .xb-careear .xb-item--link:hover span span { opacity: 1; } .xb-careear .xb-item--link i { transform: rotate(45deg); font-size: 17px; } .xb-careear .xb-item--link span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .xb-careear .xb-item--link span span { opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-careear .xb-item--link span svg { display: block; position: absolute; width: 100%; height: 100%; overflow: visible; } .xb-careear .xb-item--link span svg path { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-careear.style-two .xb-item--title { font-size: 45px; line-height: 55px; letter-spacing: -0.9px; color: var(--color-white); } .xb-careear.style-two .xb-item--content { color: var(--color-white); border-color: #DDF2FF; margin-bottom: 63px; } .xb-careear.style-two .xb-item--link svg path { stroke: var(--color-primary); } .xb-careear.style-two .xb-item--link:hover img { filter: brightness(0%); } .xb-careear.style-two .xb-item--link img { filter: brightness(1000%); } .career-neta .time { background-color: var(--color-primary); padding: 6px 10px; color: #1D2026; font-family: var(--font-heading); text-transform: uppercase; display: inline-block; } .career-neta .xb-item--location { font-size: 22px; text-transform: uppercase; } .career-content h2 { font-size: 30px; text-transform: uppercase; letter-spacing: -0.6px; margin-bottom: 30px; } @media (max-width: 767px) { .career-content h2 { font-size: 24px; letter-spacing: 0px; } } .career-content p:not(:last-child) { margin-bottom: 40px; } .career-content ul { padding-left: 20px; max-width: 60%; margin-bottom: 40px; } @media (max-width: 991px) { .career-content ul { max-width: 100%; } } .career-content ul li:not(:last-child) { margin-bottom: 30px; } .job-apply__holder h2 { font-size: 30px; text-transform: uppercase; letter-spacing: -0.6px; margin-bottom: 20px; } @media (max-width: 767px) { .job-apply__holder h2 { font-size: 24px; letter-spacing: 0px; } } /*----------------------------------------*/ /* 16. feature /*----------------------------------------*/ .xb-feature { position: relative; padding: 60px 50px; } .xb-feature::before, .xb-feature:after { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #B2B4A6; content: ""; } .xb-feature::after { bottom: 0; left: 0; right: auto; width: 100%; height: 1px; } .xb-feature__col:nth-child(1) .xb-feature, .xb-feature__col:nth-child(2) .xb-feature { padding-top: 40px; } .xb-feature__col:nth-child(1) .xb-feature::after, .xb-feature__col:nth-child(2) .xb-feature::after { display: none; } .xb-feature__col:nth-child(1) .xb-feature { padding-left: 0; } .xb-feature__col:nth-child(3) .xb-feature { padding-left: 0; } .xb-feature__col:nth-child(2) .xb-feature, .xb-feature__col:nth-child(4) .xb-feature { padding-right: 0; } .xb-feature__col:nth-child(2) .xb-feature::before, .xb-feature__col:nth-child(4) .xb-feature::before { display: none; } @media (max-width: 991px) { .xb-feature__col .xb-feature { padding: 60px 50px !important; } } @media (max-width: 767px) { .xb-feature__col .xb-feature { padding: 40px 20px !important; } } @media (max-width: 991px) { .xb-feature__col:first-child .xb-feature { padding-top: 0 !important; } } @media (max-width: 991px) { .xb-feature__col:last-child .xb-feature { padding-bottom: 0 !important; } } @media (max-width: 991px) { .xb-feature__col:nth-child(2) .xb-feature::after { display: block !important; } } @media (max-width: 991px) { .xb-feature__col:nth-child(1) .xb-feature::before, .xb-feature__col:nth-child(3) .xb-feature::before { display: none !important; } } .xb-feature .xb-item--title { font-size: 50px; font-weight: 400; letter-spacing: -1px; color: #1D2026; margin-bottom: 10px; } @media (max-width: 767px) { .xb-feature .xb-item--title { font-size: 32px; } } .xb-feature .xb-item--content { color: #1D2026; } .feature-shape { position: absolute; top: -92px; right: 0; } @media (max-width: 1199px) { .feature-shape { max-width: 170px; } } @media (max-width: 767px) { .feature-shape { max-width: 80px; } } /*----------------------------------------*/ /* 17. brand /*----------------------------------------*/ .xb-brand { padding: 70px 0; } @media (max-width: 991px) { .xb-brand { padding: 40px 0; } } .xb-brand a { display: flex; align-items: center; justify-content: center; min-height: 60px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-brand a:hover { -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); transform: translateY(-7px); } .brand-slider { margin: 0 -55px; } @media (max-width: 991px) { .brand-slider { margin: 0 -30px; } } @media (max-width: 767px) { .brand-slider { margin: 0 -20px; } } .brand-slider.m-0 { margin: 0; } .about-brand .about-slider { background: #16171B; margin: 0; } .about-brand .xb-brand { padding: 41px 0; } .brand-slider-two .xb-brand { padding: 20px 0; } .brand-slider-two .xb-brand a { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; opacity: 0.5; } .brand-slider-two .xb-brand a:hover { opacity: 1; } /*----------------------------------------*/ /* 18. funfact /*----------------------------------------*/ .xb-funfact .xb-item--number { font-size: 40px; font-weight: 400; margin-bottom: 18px; } .xb-funfact .xb-item--title { font-weight: 400; letter-spacing: -0.16px; color: #828282; text-transform: uppercase; } .xb-funfact .suffix { padding-left: 10px; } .funfact-img { max-width: 740px; margin: 0 auto; } .funfact-img img { mix-blend-mode: luminosity; box-shadow: 0px 11px 16px 0px rgba(0, 0, 0, 0.34), -15px 0px 15px 0px rgba(0, 0, 0, 0.3); } .funfact-img .funfact-btn { position: absolute; right: -67px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 991px) { .funfact-img .funfact-btn { right: -20px; } } @media (max-width: 767px) { .funfact-img .funfact-btn { right: 0px; } } /*----------------------------------------*/ /* 19. portfolio /*----------------------------------------*/ .port-sec-title { padding: 36px; border: 1px solid rgba(130, 130, 130, 0.5); display: flex; align-items: center; justify-content: center; } .port-sec-title .sub-content { color: #828282; letter-spacing: -0.16px; margin-bottom: 7px; display: block; } .portfolio-menu { padding-right: 28px; } @media (max-width: 991px) { .portfolio-menu { margin-top: 0; margin-bottom: 50px; } } .portfolio-menu button { font-size: 18px; color: #DDDDDD; text-transform: uppercase; background-color: transparent; opacity: 0.5; font-weight: 500; letter-spacing: -0.18px; position: relative; padding: 0; margin-bottom: 10px; } .portfolio-menu button::before { position: absolute; top: 50%; left: -10px; width: 2px; height: 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--color-primary); content: ""; opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .portfolio-menu button.active { color: #DDDDDD; opacity: 1; } .portfolio-menu button.active::before { opacity: 1; height: 28px; } .portfolio-menu button:not(:last-child) { margin-right: 40px; } @media (max-width: 1199px) { .portfolio-menu button:not(:last-child) { margin-right: 25px; } } @media (max-width: 991px) { .portfolio-item { margin-top: 40px; } } .xb-portfolio { position: relative; } .xb-portfolio:hover .xb-item--img { outline-color: var(--color-primary); } .xb-portfolio:hover .xb-item--img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .xb-portfolio:hover .border-effect-2 a { background-size: 100% 100%; color: inherit; } .xb-portfolio .xb-item--img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; overflow: hidden; outline: 3px solid transparent; outline-offset: -3px; z-index: 2; } .xb-portfolio .xb-item--img img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: -1; position: relative; } .xb-portfolio .xb-item--title { font-size: 22px; font-weight: 400; letter-spacing: -0.22px; color: var(--color-white); text-transform: uppercase; margin-top: 20px; } .xb-portfolio .xb-item--title a { color: currentColor; } /*----------------------------------------*/ /* 20. contact /*----------------------------------------*/ .xb-contact-image { position: absolute; right: 145px; bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-contact-image { right: 50px; max-width: 480px; } } @media (max-width: 1199px) { .xb-contact-image { right: 0; bottom: 0; max-width: 400px; } } @media (max-width: 991px) { .xb-contact-image { display: none; } } .contact-form .xb-item--field { border-top: 1px solid rgba(131, 131, 131, 0.5); padding-top: 39px; } .contact-form .xb-item--field:not(:last-child) { margin-bottom: 8px; } .contact-form .xb-item--field label { font-weight: 400; letter-spacing: -0.22px; margin-bottom: 4px; font-size: 22px; color: var(--color-white); margin-bottom: 30px; } .contact-form .xb-item--field input, .contact-form .xb-item--field textarea { background: none; font-weight: 400; color: #B2B6B8; padding: 0; margin-top: -16px; background-color: transparent; height: 40px; } .contact-form .xb-item--field textarea { height: 145px; padding-top: 18px; border-bottom: 1px solid rgba(131, 131, 131, 0.5); } .contact-form .port-btn { position: absolute; bottom: -51px; right: 0; } .contact-location li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 0; padding-top: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); margin-top: -1px; text-transform: uppercase; font-size: 18px; font-weight: 500; color: var(--color-white); } .contact-location li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.18); } .contact-location li h3 { font-size: 30px; text-transform: uppercase; margin-top: 10px; } @media (max-width: 767px) { .contact-location li h3 { font-size: 23px; } } .contact-location li span { margin-top: 10px; display: inline-block; } .contact-title .sub-title { line-height: 32px; } .contact-title .sub-title::before { top: 10px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .contact-form-inner .contact-form .xb-item--field { border-top: none; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .contact-form-inner .contact-form .xb-item--field label { text-transform: uppercase; font-family: var(--font-heading); } .contact-form-inner .contact-form .xb-item--field input { height: 60px; } .contact-form-inner .contact-form .xb-item--field textarea { border: none; min-height: 220px; } .contact-form-inner .contact-form .xb-item--textarea { margin-left: 34%; } @media (max-width: 1199px) { .contact-form-inner .contact-form .xb-item--textarea { margin-left: 20%; } } @media (max-width: 991px) { .contact-form-inner .contact-form .xb-item--textarea { margin-left: 0%; } } /*----------------------------------------*/ /* 21. breadcrumb /*----------------------------------------*/ .breadcrumb { border-bottom: 1px solid #242424; } @media (max-width: 767px) { .breadcrumb { padding-top: 80px; padding-bottom: 80px; } } .breadcrumb__title { font-size: 48px; line-height: 60px; letter-spacing: -1.44px; text-transform: uppercase; margin-bottom: 15px; } @media (max-width: 767px) { .breadcrumb__title { font-size: 30px; line-height: 45px; letter-spacing: -0.44px; margin-bottom: 5px; } } .breadcrumb__list { display: inline-block; } .breadcrumb__list li { font-size: 18px; font-weight: 400; line-height: 30px; letter-spacing: -0.2px; display: inline-block; color: var(--color-white); position: relative; text-transform: uppercase; } .breadcrumb__list li + .breadcrumb-item::before { content: "|"; color: #fff; } @media (max-width: 767px) { .breadcrumb__list li { font-size: 16px; } } .breadcrumb__list li a { color: rgba(221, 221, 221, 0.5); } /*----------------------------------------*/ /* 22. whyus /*----------------------------------------*/ .xb-experience .xb-item--experience_box { text-align: center; margin-right: 20px; position: relative; } .xb-experience .xb-item--title { color: #FFFFFF; margin-bottom: 16px; display: inline-block; } .xb-experience .xb-item--persantage_box { height: 227px; position: relative; } .xb-experience .xb-item--persantage_box img { height: 100%; } .xb-experience .xb-item--persantage { position: absolute; bottom: 15px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 24px; color: #FFFFFF; font-family: var(--font-body); } /*----------------------------------------*/ /* 23. career /*----------------------------------------*/ .career-img img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .xb-career { padding: 40px 0; padding-top: 25px; padding-left: 36px; border-top: 1px solid rgba(255, 255, 255, 0.18); min-height: 140px; } @media (max-width: 767px) { .xb-career { padding-left: 20px; padding-right: 20px; } } .xb-career:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .xb-career .xb-item--title { font-size: 30px; line-height: 38px; color: var(--color-white); text-transform: uppercase; width: 45%; margin-top: 15px; } @media (max-width: 991px) { .xb-career .xb-item--title { width: 100%; } } @media (max-width: 767px) { .xb-career .xb-item--title { font-size: 22px; line-height: 30px; } } .xb-career .xb-item--title a { color: currentColor; } .xb-career .xb-item--price { font-size: 24px; color: var(--color-white); margin-right: 130px; margin-top: 15px; display: inline-block; } @media (max-width: 1199px) { .xb-career .xb-item--price { margin-right: 50px; } } .xb-career .xb-item--price span { font-size: 18px; color: #858585; } .xb-career .xb-item--location { font-size: 22px; } .xb-career .xb-item--holder { margin-top: 15px; } .xb-career .xb-item--holder p { font-style: 18px; } .career-cta { background-color: #16171B; padding: 120px 90px; padding-top: 90px; } @media (max-width: 767px) { .career-cta { padding: 50px 30px; padding-top: 20px; } } .career-cta .xb-item--holder { width: 50%; } @media (max-width: 991px) { .career-cta .xb-item--holder { width: 100%; } } .career-cta .xb-item--title { font-size: 30px; margin-bottom: 13px; text-transform: uppercase; } .career-blur { position: absolute; right: 0; width: 411px; height: 411px; filter: blur(176px); bottom: -65px; right: 22%; } @media (max-width: 991px) { .career-blur { width: 300px; height: 300px; bottom: 100px; } } .career-sec-subtitle { font-size: 22px; text-transform: uppercase; font-family: var(--font-heading); position: absolute; right: 0; bottom: 10px; color: var(--color-white); display: inline-block; } @media (max-width: 767px) { .career-sec-subtitle { position: unset; margin-top: 30px; } } /*----------------------------------------*/ /* 24. story /*----------------------------------------*/ .xb-story { padding-bottom: 77px; position: relative; z-index: 1; padding-left: 50px; padding-right: 50px; } .xb-story .xb-item--line-shape { position: absolute; top: 20px; left: 14px; bottom: 20px; right: 14px; z-index: -1; } .xb-story .xb-item--line-shape img { width: 100%; height: 100%; } .xb-story .xb-item--image { padding-top: 44px; margin-bottom: 57px; } .xb-story .xb-item--title { font-size: 24px; letter-spacing: -0.24px; font-weight: 400; margin-bottom: 46px; color: var(--color-white); } .xb-story .xb-item--title a { line-height: 34px; color: currentColor; } .xb-story .xb-item--link { color: #FFF; display: inline-block; padding: 11px 24px; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-story .xb-item--link svg path { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-story .xb-item--link i { transform: rotate(45deg); } .xb-story .xb-item--link-inner:hover { color: var(--color-primary); } .xb-story .xb-item--link-inner:hover svg path { stroke: var(--color-primary); } .xb-story .xb-item--link-inner:hover .xb-item--readmore { color: var(--color-primary); } .xb-story .xb-item--link-inner:hover i { color: var(--color-primary); } .xb-story .xb-item--readmore { font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: -0.16px; text-transform: capitalize; padding-top: 7px; display: inline-block; color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } /*----------------------------------------*/ /* 24. shop /*----------------------------------------*/ .woocommerce-content-wrap { border: 1px solid rgba(255, 255, 255, 0.2); padding: 25px; padding-top: 0; border-left: 0; margin-right: -50px; } @media (max-width: 1199px) { .woocommerce-content-wrap { border-left: 1px solid rgba(255, 255, 255, 0.2); } } @media (max-width: 991px) { .woocommerce-content-wrap { margin-right: 0; } } @media (max-width: 767px) { .woocommerce-content-wrap { padding-top: 10px; } } .woocommerce-toolbar-top { margin-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-left: -25px; margin-right: -25px; padding: 0 25px; } @media (max-width: 767px) { .woocommerce-toolbar-top { justify-content: center; } } .woocommerce-toolbar-top .woocommerce-ordering { margin-left: 20px; } .woocommerce-toolbar-top .woocommerce-ordering select { background-color: transparent; width: auto; margin: 0; padding: 10px 20px; height: 50px; border: 0; cursor: pointer; color: #818181; background-position: calc(100% - 0px) 50%; } .woocommerce-toolbar-top .woocommerce-ordering select option { color: #191B1E; } @media (max-width: 767px) { .woocommerce-toolbar-top-right { justify-content: center; } } .products .product { text-align: center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin-bottom: 30px; } .products .product--img { position: relative; overflow: hidden; } .products .product--img img { width: 100%; -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .products .product--img::before { content: ''; position: absolute; top: 40px; left: 40px; right: 40px; bottom: 40px; opacity: 0; -webkit-transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1); -khtml-transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1); -moz-transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1); -ms-transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1); -o-transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1); transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1); } .products .product--btn { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .products .product--btn a { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); opacity: 0; padding: 14px 21px; text-transform: capitalize; color: var(--color-black); background-color: var(--color-primary); } .products .product--btn a:hover { color: var(--color-black); } .products .product--btn a i { color: var(--color-black); margin-right: 5px; font-size: 14px; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .products .product:hover .product--img::before { top: 0; left: 0; right: 0; bottom: 0; opacity: .2; background-color: var(--color-black); } .products .product:hover .product--img img { -webkit-filter: grayscale(0); filter: grayscale(0); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .products .product:hover .product--btn a { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-delay: .1s; } .products .product--holder { padding: 22px 15px 0px; } .products .product--title { font-size: 20px; color: var(--color-white); font-weight: 600; margin-bottom: 7px; } @media (max-width: 1199px) { .products .product--title { font-size: 18px; margin-bottom: 0px; } } .products .product--title a { color: inherit; } .products .product--price { font-size: 16px; font-weight: 500; color: var(--color-primary); display: inline-block; } .widget-product { list-style: none; } .widget-product__item { display: flex; align-items: center; position: relative; } .widget-product__item:not(:last-child) { margin-bottom: 20px; } .widget-product__item .thumb { width: 92px; height: 92px; margin-right: 15px; } .widget-product__item .thumb img { width: 100%; height: 100%; object-fit: cover; margin-right: 20px; } .widget-product__item .content { width: calc(100% - 107px); } .widget-product__item .content h3 { font-size: 16px; color: var(--color-white); font-weight: 500; } .widget-product__item .content h3 a { color: inherit; } .widget-product__item .content .price { font-size: 14px; } .widget-product__item .content .rating { position: absolute; right: 15px; bottom: 20px; } @media (max-width: 1199px) { .widget-product__item .content .rating { position: unset; } } .widget-product__item .content .rating li { font-size: 11px; color: #FC7632; } .widget-product__item .content .rating li:not(:last-child) { margin-right: 2px; } .shop-sidebar { padding-left: 60px; } @media (max-width: 991px) { .shop-sidebar { padding-left: 0; } } .shop-sidebar .widget_price_filter .filter-price { position: relative; font-size: 15px; font-size: 1rem; } .shop-sidebar .widget_price_filter .filter-price input { border: 0; padding: 0; display: inline-block; width: auto; position: absolute; } .shop-sidebar .widget_price_filter .filter-price input:focus { border: 0; outline: none; } .shop-sidebar .widget_price_filter .filter-price button { background-color: var(--color-primary); color: var(--color-black); text-transform: capitalize; font-size: 16px; font-weight: 400; letter-spacing: 0; display: inline-block; border: 0; outline: none; position: absolute; right: 0; bottom: 0; padding: 2px 10px; } .shop-sidebar .widget_price_filter .filter-price #amount { color: var(--color-default); font-weight: 500; height: auto; box-shadow: none; background: transparent; margin: 0; padding-left: 3px; color: #6E6D79; } .shop-sidebar .widget_price_filter #slider-range { height: 6px; background: #16171B; border: 0; border-radius: 50px; margin-bottom: 12px; } .shop-sidebar .widget_price_filter .ui-state-default, .shop-sidebar .widget_price_filter .ui-widget-content .ui-state-default, .shop-sidebar .widget_price_filter .ui-widget-header .ui-state-default { width: 5px; height: 14px; margin: 0; border: none; background: var(--color-primary); border-radius: 0; top: -4px; } .shop-sidebar .widget_price_filter .ui-state-default:focus, .shop-sidebar .widget_price_filter .ui-widget-content .ui-state-default:focus, .shop-sidebar .widget_price_filter .ui-widget-header .ui-state-default:focus { outline: none; } .shop-sidebar .widget_price_filter #slider-range .ui-slider-range { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; background-color: var(--color-primary); } .product-single-wrap { display: flex; flex-wrap: wrap; padding-right: 70px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .product-single-wrap { padding-right: 30px; } } @media (max-width: 1199px) { .product-single-wrap { padding-right: 10px; } } .product_details_img { display: flex; align-items: center; justify-content: center; } .shop_thumb_tab { margin-top: 10px; } .shop_thumb_tab ul { flex-wrap: wrap; margin: -10px; margin-top: 0; } .shop_thumb_tab ul li { margin-bottom: 20px; } .shop_thumb_tab ul li .nav-link { width: 100%; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; padding: 10px; } .shop_thumb_tab ul li:last-child { margin-bottom: 0; } .shop_thumb_tab ul li button { padding: 0; border: transparent; overflow: hidden; } .shop_thumb_tab ul li button { max-width: 145px; height: auto; background: transparent; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .shop_thumb_tab ul li button { max-width: 130px; } } @media (max-width: 1199px) { .shop_thumb_tab ul li button { max-width: 100px; } } .shop_thumb_tab ul li button.active { border-color: var(--color-primary); } .product_details_img .pl_thumb img { width: 100%; } .shop_details .details_content { padding-left: 40px; } .details_content .title { font-size: 45px; margin-bottom: 20px; text-transform: uppercase; } .details_content .pl_list { margin-top: 25px; margin-bottom: 30px; } .details_content .price { font-size: 25px; margin-bottom: 6px; font-weight: 700; } .details_content .review_wrap { margin-bottom: 22px; } .details_content .review_wrap .review li { color: #ffab50; font-size: 13px; margin-right: 6px; } .product-details p { max-width: 90%; } .product-details h2 { font-size: 36px; margin-bottom: 14px; font-weight: 600; } @media (max-width: 767px) { .product-details h2 { font-size: 24px; } } .shop-single-section { font-weight: 500; } .shop-single-section .product-details .price { font-size: 18px; margin: 0.4em 0 0.7em; font-weight: 500; color: var(--color-white); } .shop-single-section .product-details .price span { color: currentColor; } .shop-single-section .product-details .price .old { font-size: 18px; font-weight: normal; color: var(--color-default); text-decoration: line-through; display: inline-block; margin-left: 5px; } .shop-single-section .product-details .rating { margin-bottom: 20px; } .product-details .rating i::before { font-size: 12px; color: #ffab50; } .shop-single-section .product-details .color-size span { font-size: 14px; font-size: 0.9333333333rem; font-weight: bold; color: var(--color-default); text-transform: uppercase; display: inline-block; padding-right: 15px; display: block; margin-bottom: 5px; } .shop-single-section .product-details .color-size select { min-width: 80px; height: 40px; border: 1px solid var(--color-border); color: var(--color-white); outline: 0; padding: 6px 15px; background-position: calc(100% - 15px) 17px; } .shop-single-section .product-details .color-size > div + div { margin-top: 15px; } .product-details .product-option .product-row { display: flex; align-items: center; } .product-details .product-option .product-row input { margin-bottom: 0; } .product-details .product-option .product-row .add-to-cart-btn button { margin-left: 20px; padding: 9px 30px; font-weight: 600; height: 50px; max-width: 300px; width: 100%; background: var(--color-primary); } .product-details .product-option .product-row .add-to-cart-btn button i { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); font-size: 13px; margin-left: 0; margin-right: 10px; } .shop-single-section .product-details .product-option .product-row > div:first-child { width: 150px; height: 50px; } .shop-single-section .product-details .color-size { margin-bottom: 30px; } .shop-single-section .product-details .product-option .bootstrap-touchspin { border: 1px solid rgba(255, 255, 255, 0.2); background-color: transparent; } .shop-single-section .product-details .product-option .bootstrap-touchspin button { text-decoration: none; height: 50px; width: 50px; line-height: 50px; padding: 0 15px; font-size: 16px; font-size: 1.0666666667rem; font-weight: 500; color: #fff; display: flex; align-items: center; justify-content: center; } .shop-single-section .product-details .product-option .bootstrap-touchspin-down { left: 0; border-right: 1px solid rgba(255, 255, 255, 0.2); } .shop-single-section .product-details .product-option .bootstrap-touchspin-up { right: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); } .shop-single-section .product-details .product-option .bootstrap-touchspin input { border: 0; height: 50px; line-height: 50px; text-align: center; font-size: 16px; font-size: 1.0666666667rem; font-weight: 500; color: #fff; padding: 0; background-color: transparent; } .shop-single-section .product-details .product-count:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; } .shop-single-section .thb-product-meta-after .product_meta > span { font-size: 16px; font-weight: 500; color: #fff; display: block; margin-bottom: 15px; } .shop-single-section .thb-product-meta-after .product_meta > span a { font-weight: 400; font-size: 15px; color: #868686; } .shop-single-section .product-details .product-option { margin-top: 40px; } .shop-single-section .single-product-info { margin-top: 20px; } .product-share-wrap a { margin-left: 15px; } .product-share-wrap a:hover { color: var(--color-primary); } @media (max-width: 767px) { .shop-single-section .single-product-info .tablist { margin-bottom: 25px; } } .shop-single-section .single-product-info h4 { font-size: 18px; font-size: 1.2rem; font-weight: 400; margin: 0; line-height: 1.7em; font-weight: 500; } .shop-single-section .single-product-info p { margin-bottom: 1.3em; } .shop-single-section .single-product-info .tab-pane p:last-child { margin-bottom: 0; } .shop-single-section .single-product-info .nav-tabs { border: 0; display: inline-block; margin-top: 5px; } .shop-single-section .single-product-info .nav-tabs { margin-top: -10px; } .shop-single-section .single-product-info .nav-tabs li { float: left; margin-right: 30px; margin-top: 10px; } .shop-single-section .single-product-info .nav-tabs li:last-child { margin-right: 0; } .shop-single-section .single-product-info .nav-tabs button { background: transparent; font-weight: 500; font-size: 16px; display: block; border: 1px solid rgba(255, 255, 255, 0.2); padding: 13px 45px; position: relative; z-index: 1; overflow: hidden; color: var(--color-white); } .shop-single-section .single-product-info .nav-tabs button.active { color: var(--color-white); border-color: var(--color-primary); } .shop-single-section .single-product-info .nav-tabs button.active::before { opacity: 1; } @media (max-width: 767px) { .shop-single-section .single-product-info .nav-tabs button { font-size: 12px; padding: 8px 25px; } } .shop-single-section .single-product-info .nav-tabs a:hover, .shop-single-section .single-product-info .nav-tabs .active a { background-color: transparent; color: #00394f; } .shop-single-section .single-product-info .tab-content { padding: 35px 0; margin-top: -1px; text-align: left; } @media (max-width: 767px) { .shop-single-section .single-product-info .tab-content { border: 0; padding: 0; margin: 0; } } .shop-single-section .single-product-info .client-rv { overflow: hidden; margin-bottom: 30px; } .shop-single-section .single-product-info .client-rv:last-child { margin-bottom: 0; } .shop-single-section .single-product-info .client-rv .client-pic { width: 60px; float: left; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; overflow: hidden; } @media (max-width: 767px) { .shop-single-section .single-product-info .client-rv .client-pic { width: 100%; float: none; margin-bottom: 10px; } } .shop-single-section .single-product-info .client-rv .details { width: calc(100% - 80px); float: right; } @media (max-width: 767px) { .shop-single-section .single-product-info .client-rv .details { width: 100%; float: none; } } @media (max-width: 767px) { .shop-single-section .single-product-info .client-rv .name-rating-time { padding-bottom: 3px; } } .shop-single-section .single-product-info .client-rv .name-rating-time > div, .shop-single-section .single-product-info .client-rv .name-rating > div { display: inline-block; font-size: 14px; font-size: 0.9333333333rem; } @media (max-width: 767px) { .shop-single-section .single-product-info .client-rv .name-rating-time > div, .shop-single-section .single-product-info .client-rv .name-rating > div { font-size: 12px; font-size: 0.8rem; display: block; } } .shop-single-section .single-product-info .client-rv .rating .fi:before { font-size: 12px; } .shop-single-section .single-product-info .client-rv .rating { font-size: 12px; color: #E0A500; padding-left: 12px; } @media (max-width: 767px) { .shop-single-section .single-product-info .client-rv .rating { padding-left: 0; margin: 4px 0 7px; } } .shop-single-section .single-product-info .client-rv .name-rating-time .time { font-size: 14px; font-size: 0.9333333333rem; font-weight: 500; margin-top: 3px; display: block; color: #b3b3b3; text-transform: uppercase; } @media (max-width: 767px) { .shop-single-section .single-product-info .client-rv .name-rating-time .time { float: none; } } .shop-single-section .single-product-info .client-rv .review-body { padding-top: 12px; } .shop-single-section .single-product-info .review-form-wrapper { margin-top: 50px; } @media screen and (min-width: 1200px) { .shop-single-section .single-product-info .review-form-wrapper { padding-left: 15px; } } @media (max-width: 991px) { .shop-single-section .single-product-info .review-form { margin-top: 45px; } } .shop-single-section .single-product-info .review-form h4 { margin-bottom: 1.73em; font-weight: 500; } .shop-single-section .single-product-info .review-form form input, .shop-single-section .single-product-info .review-form form textarea { width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0; padding: 12px 15px; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: var(--color-white); } @media (max-width: 991px) { .shop-single-section .single-product-info .review-form form input, .shop-single-section .single-product-info .review-form form textarea { padding: 10px 15px; } } .shop-single-section .single-product-info .review-form form input:focus, .shop-single-section .single-product-info .review-form form textarea:focus { border: 1px solid var(--color-primary); outline: none; -webkit-box-shadow: none; box-shadow: none; } .shop-single-section .single-product-info .review-form form textarea { height: 130px; } .shop-single-section .single-product-info .review-form form > div { margin-bottom: 27px; } .shop-single-section .single-product-info .review-form form > div:last-child { margin-bottom: 0; } .shop-single-section .single-product-info .review-form form .rating-wrapper > div { display: inline-block; } @media (max-width: 767px) { .shop-single-section .single-product-info .review-form form .rating-wrapper > div { display: block; float: none !important; } } .shop-single-section .single-product-info .review-form form .rating-wrapper > div:last-child { float: right; } @media (max-width: 767px) { .shop-single-section .single-product-info .review-form form .rating-wrapper > div:last-child { margin-top: 20px; } } .shop-single-section .single-product-info .review-form form .rating a { font-size: 14px; color: #cccccc; display: inline-block; margin-right: 5px; } @media (max-width: 767px) { .shop-single-section .single-product-info .review-form form .rating a { font-size: 12px; } } .shop-single-section .single-product-info .review-form form .rating a:last-child { margin: 0; } .shop-single-section .single-product-info .review-form form .rating a:hover { color: #E0A500; } .shop-single-section .single-product-info .review-form .submit button { border: 0; outline: none; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .shop-single-section .realted-porduct { margin-top: 20px; } .shop-single-section .realted-porduct .title { font-size: 28px; line-height: 0.95em; margin: 0 0 0.7em; position: relative; font-weight: 500; text-transform: capitalize; margin-bottom: 30px; } .account-form { border: 1px solid #E0DDE5; padding: 30px; } @media (max-width: 767px) { .account-form { padding: 20px 15px; } } .account-form label { color: var(--color-black); margin-bottom: 10px; } .account-form .form-check-input { margin-top: 0; margin-bottom: 10px; margin-right: 10px; box-shadow: none; } .account-form .form-check-input:focus { border-color: var(--color-primary); } .account-form .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .account-form__inner h3 { font-size: 28px; margin-bottom: 12px; font-weight: 600; } @media (max-width: 767px) { .account-form__inner h3 { font-size: 24px; } } .account-form__btn button { padding: 15px 50px; } .account-form__chekbox { display: flex; align-items: center; } .account-form .lost-password { color: #4A4C51; margin-top: 15px; display: inline-block; } .account-form .lost-password:hover { color: var(--color-black); } .account-form__content a { color: var(--color-black); } .woocommerce-content-wrap .pagination_wrap { margin-bottom: -54px; } .woocommerce-cart .grop-page-content_warp .woocommerce { margin-top: 20px; margin-bottom: 41px; } .woocommerce .quantity { width: 76px; } .woocommerce-cart .woocommerce table.shop_table th { padding: 15px 19px 13px; text-transform: uppercase; color: #fff; font-weight: 500; } .woocommerce table.shop_table { border: 0; border-radius: 0; } .shop_table tfoot tr th { font-weight: normal; } .woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { font-weight: 500; } .shop_table { table-layout: auto; border-collapse: collapse; border-spacing: 0; width: 100%; text-align: left; } .shop_table thead tr th:first-child { text-align: left; } .shop_table.woocommerce-checkout-review-order-table th, .shop_table.woocommerce-checkout-review-order-table td { padding-top: 15px; padding-bottom: 15px; } .shop_table th, .shop_table td { padding: 25px 0; } .shop_table.woocommerce-checkout-review-order-table th, .shop_table.woocommerce-checkout-review-order-table td { padding-top: 15px; padding-bottom: 15px; } .shop_table tbody tr td { padding-right: 25px; } .shop_table th, .shop_table td { padding: 25px 0; } .add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background: #16171b; border-radius: 0; padding: 25px; } #add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods { padding: 0; list-style: none; } #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box { background-color: #e6e6e6; } #add_payment_method #payment div.payment_box:before, .woocommerce-cart #payment div.payment_box:before, .woocommerce-checkout #payment div.payment_box:before { border: 1em solid rgba(255, 255, 255, 0.2); border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; } #add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, .woocommerce-checkout #payment div.form-row { padding-left: 0; } .woocommerce table.shop_table td { border-top: 1px solid rgba(255, 255, 255, 0.2); } .woocommerce-cart .woocommerce table.shop_table td.actions { padding-top: 19px; padding-bottom: 19px; text-align: right; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { font-size: 15px; font-size: 1rem; padding: 17px 19px 15px; color: #fff; } .woocommerce-cart .woocommerce table.shop_table .cart_single td.product-name, .woocommerce-cart .woocommerce table.shop_table .cart_single td.product-name a { color: var(--color-default); } .woocommerce #content table.cart td.actions .coupon, .woocommerce table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon { float: left; } .woocommerce table.cart td.actions .coupon { display: flex; align-items: center; flex-wrap: wrap; } @media (max-width: 767px) { .woocommerce table.cart td.actions .coupon { display: unset; } } .widget_products .product-list-widget > li { display: flex; align-items: center; margin-bottom: 25px; } .widget_products .product-list-widget > li:last-child { margin-bottom: 0; } .widget_products .product-thumb { width: 80px; margin-right: 15px; } .rating_star li { font-size: 12px; color: #ffab50; margin-right: 2px; } .widget_products .rating_star { margin-bottom: 6px; } .widget_products .procuct-title { font-size: 16px; margin-bottom: 7px; } .widget_products .woocommerce-Price-amount.amount { font-size: 14px; } .widget_products .prodcut-content del { font-size: 15px; padding-left: 5px; color: var(--color-default); } .widget_products .prodcut-content ins { text-decoration: none; color: var(--color-white); } .woocommerce-cart .woocommerce table.shop_table td.actions .coupon label:first-child { display: none; } .woocommerce-cart .woocommerce table.shop_table td.actions #coupon_code { height: 52px; padding-left: 18px; width: 227px; box-shadow: none; border: 1px solid rgba(22, 29, 57, 0.1); color: var(--color-white); margin: 0; margin-right: 20px; padding: 10px 20px; background-color: #16171b; } .woocommerce-cart .woocommerce table.shop_table td.actions input:focus { border-color: var(--color-primary) !important; } .woocommerce-cart .woocommerce table.shop_table tr.cart-subtotal td[data-title*=Subtotal], .woocommerce-cart .woocommerce table.shop_table tr.shipping td[data-title*=Subtotal], .woocommerce-cart .woocommerce table.shop_table tr.order-total td[data-title*=Subtotal] { color: var(--color-white); } .woocommerce-cart .woocommerce table.shop_table tr.cart-subtotal td[data-title*=Subtotal]::-webkit-input-placeholder, .woocommerce-cart .woocommerce table.shop_table tr.shipping td[data-title*=Subtotal]::-webkit-input-placeholder, .woocommerce-cart .woocommerce table.shop_table tr.order-total td[data-title*=Subtotal]::-webkit-input-placeholder { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; color: var(--color-default); } .woocommerce-cart .woocommerce table.shop_table tr.cart-subtotal td[data-title*=Subtotal]::-moz-placeholder, .woocommerce-cart .woocommerce table.shop_table tr.shipping td[data-title*=Subtotal]::-moz-placeholder, .woocommerce-cart .woocommerce table.shop_table tr.order-total td[data-title*=Subtotal]::-moz-placeholder { /* Firefox 19+ */ opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; color: var(--color-default); } .woocommerce-cart .woocommerce table.shop_table tr.cart-subtotal td[data-title*=Subtotal]:-ms-input-placeholder, .woocommerce-cart .woocommerce table.shop_table tr.shipping td[data-title*=Subtotal]:-ms-input-placeholder, .woocommerce-cart .woocommerce table.shop_table tr.order-total td[data-title*=Subtotal]:-ms-input-placeholder { /* IE 10+ */ opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; color: var(--color-default); } .woocommerce-cart .woocommerce table.shop_table tr.cart-subtotal td[data-title*=Subtotal]:-moz-placeholder, .woocommerce-cart .woocommerce table.shop_table tr.shipping td[data-title*=Subtotal]:-moz-placeholder, .woocommerce-cart .woocommerce table.shop_table tr.order-total td[data-title*=Subtotal]:-moz-placeholder { /* Firefox 18- */ opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; color: var(--color-default); } .woocommerce-cart .woocommerce table.shop_table tr.cart-subtotal th, .woocommerce-cart .woocommerce table.shop_table tr.cart-subtotal td, .woocommerce-cart .woocommerce table.shop_table tr.shipping th, .woocommerce-cart .woocommerce table.shop_table tr.shipping td, .woocommerce-cart .woocommerce table.shop_table tr.order-total th, .woocommerce-cart .woocommerce table.shop_table tr.order-total td { padding: 16px 15px 14px; } .woocommerce-cart .woocommerce-shipping-calculator .shipping-calculator-button { color: var(--color-black); margin-top: 6px; display: block; margin-bottom: 12px; } .woocommerce-cart .shipping-calculator-form .form-row { margin: 0 0 13px; } .woocommerce-cart .shipping-calculator-form button.button { background-color: #000 !important; color: #ffffff !important; height: 45px; line-height: 45px; padding: 1px 27px 0; margin-top: 4px; } #add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img { width: 70px; object-fit: cover; } .woocommerce-cart .woocommerce table.shop_table .cart_single td a.remove { width: 18px; height: 18px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; line-height: 17px; color: #fff; border-radius: 50%; background: #16171b; } .woocommerce #respond input#submit.disabled, .woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit[disabled]:disabled, .woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce a.button[disabled]:disabled, .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button[disabled]:disabled, .woocommerce input.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button[disabled]:disabled { padding-top: 0; padding-bottom: 0; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { margin-top: 50px; } .woocommerce .cart-collaterals .cart_totals > h2, .woocommerce-page .cart-collaterals .cart_totals > h2 { font-size: 24px; font-size: 1.6rem; margin: 0 0 1.3em; } #add_payment_method .cart-collaterals .cart_totals table select, .woocommerce-cart .cart-collaterals .cart_totals table select, .woocommerce-checkout .cart-collaterals .cart_totals table select { border: 1px solid rgba(22, 29, 57, 0.1); color: var(--color-default); font-size: 14px; height: 50px; width: 100%; } #add_payment_method .wc-proceed-to-checkout, .woocommerce-cart .wc-proceed-to-checkout, .woocommerce-checkout .wc-proceed-to-checkout { padding: 0; text-align: right; } #add_payment_method .wc-proceed-to-checkout, .woocommerce-cart .wc-proceed-to-checkout, .woocommerce-checkout .wc-proceed-to-checkout { padding: 0; } #add_payment_method .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button { margin-bottom: 0; margin-top: 16px; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { padding: 19px 50px; background-color: var(--color-primary); color: #000; display: inline-block; } .woocommerce-cart .input-text.qty.text { -webkit-box-shadow: none; box-shadow: none; } .woocommerce-cart input::-webkit-outer-spin-button, .woocommerce-cart input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } @media (max-width: 600px) { .woocommerce-cart thead { display: none; } .woocommerce-cart table, .woocommerce-cart th, .woocommerce-cart td, .woocommerce-cart tr, .woocommerce-cart tbody { width: 100%; display: block; border: 0; text-align: center; } .woocommerce table.shop_table { border: 1px solid rgba(22, 29, 57, 0.1); } .quantity { margin: 0 auto; } .woocommerce table.shop_table td { border: 0; } .woocommerce-cart tbody > tr { position: relative; } .woocommerce-cart tbody > tr + tr { border-top: 1px solid rgba(22, 29, 57, 0.1); } .woocommerce-cart tbody > tr { padding: 30px 20px; } .woocommerce-cart .woocommerce table.shop_table .cart_single td { padding: 8px 10px; } .woocommerce-cart .woocommerce table.shop_table .cart_single td.product-remove { border-right: 0; width: auto; } .woocommerce-cart .woocommerce table.shop_table .cart_single td.product-remove { position: absolute; right: 15px; top: 15px; } .woocommerce-cart .woocommerce table.shop_table td.actions { text-align: center; } .woocommerce-cart .woocommerce table.shop_table td.actions input, .woocommerce-cart .woocommerce table.shop_table td.actions button { display: block; float: none; } .woocommerce-cart .coupon { float: none !important; } .woocommerce-cart .woocommerce table.shop_table td.actions input, .woocommerce-cart .woocommerce table.shop_table td.actions button { display: inline-block; float: none; margin-top: 10px; } .woocommerce-cart .woocommerce table.shop_table .cart_single td.product-name, .woocommerce-cart .woocommerce table.shop_table .cart_single td.product-name a, .woocommerce-cart .woocommerce table.shop_table .cart_single td, .woocommerce-cart .woocommerce table.shop_table .cart_single td a { font-weight: 500; } } @media (max-width: 767px) { .cart-section .container { max-width: 100%; } } @media (max-width: 600px) { .cart-section .wc-proceed-to-checkout { text-align: center; } } .cart-section .btn { padding: 7px 4px 7px 6px; font-size: 8px; font-weight: normal; position: relative; } .cart-section .btn:hover { background-color: #000 !important; } .cart-section .bootstrap-touchspin { border: 1px solid rgba(255, 255, 255, 0.15); width: 100px; } .cart-section .bootstrap-touchspin button { text-decoration: none; border: 0; height: 38px; line-height: 38px; padding: 0 10px; font-size: 16px; font-size: 1.0666666667rem; font-weight: 500; color: var(--color-default); } .cart-section .bootstrap-touchspin input { border: 0; height: 38px; line-height: 38px; text-align: center; font-size: 16px; font-size: 1.0666666667rem; font-weight: 500; color: var(--color-default); background: transparent; } .cart-section .bootstrap-touchspin-up { right: 10px; } .cart-section .bootstrap-touchspin-up:hover { background: transparent !important; } .cart-section .bootstrap-touchspin-down { left: 10px; } .cart-section .bootstrap-touchspin-down:hover { background: transparent !important; } /* Firefox */ .woocommerce-cart input[type=number] { -moz-appearance: textfield; } .woocommerce strong { font-weight: 500; } .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up, .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0; } .checkout-section .checkout.woocommerce-checkout { overflow: hidden; clear: both; } @media screen and (min-width: 992px) { .checkout-section .checkout.woocommerce-checkout .col2-set { width: 70%; float: left; padding-right: 85px; } .checkout-section .checkout.woocommerce-checkout .woocommerce-checkout-review-order { width: 30%; float: right; } .checkout-section .checkout.woocommerce-checkout form .form-row.form-row-first, .checkout-section .checkout.woocommerce-checkout form .form-row.form-row-last, .checkout-section .checkout.woocommerce-checkout .form-row.form-row-first, .checkout-section .checkout.woocommerce-checkout .form-row.form-row-last { width: 50%; float: left; } .checkout-section .checkout.woocommerce-checkout form .form-row.form-row-first, .checkout-section .checkout.woocommerce-checkout .form-row.form-row-first { padding-right: 15px; } .checkout-section .checkout.woocommerce-checkout .form-row label, .woocommerce .form-row label { color: #fff; font-size: 16px; font-weight: 500; margin-bottom: 5px; } .checkout-section .checkout.woocommerce-checkout form .form-row.form-row-last, .checkout-section .checkout.woocommerce-checkout .form-row.form-row-last { padding-left: 15px; } } .checkout-section .checkout.woocommerce-checkout .form-row label.checkbox, .checkout-section .checkout.woocommerce-checkout .woocommerce-shipping-fields label.checkbox { display: inline-block; } .checkout-section .checkout.woocommerce-checkout .form-row textarea { height: 180px; } .woocommerce-cart .actions .xb-btn { border: 0; height: 52px; padding: 10px 50px 12px; background-color: var(--color-primary); } .woocommerce table.shop_table { border: 1px solid rgba(255, 255, 255, 0.2); margin: 0 -1px 24px 0; text-align: left; width: 100%; border-collapse: separate; } .woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { font-weight: 700; border-top: 1px solid hwb(0 100% 0%/0.2); } /*** woocommerce ***/ .woocommerce-Button, .woocommerce-button { background: rgba(0, 0, 0, 0.9); font-size: 12px; font-size: 0.8rem; font-weight: 500; font-weight: 500; padding: 12px 30px; color: #fff; margin-top: 20px; color: white; display: inline-block; margin-left: auto; margin-right: auto; text-transform: uppercase; letter-spacing: 3px; border: 0; } .woocommerce-Button:hover, .woocommerce-button:hover { background: #000; } .woocommerce-info:before { display: none; } .woocommerce-privacy-policy-text a { font-weight: 500; color: #E0A500; text-decoration: underline; } .woocommerce-error a, .woocommerce-info a, .woocommerce-message a, .lost_password a { color: #fff; } .woocommerce-error a:hover, .woocommerce-info a:hover, .woocommerce-message a:hover, .lost_password a:hover { text-decoration: underline; } .woocommerce-error, .woocommerce-info, .woocommerce-message { background-color: #16171b; width: auto; padding: 15px 15px 15px 35px; margin: 0 0 2em; position: relative; color: #fff; list-style: none; word-wrap: break-word; } @media (max-width: 767px) { .woocommerce-error, .woocommerce-info, .woocommerce-message { padding: 15px; } } .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register { padding: 34px 35px 33px; border: 1px solid rgba(255, 255, 255, 0.2); margin: 19px 0; text-align: left; border-radius: 0; } .woocommerce .login p { margin-bottom: 15px; } @media (max-width: 767px) { .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register { padding: 34px 20px 33px; } } .woocommerce form .form-row .required { color: red; font-weight: 600; border: 0; } .woocommerce form.login > p:not(.form-row) { margin-bottom: 2em; } #customer_login form.login > p:not(.form-row) { margin-top: 2em; margin-bottom: 0; } .woocommerce form.login input[type=submit], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { color: #000; font-size: 12px; font-size: 0.8rem; font-weight: 600; padding: 14px 30px; text-transform: uppercase; letter-spacing: 2px; display: inline-block; border: 0; border-radius: 0; outline: 0; } .woocommerce .checkout_coupon input[type="submit"] { padding: 18px 30px; border: 0; margin-top: 10px; } .woocommerce form.login input[type=submit]:hover, .woocommerce form.login input[type=submit]:focus, .woocommerce form.login input[type=submit]:active, .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit:focus, .woocommerce #respond input#submit:active, .woocommerce a.button:hover, .woocommerce a.button:focus, .woocommerce a.button:active, .woocommerce button.button:hover, .woocommerce button.button:focus, .woocommerce button.button:active, .woocommerce input.button:hover, .woocommerce input.button:focus, .woocommerce input.button:active { background-color: var(--color-primary); color: #000; } .woocommerce form .form-row label.inline { display: inline; padding-left: 15px; } .woocommerce form .form-row label.inline .form-check-input { margin-top: 14px; width: 14px; height: 14px; } .woocommerce h3 { font-size: 22px; font-size: 1.4666666667rem; margin: 1em 0 1.5em; } abbr, abbr[title] { border-bottom: 1px dotted #0a0a0a; cursor: help; text-decoration: none; } @media (max-width: 767px) { .woocommerce form .form-row label.inline { padding-left: 5px; } } .checkout-section input[type="text"], .checkout-section input[type="password"], .checkout-section input[type="email"], .checkout-section input[type="tel"], .checkout-section select, .checkout-section textarea { height: 55px; box-shadow: none; padding: 10px 20px; background-color: #16171b; border: 2px solid transparent; } .checkout-section input[type="text"]:focus, .checkout-section input[type="password"]:focus, .checkout-section input[type="email"]:focus, .checkout-section input[type="tel"]:focus, .checkout-section select:focus, .checkout-section textarea:focus { border-color: var(--color-primary); } #add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li { line-height: 2; text-align: left; margin: 0; font-weight: 400; } #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box { position: relative; box-sizing: border-box; width: 100%; padding: 1em; margin: 1em 0; font-size: .92em; border-radius: 2px; line-height: 1.5; background-color: var(--color-black); color: var(--color-default); } #add_payment_method #payment ul.payment_methods li img, .woocommerce-cart #payment ul.payment_methods li img, .woocommerce-checkout #payment ul.payment_methods li img { vertical-align: middle; margin: -2px 0 0 .5em; padding: 0; position: relative; box-shadow: none; } #add_payment_method #payment .payment_method_paypal img, .woocommerce-cart #payment .payment_method_paypal img, .woocommerce-checkout #payment .payment_method_paypal img { max-height: 52px; vertical-align: middle; } #add_payment_method #payment .payment_method_paypal .about_paypal, .woocommerce-cart #payment .payment_method_paypal .about_paypal, .woocommerce-checkout #payment .payment_method_paypal .about_paypal { float: right; line-height: 34px; font-size: .83em; color: var(--color-default); margin-left: 10px; } #add_payment_method #payment ul.payment_methods li input, .woocommerce-cart #payment ul.payment_methods li input, .woocommerce-checkout #payment ul.payment_methods li input { margin: 8px 5px 0 0; } #add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before { border: 1em solid var(--color-border); border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; } #add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before { content: ""; display: block; border: 1em solid var(--color-black); border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; position: absolute; top: -.75em; left: 0; margin: -1em 0 0 2em; } #add_payment_method #payment div.payment_box p:last-child, .woocommerce-cart #payment div.payment_box p:last-child, .woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; } .woocommerce-billing-fields p { margin-bottom: 15px; } .rating-wrapper .xb-btn { font-size: 14px; font-weight: 700; text-transform: None; color: #242528; border-style: none; padding: 16px 31px; align-self: center; position: relative; display: inline-block; background-color: var(--color-primary); line-height: 1.1; letter-spacing: 0.6px; transition: all 0.2s cubic-bezier(0.68, 0.01, 0.58, 0.75); } #ship-to-different-address .form-check-input[type="checkbox"] { width: 16px; height: 16px; margin-top: 7px; } /*----------------------------------------*/ /* 26. faq /*----------------------------------------*/ .accordion-wrapper { padding-right: 113px; padding-left: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .accordion-wrapper { padding-right: 50px; } } @media (max-width: 1199px) { .accordion-wrapper { padding-right: 40px; } } @media (max-width: 991px) { .accordion-wrapper { padding-right: 0; } } .accordion_box { position: relative; list-style: none; } .accordion_box .block { position: relative; overflow: hidden; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .accordion_box .block:last-child { margin-bottom: 0; } .accordion_box .block .acc-btn { color: var(--color-white); position: relative; font-size: 22px; cursor: pointer; padding: 21px 0; letter-spacing: -0.22px; padding-right: 70px; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; text-transform: uppercase; font-family: var(--font-heading); } .accordion_box .block .acc-btn .arrow { position: absolute; right: 0; top: 21px; } .accordion_box .block .acc-btn .arrow::before { top: 0; right: 0; content: "\f067"; font-weight: 400; font-family: "Font Awesome 5 Pro"; font-size: 17px; position: absolute; -webkit-transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .accordion_box .block .content { position: relative; padding-right: 40px; padding-bottom: 25px; } .accordion_box .block .content p { color: #838788; } .accordion_box .block .content p:not(:last-child) { margin-bottom: 20px; } .accordion_box .block .content a { color: var(--color-white); font-size: 18px; font-weight: 700; } .accordion_box .block .content a:hover span { -webkit-transform: translate(4px, -2px); -ms-transform: translate(4px, -2px); transform: translate(4px, -2px); } .accordion_box .block .content a span { margin-left: 10px; width: 15px; height: 15px; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .accordion_box .block.active-block .acc-btn .arrow::before { content: "\f068"; transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } .accordion_box .block .acc_body { position: relative; display: none; } .accordion_box .block .acc_body.current { display: block; } .faq-img { position: absolute; top: 0; right: 0; width: 50%; } @media (max-width: 991px) { .faq-img { position: unset; width: 100%; height: 300px; margin-top: 30px; } } .xb-faq .accordion_box .block { padding-left: 215px; padding-right: 30px; } @media (max-width: 1199px) { .xb-faq .accordion_box .block { padding-left: 100px; } } @media (max-width: 767px) { .xb-faq .accordion_box .block { padding-left: 50px; padding-right: 10px; } } .xb-faq .accordion_box .block:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); } .xb-faq .accordion_box .block .number { position: absolute; top: 37px; left: 0; font-size: 30px; font-family: var(--font-heading); color: #fff; } @media (max-width: 767px) { .xb-faq .accordion_box .block .number { font-size: 20px; top: 20px; } } .xb-faq .accordion_box .block .acc-btn { font-size: 30px; padding: 33px 0; line-height: 1.1; } @media (max-width: 767px) { .xb-faq .accordion_box .block .acc-btn { font-size: 20px; padding: 20px 0; padding-right: 20px; } } .xb-faq .accordion_box .block .acc-btn .arrow { top: 36px; } @media (max-width: 767px) { .xb-faq .accordion_box .block .acc-btn .arrow { top: 20px; } } .xb-faq .accordion_box .block .acc-btn .arrow::before { font-weight: 300; font-size: 24px; } @media (max-width: 767px) { .xb-faq .accordion_box .block .acc-btn .arrow::before { font-size: 20px; } } .xb-faq .accordion_box .block .content { max-width: 80%; } @media (max-width: 1199px) { .xb-faq .accordion_box .block .content { max-width: 90%; } } @media (max-width: 991px) { .xb-faq .accordion_box .block .content { max-width: 100%; padding-right: 0; } } .thm-btn { font-size: 14px; font-weight: 400; text-transform: None; color: var(--color-black); border-style: none; padding: 22px 39px; align-self: center; position: relative; line-height: 1.1; transition: all 0.2s cubic-bezier(0.68, 0.01, 0.58, 0.75); text-transform: uppercase; display: inline-flex; align-items: center; z-index: 1; } .thm-btn .btn-shape { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .thm-btn .btn-shape svg { display: block; position: absolute; width: 100%; height: 100%; overflow: visible; } .thm-btn .btn-shape svg path { fill: var(--color-primary); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .thm-btn:hover { color: var(--color-black); -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); } .thm-btn:hover .icon { -webkit-transform: rotate(42deg); -ms-transform: rotate(42deg); transform: rotate(42deg); } .thm-btn .icon { margin-left: 20px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .thm-btn--anim .btn-anim-wrap { transition: opacity .6s,transform .8s; transition-timing-function: ease, ease; transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1); display: inline-block; } .thm-btn--anim .btn-anim-wrap .button-text { transition: opacity .6s,transform .8s; transition-timing-function: ease, ease; transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1); flex-grow: 1; order: 10; display: inline-block; color: currentColor; } .thm-btn--anim .btn-anim-wrap .button-text:nth-child(2) { display: inline-block; position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, 80%); opacity: 0; color: currentColor; } .thm-btn--anim:hover .button-text:nth-child(1) { opacity: 0; } .thm-btn--anim:hover .button-text:nth-child(2) { transform: translate(-50%, 100%); opacity: 1; } .thm-btn--anim:hover .btn-anim-wrap { transform: translateY(-150%); } .thm-btn--anim:hover > span svg path { fill: #CEFF0A; } .thm-btn--dark { color: var(--color-white); } .thm-btn--dark .btn-shape svg path { fill: #868686; } .thm-btn--dark:hover .btn-shape svg path { fill: var(--color-primary); } .thm-btn--dark:hover .icon { filter: brightness(0); } .thm-btn--dark .btn-anim-wrap .button-text:nth-child(2) { color: var(--color-black); } .thm-btn--stroke { color: #DDDDDD; } .thm-btn--stroke .btn-shape svg path { fill: unset; stroke: var(--color-primary); } .thm-btn--stroke img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin-right: 8px; margin-left: 0; } .thm-btn--stroke:hover { background-color: transparent; color: var(--color-white); } .thm-btn--two { color: var(--color-black); background: var(--color-primary); font-size: 22px; letter-spacing: -0.22px; text-transform: uppercase; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; padding: 18px 27px; } .thm-btn--two:hover { -webkit-transform: scale(1.03); -ms-transform: scale(1.03); transform: scale(1.03); } .btns { margin: -12px; } .btns a { margin: 12px; } .button__bg { top: 0; left: 0; position: absolute; width: 100%; height: 100%; background: var(--color-primary); border-radius: 50%; overflow: hidden; transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1); z-index: -1; } .circle-btn { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .circle-btn .button__bg::before, .circle-btn .button__bg::after { content: ''; position: absolute; background: #CEFF0A; } .circle-btn .button__bg::before { width: 110%; height: 0; padding-bottom: 110%; top: 50%; left: 50%; border-radius: 50%; transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1); } .circle-btn:hover .button__bg::before { transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1); transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1); } .circle-btn .button__bg::after { top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; } .circle-btn:hover .button__bg::after { opacity: 1; transition-duration: 0.01s; transition-delay: 0.3s; } .circle-btn:hover .button__bg { transform: scale3d(1.1, 1.1, 1); } .port-btn { height: 135px; width: 135px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 32px; font-weight: 400; color: #000000; text-transform: uppercase; z-index: 1; text-align: center; position: relative; font-family: var(--font-heading); } @media (max-width: 767px) { .port-btn { height: 120px; width: 120px; font-size: 22px; } } .port-btn:hover { color: #000000; } .port-btn:hover .button__bg { transform: scale3d(1.2, 1.2, 1); } .port-btn .button__bg { z-index: -1; } .btn-link { font-family: var(--font-heading); font-size: 22px; letter-spacing: -0.22px; color: #FFF; text-decoration: none; text-transform: uppercase; display: inline-flex; } .btn-link:hover { color: var(--color-white); } .btn-link:hover span { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .btn-link span { height: 60px; width: 60px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; margin-left: 8px; color: #292D32; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-btn { font-size: 16px; text-transform: None; color: var(--color-black); border-style: none; padding: 19px 40px; align-self: center; position: relative; display: inline-block; line-height: 1.1; letter-spacing: 0.6px; transition: all 0.2s cubic-bezier(0.68, 0.01, 0.58, 0.75); background-color: var(--color-primary); } /*----------------------------------------*/ /* 27. backtotop /*----------------------------------------*/ .xb-backtotop { right: 30px; z-index: 999; bottom: 20px; position: fixed; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; opacity: 0; visibility: hidden; } .xb-backtotop.active { bottom: 40px; opacity: 1; visibility: visible; } .xb-backtotop .scroll { z-index: 1; width: 40px; height: 40px; display: block; background-color: var(--color-primary); display: flex; align-items: center; justify-content: center; position: relative; color: var(--color-black); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; font-size: 14px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-backtotop .scroll:hover { margin-bottom: 4px; } .xb-backtotop.style-ins .scroll { background: var(--color-ins); color: #052328; } .xb-backtotop.style-law .scroll { background: var(--color-law); } .xb-backtotop.style-advisor .scroll { background: var(--color-advisor); } .xb-backtotop.style-marketing .scroll { background: var(--color-marketing); } .xb-backtotop.style-business .scroll { background: var(--color-business); color: #03080B; } /*----------------------------------------*/ /* 28. mobile-menu /*----------------------------------------*/ .xb-hamburger-menu { display: none; } @media (max-width: 991px) { .xb-hamburger-menu { display: block; } } .xb-nav-mobile-button { position: relative; cursor: pointer; font-size: 25px; color: var(--color-dark); } .xb-nav-mobile-button.btn-white { color: var(--color-white); } .xb-header-menu-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -khtml-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -ms-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; visibility: hidden; } .xb-header-menu { position: fixed; height: 100vh; width: 300px; top: 0; left: 0; bottom: 0; margin: 0; z-index: 1010; overflow: hidden; -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -khtml-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -ms-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translateX(-100%); -khtml-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); visibility: hidden; background-color: #000; } .xb-header-menu.active { visibility: visible; opacity: 1; -webkit-transform: translateX(0%); -khtml-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .xb-header-menu.active + .xb-header-menu-backdrop { opacity: 1; visibility: visible; } .xb-header-menu-scroll { padding: 50px 25px 40px; } .xb-header-menu-scroll .xb-close { position: absolute; top: 0; right: 0; } .xb-header-menu-scroll .xb-menu-primary > li { padding-left: 0; padding-right: 0; } .xb-header-menu-scroll .xb-menu-primary > li > a .left-icon { margin-right: 4px; } .xb-header-menu-scroll .xb-menu-primary > li .elementor-section { max-width: 100%; } .xb-header-menu-scroll .xb-menu-primary > li .elementor-container { margin: 10px 0 !important; } .xb-header-menu-scroll .xb-menu-primary > li .sub-menu.xb-mega-menu, .xb-header-menu-scroll .xb-menu-primary > li .children.xb-mega-menu { padding-left: 0; } .xb-menu-toggle { position: absolute; top: 10px; height: 28px; line-height: 28px; text-align: center; right: 0; width: 28px; cursor: pointer; font-size: 15px; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); color: #1b1b1b; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.03); display: inline-block; } .xb-menu-toggle:before { content: "\f107"; font-weight: 400; font-family: "Font Awesome 5 Pro"; } .xb-menu-toggle.active:before { content: "\f106"; } .xb-menu-primary { list-style: none; margin: 0; padding: 0; } .xb-menu-primary li { position: relative; } .xb-menu-primary li a { display: block; line-height: 46px; color: var(--color-white); font-size: 14px; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.06); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-menu-primary li > a:hover, .xb-menu-primary li > a.current, .xb-menu-primary li.current_page_item > a, .xb-menu-primary li.current-menu-item > a, .xb-menu-primary li.current_page_ancestor > a, .xb-menu-primary li.current-menu-ancestor > a { color: var(--color-primary); } .xb-menu-primary .sub-menu, .xb-menu-primary .children { position: relative; display: none; list-style: none; margin: 0; padding: 0; } .xb-menu-primary .sub-menu li a, .xb-menu-primary .children li a { font-weight: 500; padding-left: 14px; } .xb-menu-primary > li > .sub-menu > li > .sub-menu > li a { padding-left: 28px; } .xb-menu-primary .xb-megamenu .elementor-container > .elementor-column { width: 100%; } .xb-menu-primary .xb-megamenu .elementor-container .elementor-widget-wrap { padding: 0 !important; } .xb-menu-primary .xb-megamenu .xb-link li { margin: 0; } .xb-menu-primary .xb-megamenu .xb-heading { padding-left: 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-top: 12px; padding-bottom: 12px; } .xb-menu-primary .xb-megamenu .xb-heading .xb-item--title { margin-bottom: 0 !important; font-size: 15px !important; border-bottom: none !important; } .xb-menu-primary .xb-megamenu .elementor-widget-heading > .elementor-widget-container { margin-bottom: 0 !important; border-bottom: none !important; } .xb-menu-primary .xb-megamenu .elementor-section .elementor-container { flex-wrap: wrap; } .xb-menu-primary .xb-menu-toggle:hover { color: var(--color-primary); } .xb-logo-mobile { margin-bottom: 40px; } .xb-logo-mobile img { height: 32px; } .xb-header-mobile-search { margin-bottom: 20px; } .xb-header-mobile-search form { position: relative; } .xb-header-mobile-search .search-field { height: 50px; border: none; padding: 0 25px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; color: #fff; border: 2px solid rgba(150, 144, 162, 0.09); padding: 12px 15px 13px; background: transparent; font-size: 16px; } .xb-header-mobile-search .search-field:focus { color: #fff; border-color: var(--color-primary); } .xb-header-mobile-search .search-submit { position: absolute; top: 5px; right: 10px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; line-height: 36px; padding: 0; width: 30px; height: 40px; line-height: 40px; background: none; color: var(--primary-color); } .xb-menu-close { background-color: rgba(0, 0, 0, 0.03); position: absolute; top: 0; right: 0; -webkit-border-radius: 0px; -khtml-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .xb-header-wrap .xb-menu-toggle { color: var(--color-white); background-color: rgba(255, 255, 255, 0.03); } .xb-header-wrap .xb-menu-close { background-color: rgba(255, 255, 255, 0.03); } .xb-header-wrap .xb-close::before, .xb-header-wrap .xb-close::after { background-color: #fff; } /* OVERLAY MENU */ .overlay-menu { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; text-align: center; z-index: 102; overflow: hidden; opacity: 0; visibility: hidden; } .overlay-menu.active { opacity: 1; visibility: visible; } .overlay-menu .close { position: absolute; right: 60px; top: 55px; cursor: pointer; opacity: .5; z-index: 10; transition: all ease .3s; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -ms-transition: all ease .3s; -o-transition: all ease .3s; background: color; } .overlay-menu .close:hover { opacity: 1; } .overlay-menu .left-area, .overlay-menu .right-area { display: flex; justify-content: center; flex-direction: column; height: 100%; } .overlay-menu .left-area { padding-left: 10vw; } .overlay-menu .right-area { padding-left: 3vw; } .overlay-menu .right-area ul { margin-bottom: 30px; } .overlay-menu .right-area ul li { list-style: none; line-height: 30px; } .overlay-menu .right-area ul li a { color: #A8A8A8; } .overlay-menu .right-area ul li p { margin: 0; color: #A8A8A8; } .overlay-menu .right-area ul li span.title { color: #fff; margin-bottom: 20px; font-size: 30px; display: inline-block; } .overlay-menu .overlay-wrap { height: 100vh; } .overlay-menu .overlay-wrap .left-area { text-align: left; background: #000; } .overlay-menu .overlay-wrap .right-area { text-align: left; background: #16171B; } .overlay-menu .overlay-wrap .left-area nav { position: relative; } .overlay-menu .overlay-wrap .left-area nav ul { position: relative; padding: 0; margin: 0; } .overlay-menu .overlay-wrap .left-area nav li { list-style: none; } .overlay-menu .overlay-wrap .left-area nav li a { font-size: 60px; line-height: 90px; font-weight: 300; display: inline-block; position: relative; color: #fff; } .overlay-menu .overlay-wrap .left-area nav li.current-menu-item > a { color: #666666; pointer-events: none; } .overlay-menu .overlay-wrap .left-area nav li.current-menu-item > a:before { opacity: 1; left: -35px; } .overlay-menu .overlay-wrap .left-area nav li.menu-item-has-children > a:after { content: "\f061"; font-family: "Font Awesome 5 Pro"; font-weight: 400; position: absolute; right: -50px; top: 8px; font-size: 25px; color: #fff; opacity: 0; -webkit-transform: translateY(30px) rotate(30deg); -ms-transform: translateY(30px) rotate(30deg); transform: translateY(30px) rotate(30deg); transition: all ease .3s; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -ms-transition: all ease .3s; -o-transition: all ease .3s; } .overlay-menu .overlay-wrap .left-area nav li.menu-item-has-children:hover > a:after { opacity: .4; -webkit-transform: translateY(0) rotate(30deg); -ms-transform: translateY(0) rotate(30deg); transform: translateY(0) rotate(30deg); } .overlay-menu .overlay-wrap .left-area nav li a:before { content: ''; width: 8px; height: 8px; background: #515151; position: absolute; border-radius: 30px; left: -20px; top: 50%; transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; opacity: 0; transition: all ease .5s; -webkit-transition: all ease .5s; -moz-transition: all ease .5s; -ms-transition: all ease .5s; -o-transition: all ease .5s; } .overlay-menu .overlay-wrap .left-area nav li:not(li.menu-item-has-children) a:hover:before { opacity: 1; left: -35px; } .overlay-menu .overlay-wrap .left-area nav li ul { position: absolute; top: 50%; left: 0; z-index: -1; pointer-events: none; margin: 0; padding: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .overlay-menu .overlay-wrap .right-area .social-links { margin: 0; padding: 0; } .overlay-menu .overlay-wrap .right-area .social-links li { float: left; } .overlay-menu .overlay-wrap .right-area .social-links a { float: right; display: inline-block; position: relative; padding-left: 25px; margin-right: 30px; transition: all ease .3s; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -ms-transition: all ease .3s; -o-transition: all ease .3s; } .overlay-menu .overlay-wrap .right-area .social-links a:after { content: "\f061"; font-family: "Font Awesome 5 Pro"; font-weight: 400; position: absolute; left: 0; top: 2px; font-size: 16px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transition: all ease .3s; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -ms-transition: all ease .3s; -o-transition: all ease .3s; } .overlay-menu .overlay-wrap .right-area .social-links a:hover { color: #fff; } .overlay-menu .overlay-wrap .right-area .social-links a:hover:after { transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); } .overlay-menu .back { line-height: 45px !important; opacity: .3 !important; transition: opacity ease .2s; -webkit-transition: opacity ease .2s; -moz-transition: opacity ease .2s; -ms-transition: opacity ease .2s; -o-transition: opacity ease .2s; } .overlay-menu .back:hover { opacity: 1 !important; } .overlay-menu .back::before { display: none; } .overlay-menu .back:after { content: "\f061"; font-family: "Font Awesome 5 Pro"; font-weight: 400; position: absolute; right: -40px; top: 11px; font-size: 21px; -webkit-transform: rotate(-140deg); -ms-transform: rotate(-140deg); transform: rotate(-140deg); } .overlay-menu .xb-close { width: 45px; height: 45px; } .overlay-menu .xb-close::before, .overlay-menu .xb-close::after { background-color: #fff; } @media screen and (max-width: 420px) { .xb-header-menu { width: 100%; } } @media screen and (max-width: 1024px) { .header-container { padding: 45px; } .slider-bottom { padding: 45px !important; } .overlay-menu .close { right: 45px; top: 45px; } .overlay-menu .right-area ul { padding: 0; padding-left: 15px; } .overlay-menu .overlay-wrap .left-area nav li a { font-size: 55px; line-height: 80px; } } .overlay-menu-two .overlay-wrap .left-area { background: #060613; } .overlay-menu-two .overlay-wrap .right-area { background-color: #151521; } .overlay-menu-three .overlay-wrap .left-area { background: #020202; } .overlay-menu-thee .overlay-wrap .right-area { background-color: #242424; } /*----------------------------------------*/ /* 32. preloader /*----------------------------------------*/ @keyframes xb_dual_ring { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-webkit-keyframes xb_dual_ring { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } } @keyframes BgAnimated1 { 0% { background-position: bottom 10px left; } 50% { background-position: bottom 10px right; } 100% { background-position: bottom 10px left; } } @keyframes tx_prixClipFix { 0% { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); } 25% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); } 50% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); } 75% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%); } 100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); } } #xb-loadding { height: 100%; position: fixed; width: 100%; z-index: 999999; top: 0; left: 0; background-color: var(--color-black); position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); z-index: -1; z-index: 999998; transform-origin: right center; pointer-events: none; } #xb-loadding.style2 { background-color: #00061a; } #xb-loadding.xb-loader-marketing { background-color: #121212; } #xb-loadding.xb-loader-business { background-color: #03080B; } #xb-loadding .loading-image { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #xb-loadding .loading-image img { max-height: 80px; } #xb-loadding .xb-dual-ring { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 64px; height: 64px; } #xb-loadding .xb-dual-ring:after { content: " "; display: block; width: 64px; height: 64px; border-radius: 50%; border-width: 4px; border-style: solid; border-right-color: transparent; border-left-color: transparent; animation: xb_dual_ring 1.2s linear infinite; border-bottom-color: var(--color-primary); border-top-color: var(--color-primary); } #xb-loadding .xb-dot-square { display: block; font-size: 13px; width: 2px; height: 2px; position: absolute; top: 50%; left: 50%; background-color: initial; transform: translate(-50%, -50%); animation: stevloader 3s infinite linear; -webkit-animation: stevloader 3s infinite linear; } #xb-loadding .loading-spin { width: 80px; height: 80px; border-radius: 50%; position: relative; animation: xb_dual_ring 1s linear infinite; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } #xb-loadding .loading-spin:before { content: ""; box-sizing: border-box; position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--color-primary); animation: tx_prixClipFix 2s linear infinite; } #xb-loadding .loading-ring { width: 80px; height: 80px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } #xb-loadding .loading-ring:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; -webkit-border-radius: 50%; -khtml-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border-width: 6px; border-style: solid; border-color: var(--color-primary) transparent var(--color-primary) transparent; animation: lds-dual-ring 1.2s linear infinite; } #xb-loadding.xb-loader-law .loading-spin:before { border: 4px solid var(--color-law); } #xb-loadding.xb-loader-ins .loading-spin:before { border: 4px solid var(--color-ins); } #xb-loadding.xb-loader-advisor .loading-spin:before { border: 4px solid var(--color-advisor); } #xb-loadding.xb-loader-marketing .loading-spin:before { border-color: var(--color-marketing); } #xb-loadding.xb-loader-business .loading-spin:before { border-color: var(--color-business); } .mxw_1785 { max-width: 1785px; } .max_1825 { max-width: 1825px; } .header-style-four .main-menu ul li a { padding: 40px 0; } .dm-hero-img { position: absolute; top: 17.5%; right: -10.8%; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .dm-hero-img { max-width: 700px; } } @media (max-width: 1199px) { .dm-hero-img { max-width: 550px; } } @media (max-width: 991px) { .dm-hero-img { max-width: 400px; } } @media (max-width: 767px) { .dm-hero-img { max-width: 200px; } } .dm-hero-content .xb-item--title { font-size: 120px; line-height: 120px; letter-spacing: -3.6px; text-transform: uppercase; padding-left: 16.5%; padding-top: 24%; margin-bottom: 55px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .dm-hero-content .xb-item--title { font-size: 100px; line-height: 110px; } } @media (max-width: 1199px) { .dm-hero-content .xb-item--title { font-size: 80px; line-height: 85px; } } @media (max-width: 991px) { .dm-hero-content .xb-item--title { font-size: 55px; line-height: 59px; } } @media (max-width: 767px) { .dm-hero-content .xb-item--title { font-size: 38px; line-height: 47px; } } .dm-hero-content .xb-item--title span.sp-one { color: var(--color-primary); } .dm-hero-content .xb-item--title span.sp-two { color: #868686; } .dm-hero-content .xb-item--dm-image { top: 11%; position: absolute; left: 79px; z-index: -1; } @media (max-width: 1199px) { .dm-hero-content .xb-item--dm-image { max-width: 185px; } } @media (max-width: 991px) { .dm-hero-content .xb-item--dm-image { max-width: 160px; left: 0; } } @media (max-width: 767px) { .dm-hero-content .xb-item--dm-image { max-width: 70px; } } .dm-hero-content .dm-img { max-width: 250px; } @media (max-width: 991px) { .dm-hero-content .dm-img { max-width: 160px; } } .xb-item--dm-icon { margin-bottom: 9px; } .dm-btn { height: 160px; width: 160px; } .dm-btn .button__bg { background: var(--color-white); } .services-bg::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; top: 0; height: 100%; width: 100%; background: rgba(22, 23, 27, 0.8); mix-blend-mode: luminosity; } .services-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .dm-service-slider { margin: 0 -60px; } @media (max-width: 1199px) { .dm-service-slider { margin: 0; } } .dm-service { position: relative; z-index: 2; padding: 115px 61px; border-right: 1px solid rgba(255, 255, 255, 0.2); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 1199px) { .dm-service { padding: 70px 30px; } } .dm-service::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 56.5%; background: linear-gradient(359deg, #C4EF17 6.31%, rgba(111, 136, 9, 0) 62%); opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: -1; } .dm-service:hover .xb-item--image { filter: grayscale(0); } .dm-service:hover .xb-item--srv_link a span { border: 1px solid var(--color-white); } .dm-service:hover .xb-item--image img { transform: scale(1.1); } .dm-service:hover::before { opacity: 1; visibility: visible; } .dm-service .xb-item--holder { margin-bottom: 50px; } .dm-service .xb-item--title { font-size: 45px; line-height: 55px; letter-spacing: -0.45px; margin-bottom: 23px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .dm-service .xb-item--title { font-size: 38px; line-height: 45px; } } @media (max-width: 1199px) { .dm-service .xb-item--title { font-size: 30px; line-height: 40px; } } .dm-service .xb-item--title a { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: currentColor; } .dm-service .xb-item--content { color: #B2B6B8; } .dm-service .xb-item--image { margin-bottom: 134px; filter: grayscale(100%); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; overflow: hidden; } @media (max-width: 1199px) { .dm-service .xb-item--image { margin-bottom: 30px; } } .dm-service .xb-item--image img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .dm-service .xb-item--srv_link a { color: var(--color-white); display: flex; align-items: center; } .dm-service .xb-item--srv_link a:hover span { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } .dm-service .xb-item--srv_link a span { display: inline-flex; border: 1px solid #16171B; height: 55px; width: 55px; border-radius: 50px; align-items: center; justify-content: center; margin-left: 10px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .section-title .title-dm { margin-left: 27%; } @media (max-width: 991px) { .section-title .title-dm { margin-left: 5%; } } .section-title .title-dm > span { color: var(--color-white); position: relative; display: block; } .section-title .title-dm > span::before { position: absolute; left: -2000px; width: 100%; background-color: #fff; opacity: 0.2; height: 1px; content: ""; bottom: 10px; width: 10000px; z-index: -1; } .section-title .title-dm .sp-one { color: var(--color-primary); } .dm-about--wrapper { border-bottom: 1px solid rgba(255, 255, 255, 0.2); width: 50%; } .dm-about--wrapper .icon { margin-right: 22px; } .dm-about--wrapper .number { font-size: 60px; line-height: 1; letter-spacing: -1.2px; font-weight: 400; margin-bottom: 9px; } .dm-about--wrapper .number .suffix { transform: translateY(5px); position: relative; display: inline-block; padding-left: 19px; } .dm-about--wrapper .content { font-size: 16px; font-weight: 700; color: #FFFFFF; text-transform: uppercase; line-height: 1; } .dm-about--content { max-width: 466px; } .dm-about--image { position: absolute; right: 0; bottom: 0; z-index: -1; height: 91%; height: calc(100% - 9%); width: 49%; filter: grayscale(100%); } .dm-about--button { position: absolute; bottom: 130px; right: 19.9%; } .dm-about--button .about-btn { height: 135px; width: 135px; font-size: 20px; line-height: 30px; } .dm-portfolio:hover .xb-item--holder a { color: var(--color-primary); } .dm-portfolio:hover .xb-item--img img { -webkit-filter: grayscale(0); filter: grayscale(0); } .dm-portfolio .xb-item--img { margin-bottom: 20px; } .dm-portfolio .xb-item--img img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .dm-portfolio .xb-item--title { color: #FFF; font-size: 22px; line-height: 30px; letter-spacing: -0.22px; text-transform: uppercase; padding-bottom: 10px; display: block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .dm-portfolio .xb-item--desig { color: #FFF; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .dm-port-link { color: #FFF; /* font-family: Marcellus;*/ font-size: 22px; line-height: 30px; letter-spacing: -0.22px; text-transform: uppercase; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .dm-port-link:hover { color: var(--color-primary); } .dm-port-link:hover svg { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } .dm-port-link:hover svg path { fill: var(--color-primary); } .dm-port-link svg { margin-left: 20px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .dm-port-link svg path { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .marquee-two .dm-marquee { transform: rotate(0); background: var(--color-primary); } .dm-video { position: absolute; top: 72%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: end; justify-content: center; } .dm-video .play-btn { height: 120px; width: 120px; position: absolute; background: var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .dm-video .dm-text { transform: translateY(47px); font-size: 20px; font-family: var(--font-heading); text-transform: capitalize; color: var(--color-white); } .dm-por-content { max-width: 47%; } @media (max-width: 767px) { .dm-por-content { max-width: 100%; } } .dm-testimonial--quote { height: 60px; width: 60px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; border-radius: 50px; margin-bottom: 20px; } .dm-testimonial--content { line-height: 30px; margin-bottom: 40px; } .dm-testimonial--avater .name { font-size: 20px; line-height: 24px; letter-spacing: -0.2px; text-transform: uppercase; } .dm-testimonial--avater .title { font-size: 16px; line-height: 24px; color: #838383; text-transform: uppercase; } .dm-testimonial-slider { padding-bottom: 100px; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0px 11px; } .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; display: inline-block; border-radius: 50%; background: #FFFFFF; opacity: .3; margin-right: 10px; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .swiper-pagination .swiper-pagination-bullet::before { height: 32px; width: 32px; border-radius: 50px; border: 1px solid var(--color-primary); content: ''; background: transparent; top: -10px; left: -10px; position: absolute; opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; transform: scale(0.5); } .swiper-pagination .swiper-pagination-bullet-active { background: var(--color-primary); opacity: 1; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .swiper-pagination .swiper-pagination-bullet-active::before { opacity: 1; transform: scale(1); } .dm-team-slider { margin: 0 -226px; } @media (max-width: 767px) { .dm-team-slider { margin: 0; } } .dm-team .xb-item--img::before, .dm-team .xb-item--img::after { height: 92.5%; } .instragram-img { border: 2px solid #FFF; } .instragram-img:hover::before { opacity: 1; visibility: visible; } .instragram-img:hover .ins_link { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: .1s; } .instragram-img::before { content: ''; left: 0; top: 0; width: 100%; height: 100%; position: absolute; background: rgba(255, 255, 255, 0.5); opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 1; } .instragram-img img { filter: grayscale(100%); } .instragram-img .ins_link { position: absolute; bottom: 32px; left: 32px; opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 2; transform: translateY(20px); } .dm-footer-newsletter input { background: transparent; font-size: 22px; font-weight: 500; letter-spacing: -0.22px; text-transform: uppercase; color: #DDD; padding: 0; border-bottom: 1px solid #FFF; } .dm-footer-btn { height: 70px; width: 70px; background: #FFF; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; right: -80px; bottom: 0; } .dm-footer-title .sub-title { padding: 0; margin-bottom: 12px; font-size: 22px; font-weight: 500; line-height: 31px; letter-spacing: -0.22px; text-transform: uppercase; } .dm-footer-title .sub-title::before { display: none; } .dm-footer-info { margin-top: -70px; } .dm-footer-info .title { color: #A8A8A8; font-size: 13px; font-weight: 700; line-height: 24px; letter-spacing: 1.3px; margin-bottom: 20px; } .dm-footer-info .content { color: #FFFFFF; font-size: 22px; font-weight: 400; text-transform: uppercase; line-height: 36px; letter-spacing: -0.22px; margin-bottom: 60px; margin-top: 10px; max-width: 270px; } .dm-footer-line { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .dm-footer-nav li:not(:last-child) { margin-right: 18px; } .dm-footer-nav a { color: #DDD; line-height: 28px; text-transform: uppercase; } .dm-footer-language { margin-left: 67px; } .dm-footer-language span { color: #DDD; line-height: 28px; margin-left: 30px; } .dm-footer-language .country { color: var(--color-body); } .social-list li:not(:last-child) { margin-right: 21px; } .social-list li a { font-size: 18px; color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; display: inline-block; } .social-list li a:hover { color: var(--color-primary); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } .dm-footer-bg_icon { position: absolute; opacity: 0.2; bottom: -20px; right: 0; z-index: -1; } .dm-brand { height: 30px; display: flex; align-items: center; justify-content: center; background-color: #000; } .dm-brand a { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; opacity: 0.8; mix-blend-mode: luminosity; display: inline-block; } .dm-brand a:hover { mix-blend-mode: unset; opacity: 1; -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); } .dm-hero-content .xb-item--content { color: var(--color-white); } .dm-service .xb-item--srv_link a span { border: 1px solid #fff; } .instragram-img img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .instragram-img { overflow: hidden; } .instragram-img:hover img { filter: grayscale(0); -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); } .xbh__border-wrap .xbh-col:hover .xbh-h1 { color: var(--color-primary); } .ds-pricing-bottom .xb-item--text a { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: rgba(255, 255, 255, 0.7); } .ds-pricing-bottom .xb-item--text a:hover { color: #fff; text-decoration: underline; } .header-style-five { padding-top: 30px; } @media (max-width: 767px) { .header-style-five { padding-top: 0; } } .nav-ds-link { font-family: var(--font-heading); line-height: 28px; letter-spacing: -0.16px; color: var(--color-white); text-transform: uppercase; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .nav-ds-link:hover { color: var(--color-primary); } .header-menu .ds-header_menu { font-family: var(--font-heading); color: var(--color-white); line-height: 28px; letter-spacing: -0.16px; text-transform: capitalize; margin-left: 9px; } .ds__border-wrap { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 145px; } .ds__border-wrap .ds__border { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; padding: 16px 0; } .ds__border-wrap .ds-col { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.2); flex-direction: column; padding: 50px; height: 699px; width: 620px; } .ds__border-wrap .ds-col:not(:last-child) { margin-right: 30px; } .ds__border-wrap .ds-col:hover .ds-hover-circle { opacity: 1; visibility: visible; transform: scale(1); } .ds__border-wrap .ds-col:hover .sub-title { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: .2s; } .ds__border-wrap .ds-col .title { color: #FFF; font-size: 120px; line-height: 120px; letter-spacing: -3.6px; text-transform: uppercase; } .ds__border-wrap .ds-col .ds-hover-circle { position: absolute; height: 100%; width: 100%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; transform: scale(0.8); } .ds__border-wrap .ds-col .sub-title { color: #FFF; font-size: 22px; line-height: 36px; letter-spacing: -0.22px; text-decoration-line: underline; text-transform: uppercase; transform: translateY(20px); opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .sd-sub_title { display: block; padding-bottom: 16px; font-size: 20px; font-weight: 500; line-height: 30px; text-transform: uppercase; color: #A8A8A8; font-family: var(--font-heading); } .clint-section { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .clint-section-holder .sub-title { text-transform: uppercase; display: block; } .clint-section-holder .content { font-size: 30px; line-height: 40px; letter-spacing: -0.3px; } .clint-section-header { padding-right: 125px; } @media (max-width: 991px) { .clint-section-header { padding: 100px 0; } } .ds-brand-inner .ds-brand { width: 50%; text-align: center; padding: 80px 20px; border: 1px solid #333333; margin-top: -1px; margin-right: -1px; } .ds-brand-inner .ds-brand img { filter: grayscale(100); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-brand-inner .ds-brand a { height: 35px; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-brand-inner .ds-brand a:hover { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .ds-brand-inner .ds-brand a:hover img { filter: grayscale(0); } .circle-reelbox { height: 260px; width: 260px; border-radius: 50%; display: inline-block; } .circle-link { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ds-service { overflow: hidden; background: #1D1D1D; min-height: 420px; padding: 20px 30px; } .ds-service:hover .xb-item--img { -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); } .ds-service:hover .xb-item--title { color: var(--color-primary); } .ds-service:hover .xb-item--title a { background-size: 100% 100%; color: inherit; } .ds-service .xb-item--number { font-size: 20px; font-weight: 500; line-height: 30px; text-transform: uppercase; } .ds-service .xb-item--title { font-size: 30px; line-height: 40px; letter-spacing: -0.3px; position: absolute; bottom: 30px; color: var(--color-white); } .ds-service .xb-item--title a { color: currentColor; } .ds-service .xb-item--img { position: absolute; right: -134px; bottom: -40px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 991px) { .ds-service .xb-item--img0 { max-width: 200px; bottom: 100px; } } @media (max-width: 767px) { .ds-service .xb-item--img0 { right: 0; } } .ds-service .xb-item--img1 { right: 0px; bottom: 0px; } @media (max-width: 991px) { .ds-service .xb-item--img1 { max-width: 200px; bottom: 100px; } } .ds-service .xb-item--img2 { right: -46px; top: 29px; } .ds-service .xb-item--img3 { right: -60px; top: 57px; } .ds-service .xb-item--img4 { right: -39px; top: 70px; } @media (max-width: 991px) { .ds-service .xb-item--img4 { max-width: 300px; } } .ds-btn { line-height: 28px; color: var(--color-primary); border: 1px solid var(--color-primary); padding: 9px 20px; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-btn:hover { color: var(--color-white); border-color: var(--color-white); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } .ds-section-title .sub-title { font-size: 20px; font-weight: 500; line-height: 30px; text-transform: uppercase; margin-bottom: 24px; display: block; } .ds-section-title .title { font-size: 150px; line-height: 150px; letter-spacing: -3px; text-transform: uppercase; position: relative; } @media (max-width: 1199px) { .ds-section-title .title { font-size: 100px; line-height: 120px; } } @media (max-width: 767px) { .ds-section-title .title { font-size: 40px; line-height: 50px; } } .ds-section-title .title::before { position: absolute; width: 100%; height: 1px; content: ''; background: rgba(255, 255, 255, 0.2); top: 21px; left: 0; right: 0; } @media (max-width: 767px) { .ds-section-title .title::before { top: 8px; } } .ds-section-title .title::after { position: absolute; width: 100%; height: 1px; content: ''; background: rgba(255, 255, 255, 0.2); bottom: 22px; left: 0; right: 0; } @media (max-width: 767px) { .ds-section-title .title::after { bottom: 8px; } } .ds-faq-img { position: absolute; left: 0; top: 0; width: 44%; height: 100%; object-fit: cover; } @media (max-width: 991px) { .ds-faq-img { position: unset; width: 100%; height: 500px; } } .faq-wrap { margin-left: 80px; } @media (max-width: 991px) { .faq-wrap { margin-left: 0; margin-top: 30px; } } .faq-wrap .accordion_box .block { border: 1px solid rgba(255, 255, 255, 0.2); padding-left: 20px; margin-bottom: 30px; } .faq-wrap .accordion_box .block:last-child { margin-bottom: 0; } .faq-wrap .accordion_box .block .acc-btn { padding-left: 40px; } .faq-wrap .accordion_box .block .acc-btn::before { position: absolute; top: 39%; transform: rotate(35deg); border: 9px solid transparent; border-top: 14px solid var(--color-white); content: ""; left: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .faq-wrap .accordion_box .block.active-block .acc-btn::before { -webkit-transform: rotate(123deg); -ms-transform: rotate(123deg); transform: rotate(123deg); top: 28%; border-top-color: var(--color-primary); border-top-width: 14px; border-bottom-width: 8px; border-right-width: 8px; } .faq-wrap .acc_body .content { padding-left: 40px; padding-right: 0; } .ds-counter { padding-left: 47px; padding-right: 47px; } .ds-counter .icon { display: flex; margin-right: 22px; } .ds-counter .holder .number { font-size: 60px; line-height: 1; letter-spacing: -1.2px; font-weight: 400; margin-bottom: 9px; } .ds-counter .holder .number .suffix { transform: translateY(5px); position: relative; display: inline-block; padding-left: 19px; } .ds-counter .holder .content { font-size: 16px; font-weight: 700; color: #FFFFFF; text-transform: uppercase; line-height: 1; } .ds-work { border: 1px solid rgba(255, 255, 255, 0.2); padding: 30px 54px 40px 30px; min-height: 590px; display: flex; align-items: end; } @media (max-width: 991px) { .ds-work { min-height: auto; } } @media (max-width: 767px) { .ds-work { padding: 30px 30px 40px 30px; } } .ds-work .xb-item--year { font-size: 20px; font-weight: 500; line-height: 30px; text-transform: uppercase; position: absolute; top: 20px; } .ds-work .xb-item--title { font-size: 30px; line-height: 40px; letter-spacing: -0.3px; margin-bottom: 24px; text-transform: uppercase; color: var(--color-white); } .ds-work .xb-item--title a { color: currentColor; } .ds-work .xb-item--holder { padding-top: 40px; } .ds-work .xb-item--content { padding-right: 20px; } @media (max-width: 767px) { .ds-work .xb-item--content { padding-right: 0; } } .ds-work .xb-item--learn { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 11px; } .ds-work .xb-item--learn:hover span { color: var(--color-primary); } .ds-work .xb-item--learn:hover img { filter: unset; } .ds-work .xb-item--learn span { color: var(--color-white); font-family: Marcellus; font-size: 22px; line-height: 30px; letter-spacing: -0.22px; text-transform: uppercase; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-work .xb-item--learn img { filter: brightness(100); } .work-image { display: inline-flex; } .ds-pricing-plan { background: #1D1D1D; padding: 40px 40px 70px 40px; } .ds-pricing-plan .xb-item--title { font-size: 30px; line-height: 40px; letter-spacing: -0.3px; padding-bottom: 20px; } .ds-pricing-plan .xb-item--content { max-width: 448px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 28px; line-height: 30px; } .ds-pricing-plan .xb-item--list { max-width: 365px; padding-top: 16px; } .ds-pricing-plan .xb-item--list li { color: #FFF; font-size: 12px; font-weight: 500; line-height: 35px; letter-spacing: -0.24px; text-transform: capitalize; padding-left: 25px; width: 50%; display: flex; align-items: center; margin-top: 14px; } .ds-pricing-plan .xb-item--list li::before { height: 18px; width: 18px; border-radius: 50px; content: '\f00c'; font-family: "Font Awesome 5 Pro"; background: #FFFFFF; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; position: absolute; display: flex; align-items: center; justify-content: center; color: #020202; font-size: 8px; } .ds-pricing-info { padding: 29px; background: #1D1D1D; } .ds-pricing-info .xb-item--title { font-size: 22px; font-weight: 500; line-height: 31px; letter-spacing: -0.22px; text-transform: uppercase; padding-bottom: 26px; } .ds-pricing-info .xb-item--number { color: #FFF; font-family: Marcellus; font-size: 60px; line-height: 61.5px; letter-spacing: -1.2px; text-transform: uppercase; display: block; padding-bottom: 10px; } .ds-pricing-info .xb-item--content { max-width: 215px; padding-bottom: 55px; } .ds-pricing-info .xb-item--btn { color: #16171B; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; background: #FFF; padding: 20px; display: block; text-align: center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-pricing-info .xb-item--btn:hover { background-color: var(--color-primary); } .ds-pricing-info.active { background: var(--color-primary); } .ds-pricing-info.active .xb-item--title { color: var(--color-black); } .ds-pricing-info.active .xb-item--content { color: var(--color-black); } .ds-pricing-info.active .xb-item--number { color: var(--color-black); } .ds-pricing-info.active .xb-item--btn { background: #16171B; color: #FFF; } .ds-pricing-info.active .xb-item--btn:hover { background-color: #fff; color: #16171B; } .ds-pricing-bottom .xb-item--line { border: 1px solid rgba(255, 255, 255, 0.2); width: 71%; display: flex; align-items: center; justify-content: center; } .ds-pricing-bottom .xb-item--text { color: rgba(255, 255, 255, 0.7); font-size: 12px; font-weight: 500; line-height: 35px; letter-spacing: -0.24px; text-transform: capitalize; } .ds-testimonial-slider { margin-right: -180px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .ds-testimonial-slider { margin-right: -120px; } } @media (max-width: 1199px) { .ds-testimonial-slider { margin-right: -80px; } } @media (max-width: 991px) { .ds-testimonial-slider { margin-right: 0; } } .ds-testimonial-title .title span { color: var(--color-primary); } .ds-testimonial-title .name { color: #DDD; font-size: 20px; line-height: 24px; letter-spacing: -0.2px; text-transform: uppercase; padding-top: 11px; } .ds-testimonial { border: 1px solid rgba(255, 255, 255, 0.2); padding: 40px 29px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-testimonial:hover { background: #FFF; } .ds-testimonial:hover .xb-item--icon img { filter: brightness(0%); } .ds-testimonial:hover .xb-item--content { color: var(--color-black); } .ds-testimonial:hover .xb-item--name { color: var(--color-black); } .ds-testimonial .xb-item--icon { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-testimonial .xb-item--content { color: #FFF; font-family: Marcellus; font-size: 22px; line-height: 36px; letter-spacing: -0.22px; text-transform: uppercase; padding-top: 20px; margin-bottom: 40px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-testimonial .xb-item--image { margin-right: 14px; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-testimonial .xb-item--name { font-size: 20px; line-height: 24px; letter-spacing: -0.2px; text-transform: uppercase; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-testimonial .xb-item--name span { color: #838383; font-size: 16px; } .ds-blog:hover .xb-item--img img { -webkit-filter: grayscale(0%); filter: grayscale(0%); } .ds-blog .xb-item--img img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ds-blog .xb-item--meta { margin-bottom: 12px; } .ds-blog .xb-item--author { text-transform: uppercase; font-weight: 500; text-transform: uppercase; color: #797979; letter-spacing: -0.01em; } .ds-blog .xb-item--author span { color: #DDDDDD; } .ds-blog .xb-item--date { font-size: 12px; color: #8E8E8E; text-transform: uppercase; } .ds-blog .xb-item--title { font-size: 24px; text-transform: uppercase; color: #fff; margin-bottom: 30px; } .ds-blog .xb-item--title a { color: currentColor; } .ds-brand .ds-brand-name { color: var(--color-white); font-family: Marcellus; font-size: 60px; line-height: 61.5px; letter-spacing: -1.2px; text-transform: uppercase; } .ds-brand .ds-brand-name span { font-size: 20px; color: var(--color-default); font-weight: 500; font-family: var(--font-body); margin-top: -9px; display: block; } .ds-footer-text span { font-weight: 700; line-height: 28px; letter-spacing: 1.6px; text-transform: uppercase; } .xbh-header__inner { flex-direction: column; flex: 1; margin-top: 2rem; display: flex; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 16px; padding-top: 16px; } @media (max-width: 767px) { .xbh-header__inner { flex-wrap: wrap; } } .xbh__image-wrap { position: absolute; top: 0%; bottom: 0%; left: 0%; right: 0%; } .xbh__border-wrap { flex: 1; display: flex; position: relative; margin-left: -1px; } @media (max-width: 767px) { .xbh__border-wrap { flex-wrap: wrap; } } .xbh__border-wrap.is--first { padding-top: 16px; padding-bottom: 16px; } .xbh-image { width: 18vw; padding: 1px; display: none; position: absolute; top: -1.5rem; left: 33.33%; transform: translate(-50%); } @media (max-width: 767px) { .xbh-image { width: 25vw; } } .xbh-image.is--02 { width: 16.5vw; top: -7.5rem; left: 66.66%; transform: translate(50%); } @media (max-width: 1199px) { .xbh-image.is--02 { top: -2.5rem; } } @media (max-width: 767px) { .xbh-image.is--02 { width: 20vw; } } .xbh-image.is--03 { width: 11vw; top: auto; bottom: .25rem; left: 0%; right: auto; transform: none; } @media (max-width: 767px) { .xbh-image.is--03 { width: 18vw; } } .xbh-image.is--04 { width: 13vw; width: 15vw; top: auto; bottom: 0%; left: auto; right: 0%; transform: translate(-100%, 33%); } @media (max-width: 767px) { .xbh-image.is--04 { width: 17vw; } } .xbh__border-wrap .xbh-h1 { letter-spacing: -0.03em; color: var(--color-white); font-size: 120px; font-weight: 300; line-height: 1em; text-transform: uppercase; font-family: var(--font-heading); margin-bottom: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xbh__border-wrap .xbh-h1 { font-size: 80px; } } @media (max-width: 1199px) { .xbh__border-wrap .xbh-h1 { font-size: 60px; } } @media (max-width: 991px) { .xbh__border-wrap .xbh-h1 { font-size: 35px; } } .xbh__border-wrap .xbh-col { border: 1px solid rgba(255, 255, 255, 0.2); flex-direction: column; flex: 1; justify-content: center; align-items: center; padding: 10rem 1.5rem; display: flex; position: relative; min-height: 600px; margin-right: 30px; width: 33.3333%; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xbh__border-wrap .xbh-col { min-height: 480px; } } @media (max-width: 1199px) { .xbh__border-wrap .xbh-col { min-height: 400px; } } @media (max-width: 991px) { .xbh__border-wrap .xbh-col { padding: 4rem 0.5rem; min-height: 340px; } } @media (max-width: 767px) { .xbh__border-wrap .xbh-col { width: 100%; padding: 0; flex: unset; margin-right: 0; min-height: 230px; } } .xbh__border-wrap .xbh-col::before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid rgba(255, 255, 255, 0.2); content: ""; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s; z-index: -1; } .xbh__border-wrap .xbh-col:last-child { margin-right: 0; } .xbh__border-wrap .xbh-col.last-col { border-right-style: none; } .xbh__border-wrap .xbh-content { text-align: center; -webkit-transform: translateY(33px); -ms-transform: translateY(33px); transform: translateY(33px); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xbh-col.last-col { border-right-style: none; } .xbh-header__inner { cursor: url("../img/digital-studio/icon/ds_cursor.svg"), auto; } .xbh__border-wrap .xbh-col:hover .xbh-blurb-inner p { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); transition-delay: .1s; } .xbh__border-wrap .xbh-col:hover .xbh-content { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .xbh__border-wrap .xbh-col:hover::before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xbh-blurb-inner p { color: var(--color-white); font-size: 22px; font-family: var(--font-heading); text-decoration: underline; opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } .feature-bg-black { background-color: var(--color-black); z-index: 1; position: relative; } .xb-feature-item { height: 100%; margin-top: -200px; } .xb-feature-item.item-1 { padding: 55px 30px; } .xb-feature-item.item-1 .xb-feature-thumb { margin-bottom: 40px; } .xb-feature-item.item-2 { padding: 45px 30px; } .xb-feature-item.item-2 .xb-feature-thumb { margin-bottom: 20px; } .xb-feature-item.item-2 .xb-feature-thumb img { border-radius: 8px; } .xb-feature-item.item-3 { padding: 30px 20px; padding-bottom: 45px; } .xb-feature-item.item-3 .xb-feature-thumb { margin-bottom: 30px; } .xb-feature-item.item-4 { padding: 40px 30px; } .xb-feature-item.item-4 .xb-feature-thumb { margin-bottom: 42px; } .xb-feature-capsule-wrapper { position: relative; overflow: hidden; height: 100%; pointer-events: none; height: 700px; } .xb-feature-capsule-wrapper > .xb-feature-capsule-item-wrapper > p { display: inline-block; position: absolute; left: 0; margin-bottom: 0; user-select: none; top: 0; pointer-events: auto; } .xb-feature-capsule-wrapper > .xb-feature-capsule-item-wrapper > p img { padding-bottom: 10px; transition: none; } .xb-feature-capsule-item { display: inline-block; font-size: 20px; text-transform: uppercase; color: #16171B; font-weight: 500; border-radius: 13px; padding: 40px 75px; min-height: 120px; display: flex; align-items: center; justify-content: center; -webkit-transform: translate(-50%, -50%) rotate(0.01rad); -ms-transform: translate(-50%, -50%) rotate(0.01rad); transform: translate(-50%, -50%) rotate(0.01rad); box-shadow: inset 0 4px 15px 0 rgba(255, 255, 255, 0.3); } @media (max-width: 1199px) { .xb-feature-capsule-item { padding: 40px 50px; min-height: auto; } } @media (max-width: 991px) { .xb-feature-capsule-item { padding: 25px 40px; } } @media (max-width: 767px) { .xb-feature-capsule-item { padding: 14px 25px; font-size: 14px; } } .xb-feature-title-sm { font-size: 36px; font-weight: 500; line-height: 1; } .xb-feature-item-sm { padding: 55px 30px; } .xb-feature-content p { color: #5B5B5C; font-size: 16px; font-weight: 400; line-height: 30px; margin-bottom: 0; } .xb-feature-content-title { text-align: center; font-size: 26px; font-weight: 500; line-height: 1; margin-bottom: 0; } .xb-feature-thumb { display: inline-block; } .xb-feature-thumb .img-pos { position: absolute; bottom: 0; right: 20px; height: 110px; width: 110px; } .xb-feature-thumb-text { position: absolute; top: 12px; left: 12px; } .xb-feature-thumb-text p { font-size: 13px; font-weight: 500; line-height: 1; margin-bottom: 0; color: rgba(255, 255, 255, 0.7); } .xb-feature-thumb-text span { font-size: 26px; font-weight: 500; line-height: 1; color: var(--color-white); } .xb-feature-circle-wrap { position: absolute; top: -1px; right: 250px; } .xb-feature-circle-box { display: inline-block; } .xb-feature-circle-box .img-2 { top: -100px; left: 50px; position: absolute; animation: animationglob 10s cubic-bezier(1, 0.99, 0.03, 0.01) infinite; } .ds-border-bottom { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .circle-link { width: 99px; height: 99px; background-color: var(--color-white); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; display: flex; align-items: center; justify-content: center; } .circle-reelbox .play-text { position: absolute; top: 1px; left: 1px; animation: spin 10s infinite linear; -webkit-animation: spin 10s infinite linear; } .circle-reelbox .xb-element-parallax { width: 100%; height: 100%; } .work-image { overflow: hidden; } .work-image img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .work-image:hover img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .br-header_menu { margin-right: 7px; line-height: 28px; color: var(--color-white); letter-spacing: -0.16px; } @media (max-width: 767px) { .hero-three { padding-top: 70px; } } .branding-title .title { font-size: 90px; line-height: 90px; letter-spacing: -2.7px; text-transform: uppercase; padding-top: 72px; } @media (max-width: 1199px) { .branding-title .title { font-size: 60px; line-height: 70px; letter-spacing: -1.7px; } } @media (max-width: 991px) { .branding-title .title { padding-top: 0; } } @media (max-width: 767px) { .branding-title .title { font-size: 50px; line-height: 61px; } } .branding-title .title .sp-one { color: #868686; } .branding-title .title .sp-two { color: var(--color-primary); } .branding-image .xb-item--left_img { padding-top: 55px; padding-left: 90px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .branding-image .xb-item--left_img { padding-left: 0; } } @media (max-width: 1199px) { .branding-image .xb-item--left_img { padding-left: 0; } .branding-image .xb-item--left_img > img { max-width: 200px; } } .branding-image .xb-item--left_img .br-video { position: absolute; bottom: -49px; left: 25.5%; background-color: var(--color-white); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; width: 99px; height: 99px; display: flex; align-items: center; justify-content: center; } .branding-image .xb-item--left_img .play-text { position: absolute; top: 1px; left: 1px; animation: spin 10s infinite linear; -webkit-animation: spin 10s infinite linear; } .branding-image .xb-item--right_img .img1 { position: absolute; right: 0; top: 25px; } @media (max-width: 1199px) { .branding-image .xb-item--right_img .img1 { max-width: 260px; } } @media (max-width: 767px) { .branding-image .xb-item--right_img .img1 { position: unset; } } .branding-image .xb-item--right_img .img2 { position: absolute; top: -34px; right: 63px; z-index: -1; } @media (max-width: 991px) { .branding-image .xb-item--right_img .img2 { top: 50px; } } .branding-content { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 20px 0; margin-top: 67px; } .br-service { background: rgba(33, 34, 39, 0.6); overflow: hidden; padding: 40px 26px; min-height: 370px; } .br-service:hover .xb-item--number { color: var(--color-primary); text-decoration: underline; } .br-service:hover .xb-item--title { color: var(--color-primary); text-decoration: underline; } .br-service:hover .xb-item--star { background: var(--color-primary); } .br-service:hover .xb-item--star img { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } .br-service .xb-item--icon { height: 76px; width: 76px; background: #212227; border-radius: 50px; display: flex; align-items: center; justify-content: center; } .br-service .xb-item--holder { position: absolute; bottom: 50px; display: grid; } .br-service .xb-item--number { font-size: 20px; font-weight: 500; line-height: 30px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .br-service .xb-item--title { font-size: 30px; line-height: 40px; letter-spacing: -0.3px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .br-service .xb-item--star { height: 173px; width: 173px; background: #FFF; border-radius: 50%; position: absolute; top: -50px; right: -60px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .br-service .xb-item--star img { position: absolute; top: 0; right: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .about-branding { display: flex; justify-content: space-between; flex-wrap: wrap; } .about-branding .content { font-size: 30px; line-height: 40px; letter-spacing: -0.3px; max-width: 615px; } .branding-sec-title .sub-title { margin-bottom: 45px; text-transform: capitalize; display: block; } .branding-sec-title .sub-title::after { width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.2); content: ""; position: absolute; bottom: -19px; left: 0; } .branding-sec-title .br-title { font-size: 120px; line-height: 120px; letter-spacing: -2.4px; text-transform: uppercase; } @media (max-width: 991px) { .branding-sec-title .br-title { font-size: 70px; line-height: 110px; } } @media (max-width: 767px) { .branding-sec-title .br-title { font-size: 50px; line-height: 92px; } } .branding-sec-title .br-title .sp-two { color: var(--color-primary); } .branding-sec-title .br-title .sp-one { color: #868686; } .branding-sec-title .br-title .sp-img img { margin-top: -24px; } .branding-sec-title .title { font-size: 60px; line-height: 61.5px; letter-spacing: -1.2px; text-transform: uppercase; } @media (max-width: 991px) { .branding-sec-title .title { font-size: 45px; line-height: 53.5px; letter-spacing: -0.7px; } } @media (max-width: 767px) { .branding-sec-title .title { font-size: 38px; line-height: 50.5px; } } .br-portfolio-inner::before { content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: calc(100% - 30px); width: 1px; background: rgba(255, 255, 255, 0.2); } @media (max-width: 767px) { .br-portfolio-inner::before { display: none; } } .br-portfolio { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 15px; } .br-portfolio:hover .xb-item--img img { -webkit-filter: grayscale(0%); filter: grayscale(0%); } .br-portfolio .xb-item--name { color: #FFF; font-family: Marcellus; font-size: 30px; line-height: 40px; letter-spacing: -0.3px; text-transform: uppercase; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .br-portfolio .xb-item--name:hover { color: var(--color-primary); } .br-portfolio .xb-item--img img { -webkit-filter: grayscale(100%); filter: grayscale(100%); width: 100%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .br-portfolio .xb-item--btn a { color: #FFF; line-height: 30px; padding: 3px 10px; display: inline-block; border: 1px solid #FFF; margin-right: 17px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .br-portfolio .xb-item--btn a:last-child { margin-right: 0; } .br-portfolio .xb-item--btn a:hover { color: var(--color-primary); border: 1px solid var(--color-primary); } .br-search-bar { display: inline-block; padding-top: 10px; } .br-search-bar input { max-width: 447px; width: 100%; height: 70px; background: rgba(255, 255, 255, 0.2); color: #FFF; font-size: 22px; line-height: 30px; letter-spacing: -0.22px; text-transform: uppercase; font-weight: 400; } .br-search-bar input::-webkit-input-placeholder { color: #FFF; opacity: 1; } .br-search-bar input::-moz-placeholder { color: #FFF; opacity: 1; } .br-search-bar input:-ms-input-placeholder { color: #FFF; opacity: 1; } .br-search-bar input:-moz-placeholder { color: #FFF; opacity: 1; } .br-search-bar .btn { padding: 22px 20px; position: absolute; right: 0; background: #FFF; border-radius: 0; } .br-search-bar .btn img { transform: rotate(-40deg); } .branding-brand { margin-top: -250px; z-index: 2; position: relative; } .br-brand { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.2); padding: 62px; height: 40px; } .br-brand a { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .br-brand a:hover { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } .br-brand a img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; filter: grayscale(100); } .br-brand a:hover img { filter: grayscale(0); } .br-footer_top { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .br-footer { padding-left: 35px; padding-top: 120px; padding-bottom: 125px; } .br-footer .xb-item--title { font-size: 60px; line-height: 61.5px; letter-spacing: -1.2px; text-transform: uppercase; padding-bottom: 57px; } .br-footer .xb-item--text { font-size: 13px; font-weight: 700; line-height: 24px; letter-spacing: 1.3px; text-transform: uppercase; display: inline-block; padding-bottom: 27px; } .br-footer .xb-item--info li { list-style: none; color: #FFF; font-family: Marcellus; font-size: 22px; font-weight: 400; line-height: 36px; letter-spacing: -0.22px; text-transform: lowercase; } .br-widget { border-left: 1px solid rgba(255, 255, 255, 0.2); padding-left: 40px; margin-left: -12px; height: 100%; padding-top: 120px; padding-bottom: 125px; } .br-widget .xb-item--sub_title { font-size: 13px; font-weight: 700; line-height: 24px; letter-spacing: 1.3px; text-transform: uppercase; padding-bottom: 25px; display: inline-block; } .br-widget .xb-item--link li { list-style: none; margin-bottom: 8px; } .br-widget .xb-item--link li a { color: #FFF; line-height: 29px; } .widget-right { margin-left: 40px; } .br-bottom-wrapper { margin-left: 35px; border-right: 1px solid rgba(255, 255, 255, 0.2); margin-right: -13px; padding: 27px 0; } .br-bottom-wrapper .xb-item--inner { margin-right: 60px; } .br-bottom-wrapper .xb-item--text { font-size: 13px; font-weight: 700; line-height: 24px; letter-spacing: 1.3px; text-transform: uppercase; } .br-bottom-wrapper .xb-item--text1 { color: #FFF; } .br-bottom-wrapper .xb-item--reveiw i { color: #CC5D3D; } .br-bottom-wrapper .xb-item--text2 { color: #B0B0B0; } .skill-inner { padding-left: 60px; padding-right: 90px; } @media (max-width: 991px) { .skill-inner { padding-left: 0; } } @media (max-width: 767px) { .skill-inner { padding-right: 0; } } .skill-item:not(:last-child) { margin-bottom: 38px; } .skill-item h4 { font-size: 20px; font-weight: 400; text-transform: uppercase; margin-bottom: 21px; } .skill-item .progress { height: 2px; border-radius: 0; position: relative; overflow: visible; border-top: 2px solid rgba(255, 255, 255, 0.2); background-color: transparent; } .skill-item .progress span { right: 0; top: -46px; font-size: 20px; font-family: var(--font-heading); color: var(--color-white); position: absolute; } .skill-item .progress-bar { width: 0; top: -2px; float: left; height: 2px; position: relative; -webkit-transition: 1s all ease-in-out; transition: 1s all ease-in-out; background-color: var(--color-primary); overflow: visible; } .skill-item .progress-bar::before { position: absolute; top: -7px; right: 0; width: 2px; height: 15px; content: ""; background-color: var(--color-primary); } .branding-content .xb-item--content { color: var(--color-white); } .branding-title .title { padding-top: 0; } .sd-about-video { background-color: var(--color-white); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; width: 143px; height: 143px; display: flex; align-items: center; justify-content: center; position: relative; } .sd-about-video .play-text { position: absolute; top: 0px; left: 0px; animation: spin 10s infinite linear; -webkit-animation: spin 10s infinite linear; } .br-hero-content { -webkit-transform: translateY(-45px); -ms-transform: translateY(-45px); transform: translateY(-45px); } .branding-content { margin-top: 50px; } .br-service:hover .xb-item--star { background: var(--color-white); } .br-button { display: inline-block; } .br-hero-arrow { position: absolute; bottom: 39px; right: -135px; } .br-cta-form { padding-left: 24px; margin-right: 32px; } @media (max-width: 991px) { .br-cta-form { margin-bottom: 150px; } } .br-cta-form .field-item { width: 33.33%; padding: 8px; position: relative; } @media (max-width: 991px) { .br-cta-form .field-item { width: 100%; } } .br-cta-form .field-item input, .br-cta-form .field-item textarea { background-color: rgba(255, 255, 255, 0.2); color: #fff; height: 70px; padding: 21px 20px; } .br-cta-form .field-item input::-webkit-input-placeholder, .br-cta-form .field-item textarea::-webkit-input-placeholder { color: #fff; opacity: 1; } .br-cta-form .field-item input::-moz-placeholder, .br-cta-form .field-item textarea::-moz-placeholder { color: #fff; opacity: 1; } .br-cta-form .field-item input:-ms-input-placeholder, .br-cta-form .field-item textarea:-ms-input-placeholder { color: #fff; opacity: 1; } .br-cta-form .field-item input:-moz-placeholder, .br-cta-form .field-item textarea:-moz-placeholder { color: #fff; opacity: 1; } .br-cta-form button { position: absolute; bottom: 13px; right: 0; width: 73px; height: 70px; background-color: var(--color-primary); border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } .br-cta-form button:hover { background-color: var(--color-primary); } .cta-bg::before { bottom: -3px; } .xb-footer-bg { position: relative; } .xb-footer-bg::before { content: ''; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; position: absolute; background: linear-gradient(356deg, #16171B 18.22%, rgba(22, 23, 27, 0.7) 195.47%, rgba(22, 23, 27, 0) 360.67%); z-index: -1; } .xb-footer { border-bottom: 1px solid #2E2E2E; left: 10px; } .xb-footer .xb-item--left { height: 427px; width: 427px; color: black; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-left: 111px; margin-right: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-footer .xb-item--left { margin-left: 70px; } } @media (max-width: 1199px) { .xb-footer .xb-item--left { height: 400px; width: 400px; margin-left: 0; } } @media (max-width: 991px) { .xb-footer .xb-item--left { width: 300px; height: 300px; } } @media (max-width: 767px) { .xb-footer .xb-item--left { width: 200px; height: 200px; } } .xb-footer .xb-item--icon { color: var(--color-black); margin-bottom: 10px; } @media (max-width: 991px) { .xb-footer .xb-item--icon { max-width: 80px; margin-bottom: -5px; } } @media (max-width: 767px) { .xb-footer .xb-item--icon { max-width: 57px; margin-bottom: -13px; } } .xb-footer .xb-item--head { color: var(--color-black); font-size: 60px; line-height: 61px; text-transform: uppercase; font-family: var(--font-heading); } @media (max-width: 991px) { .xb-footer .xb-item--head { font-size: 50px; } } @media (max-width: 767px) { .xb-footer .xb-item--head { font-size: 32px; } } .xb-footer .xb-item--title { color: #A8A8A8; font-size: 13px; font-weight: 700; line-height: 24px; letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 18px; } .xb-footer .xb-item--social { list-style: none; margin-bottom: 60px; } @media (max-width: 991px) { .xb-footer .xb-item--social { margin-bottom: 30px; } } .xb-footer .xb-item--social li { display: inline-block; margin-right: 10px; } .xb-footer .xb-item--social li a { color: #FFFFFF; font-size: 22px; font-weight: 400; text-transform: uppercase; line-height: 36px; letter-spacing: -0.22px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-footer .xb-item--social li a:hover { text-decoration: underline; color: var(--color-primary); } .xb-footer .xb-item--content { color: #FFFFFF; font-size: 22px; font-weight: 400; text-transform: uppercase; line-height: 36px; margin-right: 30px; letter-spacing: -0.22px; margin-bottom: 60px; margin-top: 10px; } @media (max-width: 767px) { .xb-footer .xb-item--content { margin-bottom: 30px; } } .xb-footer .xb-item--con { margin-left: -15px; } @media (max-width: 991px) { .xb-footer .xb-item--con { margin-left: 0; } } .footer-widget .widget-title { color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 15px; } .footer-links li { list-style: none; } .footer-links li:not(:last-child) { margin-bottom: 7px; } .footer-links li a { color: #A8A8A8; font-style: normal; font-size: 16px; line-height: 29px; font-weight: 400; text-transform: capitalize; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .footer-links li a:hover { color: var(--color-primary); } .footer-bottom { padding: 22px 126px; } @media (max-width: 1199px) { .footer-bottom { padding: 22px 0px; } } @media (max-width: 991px) { .footer-bottom { padding: 22px 0px; } } .footer-bottom .copyright a { font-size: 14px; font-weight: 500; line-height: 30px; color: #FFFFFF; list-style: none; } .xb-footer-two { margin-bottom: 120px; padding-right: 65px; } @media (max-width: 767px) { .xb-footer-two { padding-right: 0; margin-bottom: 50px; } } .xb-footer-two .xb-footer-link li { list-style: none; line-height: 31.5px; text-transform: uppercase; } .xb-footer-two .xb-footer-link li:not(:last-child) { margin-bottom: 5px; } .xb-footer-two .xb-footer-link li a { color: #A8A8A8; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-footer-two .xb-footer-link li a:hover { color: var(--color-primary); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); } .footer-sec-three { background: linear-gradient(356deg, #16171B 18.22%, rgba(22, 23, 27, 0.7) 195.47%, rgba(22, 23, 27, 0) 360.67%); } .footer-sec-three .footer-title { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: 1.3px; display: inline-block; } .footer-sec-three .xb-footer-link li { list-style: none; line-height: 31.5px; text-transform: uppercase; } .footer-sec-three .xb-footer-link li a { font-size: 22px; font-weight: 400; letter-spacing: -0.22px; color: #FFF; line-height: 36px; font-family: var(--font-heading); } .footer-sec-three .footer-content { color: #B2B6B8; margin-bottom: 25px; padding-top: 8px; } .footer-sec-three .footer-content a { color: #fff; } .footer { z-index: 1; position: relative; } .xb-footer-inner { margin-top: 10.7%; margin-bottom: -13%; } @media (max-width: 991px) { .xb-footer-inner { padding-top: 100px; margin-top: 20%; margin-bottom: -25%; } } .footer-nav li:not(:last-child) { margin-right: 30px; } .footer-nav li a { color: var(--color-default); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .footer-nav li a:hover { color: var(--color-white); } .footer-newsletter { position: relative; } .footer-newsletter input { background-color: transparent; padding: 0; border-bottom: 1px solid #fff; height: 45px; } .footer-newsletter button { position: absolute; bottom: 4px; right: 0; background-color: transparent; color: var(--color-primary); text-transform: uppercase; display: flex; align-items: center; } .footer-col:nth-child(2) .footer-widget { padding-left: 50px; } @media (max-width: 767px) { .footer-col:nth-child(2) .footer-widget { padding-left: 0; } } .footer-col:nth-child(3) { margin-left: -40px; } @media (max-width: 991px) { .footer-col:nth-child(3) { margin-left: 0; } } .footer-copyright { padding: 30px 0; color: var(--color-white); } .footer-widget .footer-info { font-size: 22px; line-height: 36px; } .footer-style-three .footer-col { border-right: 1px solid rgba(255, 255, 255, 0.2); padding: 0; margin: 0; } @media (max-width: 767px) { .footer-style-three .footer-col { border-right: 0; } } .footer-style-three .footer-col:last-child { border-right: 0; } .footer-style-three .footer-col:nth-child(2) .footer-widget, .footer-style-three .footer-col:nth-child(3) .footer-widget { padding-left: 150px; } @media (max-width: 1199px) { .footer-style-three .footer-col:nth-child(2) .footer-widget, .footer-style-three .footer-col:nth-child(3) .footer-widget { padding-left: 80px; } } @media (max-width: 991px) { .footer-style-three .footer-col:nth-child(2) .footer-widget, .footer-style-three .footer-col:nth-child(3) .footer-widget { padding-left: 50px; } } @media (max-width: 767px) { .footer-style-three .footer-col:nth-child(2) .footer-widget, .footer-style-three .footer-col:nth-child(3) .footer-widget { padding-left: 0; } } @media (max-width: 767px) { .footer-style-three .footer-col:nth-child(1) { padding-top: 50px; } } .footer-style-three .footer-widget { padding-left: 100px; padding-top: 120px; padding-bottom: 120px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .footer-style-three .footer-widget { padding-left: 70px; } } @media (max-width: 1199px) { .footer-style-three .footer-widget { padding-left: 30px; } } @media (max-width: 991px) { .footer-style-three .footer-widget { padding-left: 0; padding-top: 90px; padding-bottom: 80px; } } @media (max-width: 767px) { .footer-style-three .footer-widget { padding-left: 0; padding-top: 0; padding-bottom: 50px; } } .footer-shape .shape { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 991px) { .footer-shape .shape { display: none; } } .footer-shape .shape--1 { left: 6%; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .footer-shape .shape--1 { left: 1%; } } @media (max-width: 1199px) { .footer-shape .shape--1 { left: -1%; } } .footer-shape .shape--1 img { animation: spin 10s infinite linear; -webkit-animation: spin 10s infinite linear; } .footer-shape .shape--2 { right: 6%; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .footer-shape .shape--2 { right: 1%; } } @media (max-width: 1199px) { .footer-shape .shape--2 { right: -1%; } } .footer-shape .shape--2 img { animation: spinrev 10s infinite linear; -webkit-animation: spinrev 10s infinite linear; } /*# sourceMappingURL=main.css.map */