/*! Theme Name: dataskate Theme URI: https://www.webyant.com Author: Jayanti Solanki Author URI: https://www.webyant.com Description: Description Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: bosc Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. Bosc Tech Labs is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*! * Theme Variables * ----------------------------------------------- */ :root { --primary: #fef8f7; --primary-rgb: 28, 77, 134; --secondary: linear-gradient(104deg, #252525 -7%, #ff222b 93%); --secondary-rgb: 168, 207, 69; --dark: #332828; --dark-rgb: 21, 21, 21; --body-font-family: 'Poppins', sans-serif; --body-font-size: 16px; --body-font-weight: 400; --body-bg: #ffffff; --body-color: #554949; --body-line-height: 1.7; --heading-font-family: "Work Sans", sans-serif; --heading-font-weight: 600; --heading-color: var(--dark); --heading-margin-bottom: 16px; --heading-line-height: 1.13; --link-color: #131316; --link-hover-color: #131316; --btn-font-family: var(--body-font-family); --btn-font-size: 16px; --btn-font-weight: 500; --btn-line-height: 1.5; --btn-padding: 8px 18px; --btn-bg: transparent; --btn-border-width: 1px; --btn-color: var(--dark); --btn-border-color: transparent; --btn-hover-bg: transparent; --btn-hover-color: var(--body-color); --btn-hover-border-color: transparent; --form-control-font-family: var(--body-font-family); --form-control-font-size: var(--body-font-size); --form-control-font-weight: var(--body-font-weight); --form-control-line-height: 1.15; --form-control-padding: 8px 16px; --form-control-min-height: 48px; --form-control-bg: transparent; --form-control-border-color: #E6E8EC; --form-control-border-radius: 4px; --form-control-placeholder-color: #838E9E; --form-control-arrow: url('data:image/svg+xml,'); --hamburger-line-bg: #000; --paragraph-margin-bottom: 20px; --section-padding-y: 70px; --container-width: 1203px; --gutter-y: ; --gutter-x: 32px; } /*! * Reset Styles * ----------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } hr { box-sizing: content-box; height: 0; overflow: visible; } body { margin: 0; padding: 0; font-family: var(--body-font-family); font-size: var(--body-font-size); color: var(--body-color); line-height: var(--body-line-height); font-weight: var(--body-font-weight); background-color: var(--body-bg); text-align: left; } img { max-width: 100%; height: initial; } a { color: var(--link-color); text-decoration: none; /* -webkit-transition: all .5s; */ /* transition: all .3s; */ } p { margin-top: 0; margin-bottom: var(--paragraph-margin-bottom); } p:last-child { margin-bottom: 0; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { margin-bottom: 16px; font-style: normal; line-height: inherit; } ol, ul, dl { margin-top: 0; margin-bottom: 1.5rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: .5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } pre, code, kbd, samp { font-size: 1em; } pre { margin-top: 0; margin-bottom: 16px; overflow: auto; -ms-overflow-style: scrollbar; } figure { margin: 0 0 16px; } img { vertical-align: middle; border-style: none; } svg { overflow: hidden; vertical-align: middle; } table { border-collapse: collapse; } caption { padding-top: 12px; padding-bottom: 12px; text-align: left; caption-side: bottom; } th { text-align: inherit; text-align: -webkit-match-parent; } label { display: inline-block; margin-bottom: 0.5rem; font-size: 14px; color: #061C3D; } button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; outline: none !important; } button, input { overflow: visible; } button, select { text-transform: none; } [role="button"] { cursor: pointer; } select { word-wrap: normal; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: 8px; font-size: 24px; line-height: inherit; color: inherit; white-space: normal; } progress { vertical-align: baseline; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { outline-offset: -2px; -webkit-appearance: none; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none; } [hidden] { display: none !important; } code { font-size: 87.5%; color: #e83e8c; word-wrap: break-word; } a>code { color: inherit; } kbd { padding: 4px 8px; font-size: 87.5%; color: #fff; background-color: #212529; border-radius: 2px; } kbd kbd { padding: 0; font-size: 100%; font-weight: 700; } pre { display: block; font-size: 87.5%; color: #212529; } pre code { font-size: inherit; color: inherit; word-break: normal; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--heading-font-family); color: var(--heading-color); font-weight: var(--heading-font-weight); margin-top: 0; margin-bottom: var(--heading-margin-bottom); line-height: var(--heading-line-height); } h1, .h1 { font-size: 70px; font-weight: 400; } h2, .h2 { font-size: 36px; } h3, .h3 { font-size: calc(1.325rem + 0.9vw); } h4, .h4 { font-size: 28px; } h5, .h5 { font-size: 20px; } h6, .h6 { font-size: calc(var(--heading-font-size-base) * 1.125); } /*! * Common * ----------------------------------------------- */ .section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); } .section .section__head { margin-bottom: 48px; } .section .section__subtitle:after { display: none; margin-left: 16px; background: linear-gradient(90deg, var(--secondary) 0%, rgba(var(--secondary-rgb), 0) 100%); } .fs-16 { font-size: 16px !important; } .fs-18 { font-size: 18px !important; } .fs-20 { font-size: 20px !important; } .fs-22 { font-size: 22px !important; } .fs-26 { font-size: 26px !important; } .fs-28 { font-size: 28px !important; } .tt-uppercase { text-transform: uppercase !important; } .fw-medium { font-weight: 500 !important; } .fw-semibold { font-weight: 600 !important; } .fw-bold { font-weight: 700 !important; } .fw-bolder { font-weight: 800 !important; } .text-center { text-align: center !important; } .text-black { color: #000000 !important; } .text-white { color: #fff !important; } .text-gradient { background-image: linear-gradient(92deg, #252525 -65%, #ff222b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .text-secondary { color: var(--secondary) !important; } .overflow-hidden { overflow: hidden !important; } .bg-primary { --heading-color: #fff; background-color: var(--primary) !important; color: #fff; } .bg-primary .section__subtitle { color: #fff; } .bg-primary-light { background-color: #EFF3FF !important; } .bg-primary-light-2 { background-color: #f4f6f9 !important; } .bg-primary-light-3 { background-color: #f5f5f5 !important; } .bg-primary-light-4 { background-color: #f3f6f9 !important; } .bg-primary-light-5 { background-color: #151515 !important; } .bg-primary-light-6 { background-color: #f8f8f8 !important; } .bg-secondary { --heading-color: #fff; background: var(--secondary) !important; color: #fff; } .bg-dark { --heading-color: #fff; background-color: var(--dark); color: 919191; } .opacity-7 { opacity: 0.7; } .relative { position: relative; } /*! * Spacing * ----------------------------------------------- */ .ml-auto, .mx-auto { margin-left: auto !important; } .mr-auto, .mx-auto { margin-right: auto !important; } .mt-0, .my-0 { margin-top: 0 !important; } .mb-0, .my-0 { margin-bottom: 0 !important; } .mb-16 { margin-bottom: 16px !important; } .mb-32 { margin-bottom: 32px !important; } .mb-48 { margin-bottom: 48px !important; } .mb-60 { margin-bottom: 60px !important; } .pt-0, .py-0 { padding-top: 0 !important; } .pb-0, .py-0 { padding-bottom: 0 !important; } .p-50 { padding: 50px; } .mt-32 { margin-top: 32px !important; } .mt-64 { margin-top: 64px !important; } /*! * Grid System * ----------------------------------------------- */ .container, .container-fluid { width: 100%; padding-left: calc(var(--gutter-x) * .5); padding-right: calc(var(--gutter-x) * .5); } .container *, .container-fluid * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { max-width: var(--container-width); margin-left: auto; margin-right: auto; } .row { margin-top: calc(-1 * var(--gutter-y)); margin-left: calc(-.5 * var(--gutter-x)); margin-right: calc(-.5 * var(--gutter-x)); display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap: wrap; } .row>* { flex: 0 0 auto; width: 100%; min-height: 1px; margin-top: var(--gutter-y); padding-left: calc(var(--gutter-x) * .5); padding-right: calc(var(--gutter-x) * .5); } .row.row--lg { --gutter-x: 54px; } .row.row--sm { --gutter-x: 16px; } .gap { --gutter-y: var(--gutter-x); } .col-1 { width: 8.33333333%; } .col-2 { width: 16.66666667%; } .col-3 { width: 25%; } .col-4 { width: 33.33333333%; } .col-5 { width: 41.66666667%; } .col-6 { width: 50%; } .col-7 { width: 58.33333333%; } .col-8 { width: 66.66666667%; } .col-9 { width: 75%; } .col-10 { width: 83.33333333%; } .col-11 { width: 91.66666667%; } .col-12 { width: 100%; } .no-gutter { --gutter-x: 0; } .flex-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .align-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*! * Form Styling * ----------------------------------------------- */ .btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--btn-padding); color: var(--btn-color); background-color: var(--btn-bg); font-family: var(--btn-font-family); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); border: var(--btn-border-width) solid var(--btn-border-color); border-radius: 20px; cursor: pointer; -webkit-transition: all .3s; transition: all .3s; /* line-height: calc(var(--btn-line-height) - (var(--btn-border-width) * 2)); */ text-align: center; } .btn>*:not(:first-child) { margin-left: 8px; } .btn.btn--lg { font-family: var(--heading-font-family); --btn-font-size: 20px; --btn-padding: 12px 32px; line-height: var(--heading-line-height); letter-spacing: -1.42px; } .btn.btn--md { border-radius: 5px; } .btn.btn--primary { background: linear-gradient(104deg, #252525 -7%, #ff222b 93%); --btn-color: #ffff; border: transparent; } .btn--subscribe { padding: 4px 16px; background-image: linear-gradient(103deg, #252525 -7%, #ff222b 93%); color: #fff; border-radius: 5px; border: transparent; } .btn--white { background-color: #fff; } .btn--subscribe:hover, .btn.btn--primary:hover { background: linear-gradient(104deg, #ff222b -7%, #252525 93%); --btn-color: #ffff; border: transparent; } .btn.btn--secondary { background-image: linear-gradient(93deg, #252525 -65%, #ff222b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; border-radius: 4.7px; border: solid 0.4px #ec1f27; } .btn.btn--secondary:hover { background: linear-gradient(104deg, #252525 -7%, #ff222b 93%); -webkit-text-fill-color: #fff; } .btn.btn--outline-dark { --btn-border-color: var(--dark); --btn-color: var(--dark); --btn-hover-bg: var(--dark); --btn-hover-color: #ffffff; --btn-hover-border-color: var(--dark); } .btn.btn--outline-primary { --btn-border-color: var(--primary); --btn-color: var(--primary); --btn-hover-bg: var(--primary); --btn-hover-color: #ffffff; --btn-hover-border-color: var(--primary); } .form-control { width: 100%; border: 1px solid var(--form-control-border-color); min-height: var(--form-control-min-height); padding: var(--form-control-padding); background-color: var(--form-control-bg); font-family: var(--form-control-font-family); font-size: var(--form-control-font-size); color: var(--body-color); border-radius: var(--form-control-border-radius); } .form-control:focus { --form-control-border-color: var(--primary); } .form-control::placeholder { color: var(--form-control-placeholder-color); opacity: 1; } .form-control::-webkit-input-placeholder { color: var(--form-control-placeholder-color); opacity: 1; } .form-control::-moz-placeholder { color: var(--form-control-placeholder-color); opacity: 1; } .form-control::-ms-placeholder { color: var(--form-control-placeholder-color); opacity: 1; } select.form-control { background-image: var(--form-control-arrow); background-position: center right 16px; background-repeat: no-repeat; padding-right: 42px; } .form-group { margin-bottom: 16px; position: relative; } /*! * Components * ----------------------------------------------- */ /* Swiper */ .swiper-button-prev, .swiper-button-next { width: 32px; height: 32px; border-radius: 48px; display: flex; background-color: #d9d9d9; align-items: center; justify-content: center; color: #000; cursor: pointer; } .swiper-button-prev:after, .swiper-button-next:after { display: none; } .swiper-button-prev svg, .swiper-button-next svg { width: 8px; height: 16px; } .swiper-pagination-block { padding-bottom: 32px; } .swiper-pagination { --swiper-pagination-bottom: 0; --swiper-pagination-bullet-width: 10px; --swiper-pagination-bullet-height: 10px; --swiper-pagination-bullet-inactive-color: #DFDFDF; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-color: var(--secondary); --swiper-pagination-bullet-border-radius: 16px; } .swiper-pagination-bullet.swiper-pagination-bullet-active { --swiper-pagination-bullet-width: 30px; } .swiper-button-inline { display: flex; } .swiper-button-inline .swiper-button-prev, .swiper-button-inline .swiper-button-next { position: relative; top: initial; left: initial; right: initial; margin-top: 0; } .swiper-button-inline .swiper-button-next { margin-left: 16px; } .image-cover { border-radius: 16px; overflow: hidden; } .image-cover>* { width: 100%; height: 100%; object-fit: cover; } /* Tab */ .tab { margin: 0 0 24px; padding: 0; list-style: none; display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: auto; justify-content: center; } .tab .tab__link { padding: 4px 20px; display: inline-block; border: solid 1px #ffa4a4; border-radius: 59px; color: rgba(25, 28, 54, 0.6); font-size: 14px; } .tab li:not(:first-child) { margin-left: 32px } .tab .tab__link.active { color: #fff; background-image: linear-gradient(105deg, #252525 -66%, #ff222b 98%); } .tab-pane { display: none; -webkit-transition: opacity .25s linear; -o-transition: opacity .25s linear; transition: opacity .25s linear; } .tab-pane.active { display: block; } .why__content { margin-left: 30px; } .tab__content { box-shadow: 17px 21px 29.7px -5px rgba(206, 206, 206, 0.2); border: solid 1px #f4d9da; background-color: #eee; padding: 60px 72px; border-radius: 28px; } /*! * Header * ----------------------------------------------- */ .site-header { padding-top: 15px; padding-bottom: 15px; } .header-container { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between; } .navbar ul { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; } .navbar ul li:not(:first-child) { margin-left: 38px; } .navbar ul li { padding: 8px 0; } .navbar ul li a { letter-spacing: -0.32px; } .navbar ul li:last-child { padding: 0; } .navbar ul li a:not(.btn):hover, .navbar ul li .active { background-image: linear-gradient(91deg, #252525 9%, #ff222b 106%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* -------section--hero------------ */ .section--hero { position: relative; overflow: hidden; background-color: #fff; } .section--hero .container { position: relative; z-index: 2; } .section--hero video { position: absolute; right: 0; top: 50%; z-index: 1; transform: translateY(-50%); width: 100%; opacity: 0.2; } .hero__content { max-width: 1064px; margin-right: auto; } .hero__content h1 { letter-spacing: -1.03px; margin-bottom: 10px; background-image: linear-gradient(94deg, #252525 0%, #ff222b 39%, #252525 55%, #982328 68%, #ff222b 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__content strong { color: #000; background-color: var(--dark) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .hero__content p { padding: 13px 17px 15px 18px; border-radius: 5px; border: solid 0.3px #c1bbf3; box-shadow: 0 4px 4px 0 rgba(235, 243, 255, 0.4); background-color: #fff; font-size: 14px; color: rgba(0, 0, 0, 0.6); } .hero__btn a { background-color: #fef8f7; } .hero__btn a:hover { background: linear-gradient(104deg, #252525 -7%, #ff222b 93%); -webkit-text-fill-color: #fff; } /* =======section--tab================ */ .section__heading { max-width: 830px; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 32px; font-size: 18px; } .section__heading :last-child { margin-bottom: 0; } /* ======section--service==== */ .services__img { background-image: url(../images/desing/card.svg); background-repeat: no-repeat; background-size: 100% 100%; padding: 24px; } .mulesfot__banner { padding: 48px; box-shadow: 0 4px 42.5px 14px rgba(202, 200, 255, 0.25); border-radius: 14px; box-shadow: 0 4px 42.5px 14px rgba(202, 200, 255, 0.25); background-color: var(--white); } .mulesfot__banner img { display: block; max-width: 1050px; margin-left: auto; margin-right: auto; } /* ======section--success======= */ .success__bottom-text { font-size: 22px; color: #000; font-weight: 500; max-width: 800px; margin: 48px auto 0; text-align: center; } /* =====section--market=========== */ .section--market { background-color: #F6F9FC; } .section--market .section__content { max-width: 100%; color: rgba(59, 60, 74, 0.6); font-weight: normal; margin-bottom: 40px; } .services-box { max-width: 1050px; margin-left: auto; margin-right: auto; } .services-box .row { justify-content: center; } .flip-box { height: 300px; padding: 32px 22px 0 22px; border: solid 1px #fff9d4; background-color: #fff; border-radius: 10px; perspective: 1000px; } .flip-box::before { position: absolute; content: ""; width: 100%; height: 2px; background-image: linear-gradient(91deg, #252525 16%, #ff222b 94%); top: -3px; left: 0; z-index: 5; } .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.3s; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 30px 23px 49px 27px; } .flip-box-front { background-color: #fff; color: black; border-radius: 10px; } .flip-box-front img { height: 50px; width: 50px; } .flip-box-back { background-color: #ffffff; color: #000; transform: rotateY(180deg); border-radius: 10px; padding: 16px; } .flip-box-front img { width: 100px; height: 100px; margin: 0 auto 30px; padding: 33px; box-shadow: 0 12.5px 41.5px 0 rgba(216, 217, 243, 0.3); background-color: #fff; border-radius: 50%; } .flip-box-front h5 { font-size: 24px; text-align: center; } .our-img { display: flex; align-items: center; } .our-img img { width: 50px; height: 50px; padding: 12px; box-shadow: 0 12.5px 41.5px 0 rgba(216, 217, 243, 0.3); background-color: #fff; border-radius: 50%; text-align: center; } .our-img h6 { text-align: left; margin: 0; padding-left: 10px; font-size: 18px; } .flip-box-back p { text-align: left; margin-top: 20px; font-weight: 300; } /* ======section--industries========= */ .section--industries {} .section--industries .container-fluid { padding-left: 0; padding-right: 0; } .swiper-slide { background-color: #C7C7C7; } .industries__content { padding: 48px 0; } .industries__image { position: relative; height: 400px; } .industries__image img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: auto; height: 100%; max-width: initial; } /* ========site--footer=========== */ .site-footer { padding-top: 100px; background-color: #f6f6f7; font-size: 14px; } .footer__link ul { padding: 0; list-style: none; margin-bottom: 0; } .footer__link li+li { margin-top: 16px; } .footer__link ul a { color: #171a1f; } .footer__link h5 { font-weight: 700; } .footer__detalis p { color: #9095a1; } .footer__form { display: flex; position: relative; } .footer__form input { padding: 7px 6px 6px 40px; border: solid 1px transparent; background-color: #fff; border-radius: 5px; position: relative; } .footer__form::before { content: ""; position: absolute; background-image: url(../images/icons/mail.svg); height: 16px; width: 16px; background-repeat: no-repeat; left: 13px; top: 17px; z-index: 200; } .footer__bottom { display: flex; justify-content: space-between; } .social-links, .site-info { display: flex; padding: 0; list-style: none; } .social-links li+li { margin-left: 16px; } .site-info { color: #9095A1; } .site-info li a { color: #9095A1; } .site-info li+li { margin-left: 24px; position: relative; } .site-info li+li:before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: #9095A1; } /* circle */ .section--explore .section__content { max-width: 926px; } .explore__content a .btn { color: transparent; background-color: #fff; background-image: linear-gradient(94deg, #252525 -7%, #ff222b 94%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; display: block; } .explore__content a { content: ""; background-color: #fff; border-radius: 40px; display: inline-block; } .explore__content { padding: 120px 0; position: relative; overflow: hidden; animation: gradientMove 5s infinite linear; background: linear-gradient(72deg, #040404 -41%, #ff222b 101%); background-size: 300% 300%; z-index: 5; } .explore__content * { z-index: 5; position: relative; } .explore__content::after { content: ""; position: absolute; background-image: url(../images/desing/dots.svg); width: 284px; height: 174px; transform: translateY(0%); right: 0; bottom: 0; } .top_image, .left_image, .right-img { position: absolute; z-index: 1; } .left_image { top: 0; left: -3%; animation: topToBottom 4s infinite linear; z-index: 2; } .top_image { position: absolute; top: 0; left: 0%; animation: leftToRight 4s infinite linear; z-index: 2; } .right-img { bottom: 0; right: -4%; animation: bottomToTop 4s infinite linear; z-index: 2; } /* Keyframes for Animations */ @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Left to Right */ @keyframes leftToRight { 0% { left: 0%; } 50% { left: 10%; } 100% { left: 0%; } } /* Top to Bottom */ @keyframes topToBottom { 0% { top: 0; } 50% { top: calc(100% - 294px); } 100% { top: 0%; } } /* Bottom to Top */ @keyframes bottomToTop { 0% { bottom: 0; } 50% { bottom: calc(100% - 294px); } 100% { bottom: 0%; } }