@import url("custom.css"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap"); :root { --mont: "Montserrat", sans-serif; --inter: "Inter", sans-serif; --theme-font: var(--inter); --theme-bg: #ffffff; --theme-color: #444444; --white: #ffffff; --black: #000000; --primary-color: #191919; --secondary-color: #222222; --tertiary-color: #666666; --quaternary-color: #27f7ff; --quinary-color: #f5f5f5; --transition: all 0.3s ease-in-out; --shadow: 0px 4px 28px 0px rgba(163, 163, 163, 0.25); --shadow-secondary: 0 0 31px rgba(0, 0, 0, 0.1); } /* ==== --------- (1.02) variables end --------- ==== */ /* ==== --------- (2.01) reset styles start --------- ==== */ * { margin: 0px; padding: 0px; box-sizing: border-box; } *::-moz-selection { color: #ffffff; background-color: #1770c8; } *::selection { color: #ffffff; background-color: #1770c8; } html { scroll-behavior: unset !important; } body { font-family: var(--theme-font); font-size: 16px; line-height: 0px; font-weight: 400; color: var(--theme-color); background-color: var(--theme-bg); overflow-x: clip; max-width: 100vw; min-height: 100vh; text-transform: capitalize; } body::-webkit-scrollbar { width: 5px; } body::-webkit-scrollbar-track { background-color: #cae6f7; border-radius: 5px; } body::-webkit-scrollbar-button, body::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 5px; } .body-active { min-height: 100vh; } .my-app { position: relative; min-width: 100vw; min-height: 100vh; max-width: 100vw; overflow-x: clip; height: 100%; } .tp-app { overflow-x: clip !important; } button { background-color: transparent; border: 0px; outline: 0px; } a, button { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; outline: 0px; border: 0px; transition: var(--transition); cursor: pointer; } a i, button i { font-size: inherit; line-height: inherit; color: inherit; } a:hover, button:hover { text-decoration: none; border: 0px; outline: 0px; } a:focus, button:focus { box-shadow: none; outline: 0px; } ul, ol { list-style-type: none; list-style-position: inside; margin: 0px; padding: 0px; } hr, blockquote, textarea { margin: 0px; opacity: 1; } input, textarea { border: 0px; outline: 0px; } input:focus, textarea:focus { box-shadow: none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0px; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } input[type=checkbox] { width: initial; height: initial; } textarea { min-height: 150px; resize: none; } table { border-collapse: collapse; border-spacing: 0px; } iframe { border: 0px; width: 100%; } h1, h2, h3, h4, h5, h6, p { padding: 0px; margin: 0px; color: var(--theme-color); } h1, h2, h3, h4, h5, h6 { font-family: var(--mont); text-transform: capitalize; } /* ==== --------- (2.01) reset styles end --------- ==== */ /* ==== --------- (2.02) typography styles start --------- ==== */ p, th, td, li, input, textarea, select, label, blockquote, span { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--theme-color); } .text-xl { font-size: 24px; line-height: 34px; } .text-xs { font-size: 16px; line-height: 26px; } a, button { font-size: 18px; line-height: 24px; color: var(--theme-color); font-weight: 400; cursor: pointer; display: inline-flex; gap: 8px; } a:hover, button:hover { color: var(--primary-color); } h1, .text-xxl { font-size: 76px; line-height: 96px; } h2 { font-size: 57px; line-height: 68px; } h3 { font-size: 43px; line-height: 54px; } h4 { font-size: 32px; line-height: 42px; } h5 { font-size: 24px; line-height: 34px; } h6 { font-size: 18px; line-height: 28px; } h1 a, h1 span, h2 a, h2 span, h3 a, h3 span, h4 a, h4 span, h5 a, h5 span, h6 a, h6 span, p a, p span { font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; } /* ==== --------- (2.02) typography styles end --------- ==== */ /* ==== --------- (2.03) global styles start --------- ==== */ img { max-width: 100%; height: auto; border: 0px; outline: 0px; object-fit: cover; } i { display: inline-flex; align-items: center; justify-content: center; } span { display: inline-block; } .unset { max-width: unset; } .dir-rtl { direction: rtl; } .bg-img { background-color: var(--theme-color); background-repeat: no-repeat; background-size: cover; background-position: center center; } .slick-slide { margin: 0px 12px; } .slick-slide img { display: inline-block; } .slick-list { margin: 0px -12px; } .fw-4 { font-weight: 400; } .fw-9 { font-weight: 900 !important; } .fw-7 { font-weight: 700; } .fw-6 { font-weight: 600; } .fw-5 { font-weight: 500; } .text-primary { color: var(--primary-color); } .text-secondary { color: var(--secondary-color) !important; } .text-tertiary { color: var(--tertiary-color) !important; } .text-quaternary { color: var(--quaternary-color) !important; } .text-quinary { color: var(--quinary-color) !important; } .bg-primary { background-color: var(--primary-color); } .bg-secondary { background-color: var(--secondary-color); } .bg-tertiary { background-color: var(--tertiary-color); } .bg-quaternary { background-color: var(--quaternary-color); } .bg-quinary { background-color: var(--quinary-color); } .bg-black { background-color: black; } .fm { font-family: var(--mont); } .w-100 { width: 100%; } .w-80 { width: 80%; text-align: center; } .mh-260 { min-height: 260px; } .mh-220 { min-height: 220px; } .mh-300 { min-height: 300px; } .mh-400 { min-height: 400px; } .pls-60 { padding-left: 60px; } .overflow-x-clip { overflow-x: clip; } .vertical-column-gap { row-gap: 24px; } .vertical-column-gap-md { row-gap: 40px; } .vertical-column-gap-lg { row-gap: 60px; } .pt-120 { padding-top: 120px; } .pb-120 { padding-bottom: 120px; } .mt-80 { margin-top: 80px; } .mb-80 { margin-bottom: 80px; } .mt-60 { margin-top: 60px; } .mt-40 { margin-top: 40px; } .mt-8 { margin-top: -8px; } .mt-12 { margin-top: 12px; } .mb-16 { margin-bottom: 16px; } .mt-24 { margin-top: 24px; } .mb-24 { margin-bottom: 24px; } .mt-30 { margin-top: 30px; } .mb-12 { margin-bottom: 12px; } .mb-8 { margin-bottom: 8px; } .mb-24 { margin-bottom: 24px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .pl-100 { padding-left: 100px; } .h-100 { height: 100%; } .sticky-wrapper { position: relative; } .sticky-item { position: sticky; top: 220px; } .cursor-outer { margin-left: -16px; margin-top: -16px; width: 32px; height: 32px; border: 1px solid white; box-sizing: border-box; z-index: 10000000; opacity: 1; transition: all 0.08s ease-out; mix-blend-mode: difference; } .cursor-outer.cursor-hover { opacity: 0; transition: var(--transition); } .cursor-outer.cursor-big { opacity: 0; } .mouseCursor { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; border-radius: 50%; transform: translateZ(0); visibility: hidden; text-align: center; } .mouseCursor.cursor-big { width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; } .cursor-inner { margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; z-index: 10000001; background-color: white; opacity: 1; transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out; mix-blend-mode: difference; } .cursor-inner span { color: white; line-height: 60px; opacity: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } .cursor-inner.cursor-hover { margin-left: -12px; margin-top: -12px; width: 25px; height: 25px; background-color: white; opacity: 0; mix-blend-mode: difference; transition: var(--transition); } .social { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .social li { display: inline-flex; align-items: center; justify-content: center; } .social a { color: var(--tertiary-color); background-color: #f0efff; width: 40px; min-width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; } .social a:hover { color: var(--black); background-color: var(--primary-color); } .fix-top { padding-top: 220px; } @keyframes rotateInfinite { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .video-frame { position: relative; width: 160px; min-width: 160px; height: 160px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: white; z-index: 1; } .video-frame img { width: 100%; height: 100%; position: absolute; inset: 0px; animation: rotateInfinite 24s linear infinite; animation-play-state: running; z-index: -1; } .video-frame:hover { color: white; } .video-frame:hover img { animation-play-state: paused; } .parallax-image { transform: scale(1.2); transform-origin: 50% 100%; } @keyframes moveInfinite { from { left: 0px; } to { left: 70%; } } .op-text { color: rgba(0, 0, 0, 0.2); font-size: 100px; font-style: normal; font-weight: 700; line-height: 1; } .group ul{ margin: 0 0 0 0; padding: 0 0 0 20px } .group li { list-style-type: disc; margin-bottom: 16px; list-style-position: outside; } .group li:nth-last-of-type(1) { margin-bottom: 0px; } .pagination { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .pagination button, .pagination a { width: 44px; min-width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 0px; border-radius: 10px; background-color: #120f23; color: white; transition: var(--transition); } .pagination button:hover, .pagination a:hover { background-color: var(--primary-color); color: white; border: 0px; } .pagination .active { background-color: var(--primary-color); color: white; } .pagination button:hover { background-color: var(--primary-color); color: white; } .title-anim { text-transform: lowercase !important; } .title-anim > div > div:nth-of-type(1) { text-transform: uppercase !important; } /* ==== --------- (2.03) global styles end --------- ==== */ /* ==== --------- (3.01) buttons styles start --------- ==== */ .btn { padding: 16px 40px; font-weight: 600; border: 1px solid #666; border-radius: 0px; color: #666666; position: relative; overflow: hidden; text-transform: capitalize; z-index: 1; letter-spacing: 2px; } .btn::before { content: ""; position: absolute; inset: 0px; width: 0px; transition: var(--transition); background-color: var(--primary-color); z-index: -1; } .btn:hover { border: 1px solid var(--primary-color); color: var(--white); } .btn:hover::before { width: 100%; } .btn:focus { box-shadow: none; outline: 0px; } .btn-anim { width: 170px; min-width: 170px; height: 170px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid white; color: white; font-weight: 600; position: relative; overflow: hidden !important; gap: 16px; z-index: 1; padding: 0px; } .btn-anim span { position: absolute; z-index: -1; width: 0; height: 0; border-radius: 100%; background: var(--quaternary-color); transform: translate(-50%, -50%); pointer-events: none; transition: width 0.7s, padding-top 0.7s; } .btn-anim:hover { color: black; border: 1px solid var(--quaternary-color); } .btn-anim:hover span { width: 225%; padding-top: 225%; } .alter-btn { padding: 70px 40px; width: 200px; height: 200px; border-radius: 50%; display: inline-flex; flex-wrap: wrap; row-gap: 8px; border: 1px solid white; color: white; justify-content: flex-start; font-weight: 600; font-size: 18px; } .alter-btn:hover { color: var(--secondary-color); border: 1px solid var(--quaternary-color); } .btn-anim-light { border: 1px solid var(--secondary-color); color: var(--secondary-color); } .btn-anim-light span { background-color: var(--primary-color); } .btn-anim-light:hover { border: 1px solid var(--primary-color); color: white; } .btn-line { font-weight: 600; letter-spacing: 1px; color: var(--theme-color); position: relative; } .btn-line::before { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 1px; background-color: var(--theme-color); transition: var(--transition); } .btn-line::after { content: ""; position: absolute; bottom: 0px; left: 0%; width: 0%; height: 1px; background-color: var(--primary-color); transition: all 0.3s ease-in-out; transition-delay: 0.5s; } .btn-line:hover { color: var(--primary-color); } .btn-line:hover::before { width: 0%; left: 100%; } .btn-line:hover::after { left: 0px; width: 100%; } .btn-angle { position: relative; font-weight: 400; padding: 6px 24px; font-size: 16px; text-align: center; justify-content: center; gap: 0px; } .btn-angle::before { content: ""; position: absolute; width: 8px; height: 8px; top: 0px; left: 0px; border-left: 1px solid white; border-top: 1px solid white; transition: var(--transition); } .btn-angle::after { content: ""; position: absolute; width: 8px; height: 8px; top: 0px; right: 0px; border-right: 1px solid white; border-top: 1px solid white; transition: var(--transition); } .btn-angle span { display: inline-block; } .btn-angle span::after { content: ""; position: absolute; width: 8px; height: 8px; bottom: 0px; right: 0px; border-right: 1px solid white; border-bottom: 1px solid white; transition: var(--transition); } .btn-angle span::before { content: ""; position: absolute; width: 8px; height: 8px; bottom: 0px; left: 0px; border-left: 1px solid white; border-bottom: 1px solid white; transition: var(--transition); } .btn-angle:hover::after, .btn-angle:hover::before, .btn-angle:hover span::after, .btn-angle:hover span::before { width: calc(50% + 0px); height: calc(50% + 0px); border-color: var(--quaternary-color); } .progress-wrap { position: fixed; right: 30px; bottom: 30px; height: 50px; width: 50px; cursor: pointer; display: block; border-radius: 50px; background-color: #1f1f1f; box-shadow: inset 0 0 0 8px #1f1f1f; z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 200ms linear; z-index: 99; overflow: hidden; } .progress-wrap span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; background-color: var(--white); border-radius: 50%; overflow: hidden; } .progress-wrap span::after { content: "\f176"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; text-align: center; line-height: 34px; font-size: 16px; border-radius: 50%; color: var(--black); left: 50%; top: 50%; transform: translate(-50%, 200%); height: 34px; width: 34px; cursor: pointer; display: block; z-index: 1; transition: all 200ms linear; } .progress-wrap span::before { position: absolute; content: "\f176"; font-family: "Font Awesome 6 Free"; font-weight: 900; text-align: center; line-height: 34px; font-size: 16px; border-radius: 50%; color: var(--black); left: 50%; top: 50%; transform: translate(-50%, -50%); height: 34px; width: 34px; cursor: pointer; display: block; z-index: 2; transition: all 200ms linear; } .progress-wrap:hover span::before { transform: translate(-50%, -200%); } .progress-wrap:hover span::after { transform: translate(-50%, -50%); } .progress-wrap path { fill: none; } .progress-wrap .progress-circle path { stroke: var(--quaternary-color); stroke-width: 4; box-sizing: content-box; transition: all 200ms linear; } .active-progress { opacity: 1; visibility: visible; transform: translateY(0); } /* ==== --------- (3.01) buttons styles end --------- ==== */ /* ==== --------- (3.02) forms styles start --------- ==== */ .subscribe-form { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 360px; } .subscribe-form input { flex-grow: 1; padding: 22px 20px; background-color: var(--quaternary-color); border-radius: 40px; color: var(--white); width: calc(100% - 70px); } .subscribe-form button { width: 70px; min-width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--quaternary-color); color: var(--primary-color); font-size: 24px; } .search-form { width: 100%; position: relative; } .search-form input { width: 100%; border-bottom: 1px solid rgba(34, 34, 34, 0.3137254902); padding: 16px 40px; color: var(--secondary-color); } .search-form input::placeholder { color: var(--tertiary-color); } .search-form button { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); color: var(--tertiary-color); } .input-single input, .input-single textarea { width: 100%; padding: 0px 16px 16px 0px; color: var(--secondary-color); border-bottom: 1px solid rgba(102, 102, 102, 0.3137254902); } .input-single input::placeholder, .input-single textarea::placeholder { color: var(--tertiary-color); } .input-single input:focus, .input-single textarea:focus { border-bottom: 1px solid var(--secondary-color); } .input-single textarea { min-height: 120px; } .contact-form .input-single { margin-bottom: 30px; } .contact-form .input-single:nth-last-of-type(1) { margin-bottom: 0px; } /* ==== --------- (3.02) forms styles end --------- ==== */ /* ==== --------- (3.03) preloader styles start --------- ==== */ .ctn-preloader { align-items: center; cursor: none; display: flex; height: 100%; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 99999; } .ctn-preloader .animation-preloader { position: absolute; z-index: 100; } .ctn-preloader .animation-preloader .spinner { animation: spinner 1s infinite linear; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.3137254902); border-top-color: var(--quaternary-color); height: 9em; margin: 0 auto 3.5em auto; width: 9em; } .ctn-preloader .animation-preloader .txt-loading { text-align: center; user-select: none; } .ctn-preloader .animation-preloader .txt-loading span { font-size: 30px; letter-spacing: 2px; font-weight: 400; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:before { animation: letters-loading 4s infinite; color: var(--quaternary-color); content: attr(data-text-preloader); left: 0; opacity: 0; position: absolute; top: 0; transform: rotateY(-90deg); } .ctn-preloader .animation-preloader .txt-loading .letters-loading { color: rgba(255, 255, 255, 0.3137254902); position: relative; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before { animation-delay: 0.2s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before { animation-delay: 0.4s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before { animation-delay: 0.6s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before { animation-delay: 0.8s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s; } .ctn-preloader .loader-section { background-color: #030015; height: 100%; position: fixed; top: 0; width: calc(50% + 1px); } .ctn-preloader .loader-section.section-left { left: 0; } .ctn-preloader .loader-section.section-right { right: 0; } .loaded .animation-preloader { opacity: 0; transition: 0.3s ease-out; } .loaded .loader-section.section-left { background-color: var(--quaternary-color) !important; transform: translateX(-101%); transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1); } .loaded .loader-section.section-right { transform: translateX(101%); transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1); } @keyframes spinner { to { transform: rotateZ(360deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); } 25%, 50% { opacity: 1; transform: rotateY(0deg); } } @media screen and (max-width: 767px) { .ctn-preloader .animation-preloader .spinner { height: 8em; width: 8em; } .ctn-preloader .animation-preloader .txt-loading span { font-size: 24px; } } @media screen and (max-width: 500px) { .ctn-preloader .animation-preloader .spinner { height: 7em; width: 7em; } .ctn-preloader .animation-preloader .txt-loading span { font-size: 20px; } } /* ==== --------- (3.03) preloader styles end --------- ==== */ /* ==== --------- (4.01) header styles start --------- ==== */ .tp-header { position: fixed; top: 0px; left: 0px; right: 0px; width: 100%; z-index: 99; } .tp-header .primary-navbar { padding: 20px 0px; } .tp-header .navbar__options { display: flex; align-items: center; gap: 40px; row-gap: 30px; flex-wrap: wrap; } .tp-header .navbar__options a { font-weight: 500; letter-spacing: 1px; color: white; position: relative; } .tp-header .navbar__options a::before { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 1px; background-color: white; transition: var(--transition); } .tp-header .navbar__options a::after { content: ""; position: absolute; bottom: 0px; left: 0%; width: 0%; height: 1px; background-color: var(--quaternary-color); transition: all 0.3s ease-in-out; transition-delay: 0.5s; } .tp-header .navbar__options a:hover { color: var(--quaternary-color); } .tp-header .navbar__options a:hover::before { width: 0%; left: 100%; } .tp-header .navbar__options a:hover::after { left: 0px; width: 100%; } .logo-img img { max-height: 50px; } .open-offcanvas-nav { padding: 0px; display: inline-block; background-color: transparent; display: flex; align-items: flex-end; flex-direction: column; gap: 10px; } .open-offcanvas-nav span { height: 2px; background-color: white; transition: var(--transition); } .open-offcanvas-nav .top-bar { width: 30px; } .open-offcanvas-nav .middle-bar { width: 34px; } .open-offcanvas-nav .bottom-bar { width: 16px; } .open-offcanvas-nav:hover span { background-color: var(--quaternary-color); } .tp-header--light .navbar__options a { color: var(--secondary-color); } .tp-header--light .navbar__options a:hover { color: var(--primary-color); } .tp-header--light .navbar__options a::before { background-color: var(--secondary-color); } .tp-header--light .navbar__options a::after { background-color: var(--primary-color); } .tp-header--light .open-offcanvas-nav span { background-color: var(--secondary-color); } .tp-header--light .open-offcanvas-nav:hover span { background-color: var(--primary-color); } .offcanvas-nav .offcanvas-menu { position: fixed; inset: 0px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-100%); transition: var(--transition); z-index: 9999; transition-delay: 0.3s; transition: all 0.6s ease-in-out; background-color: var(--quaternary-color); } .offcanvas-nav .offcanvas-menu::before { /* content: "Explore Pages";*/ position: absolute; top: 20%; left: 10%; font-size: 6vw; line-height: 1.2; font-weight: 900; text-transform: uppercase; max-width: 30vw; z-index: 2; color: white; opacity: 0.15; text-align: end; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__header { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 25px 20px; justify-content: space-between; } .offcanvas-nav .offcanvas-menu .close-offcanvas-menu { width: 50px; min-width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--quaternary-color); font-size: 24px; } .offcanvas-nav .offcanvas-menu .close-offcanvas-menu:hover { /* background-color: white;*/ color: white; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__wrapper { position: fixed; inset: 0px; background-color: var(--black); z-index: 1; padding: 0px 100px 60px; height: 100vh; overflow-y: auto; overflow-x: clip; display: flex; flex-direction: column; transition: 0.6s ease-in-out; transition-delay: 0.6s; gap: 60px; transform: translateY(100%); opacity: 1; visibility: visible; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__wrapper::-webkit-scrollbar { width: 0px; } .offcanvas-nav .offcanvas-menu .navbar__menu > ul { flex-direction: column; } .offcanvas-nav .offcanvas-menu .navbar__item { width: 100%; transition: var(--transition); } .offcanvas-nav .offcanvas-menu .navbar__item a, .offcanvas-nav .offcanvas-menu .navbar__item button { color: var(--white); padding: 20px 60px 20px 20px; line-height: 1; font-size: 16px; width: 100%; text-transform: capitalize; font-size: 32px; font-weight: 600; justify-content: flex-end; font-family: var(--mont); } .offcanvas-nav .offcanvas-menu .navbar__item a:hover, .offcanvas-nav .offcanvas-menu .navbar__item button:hover { color: var(--quaternary-color); } .offcanvas-nav .offcanvas-menu .navbar__item a::after, .offcanvas-nav .offcanvas-menu .navbar__item button::after { transition: none; } .offcanvas-nav .offcanvas-menu .nav-fade { transform: translateY(30px); opacity: 0; transition: all 0.4s ease-in-out !important; } .offcanvas-nav .offcanvas-menu .navbar__item--has-children .navbar__dropdown-label { position: relative; } .offcanvas-nav .offcanvas-menu .navbar__item--has-children .navbar__dropdown-label::after { content: "+"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 0px; right: 0px; bottom: 0px; height: 100%; font-size: 20px; width: 60px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(0deg); } .offcanvas-nav .offcanvas-menu .navbar__item--has-children:hover .navbar__dropdown-label::after { transform: rotate(0deg); } .offcanvas-nav .offcanvas-menu .navbar__item-active { color: var(--quaternary-color) !important; } .offcanvas-nav .offcanvas-menu .navbar__item-active::after { content: "\f068" !important; font-family: "Font Awesome 6 Free" !important; } .offcanvas-nav .offcanvas-menu .navbar__sub-menu { position: static; opacity: 1; visibility: visible; transform: translateY(0px); width: 100%; max-width: 100%; padding: 0px; display: none; transition: none; background-color: transparent; border-radius: 0px; padding-right: 40px; } .offcanvas-nav .offcanvas-menu .navbar__sub-menu::before { content: none; } .offcanvas-nav .offcanvas-menu .navbar__sub-menu a, .offcanvas-nav .offcanvas-menu .navbar__sub-menu button { color: var(--white); padding: 16px 20px; font-size: 16px; justify-content: flex-end; } .offcanvas-nav .offcanvas-menu .navbar__sub-menu a::before, .offcanvas-nav .offcanvas-menu .navbar__sub-menu button::before { content: none; } .offcanvas-nav .social { position: fixed; top: 35%; left: 100px; display: flex; flex-direction: column; z-index: 2; } .offcanvas-nav .social a { background-color: transparent; color: white; width: auto; min-width: auto; height: auto; } .offcanvas-nav .social a:hover { color: var(--quaternary-color); } .offcanvas-nav .anime { position: fixed; bottom: 10%; left: 0px; display: flex; align-items: center; gap: 30px; z-index: 2; } .offcanvas-nav .anime span { width: 156px; height: 156px; border-radius: 50%; background-image: linear-gradient(to right, rgba(255, 230, 0, 0.3137254902) 50%, transparent 50%); margin-left: -80px; display: inline-block; } .offcanvas-nav .anime span:nth-of-type(1) { margin-left: 20px; background-image: linear-gradient(to right, rgba(255, 230, 0, 0.1254901961) 50%, transparent 50%); } .offcanvas-nav .anime span:nth-of-type(2) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.1882352941) 50%, transparent 50%); } .offcanvas-nav .anime span:nth-of-type(3) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.2509803922) 50%, transparent 50%); } .offcanvas-nav .anime span:nth-of-type(4) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.3137254902) 50%, transparent 50%); } .offcanvas-nav .anime span:nth-of-type(6) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.5019607843) 50%, transparent 50%); } .offcanvas-nav .offcanvas-menu__list { max-width: 500px; margin-left: auto; margin-right: 160px; } .offcanvas-nav .show-offcanvas-menu { transform: translateX(0px); opacity: 1; visibility: visible; } .offcanvas-nav .show-offcanvas-menu .offcanvas-menu__wrapper { transform: translateY(0px); opacity: 1; visibility: visible; } .offcanvas-nav .show-offcanvas-menu .nav-fade { animation: navLinkFade 0.5s ease forwards; transition: all 0.7s ease-in-out !important; } .offcanvas-nav .nav-fade-active { animation: navLinkFade 1s ease reverse !important; } @keyframes navLinkFade { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes navLinkFadeReverse { from { opacity: 0; transform: translateY(0px); } to { opacity: 0; transform: translateY(100%); } } @keyframes stickyNavbar { 0% { transform: translateY(-100%); } 100% { transform: translateY(0px); } } .navbar-active { position: fixed; top: 0px; left: 0px; right: 0px; width: 100%; background-color: black; animation: stickyNavbar 0.9s ease-in-out; border-bottom: 1px solid var(--quaternary-color); } .tp-header--light .navbar-active { background-color: var(--white); box-shadow: var(--shadow); border-bottom: 1px solid var(--primary-color); } /* ==== --------- (4.01) header styles end --------- ==== */ /* ==== --------- (4.02) banner styles start --------- ==== */ .tp-banner { background-color: var(--black); background-repeat: no-repeat; background-size: cover; background-position: center bottom; position: relative; z-index: 1; overflow: hidden; } .tp-banner .tp-banner__users { display: flex; flex-direction: column; justify-content: flex-end; } .tp-banner .tp-banner__avatar { display: flex; align-items: center; gap: 0px; } .tp-banner .tp-banner__avatar img { width: 80px; height: 80px; border-radius: 50%; margin-left: -8px; } .tp-banner .tp-banner__avatar img:nth-of-type(1) { margin-left: 0px; } .tp-banner .tp-banner__thumb { position: relative; } .tp-banner .tp-banner__thumb .video-frame { position: absolute; top: 50px; right: calc(100% - 50px); } .tp-banner .social { position: absolute; top: 50%; transform: translateY(-50%); left: 100px; display: flex; flex-direction: column; z-index: -1; } .tp-banner .social a { background-color: transparent; color: white; width: auto; min-width: auto; height: auto; } .tp-banner .social a:hover { color: var(--quaternary-color); } .tp-banner .scroll-to { position: absolute; top: 40%; right: 100px; writing-mode: vertical-rl; text-transform: uppercase; line-height: 0px; flex-direction: row-reverse; color: white; transform: rotate(-180deg); letter-spacing: 8px; font-weight: 400; gap: 30px; animation: moveUpDown 2.4s infinite; z-index: -1; } .tp-banner .scroll-to .arrow { position: relative; display: block; } .tp-banner .scroll-to .arrow::before { content: ""; display: inline-block; width: 3px; height: 46px; background-color: var(--white); transition: var(--transition); } .tp-banner .scroll-to .arrow::after { content: "\f106"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; color: white; left: 1px; bottom: calc(100% - 22px); font-size: 24px; transition: var(--transition); } .tp-banner .scroll-to:hover { color: var(--quaternary-color); animation-play-state: paused; } .tp-banner .scroll-to:hover .arrow::before { background-color: var(--quaternary-color); } .tp-banner .scroll-to:hover .arrow::after { color: var(--quaternary-color); } @keyframes moveUpDown { 0% { top: 40%; } 50% { top: calc(40% + 40px); } 100% { top: 40%; } } .about-banner { z-index: 1; } .about-banner .parallax-image-wrap { min-width: 80vw; } .about-banner .foot-group { display: flex; align-items: center; gap: 12px; } .about-banner .foot-group .btn-anim { z-index: 9; margin-left: auto; margin-right: 60px; } .about-banner .anime { position: absolute; left: 0px; display: flex; align-items: center; gap: 30px; z-index: 1; } .about-banner .anime span { width: 8vw; height: 8vw; border-radius: 50%; background-image: linear-gradient(to right, rgba(255, 230, 0, 0.3137254902) 50%, transparent 50%); margin-left: -90px; display: inline-block; } .about-banner .anime span:nth-of-type(1) { margin-left: 20px; background-image: linear-gradient(to right, rgba(255, 230, 0, 0.1254901961) 50%, transparent 50%); } .about-banner .anime span:nth-of-type(2) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.1882352941) 50%, transparent 50%); } .about-banner .anime span:nth-of-type(3) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.2509803922) 50%, transparent 50%); } .about-banner .anime span:nth-of-type(4) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.3137254902) 50%, transparent 50%); } .about-banner .anime span:nth-of-type(6) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.5019607843) 50%, transparent 50%); } .about-banner .social { position: absolute; top: 40%; transform: translateY(-40%); left: 100px; display: flex; flex-direction: column; z-index: -1; } .about-banner .social a { background-color: transparent; color: #444444; width: auto; min-width: auto; height: auto; } .about-banner .social a:hover { color: var(--primary-color); } .service-banner { z-index: 1; } .service-banner p { max-width: 900px; margin-left: auto; margin-right: auto; } .service-banner .social { position: absolute; top: 50%; transform: translateY(-50%); left: 100px; display: flex; flex-direction: column; z-index: -1; } .service-banner .social a { background-color: transparent; color: white; width: auto; min-width: auto; height: auto; } .service-banner .social a:hover { color: var(--quaternary-color); } .service-banner .scroll-to { position: absolute; top: 40%; right: 100px; writing-mode: vertical-rl; text-transform: uppercase; line-height: 0px; flex-direction: row-reverse; color: white; transform: rotate(-180deg); letter-spacing: 8px; font-weight: 400; gap: 30px; animation: moveUpDown 2.4s infinite; z-index: -1; } .service-banner .scroll-to .arrow { position: relative; display: block; } .service-banner .scroll-to .arrow::before { content: ""; display: inline-block; width: 3px; height: 46px; background-color: var(--white); transition: var(--transition); } .service-banner .scroll-to .arrow::after { content: "\f106"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; color: white; left: 1px; bottom: calc(100% - 22px); font-size: 24px; transition: var(--transition); } .service-banner .scroll-to:hover { color: var(--quaternary-color); animation-play-state: paused; } .service-banner .scroll-to:hover .arrow::before { background-color: var(--quaternary-color); } .service-banner .scroll-to:hover .arrow::after { color: var(--quaternary-color); } @keyframes moveUpDown { 0% { top: 40%; } 50% { top: calc(40% + 40px); } 100% { top: 40%; } } .service-banner .thumb-one, .service-banner .thumb-two { position: absolute; z-index: -1; } .service-banner .thumb-one img, .service-banner .thumb-two img { max-width: 16vw; min-width: 80px; } .service-banner .thumb-one { bottom: 120px; left: 10%; } .service-banner .thumb-two { top: 140px; right: 13%; } .career-banner { z-index: 1; padding-bottom: 200px; --scale: 1; } .career-banner::before { content: ""; position: absolute; bottom: 0px; right: 10%; width: 10vw; height: 10vw; min-width: 80px; min-height: 80px; border-radius: 50%; background-image: linear-gradient(to bottom, #e5a50c 50%, #e5a50c 50%); z-index: -1; transform: translateY(50%) scale(var(--scale)); } .career-banner .cp-banner-thumb { position: relative; z-index: -2; } .career-banner .cp-banner-thumb img { max-width: 30vw; min-width: 240px; } .career-banner .social { position: absolute; top: 50%; transform: translateY(-50%); left: 100px; display: flex; flex-direction: column; z-index: -1; } .career-banner .social a { background-color: transparent; color: white; width: auto; min-width: auto; height: auto; } .career-banner .social a:hover { color: var(--quaternary-color); } .career-banner .scroll-to { position: absolute; top: 40%; right: 100px; writing-mode: vertical-rl; text-transform: uppercase; line-height: 0px; flex-direction: row-reverse; color: white; transform: rotate(-180deg); letter-spacing: 8px; font-weight: 400; gap: 30px; animation: moveUpDown 2.4s infinite; z-index: -1; } .career-banner .scroll-to .arrow { position: relative; display: block; } .career-banner .scroll-to .arrow::before { content: ""; display: inline-block; width: 3px; height: 46px; background-color: var(--white); transition: var(--transition); } .career-banner .scroll-to .arrow::after { content: "\f106"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; color: white; left: 1px; bottom: calc(100% - 22px); font-size: 24px; transition: var(--transition); } .career-banner .scroll-to:hover { color: var(--quaternary-color); animation-play-state: paused; } .career-banner .scroll-to:hover .arrow::before { background-color: var(--quaternary-color); } .career-banner .scroll-to:hover .arrow::after { color: var(--quaternary-color); } @keyframes moveUpDown { 0% { top: 40%; } 50% { top: calc(40% + 40px); } 100% { top: 40%; } } .career-banner .sm-c { position: absolute; top: 20%; left: 20%; background-image: linear-gradient(to bottom, rgba(255, 230, 0, 0.3764705882) 50%, transparent 50%); z-index: -1; width: 40px; height: 40px; border-radius: 50%; } .career-banner .sm-cl { top: unset; bottom: 20%; right: 80%; background-image: linear-gradient(to right, rgba(255, 230, 0, 0.3764705882) 50%, transparent 50%); } /* ==== --------- (4.02) banner styles end --------- ==== */ /* ==== --------- (4.03) footer styles start --------- ==== */ .footer { background-color: black; overflow-x: clip; position: relative; z-index: 1; } .footer .footer__thumb { max-height: 560px; overflow-y: clip; } .footer .footer__thumb .parallax-image-wrap { min-width: 80vw; } .footer .footer__thumb img { min-height: 300px; } .footer .btn-anim { margin-left: auto; margin-right: 40px; } .footer .foot-group { display: flex; align-items: center; gap: 12px; } .footer .foot-group .btn-anim { z-index: 9; } .footer .anime { position: absolute; left: 0px; display: flex; align-items: center; gap: 30px; z-index: 1; } .footer .anime span { width: 8vw; height: 8vw; border-radius: 50%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.3137254902) 50%, transparent 50%); margin-left: -90px; display: inline-block; } .footer .anime span:nth-of-type(1) { margin-left: 20px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1254901961) 50%, transparent 50%); } .footer .anime span:nth-of-type(2) { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1882352941) 50%, transparent 50%); } .footer .anime span:nth-of-type(3) { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2509803922) 50%, transparent 50%); } .footer .anime span:nth-of-type(4) { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.3137254902) 50%, transparent 50%); } .footer .anime span:nth-of-type(6) { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5019607843) 50%, transparent 50%); } .f-links{} .f-links p{ color: #fff; font-weight: bold; font-size: 22px; margin: 0 0 20px 0 } .footer ul li { margin-bottom: 15px; } .footer ul li:nth-last-of-type(1) { margin-bottom: 0px; } .footer ul a { color: white; font-weight: 600; font-family: var(--mont); } .footer ul a:hover { color: var(--quaternary-color); } .footer .footer__inner { padding-bottom: 80px; } .footer .footer__inner-single { display: flex; align-items: center; gap: 30px; } .footer .footer__inner-single .thumb { width: 64px; min-width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: rgba(255, 255, 255, 0.14); } .footer .footer__inner-single a:hover { color: var(--quaternary-color); } .footer .footer-copyright { padding: 40px 0px; border-top: 1px solid rgba(255, 255, 255, 0.2); } .footer .footer-copyright a:hover { color: var(--quaternary-color); } .footer .footer-copyright .social a { background-color: transparent; width: auto; min-width: auto; height: auto; color: white; font-size: 24px; } .footer .footer-copyright .social a:hover { color: var(--quaternary-color); } .footer .arrow { position: absolute; top: 40px; left: 45%; transform: translateX(-45%); z-index: -1; max-width: 4vw; min-width: 40px; } /* ==== --------- (4.03) footer styles end --------- ==== */ /* ==== --------- (5.0) all sections styles start --------- ==== */ .tp-overview .tp-overview-single { display: flex; align-items: center; gap: 30px; padding: 60px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .tp-overview .tp-overview-single:nth-of-type(1) { padding-top: 0px; } .tp-overview .tp-overview-single .thumb { min-width: 124px; } .tp-overview .tp-overview-single .wrapper { flex-grow: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .tp-overview .tp-overview-single .content { flex-grow: 1; } .tp-overview .tp-overview-single .cta a { font-size: 40px; color: var(--tertiary-color); } .tp-overview .tp-overview-single .cta a:hover { color: var(--primary-color); } .tp-overview .tp-overview-single:hover h4 a { color: var(--primary-color); } .tp-overview .tp-overview-single:hover .cta a { color: var(--primary-color); } .tp-story .tp-story__single { padding: 60px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.2509803922); } .tp-story .tp-story__single:nth-of-type(1) { padding-top: 80px; } .tp-story .tp-story__single:nth-last-of-type(1) { padding-bottom: 0px; border-bottom: 0px; } .tp-story .tp-story__single a { color: white; } .tp-story .tp-story__single a:hover { color: var(--quaternary-color); } .tp-story .tp-story__single p:nth-last-of-type(1) { color: rgba(255, 255, 255, 0.5019607843); text-transform: uppercase; } .tp-story .active a { color: var(--quaternary-color); } .tp-testimonial .tp-testimonial-inner { position: relative; z-index: 1; border-bottom: 1px solid rgba(0, 0, 0, 0.15); overflow: hidden; } .tp-testimonial .tp-testimonial-inner::after { content: ""; position: absolute; bottom: 0px; left: 10%; width: 10vw; height: 10vw; min-width: 80px; min-height: 80px; border-radius: 50%; background-image: linear-gradient(to bottom, rgba(255, 230, 0, 0.3764705882) 50%, transparent 50%); transform: translateY(50%); z-index: -1; animation: moveInfinite 20s alternate infinite; } .tp-testimonial .tp-testimonial-alt { border: 0px; } .tp-testimonial .tp-testimonial-alt::after { content: none; } .tp-testimonial .tp-testimonial__meta { display: flex; align-items: center; gap: 40px; row-gap: 24px; } .tp-testimonial .tp-testimonial__meta .thumb { width: 120px; min-width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .tp-testimonial .tp-testimonial__meta .thumb img { width: 100%; height: 100%; border-radius: 50%; } .tp-testimonial .tp-testimonial__meta .review i { color: #ffb800; } .tp-testimonial .tp-testimonial-arrow { display: flex; align-items: center; gap: 12px; position: absolute; top: 30%; right: 0px; } .tp-testimonial .tp-testimonial-arrow button, .tp-testimonial .tp-testimonial-arrow span { color: var(--tertiary-color); } .tp-testimonial .tp-testimonial-arrow .divider { width: 1px; height: 24px; background-color: var(--tertiary-color); } .tp-testimonial .tp-testimonial-arrow button { font-size: 30px; } .tp-testimonial .tp-testimonial-arrow button:hover span { color: var(--primary-color); } .tp-testimonial .tp-testimonial-pagination .slick-dots { display: flex; align-items: center; justify-content: flex-start; } .tp-testimonial .tp-testimonial-pagination li { margin-left: -20px; } .tp-testimonial .tp-testimonial-pagination li:nth-of-type(1) { margin-left: 0px; } .tp-testimonial .tp-testimonial-pagination img { width: 70px; height: 70px; min-width: 70px; border-radius: 50%; cursor: pointer; border: 5px solid white; box-shadow: 5px 4px 26px 0px rgba(0, 0, 0, 0.13); transition: var(--transition); filter: grayscale(100%); } .tp-testimonial .tp-testimonial-pagination .slick-active img { filter: grayscale(0%); border-color: var(--quaternary-color); } .tp-latest-post { overflow-x: clip; } .tp-latest-post .tp-lp-slider-wrapper { min-width: 100vw; } .tp-latest-post .tp-lp-slider { padding-left: 12px; } .tp-latest-post .tp-lp-slider__single { max-width: 416px; padding: 5px; /* background-color: white;*/ /* box-shadow: 0px 4px 28px 0px rgba(163, 163, 163, 0.25);*/ } .tp-latest-post .tp-lp-slider__single .thumb img { transition: var(--transition); } .tp-latest-post .tp-lp-slider__single:hover .thumb img { transform: scale(1.2) rotate(-6deg); } .tp-latest-post .tp-lp-slider__single:hover a { color: var(--primary-color); } .tp-latest-post .tp-lp-post__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tp-latest-post .tp-lp-post__meta span { width: 1px; height: 20px; background-color: var(--tertiary-color); } .sponsor img { transition: var(--transition); } .sponsor .slick-center img { /* filter: brightness(0) saturate(100%) invert(12%) sepia(96%) saturate(6152%) hue-rotate(233deg) brightness(100%) contrast(113%);*/ } .tp-study { position: relative; overflow-x: clip; } .tp-study .tp-study-arrows { gap: 30px; } .tp-study .tp-study-arrows button { position: relative; font-size: 30px; z-index: 1; font-weight: 200; } .tp-study .tp-study-arrows button span { font-weight: 200; } .tp-study .tp-study-arrows button::before { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background-color: var(--white); z-index: -1; top: 50%; left: 8px; transform: translateY(-50%); transition: var(--transition); } .tp-study .tp-study-arrows button:hover { color: var(--secondary-color); } .tp-study .tp-study-arrows button:hover::before { background-color: var(--quaternary-color); } .tp-study .tp-study-arrows .prev-study::before { left: unset; right: 8px; } .tp-study .slick-list { overflow: visible !important; } .tp-study .tp-study-slider-wrapper { min-width: 100vw; margin: 100px 0px 40px; } .tp-study .tp-study-slider { padding-left: 12px; overflow-x: clip; } .tp-study .tp-study-slider__single { width: 100%; max-width: 306px; transition: var(--transition); position: relative; z-index: 1; overflow: hidden; } .tp-study .tp-study-slider__single::before { content: ""; position: absolute; inset: 0px; transition: var(--transition); background: linear-gradient(180deg, rgba(0, 0, 0, 0) -2.65%, rgba(0, 0, 0, 0.55) 45.47%, #000 100%); transform: translateY(100%); } .tp-study .tp-study-slider__single:hover { transform: scale(1.2); z-index: 2; } .tp-study .tp-study-slider__single:hover::before { transform: scale(1); } .tp-study .tp-study-slider__single:hover .content { transform: translateY(0px); } .tp-study .content { padding: 40px 20px; position: absolute; bottom: 0px; left: 0px; right: 0px; transform: translateY(100%); transition: var(--transition); transition-delay: 0.2s; } .tp-study .content a { color: white; } .tp-study .counter__single { border-right: 1px solid rgba(0, 0, 0, 0.1882352941); padding: 0px 20px; } .tp-study .counter__single h2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .tp-gallery .tp-gallery-inner { position: relative; z-index: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.2509803922); overflow: hidden; } .tp-gallery .tp-gallery-inner::after { content: ""; position: absolute; bottom: 0px; left: 10%; width: 10vw; height: 10vw; min-width: 80px; min-height: 80px; border-radius: 50%; background-image: linear-gradient(to bottom, rgba(255, 230, 0, 0.3764705882) 50%, transparent 50%); transform: translateY(50%); z-index: -1; animation: moveInfinite 20s alternate infinite; } .tp-gallery .parallax-image-wrap { min-width: 100vw; } .tp-gallery .tp-gallery-slider-wrapper { min-width: 100vw; } .tp-gallery .tp-gallery-slider { padding-left: 12px; } .tp-gallery .tp-gallery__single { width: 100%; max-width: 306px; } .tp-service { position: relative; z-index: 1; overflow: hidden; } .tp-service .service-hr { position: relative; z-index: 1; border-bottom: 1px solid rgba(0, 0, 0, 0.15); overflow: hidden; } .tp-service .service-hr::after { content: ""; position: absolute; bottom: 0px; left: 10%; width: 10vw; height: 10vw; min-width: 80px; min-height: 80px; border-radius: 50%; background-image: linear-gradient(to bottom, rgba(255, 230, 0, 0.3764705882) 50%, transparent 50%); transform: translateY(50%); z-index: -1; animation: moveInfinite 20s alternate infinite; } .tp-latest-post { position: relative; overflow-x: clip; } .tp-latest-post .tp-study-arrows { gap: 30px; } .tp-latest-post .tp-study-arrows button { position: relative; font-size: 30px; z-index: 1; font-weight: 200; } .tp-latest-post .tp-study-arrows button span { font-weight: 200; } .tp-latest-post .tp-study-arrows button::before { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background-color: var(--white); z-index: -1; top: 50%; left: 8px; transform: translateY(-50%); transition: var(--transition); } .tp-latest-post .tp-study-arrows button:hover { color: var(--secondary-color); } .tp-latest-post .tp-study-arrows button:hover::before { background-color: var(--quaternary-color); } .tp-latest-post .tp-study-arrows .prev-lp::before { left: unset; right: 8px; } .transform { position: relative; overflow-x: clip; } .transform .anime { position: absolute; left: 0px; display: flex; align-items: center; gap: 30px; z-index: 1; } .transform .anime span { width: 8vw; height: 8vw; border-radius: 50%; background-image: linear-gradient(to right, rgba(255, 230, 0, 0.3137254902) 50%, transparent 50%); margin-left: -90px; display: inline-block; } .transform .anime span:nth-of-type(1) { margin-left: 20px; background-image: linear-gradient(to right, rgba(255, 230, 0, 0.1254901961) 50%, transparent 50%); } .transform .anime span:nth-of-type(2) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.1882352941) 50%, transparent 50%); } .transform .anime span:nth-of-type(3) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.2509803922) 50%, transparent 50%); } .transform .anime span:nth-of-type(4) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.3137254902) 50%, transparent 50%); } .transform .anime span:nth-of-type(6) { background-image: linear-gradient(to right, rgba(255, 230, 0, 0.5019607843) 50%, transparent 50%); } .transform .transform-inner { border-top: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .transform .transform-slider-wrapper { min-width: 100vw; } .transform .transform-slider { margin-left: -40px; } .transform .transform-slider .slick-list { margin: 0px; } .transform .transform-single { padding: 0px 40px; border-right: 1px solid #ffe600; width: 100%; max-width: 326px; } .transform .transform-single h5 { position: relative; display: inline-block; z-index: 1; } .transform .transform-single h5::after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; width: 100%; height: calc(100% - 20px); background-color: var(--quaternary-color); z-index: -1; } .transform .team-single h4 { position: relative; display: inline-block; z-index: 1; } .transform .team-single h4::after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; width: 100%; height: calc(100% - 20px); background-color: var(--quaternary-color); z-index: -1; } .transform .tp-testimonial-arrow { display: flex; align-items: center; gap: 12px; position: absolute; top: 30%; right: 0px; } .transform .tp-testimonial-arrow button, .transform .tp-testimonial-arrow span { color: var(--tertiary-color); } .transform .tp-testimonial-arrow .divider { width: 1px; height: 24px; background-color: var(--tertiary-color); } .transform .tp-testimonial-arrow button { font-size: 30px; } .transform .tp-testimonial-arrow button:hover span { color: var(--primary-color); } .transform .tp-team-arrow { display: flex; align-items: center; gap: 12px; } .transform .tp-team-arrow button, .transform .tp-team-arrow span { color: var(--tertiary-color); } .transform .tp-team-arrow .divider { width: 1px; height: 24px; background-color: var(--tertiary-color); } .transform .tp-team-arrow button { font-size: 30px; } .transform .tp-team-arrow button:hover span { color: var(--primary-color); } .tp-process .process__single { margin-bottom: 80px; } .tp-process .process__single:nth-last-of-type(1) { margin-bottom: 0px; } .tp-process .op-text { position: relative; z-index: 1; } .tp-process .op-text::before { content: ""; position: absolute; width: 80px; height: 80px; background-color: var(--primary-color); border-radius: 50%; z-index: -1; left: 50%; top: -10px; transform: translateX(-50%); } .tp-process .op-text::after { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 12px solid black; background-color: var(--quaternary-color); left: -100px; top: 50%; transform: translateY(-50%); } .c-study .c-study-banner { position: relative; z-index: 1; border-bottom: 1px solid rgba(0, 0, 0, 0.15); overflow: hidden; } .c-study .c-study-banner::after { content: ""; position: absolute; bottom: 0px; left: 10%; width: 10vw; height: 10vw; min-width: 80px; min-height: 80px; border-radius: 50%; background-image: linear-gradient(to bottom, rgba(255, 230, 0, 0.3764705882) 50%, transparent 50%); transform: translateY(50%); z-index: -1; animation: moveInfinite 20s alternate infinite; } .c-study .c-study-btns { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .c-study .c-study-btns span { width: 2px; height: 30px; background-color: rgba(68, 68, 68, 0.5019607843); } .c-study .c-study-btns button { font-size: 32px; font-weight: 600; line-height: 1; font-family: var(--mont); } .c-study .c-study-btns .study-btn-active { color: var(--primary-color); } .c-study .thumb { border: 10px solid #fff; background: #ebebeb; box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.06); } .c-study .c-study-single a { color: var(--primary-color); } .c-study .c-study-single h4 a { color: var(--secondary-color); } .c-study .c-study-single h4 a:hover { color: var(--primary-color); } .op-position .op-position-single { flex-wrap: wrap; padding: 40px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.17); } .op-position .op-position-single:nth-of-type(1) { padding-top: 0px; } .op-position .op-position-single .vertical-column-gap { row-gap: 16px; } .op-position .op-position-single h4, .op-position .op-position-single h5 { color: var(--tertiary-color); display: inline-block; } .op-position .op-position-single .cta a { font-size: 40px; } .op-position .op-position-single:hover a { color: var(--secondary-color); } .thrive .thumb { width: 200px; min-width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--quaternary-color); border-radius: 0px; } .thrive p { max-width: 500px; } .mason img { width: 100%; max-height: 470px; min-height: 470px; } .mason .botter { min-height: 420px !important; } .mason .toper { margin-top: -50px; } .job-single .j-d-sidebar { border: 1px solid rgba(0, 0, 0, 0.14); background: #fff; box-shadow: 0px 4px 31px 0px rgba(118, 118, 118, 0.09); padding: 40px; } .job-single .j-d-sidebar .cta a { width: 100%; background-color: var(--secondary-color); color: white; transition: all 0.6s ease-in-out; } .job-single .j-d-sidebar .cta a::before { transition: all 0.6s ease-in-out; } .blog-m .post-filter__wrapper { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .blog-m .post-filter__wrapper button { padding: 10px 24px; font-weight: 500; background-color: #ebebeb; color: black; border-radius: 50px; } .blog-m .post-filter__wrapper button:hover { background-color: black; color: white; } .blog-m .post-filter__wrapper .active { background-color: black; color: white; } .blog-m .tp-lp-slider__single { padding: 20px; background: #fff; box-shadow: 0px 4px 28px 0px rgba(163, 163, 163, 0.25); } .blog-m .tp-lp-post__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .blog-m .tp-lp-post__meta span { width: 1px; height: 20px; background-color: var(--tertiary-color); } .blog-m .masonry-grid { margin-bottom: -40px; } .blog-m .grid-item-main { margin-bottom: 40px; } .tp-post-details .tppr { flex-wrap: wrap; gap: 24px; row-gap: 30px; } .tp-post-details .tp-post-tags-container { gap: 16px; flex-wrap: wrap; } .tp-post-details .tp-post-meta, .tp-post-details .tp-post-tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tp-post-details .tp-post-meta span, .tp-post-details .tp-post-tags span { width: 1px; height: 20px; background-color: var(--tertiary-color); } .tp-post-details .bd-social { padding: 30px 0px; border-top: 1px solid #c1c1c1; border-bottom: 1px solid #c1c1c1; justify-content: flex-start; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .tp-post-details .bd-social a { width: auto; background-color: transparent; color: var(--tertiary-color); padding: 0px; min-width: auto; font-size: 18px; } .tp-post-details .bd-social a:hover { color: var(--secondary-color); } /* ==== --------- (5.0) all sections styles end --------- ==== */ /* ==== --------- (6.0) responsive styles start --------- ==== */ @media only screen and (max-width: 1799.98px) { .tp-banner .social, .tp-banner .scroll-to, .about-banner .social, .about-banner .scroll-to, .service-banner .social, .service-banner .scroll-to, .career-banner .social, .career-banner .scroll-to { display: none; } .footer .anime span, .about-banner .anime span, .transform .anime span { width: 6vw; height: 6vw; margin-left: -60px; } } @media only screen and (max-width: 1199.98px) { p, th, td, li, input, textarea, select, label, blockquote, span { font-size: 16px; line-height: 26px; } .text-xl { font-size: 20px; line-height: 30px; } a, button { font-size: 16px; line-height: 24px; } h1, .text-xxl { font-size: 57px; line-height: 68px; } h2 { font-size: 43px; line-height: 54px; } h3 { font-size: 32px; line-height: 42px; } .pl-100 { padding-left: 60px; } .offcanvas-nav .offcanvas-menu__list { margin-right: 60px; } .offcanvas-nav .anime { gap: 12px; } .offcanvas-nav .anime span { width: 80px; height: 80px; margin-left: -40px; } .tp-banner .tp-banner__content h1 img { display: none; } .tp-study .counter__single { border: 0px; } .footer .anime span, .about-banner .anime span, .transform .anime span { width: 100px; height: 100px; margin-left: -60px; } .footer .anime span:nth-of-type(4), .footer .anime span:nth-of-type(2), .footer .anime span:nth-of-type(3), .about-banner .anime span:nth-of-type(4), .about-banner .anime span:nth-of-type(2), .about-banner .anime span:nth-of-type(3), .transform .anime span:nth-of-type(4), .transform .anime span:nth-of-type(2), .transform .anime span:nth-of-type(3) { display: none; } } @media only screen and (max-width: 991.98px) { .primary-text { font-size: 18px; } h1, .text-xxl { font-size: 40px; line-height: 50px; } h2 { font-size: 30px; line-height: 40px; } h3 { font-size: 24px; line-height: 34px; } h4 { font-size: 20px; line-height: 30px; } h5 { font-size: 18px; line-height: 28px; } h6 { font-size: 16px; line-height: 26px; } .parallax-image-wrap { width: 100%; } .pls-60 { padding: 0px; } .pl-100 { padding-left: 0px; } .op-text { font-size: 60px; } .service-bg { padding: 100px 24px; } .cursor-inner, .cursor-outer { display: none; } .unset { max-width: 100%; } .dir-rtl { direction: ltr; } .pt-120 { padding-top: 100px; } .pb-120 { padding-bottom: 100px; } .mt-60 { margin-top: 40px; } .mt-80 { margin-top: 60px; } .fix-top { padding-top: 200px; } .progress-wrap { bottom: 10px; right: 15px; width: 40px; height: 40px; } .progress-wrap span { width: 30px; height: 30px; } .tp-banner .tp-banner__thumb .video-frame { top: 50%; right: unset; left: 50%; transform: translate(-50%, -50%); } .service-banner .thumb-one { bottom: 0px; } .tp-story .tp-story__single { padding: 40px 0px; } .tp-story .tp-story__single:nth-of-type(1) { padding-top: 80px; } .tp-testimonial .tp-testimonial__meta { gap: 24px; } .tp-testimonial .tp-testimonial-arrow { position: static; margin-top: 30px; } .tp-gallery .parallax-image-wrap { min-width: auto; } .c-study .c-study-btns { gap: 24px; } .c-study .c-study-btns button { font-size: 20px; } .career-banner { padding-bottom: 100px; } .career-banner .cp-banner-thumb { direction: rtl !important; } .op-position .op-position-single .text-xl { font-size: 14px; } .mason img { max-height: 270px; min-height: 270px; } .mason .botter { min-height: 220px !important; } .thrive .thumb { width: 150px; min-width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: 0px; } .footer .footer__thumb .parallax-image-wrap { min-width: auto; } .footer ul li { margin-bottom: 20px; } .footer .arrow { top: 200px; } } @media only screen and (max-width: 767.98px) { .offcanvas-nav .offcanvas-menu .offcanvas-menu__wrapper { padding: 0px 0px 20px; gap: 30px; } .offcanvas-nav .offcanvas-menu .navbar__item a, .offcanvas-nav .offcanvas-menu .navbar__item button { font-size: 20px; } .offcanvas-nav .offcanvas-menu .navbar__item a::after, .offcanvas-nav .offcanvas-menu .navbar__item button::after { font-size: 16px !important; } .offcanvas-nav .offcanvas-menu .navbar__sub-menu a, .offcanvas-nav .offcanvas-menu .navbar__sub-menu button { font-size: 14px; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__list { max-width: 320px; } .tp-latest-post .tp-lp-slider__single { max-width: 300px; } .tp-study .tp-study-slider-wrapper { margin: 40px 0px 0px; } .tp-study .tp-study-slider__single { max-width: 296px; } .tp-study .tp-study-slider__single:hover { transform: scale(1); } .tp-study .slick-active { z-index: 2; transform: scale(1); } .tp-study .slick-active::before { transform: scale(1); } .tp-study .slick-active .content { transform: translateY(0px); } .tp-gallery .tp-gallery__single { max-width: 296px; } .mason .toper { margin-top: 0px; } } @media only screen and (max-width: 575.98px) { .text-xl { font-size: 18px; line-height: 30px; } h1, .text-xxl { font-size: 30px; line-height: 40px; } h2 { font-size: 24px; line-height: 34px; } h3 { font-size: 20px; line-height: 30px; } .fix-top { padding-top: 190px; } .logo-img img { max-width: 150px; max-height: 40px; } .tp-header .primary-navbar { padding: 15px 0px; } .offcanvas-nav .offcanvas-menu::before { content: none; } .offcanvas-nav .social { left: 20px; } .offcanvas-nav .offcanvas-menu__list { margin-right: 0px; } .offcanvas-nav .anime { bottom: 20px; } .offcanvas-nav .anime span { width: 40px; height: 40px; margin-left: -20px; } .offcanvas-nav .anime span:nth-last-of-type(1), .offcanvas-nav .anime span:nth-last-of-type(2), .offcanvas-nav .anime span:nth-last-of-type(3) { display: none; } .tp-overview .tp-overview-single { flex-wrap: wrap; } .about-banner .foot-group .btn-anim { margin-left: 0px; margin-right: 0px; } .career-banner .text-xxl { font-size: 24px; line-height: 34px; max-width: 380px; } .career-banner .cp-banner-thumb { margin-top: -140px; } .career-banner .cp-banner-thumb img { min-width: auto; max-width: 50vw; } .job-single .j-d-sidebar { padding: 40px 20px; } .footer .footer__inner-single { gap: 20px; } } @media only screen and (max-width: 424.98px) { .tp-testimonial .tp-testimonial__meta { flex-direction: column; align-items: flex-start; } .footer .btn-anim, .about-banner .btn-anim { margin-left: 0px; } .footer .anime span, .about-banner .anime span { display: none; } } @media only screen and (min-width: 1400px) { .tp-banner .tp-banner__content h1 { font-size: 120px !important; line-height: 140px; margin-top: -18px; } .tp-study .counter__single h2 { font-size: 80px !important; line-height: 80px !important; margin-top: -16px; } } @media only screen and (min-width: 1200px) { .tp-banner .tp-banner__content h1 img { margin-top: -20px; display: inline-block; } .tp-process .process__thumb { padding-left: 80px; border-left: 1px solid white; } } @media only screen and (min-width: 768px) { .tp-study .slick-active + .slick-slide { z-index: 2; transform: scale(1.2); } .tp-study .slick-active + .slick-slide::before { transform: scale(1); } .tp-study .slick-active + .slick-slide .content { transform: translateY(0px); } } /* ==== --------- (6.0) responsive styles end --------- ==== */