/*----------------------------------------------------------------------------------- Project Name: Aivora - AI Agency & Technology HTML Template Author: XpressBuddy -->> (https://themeforest.net/user/xpressbuddy) Support: support@xpressbuddy.com Description: Aivora - AI Agency & Technology 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. feature 06. about 07. service 08. team 09. testimonial 10. contact 11. blog 12. bramd 13. pricing 14. project 15. cta 16. funfact 17. marquee 18. process 19. banner 20. portfolio 21. accordion 22. mission 23. career 24. shop 25. breadcrumb 26. sidebar 27. backtotop 28. sec-title 29. search 30. mobile-menu 31. 404 32. preloader -----------------------------------------------------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"); :root { --font-body: "DM Sans", sans-serif; --font-heading: 'SportingGrotesque'; --color-primary: #00ff97; --color-secondary: #00020f; --color-heading: #fff; --color-default: #414047; --color-border: #cbcad3; --color-gray: #b2b3b7; --color-white: #fff; --color-black: #000; --color-body: #00020f; --easing: cubic-bezier(0.67, 0.04, 0.3, 0.91); } .ai-marketing { --color-primary: #01ff97; } /* reset css start */ :root { scroll-behavior: auto; } html { scroll-behavior: smooth; } body { padding: 0; margin: 0; font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: -0.01em; position: relative; color: var(--color-white); font-family: var(--font-body); background-color: var(--color-body); } 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; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } a:hover { color: inherit; } select { height: 55px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../img/icon/select-arrow.html); 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; background-color: #F3F4F5; padding: 10px 20px; border: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: var(--color-black); 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: 60px; line-height: 59px; min-height: 60px; 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 #fff; border-right: 1.9px solid #fff; height: 9px; right: 20px; width: 9px; } .nice-select .option { line-height: 38px; min-height: 38px; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: rgba(255, 255, 255, 0.05); } .nice-select.open .list { transform: scale(1) translateY(2px); } .nice-select .list { width: 100%; margin-top: 0; padding: 12px 18px; border-radius: 0 0 5px 5px; -webkit-transform: scale(1) translateY(30px); -ms-transform: scale(1) translateY(30px); transform: scale(1) translateY(30px); -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: #2b3d66; } .nice-select .list li { margin-right: 0 !important; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .nice-select .list .option { color: var(--color-white); font-weight: 500; } .nice-select .list .option.selected { font-weight: 500; } .nice-select .list .option.selected, .nice-select .list .option:hover { border: none !important; } /* global css end */ .body_wrap { position: relative; } .bg_img { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } .white-bg { background: var(--color-white); } .black-bg { background: var(--color-black); } .clr-white { color: var(--color-white) !important; } .clr-black { color: var(--color-black); } .pos-rel { position: relative; } .pos-absolute { position: absolute; } .f-right { float: right; } .mb-5 { margin-bottom: 5px !important; } .mt-5 { margin-top: 5px !important; } .btn-video { width: 100px; height: 100px; z-index: 2; 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: #011689; position: relative; background-color: rgba(255, 255, 255, 0.2); } @media (max-width: 767px) { .btn-video { width: 60px; height: 60px; font-size: 18px; } } .btn-video:hover { color: var(--color-primary); } .btn-video::before, .btn-video::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-color: var(--color-white); animation: push-scale 1500ms ease-out infinite; -webkit-animation: push-scale 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, .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); } .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: #fff; } .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; } .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: 50px; width: 50px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--color-primary); border: 1px solid #EEE5E5; background-color: var(--color-white); -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; 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) { .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-yellow); border-color: var(--color-yellow); } .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; } /*-- - 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; font-weight: 400; line-height: 1.2; letter-spacing: -0.07em; color: var(--color-heading); 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); } } .scale-upOne { animation: scale-upOne 5s linear infinite; } @-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 zoominup { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } @-webkit-keyframes zoominup { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } .zoominup { animation: zoominup 5s linear infinite; } @keyframes zoominup2 { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes zoominup2 { 0% { opacity: 1; } 100% { opacity: 0; } } .zoominup2 { animation: zoominup2 1.5s linear infinite; } @-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); } } @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); } } .updown { animation: updown 3s linear infinite; } @-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); } } .updown-2 { animation: updown-2 2s linear infinite; } @-webkit-keyframes leftRight-animation { 0% { transform: translateX(-20px); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); } 50% { transform: translateX(-10px); -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); } 100% { transform: translateX(-20px); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); } } .leftRight-animation { animation: leftRight-animation 4s linear infinite; } @keyframes leftToRight { 0% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } 100% { transform: translateX(257px); -webkit-transform: translateX(257px); -moz-transform: translateX(257px); -ms-transform: translateX(257px); -o-transform: translateX(257px); } } @keyframes leftToRight { 0% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } 100% { transform: translateX(257px); -webkit-transform: translateX(257px); -moz-transform: translateX(257px); -ms-transform: translateX(257px); -o-transform: translateX(257px); } } @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: translateX(0); } 100% { transform: translateX(-20px); } } .slide-ltr { animation: xb_ltr 5s 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.5; } 100% { transform: scale(1.8); opacity: 0; } } @-webkit-keyframes pulse-border { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes pulse-border-small { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.4); opacity: 0; } } @-webkit-keyframes pulse-border-small { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.4); opacity: 0; } } @keyframes pulse-border-big { 0% { transform: scale(1); opacity: 0.67; } 100% { transform: scale(2.4); opacity: 0; } } @-webkit-keyframes pulse-border-big { 0% { transform: scale(1); opacity: 0.67; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes push-scale-one { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } @-webkit-keyframes push-scale-one { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes push-scale-two { 0% { transform: scale(1); } 100% { transform: scale(2.4); } } @-webkit-keyframes push-scale-two { 0% { transform: scale(1); opacity: 0.67; } 100% { transform: scale(2.4); 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); } } .xbzoominzoomup { animation: xbzoominzoomup 5s linear infinite; } @keyframes rotateme { 0% { transform: rotate(0deg); opacity: 1; } 50% { transform: rotate(-180deg); } 100% { transform: rotate(-360deg); opacity: 1; } } @keyframes rotateme2 { 0% { transform: rotate(0deg); opacity: 1; } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); opacity: 1; } } .rotateme { animation-name: rotateme; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; } .rotateme2 { animation-name: rotateme2; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; } @-webkit-keyframes marquee { from { -webkit-transform: translateY(-50%); transform: translateY(-50%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes marquee { from { -webkit-transform: translateY(-50%); transform: translateY(-50%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } .marquee-first { -webkit-animation: marquee 25s linear infinite; animation: marquee 25s linear infinite; } @-webkit-keyframes marquee2 { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @keyframes marquee2 { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-50%); transform: translateY(-50%); } } .marquee2 { -webkit-animation: marquee2 25s linear infinite; animation: marquee2 25s linear infinite; } @-webkit-keyframes marquee-3 { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-400%); transform: translateX(-400%); } } @keyframes marquee-3 { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-400%); transform: translateX(-400%); } } .marquee-horizontal { -webkit-animation: marquee-3 5s linear infinite; animation: marquee-3 5s linear infinite; } @-webkit-keyframes marquee-4 { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-400%); transform: translateX(-400%); } } @keyframes marquee-3 { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-400%); transform: translateX(-400%); } } .marquee-horizontal-bottom { -webkit-animation: marquee-4 4s linear infinite; animation: marquee-4 6s linear infinite; } .path { stroke-dasharray: 6; stroke-dashoffset: 6; animation: dash 4s linear infinite; } @keyframes dash { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } .path_2 { stroke-dasharray: 6; stroke-dashoffset: 6; animation: dashTwo 4s linear infinite; } @keyframes dashTwo { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } } @keyframes phoneRinging { from { transform: rotate3d(0, 0, 1, 0deg); } 20%, 32%, 44%, 56%, 68% { transform: rotate3d(0, 0, 1, 0deg); } 23%, 35%, 47%, 59%, 71% { transform: rotate3d(0, 0, 1, 15deg); } 26%, 38%, 50%, 62%, 74% { transform: rotate3d(0, 0, 1, 0deg); } 29%, 41%, 53%, 65%, 77% { transform: rotate3d(0, 0, 1, -15deg); } 80% { transform: rotate3d(0, 0, 1, 0deg); } } .phoneRinging { animation: phoneRinging 1.5s infinite linear; } @keyframes ring { 0% { transform: rotate(0) scale(1) skew(1deg); } 10% { transform: rotate(-15deg) scale(1) skew(1deg); } 20% { transform: rotate(30deg) scale(1) skew(1deg); } 30% { transform: rotate(-15deg) scale(1) skew(1deg); } 40% { transform: rotate(30deg) scale(1) skew(1deg); } 100%, 50% { transform: rotate(0) scale(1) skew(1deg); } } @keyframes ring2 { 0% { transform: rotate(0) scale(1) skew(1deg); } 10% { transform: rotate(-15deg) scale(1) skew(1deg); } 20% { transform: rotate(30deg) scale(1) skew(1deg); } 50% { transform: rotate(-15deg) scale(1) skew(1deg); } 70% { transform: rotate(30deg) scale(1) skew(1deg); } 100% { transform: rotate(0) scale(1) skew(1deg); } } @keyframes sliderShape { 0%,100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: translate3d(0, 0, 0) rotateZ(0.01deg); } 34% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform: translate3d(0, 5px, 0) rotateZ(0.01deg); } 50% { transform: translate3d(0, 0, 0) rotateZ(0.01deg); } 67% { border-radius: 100% 60% 60% 100%/100% 100% 60% 60%; transform: translate3d(0, -3px, 0) rotateZ(0.01deg); } } .xb-animetion-right { animation: xb-animetion-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; opacity: 0; } @keyframes xb-animetion-right { 0% { transform: translateX(5%); clip-path: inset(0 0 0 100%); opacity: 0; } 100% { transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } .xb-animetion-left { animation: xb-animetion-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; opacity: 0; } @keyframes xb-animetion-left { 0% { transform: translateX(0); clip-path: inset(0 100% 0 0); opacity: 0; } 100% { transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } .xb-animetion-left-2 { animation: xb-animetion-left-2 2.8s forwards cubic-bezier(0.645, 0.045, 0.355, 1); } @keyframes xb-animetion-left-2 { 0% { transform: translateX(0); clip-path: inset(0 100% 0 0); } 100% { transform: translateX(0); clip-path: inset(0 0 0 0); } } .xb-animetion-top { animation: xb-animetion-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 0; } @keyframes xb-animetion-top { 0% { transform: translateY(-5%); clip-path: inset(0 0 100% 0); opacity: 0; } 100% { transform: translateY(0); clip-path: inset(0 0 0 0); opacity: 1; } } /*-- - 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; } .header-style--one.header-transparent { top: 24px; } .header-style--one .main-menu > ul { gap: 10px; } .header-style--one .main-menu > ul > li.menu-item-has-children > a span::after { position: absolute; margin: 0; bottom: -8px; left: 20px; height: 20px; width: 20px; font-size: 12px; font-weight: 600; padding-top: 2px; display: flex; align-items: center; justify-content: center; border-radius: 100px; background: #15192f; color: var(--color-white); border: 1px solid #373946; } .header-style--one .main-menu > ul > li.menu-item-has-children:hover > .submenu { top: calc(100% + 10px); } .header-style--one .main-menu > ul > li > a { background: #15192f; padding: 4px 20px 6px; border-radius: 23px; -webkit-border-radius: 23px; -moz-border-radius: 23px; -ms-border-radius: 23px; -o-border-radius: 23px; border: 1px solid rgba(255, 255, 255, 0.1); } .header-style--one .main-menu > ul > li:hover > a > span::after, .header-style--one .main-menu > ul > li.active > a > span::after { color: #00020F; background: var(--color-primary); } @media (max-width: 1199px) { .header-style--one .header-btn { display: none; } } .header-style--one .header-btn a { z-index: 3; font-size: 14px; padding: 17px 30px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; color: var(--color-secondary); background: var(--color-primary); } .header-style--one .header-btn a::before { position: absolute; content: ''; height: 100%; width: 100%; left: 0; bottom: 0; z-index: -1; transform: scaleY(0); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; background: var(--color-white); } .header-style--one .header-btn a:hover::before { transform: scaleY(1); } .header-style--one .xb-header-area-sticky { padding: 30px 0; background: var(--color-secondary) !important; } @media (max-width: 767px) { .header-style--one .xb-header-area-sticky { padding: 20px 0; } } .header-style--two .header__wrap { position: relative; padding: 0 7px 0 20px; backdrop-filter: blur(40px); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media (max-width: 991px) { .header-style--two .header__wrap { padding: 10px 20px; } } .header-style--two .header__wrap::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/shape/header-noise.html); background-repeat: no-repeat; background-size: cover; } .header-style--two .header__wrap:after { border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } .header-style--two .main-menu > ul { gap: 30px; } @media (max-width: 1199px) { .header-style--two .main-menu > ul { gap: 25px; } } .header-style--two .header-btn a { gap: 5px; font-size: 14px; padding: 15.5px 30px; } .header-style--two .header-btn a .rotate-icon svg { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .header-style--two .header-btn a:hover .rotate-icon svg { transform: rotate(40deg); } @media (max-width: 991px) { .header-style--two .xb-header-logo { padding-top: 5px; } } @media (max-width: 767px) { .header-style--two .xb-header-logo { max-width: 40%; } } .header-style--two .header-right { gap: 33px; } @media only screen and (max-width: 1023px) { .header-style--two .header-right { gap: 10px; } } @media (max-width: 991px) { .header-style--two .header-right { display: none; } } .header-style--two .xb-header-area-sticky { box-shadow: none; backdrop-filter: blur(40px); background-color: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%) !important; } .header-style--two .xb-header-area-sticky .header__wrap { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; box-shadow: none; background-image: none; } @media (max-width: 991px) { .header-style--two .xb-header-area-sticky .header__wrap { padding: 15px 0; } } .header-style--two .xb-header-area-sticky .header__wrap::after { display: none; } .header-style--two .xb-header-area-sticky .header__wrap::before { background-image: none; } .header-style--two .xb-header-area-sticky .main-menu > ul > li > a { padding: 26px 0px; } @media (max-width: 991px) { .header-style--two .xb-nav-mobile { border-radius: 50px; } } .header-style--three .header__wrap { padding: 0 20px 0 30px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border: 1px solid rgba(255, 255, 255, 0.15); } @media (max-width: 1199px) { .header-style--three .header__wrap { padding: 0 30px; } } @media (max-width: 991px) { .header-style--three .header__wrap { padding: 15px 25px; } } .header-style--three .main-menu ul li a { padding: 30px 0px; } @media (max-width: 1199px) { .header-style--three .header-right { display: none; } } @media (max-width: 991px) { .header-style--three .xb-nav-mobile { border-radius: 0; } } .header-style--three .xb-header-area-sticky .header__wrap { border: none; padding: 15px 0; } /************************ Drop Down menu start *************************/ .language_dropdown { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .language_dropdown > button { gap: 6px; line-height: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: transparent; } .language_dropdown > button i { font-size: 16px; color: #fff; } .language_dropdown > button span { width: 25px; height: 25px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; align-items: center; overflow: hidden; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .language_dropdown > button span img { height: 40px; object-fit: cover; } .language_dropdown .language_dropdown { left: 0; top: 100%; z-index: 1; padding: 6px; display: none; margin-top: 16px; position: absolute; border-radius: 6px; background-color: var(--bs-white); -webkit-box-shadow: 0 30px 50px rgba(0, 0, 0, 0.6); box-shadow: 0 30px 50px rgba(0, 0, 0, 0.6); } .language_dropdown .language_dropdown:before { left: 0; right: 0; top: -16px; content: ""; height: 16px; position: absolute; } .language_dropdown .language_dropdown > ul { width: 180px; display: block; max-height: 240px; overflow-y: scroll; } .language_dropdown .language_dropdown li { gap: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; font-size: 16px; font-weight: 500; padding: 6px 10px; border-radius: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--bs-dark); -webkit-transition: var(--bs-transition); transition: var(--bs-transition); } .language_dropdown .language_dropdown li:hover { cursor: pointer; background-color: rgba(var(--bs-primary-rgb), 0.1); } .language_dropdown .language_dropdown li img { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; width: 28px; } .language_dropdown:hover .language_dropdown { display: block; } .language_dropdown ::-webkit-scrollbar { width: 4px; height: 10px; } .language_dropdown ::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(var(--bs-dark-rgb), 0.4); } /************************ Drop Down menu end *************************/ .side-menu a { display: flex; align-items: center; justify-content: center; position: relative; } .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-transparent { position: absolute; top: 30px; left: 0; right: 0; width: 100%; z-index: 3; } #xb-header-area .xb-header-area-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: 0.6s cubic-bezier(0.23, 0.76, 0.53, 0.99); -o-transition: 0.6s cubic-bezier(0.23, 0.76, 0.53, 0.99); transition: 0.6s cubic-bezier(0.23, 0.76, 0.53, 0.99); visibility: hidden; background-color: #11121d; } #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); } .main-menu { display: flex; align-items: center; flex-grow: 1; } .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 > a { z-index: 4; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; position: relative; padding: 16px 0px; text-decoration: none; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; text-transform: capitalize; color: var(--color-white); font-family: var(--font-body); } .main-menu > ul > li.menu-item-has-children > a span::after { content: '\f107'; font-weight: 500; color: #fff; margin: 1px 0 0 3px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; font-family: "Font Awesome 6 Pro"; } .main-menu > ul > li.menu-item-has-children:hover > .submenu { opacity: 1; visibility: visible; top: calc(100% + 0px); } .main-menu > ul > li:hover > a, .main-menu > ul > li.active > a { color: var(--color-white); } .main-menu > ul > li:hover > a > span::after, .main-menu > ul > li.active > a > span::after { color: var(--color-white); } .main-menu > ul > li .submenu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; min-width: 240px; left: 0; z-index: 3; opacity: 0; padding: 20px 0; text-align: left; list-style: none; visibility: hidden; top: calc(100% + 20px); background: #15192f; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); } .main-menu > ul > li .submenu > li { margin-left: 20px; margin-right: 20px; position: relative; } .main-menu > ul > li .submenu > li:not(:last-child) { margin-bottom: 13px; } .main-menu > ul > li .submenu > li > a { padding: 0 18px; display: inline-block; font-size: 16px; font-weight: 600; letter-spacing: 0; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: transparent; text-transform: capitalize; color: var(--color-heading); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; color: var(--color-white); transform: translateX(-15px); } .main-menu > ul > li .submenu > li > a:after { position: absolute; content: ''; left: 0; top: 45%; height: 2px; width: 10px; opacity: 0; text-decoration: left; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--color-white); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .main-menu > ul > li .submenu > li ul { left: 100%; top: 0px; } .main-menu > ul > li .submenu > li:hover > a, .main-menu > ul > li .submenu > li.active > a { transform: translateX(0); color: var(--color-primary); } .main-menu > ul > li .submenu > li:hover > a::after, .main-menu > ul > li .submenu > li.active > a::after { opacity: 1; background: var(--color-primary); } .main-menu > ul > li .submenu > li:hover > a span::after, .main-menu > ul > li .submenu > li.active > a span::after { color: var(--color-primary) !important; } .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 span::after { position: absolute; top: 0px; right: 15px; content: "\f0d7"; font-size: 16px; font-family: 'Font Awesome 6 Pro'; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; transform: rotate(-90deg); color: var(--color-heading); } .mega_menu_wrapper { width: 100%; left: 0; right: 0; margin: auto; position: fixed; padding: 0 15px; max-width: 1650px; } .mega_menu_wrapper_inner { z-index: 2; padding: 30px; overflow: hidden; padding-bottom: 40px; background: #222746; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); } .mega_menu_wrapper_inner::before { position: absolute; content: ''; left: 0; bottom: -20px; z-index: -1; height: 100%; width: 100%; opacity: 0.9; filter: blur(20.5px); background: linear-gradient(52deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); } .main-menu ul li.megamenu .submenu { padding: 0; background: transparent; box-shadow: none !important; border: none; } .stricked-menu .main-menu ul li.megamenu .submenu { position: fixed; left: 0; right: 0; } .iconbox_block { padding: 50px 50px 42px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 1px 2px 0 rgba(174, 191, 210, 0.3); } .iconbox_block:hover { transform: translateY(-2px); box-shadow: 0 20px 30px 0 rgba(174, 191, 210, 0.3); } .iconbox_block .iconbox_icon { width: 80px; height: 80px; flex: 0 0 auto; margin: 0 0 32px; border-radius: 100%; align-items: center; display: inline-flex; justify-content: center; color: var(--color-primary-two); background-color: var(--bs-primary-bg-subtle); } .iconbox_block .iconbox_icon svg { max-width: 40px; } .iconbox_block .iconbox_title { font-size: 30px; font-weight: 600; line-height: 36px; margin-bottom: 20px; } .iconbox_block p { font-size: 16px; } .iconbox_block.layout_icon_left { padding: 30px; display: inline-flex; align-items: flex-start; border-radius: var(--bs-border-radius); } .iconbox_block.layout_icon_left .iconbox_icon { width: 70px; height: 70px; margin: 0 30px 0 0; border-radius: 10px; } .iconbox_block.layout_icon_left .iconbox_icon svg { max-width: 32px; } .iconbox_block.layout_icon_left .iconbox_title { font-size: 20px; line-height: 28px; margin-bottom: 12px; } .mega_menu_wrapper .iconbox_block_2 { z-index: 1; width: 100%; display: block; line-height: 1.3; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin-bottom: 10px !important; padding: 12px 15px !important; background: #00020f !important; border-radius: 10px !important; -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; -ms-border-radius: 10px !important; -o-border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.25); } .mega_menu_wrapper .iconbox_block_2::after { position: absolute; content: ""; inset: 0; padding: 1px; z-index: -1; opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; background: linear-gradient(52deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .mega_menu_wrapper .iconbox_block_2:hover:after, .mega_menu_wrapper .iconbox_block_2.active:after { opacity: 1; } .mega_menu_wrapper .iconbox_block_2:hover .iconbox_title, .mega_menu_wrapper .iconbox_block_2.active .iconbox_title { color: var(--color-primary); } .mega_menu_wrapper .iconbox_block_2 .icon_title_wrap { gap: 10px; display: flex !important; margin-bottom: 10px; align-items: center; } .mega_menu_wrapper .iconbox_block_2 .iconbox_icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 5px; align-items: center; display: inline-flex; justify-content: center; background-color: rgba(255, 255, 235, 0.15); } .mega_menu_wrapper .iconbox_block_2 .iconbox_icon svg { height: 16px; } .iconbox_block_2 .iconbox_icon img { max-width: 16px; } .mega_menu_wrapper .iconbox_block_2 .iconbox_title { line-height: 1; font-size: 20px; font-weight: 400; margin-top: 3px; color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; font-family: var(--font-heading); } .mega_menu_wrapper .iconbox_block_2 .badge { font-weight: 500; font-size: 12px; color: #ec1a23; margin-left: 5px; padding: 4px 12px; position: relative; text-transform: capitalize; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; background: rgba(236, 26, 36, 0.2); } .mega_menu_wrapper .iconbox_block_2 .badge::before { position: absolute; content: ''; left: -5px; top: 6px; height: 8px; width: 5px; background-image: url(../img/icon/polygon-icon.html); background-repeat: no-repeat; background-size: cover; } .mega_menu_wrapper .iconbox_block_2 .description { font-size: 16px; color: #b2b3b7; font-weight: 400; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .mega_menu_wrapper .iconbox_block_2 .description { font-size: 15px; } } .mega_menu_wrapper .iconbox_block_2:hover { background-color: #E8EFFF; } .review_short_info_2 { display: flex; align-items: center; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border: 1px solid #525568; background-color: rgba(0, 2, 15, 0.3); } .review_short_info_2 .review_admin_logo { height: 52px; width: 110px; flex: 0 0 auto; align-items: center; display: inline-flex; justify-content: center; border-right: 1px solid #525568; } @media (max-width: 1199px) { .review_short_info_2 .review_admin_logo { width: 95px; } } .review_admin_logo img { max-width: 72px; } .review_short_info_2 .review_info_content { flex: 0 0 auto; padding: 2px 25px; } .review_short_info_2 .rating_block { display: flex; align-items: center; list-style: none; margin-bottom: 8px; } .review_short_info_2 .rating_block > li { padding: 0 !important; font-size: 11px; } .review_short_info_2 .review_counter { line-height: 1; font-size: 12px; } .author_box .author_image { flex: 0 0 auto; overflow: hidden; border-radius: 10px 0 0 10px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .author_box .author_image { border-radius: 10px; } } .mega_menu_wrapper .mega_menu_left { margin-left: -55px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .mega_menu_wrapper .mega_menu_left { margin-left: 55px; text-align: center; } } @media (max-width: 1199px) { .mega_menu_wrapper .mega_menu_left { display: grid; gap: 20px; margin-left: 0; grid-template-columns: repeat(2, 1fr); } } .mega_menu_wrapper .author_box { gap: 25px; display: flex; overflow: hidden; align-items: center; background: #00020f; padding: 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .mega_menu_wrapper .author_box { flex-wrap: wrap; justify-content: center; } } .mega_menu_wrapper .author_box:not(:last-child) { margin-bottom: 10px; } @media (max-width: 1199px) { .mega_menu_wrapper .author_box:not(:last-child) { margin-bottom: 0; } } .author_box_content h4 { font-size: 16px; } @media only screen and (max-width: 1023px) { .author_box_content a .text { font-size: 14px; } } @media only screen and (max-width: 1023px) { .author_box_content a .arrow-icon { height: 34px !important; width: 34px !important; } } .author_box_content h3 { line-height: 1.6; font-size: 22px; font-weight: 400; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .author_box_content h3 { font-size: 20px; line-height: 1.4; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .author_box_content h3 { margin-bottom: 20px; } } @media (max-width: 1199px) { .author_box_content h3 { font-size: 20px; line-height: 1.4; } } .mega_menu_wrapper .author_designation { font-size: 12px; } .mega_menu_wrapper .author_designation a { color: var(--color-primary); } .mega_menu_wrapper .author_box p { font-size: 16px; font-weight: 600; line-height: 28px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .mega_menu_wrapper .author_box p { margin-bottom: 20px; } } @media (max-width: 1199px) { .mega_menu_wrapper .author_box p { font-size: 15px; line-height: 26px; } } .megamenu-btn .text { padding: 16.2px 20px !important; } .megamenu-btn .arrow-icon { height: 36px !important; width: 36px !important; } .megamenu-btn .arrow-icon svg { top: 6px !important; left: 5px !important; } .megamenu_pages_wrapper { margin-right: 115px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .megamenu_pages_wrapper { margin-right: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .megamenu_pages_wrapper { margin-right: -30px; } } @media (max-width: 1199px) { .megamenu_pages_wrapper { margin-right: 0; } } .rating_block li { color: #FFB600; line-height: 1.2; font-size: 11px; } .rating_block li:not(:last-child) { margin-right: 4px !important; } .mega_menu_wrapper_inner .btns_group { gap: 30px; display: flex; list-style: none; align-items: center; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .mega_menu_wrapper_inner .btns_group { gap: 30px 60px; justify-content: flex-start; } } @media (max-width: 1199px) { .mega_menu_wrapper_inner .btns_group { gap: 30px 60px; margin-top: 30px; } } .mega_menu_wrapper_inner .btns_group li { padding: 0 !important; } .mega_menu_wrapper .social_area { padding: 70px 0 35px; border-top: 1px solid rgba(255, 255, 255, 0.2); } @media (max-width: 1199px) { .mega_menu_wrapper .social_area { padding: 50px 0 0px; } } .mega_menu_wrapper .social_icons_list { gap: 20px; display: flex; list-style: none; align-items: center; } .social_inner { gap: 30px; } .social_inner span { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; } .mega_menu_wrapper .social_icons_list li a:hover svg path { fill: #00ff97; } .service_link { gap: 30px; display: flex; align-items: center; position: relative; padding: 15px 20px 7px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; justify-content: space-between; background: linear-gradient(61deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); } .service_link .xb-item--holder { gap: 10px; margin-bottom: 7px; } .service_link .xb-item--icon { width: 30px; height: 30px; 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; background: rgba(255, 255, 255, 0.1); } .service_link .xb-item--title { font-size: 20px; letter-spacing: -0.04em; color: var(--color-white); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .service_link .xb-item--title { font-size: 18px; } } .service_link .xb-item--title a { color: currentColor; } .service_link .xb-item--btn { height: 50px; width: 50px; overflow: hidden; position: relative; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; background: var(--color-secondary); } .service_link .xb-item--btn svg { position: absolute; left: 9px; top: 10px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .service_link .xb-item--btn svg:first-child { transform: translate(0); } .service_link .xb-item--btn svg:last-child { transform: translate(-30px, 30px); } .service_link .xb-item--btn svg rect { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .service_link:hover .xb-item--btn svg:nth-child(1) { transform: translate(30px, -30px); } .service_link:hover .xb-item--btn svg:nth-child(2) { transition-delay: .1s; transform: translate(0, 0); } .mega_menu_wrapper .social_icons_list a { width: auto; height: auto; border: none; background: none; font-size: 14px !important; background: none !important; } .mega_menu_wrapper .social_icons_list a:hover i { color: var(--color-primary) !important; } .mega_menu_wrapper .social_icons_list a [class*="fa-facebook"] { color: var(--color-white) !important; } .mega_menu_wrapper .social_icons_list a [class*="fa-twitter"] { color: var(--color-white) !important; } .mega_menu_wrapper .social_icons_list a [class*="fa-linkedin"] { color: var(--color-white) !important; } .mega_menu_wrapper .social_icons_list a [class*="fa-dribbble"] { color: var(--color-white) !important; } .c { padding: 0 50px 85px; margin-top: 67px; } @media (max-width: 1199px) { .c { padding: 0 10px; margin-top: 10px; } } .mega_menu_wrapper .megamenu_widget ul { gap: 29px 22px; flex-direction: column; list-style: none; display: flex; flex-wrap: wrap; } @media (max-width: 1199px) { .mega_menu_wrapper .megamenu_widget ul { gap: 14px 22px; } } .megamenu_widget_wrapper { padding: 0 30px 0 50px; } .mega_menu_wrapper .megamenu_widget ul li { padding: 0 !important; } .mega_menu_wrapper .megamenu_widget ul li a { line-height: 1; padding: 0 !important; font-size: 22px !important; font-weight: 700; display: inline-block !important; color: var(--color-white); } @media (max-width: 1199px) { .mega_menu_wrapper .megamenu_widget ul li a { font-size: 20px !important; } } .mega_menu_wrapper .megamenu_widget ul li a:hover { color: var(--color-primary); } .mega_menu_wrapper .megamenu_widget ul li a:hover, .mega_menu_wrapper .megamenu_widget ul li:hover a { background-color: transparent !important; } .mega_menu_wrapper .megamenu_widget ul li a:hover { color: var(--color-primary) !important; } .stricked-menu .main-menu .megamenu_widget ul li a { padding: 0 !important; } .mega_menu_wrapper .social_icons_list li a svg { height: 14px; width: 14px; } @media screen and (min-width: 992px) { .dropdown:hover > .mega_menu_wrapper { transform: translate(0%, 0px); } } .megamenu_case { padding: 30px 0; margin-left: 36px; height: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .megamenu_case { margin-left: -30px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .megamenu_case { margin-left: -65px; } } @media (max-width: 1199px) { .megamenu_case { margin-left: -30px; } } .megamenu_case .xb-item--inner { height: 100%; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; background-color: var(--color-secondary); } .megamenu_case .xb-item--holder { padding: 30px; } @media only screen and (max-width: 1023px) { .megamenu_case .xb-item--holder { padding: 30px 20px; } } .megamenu_case .xb-item--title { font-size: 22px; letter-spacing: -0.05em; color: var(--color-white); } .megamenu_case .xb-item--text { line-height: 28px; margin: 6px 0 30px; color: var(--color-white); } .megamenu_case .btn:hover { color: var(--color-black) !important; background: var(--color-white) !important; } .megamenu_btn { color: var(--color-white) !important; text-decoration: underline !important; font-size: 18px !important; display: flex !important; gap: 15px; padding: 0 !important; } .megamenu_widget_inner > .row { margin: 0; } @media (max-width: 1199px) { .megamenu_widget_inner > .row { margin: 0; } } .mega_menu_wrapper .row:has(> [class*="col-"] > .megamenu_widget) > [class*="col-"] { padding: 47px 50px 40px; } @media (max-width: 1199px) { .mega_menu_wrapper .row:has(> [class*="col-"] > .megamenu_widget) > [class*="col-"] { padding: 47px 10px 40px 50px; } } .mega_menu_wrapper .row:has(> [class*="col-"] > .megamenu_widget) > [class*="col-"]:not(:last-child) { border-style: solid; border-width: 0 1px 0 0; border-color: rgba(255, 255, 255, 0.2); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .mega_menu_wrapper .row:has(> [class*="col-"] > .megamenu_widget) > [class*="col-"]:not(:last-child) { padding-right: 10px; } } .megamenu-col:nth-child(1) { padding-left: 0 !important; } .mega_menu_box { margin-right: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .mega_menu_box { margin-right: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .mega_menu_box { margin-right: 80px; } } @media (max-width: 1199px) { .mega_menu_box { margin-right: 60px; } } .xb-brand-wrap { position: relative; text-align: center; padding: 20px 30px 55px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(215deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .xb-brand-wrap::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; background-image: url(../img/service/noise.html); background-repeat: no-repeat; background-size: cover; } .xb-brand-item { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .xb-brand-item { max-width: 105px; } } .xb-brand-item:hover { opacity: 0.5; } .xb-brand-inner { gap: 80px; margin-right: 80px; } @media (max-width: 767px) { .xb-brand-inner { gap: 40px; margin-right: 40px; } } .brand-marquee { overflow: hidden; } .brand-sub-title { padding: 6px 39px; text-align: center; position: relative; display: inline-block; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; transform: translateY(-42px); backdrop-filter: blur(40px); background: #0b2336; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } @media (max-width: 767px) { .brand-sub-title { transform: translateY(-67px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .brand-sub-title { transform: translateY(-42px); } } .brand-sub-title::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; background-image: url(../img/brand/noise.html); background-repeat: no-repeat; background-size: cover; } .brand-sub-title p { font-size: 16px; font-weight: 400; padding: 0 16px; position: relative; display: inline-block; letter-spacing: -0.01em; color: var(--color-white); text-transform: capitalize; } .brand-sub-title p::before, .brand-sub-title p::after { position: absolute; content: ''; left: 0; top: 50%; height: 8px; width: 8px; transform: translateY(-50%); border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: var(--color-primary); } .brand-sub-title p::before { left: auto; right: 0; } .brand-sub-title p span { color: var(--color-primary); } .ac-brand-marquee { padding: 36px 0; background: #00020f; position: relative; } .ac-brand-marquee::before, .ac-brand-marquee::after { position: absolute; content: ''; top: 0; left: 0; height: 1px; width: 100%; background: linear-gradient(90deg, rgba(0, 2, 15, 0.01) 0%, rgba(255, 255, 255, 0.3) 52.02%, rgba(0, 2, 15, 0.01) 100%); } .ac-brand-marquee::after { top: auto; bottom: 0; } .ac-brand-inner { gap: 60px; margin-right: 60px; } .ac-brand-inner .xb-brand-item { opacity: 0.5; } .ac-brand-inner .xb-brand-item:hover { opacity: 1; } .brand-sec-title .sub-title span { color: var(--color-primary); } .ai-brand-heading { gap: 30px; flex-wrap: nowrap; } @media (max-width: 767px) { .ai-brand-heading { flex-wrap: wrap; justify-content: center; } } .ai-brand-heading .title { max-width: 900px; } .ai-brand-wrap { min-height: 772px; margin-bottom: 50px; } .ai-brand-content { max-width: 710px; min-height: 772px; margin: 0 auto; z-index: 1; position: relative; padding: 45px 30px 50px; backdrop-filter: blur(40px); background: rgba(17, 18, 29, 0.1); } @media (max-width: 991px) { .ai-brand-content { max-width: 490px; } } @media (max-width: 767px) { .ai-brand-content { padding: 45px 5px 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-brand-content { max-width: 420px; padding: 45px 20px 50px; } } .ai-brand-content::before { position: absolute; content: ''; left: 0; top: 0; z-index: -1; height: 100%; width: 100%; background-image: url(../img/brand/noise02.html); background-position: center center; background-repeat: no-repeat; background-size: cover; } .ai-brand-content .content { font-size: 23px; line-height: 30px; } .ai-brand-inner { margin-top: 40px; padding: 65px 0 75px; border-top: 1px solid rgba(232, 232, 232, 0.2); } .ai-brand-list { width: 50%; } .ai-brand-list li a { font-size: 17px; padding: 8px 0; letter-spacing: -0.02em; position: relative; display: flex; align-items: center; justify-content: space-between; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: rgba(232, 232, 232, 0.2); border-bottom: 1px solid rgba(232, 232, 232, 0.2); } .ai-brand-list li a::before { position: absolute; content: ''; right: 0; top: 50%; height: 6px; width: 6px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; transform: translateY(-50%); background: rgba(232, 232, 232, 0.2); } .ai-brand-list li a svg { opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ai-brand-list li.current a { color: var(--color-white); } .ai-brand-list li.current a svg { opacity: 1; } .ai-brand-logo { width: 50%; padding-top: 14px; } .ai-brand-logo li { display: none; } .ai-brand-logo li img { transition: 0.5s; } @media (max-width: 1199px) { .ai-brand-logo li img { max-width: 55%; } } .ai-brand-logo li.active { display: block; } .background_video { position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; } .background_video video { width: 100%; height: 100%; object-fit: cover; } .xb-industries-item { width: 259px; text-align: center; position: relative; display: inline-block; padding: 25px 10px 30px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media (max-width: 767px) { .xb-industries-item { width: 190px; } } .xb-industries-item:not(:last-child) { margin-right: 20px; } .xb-industries-item::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; background-image: url(../img/service/noise.html); background-repeat: no-repeat; background-size: cover; } .xb-industries-item:hover .xb-icon img { transform-origin: top; animation: ring 1.8s ease-out infinite; } .xb-industries-item .xb-icon { height: 140px; width: 140px; display: flex; align-items: center; justify-content: center; display: inline-flex; margin-bottom: 25px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; background: rgba(0, 2, 15, 0.5); } @media (max-width: 767px) { .xb-industries-item .xb-icon { width: 100px; height: 100px; } } @media (max-width: 767px) { .xb-industries-item .xb-icon img { width: 50%; } } .xb-industries-item .xb-title { font-size: 21px; letter-spacing: -0.03em; } @media (max-width: 767px) { .xb-industries-item .xb-title { font-size: 18px; } } .xb-industries-inner { margin-right: 20px; } .xb-industries-marquee { height: 590px; overflow: hidden; position: relative; margin-bottom: 118px; } @media (max-width: 1199px) { .xb-industries-marquee { margin-bottom: 55px; } } @media (max-width: 991px) { .xb-industries-marquee { margin-bottom: 80px; } } @media (max-width: 767px) { .xb-industries-marquee { height: 420px; margin-bottom: 95px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-industries-marquee { height: 590px; } } .xb-gardiant-shape { position: absolute; z-index: 1; top: 0; left: 14.5%; } @media (max-width: 991px) { .xb-gardiant-shape { left: 17.5%; } } @media (max-width: 767px) { .xb-gardiant-shape { left: 15px; right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-gardiant-shape { left: 32px; } } .xb-gardiant-shape-two { position: absolute; z-index: 2; top: 119px; left: 14.5%; } @media (max-width: 991px) { .xb-gardiant-shape-two { left: 17.5%; } } @media (max-width: 767px) { .xb-gardiant-shape-two { left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-gardiant-shape-two { left: 32px; } } .xb-indus-marquee-inner { gap: 15px; display: flex; flex-direction: column; transform: rotate(-90deg); } .xb-marquee-items { gap: 10px; display: flex; align-items: center; } .xb-marquee-item { display: inline-flex; align-items: center; background: #121420; padding: 2px 10px; white-space: nowrap; backdrop-filter: blur(40px); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } .xb-marquee-item .tag { background: #0c2627; color: var(--color-primary); } .xb-marquee-item .tag.tag-red { color: #FC0159; background: rgba(252, 1, 89, 0.1); } .xb-marquee-item .number { color: #2c32fe; border: 1px solid #181daa; } .xb-marquee-item .number.number-red { color: #FC0159; border: 1px solid #FC0159; } .xb-marquee-item span { font-weight: 600; font-size: 11px; padding: 0px 10px; line-height: 22px; display: inline-block; text-transform: uppercase; border-radius: 11px; -webkit-border-radius: 11px; -moz-border-radius: 11px; -ms-border-radius: 11px; -o-border-radius: 11px; } .xb-marquee-item span:nth-child(1) { margin-right: 5px; } .xb-marquee-item span:nth-child(2) { margin-right: 14px; } .xb-marquee-item p { font-size: 13px; display: ruby; } @media (max-width: 1199px) { .xb-industries-logo { max-width: 73%; margin: 0 auto; } } @media only screen and (max-width: 1023px) { .xb-industries-logo { max-width: 75%; } } @media (max-width: 991px) { .xb-industries-logo { max-width: 52%; } } @media (max-width: 767px) { .xb-industries-logo { max-width: 90%; } } .indu-shape { position: absolute; z-index: -1; left: 50%; bottom: -13px; transform: translateX(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .indu-shape { bottom: -4px; } } @media (max-width: 1199px) { .indu-shape { bottom: -1px; } } @media (max-width: 991px) { .indu-shape { bottom: 12px; } } @media (max-width: 767px) { .indu-shape { left: 0px; bottom: 18px; transform: translateX(20px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .indu-shape { bottom: 2px; transform: translateX(40px); } } @media (max-width: 767px) { .indu-shape img { max-width: 90%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .indu-shape img { max-width: 86%; } } .xb-gradiant-line span { position: absolute; height: 780px; width: 1px; z-index: -1; background: linear-gradient(0deg, rgba(0, 164, 175, 0) 0%, rgba(0, 255, 151, 0.5) 50%, rgba(0, 164, 175, 0) 100%); } @media (max-width: 767px) { .xb-gradiant-line span { display: none; } } .xb-gradiant-line span:nth-child(1) { left: 8%; top: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-gradiant-line span:nth-child(1) { top: 18%; } } @media (max-width: 991px) { .xb-gradiant-line span:nth-child(1) { top: 20%; left: 5%; } } .xb-gradiant-line span:nth-child(2) { top: 21%; left: 18%; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-gradiant-line span:nth-child(2) { top: 30%; } } @media (max-width: 991px) { .xb-gradiant-line span:nth-child(2) { top: 35%; left: 14%; } } .xb-gradiant-line span:nth-child(3) { top: 25px; right: 8%; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-gradiant-line span:nth-child(3) { top: 18%; } } @media (max-width: 991px) { .xb-gradiant-line span:nth-child(3) { top: 20%; right: 5%; } } .xb-gradiant-line span:nth-child(4) { top: 26%; right: 18%; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-gradiant-line span:nth-child(4) { top: 30%; } } @media (max-width: 991px) { .xb-gradiant-line span:nth-child(4) { top: 35%; right: 14%; } } .xb-project-content .xb-item--inner { width: 740px; position: relative; display: inline-block; padding: 55px 45px 60px 65px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(0, 2, 15, 0.6) 0%, rgba(0, 2, 15, 0.6) 100%); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-project-content .xb-item--inner { padding: 55px 45px 60px 60px; } } @media (max-width: 1199px) { .xb-project-content .xb-item--inner { padding: 55px 45px 60px 60px; } } @media (max-width: 991px) { .xb-project-content .xb-item--inner { width: 610px; padding: 55px 45px 60px 60px; } } @media (max-width: 767px) { .xb-project-content .xb-item--inner { width: 310px; padding: 55px 30px 60px; } } @media (max-width: 767px) { .xb-project-content .xb-item--inner { max-width: 100%; padding: 55px 30px 60px; } } .xb-project-content .xb-item--inner::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; background-image: url(../img/project/noise.html); background-repeat: no-repeat; background-size: cover; } .xb-project-content .xb-item--title { font-size: 42px; margin-bottom: 15px; letter-spacing: -0.06em; } @media (max-width: 1199px) { .xb-project-content .xb-item--title { font-size: 38px; } } @media (max-width: 991px) { .xb-project-content .xb-item--title { font-size: 32px; } } @media (max-width: 767px) { .xb-project-content .xb-item--title { font-size: 26px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-project-content .xb-item--title { font-size: 28px; } } .xb-project-content .xb-item--list { gap: 127px; font-size: 18px; font-weight: 500; margin: 33px 0 40px; } @media (max-width: 1199px) { .xb-project-content .xb-item--list { gap: 60px; justify-content: space-between; } } @media (max-width: 991px) { .xb-project-content .xb-item--list { gap: 15px; } } .xb-project-content .xb-item--list span { font-weight: 400; color: var(--color-primary); } .xb-project-content .xb-item--technologie { gap: 53px; } @media (max-width: 767px) { .xb-project-content .xb-item--technologie { gap: 20px; } } .xb-project-content .xb-item--technologie span { font-size: 18px; font-weight: 500; text-transform: capitalize; } .xb-project-content .xb-item--technologie ul { gap: 20px; } .xb-project-content .xb-item--technologie ul li { height: 59px; width: 59px; display: flex; align-items: center; justify-content: center; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; background: var(--color-white); } .xb-project-content .xb-item--btn a .text { padding: 16.2px 20px; } .xb-project-content .xb-item--btn a .arrow { padding: 5px; } .xb-project-content .xb-item--btn a .arrow .arrow-icon { height: 40px; width: 40px; } .xb-project-content .xb-item--btn a .arrow .arrow-icon svg { top: 8px; left: 7px; } .xb-project-wrap { position: relative; } .xb-project-inner { width: 100%; height: 100%; margin-top: -100vh; } .xb-project-item { z-index: 1; display: flex; top: 50px; position: sticky; align-items: center; padding: 100px 190px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-project-item { top: 30px; } } @media (max-width: 1199px) { .xb-project-item { padding: 80px 100px 80px 50px; } } @media (max-width: 991px) { .xb-project-item { top: 40px; } } @media (max-width: 767px) { .xb-project-item { top: 20px; padding: 20px; } } .xb-project-img { z-index: -1; overflow: hidden; position: relative; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } @media (max-width: 1199px) { .xb-project-img { max-width: 760px; } } @media (max-width: 991px) { .xb-project-img { max-width: 645px; } } @media (max-width: 767px) { .xb-project-img { display: none; } } .xb-project-pagination-wrap { z-index: 2; pointer-events: none; flex-direction: column; justify-content: center; align-items: flex-end; min-height: 100vh; display: flex; position: sticky; top: 0; padding-right: 20px; } .xb-project-pagination { gap: 10px; z-index: 1; display: flex; flex-direction: column; } @media (max-width: 767px) { .xb-project-pagination { display: none; } } .xb-project-pagination li { height: 40px; width: 40px; font-size: 20px; font-weight: 700; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-white); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; background: var(--color-secondary); } .xb-project-pagination li::before { position: absolute; content: ''; height: 80%; width: 80%; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.5); } .xb-project-pagination li.active { color: var(--color-primary); } .xb-project-pagination li.active::before { border: 1px solid #00ff97; } .custom-sec-title .title { margin-left: 80px; display: inline !important; } @media (max-width: 767px) { .custom-sec-title .title { margin-left: 40px; } } .custom-sec-title .sub-title { transform: translateY(-10px); } .round-img img { height: 50px; width: 305px; margin-right: 30px; object-fit: cover; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } @media (max-width: 767px) { .round-img img { width: 160px; margin-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .round-img img { width: 305px; } } .xb-heading-btn { transform: translate(35px, -18px); display: inline-block !important; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-heading-btn { transform: translate(0, 0); } } @media (max-width: 1199px) { .xb-heading-btn { transform: translate(0, 0); } } .xb-project-wrap_2 .xb-project-item { top: 0; padding: 0; position: relative; justify-content: start; } .xb-project-wrap_2 .xb-project-item:not(:last-child) { margin-bottom: 100px; } @media (max-width: 767px) { .xb-project-wrap_2 .xb-project-item:not(:last-child) { margin-bottom: 30px; } } .xb-project-wrap_2 .xb-project-item:nth-child(even) .xb-project-content { right: 0; left: auto; } .xb-project-wrap_2 .xb-project-item:nth-child(even) .xb-project-content .xb-item--inner { padding: 55px 60px 60px; } @media (max-width: 991px) { .xb-project-wrap_2 .xb-project-item:nth-child(even) .xb-project-content .xb-item--inner { padding: 40px 30px 45px; } } @media (max-width: 767px) { .xb-project-wrap_2 .xb-project-item:nth-child(even) .xb-project-content .xb-item--inner { padding: 40px 20px 45px; } } .xb-project-wrap_2 .xb-project-item:nth-child(even) .xb-project-content .xb-item--content { max-width: 626px; } .xb-project-wrap_2 .xb-project-item:nth-child(odd) { justify-content: end; } .xb-project-wrap_2 .xb-project-item .xb-project-content { left: 0; position: absolute; } @media (max-width: 767px) { .xb-project-wrap_2 .xb-project-item .xb-project-content { position: relative; } } .xb-project-wrap_2 .xb-project-item .xb-project-content .xb-item--inner { width: 840px; padding: 55px 45px 60px 165px; background: linear-gradient(209deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 100%); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-project-wrap_2 .xb-project-item .xb-project-content .xb-item--inner { width: 790px; padding: 55px 50px 60px; } } @media (max-width: 1199px) { .xb-project-wrap_2 .xb-project-item .xb-project-content .xb-item--inner { width: 730px; padding: 55px 50px 60px; } } @media (max-width: 991px) { .xb-project-wrap_2 .xb-project-item .xb-project-content .xb-item--inner { width: 660px; padding: 40px 30px 45px; } } @media (max-width: 767px) { .xb-project-wrap_2 .xb-project-item .xb-project-content .xb-item--inner { width: 100%; padding: 40px 20px 45px; } } .project-meta { gap: 25px; padding-top: 46px; border-top: 1px solid #40414b; } .project-meta li { gap: 7px; display: flex; flex-wrap: wrap; align-items: center; } @media (max-width: 1199px) { .project-meta li { width: 45%; } } @media (max-width: 767px) { .project-meta li { width: 100%; } } .project-meta li span { margin-right: 8px; color: var(--color-white); text-transform: uppercase; } .project-requerment { max-width: 1064px !important; } @media (max-width: 767px) { .project-details { padding-bottom: 0; } } .ai-project-item { z-index: 1; } @media (max-width: 767px) { .ai-project-item { margin-bottom: 30px; } } .ai-project-item:before { position: absolute; content: ''; left: 0; top: 0; z-index: 1; height: 100%; width: 100%; opacity: 0; background: rgba(0, 2, 15, 0.5); } @media (max-width: 1199px) { .ai-project-item:before { opacity: 1; } } .ai-project-item .ai-portfolio-thumb { position: relative; } @media (max-width: 991px) { .ai-project-item .ai-portfolio-thumb img { object-fit: cover; min-height: 500px; } } .ai-project-item .ai-category { left: 30px; top: 20px; z-index: 1; position: absolute; text-transform: uppercase; color: var(--color-white); } .ai-project-item .ai-category span { color: #01ff97; font-weight: 500; } @media (max-width: 767px) { .ai-project-item .ai-marketing-btn { order: 1; } } .ai-project-content { position: absolute; left: 0; z-index: 1; gap: 30px; width: 100%; bottom: 30px; padding: 0 20px; } @media (max-width: 991px) { .ai-project-content { gap: 20px; } } .ai-project-content .content { font-size: 18px; max-width: 415px; color: var(--color-white); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-project-content .content { max-width: 382px; } } @media (max-width: 1199px) { .ai-project-content .content { text-align: start !important; } } @media (max-width: 991px) { .ai-project-content .content { max-width: 344px; font-size: 16px; } } .ai-project-content .content span { font-weight: 700; color: #ed6d70; text-transform: uppercase; } .ai-project-content .content .text-green { color: #01ff97; } .ai-portfolio-wrap { position: relative; } .ai-portfolio-wrap::before { position: absolute; content: ''; height: 32px; width: 100%; left: 0; z-index: 2; bottom: -30px; background: var(--color-secondary); } .xb-process-step { display: none; overflow: hidden; position: relative; margin-right: 63px; padding: 20px 20px 25px; text-align: center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media (max-width: 991px) { .xb-process-step { margin-right: 285px; } } @media (max-width: 767px) { .xb-process-step { margin-right: 0; } } .xb-process-step::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/process/noise.html); background-repeat: no-repeat; background-size: cover; } .xb-process-step .xb-img { position: relative; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } .xb-process-step .xb-img .step-number { position: absolute; left: 50%; top: 51%; transform: translate(-50%, -50%); font-weight: 400; font-size: 30px; letter-spacing: -0.04em; } .xb-process-step.active { display: block; } .xb-process-step .step-name { font-size: 22px; padding-top: 30px; letter-spacing: -0.04em; } .xb-process-left-container { top: 50px; position: sticky; margin-right: 50px; padding-bottom: 150px; } @media (max-width: 1199px) { .xb-process-left-container { margin-right: 0; } } @media (max-width: 991px) { .xb-process-left-container { padding-bottom: 30px; } } .xb-process-right-container { text-align: end; } @media (max-width: 991px) { .xb-process-right-container { padding-bottom: 150px; } } .process-sction { overflow: clip; position: relative; } .process-sction::before { position: absolute; content: ''; left: -120px; bottom: -217px; height: 310px; width: 112.5%; z-index: 1; filter: blur(35px); background: #00020f; } .process-title .xb-heading-btn { transform: translate(22px, -10px); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .process-title .xb-heading-btn { transform: translate(0, 5px); } } @media (max-width: 1199px) { .process-title .xb-heading-btn { transform: translate(15px, -10px); } } @media only screen and (max-width: 1023px) { .process-title .xb-heading-btn { transform: translate(0, 5px); } } @media (max-width: 991px) { .process-title .xb-heading-btn { transform: translate(25px, -5px); } } @media (max-width: 767px) { .process-title .xb-heading-btn { transform: translate(0, 5px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .process-title .xb-heading-btn { transform: translate(15px, 0px); } } .pricing-list li { gap: 10px; display: flex; font-weight: 500; align-items: center; } @media (max-width: 767px) { .pricing-list li { align-items: start; } } .pricing-list li:not(:last-child) { margin-bottom: 15px; } .pricing-list--right li { max-width: 245px; } @media (max-width: 1199px) { .pricing-list--right li { max-width: 100%; } } .pricing-list-wrap { gap: 15px; } .pricing-item { padding: 50px; position: relative; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } @media (max-width: 1199px) { .pricing-item { padding: 50px 30px; } } .pricing-item::after { z-index: 1 !important; } .pricing-item .xb-dollar { font-size: 44px; margin: 15px 0 25px; letter-spacing: -0.02em; } .pricing-item .xb-dollar sub { font-size: 16px; font-weight: 500; letter-spacing: 0em; margin-left: -12px; bottom: -0.0em; } .pricing-item .xb-icon { margin: -25px 0 0 -28px; } .pricing-item .pricing-btn a { width: 100%; padding: 16.3px 10px; } .pricing-item .xb-tag { position: absolute; right: 50px; top: 50px; font-weight: 500; padding: 0 12px; letter-spacing: -0.02em; text-transform: uppercase; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media (max-width: 767px) { .pricing-item .xb-tag { right: 30px; } } .pricing-item .xb-tag::after { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .pricing-item .xb-tag::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/pricing/tag-noise.html); background-repeat: no-repeat; background-size: cover; } .pricing-item .premium-plan { padding: 0 10px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; color: var(--color-secondary); background: var(--color-primary); } .pricing-item .xb-price-chagne-btn p { gap: 10px; display: flex; align-items: center; font-size: 15px; font-weight: 700; } .pricing-item .toggle { width: 49px; height: 24px; position: relative; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.5); } .pricing-item .toggle::before { position: absolute; content: ''; height: 20px; width: 20px; top: 1px; left: 2px; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; background: var(--color-primary); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .pricing-item .toggle.active::before { left: 25px; } @media (max-width: 991px) { .pricing-sec-title .title { line-height: 1; } } .pricing-sec-title .title img { width: 90px; transform: translateY(-22px); } @media (max-width: 991px) { .pricing-sec-title .title img { width: 65px; transform: translateY(-14px); } } @media (max-width: 767px) { .pricing-sec-title .title img { width: 60px; transform: translateY(-6px); } } @media (max-width: 767px) { .pricing-btn { margin-top: 30px; } } .integration-list li { gap: 10px; display: flex; align-items: center; font-weight: 500; } .integration-list li:not(:last-child) { margin-bottom: 20px; } .integration-logo { height: 110px; width: 110px; padding: 1px; z-index: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; background: var(--color-secondary); } @media (max-width: 767px) { .integration-logo { width: 60px; height: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .integration-logo { width: 90px; height: 90px; } } .integration-logo::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background-image: url(../img/integration/bg.html); background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .integration-logo::after { opacity: 0; position: absolute; content: ''; height: 100%; width: 100%; z-index: -2; top: 0; left: 0; filter: blur(15px); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: linear-gradient(52deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); } @media (max-width: 767px) { .integration-logo img { max-width: 65%; } } .integration-logo:hover::after { opacity: 1; } .integration-logo-wrap { gap: 30px; overflow: hidden; text-align: end; position: relative; max-height: 678px; justify-content: end; } @media (max-width: 991px) { .integration-logo-wrap { justify-content: center; } } @media (max-width: 767px) { .integration-logo-wrap { max-height: 500px; } } .integration-logo-wrap .xb-shape .shape { position: absolute; width: 110%; height: 201px; filter: blur(25px); background: #00020f; } .integration-logo-wrap .xb-shape .shape--1 { left: -30px; top: -90px; } @media (max-width: 767px) { .integration-logo-wrap .xb-shape .shape--1 { left: -17px; } } .integration-logo-wrap .xb-shape .shape--2 { bottom: -52px; left: -30px; } @media (max-width: 767px) { .integration-logo-wrap .xb-shape .shape--2 { left: -17px; } } .comparison-list { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } .comparison-list::after { z-index: 1 !important; } .comparison-list .xb-item--title { padding: 13px 0 6px; text-align: center; letter-spacing: -0.04em; background: #15192f; border-radius: 10px 10px 0 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .comparison-list .xb-item--list { position: relative; padding: 45px 50px 50px; } @media (max-width: 767px) { .comparison-list .xb-item--list { padding: 45px 20px 50px; } } .comparison-list .xb-item--list li { gap: 10px; display: flex; font-weight: 500; align-items: center; } @media (max-width: 1199px) { .comparison-list .xb-item--list li { align-items: start; } } .comparison-list .xb-item--list li:not(:last-child) { margin-bottom: 15px; } .comparison-vs-logo { z-index: 2; top: 50%; right: -40px; height: 52px; width: 52px; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; background: #060E50; letter-spacing: -0.1em; transform: translateY(-50%); position: absolute !important; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; font-family: var(--font-heading); } @media (max-width: 991px) { .comparison-vs-logo { top: auto; bottom: -40px; right: auto; left: 50%; transform: translate(-50%, 0); } } .comparison-vs-logo.xb-border::after { border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .comparison-vs-logo::before { position: absolute; content: ''; left: 0; top: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background: radial-gradient(99.41% 174.01% at -2.12% 64.17%, #00ff97 0%, #00020f 100%); } .comparison-container { padding-top: 42px; } @media (max-width: 991px) { .integration-content { padding-top: 100px; } } .integration-list li { gap: 10px; display: flex; align-items: center; font-weight: 500; } .integration-list li:not(:last-child) { margin-bottom: 20px; } .integration-logo { height: 110px; width: 110px; padding: 1px; z-index: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; background: var(--color-secondary); } @media (max-width: 767px) { .integration-logo { width: 60px; height: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .integration-logo { width: 90px; height: 90px; } } .integration-logo::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background-image: url(../img/integration/bg.html); background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .integration-logo::after { opacity: 0; position: absolute; content: ''; height: 100%; width: 100%; z-index: -2; top: 0; left: 0; filter: blur(15px); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: linear-gradient(52deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); } @media (max-width: 767px) { .integration-logo img { max-width: 65%; } } .integration-logo:hover::after { opacity: 1; } .integration-logo-wrap { gap: 30px; overflow: hidden; text-align: end; position: relative; max-height: 678px; justify-content: end; } @media (max-width: 991px) { .integration-logo-wrap { justify-content: center; } } @media (max-width: 767px) { .integration-logo-wrap { max-height: 500px; } } .integration-logo-wrap .xb-shape .shape { position: absolute; width: 110%; height: 201px; filter: blur(25px); background: #00020f; } .integration-logo-wrap .xb-shape .shape--1 { left: -30px; top: -90px; } @media (max-width: 767px) { .integration-logo-wrap .xb-shape .shape--1 { left: -17px; } } .integration-logo-wrap .xb-shape .shape--2 { bottom: -52px; left: -30px; } @media (max-width: 767px) { .integration-logo-wrap .xb-shape .shape--2 { left: -17px; } } .comparison-list { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } .comparison-list::after { z-index: 1 !important; } .comparison-list .xb-item--title { padding: 13px 0 6px; text-align: center; letter-spacing: -0.04em; background: #15192f; border-radius: 10px 10px 0 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .comparison-list .xb-item--list { position: relative; padding: 45px 50px 50px; } @media (max-width: 767px) { .comparison-list .xb-item--list { padding: 45px 20px 50px; } } .comparison-list .xb-item--list li { gap: 10px; display: flex; font-weight: 500; align-items: center; } @media (max-width: 1199px) { .comparison-list .xb-item--list li { align-items: start; } } .comparison-list .xb-item--list li:not(:last-child) { margin-bottom: 15px; } .comparison-vs-logo { z-index: 2; top: 50%; right: -40px; height: 52px; width: 52px; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; background: #060E50; letter-spacing: -0.1em; transform: translateY(-50%); position: absolute !important; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; font-family: var(--font-heading); } @media (max-width: 991px) { .comparison-vs-logo { top: auto; bottom: -40px; right: auto; left: 50%; transform: translate(-50%, 0); } } .comparison-vs-logo.xb-border::after { border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .comparison-vs-logo::before { position: absolute; content: ''; left: 0; top: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background: radial-gradient(99.41% 174.01% at -2.12% 64.17%, #00ff97 0%, #00020f 100%); } .comparison-container { padding-top: 42px; } @media (max-width: 991px) { .integration-content { padding-top: 100px; } } .download-sec-title { max-width: 550px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .download-sec-title { max-width: 480px; } } @media (max-width: 1199px) { .download-sec-title { max-width: 550px; } } @media (max-width: 991px) { .download-sec-title { max-width: 100%; } } .ai-download-book-list { width: calc(100% - 395px); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .ai-download-book-list { width: calc(100% - 310px); } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-download-book-list { width: calc(100% - 255px); } } @media (max-width: 1199px) { .ai-download-book-list { width: calc(100% - 360px); } } @media (max-width: 991px) { .ai-download-book-list { width: calc(100% - 285px); } } @media (max-width: 767px) { .ai-download-book-list { width: 100%; } } .ai-download-book-list .list a { font-size: 15px; line-height: 1.3; color: #161616; display: flex; align-items: center; padding: 24px 20px 24px 30px; justify-content: space-between; background: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .ai-download-book-list .list a { padding: 24px 15px; } } .ai-download-book-list .list:not(:last-child) { border-bottom: 1px solid #E8E8E8; } .ai-download-book-list .list.current a { background: var(--color-primary); } .ai-download-book .book-item { position: absolute; left: 8%; bottom: 0; opacity: 0; z-index: -1; transform: scaleX(0); transform-origin: left top; } @media only screen and (max-width: 1600px) { .ai-download-book .book-item { left: 12%; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .ai-download-book .book-item { left: 12%; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-download-book .book-item { left: 5%; } } @media (max-width: 1199px) { .ai-download-book .book-item { left: 8%; } } @media (max-width: 991px) { .ai-download-book .book-item { left: 5%; } } @media (max-width: 767px) { .ai-download-book .book-item { top: 0; left: 20%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-download-book .book-item { left: 30%; } } .ai-download-book .book-item.active { opacity: 1; transform: scaleX(1); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .ai-download-wrap { gap: 90px; } @media only screen and (max-width: 1600px) { .ai-download-wrap { flex-wrap: nowrap; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-download-wrap { gap: 20px; } } @media (max-width: 1199px) { .ai-download-wrap { gap: 50px; flex-wrap: wrap; } } .ai-download-inner { z-index: 1; overflow: hidden; position: relative; background: #11121d; justify-content: end; width: calc(100% - 640px); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .ai-download-inner { width: calc(100% - 480px); } } @media (max-width: 1199px) { .ai-download-inner { width: 100%; } } @media (max-width: 767px) { .ai-download-inner { padding-top: 200px; } } .ai-download-inner .bg-shape { position: absolute; left: 0; top: 0; z-index: -1; height: 100%; } .ai-download-inner .bg-shape img { height: 100%; } .award-logo { height: 180px; width: 160px; margin-bottom: 30px; } @media (max-width: 1199px) { .award-logo { width: 140px; height: 160px; } } @media only screen and (max-width: 1023px) { .award-logo { width: 120px; height: 140px; margin-bottom: 20px; } } @media (max-width: 767px) { .award-logo { width: 90px; height: 100px; } } .award-logo::before { background-image: url(../img/award/bg.html); } @media only screen and (max-width: 1023px) { .award-logo img { max-width: 70%; } } @media (max-width: 767px) { .award-logo img { max-width: 60%; } } @media only screen and (max-width: 1023px) { .integration-logo-wrap { gap: 20px; } } .award-gradiant { position: absolute; left: 0; bottom: -10px; height: 100px; width: 100%; background: var(--color-secondary); filter: blur(40px); } .ai-award-wrap { position: relative; padding: 20px 21px 80px; background: #11121d; z-index: 1; } @media (max-width: 767px) { .ai-award-wrap { padding: 20px 10px 80px; } } .ai-award-wrap::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; background-image: url(../img/award/net-img.html); background-size: cover; background-repeat: no-repeat; background-position: center center; } .ai-award-item { gap: 15px; display: flex; align-items: center; flex-wrap: nowrap; position: relative; justify-content: space-between; padding: 60px 30px 60px 37px; background: var(--color-secondary); } @media (max-width: 1199px) { .ai-award-item { padding: 60px 20px 60px; } } @media (max-width: 991px) { .ai-award-item { flex-wrap: wrap; } } @media (max-width: 767px) { .ai-award-item { padding: 60px 10px 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-award-item { padding: 60px 30px 60px; } } .ai-award-item::before { position: absolute; content: ''; left: 0; bottom: 0; height: 3px; width: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: var(--color-primary); } .ai-award-item:not(:last-child) { margin-bottom: 15px; } .ai-award-item:hover::before { width: 100%; } .ai-award-item .xb-item--title { font-size: 30px; line-height: 182%; line-height: 1.5; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-award-item .xb-item--title { font-size: 27px; } } @media (max-width: 1199px) { .ai-award-item .xb-item--title { font-size: 26px; } } @media (max-width: 767px) { .ai-award-item .xb-item--title { font-size: 22px; } } .ai-award-item .xb-item--details { font-weight: 400; font-size: 18px; line-height: 156%; line-height: 1.3; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-award-item .xb-item--details { font-size: 17px; } } @media (max-width: 1199px) { .ai-award-item .xb-item--details { text-align: end; font-size: 17px; } } @media (max-width: 991px) { .ai-award-item .xb-item--details { padding-left: 45px; } } @media (max-width: 767px) { .ai-award-item .xb-item--details { padding-left: 0; text-align: start; } } .ai-award-item .xb-item--details span { font-weight: 700; text-transform: uppercase; } .xb-img-reveal-wrapper__inner { transform: translate(100%, -25%); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-img-reveal-wrapper__inner img { max-width: 50%; } } @media (max-width: 1199px) { .xb-img-reveal-wrapper__inner img { max-width: 50%; } } .xb-image-item .xb-img { overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .career-gallary { gap: 20px; flex-wrap: nowrap; } @media (max-width: 767px) { .career-gallary { flex-wrap: wrap; margin-bottom: 60px; justify-content: center; } } .process-img { text-align: end; margin-right: -86px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .process-img { margin-right: 0; } } @media (max-width: 1199px) { .process-img { margin-right: 0; } } .career-menu { gap: 3px; padding: 7px; display: flex; margin-bottom: 70px; display: inline-flex; justify-content: center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); background: var(--color-secondary); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } .career-menu button { line-height: 1; cursor: pointer; font-size: 16px; font-weight: 600; padding: 16px 30px 13px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; color: var(--color-white); background-color: transparent; } .career-menu button:not(.active):hover { background-color: rgba(255, 255, 255, 0.05); } .career-menu button.active { color: var(--color-secondary); background-color: var(--color-primary); } .xb-career-item { padding: 50px; width: 100%; overflow: hidden; gap: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media (max-width: 767px) { .xb-career-item { padding: 50px 30px; } } .xb-career-item:not(:last-child) { margin-bottom: 20px; } .xb-career-item .xb-item--title { font-size: 28px; margin-bottom: 15px; color: var(--color-white); } @media only screen and (max-width: 1023px) { .xb-career-item .xb-item--title { max-width: 600px; } } @media (max-width: 991px) { .xb-career-item .xb-item--title { font-size: 24px; } } @media (max-width: 767px) { .xb-career-item .xb-item--title { font-size: 22px; } } .xb-career-item .xb-item--title a { color: currentColor; } .xb-career-item .xb-item--holder { gap: 83px; } @media (max-width: 767px) { .xb-career-item .xb-item--holder { gap: 30px; } } .xb-career-item .xb-item--holder li { gap: 9px; display: flex; flex-wrap: wrap; align-items: center; color: var(--color-white); } @media (max-width: 767px) { .xb-career-item .xb-item--holder li { font-size: 16px; } } .xb-video { height: 600px; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } @media (max-width: 767px) { .xb-video { height: 500px; } } .xb-video video { height: 100%; width: 100%; object-fit: cover; } .sec-title .title { display: block; font-size: 62px; font-weight: 400; line-height: 1.5; letter-spacing: -0.08em; color: var(--color-heading); font-family: var(--font-heading); } @media (max-width: 1199px) { .sec-title .title { font-size: 52px; } } @media (max-width: 991px) { .sec-title .title { font-size: 48px; } } @media (max-width: 767px) { .sec-title .title { font-size: 32px; } } .sec-title .title.horizontal-shape img { height: 50px; width: 165px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } .sec-title .title.title-line_height { line-height: 1.3; } .sec-title .sub-title { font-size: 16px; font-weight: 400; padding-left: 16px; position: relative; display: inline-block; letter-spacing: -0.01em; color: var(--color-white); text-transform: capitalize; } .sec-title .sub-title::before, .sec-title .sub-title::after { position: absolute; content: ''; left: 0; top: 50%; height: 8px; width: 8px; transform: translateY(-50%); border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: var(--color-primary); } .sec-title .sub-title::before { display: none; } .sec-title--two .title { line-height: 1.2; } .sec-title--two .sub-title { padding-left: 0; align-items: center; display: inline-flex; text-transform: uppercase; } .sec-title--two .sub-title img:nth-child(1) { margin-right: 10px; } .sec-title--two .sub-title img:nth-child(2) { margin-left: 10px; } .sec-title--two .sub-title::before, .sec-title--two .sub-title::after { display: none; } .sec-title-center .sub-title { padding-right: 16px; } .sec-title-center .sub-title::before { left: auto; right: 0; display: block; } .sec-title-three .sub-title { font-weight: 600; font-size: 16px; padding-left: 21px; position: relative; display: inline-block; letter-spacing: -0.01em; text-transform: uppercase; color: var(--color-white); } .sec-title-three .sub-title::before { position: absolute; content: ''; left: 0; top: 50%; height: 12px; width: 12px; transform: translateY(-50%); background: var(--color-primary); } .sec-title-three .title { font-weight: 400; font-size: 45px; line-height: 1.3; letter-spacing: -0.07em; color: var(--color-white); } @media (max-width: 1199px) { .sec-title-three .title { font-size: 38px; } } @media (max-width: 991px) { .sec-title-three .title { font-size: 33px; } } @media (max-width: 767px) { .sec-title-three .title { font-size: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .sec-title-three .title { font-size: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .about-top-image { gap: 20px; flex-wrap: nowrap; } } @media (max-width: 1199px) { .about-top-image { gap: 20px; flex-wrap: nowrap; } } @media (max-width: 767px) { .about-top-image { flex-wrap: wrap; justify-content: center; } } @media (max-width: 767px) { .about-top-image > div { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-top-image > div { width: 48%; } } @media (max-width: 767px) { .about-top-image .xb-img a img { height: 200px; } } .xb-about-img-wrap { padding: 48px 0 7px; display: inline-block; } .xb-about-img-item { overflow: hidden; border-radius: 500px; -webkit-border-radius: 500px; -moz-border-radius: 500px; -ms-border-radius: 500px; -o-border-radius: 500px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-about-img-item { width: 550px; } } @media (max-width: 1199px) { .xb-about-img-item { width: 450px; } } @media (max-width: 991px) { .xb-about-img-item { width: 350px; } } @media (max-width: 767px) { .xb-about-img-item { width: 250px; } } .about-sec-title { display: flex; align-items: start; justify-content: space-between; } @media (max-width: 1199px) { .about-sec-title { gap: 10px; flex-direction: column; } } .about-sec-title .title { font-size: 52px; line-height: 1.5; max-width: 874px; } @media (max-width: 767px) { .about-sec-title .title { font-size: 36px; } } .about-sec-title .title span { position: relative; display: inline-block; } .about-sec-title .title span img { z-index: -1; } .about-sec-title .title span:nth-child(1) { width: 58px; height: 57px; } .about-sec-title .title span:nth-child(1) img { position: absolute; left: -10px; top: 8px; max-width: 180%; } .about-sec-title .title span:nth-child(2) { width: 116px; height: 80px; margin-top: -20px; } @media (max-width: 767px) { .about-sec-title .title span:nth-child(2) { width: 100px; height: 62px; } } .about-sec-title .title span:nth-child(2) img { position: absolute; top: -5px; left: 5px; } .about-sec-title .title span:nth-child(3) { width: 326px; height: 50px; overflow: hidden; left: 20px; top: 6px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } @media (max-width: 767px) { .about-sec-title .title span:nth-child(3) { width: 160px; left: 10px; top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-sec-title .title span:nth-child(3) { width: 326px; } } .about-sec-title .title span:nth-child(3) img { width: 100%; } .about-top-image .xb-img { overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .about-top-image .xb-video { max-width: 242px; height: 213px; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } @media (max-width: 1199px) { .about-top-image .xb-video { max-width: 183px; } } @media (max-width: 991px) { .about-top-image .xb-video { height: 150px; max-width: 124px; } } @media (max-width: 767px) { .about-top-image .xb-video { height: 200px; max-width: 100%; } } .about-top-image .xb-video video { height: 100%; width: 100%; object-fit: cover; } .about-sec-title-two { display: block; text-align: center; } .about-sec-title-two .title { margin: 0 auto; max-width: 970px; } .about-sec-title-two .title span:nth-child(3) { width: 297px; left: 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-sec-title-two .title span:nth-child(3) { width: 260px; } } .about-sec-title-two .content { max-width: 911px; margin: 0 auto; margin-top: 15px; } .about-bg { position: absolute; left: 0; bottom: 26px; z-index: -1; } @media (max-width: 991px) { .about-bg { bottom: 21%; } } .ai-about-wrap { min-height: 607px; background: #11121d; position: relative; z-index: 1; } @media (max-width: 767px) { .ai-about-wrap { padding: 0 10px; } } .ai-about-wrap::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; background-image: url(../img/about/net-img.html); background-size: cover; background-repeat: no-repeat; background-position: center center; } .ai-about-wrap .down-arrow { position: absolute; bottom: 30px; right: 20px; display: flex; gap: 6px; font-weight: 500; cursor: pointer; align-items: center; text-transform: uppercase; color: var(--color-white); } .ai-circle-img { position: absolute; left: 14.2%; top: -350px; z-index: -1; animation: spin 70s linear infinite; } @media only screen and (max-width: 1600px) { .ai-circle-img { left: 7.2%; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .ai-circle-img { left: 0%; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-circle-img { top: -295px; } } @media (max-width: 1199px) { .ai-circle-img { left: 0; top: -144px; } } @media (max-width: 991px) { .ai-circle-img { top: -42px; } } @media (max-width: 767px) { .ai-circle-img { display: none; } } .ai-about-inner { text-align: center; max-width: 1000px; margin: 0 auto; padding-top: 175px; } @media (max-width: 991px) { .ai-about-inner { padding-top: 160px; } } @media (max-width: 767px) { .ai-about-inner { padding-top: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-about-inner { padding-top: 135px; } } .ai-about-inner .sec-title-three .sub-title { top: 31px; left: 21px; position: absolute; } .ai-about-bottom { gap: 28px; margin-top: 25px; display: inline-flex; } @media (max-width: 991px) { .ai-about-bottom { justify-content: center; } } .ai-about-bottom p { font-size: 20px; line-height: 30px; max-width: 502px; text-align: start; } .xb-service-item { flex: 1; height: 920px; overflow: hidden; position: relative; transition: all 0.6s ease; backdrop-filter: blur(40px); transform-origin: center; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-service-item { height: 800px; } } @media (max-width: 1199px) { .xb-service-item { height: 670px; } } @media (max-width: 767px) { .xb-service-item { height: 635px; width: 100%; flex: unset; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-service-item { height: 810px; } } .xb-service-item::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; background-image: url(../img/service/noise.html); background-repeat: no-repeat; background-size: cover; } .xb-service-item::after { padding: 1px !important; border-radius: 0 !important; } .xb-service-item .xb-item--item { padding: 82px 85px 85px 92px; } @media only screen and (max-width: 1600px) { .xb-service-item .xb-item--item { padding: 82px 45px 85px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-service-item .xb-item--item { padding: 82px 50px 85px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-service-item .xb-item--item { padding: 82px 30px 85px; } } @media (max-width: 1199px) { .xb-service-item .xb-item--item { padding: 82px 30px 85px; } } @media (max-width: 767px) { .xb-service-item .xb-item--item { padding: 82px 20px 85px; } } .xb-service-item .xb-item--title { font-size: 42px; letter-spacing: -0.06em; color: var(--color-white); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-service-item .xb-item--title { max-width: 365px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-service-item .xb-item--title { font-size: 38px; max-width: 350px; } } @media (max-width: 1199px) { .xb-service-item .xb-item--title { font-size: 30px; max-width: 280px; } } @media (max-width: 991px) { .xb-service-item .xb-item--title { max-width: 200px; } } @media (max-width: 767px) { .xb-service-item .xb-item--title { font-size: 26px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-service-item .xb-item--title { font-size: 38px; max-width: 100%; } } .xb-service-item .xb-item--title a { color: currentColor; } .xb-service-item .xb-item--icon { height: 50px; width: 50px; position: absolute; right: 0; top: 0; display: flex; align-items: center; justify-content: center; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; background: var(--color-primary); } @media (max-width: 1199px) { .xb-service-item .xb-item--icon { width: 45px; height: 45px; top: -5px; } } .xb-service-item .xb-item--head-item { opacity: 0; position: relative; visibility: hidden; display: block; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; transform: translateY(30px); } @media (max-width: 767px) { .xb-service-item .xb-item--head-item { opacity: 1; visibility: visible; transform: translateY(0); } } .xb-service-item .xb-item--content { max-width: 446px; margin: 15px 0 32px; display: inline-block; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; transform: translateY(30px); } @media (max-width: 767px) { .xb-service-item .xb-item--content { opacity: 1; visibility: visible; transform: translateY(0); } } .xb-service-item .xb-item--img { overflow: hidden; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; transform: translateY(30px); } @media (max-width: 767px) { .xb-service-item .xb-item--img { opacity: 1; visibility: visible; transform: translateY(0); } } .xb-service-item .xb-item--img img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-service-item.active { flex: 3; transition: all 0.6s ease; } @media (max-width: 767px) { .xb-service-item.active { width: 100%; flex: unset; } } .xb-service-item.active .xb-item--head-item, .xb-service-item.active .xb-item--content, .xb-service-item.active .xb-item--img { opacity: 1; visibility: visible; transform: translateY(0); } .xb-service-item.active .xb-item--head-item { transition-delay: .3s; } .xb-service-item.active .xb-item--content { transition-delay: .4s; } .xb-service-item.active .xb-item--img { transition-delay: .5s; } .xb-service-item.active .service-vertical-text { opacity: 0; visibility: hidden; } .xb-sec-padding { margin-bottom: 55px; } @media (max-width: 1199px) { .xb-sec-padding { margin-bottom: 80px; } } .xb-service-wrap { display: flex; } @media (max-width: 767px) { .xb-service-wrap { flex-wrap: wrap; } } .service-vertical-text { transition: all 0.3s ease; } @media (max-width: 767px) { .service-vertical-text { display: none; } } .service-vertical-text .xb-item--title { top: 4%; left: 11%; width: 100%; display: flex; white-space: nowrap; position: absolute; text-align: center; align-items: center; transform: rotate(-90deg); justify-content: flex-end; transform-origin: bottom right; transform: translateX(-50%) rotate(-90deg); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .service-vertical-text .xb-item--title { left: 18%; } } @media (max-width: 1199px) { .service-vertical-text .xb-item--title { left: 16%; } } .service-vertical-text .xb-icon { position: absolute; height: 50px; width: 50px; left: 50%; bottom: 85px; display: flex; align-items: center; justify-content: center; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; transform: translateX(-50%); background: rgba(0, 2, 15, 0.2); } @media (max-width: 1199px) { .service-vertical-text .xb-icon { bottom: 65px; } } .xb-ser-item { position: relative; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .xb-ser-item::after { border-radius: 0px !important; } .xb-ser-item .xb-item--inner { padding: 50px 50px; } @media (max-width: 1199px) { .xb-ser-item .xb-item--inner { padding: 50px 40px; } } @media (max-width: 991px) { .xb-ser-item .xb-item--inner { padding: 50px 50px; } } @media (max-width: 767px) { .xb-ser-item .xb-item--inner { padding: 50px 30px; } } .xb-ser-item .xb-item--title { font-size: 36px; color: var(--color-white); } @media (max-width: 1199px) { .xb-ser-item .xb-item--title { font-size: 28px; } } @media (max-width: 991px) { .xb-ser-item .xb-item--title { font-size: 36px; } } @media (max-width: 767px) { .xb-ser-item .xb-item--title { font-size: 25px; max-width: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-ser-item .xb-item--title { max-width: 100%; } } .xb-ser-item .xb-item--title a { color: currentColor; } .xb-ser-item .xb-item--icon { position: absolute; right: 50px; top: 50px; height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; background: var(--color-secondary); } @media (max-width: 1199px) { .xb-ser-item .xb-item--icon { width: 45px; height: 45px; } } @media (max-width: 767px) { .xb-ser-item .xb-item--icon { top: 40px; right: 30px; } } .xb-ser-item .xb-item--icon svg rect { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-ser-item .xb-item--content { max-width: 446px; margin: 5px 0 40px; font-size: 16px; line-height: 28px; display: inline-block; color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 1199px) { .xb-ser-item .xb-item--content { max-width: 360px; } } @media (max-width: 991px) { .xb-ser-item .xb-item--content { max-width: 446px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-ser-item .xb-item--content { max-width: 400px; } } .xb-ser-item .xb-item--img { overflow: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-ser-item .xb-item--img img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-ser-item:hover .xb-item--icon { background: var(--color-primary); } .xb-ser-item:hover .xb-item--icon svg rect { fill: var(--color-secondary); } .service-det-img { position: relative; } .service-det-img::before { position: absolute; content: ''; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 2, 15, 0.2); } .service-det-img .btn-video { height: 82px; width: 82px; background: var(--color-white); } @media (max-width: 767px) { .service-det-img .btn-video { height: 52px; width: 52px; } } .service-det-img .btn-video::before { display: block; animation: pulse-border-small 1500ms ease-out infinite; } .service-det-img .btn-video::after { animation: pulse-border 1500ms ease-out infinite; } @media (max-width: 767px) { .service-det-img .btn-video span svg { width: 17px; } } .service-outcome-list { gap: 20px; display: grid; align-items: center; grid-template-columns: repeat(2, 1fr); justify-content: space-between; max-width: 830px; } @media (max-width: 767px) { .service-outcome-list { grid-template-columns: repeat(1, 1fr); } } .service-outcome-list li { display: inline-flex; align-items: center; gap: 15px; font-weight: 500; color: var(--color-white); } .services-outcome-wrap p { max-width: 1174px; } .service-gallary { gap: 30px; flex-wrap: nowrap; } @media (max-width: 767px) { .service-gallary { flex-wrap: wrap; justify-content: center; } } .ai-img-content { padding: 50px 30px 30px; position: absolute; left: 0; bottom: -1px; z-index: 1; opacity: 0; width: 100%; min-height: 234px; overflow: hidden; transform: scaleY(0); transform-origin: bottom; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; background: var(--color-secondary); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .ai-img-content { padding: 50px 20px 20px; min-height: 185px; } } @media (max-width: 1199px) { .ai-img-content { min-height: 120px; padding: 45px 20px 20px; } } @media (max-width: 991px) { .ai-img-content { min-height: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-img-content { min-height: 180px; padding: 45px 10px 20px; } } .ai-img-content::before { position: absolute; content: ''; left: 0; z-index: -1; top: 20px; height: 100%; width: 100%; background: #11121D; } .ai-img-content .title { font-size: 24px; line-height: 1.4; max-width: 250px; margin-bottom: 6px; letter-spacing: -0.1em; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-img-content .title { font-size: 20px; max-width: 210px; } } @media (max-width: 1199px) { .ai-img-content .title { font-size: 18px; max-width: 210px; } } @media (max-width: 991px) { .ai-img-content .title { font-size: 22px; max-width: 250px; } } @media (max-width: 767px) { .ai-img-content .title { max-width: 230px; } } .ai-img-content .content { line-height: 1.2; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-img-content .content { max-width: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-img-content .content { max-width: 200px; } } .ai-img-content .arrow { height: 53px; width: 53px; display: flex; align-items: center; justify-content: center; display: inline-flex; border: 1px solid #262833; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; background: transparent; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; position: absolute; bottom: 30px; right: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .ai-img-content .arrow { height: 43px; width: 43px; bottom: 25px; right: 20px; } } @media (max-width: 1199px) { .ai-img-content .arrow { height: 40px; width: 40px; bottom: 20px; right: 12px; } } @media (max-width: 991px) { .ai-img-content .arrow { right: 21px; } } @media (max-width: 1199px) { .ai-img-content .arrow svg { width: 21px; } } .ai-img-content .arrow svg rect { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ai-img-content .arrow:hover { background: var(--color-primary); } .ai-img-content .arrow:hover svg rect { fill: var(--color-secondary); } .ai-service-heading { gap: 25px; } .ai-service-heading .sec-title-three { max-width: 975px; } .ai-service-heading .content { max-width: 668px; font-size: 20px; } .ai-service-img { gap: 20px; display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 991px) { .ai-service-img { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ai-service-img { grid-template-columns: repeat(1, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-service-img { grid-template-columns: repeat(2, 1fr); } } .ai-service-img-item { z-index: 1; position: relative; } .ai-service-img-item:hover .ai-img-content { opacity: 1; transform: scaleY(1); } .xb-feature-item { position: relative; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } .xb-feature-item .xb-item--inner { padding: 50px 50px 40px 30px; backdrop-filter: blur(40px); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-feature-item .xb-item--inner { padding: 50px 25px 40px 30px; } } @media (max-width: 1199px) { .xb-feature-item .xb-item--inner { padding: 50px 25px 40px; } } @media only screen and (max-width: 1023px) { .xb-feature-item .xb-item--inner { padding: 50px 15px 40px; } } @media (max-width: 991px) { .xb-feature-item .xb-item--inner { padding: 50px 40px 40px 30px; } } @media (max-width: 767px) { .xb-feature-item .xb-item--inner { padding: 50px 30px 40px; } } .xb-feature-item .xb-item--inner::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/feature/noise.html); background-repeat: no-repeat; background-size: cover; } .xb-feature-item .xb-item--icon { height: 100px; width: 100px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 2, 15, 0.3); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } .xb-feature-item .xb-item--icon img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-feature-item .xb-item--title { font-size: 22px; margin: 40px 0 5px; letter-spacing: -0.04em; } @media (max-width: 1199px) { .xb-feature-item .xb-item--title { font-size: 20px; } } .xb-feature-item .xb-item--content { font-size: 16px; color: var(--color-white); } .xb-feature-item:hover .xb-item--icon img { transform: rotateY(180deg); } .xb-feature-left-item { margin-right: 24px; } @media (max-width: 1199px) { .xb-feature-left-item { margin-right: 0; } } @media (max-width: 767px) { .xb-feature-left-item .xb-item--inner { text-align: end; justify-content: start !important; flex-direction: row-reverse; } } .xb-feature-right-item { margin-left: 24px; } @media (max-width: 1199px) { .xb-feature-right-item { margin-left: 0; } } .xb-feature-item2:not(:last-child) { margin-bottom: 82px; } @media (max-width: 991px) { .xb-feature-item2:not(:last-child) { margin-bottom: 30px; } } .xb-feature-item2 .xb-item--inner { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 19px 15px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-feature-item2 .xb-item--inner { padding: 19px 10px; } } @media (max-width: 1199px) { .xb-feature-item2 .xb-item--inner { gap: 14px; padding: 19px 10px; } } .xb-feature-item2 .xb-item--title { margin: 0; font-size: 21px; line-height: 32px; letter-spacing: -0.03em; } @media (max-width: 1199px) { .xb-feature-item2 .xb-item--title { font-size: 19px; } } @media only screen and (max-width: 1023px) { .xb-feature-item2 .xb-item--title { font-size: 17px; } } @media (max-width: 991px) { .xb-feature-item2 .xb-item--title { font-size: 20px; } } @media (max-width: 767px) { .xb-feature-item2 .xb-item--title { font-size: 19px; text-align: left !important; } } .xb-feature-item2 .xb-item--icon { height: 52px; width: 52px; } .xb-feature-item-3 .xb-item--inner { padding: 20px; backdrop-filter: blur(40px); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .xb-feature-item-3 .xb-item--title { font-size: 22px; line-height: 1.3; margin: 30px 0 5px; letter-spacing: -0.04em; } @media (max-width: 991px) { .xb-feature-item-3 .xb-item--title { font-size: 21px; } } .xb-feature-item-3 .xb-img { z-index: 1; position: relative; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-feature-item-3 .xb-img img { width: 100%; } } .xb-feature-item-3 .xb-img .scan-img { position: absolute; left: 0; top: 30px; } .xb-feature-item-3 .xb-img .logo { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); } @media (max-width: 1199px) { .xb-feature-item-3 .xb-img .logo { top: 10%; } } @media (max-width: 767px) { .xb-feature-item-3 .xb-img .logo { top: 14%; max-width: 22%; } } .xb-feature-item-3 .xb-img .logo img { animation: zoominup 5s linear infinite; } .xb-feature-item-3 .xb-img .circle { position: absolute; left: 70px; top: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-feature-item-3 .xb-img .circle { left: 50px; top: 6px; } } @media (max-width: 1199px) { .xb-feature-item-3 .xb-img .circle { left: 42px; top: 6px; max-width: 70%; } } @media only screen and (max-width: 1023px) { .xb-feature-item-3 .xb-img .circle { top: 5px; left: 38px; } } @media (max-width: 991px) { .xb-feature-item-3 .xb-img .circle { left: 45px; } } @media (max-width: 767px) { .xb-feature-item-3 .xb-img .circle { left: 42px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-feature-item-3 .xb-img .circle { left: 20%; top: 30px; width: 60%; } } .xb-feature-item-3 .xb-img .circle img { animation: spin 20s linear infinite; } .xb-feature-item-3 .xb-img .security { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); } @media (max-width: 991px) { .xb-feature-item-3 .xb-img .security { max-width: 110px; } } @media (max-width: 767px) { .xb-feature-item-3 .xb-img .security { width: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-feature-item-3 .xb-img .security { width: 140px; } } .xb-feature-item-3 .xb-img .animated-dot { width: 54%; position: absolute; overflow: hidden; left: 50%; top: 50%; height: 5px; transform: translate(-50%, -50%); } .xb-feature-item-3 .xb-img .dot { top: 50%; left: 0; width: 100%; position: absolute; border: 1px dotted #fff; transform: translateY(-50%); } .xb-feature-item-3 .xb-img .dot span { position: absolute; height: 4px; width: 4px; top: -2px; background: var(--color-white); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; animation: leftToRight 10s linear infinite; } .xb-feature-item-3 .xb-img .dot span:nth-child(1) { animation-delay: 0s; } .xb-feature-item-3 .xb-img .dot span:nth-child(2) { animation-delay: 2s; } .xb-feature-item-3 .xb-img .dot span:nth-child(3) { animation-delay: 4s; } .xb-feature-item-3 .xb-img .dot span:nth-child(4) { animation-delay: 6s; } .xb-feature-item-3 .xb-img .dot span:nth-child(5) { animation-delay: 8s; } .xb-feature-item-3.big-item .xb-item--content { max-width: 703px; } .feature-sec-title .title { line-height: 1.5; margin-left: 105px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .feature-sec-title .title { line-height: 1.3; } } @media (max-width: 991px) { .feature-sec-title .title { margin-left: 50px; } } @media (max-width: 767px) { .feature-sec-title .title { margin-left: 0; } } .feature-sec-title .title img { position: absolute; left: -200px; top: 50%; object-fit: cover; max-width: 230%; transform: translateY(-50%); } .feature-sec-title .title span { height: 50px; width: 305px; overflow: hidden; margin-right: 30px; position: relative; display: inline-block; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } @media (max-width: 767px) { .feature-sec-title .title span { margin-right: 0; } } .feature-sec-title .xb-heading-btn { transform: translate(18px, -15px); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .feature-sec-title .xb-heading-btn { transform: translate(0, 0); } } @media (max-width: 1199px) { .feature-sec-title .xb-heading-btn { transform: translate(0, 0); } } @media (max-width: 767px) { .feature-sec-title .xb-heading-btn { transform: translate(0, 5px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .feature-sec-title .xb-heading-btn { transform: translate(10px, 0); } } .fea-sec-title .title span { height: 80px; width: 60px; position: relative; display: inline-block; } @media (max-width: 767px) { .fea-sec-title .title span { height: 45px; } } .fea-sec-title .title span img { position: absolute; left: -48px; top: 9px; max-width: 160px; } @media (max-width: 767px) { .fea-sec-title .title span img { left: -48px; top: -20px; max-width: 140px; } } .xb-feature-content { margin-right: 50px; } @media (max-width: 1199px) { .xb-feature-content { margin-right: 0; } } .feature-section { min-height: 767px; display: flex; align-items: center; } .xb-feature-shape { position: relative; } @media (max-width: 991px) { .xb-feature-shape { margin: 0 auto; max-width: 330px; margin-top: 30px; } } .xb-feature-shape .shape { position: absolute; left: 0; top: 1px; z-index: -1; height: 100%; width: 100%; } @media (max-width: 1199px) { .xb-feature-shape .shape { top: 12px; } } @media only screen and (max-width: 1023px) { .xb-feature-shape .shape { top: 16px; } } @media (max-width: 991px) { .xb-feature-shape .shape { top: 8px; } } .xb-feature-shape li:not(:first-child) { margin-top: -117px; } @media (max-width: 1199px) { .xb-feature-shape li svg { width: 315px; height: 212px; } } @media only screen and (max-width: 1023px) { .xb-feature-shape li svg { width: 295px; height: 207px; } } @media (max-width: 991px) { .xb-feature-shape li svg { width: 330px; height: 215px; } } .xb-feature-shape li svg path { animation: moveWave 6s linear infinite; transform-origin: center; will-change: stroke-dashoffset; } @keyframes moveWave { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -200; } } .xb-team-item { z-index: 1; position: relative; min-height: 223px; padding: 30px 20px 20px 30px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); background: linear-gradient(209deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-team-item { padding: 30px 20px 20px; } } .xb-team-item .xb-item--img { width: 85px; height: 98px; } .xb-team-item .xb-item--img img { overflow: hidden; transform: scale(1); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; transform-origin: bottom left; } .xb-team-item .xb-item--holder { margin-top: 22px; } .xb-team-item .xb-item--name { font-size: 18px; letter-spacing: -0.04em; text-transform: capitalize; } .xb-team-item .xb-item--desig { font-size: 16px; } .xb-team-item .xb-item--desig span { color: var(--color-primary); } .xb-team-item .xb-item--social { height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; background: var(--color-secondary); } .xb-team-item .xb-item--social i { color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-team-item .xb-item--social::after { z-index: 1; border-radius: inherit; } .xb-team-item .xb-bg { position: absolute; left: 0; top: 0; z-index: -1; height: 100%; width: 100%; } .xb-team-item:hover .xb-item--img img { transform: scale(1.63); } .xb-team-item:hover .xb-item--social { background: var(--color-primary); } .xb-team-item:hover .xb-item--social i { color: var(--color-secondary); } .xb-team-item-big { padding: 50px; } @media (max-width: 1199px) { .xb-team-item-big { padding: 30px; } } .xb-team-item-big .xb-item--img { width: 100%; height: 100%; } @media (max-width: 991px) { .xb-team-item-big .xb-item--img { width: 50%; height: 50%; } } @media (max-width: 767px) { .xb-team-item-big .xb-item--img { width: 35%; height: 35%; } } .xb-team-item-big .xb-item--name { font-size: 32px; } @media (max-width: 1199px) { .xb-team-item-big .xb-item--name { font-size: 26px; } } @media (max-width: 767px) { .xb-team-item-big .xb-item--name { font-size: 22px; } } .xb-team-item-big .xb-item--desig { font-size: 17px; } @media (max-width: 767px) { .xb-team-item-big .xb-item--desig { font-size: 16px; } } .xb-team-item-big .xb-item--holder { gap: 20px; align-items: end; } @media (max-width: 767px) { .xb-team-item-big .xb-item--holder { align-items: center; } } .xb-team-item-big .xb-item--social { height: 84px; width: 84px; } @media (max-width: 1199px) { .xb-team-item-big .xb-item--social { height: 74px; width: 74px; } } @media (max-width: 767px) { .xb-team-item-big .xb-item--social { height: 54px; width: 54px; } } .xb-team-item-big .xb-item--social i { font-size: 32px; } @media (max-width: 1199px) { .xb-team-item-big .xb-item--social i { font-size: 24px; } } @media (max-width: 767px) { .xb-team-item-big .xb-item--social i { font-size: 20px; } } .xb-team-item-big:hover .xb-item--img img { transform: scale(1.4); } .single-item-image { overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .single-item-image img { width: 100%; } .details-content-title { font-weight: 400; font-size: 42px; line-height: 52px; letter-spacing: -0.03em; } @media (max-width: 991px) { .details-content-title { font-size: 38px; } } @media (max-width: 767px) { .details-content-title { font-size: 26px; line-height: 40px; } } .details-title { font-size: 36px; line-height: 46px; letter-spacing: -0.03em; } @media (max-width: 991px) { .details-title { font-size: 32px; } } @media (max-width: 767px) { .details-title { font-size: 26px; line-height: 38px; } } .xb-details-content li { letter-spacing: -0.01em; } .xb-details-content li:not(:last-child) { margin-bottom: 10px; } .xb-details-content li span { color: var(--color-white); } .content-list { padding-left: 25px; } .cp-details-wrap { position: relative; padding: 45px 126px 25px 80px; } @media (max-width: 991px) { .cp-details-wrap { padding: 45px 50px 25px; } } @media (max-width: 767px) { .cp-details-wrap { padding: 45px 10px 25px; } } .cp-details-wrap::before, .cp-details-wrap::after { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 1px; background: linear-gradient(180deg, #00020f 0%, rgba(0, 2, 15, 0.46) 4.31%, rgba(255, 255, 255, 0.2) 44.6%, rgba(255, 255, 255, 0.07) 80.86%, rgba(0, 2, 15, 0.2) 100%); } .cp-details-wrap::after { left: auto; right: 0; } .blog-slide-item { position: relative; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; z-index: 1; } .blog-slide-item:hover .xb-item--img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .blog-slide-item .xb-item--holder { max-width: 960px; position: absolute; left: 46px; bottom: 45px; z-index: 2; } @media (max-width: 991px) { .blog-slide-item .xb-item--holder { bottom: 20px; padding-right: 80px; } } @media (max-width: 767px) { .blog-slide-item .xb-item--holder { left: 30px; padding-right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-slide-item .xb-item--holder { bottom: 45px; padding-right: 40px; } } .blog-slide-item .xb-item--img img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .blog-slide-item .xb-item--img { height: 600px; } .blog-slide-item .xb-item--img img { height: 100%; object-fit: cover; } } .blog-slide-item .xb-item--tag { padding: 4px 10px 5px; font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--color-white); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; background: var(--color-secondary); } @media (max-width: 991px) { .blog-slide-item .xb-item--tag { font-size: 14px; } } .blog-slide-item .xb-item--tag::after { z-index: 1; top: -1px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .blog-slide-item .xb-item--title { font-weight: 400; font-size: 42px; line-height: 1.23; letter-spacing: -0.03em; margin: 45px 0 15px; color: var(--color-white); } @media (max-width: 1199px) { .blog-slide-item .xb-item--title { font-size: 39px; } } @media (max-width: 991px) { .blog-slide-item .xb-item--title { font-size: 25px; } } .blog-slide-item .xb-item--title a { color: currentColor; } .blog-slide-item .xb-item--content { font-size: 16px; max-width: 700px; line-height: 26px; color: var(--color-white); } @media (max-width: 991px) { .blog-slide-item .xb-item--content { max-width: 470px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-slide-item .xb-item--content { max-width: 355px; } } .blog-slider .swiper-pagination { position: absolute; left: auto; right: 50px; width: auto !important; bottom: 50px; left: auto; } @media (max-width: 767px) { .blog-slider .swiper-pagination { right: 15px; bottom: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-slider .swiper-pagination { right: 50px; bottom: 50px; } } .blog-slider .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; opacity: 1; background: #fff; } .blog-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--color-primary); } .blog-item_button .blog-swiper-btn { position: absolute; left: 0; top: 50%; } .blog-item_button .blog-swiper-btn::after { display: none; } .blog-item_button .blog-swiper-btn i { left: 0; top: 10px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: var(--color-white); } .blog-item_button .blog-swiper-btn:hover i { color: var(--color-primary); } .blog-item_button .swiper-button-next { left: auto; right: -1px; } .blog-item_button .swiper-button-next i { left: 10px; } .blog_details_item { overflow: hidden; position: relative; z-index: 1; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%); } .blog_details_item::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } .blog_details_item:not(:last-child) { margin-bottom: 40px; } .blog_details_item .xb-item--img { margin-right: 50px; overflow: hidden; } @media (max-width: 767px) { .blog_details_item .xb-item--img { margin-right: 0; width: 100%; } } .blog_details_item .xb-item--img img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; width: 100%; } .blog_details_item .xb-item--holder { padding: 30px 55px 40px 0; width: calc(100% - 362px); } @media (max-width: 991px) { .blog_details_item .xb-item--holder { padding: 30px 19px 40px 0; } } @media (max-width: 767px) { .blog_details_item .xb-item--holder { width: 100%; padding: 30px 20px 40px; } } .blog_details_item .xb-item--tag { font-weight: 600; font-size: 16px; text-transform: uppercase; color: var(--color-gray); } .blog_details_item .xb-item--title { font-size: 22px; line-height: 36px; margin: 15px 0 18px; letter-spacing: -0.04em; max-width: 651px; } .blog_details_item .xb-item--title a { color: currentColor; } .blog_details_item .xb-item--content { max-width: 665px; display: inline-block; } .blog_details_item .xb-item--button a .text { padding: 11.2px 20px; } .blog_details_item .xb-item--button a .arrow { padding: 4px; } .blog_details_item .xb-item--button a .arrow-icon { width: 32px; height: 32px; } .blog_details_item .xb-item--button a .arrow-icon svg { top: 7px; left: 6px; } .blog_details_item .xb-item--inner { padding: 35px 40px 45px; } @media (max-width: 767px) { .blog_details_item .xb-item--inner { padding: 35px 20px 45px; } } .blog_details_item.blog_details_item-two { box-shadow: 0 8px 18px 0 rgba(221, 221, 231, 0.95); } .blog-pagination { margin-top: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; } .blog-pagination li a { width: 50px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--color-white); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .blog-pagination li a::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } .blog-pagination li a:not(:last-child) { margin-right: 15px; } .blog-pagination li.active a, .blog-pagination li:hover a { color: var(--color-secondary); background: var(--color-primary); } .blog_details_content { margin-right: -30px; } @media (max-width: 991px) { .blog_details_content { margin-right: 0; } } .post_meta { gap: 40px; } @media (max-width: 767px) { .post_meta { gap: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .post_meta { gap: 40px; } } .post_meta .meta_label1 { font-weight: 600; font-size: 16px; position: relative; text-transform: uppercase; color: var(--color-gray); } .post_meta .meta_label1::before { position: absolute; content: ''; top: 50%; right: -20px; height: 13px; width: 2px; background: #40414b; transform: translateY(-50%); } @media (max-width: 767px) { .post_meta .meta_label1::before { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .post_meta .meta_label1::before { display: block; } } .post_meta .meta_label { font-weight: 500; font-size: 16px; color: var(--color-gray); text-transform: capitalize; } .post_meta .meta_label a { color: currentColor; } .post_meta .meta_icon img { margin-right: 5px; transform: translateY(-2px); } .post-meta-wrap { padding-bottom: 40px; border-bottom: 1px solid #40414b; } .post_audio { margin-bottom: 45px; } .post_audio .audio_play_btn { overflow: hidden; font-weight: 500; align-items: center; display: inline-flex; padding: 5px 30px 5px 5px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .post_audio .audio_play_btn::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } .post_audio .audio_play_btn::after { border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .post_audio .audio_play_btn i { width: 35px; height: 35px; flex: 0 0 auto; border-radius: 100%; align-items: center; display: inline-flex; justify-content: center; color: var(--color-secondary); background: var(--color-primary); } .post_audio .audio_play_btn span { display: inline-block; color: var(--color-white); } .post_audio .audio_play_btn .time { margin: 0 20px 0 15px; } .item_details_info_heading { font-size: 26px; line-height: 38px; letter-spacing: -0.04em; color: var(--color-heading); } @media (max-width: 767px) { .item_details_info_heading { font-size: 24px; line-height: 34px; } } .blog_details_content p { line-height: 28px; } .blog-details-video { width: 100%; overflow: hidden; margin-bottom: 105px; display: inline-flex; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .iconlist_block { gap: 18px; display: flex; flex-direction: column; padding-left: 38px; } .iconlist_block li { line-height: 26px; } .iconlist_block .iconlist_text { font-weight: 500; font-size: 16px; } .numlist_block { gap: 5px; padding-left: 0; margin-top: 15px; } .post-block-wrap { border-bottom: 1px solid #40414b; } .postabmin_block { padding: 35px 40px; margin: 85px 0 80px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%); } @media (max-width: 767px) { .postabmin_block { justify-content: center; } } .postabmin_block::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } .postabmin_block .admin_image { margin-right: 30px; display: inline-block; width: 150px; height: 150px; flex: 0 0 auto; overflow: hidden; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } @media (max-width: 767px) { .postabmin_block .admin_image { margin-right: 0; } } .postabmin_block .admin_content { width: calc(100% - 180px); } @media (max-width: 767px) { .postabmin_block .admin_content { width: 100%; margin-top: 30px; text-align: center; } } .postabmin_block .admin_name { font-size: 18px; letter-spacing: -0.04em; color: var(--color-heading); } .postabmin_block .admin_designation { font-size: 14px; font-weight: 500; margin-bottom: 5px; display: inline-block; text-transform: capitalize; } .postabmin_block .social_icons_blocks { gap: 20px; } @media (max-width: 767px) { .postabmin_block .social_icons_blocks { justify-content: center; } } .postabmin_block .social_icons_blocks li a i { opacity: 0.5; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: var(--color-primary); } .postabmin_block .social_icons_blocks li a:hover i { opacity: 1; } .postabmin_block p { margin-bottom: 20px; font-size: 16px; max-width: 600px; } .social_icons_block { gap: 10px; } .social_icons_block li a { height: 32px; width: 32px; font-weight: 400; font-size: 13px; overflow: hidden; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; color: var(--color-white); background: var(--color-secondary); } .social_icons_block li a::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } .social_icons_block li a::after { z-index: 1; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .social_icons_block li a svg { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .social_icons_block li a:hover { color: var(--color-secondary); background: var(--color-primary); } .social_icons_block li a:hover svg { filter: brightness(0); } .post-nav-item { padding: 30px; display: flex; align-items: center; gap: 48px; justify-content: space-between; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%); } @media (max-width: 1199px) { .post-nav-item { gap: 15px; } } @media (max-width: 991px) { .post-nav-item { gap: 48px; } } .post-nav-item::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .post-nav-item { padding: 30px; } } @media (max-width: 1199px) { .post-nav-item { padding: 30px; } } .post-nav-item:nth-child(1) .xb-item--holder { text-align: end; } .post-nav-item:nth-child(3) .xb-item--arrow span { left: auto; right: -10px; } .post-nav-item:hover .xb-item--arrow span { background: var(--color-primary); } .post-nav-item:hover .xb-item--arrow svg { transform: translateX(-5px); } .post-nav-item:hover .xb-item--arrow svg path { fill: var(--color-secondary); } .post-nav-item:hover:nth-child(3) .xb-item--arrow svg { transform: translateX(5px); } .post-nav-item .xb-item--title { font-size: 17px; line-height: 26px; margin-bottom: 10px; max-width: 240px; letter-spacing: -0.04em; } .post-nav-item .xb-item--text { gap: 9px; display: inline-flex; align-items: center; font-size: 16px; font-weight: 500; color: var(--color-gray); } .post-nav-item .xb-item--arrow svg { z-index: 2; top: -4px; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .post-nav-item .xb-item--arrow svg path { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .post-nav-item .xb-item--arrow span { height: 30px; width: 30px; top: -1px; left: -10px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: var(--color-secondary); } .post-nav-item .xb-item--arrow span::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } .post-nav-item .xb-item--arrow span::after { z-index: 1; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .other_post_nav { gap: 40px; flex-wrap: nowrap; margin: 70px 0 80px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .other_post_nav { flex-wrap: nowrap; } } @media (max-width: 1199px) { .other_post_nav { flex-wrap: nowrap; } } @media (max-width: 767px) { .other_post_nav { flex-wrap: wrap; justify-content: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .other_post_nav { justify-content: start; } } .item_details-newslatter { overflow: hidden; padding: 55px 60px 60px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%); } .item_details-newslatter::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } @media (max-width: 767px) { .item_details-newslatter { padding: 30px; } .item_details-newslatter .xb-item--holder { margin-bottom: 30px; } } .item_details-newslatter .item_details_info_heading { margin-bottom: 10px; } .item_details-newslatter p { font-size: 16px; margin-bottom: 30px; } .item_details-newslatter .xb-item--bell-icon { height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-secondary); border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; transform: translateY(7px); } .item_details-newslatter .xb-item--bell-icon::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } .item_details-newslatter .xb-item--bell-icon::after { z-index: 1; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .item_details-newslatter .xb-item--bell-icon img { transform-origin: top; animation: ring 1.8s ease-out infinite; } .item_details-newslatter .xb-item--item-input_field input { height: 60px; padding: 0 140px 0 30px; border: 1px solid #40414b; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; color: var(--color-heading); background: var(--color-secondary); } .item_details-newslatter .xb-item--item-input_field input::placeholder { font-size: 16px; color: #66676f; } .item_details-newslatter .xb-item--item-input_field input:focus { border-color: var(--color-primary); } .item_details-newslatter .xb-item--item-input_field button { font-weight: 700; font-size: 16px; letter-spacing: 0em; text-transform: uppercase; padding: 9px 20px; position: absolute; top: 50%; right: 5px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; transform: translateY(-50%); border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; color: var(--color-secondary); background: var(--color-primary); } .item_details-newslatter .xb-item--item-input_field button:hover { background: var(--color-white); } .related-blog-title { font-size: 26px; margin-bottom: 63px; text-transform: capitalize; letter-spacing: -0.04em; } @media (max-width: 767px) { .related-blog-title { font-size: 24px; } } .blog-details_item .xb-item--img { overflow: hidden; display: inline-block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .blog-details_item .xb-item--img img { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .blog-details_item .xb-item--title { font-size: 18px; font-weight: 900; line-height: 36px; margin-bottom: 20px; color: var(--color-heading); } .blog-details_item .xb-item--title a { color: currentColor; } .blog-details_item .xb-item--meta { gap: 40px; margin: 15px 0 10px; } .blog-details_item .xb-item--meta_label1 { font-weight: 500; position: relative; text-transform: uppercase; color: var(--color-default); } .blog-details_item .xb-item--meta_label1::before { position: absolute; content: ''; top: 50%; right: -20px; height: 13px; width: 2px; background: #131053; transform: translateY(-50%); } .blog-details_item .xb-item--det-btn { position: relative; font-weight: 700; font-size: 18px; line-height: 12px; letter-spacing: -0.02em; text-transform: capitalize; color: var(--color-default); display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .blog-details_item .xb-item--det-btn i { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .blog-details_item .xb-item--det-btn::before { position: absolute; content: ''; bottom: 0; left: 0; height: 2px; width: 100%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--color-default); } .blog-details_item .xb-item--det-btn:hover { color: var(--color-secondary); } .blog-details_item .xb-item--det-btn:hover i { transform: translateX(5px); } .blog-details_item .xb-item--det-btn:hover::before { background: var(--color-secondary); } .blog-details_item .item_details_info_heading { margin-bottom: 15px; } .blog-details_item .item_details_info_heading a { color: currentColor; } .blog-details_item:hover .xb-item--img img { transform: scale(1.05); } .xb-comment-form { margin-left: 0 !important; } .xb-comment-form .title { font-size: 26px !important; margin-bottom: 15px !important; letter-spacing: -0.04em !important; } .xb-comment-form .form-submit-btn button { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .xb-comment-form .form-check { margin: 20px 0 32px; } .xb-comment-form .form-check .form-check-input { width: 14px; height: 14px; border-radius: 0; box-shadow: none; border-radius: 2px; border: 1px solid #fff; background-color: #00020f; } .xb-comment-form .form-check .form-check-input:checked { border-color: #fff; background-color: #00020f; } .xb-comment-form .form-check label { font-size: 16px; font-weight: 400; margin-bottom: 0; line-height: 24px; color: var(--color-gray); transform: translate(-3px, -5px); } .comment_area { padding-top: 80px; border-top: 1px solid #40414b; } .comment-title { font-weight: 400; font-size: 26px; margin-bottom: 40px; letter-spacing: -0.04em; } .comments_list { gap: 52px; } .comments_list > li .comments_list { gap: 30px; padding: 54px 0 0 110px; } @media (max-width: 767px) { .comments_list > li .comments_list { padding: 54px 0 0 40px; } } .unordered_list_block { display: flex; flex-direction: column; } .comment_item { gap: 30px; display: flex; } @media (max-width: 767px) { .comment_item { flex-wrap: wrap; } } .comment_item .comment_author_thumbnail { width: 80px; height: 80px; flex: 0 0 auto; overflow: hidden; border-radius: 100%; } .comment_item .comment_author_content { position: relative; } .comment_item .comment_author_content p { font-size: 16px; font-weight: 500; letter-spacing: 0em; padding-right: 30px; } .comment_item .comment_author_name { font-size: 18px; font-weight: 400; margin-bottom: 8px; letter-spacing: -0.04em; text-transform: capitalize; } .comment_item .comment_time { font-size: 16px; line-height: 1; margin-bottom: 20px; text-transform: capitalize; } .comment_item .comment_reply_btn { top: 0; right: 0; line-height: 1; font-weight: 700; font-size: 13px; position: absolute; padding: 8px 20px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: var(--color-heading); backdrop-filter: blur(40px); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .comment_item .comment_reply_btn::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; background-image: url(../img/testimonial/noise.html); background-repeat: no-repeat; background-size: cover; } .comment_item .comment_reply_btn:after { z-index: 1; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } .comment_item .comment_reply_btn:hover { color: var(--color-secondary); background-color: var(--color-primary); } .xb-video-frame { text-align: center; } .xb-video-frame .xb-img { margin: 0 -77px; } @media (max-width: 767px) { .xb-video-frame .xb-img { margin: 0 -40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-video-frame .xb-img { margin: 0px -47px; } } .xb-video-wrap { top: 14%; left: 6.4%; z-index: 2; position: absolute; overflow: hidden; display: inline-block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; background: var(--color-secondary); border: 1px solid rgba(255, 255, 255, 0.1); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-video-wrap { max-width: 88%; } } @media (max-width: 1199px) { .xb-video-wrap { left: 6%; max-width: 88%; } } @media (max-width: 991px) { .xb-video-wrap { left: 5%; max-width: 90%; } } .xb-video-nav { padding-left: 50px; margin-bottom: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } @media (max-width: 991px) { .xb-video-nav { padding-left: 40px; } } @media (max-width: 767px) { .xb-video-nav { padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-video-nav { padding-left: 40px; } } .xb-video-nav-item:first-child .nav-link { border-left: 1px solid rgba(255, 255, 255, 0.1); } .xb-video-nav-item .nav-link { gap: 7px; display: flex; align-items: center; padding: 10px 20px; position: relative; color: var(--color-white); border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-right: 1px solid rgba(255, 255, 255, 0.1); } .xb-video-nav-item .nav-link::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; background: rgba(0, 255, 153, 0.2); } .xb-video-nav-item .nav-link.active { background: transparent; } .xb-video-nav-item .nav-link.active::before { opacity: 1; animation: widthScale 3s linear infinite; } @media (max-width: 991px) { .xb-video-nav-item .nav-link { font-size: 14px; padding: 8px 15px; } } @media (max-width: 767px) { .xb-video-nav-item .nav-link { gap: 5px; font-size: 10px; padding: 0px 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-video-nav-item .nav-link { gap: 7px; font-size: 12px; padding: 0 10px; } } @keyframes widthScale { 0% { width: 0%; } 100% { width: 100%; } } .xb-video-shape .shape { z-index: -1; position: absolute; } @media (max-width: 767px) { .xb-video-shape .shape { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-video-shape .shape { display: block; } } .xb-video-shape .shape--1 { top: 62px; left: -14px; transform: rotate(-45deg); max-width: 10%; } .xb-video-shape .shape--1 img { transform-origin: bottom; animation: ring2 20s ease-out infinite; } @media (max-width: 1199px) { .xb-video-shape .shape--1 { left: -23px; top: 54px; max-width: 10%; } } @media (max-width: 991px) { .xb-video-shape .shape--1 { left: -45px; top: 33px; max-width: 12%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-video-shape .shape--1 { top: 5px; left: -44px; max-width: 18%; } } .xb-video-shape .shape--2 { left: -26px; bottom: 26%; } @media (max-width: 1199px) { .xb-video-shape .shape--2 { left: -10px; bottom: 30%; max-width: 4%; } } @media (max-width: 991px) { .xb-video-shape .shape--2 { left: -27px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-video-shape .shape--2 { left: -14px; } } .xb-video-shape .shape--3 { right: 15px; bottom: 21%; } @media (max-width: 1199px) { .xb-video-shape .shape--3 { right: 3px; bottom: 22%; max-width: 4%; } } @media (max-width: 991px) { .xb-video-shape .shape--3 { right: -16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-video-shape .shape--3 { right: -13px; bottom: 20%; max-width: 7%; } } .xb-linear-gradient .gradient { position: absolute; } .xb-linear-gradient .gradient--1 { top: 0; left: 0; z-index: -2; width: 100%; height: 262px; background: linear-gradient(180deg, rgba(0, 2, 15, 0) 0%, #00020f 100%); } @media (max-width: 991px) { .xb-linear-gradient .gradient--1 { height: 170px; } } @media (max-width: 767px) { .xb-linear-gradient .gradient--1 { height: 80px; } } .xb-linear-gradient .gradient--2 { bottom: 57px; width: 100%; height: 161px; background: #00020f; filter: blur(40px); } @media (max-width: 991px) { .xb-linear-gradient .gradient--2 { height: 100px; } } @media (max-width: 767px) { .xb-linear-gradient .gradient--2 { height: 80px; } } .xb-linear-gradient .gradient--3 { left: 0; top: 44px; height: 88.5%; width: 199px; background: #00020f; filter: blur(95.3000030518px); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-linear-gradient .gradient--3 { display: none; } } @media (max-width: 1199px) { .xb-linear-gradient .gradient--3 { display: none; } } .xb-linear-gradient .gradient--4 { right: 0; top: 44px; height: 88.5%; width: 199px; background: #00020f; filter: blur(95.3000030518px); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-linear-gradient .gradient--4 { display: none; } } @media (max-width: 1199px) { .xb-linear-gradient .gradient--4 { display: none; } } .xb-linear-gradient .gradient--dot-img { top: 97px; left: 80px; z-index: -2; } .xb-text-marquee-item { display: flex; align-items: center; } .xb-text-marquee-item .title { font-weight: 700; font-size: 110px; letter-spacing: -0.05em; background: linear-gradient(52deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 991px) { .xb-text-marquee-item .title { font-size: 80px; } } @media (max-width: 767px) { .xb-text-marquee-item .title { font-size: 48px; } } .xb-text-marquee-item img { margin: 0 10px; display: inline-flex; } @media (max-width: 767px) { .xb-text-marquee-item img { max-width: 50%; } } .xb-text-marquee-wrap { position: absolute; left: 0; bottom: 150px; z-index: -1; } @media (max-width: 991px) { .xb-text-marquee-wrap { bottom: 80px; } } @media (max-width: 767px) { .xb-text-marquee-wrap { bottom: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-text-marquee-wrap { bottom: 90px; } } .tab-content .tab-pane { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-testimonial-item .xb-item--inner { padding: 30px 36px 30px 30px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .xb-testimonial-item .xb-item--inner { padding: 30px 42px 30px 30px; } } .xb-testimonial-item .xb-item--rating { gap: 9px; padding: 7px 10px; background: #00020f; display: inline-flex; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; } .xb-testimonial-item .xb-item--rating li { font-size: 21px; letter-spacing: -0.03em; } .xb-testimonial-item .xb-item--rating li:last-child { margin-left: 6px; } .xb-testimonial-item .xb-item--rating li i { color: #d9ff43; } .xb-testimonial-item .xb-item--content { font-weight: 500; font-size: 22px; line-height: 34px; margin: 23px 0 64px; letter-spacing: -0.02em; } .xb-testimonial-item .xb-item--author { gap: 15px; } .xb-testimonial-item .xb-item--avatar { overflow: hidden; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } .xb-testimonial-item .xb-item--avatar { font-size: 21px; line-height: 152%; letter-spacing: -0.01em; } .xb-testimonial-item .xb-item--name { font-size: 21px; text-transform: capitalize; } .xb-testimonial-item .xb-item--desig { font-weight: 500; } .xb-testimonial-slider { margin-left: -95px; margin-right: -5px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-testimonial-slider { margin-left: -10px; margin-right: -10px; } } @media (max-width: 1199px) { .xb-testimonial-slider { margin-right: -50px; } } @media (max-width: 991px) { .xb-testimonial-slider { margin-right: 0; margin-left: 0; } } @media (max-width: 767px) { .xb-testimonial-slider { margin-right: 15px; margin-left: 15px; } } .tes-sec-title .title { z-index: 1; position: relative; } .tes-sec-title .title img { width: 112px; z-index: -1; position: relative; } @media (max-width: 767px) { .tes-sec-title .title img { width: 75px; } } .ac-testimonial-item { position: relative; padding: 20px 40px 20px 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media (max-width: 767px) { .ac-testimonial-item { gap: 30px; padding: 20px; } } .ac-testimonial-item .xb-item--holder { width: calc(100% - 284px); } @media (max-width: 767px) { .ac-testimonial-item .xb-item--holder { width: 100%; } } .ac-testimonial-item .xb-item--avatar { overflow: hidden; max-width: 233px; margin-right: 50px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } @media (max-width: 767px) { .ac-testimonial-item .xb-item--avatar { max-width: 100%; margin-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ac-testimonial-item .xb-item--avatar { margin: 0 auto; } } @media (max-width: 767px) { .ac-testimonial-item .xb-item--avatar img { width: 100%; } } .ac-testimonial-item .xb-item--content { font-size: 25px; line-height: 34px; letter-spacing: 0em; } @media (max-width: 767px) { .ac-testimonial-item .xb-item--content { font-size: 24px; } } .ac-testimonial-item .xb-item--name { margin-top: 19px; letter-spacing: -0.04em; text-transform: capitalize; } .ac-testimonial-item .xb-item--author { margin-top: 60px; border-top: 1px solid #45454f; } .ac-testimonial-item .xb-item--quote { position: absolute; top: 20px; right: 40px; } @media (max-width: 767px) { .ac-testimonial-item .xb-item--quote { top: 58%; right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ac-testimonial-item .xb-item--quote { top: 66%; } } .testimonial-wrapper { margin-left: -192px; margin-right: -216px; position: relative; } @media only screen and (max-width: 1600px) { .testimonial-wrapper { margin-left: -500px; margin-right: -350px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .testimonial-wrapper { margin-left: -470px; margin-right: -450px; } } @media (max-width: 1199px) { .testimonial-wrapper { margin-left: -550px; margin-right: -550px; } } @media only screen and (max-width: 1300px) { .testimonial-wrapper { margin-left: 120px; margin-right: 120px; } } @media (max-width: 991px) { .testimonial-wrapper { margin-left: 30px; margin-right: 30px; } } @media (max-width: 767px) { .testimonial-wrapper { margin-left: 10px; margin-right: 10px; } } .ai-testimonial-inner { min-height: 772px; } @media (max-width: 991px) { .ai-testimonial-inner { min-height: 650px; } } .ai-testimonial-item { min-height: 772px; } @media (max-width: 991px) { .ai-testimonial-item { min-height: 650px; } } .ai-testimonial-item .xb-item--inner { top: 0; left: 50%; z-index: 1; display: flex; margin: 0 auto; padding: 0 80px; max-width: 710px; height: 100%; position: absolute; text-align: center; align-items: center; overflow: hidden; background: #11121D; transform: translate(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-testimonial-item .xb-item--inner { padding: 0 60px; } } @media (max-width: 1199px) { .ai-testimonial-item .xb-item--inner { padding: 0 30px; } } @media (max-width: 767px) { .ai-testimonial-item .xb-item--inner { left: 25px; max-width: 280px; transform: translate(0); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-testimonial-item .xb-item--inner { left: 60px; max-width: 410px; } } .ai-testimonial-item .xb-item--comment { opacity: 0; font-weight: 500; font-size: 30px; line-height: 1.37; margin: 90px 0 95px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; transform: translateY(30px); } @media (max-width: 1199px) { .ai-testimonial-item .xb-item--comment { font-size: 28px; } } @media (max-width: 991px) { .ai-testimonial-item .xb-item--comment { font-size: 22px; margin: 70px 0; } } .ai-testimonial-item .xb-item--name { opacity: 0; font-size: 18px; margin-bottom: 15px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; transform: translateY(30px); } .ai-testimonial-item .xb-item--brand { opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; transform: translateY(30px); } .ai-slide-btn > div { top: 50%; left: 24.5%; height: 50px; width: 50px; z-index: 1; font-size: 18px; color: #131053; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; transform: translateY(-50%); background: var(--color-white); } @media only screen and (max-width: 1600px) { .ai-slide-btn > div { left: 19%; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-slide-btn > div { left: 15%; } } @media (max-width: 1199px) { .ai-slide-btn > div { left: 13%; } } @media (max-width: 767px) { .ai-slide-btn > div { width: 40px; height: 40px; left: 2%; } } @media (max-width: 767px) { .ai-slide-btn > div svg { width: 10px; } } .ai-slide-btn > div::after { display: none; } .ai-slide-btn > div:hover { background: var(--color-primary); } .ai-slide-btn .swiper-button-next { left: auto; right: 24.5%; } @media only screen and (max-width: 1600px) { .ai-slide-btn .swiper-button-next { right: 19%; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-slide-btn .swiper-button-next { right: 15%; } } @media (max-width: 1199px) { .ai-slide-btn .swiper-button-next { right: 13%; } } @media (max-width: 767px) { .ai-slide-btn .swiper-button-next { right: 2%; } } .ai-testimonial-slider-nav .swiper-slide-active .ai-testimonial-item .xb-item--comment { opacity: 1; transform: translateY(0); } .ai-testimonial-slider-nav .swiper-slide-active .ai-testimonial-item .xb-item--name { opacity: 1; transition-delay: .1s; transform: translateY(0); } .ai-testimonial-slider-nav .swiper-slide-active .ai-testimonial-item .xb-item--brand { opacity: 1; transition-delay: .2s; transform: translateY(0); } .ai-testimonial-slider-img { position: absolute; left: 0; top: 0; z-index: -2; height: 100%; width: 100%; } .ai-testimonial-slider-img .ai-tes-img { height: 100%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ai-testimonial-slider-img .ai-tes-img img { height: 100%; object-fit: cover; } @media (max-width: 1199px) { .ai-testimonial-heading { margin-top: 95px; } } @media (max-width: 767px) { .ai-testimonial-heading { margin-bottom: 200px; } } .ai-testimonial-heading .sub-title { top: 71px; left: 51px; position: absolute; } @media (max-width: 1199px) { .ai-testimonial-heading .sub-title { left: 20px; } } .ai-testimonial-heading .title { max-width: 953px; text-align: center; margin: 0 auto; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-testimonial-heading .title { max-width: 870px; } } @media (max-width: 1199px) { .ai-testimonial-heading .title { margin: 0; max-width: 700px; text-align: start; } } @media (max-width: 991px) { .ai-testimonial-heading .title { max-width: 500px; } } .xb-blog-item .xb-item--inner { overflow: hidden; position: relative; backdrop-filter: blur(40px); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .xb-blog-item .xb-item--inner::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; background-image: url(../img/testimonial/noise.html); background-repeat: no-repeat; background-size: cover; } .xb-blog-item .xb-item--holder { padding: 25px 100px 20px 30px; } @media (max-width: 767px) { .xb-blog-item .xb-item--holder { padding: 25px 20px 20px; } } .xb-blog-item .xb-item--title { font-size: 22px; margin-top: 15px; line-height: 145%; letter-spacing: -0.01em; color: var(--color-white); } @media (max-width: 1199px) { .xb-blog-item .xb-item--title { font-size: 20px; } } .xb-blog-item .xb-item--title a { color: currentColor; } .xb-blog-item .xb-item--meta { gap: 20px; } @media (max-width: 1199px) { .xb-blog-item .xb-item--meta { gap: 15px; } } @media (max-width: 991px) { .xb-blog-item .xb-item--meta { gap: 16px; } } @media (max-width: 767px) { .xb-blog-item .xb-item--meta { gap: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-blog-item .xb-item--meta { gap: 20px; } } .xb-blog-item .xb-item--meta li { font-weight: 600; font-size: 16px; color: #86878d; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; position: relative; padding-right: 20px; } @media (max-width: 1199px) { .xb-blog-item .xb-item--meta li { font-size: 12px; padding-right: 15px; } } @media (max-width: 991px) { .xb-blog-item .xb-item--meta li { font-size: 14px; padding-right: 16px; } } @media (max-width: 767px) { .xb-blog-item .xb-item--meta li { padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-blog-item .xb-item--meta li { padding-right: 20px; } } .xb-blog-item .xb-item--meta li img { margin-right: 7px; } .xb-blog-item .xb-item--meta li::before { position: absolute; content: ''; right: 0; top: 50%; width: 1px; height: 50%; background: #fff; transform: translateY(-50%); } .xb-blog-item .xb-item--meta li:last-child { padding-right: 0; } .xb-blog-item .xb-item--meta li:last-child::before { display: none; } .xb-blog-item.xb-small-blog-item .xb-item--holder { padding: 25px 20px 20px 30px; } @media (max-width: 991px) { .xb-blog-item.xb-small-blog-item .xb-item--holder { padding: 20px 20px; } } @media (max-width: 767px) { .xb-blog-item.xb-small-blog-item .xb-item--holder { padding: 25px 20px 20px; } } .blog-sec-title .title img { width: 134px; margin-top: -20px; margin-left: -18px; } @media (max-width: 767px) { .blog-sec-title .title img { z-index: -1; position: relative; } } @media (max-width: 991px) { .blog-sec-title { margin-bottom: 30px; } } .xb-faq { position: relative; padding: 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; background: linear-gradient(146deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 19.3%, rgba(255, 255, 255, 0.06) 62.02%, rgba(255, 255, 255, 0.4) 100%); } .xb-faq::before { position: absolute; content: ''; top: 0; left: 0; height: 100%; width: 100%; filter: blur(119px); background: linear-gradient(52deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); opacity: 0.2; } .xb-faq .accordion_box { border: 1px solid #40414B; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .xb-faq .accordion_box .block { position: relative; overflow: hidden; border-bottom: 1px solid #40414b; } .xb-faq .accordion_box .block:last-child { border-bottom: 0; } .xb-faq .accordion_box .block:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; } .xb-faq .accordion_box .block:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .xb-faq .accordion_box .block.active-block { border-bottom: none; } .xb-faq .accordion_box .block.active-block .acc-btn .number { color: var(--color-white); } .xb-faq .accordion_box .block.active-block .acc-btn .arrow::before { content: "\f068"; transform: rotate(180deg); color: var(--color-secondary); } .xb-faq .accordion_box .block.active-block .acc-btn .arrow::after { opacity: 1; } .xb-faq .accordion_box .block .acc-btn { padding: 24px 40px; font-size: 24px; line-height: 1.3; font-weight: 500; position: relative; cursor: pointer; background: var(--color-secondary); } @media (max-width: 991px) { .xb-faq .accordion_box .block .acc-btn { font-size: 20px; padding: 20px; padding-right: 30px; } } @media (max-width: 767px) { .xb-faq .accordion_box .block .acc-btn { padding-right: 50px; } } .xb-faq .accordion_box .block .acc-btn .arrow { position: absolute; z-index: 1; width: 36px; height: 36px; top: 50%; right: 40px; background: #060E50; transform: translateY(-50%); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } @media (max-width: 767px) { .xb-faq .accordion_box .block .acc-btn .arrow { right: 5px; } } .xb-faq .accordion_box .block .acc-btn .arrow span { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; border-radius: inherit; background-image: url(../img/bg/circle_bg.html); background-repeat: no-repeat; background-size: cover; background-position: center center; } .xb-faq .accordion_box .block .acc-btn .arrow::after { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; opacity: 0; background: var(--color-primary); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-faq .accordion_box .block .acc-btn .arrow::before { position: absolute; top: 7px; left: 11px; font-size: 14px; font-size: 16px; font-weight: 500; content: "\f067"; font-family: "Font Awesome 5 Pro"; color: var(--color-heading-two); transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .xb-faq .accordion_box .block .acc-btn .number { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: rgba(255, 255, 255, 0.5); } .xb-faq .accordion_box .block .acc_body { position: relative; display: none; } .xb-faq .accordion_box .block .acc_body.current { display: block; } .xb-faq .accordion_box .block .content { font-size: 16px; line-height: 28px; background: #15192f; padding: 30px 140px 42px 40px; border: 1px solid rgba(128, 128, 135, 0.2); } @media (max-width: 991px) { .xb-faq .accordion_box .block .content { padding: 30px 40px 42px 40px; } } @media (max-width: 767px) { .xb-faq .accordion_box .block .content { padding: 20px; } } .xb-faq .accordion_box .block .content p { margin-bottom: 15px; } .xb-faq .accordion_box .block .content ul li:not(:last-child) { margin-bottom: 5px; } .xb-faq .accordion_box .block .content ul li i { margin-right: 10px; font-size: 16px; color: var(--color-primary-two); } .faq-linear-shape { position: absolute; left: 0; bottom: 0; height: 81px; width: 100%; background: linear-gradient(180deg, rgba(0, 2, 15, 0) 0%, #00020f 100%); } .service_process_faq .accordion { --bs-accordion-border-color: none; } .service_process_faq .accordion .accordion-item { border-radius: 0; background-color: transparent; } .service_process_faq .accordion .accordion-button { font-size: 20px; font-weight: 400; line-height: 36px; padding: 20px 0 8px; letter-spacing: -0.02em; color: var(--color-white); text-transform: capitalize; border-radius: 0 !important; background-color: transparent; font-family: var(--font-heading); } @media (max-width: 767px) { .service_process_faq .accordion .accordion-button { font-size: 18px; } } .service_process_faq .accordion .accordion-button:not(:last-child) { border-bottom: 1px solid #40414b; } .service_process_faq .accordion .accordion-button:hover { color: var(--color-primary); } .service_process_faq .accordion .accordion-button:after { width: auto; height: auto; content: "\2b"; font-size: 16px; background: none; font-weight: 700; font-family: 'Font Awesome 5 pro'; } .service_process_faq .accordion .accordion-button[aria-expanded=true] { border: none; } .service_process_faq .accordion .accordion-button[aria-expanded=true]:after { content: '\f068'; } .service_process_faq .accordion .accordion-body { padding: 11px 70px 11px 20px; background-color: rgba(21, 25, 47, 0.2); border: 1px solid rgba(128, 128, 135, 0.2); } @media (max-width: 767px) { .service_process_faq .accordion .accordion-body { padding: 11px 20px; } } .service_process_faq .accordion p { font-size: 16px; line-height: 28px; color: var(--color-gray); } .content_layer_group { display: flex; align-items: end; flex-direction: column; } @media (max-width: 991px) { .content_layer_group { align-items: center; } } .content_layer_group > li { height: 142px; width: 452px; cursor: pointer; position: relative; } @media (max-width: 767px) { .content_layer_group > li { width: 330px; height: 132px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .content_layer_group > li { width: 452px; height: 142px; } } .content_layer_group > li:not(:first-child) { margin-top: -37px; } .content_layer_group > li[aria-expanded=true] { z-index: 1; } .content_layer_group > li[aria-expanded=true] span { position: relative; color: var(--bs-white); border-color: var(--bs-primary); background: linear-gradient(52deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); } .content_layer_group span { height: 142px; width: 452px; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; line-height: 36px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; border-radius: 100%; position: relative; color: var(--color-white); font-family: var(--font-heading); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .content_layer_group span { width: 330px; height: 132px; font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .content_layer_group span { width: 452px; height: 142px; font-size: 22px; } } .content_layer_group span::after { content: ""; position: absolute; inset: 0; padding: 2px; z-index: -1; border-radius: inherit; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: linear-gradient(49deg, #4cbdd4 0.01%, #00ff97 61.5%, #4cbdd4 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .career-faq .accordion_box .block .acc-btn { font-weight: 400; font-size: 22px; padding: 26px 30px; letter-spacing: -0.04em; color: var(--color-white); } .career-faq .accordion_box .block .acc-btn .number { color: var(--color-primary); } .career-faq .accordion_box .block .content { padding: 20px 40px 30px 30px; border: 1px solid #40414b; } .career-faq .accordion_box .block .content p { font-size: 16px; font-weight: 400; margin-bottom: 0; line-height: 28px; color: var(--color-white); } .career-faq .accordion_box .block.active-block .acc-btn .number { color: var(--color-primary); } .xb-contact-form { z-index: 1; position: relative; padding: 50px 40px; margin-left: -30px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media (max-width: 991px) { .xb-contact-form { margin-left: 0; } } @media (max-width: 767px) { .xb-contact-form { padding: 50px 20px; } } .xb-contact-form::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; background-image: url(../img/contact/noise.html); background-repeat: no-repeat; background-size: cover; } .xb-contact-form .title { font-size: 32px; margin-bottom: 5px; letter-spacing: -0.03em; color: var(--color-white); } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-contact-form .title { font-size: 30px; } } @media (max-width: 1199px) { .xb-contact-form .title { font-size: 30px; } } @media (max-width: 767px) { .xb-contact-form .title { font-size: 24px; } } .xb-contact-form .content { color: var(--color-white); } .xb-contact-form .xb-input-field { position: relative; display: block; } .xb-contact-form .xb-input-field input, .xb-contact-form .xb-input-field textarea { height: 60px; outline: none; font-size: 15px; font-weight: 400; letter-spacing: -0.02em; color: var(--color-white); transition: all 0.3s ease; padding: 10px 20px 10px 48px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; background: #2b3d66; border: 1px solid rgba(255, 255, 255, 0.35); } .xb-contact-form .xb-input-field input ~ img, .xb-contact-form .xb-input-field textarea ~ img { filter: brightness(100); } .xb-contact-form .xb-input-field label { position: absolute; left: 48px; top: 50%; font-size: 15px; font-weight: 400; letter-spacing: -0.02em; white-space: nowrap; pointer-events: none; display: inline-block; transition: all 0.3s ease; transform: translateY(-50%); text-transform: capitalize; color: rgba(255, 255, 255, 0.5); } .xb-contact-form .xb-input-field input:focus + label, .xb-contact-form .xb-input-field input:valid + label, .xb-contact-form .xb-input-field textarea:focus + label, .xb-contact-form .xb-input-field textarea:valid + label { transform: translate(15px, -50%); opacity: 0; } .xb-contact-form .xb-input-field img { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); } .xb-contact-form .xb-select-field { z-index: 1; position: relative; } .xb-contact-form .xb-select-field .nice-select { font-size: 15px; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 0; height: 60px; min-height: 60px; line-height: 38px; padding: 10px 48px; background: #2b3d66; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.35); } .xb-contact-form .xb-select-field .nice-select ~ img { filter: brightness(100); } .xb-contact-form .xb-select-field img { top: 30px; } .xb-contact-form .xb-massage-field textarea { height: 120px; padding: 14px 20px 14px 48px; } .xb-contact-form .xb-massage-field label { top: 30px; } .xb-contact-form .xb-massage-field img { top: 30px; } .xb-contact-form .xb-select-file { position: relative; height: 60px; transition: all 0.3s ease; background: #2b3d66; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.35); } .xb-contact-form .xb-select-file input { opacity: 0; z-index: 1; position: absolute; top: 0; left: 0; height: 100%; width: 100%; cursor: pointer; } .xb-contact-form .xb-select-file span { position: absolute; top: 19px; left: 48px; height: 22px; padding: 0 10px; font-size: 15px; transition: 0.3s; line-height: 20px; font-weight: 400; cursor: pointer; border: 1px solid #3b4d77; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; color: rgba(255, 255, 255, 0.5); } .form-btn { width: 100%; padding: 15px 40px; background: var(--color-primary) !important; } .form-btn .xb-icon { height: 30px; width: 30px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .form-btn .xb-icon img { position: absolute; left: 8px; top: 3px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .form-btn .xb-icon img:nth-child(1) { transform: translate(0); } .form-btn .xb-icon img:nth-child(2) { transform: translate(-30px, 30px); } .form-btn:hover { color: var(--color-secondary) !important; background: var(--color-white) !important; } .form-btn:hover .xb-icon img:nth-child(1) { transform: translate(30px, -30px); } .form-btn:hover .xb-icon img:nth-child(2) { transition-delay: .1s; transform: translate(0, 0); } .xb-content-wrap { margin-top: -5px; margin-right: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-content-wrap { margin-right: 60px; } } @media (max-width: 1199px) { .xb-content-wrap { margin-right: 35px; } } @media (max-width: 991px) { .xb-content-wrap { margin-right: 0; } } .xb-contact-inner { background: linear-gradient(52deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); padding: 140px 35px 40px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } @media only screen and (max-width: 1023px) { .xb-contact-inner { padding: 140px 20px 40px; } } @media (max-width: 991px) { .xb-contact-inner { padding: 140px 35px 40px; } } @media (max-width: 767px) { .xb-contact-inner { gap: 30px; text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-contact-inner { text-align: start; padding: 140px 20px 40px; } } .xb-contact-conent { z-index: 1; margin-top: 133px; position: relative; } .xb-contact-conent .shape { position: absolute; } .xb-contact-conent .shape--1 { top: -40%; left: 30%; } @media (max-width: 1199px) { .xb-contact-conent .shape--1 { left: 26%; } } @media (max-width: 991px) { .xb-contact-conent .shape--1 { left: 35%; } } @media (max-width: 767px) { .xb-contact-conent .shape--1 { top: -30%; left: 16%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-contact-conent .shape--1 { left: 29%; top: -40%; } } .xb-contact-conent .shape--2 { top: -40%; right: 31%; z-index: -1; } @media (max-width: 1199px) { .xb-contact-conent .shape--2 { right: 25%; } } @media (max-width: 991px) { .xb-contact-conent .shape--2 { right: 34%; } } @media (max-width: 767px) { .xb-contact-conent .shape--2 { right: 15%; top: -30%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-contact-conent .shape--2 { right: 28%; top: -40%; } } .xb-contact-item { max-width: 186px; } @media (max-width: 1199px) { .xb-contact-item { max-width: 180px; } } @media (max-width: 991px) { .xb-contact-item { max-width: 210px; } } @media (max-width: 767px) { .xb-contact-item { margin: 0 auto; } } .xb-contact-item .xb-item--number { font-size: 70px; margin-bottom: 7px; text-transform: capitalize; } @media (max-width: 1199px) { .xb-contact-item .xb-item--number { font-size: 65px; } } @media only screen and (max-width: 1023px) { .xb-contact-item .xb-item--number { font-size: 48px; } } .xb-contact-item .xb-item--content { font-size: 18px; font-weight: 500; } .contact-sec-title .title { line-height: 1.3; } .details-contact-form { margin-left: 0; padding: 80px 80px 70px; } @media (max-width: 991px) { .details-contact-form { padding: 80px 40px 70px; } } @media (max-width: 767px) { .details-contact-form { padding: 80px 30px 70px; } } .details-contact-form .title { font-size: 36px; margin-bottom: 8px; letter-spacing: -0.04em; } @media (max-width: 991px) { .details-contact-form .title { font-size: 32px; } } @media (max-width: 767px) { .details-contact-form .title { font-size: 27px; line-height: 1.5; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .details-contact-form .title { font-size: 32px; } } .details-contact-form .sub-title { font-size: 16px; } .details-contact-input-form label { font-weight: 500; margin-bottom: 10px; color: var(--color-white); } .details-contact-input-form .xb-input-field input, .details-contact-input-form .xb-input-field textarea { padding: 10px 20px; } .details-contact-input-form .xb-input-field textarea { min-height: 154px; } .details-contact-input-form .xb-upload_file label { font-weight: 600; font-size: 20px; margin-bottom: 15px; letter-spacing: -0.02em; color: var(--color-white); } .details-contact-input-form .xb-upload_file input { display: block; margin-bottom: 15px; } .details-contact-input-form .xb-upload_file .xb-content span { color: var(--color-white); } .details-contact-input-form .cp-contact-bottom { gap: 30px; } .xb-contact-items { padding: 20px; text-align: center; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .xb-contact-items .xb-item--location { font-size: 16px; display: block; margin: 30px 0 25px; letter-spacing: -0.02em; } .xb-contact-items .xb-item--contact_info { font-size: 20px; letter-spacing: -0.02em; color: var(--color-white); font-family: var(--font-heading); } .xb-contact-items .xb-item--contact_info:not(:last-child) { margin-bottom: 15px; } .xb-contact-items .form-btn { font-size: 14px; font-weight: 700; padding: 7px 40px; color: var(--color-white); border: 1px solid #4c4e57; background: rgba(0, 2, 15, 0.1) !important; } .xb-contact-items .form-btn .xb-icon { height: 24px; } .xb-contact-items .form-btn:hover { background: var(--color-primary) !important; } .xb-contact-wrap { display: grid; padding: 20px; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 991px) { .xb-contact-wrap { grid-template-columns: repeat(1, 1fr); } } .xb-contact-wrap::after { z-index: 1 !important; background: linear-gradient(52deg, rgba(44, 50, 254, 0.5) 0%, rgba(0, 164, 175, 0.5) 49%, rgba(0, 255, 151, 0.5) 100%) !important; } .xb-main-contact { margin-left: 0; padding: 50px 30px; border-radius: 10px 0 0 10px !important; } @media (max-width: 991px) { .xb-main-contact { padding: 50px 20px; border-radius: 10px 10px 0 0 !important; } } .xb-main-contact:after { border-radius: 10px 0 0 10px !important; } @media (max-width: 991px) { .xb-main-contact:after { border-radius: 10px 10px 0 0 !important; } } .main-contact-input-form { padding: 0 10px; } @media (max-width: 991px) { .main-contact-input-form .form-btn { padding: 15px 20px; } } .google-map { height: 100%; min-height: 660px; overflow: hidden; border-radius: 0 10px 10px 0; } @media (max-width: 991px) { .google-map { border-radius: 0 0 10px 10px; } } .google-map iframe { width: 100%; height: 100%; } .sidebar { margin-left: 80px; } @media (max-width: 1199px) { .sidebar { margin-left: 60px; } } @media (max-width: 991px) { .sidebar { margin-left: 0; } } .sidebar .sidebar_widget:not(:last-child) { margin-bottom: 70px; } .sidebar_widget_title { font-size: 22px; margin-bottom: 17px; letter-spacing: -0.04em; color: var(--color-heading); } .form-group { position: relative; } .form-group .form-control { height: 60px; padding-right: 70px; color: var(--color-white); backdrop-filter: blur(40px); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; background: var(--color-secondary); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); } .form-group .form-control:focus { box-shadow: none; border: 1px solid var(--color-primary); } .form-group .search_icon { position: absolute; top: 0; right: 0; height: 100%; width: 60px; display: flex; align-items: center; justify-content: center; border-radius: 0 10px 10px 0; background: var(--color-primary); } .recent_post_block .recent_post_item { padding: 22px 30px 25px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .recent_post_block .recent_post_item::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } .recent_post_block .recent_post_item:not(:last-child) { margin-bottom: 30px; } .recent_post_block .recent_post_item .post-title { font-size: 17px; margin-bottom: 5px; line-height: 26px; letter-spacing: -0.04em; } .recent_post_block .recent_post_item .post-title a { color: currentColor; } .recent_post_block .recent_post_item span { font-size: 16px; font-weight: 500; } .recent_post_block .recent_post_item span img { margin-right: 8px; } .category_list_block li { border-bottom: 1px solid #40414b; } .category_list_block a { display: flex; padding: 10px 0 16px; font-size: 16px; font-weight: 700; line-height: 25px; align-items: center; letter-spacing: -0.02em; color: var(--color-white); justify-content: space-between; } .category_list_block a span { gap: 8px; font-weight: 700; align-items: center; display: inline-flex; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .category_list_block a span:first-child { transform: translateX(-24px); } .category_list_block a span:first-child i { opacity: 0; color: inherit; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; transform: rotate(-45deg); } .category_list_block a:hover span { color: var(--color-primary); } .category_list_block a:hover span:first-child { transform: translateX(0px); } .category_list_block a:hover span:first-child i { opacity: 1; } .tags_block li { margin-right: 5px; margin-bottom: 10px; display: inline-block; } .tags_block li a { font-weight: 500; font-size: 14px; padding: 7px 19px; color: var(--color-white); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; backdrop-filter: blur(40px); box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } .tags_block li a::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/blog/noise.html); background-repeat: no-repeat; background-size: cover; } .tags_block li a:after { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .tags_block li:hover a { color: var(--color-secondary); background: var(--color-primary); } /*----------------------------------------*/ /* 27. sidebar start /*----------------------------------------*/ .offcanvas-sidebar .sidebar-logo, .offcanvas-sidebar .sidebar-content, .offcanvas-sidebar .sidebar-contact-info, .offcanvas-sidebar .sidebar-newsletter { -webkit-transition: 0.3s var(--easing); -o-transition: 0.3s var(--easing); transition: 0.3s var(--easing); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; } .offcanvas-sidebar.active .sidebar-logo, .offcanvas-sidebar.active .sidebar-content, .offcanvas-sidebar.active .sidebar-contact-info, .offcanvas-sidebar.active .sidebar-newsletter, .offcanvas-sidebar.active .sidebar-menu-close { opacity: 1; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .offcanvas-sidebar.active .sidebar-logo { transition-delay: .2s; } .offcanvas-sidebar.active .sidebar-content { transition-delay: .3s; } .offcanvas-sidebar.active .sidebar-contact-info { transition-delay: .4s; } .offcanvas-sidebar.active .sidebar-newsletter { transition-delay: .5s; } .offcanvas-sidebar.active .sidebar-menu-close { transition-delay: .6s; } .sidebar-menu-close { position: absolute; top: 20px; right: 30px; text-align: center; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } .sidebar-menu-close .xb-close { background: none; } .offcanvas-sidebar .xb-close::before, .offcanvas-sidebar .xb-close::after { background-color: var(--color-white); } .offcanvas-sidebar { position: fixed; overflow-y: auto; top: 0; right: -775px; max-width: 688px; width: 100%; padding: 70px; height: 100%; display: block; z-index: 1020; background-color: #2605bd; transition-duration: 500ms; background-image: url(../img/bg/sidebar_bg.html); background-repeat: no-repeat; background-size: cover; background-position: center bottom; display: flex; justify-content: start; flex-direction: column; } @media (max-width: 1199px) { .offcanvas-sidebar { max-width: 600px; } } .offcanvas-sidebar.active { right: 0; } .sidebar-content { font-size: 30px; font-weight: 600; max-width: 390px; line-height: 142.2%; letter-spacing: -0.9px; color: var(--color-white); text-transform: capitalize; } .sidebar-heading { font-size: 14px; font-weight: 700; margin-bottom: 28px; display: inline-block; letter-spacing: 0.12em; color: var(--color-white); text-transform: uppercase; } .sidebar-info-list li { display: flex; font-size: 20px; font-weight: 500; align-items: center; letter-spacing: -0.03em; color: var(--color-white); } .sidebar-info-list li span { margin-right: 15px; } .sidebar-info-list li:not(:last-child) { margin-bottom: 25px; } .sidebar-info-list li a { color: currentColor; } .sidebar-newsletter-from { max-width: 409px; position: relative; } .sidebar-newsletter-from input { height: 60px; padding: 18px 60px 18px 18px; color: var(--color-black); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; background-color: var(--color-white); } .sidebar-newsletter-from input::placeholder { color: var(--color-black); } .sidebar-newsletter-from button { width: 54px; height: 54px; font-size: 20px; display: flex; align-items: center; justify-content: center; position: absolute; top: 3px; right: 3px; color: var(--color-white); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; background-color: var(--color-secondary); } /*----------------------------------------*/ /* 27. sidebar end /*----------------------------------------*/ /*----------------------------------------*/ /* 03. globel /*----------------------------------------*/ @media (min-width: 1024px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1320px; padding-left: 15px; padding-right: 15px; } } .g-15 { padding: 0 5px; } .g-15 > * { padding-left: 8px; padding-right: 8px; } .g-10 { padding: 0 5px; } .g-10 > * { padding-left: 5px; padding-right: 5px; } .o-hidden { overflow: hidden; } .o-clip { overflow: clip; } .mxw-1800 { max-width: 1800px; } .mxw-1650 { max-width: 1650px; } .mlr-20 { margin: 0 20px; } @media (max-width: 767px) { .mlr-20 { margin: 0; } } .plr-30 { padding: 0 30px; } .xb-border { position: relative; } .xb-border::after { content: ""; position: absolute; inset: 0; padding: 1px; z-index: -1; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; background: linear-gradient(146deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 19.3%, rgba(255, 255, 255, 0.06) 62.02%, rgba(255, 255, 255, 0.4) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .inner-page { font-size: 18px; line-height: 32px; color: var(--color-gray); } .sec-border { padding: 30px 20px; border: 1px solid rgba(255, 255, 255, 0.15); } @media (max-width: 767px) { .sec-border { padding: 30px 10px; } } .img-hove-effect .xb-img { overflow: hidden; position: relative; } .img-hove-effect .xb-img a:nth-child(2), .img-hove-effect .xb-img a:nth-child(3), .img-hove-effect .xb-img a:nth-child(4) { top: 0; left: 0; overflow: hidden; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } @media (max-width: 991px) { .img-hove-effect .xb-img a:nth-child(2), .img-hove-effect .xb-img a:nth-child(3), .img-hove-effect .xb-img a:nth-child(4) { width: 100%; } } .img-hove-effect .xb-img a img { height: 100%; width: 100%; object-fit: cover; } .img-hove-effect:hover .xb-img a:nth-child(2) { transform: scale(0.9); } .img-hove-effect:hover .xb-img a:nth-child(3) { transform: scale(0.7); } .img-hove-effect:hover .xb-img a:nth-child(4) { transform: scale(0.5); } .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: #5D6A83; border: 1px solid #EEE5E5; background-color: var(--color-white); 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: 4px 17px; margin: 7px; position: relative; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .tagcloud a:hover, .tags-links a:hover { color: var(--color-white); background-color: var(--color-primary); 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; } .tags-links a { min-height: 32px; padding: 2px 17px; } .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; } .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); } .hero-style { z-index: 1; min-height: 938px; padding-top: 195px; overflow: hidden; } @media (max-width: 991px) { .hero-style { padding-top: 170px; } } @media (max-width: 767px) { .hero-style { padding-top: 150px; } } .hero-style .hero-icon { margin-left: -38px; margin-right: -120px; transform: translateY(-40px); } @media (max-width: 1199px) { .hero-style .hero-icon { transform: translate(-40px, -25px); } } @media (max-width: 991px) { .hero-style .hero-icon { transform: translate(0px, 6px); margin-right: -200px; } } @media (max-width: 767px) { .hero-style .hero-icon { margin-right: 0px; transform: translate(70px, 30px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-style .hero-icon { transform: translate(130px, 30px); } } .hero-style .hero-icon img { width: 98.9%; } @media (max-width: 991px) { .hero-style .hero-icon img { width: 68%; } } .hero-style--two { min-height: 920px; padding-top: 185px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-style--two { min-height: 790px; } } @media (max-width: 1199px) { .hero-style--two { min-height: 755px; padding-top: 160px; } } .hero-style--three { min-height: 920px; padding-top: 320px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-style--three { min-height: 800px; padding-top: 280px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .hero-style--three { min-height: 860px; padding-top: 230px; } } @media (max-width: 1199px) { .hero-style--three { min-height: 790px; padding-top: 210px; } } @media (max-width: 991px) { .hero-style--three { min-height: 730px; padding-top: 190px; } } @media (max-width: 767px) { .hero-style--three { padding-top: 150px; padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-style--three { padding-top: 190px; } } .hero-style--three::before { position: absolute; content: ''; left: 0; bottom: 0; height: 100%; width: 100%; z-index: 1; background-image: url(../img/bg/hero-gradient.html); background-position: center center; background-repeat: no-repeat; background-size: cover; } .scale-animation { opacity: 0; transition: all 1s cubic-bezier(0.55, 0.085, 0, 0.99); transform: rotateX(20deg) translate3d(85px, 304px, 418px) scaleZ(1.83); } .scale-animation.animated { opacity: 1; transform: rotateX(0deg) translate3d(0px, 0px, 0px) scaleZ(1); } .hero-content { max-width: 961px; perspective: 2000px; transform-style: preserve-3d; } .hero-content .title { font-size: 72px; line-height: 90px; letter-spacing: -0.07em; color: var(--color-white); font-family: var(--font-heading); } @media (max-width: 1199px) { .hero-content .title { font-size: 62px; line-height: 80px; } } @media (max-width: 991px) { .hero-content .title { font-size: 50px; line-height: 72px; } } @media (max-width: 767px) { .hero-content .title { font-size: 36px; line-height: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-content .title { line-height: 60px; font-size: 48px; } } .hero-content .sub-title { font-size: 20px; max-width: 678px; line-height: 30px; margin: 6px 0 32px; display: inline-block; } @media (max-width: 1199px) { .hero-content .sub-title { max-width: 650px; } } @media (max-width: 767px) { .hero-content .sub-title { font-size: 16px; } } .hero-content .sub-title.animated { transition-delay: 0.2s; } .hero-content .hero-btn.animated { transition-delay: 0.4s; } .hero-content--two { padding-top: 65px; } @media (max-width: 991px) { .hero-content--two { padding-top: 30px; } } @media (max-width: 767px) { .hero-content--two { padding-top: 10px; } } .hero-content--two .sub-title { margin: 6px 0 42px; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .hero-content--two .title { font-size: 65px; line-height: 82px; } } @media (max-width: 1199px) { .hero-content--two .title { font-size: 57px; line-height: 70px; } } @media (max-width: 991px) { .hero-content--two .title { font-size: 52px; line-height: 65px; } } @media (max-width: 767px) { .hero-content--two .title { font-size: 36px; line-height: 52px; } } .hero-content--three { margin: 0 auto; max-width: 1476px; position: relative; z-index: 1; } .hero-content--three .title { font-weight: 700; font-size: 80px; line-height: 1.47; display: inline; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-content--three .title { font-size: 65px; } } @media (max-width: 1199px) { .hero-content--three .title { font-size: 56px; } } @media (max-width: 991px) { .hero-content--three .title { font-size: 44px; } } @media (max-width: 767px) { .hero-content--three .title { font-size: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-content--three .title { font-size: 35px; } } .hero-content--three .title img { height: 84px; width: 217px; overflow: hidden; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-content--three .title img { height: 65px; } } @media (max-width: 1199px) { .hero-content--three .title img { height: 56px; } } @media (max-width: 991px) { .hero-content--three .title img { height: 46px; } } @media (max-width: 767px) { .hero-content--three .title img { width: 170px; height: 40px; } } .hero-content--three .sub-title { max-width: 605px; font-weight: 600; font-size: 24px; line-height: 125%; line-height: 1.3; margin-left: 50px; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .hero-content--three .sub-title { margin-left: 0; } } @media (max-width: 1199px) { .hero-content--three .sub-title { margin-left: 0; } } @media (max-width: 991px) { .hero-content--three .sub-title { max-width: 475px; margin-top: 18px; } } @media (max-width: 767px) { .hero-content--three .sub-title { font-size: 18px; width: 100%; } } .hero-content--three .hero-shape { float: right; margin-top: -20px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-content--three .hero-shape { margin-top: -115px; margin-right: -40px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .hero-content--three .hero-shape { margin-right: 0; margin-top: -50px; } } @media (max-width: 1199px) { .hero-content--three .hero-shape { margin-top: -115px; margin-right: -40px; } } @media (max-width: 991px) { .hero-content--three .hero-shape { margin-top: -30px; } } @media (max-width: 767px) { .hero-content--three .hero-shape { display: none; } } .hero-content-bottom { gap: 30px; width: 100%; flex-wrap: nowrap; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .hero-content-bottom { margin-top: 30px; flex-wrap: wrap; justify-content: start; } } @media (max-width: 1199px) { .hero-content-bottom { margin-top: 30px; flex-wrap: wrap; justify-content: start; } } @media (max-width: 767px) { .hero-content-bottom { gap: 25px; } } .hero-content-bottom .xb-item--text { font-size: 24px; font-weight: 600; line-height: 1.4; } @media (max-width: 767px) { .hero-content-bottom .xb-item--text { font-size: 18px; } } .hero-content-bottom .xb-item--text span { text-transform: uppercase; color: var(--color-primary); } .hero-content-bottom .xb-item--audience { flex-wrap: nowrap; } .hero-content-bottom .xb-item--audience img:nth-child(2), .hero-content-bottom .xb-item--audience img:nth-child(3) { margin-left: -24px; } @media (max-width: 991px) { .hero-content-bottom .xb-item--audience img:nth-child(2), .hero-content-bottom .xb-item--audience img:nth-child(3) { margin-left: -18px; } } @media (max-width: 767px) { .hero-content-bottom .xb-item--audience img:nth-child(2), .hero-content-bottom .xb-item--audience img:nth-child(3) { margin-left: -12px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-content-bottom .xb-item--audience img { max-width: 85px; } } @media (max-width: 1199px) { .hero-content-bottom .xb-item--audience img { max-width: 85px; } } @media (max-width: 991px) { .hero-content-bottom .xb-item--audience img { max-width: 64px; } } @media (max-width: 767px) { .hero-content-bottom .xb-item--audience img { max-width: 54px; } } .hero-content-bottom .xb-item--holder { gap: 50px; flex-wrap: nowrap; } @media (max-width: 767px) { .hero-content-bottom .xb-item--holder { gap: 25px; } } .hero-linear { position: absolute; left: 0; bottom: -45px; width: 102%; height: 65px; background: #00020f; filter: blur(10px); } .hero-img-container { position: relative; margin-right: -203px; margin-left: 110px; } @media (max-width: 1600px) { .hero-img-container { margin-right: -130px; margin-left: 50px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-img-container { margin-left: 0; margin-right: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .hero-img-container { bottom: -25px; } } @media (max-width: 1199px) { .hero-img-container { margin-left: 0; margin-right: -30px; bottom: -70px; } } @media only screen and (max-width: 1023px) { .hero-img-container { margin-left: -25px; margin-right: -35px; } } @media (max-width: 991px) { .hero-img-container { margin-right: 0; margin-left: 0; } } @media (max-width: 767px) { .hero-img-container { bottom: -20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-img-container { max-width: 80%; margin: 0 auto; } } .hero-img-container .xb-text-left { top: 78px; left: 0; position: absolute; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .hero-img-container .xb-text-left { left: -10px; } } @media (max-width: 1199px) { .hero-img-container .xb-text-left { max-width: 32%; } } .hero-img-container .xb-text-left .img { display: block; opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99); } .hero-img-container .xb-text-left .img:not(:last-child) { margin-bottom: 10px; } @media (max-width: 767px) { .hero-img-container .xb-text-left .img:not(:last-child) { margin-bottom: 5px; } } .hero-img-container .xb-text-left.animated .img { opacity: 1; transition-delay: .6s; transform: translateY(0); } .hero-img-container .xb-text-left.animated .img--2 { transition-delay: .8s; } .hero-img-container .xb-text-right { position: absolute; top: 96px; right: 0; } @media (max-width: 1199px) { .hero-img-container .xb-text-right { max-width: 32%; right: 20px; } } @media (max-width: 991px) { .hero-img-container .xb-text-right { right: 0; } } .hero-img-container .xb-text-right .img { display: block; opacity: 0; transition-delay: .2s; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99); } .hero-img-container .xb-text-right .img:not(:last-child) { margin-bottom: 10px; } @media (max-width: 767px) { .hero-img-container .xb-text-right .img:not(:last-child) { margin-bottom: 5px; } } .hero-img-container .xb-text-right.animated .img { opacity: 1; transition-delay: .6s; transform: translateY(0); } .hero-img-container .xb-text-right.animated .img--2 { transition-delay: .8s; } .hero-img-container .xb-text-right.animated .img--3 { transition-delay: 1s; } .hero-img-container .xb-glassy-effect-img { position: absolute; top: 23%; left: 15.5%; opacity: 0; transform: scaleY(0); transform-origin: bottom center; transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99); } @media (max-width: 1600px) { .hero-img-container .xb-glassy-effect-img { top: 28.3%; left: 21.5%; max-width: 52%; } } .hero-img-container .xb-glassy-effect-img.animated { opacity: 1; transition-delay: .5s; transform: scaleY(1); } .ai-marketing-hero { padding: 30px; } @media (max-width: 767px) { .ai-marketing-hero { padding: 15px; } } /*----------------------------------------*/ /* 22. breadcrumb /*----------------------------------------*/ .breadcrumb { min-height: 500px; padding: 150px 0 100px; margin: 0; display: flex; align-items: center; } @media (max-width: 991px) { .breadcrumb { min-height: 380px; padding: 140px 0 100px; } } @media (max-width: 767px) { .breadcrumb { min-height: 360px; } } .breadcrumb__content { text-align: center; } .breadcrumb__list { display: inline-flex; align-items: center; position: relative; } .breadcrumb__list::before, .breadcrumb__list::after { position: absolute; content: ''; left: -16px; top: 0; height: 8px; width: 8px; top: 50%; transform: translateY(-50%); background: var(--color-primary); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } .breadcrumb__list::after { left: auto; right: -16px; } .breadcrumb .breadcrumb-item { color: var(--color-white); text-transform: capitalize; } .breadcrumb .breadcrumb-item a { color: currentColor; } .breadcrumb__title { font-weight: 400; font-size: 65px; margin-top: 24px; letter-spacing: -0.07em; color: var(--color-white); font-family: var(--font-heading); } @media (max-width: 1199px) { .breadcrumb__title { font-size: 52px; } } @media (max-width: 991px) { .breadcrumb__title { font-size: 45px; margin-top: 15px; } } @media (max-width: 767px) { .breadcrumb__title { font-size: 34px; margin-top: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__title { font-size: 36px; } } .breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: 0; color: rgba(255, 255, 255, 0.75); content: var(--bs-breadcrumb-divider, "https://html.xpressbuddy.com/"); } .breadcrumb-item + .breadcrumb-item::after { float: left; padding-right: var(--bs-breadcrumb-item-padding-x); color: rgba(255, 255, 255, 0.75); content: var(--bs-breadcrumb-divider, "https://html.xpressbuddy.com/"); } .thm-btn { font-size: 16px; font-weight: 700; z-index: 1; line-height: 1.1; letter-spacing: 0em; border-style: none; align-self: center; position: relative; display: inline-flex; align-items: center; overflow: clip; justify-content: center; text-transform: uppercase; background: transparent; color: var(--color-secondary); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .thm-btn .arrow-icon { height: 46px; width: 46px; overflow: hidden; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; background: var(--color-secondary); } .thm-btn .arrow-icon svg { position: absolute; left: 9px; top: 10px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .thm-btn .arrow-icon svg:first-child { transform: translate(0); } .thm-btn .arrow-icon svg:last-child { transform: translate(-30px, 30px); } .thm-btn .arrow-icon svg rect { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .thm-btn:hover .arrow-icon svg:nth-child(1) { transform: translate(30px, -30px); } .thm-btn:hover .arrow-icon svg:nth-child(2) { transition-delay: .1s; transform: translate(0, 0); } .agency-btn .text { padding: 21.2px 20px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 30px 0 0 30px; background: var(--color-primary); } .agency-btn .arrow { padding: 7px; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 0 30px 30px 0; background: var(--color-primary); } .agency-btn:hover { color: var(--color-secondary); } .agency-btn:hover .text, .agency-btn:hover .arrow { border-radius: 30px; } .chatbot-btn { gap: 27px; color: #fff; background: #060E50; padding: 7px 7px 7px 20px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .chatbot-btn { gap: 10px; padding: 7px 7px 7px 10px; } } .chatbot-btn .btn-bg { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .chatbot-btn::after { content: ""; position: absolute; inset: 0; padding: 1px; z-index: -1; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; background: linear-gradient(146deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 19.3%, rgba(255, 255, 255, 0.06) 62.02%, rgba(255, 255, 255, 0.4) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .chatbot-btn:hover .btn-bg { left: -100px; } .custom-btn .xb-icon { height: 30px; width: 30px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .custom-btn .xb-icon img { position: absolute; left: 8px; top: 3px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .custom-btn .xb-icon img:nth-child(1) { transform: translate(0); } .custom-btn .xb-icon img:nth-child(2) { transform: translate(-30px, 30px); } .custom-btn:hover .xb-icon img:nth-child(1) { transform: translate(30px, -30px); } .custom-btn:hover .xb-icon img:nth-child(2) { transition-delay: .1s; transform: translate(0, 0); } .ai-marketing-btn { gap: 15px; z-index: 1; display: inline-flex; align-items: center; font-weight: 700; font-size: 16px; padding: 5px 15px 5px 5px; color: var(--color-black); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--color-white); position: relative; } .ai-marketing-btn::before { position: absolute; content: ''; height: 50px; width: 0; top: 5px; left: 5px; z-index: -1; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--color-primary); } .ai-marketing-btn .arrow { height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); } .ai-marketing-btn .text { display: flex; overflow: hidden; position: relative; } .ai-marketing-btn .text span { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ai-marketing-btn .text span:nth-child(1) { transform: translateY(0); } .ai-marketing-btn .text span:nth-child(2) { left: 0; top: 0; position: absolute; transform: translateY(30px); } .ai-marketing-btn:hover { color: var(--color-secondary); } .ai-marketing-btn:hover:before { width: calc(100% - 10px); } .ai-marketing-btn:hover .text span:nth-child(1) { transform: translateY(-30px); } .ai-marketing-btn:hover .text span:nth-child(2) { transform: translateY(0); } /*----------------------------------------*/ /* 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; font-size: 16px; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; color: var(--color-secondary); background-color: var(--color-primary); } .xb-backtotop .scroll:hover { margin-bottom: 4px; } .xb-backtotop.style-two .scroll { color: var(--color-white); } .xb-backtotop.style-three .scroll { color: var(--color-black); } /*----------------------------------------*/ /* 19. 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: 23px; color: var(--color-dark); } .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: #11121d; } .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-header-menu-scroll .xb-menu-primary > li .children { padding-left: 15px; } .xb-header-menu-scroll .xb-menu-primary > li .sub-menu a, .xb-header-menu-scroll .xb-menu-primary > li .children a { padding-left: 0; } .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: var(--color-white); -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; 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; text-transform: capitalize; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .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: 0px; } .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: 40px; } .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; font-size: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; color: var(--color-white); padding: 12px 35px 13px 15px; background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.1); } .xb-header-mobile-search .search-field:focus { 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(--color-primary); } .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-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(--color-white); } .xb-nav-mobile { color: var(--color-white); height: 40px; width: 40px; border-radius: 6px; font-size: 18px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border: 1px solid var(--color-white); } @media (max-width: 767px) { .xb-nav-mobile { height: 35px; width: 35px; } } .xb-nav-mobile:hover { color: var(--color-secondary); background: var(--color-primary); border: 1px solid var(--color-primary); } /*----------------------------------------*/ /* preloader /*----------------------------------------*/ .preloader { top: 0; left: 0; right: 0; bottom: 0; position: fixed; z-index: 999999; background-color: var(--color-secondary); } .preloader .loader-circle { top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 160px; height: 160px; direction: ltr; position: absolute; border-radius: 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .preloader .loader-line-mask { position: absolute; left: 50%; top: 50%; width: 80px; height: 100px; margin-left: -80px; margin-top: -80px; overflow: hidden; transform-origin: 80px 80px; animation: preloaderSpin 1.5s infinite linear; } .preloader .loader-line { width: 160px; height: 160px; border-radius: 50%; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(255, 255, 255, 0.44)',endColorStr='rgba(255, 255, 255, 0)'); background-color: initial; position: relative; } .preloader .loader-line:before { top: 1px; left: 1px; right: 1px; bottom: 1px; z-index: 99; content: ''; position: absolute; border-radius: inherit; background-color: var(--color-secondary); } .preloader .loader-logo { top: 50%; left: 0; right: 0; position: absolute; text-align: center; transform: translate(0%, -50%); } .preloader .loader-logo img { max-width: 60%; } @keyframes preloaderSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .xb-footer-heading { position: relative; } .xb-footer-heading .title { font-weight: 900; font-size: 347px; text-align: center; color: #121521; letter-spacing: 0.02em; text-transform: uppercase; } @media only screen and (min-width: 1500px) and (max-width: 1600px) { .xb-footer-heading .title { font-size: 289px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-footer-heading .title { font-size: 247px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-footer-heading .title { font-size: 216px; } } @media (max-width: 1199px) { .xb-footer-heading .title { font-size: 185px; } } @media only screen and (max-width: 1023px) { .xb-footer-heading .title { font-size: 179px; } } @media (max-width: 991px) { .xb-footer-heading .title { font-size: 139px; } } @media (max-width: 767px) { .xb-footer-heading .title { font-size: 63px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-footer-heading .title { font-size: 105px; } } .xb-footer-heading .mail { gap: 15px; font-size: 32px; padding: 26px 40px; display: inline-flex; align-items: center; position: absolute; left: 50%; top: 38%; z-index: 1; overflow: hidden; transform: translate(-50%, -50%); letter-spacing: -0.03em; color: var(--color-secondary); font-family: var(--font-heading); border-radius: 61px; transition: 0.3s; } .xb-footer-heading .mail::before { position: absolute; content: ''; left: 0; top: 0; z-index: -1; height: 100%; width: 100%; background: linear-gradient(52deg, #2c32fe 0%, #00a4af 49%, #00ff97 100%); background-size: 200% 200%; animation: gradient 5s ease-in-out infinite alternate; } @media (max-width: 1199px) { .xb-footer-heading .mail { padding: 15px 30px; } } @media (max-width: 991px) { .xb-footer-heading .mail { font-size: 22px; padding: 5px 25px; } } @media (max-width: 767px) { .xb-footer-heading .mail { padding: 3px 12px; font-size: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-footer-heading .mail { font-size: 20px; padding: 12px 25px; } } @media (max-width: 767px) { .xb-footer-heading .mail img { max-width: 26px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-footer-heading .mail img { max-width: 32px; } } .xb-footer-wrap { padding-top: 50px; background: var(--color-secondary); } .xb-footer-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 50px; margin-top: -30px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-footer-nav { margin-top: 5px; } } @media (max-width: 1199px) { .xb-footer-nav { margin-top: 20px; } } @media (max-width: 991px) { .xb-footer-nav { padding: 0 20px; margin-top: 40px; } } @media (max-width: 767px) { .xb-footer-nav { flex-wrap: wrap; gap: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-footer-nav { gap: 50px; justify-content: center; } } .xb-footer-nav-item { text-align: center; } @media (max-width: 767px) { .xb-footer-nav-item { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-footer-nav-item { width: unset; text-align: start; } } .xb-footer-nav-item .sub-title { font-weight: 700; color: #b2b3b7; letter-spacing: -0.02em; text-transform: uppercase; } @media (max-width: 991px) { .xb-footer-nav-item .sub-title { font-size: 13px; } } .xb-footer-nav-item .title { z-index: 1; font-size: 42px; margin-top: 15px; position: relative; letter-spacing: -0.03em; color: var(--color-white); text-transform: capitalize; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-footer-nav-item .title { font-size: 30px; } } @media (max-width: 1199px) { .xb-footer-nav-item .title { font-size: 28px; } } @media (max-width: 991px) { .xb-footer-nav-item .title { font-size: 22px; } } .xb-footer-nav-item .title a { color: currentColor; } .xb-footer-nav-item .title::before { position: absolute; content: ''; left: 0; bottom: 0; width: 0; height: 1px; opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--color-primary); } .xb-footer-nav-item .title:hover { color: var(--color-primary); } .xb-footer-nav-item .title:hover::before { width: 100%; opacity: 1; } .xb-social-media-item { z-index: 1; position: relative; padding: 15.5px 15px 15.5px 20px; } .xb-social-media-item:not(:last-child) { border-right: 1px solid #262833; } @media (max-width: 767px) { .xb-social-media-item:not(:last-child) { border-right: none; border-bottom: 1px solid #262833; } } .xb-social-media-item::before { position: absolute; content: ''; left: 0; top: 0; z-index: -1; height: 100%; width: 0; opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--color-primary); } .xb-social-media-item .xb-item--holder { gap: 10px; } .xb-social-media-item .xb-item--name { font-weight: 600; font-size: 14px; text-transform: uppercase; color: var(--color-white); } .xb-social-media-item .xb-item--arrow svg rect { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-social-media-item .xb-item--icon i { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-social-media-item .xb-item--icon svg path { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-social-media-item:hover .xb-item--name { color: var(--color-secondary); } .xb-social-media-item:hover .xb-item--icon i { color: var(--color-secondary); } .xb-social-media-item:hover .xb-item--icon svg path { fill: var(--color-secondary); } .xb-social-media-item:hover .xb-item--arrow svg rect { fill: var(--color-secondary); } .xb-social-media-item:hover::before { opacity: 1; width: 100%; } .xb-social-media-wrap { display: grid; margin-top: 85px; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #262833; border-bottom: 1px solid #262833; } @media (max-width: 767px) { .xb-social-media-wrap { margin-top: 65px; grid-template-columns: repeat(1, 1fr); } } .xb-footer-bottom { display: flex; align-items: center; flex-wrap: wrap; } .xb-footer-bottom .contact-item { width: 25%; gap: 8px; display: flex; align-items: center; padding: 0 16px; position: relative; min-height: 91px; } @media (max-width: 767px) { .xb-footer-bottom .contact-item { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-footer-bottom .contact-item { justify-content: center; } } .xb-footer-bottom .contact-item:not(:last-child) { border-right: 1px solid #262833; } @media (max-width: 767px) { .xb-footer-bottom .contact-item:not(:last-child) { border-right: none; border-bottom: 1px solid #262833; } } .xb-footer-bottom .contact-item img { transform: translateY(-4px); } .xb-footer-bottom .copyright-item { width: 50%; justify-content: center; } @media (max-width: 767px) { .xb-footer-bottom .copyright-item { width: 100%; } } .xb-footer-bottom .copyright-item p { font-weight: 500; } .xb-footer-bottom .copyright-item p a { color: var(--color-white); } .xb-footer-bottom .contact-method { font-size: 24px; letter-spacing: -0.01em; color: var(--color-white); text-transform: capitalize; font-family: var(--font-heading); } @media only screen and (min-width: 1500px) and (max-width: 1600px) { .xb-footer-bottom .contact-method { font-size: 22px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-footer-bottom .contact-method { font-size: 19px; } } @media (max-width: 1199px) { .xb-footer-bottom .contact-method { font-size: 16px; } } .ac-footer-nav { gap: 30px; padding-bottom: 52px; justify-content: center; } @media (max-width: 767px) { .ac-footer-nav { gap: 15px 35px; } } .ac-footer-nav li a { position: relative; font-weight: 500; font-size: 20px; letter-spacing: -0.01em; color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ac-footer-nav li a::before { position: absolute; content: ''; left: 0; bottom: 0; width: 0; height: 1px; opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--color-primary); } .ac-footer-nav li a:hover { color: var(--color-primary); } .ac-footer-nav li a:hover::before { width: 100%; opacity: 1; } .ac-footer-wrap { position: relative; padding: 75px 0 45px; backdrop-filter: blur(40px); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 4px 24px -1px rgba(28, 9, 61, 0.2); background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); } @media only screen and (min-width: 576px) and (max-width: 767px) { .ac-footer-wrap { margin: 0 10px !important; } } .ac-footer-wrap::before { position: absolute; content: ''; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; border-radius: inherit; background-image: url(../img/shape/footer-noise.html); background-repeat: no-repeat; background-size: cover; } .xb-footer-inner { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .xb-footer-inner .xb-newsletter { padding-left: 80px !important; padding-right: 80px !important; } @media (max-width: 991px) { .xb-footer-inner .xb-newsletter { padding-left: 30px !important; padding-right: 30px !important; } } @media (max-width: 767px) { .xb-footer-inner .xb-newsletter { padding-left: 0 !important; padding-right: 0 !important; } } .xb-footer-inner .xb-footer-btn { padding-left: 95px !important; } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-footer-inner .xb-footer-btn { padding-left: 65px !important; } } @media (max-width: 1199px) { .xb-footer-inner .xb-footer-btn { padding-left: 20px !important; } } @media only screen and (max-width: 1023px) { .xb-footer-inner .xb-footer-btn { padding-left: 8px !important; } } .xb-footer-inner .footer-col:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.2); } @media (max-width: 991px) { .xb-footer-inner .footer-col:not(:last-child) { border-right: none; } } @media (max-width: 991px) { .xb-footer-inner .footer-col:first-child { border-right: 1px solid rgba(255, 255, 255, 0.2); } } @media (max-width: 767px) { .xb-footer-inner .footer-col:first-child { border-right: none; } } .xb-footer-inner .xb-footer-item { padding: 40px 0; min-height: 199px; } @media (max-width: 991px) { .xb-footer-inner .xb-footer-item { min-height: 170px; padding: 40px 0; } } @media (max-width: 767px) { .xb-footer-inner .xb-footer-item { padding: 30px 0; min-height: 0; } } .xb-footer-inner .xb-footer-item .sub-title { font-weight: 500; font-size: 14px; margin-bottom: 20px; letter-spacing: 0.01em; text-transform: uppercase; } .xb-footer-input-form { position: relative; } .xb-footer-input-form input { height: 60px; font-size: 18px; color: var(--color-white); padding: 5px 110px 5px 20px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; background: var(--color-secondary); border: 1px solid rgba(255, 255, 255, 0.2); } .xb-footer-input-form input:focus { border-color: var(--color-primary); } .xb-footer-input-form input::placeholder { color: #808087; } .xb-footer-input-form button { font-weight: 700; position: absolute; top: 3px; right: 3px; z-index: 1; overflow: hidden; padding: 13px 22px; color: var(--color-white); text-transform: uppercase; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; background: #060E50; } .xb-footer-input-form button::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; transform: rotate(-180deg); background: radial-gradient(85.63% 149.89% at -2.12% 64.17%, #00ff97 0%, rgba(0, 2, 15, 0) 100%); } .xb-footer-input-form button::after { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; background: linear-gradient(146deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 19.3%, rgba(255, 255, 255, 0.06) 62.02%, rgba(255, 255, 255, 0.4) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .xb-social_icon { gap: 20px; display: inline-flex; } .xb-social_icon li a { width: 43px; height: 44px; z-index: 1; display: flex; align-items: center; justify-content: center; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: var(--color-white); border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; background: var(--color-secondary); } .xb-social_icon li a::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; border-radius: inherit; background-image: url(../img/bg/social_bg.html); background-repeat: no-repeat; background-size: cover; background-position: center center; } .xb-social_icon li a::after { position: absolute; content: ""; height: 100%; width: 100%; opacity: 0; z-index: -1; border-radius: inherit; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--color-primary); } .xb-social_icon li a svg path { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-social_icon li a:hover { color: var(--color-secondary); background: var(--color-primary); } .xb-social_icon li a:hover::after { opacity: 1; } .xb-social_icon li a:hover svg path { fill: var(--color-secondary); } .xb-copyright { gap: 15px; padding-top: 40px; } @media (max-width: 767px) { .xb-copyright { text-align: center; justify-content: center; } } .xb-copyright p { font-weight: 500; } .xb-copyright p a { color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .xb-copyright p a:hover { text-decoration: underline; } .xb-footer-bottom-title { padding: 50px 23px 12px 0; } @media (max-width: 991px) { .xb-footer-bottom-title { padding: 50px 15px 12px; } } @media (max-width: 767px) { .xb-footer-bottom-title { padding: 30px 15px 12px; } } .xb-footer-bottom-title .title { font-weight: 700; font-size: 133px; line-height: 1.1; position: relative; display: flex; justify-content: space-between; letter-spacing: -0.05em; text-transform: uppercase; } @media (max-width: 1600px) { .xb-footer-bottom-title .title { font-size: 110px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-footer-bottom-title .title { font-size: 92px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-footer-bottom-title .title { font-size: 80px; } } @media (max-width: 1199px) { .xb-footer-bottom-title .title { font-size: 66px; } } @media (max-width: 991px) { .xb-footer-bottom-title .title { font-size: 50px; } } @media (max-width: 767px) { .xb-footer-bottom-title .title { font-size: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-footer-bottom-title .title { font-size: 36px; } } .xb-footer-bottom-title .title img { position: absolute; left: 51.8%; top: -15%; transform: translateX(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .xb-footer-bottom-title .title img { left: 52.3%; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .xb-footer-bottom-title .title img { top: -42px; } } @media (max-width: 1199px) { .xb-footer-bottom-title .title img { top: -42px; left: 52.8%; } } @media (max-width: 991px) { .xb-footer-bottom-title .title img { top: -27px; left: 52.8%; max-width: 17%; } } @media (max-width: 767px) { .xb-footer-bottom-title .title img { top: -10px; left: 52.5%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .xb-footer-bottom-title .title img { top: -20px; } } .xb-footer-linear { position: absolute; left: 0; top: 0; height: 235px; width: 100%; z-index: -1; filter: blur(181.5px); background: linear-gradient(180deg, #112049 0%, #112049 14.27%, #112049 19.46%, #112049 25.41%, #112049 46.73%, #112049 100%); } .ai-footer-heading { margin-top: -140px; } .ai-footer-heading .title { font-size: 330px; line-height: 2; background: url("../img/bg/footer-heading-bg.html"); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 300% 300%; animation: gradient 8s linear infinite; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media only screen and (max-width: 1600px) { .ai-footer-heading .title { font-size: 272px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .ai-footer-heading .title { font-size: 230px; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-footer-heading .title { font-size: 200px; } } @media (max-width: 1199px) { .ai-footer-heading .title { font-size: 164px; } } @media (max-width: 991px) { .ai-footer-heading .title { font-size: 120px; } } @media (max-width: 767px) { .ai-footer-heading .title { font-size: 82px; line-height: 1.3; margin-top: 50px; text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-footer-heading .title { font-size: 95px; margin-top: 100px; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-webkit-keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .ai-footer-wrap { padding: 120px 20px 0; border: 1px solid rgba(255, 255, 255, 0.15); border-bottom: none; } @media (max-width: 767px) { .ai-footer-wrap { padding: 120px 10px 0; } } .footer-sec-title { max-width: 815px; } @media (max-width: 1199px) { .footer-sec-title { max-width: 500px; } } @media (max-width: 991px) { .footer-sec-title { max-width: 580px; } } @media (max-width: 1199px) { .footer-sec-title .title { font-size: 32px; } } @media (max-width: 767px) { .footer-sec-title .title { font-size: 26px; } } @media (max-width: 991px) { .footer-sec-title a { margin-top: 50px; } } @media (max-width: 991px) { .ai-social-link { gap: 30px; margin-top: 40px; display: inline-flex; } } .ai-social-link li:not(:last-child) { margin-bottom: 8px; } .ai-social-link li a { font-weight: 500; font-size: 11px; position: relative; text-transform: uppercase; color: var(--color-white); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .ai-social-link li a::before { position: absolute; content: ''; left: 0; bottom: 0; z-index: -1; height: 1px; width: 0; opacity: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--color-primary); } .ai-social-link li a:hover { color: var(--color-primary); } .ai-social-link li a:hover::before { width: 100%; opacity: 1; } .ai-footer-link { text-align: end; } .ai-footer-link p { max-width: 470px; font-size: 18px; line-height: 30px; } @media (max-width: 1199px) { .ai-footer-link p { max-width: 380px; } } @media (max-width: 991px) { .ai-footer-link p { margin: 0 auto; } } @media (max-width: 991px) { .ai-footer-link { margin-top: 50px; text-align: center; } } .ai-copyright { margin: 0 -20px; padding: 21px 20px; background: #11121d; } @media (max-width: 767px) { .ai-copyright { margin: 0 -10px; } } .ai-footer-links li { margin-right: 20px; padding-right: 20px; position: relative; } .ai-footer-links li::before { position: absolute; content: ""; top: 50%; right: 0; width: 2px; height: 12px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--color-white); } .ai-footer-links li:last-child { padding-right: 0; margin-right: 0; } .ai-footer-links li:last-child::before { display: none; } .ai-footer-links li a { font-weight: 500; color: var(--color-white); } .ai-footer-links li a:hover { text-decoration: underline; } .ai-footer-shape { position: absolute; left: 50%; bottom: -100px; transform: translateX(-50%); } @media (max-width: 767px) { .ai-footer-shape { bottom: -40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .ai-footer-shape { bottom: -85px; } } .ai-footer-shape img { width: 370px; } .ai-footer-inner { margin-top: -150px; } @media only screen and (max-width: 1600px) { .ai-footer-inner { margin-top: -105px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .ai-footer-inner { margin-top: -74px; flex-wrap: nowrap; } } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .ai-footer-inner { margin-top: -60px; } } @media (max-width: 1199px) { .ai-footer-inner { margin-top: -25px; flex-wrap: nowrap; align-items: start; } } @media (max-width: 991px) { .ai-footer-inner { flex-wrap: wrap; margin-top: 10px; text-align: center; justify-content: center; } } @media (max-width: 767px) { .ai-footer-inner { margin-top: 50px; } } /*# sourceMappingURL=main.css.map */