@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap"); @font-face { font-family: 'vogue'; src: url('../fonts/Optima\ Medium.ttf') format('opentype'); font-weight: normal; font-style: normal; font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; } @font-face { font-family: 'centurygothic'; src: url('../fonts/Century\ Gothic.ttf') format('opentype'); font-weight: normal; font-style: normal; font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; } @font-face { font-family: 'centurygothicboild'; src: url('../fonts/GOTHICB.TTF') format('opentype'); font-weight: normal; font-style: normal; font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; } .parralax-overlay span { font-family: 'centurygothicboild', sans-serif; } .about-style-two-info{ text-align: justify; } .accrdion-portfolio-area .accordion-overlay h2{ font-family: 'centurygothicboild', sans-serif; } .accordion-portfolio-lists li h3{ font-family: 'centurygothicboild', sans-serif; } .parralax-overlay h3{ font-family: 'centurygothicboild', sans-serif; } .accordion-portfolio-lists li.out > span{ font-family: 'centurygothic', sans-serif; } .parralax-overlay h3{font-size: 20px;margin-top: 2px;} :root { --font-default: 'centurygothic', sans-serif; --font-heading: 'vogue', sans-serif; --fontawesome: "Font Awesome 5 Pro"; --black: #000000; --dark: #1d1d1d; --dark-secondary: #262525; --white: #ffffff; --color-primary: #5138ee; --color-secondary: #02ebad; --color-heading: #04000b; --color-paragraph: #666666; --box-shadow-primary: -1px 3px 10px 0 rgba(0, 0, 0, 0.6); --box-shadow-secondary: 0 10px 30px 0 rgba(44, 130, 237, 0.4); --box-shadow-regular: 0px 2px 12px 0px #e7e7e7; --bg-gray: #f1f3f5; --bg-gradient: linear-gradient(45deg, #26527b 0%, #4099d0 50%); } * { box-sizing: border-box; margin: 0px; padding: 0px; } body, html { height: 100%; } html { margin: 0px; padding: 0px; width: 100%; height: 100%; scroll-behavior: smooth; } .parralax-overlay p{ font-family: 'centurygothic', sans-serif; font-size: 16px!important; text-align: justify; letter-spacing: normal; } html, body, div, span, img, ol, ul, li, a, p, h1, h2, h3, h4, h5, h6, option, legend, label, table, th, td, tr, article, aside, caption, figure, footer, header, hgroup, mark, nav, section, time, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; } .wrapper { height: 100%; } img { border: none; outline: none; max-width: 100%; } label { display: inline-block; font-weight: normal; margin-bottom: 5px; max-width: 100%; } a { outline: none; text-decoration: none; color: var(--color-heading); } a img { border: none; } a:active { outline: none; text-decoration: none; color: var(--color-heading); opacity: 1; } a:focus { outline: none; text-decoration: none; color: var(--color-heading); } a:hover { outline: none; text-decoration: none; color: var(--color-primary); opacity: 1; } .secondary a:hover { color: var(--color-optional); } button { outline: none medium; } iframe { border: none; } hr { margin-top: 0px; margin-bottom: 0px; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(238, 238, 238); } pre { display: block; margin: 0px 0px 30px; padding: 9.5px; overflow-wrap: break-word; word-break: break-all; color: rgb(51, 51, 51); border: 1px solid rgb(237, 237, 237); border-radius: inherit; background-color: rgb(249, 249, 249); font-size: 13px; line-height: 1.42857; } input { border: 1px solid rgb(231, 231, 231); border-radius: inherit; box-shadow: inherit; min-height: 50px; } input:focus { outline: none; box-shadow: inherit; } textarea:focus { outline: none; box-shadow: inherit; } select:focus { outline: none; box-shadow: inherit; } ul { list-style-type: none; } ul, li { margin: 0px; padding: 0px; list-style: none; } b { font-weight: 800; } strong { font-weight: 800; } .row { --bs-gutter-x: 30px; } body { font-family: var(--font-default); font-size: 15px; font-weight: 500; line-height: 1.8; overflow-x: hidden; background-color: var(--white); color: var(--color-paragraph); } h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-weight: normal; line-height: 1.2; font-family: var(--font-heading); letter-spacing: .1rem; margin: 0px 0px 15px; } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 27px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 14px; } a, .btn, button { transition: all 0.35s ease-in-out 0s; outline: none medium; text-decoration: none; font-weight: 800; } p { color: var(--color-paragraph); margin: 0px 0px 25px; text-transform: none; font-weight: normal; font-family: var(--font-default); letter-spacing: .05rem; } .container-full { padding: 0px 15px; margin: auto; max-width: 1400px; } @media (min-width: 576px) { .container-full { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-full { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-full { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-full { max-width: 95%; width: 95%; } .box-layout { width: 94%; margin: auto; border-radius: 30px; } } .container-fill { padding: 0px 15px; margin: auto; max-width: 100%; } @media (min-width: 576px) { .container-fill { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-fill { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-fill { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-fill { width: 100%; max-width: 100%; padding-left: 50px; padding-right: 50px; } } @media (max-width: 1199px) { .container-fill { padding: 0px 15px; width: 100%; } } @media only screen and (max-width: 767px) { .row { --bs-gutter-x: 1.5rem; } } .item-center { display: flex; align-items: center; } .bg-cover { background-position: center center !important; background-size: cover !important; } .bg-fixed { background-attachment: fixed !important; background-position: center center !important; background-size: cover !important; } .bg-fit { background-size: 100% 100% !important; background-position: center center !important; } .bg-gray { background: var(--bg-gray); } .bg-dark .bg-gray { background: var(--dark-secondary); } .bg-gray-secondary { background: var(--bg-gray-secondary); } .bg-light { background-color: var(--white) !important; } .bg-dark { background-color: var(--dark) !important; } .bg-dark-secondary { background-color: var(--dark-secondary) !important; } .bg-theme { background-color: var(--color-primary); } .bg-gradient { background: var(--bg-gradient) !important; } .bg-gradient-secondary { background: var(--bg-gradient-reverse) !important; } .text-light { color: var(--white); } .text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6, .text-light p, .text-light span, .text-light a { color: var(--white); } .shadow { box-shadow: inherit !important; } .shadow.dark { position: relative; z-index: 1; } .shadow.dark::after { background: var(--dark); content: ""; height: 100%; left: 0px; opacity: 0.5; position: absolute; top: 0px; width: 100%; z-index: -1; transition: all 0.35s ease-in-out 0s; } .shadow.dark-hard { position: relative; z-index: 1; } .shadow.dark-hard::after { background: var(--black) none repeat scroll 0 0; content: ""; height: 100%; left: 0px; opacity: 0.5; position: absolute; top: 0px; width: 100%; z-index: -1; transition: all 0.35s ease-in-out 0s; } .shadow.theme { position: relative; z-index: 1; } .shadow.theme::after { background: var(--color-primary) none repeat scroll 0 0; content: ""; height: 100%; left: 0px; opacity: 0.7; position: absolute; top: 0px; width: 100%; z-index: -1; transition: all 0.35s ease-in-out 0s; } .shadow.light { position: relative; z-index: 1; } .shadow.light::after { background: var(--white) none repeat scroll 0 0; content: ""; height: 100%; left: 0px; opacity: 0.6; position: absolute; top: 0px; width: 100%; z-index: -1; transition: all 0.35s ease-in-out 0s; } .default-padding, .default-padding-top, .default-padding-bottom, .default-padding-mx { position: relative; } .default-padding { padding-top: 120px; padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding { padding-top: 60px; padding-bottom: 60px; } } .default-padding-big { padding: 250px 0px; } @media only screen and (max-width: 767px) { .default-padding-big { padding: 60px 0px; } footer img.logo { height: 109px; padding-left: 24px!important; margin-bottom: 30px; } } .default-padding-top { padding-top: 120px; } @media only screen and (max-width: 767px) { .default-padding-top { padding-top: 50px; } } .default-padding-bottom { padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding-bottom { padding-bottom: 50px; } } .default-padding.bottom-less { padding-top: 120px; padding-bottom: 90px; } @media only screen and (max-width: 767px) { .default-padding.bottom-less { padding-top: 50px; padding-bottom: 20px; } } .default-padding-bottom.bottom-less { margin-bottom: -30px; } @media only screen and (max-width: 767px) { .default-padding-bottom.bottom-less { margin-bottom: 0px; padding-bottom: 20px; } } .default-padding-top.bottom-less { margin-bottom: -30px; } @media only screen and (max-width: 767px) { .default-padding-top.bottom-less { margin-bottom: -20px; } } @media only screen and (min-width: 1200px) { .align-center { -webkit-box-align: center; align-items: center; } } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .border-top { border-top: 1px solid rgb(231, 231, 231); } .border-bottom { border-bottom: 1px solid rgb(231, 231, 231); } .border-left { border-left: 1px solid rgb(231, 231, 231); } .border-right { border-right: 1px solid rgb(231, 231, 231); } .heading { font-weight: 800; margin-bottom: 25px; margin-top: -5px; font-size: 42px; line-height: 1.3; } .heading span { font-weight: 400; } .site-heading { margin-bottom: 60px; } .site-heading strong { display: inline-block; font-weight: 800; position: relative; z-index: 1; } .site-heading strong::after { position: absolute; left: 0px; bottom: -5px; content: ""; height: 100%; width: 100%; background: url("../img/shape/35.html") center bottom / contain no-repeat; z-index: -1; } .title { text-transform: uppercase; font-weight: normal; margin-top: -15px; font-size: 50px !important; } @media (max-width: 767px) { .title { text-transform: uppercase; font-size: 36px !important; margin-top: 0px; letter-spacing: .1rem; } } .bg-dark .title { color: var(--white); } .site-heading .title { margin-bottom: 0px; } .bg-dark .site-heading .title { text-transform: uppercase; color: var(--white); } .sub-title { text-transform: uppercase; color: var(--color-primary); font-weight: 900; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; z-index: 1; margin-bottom: 25px; } .bg-gradient .sub-title, .bg-theme .sub-title { color: var(--white); -webkit-text-fill-color: inherit; background: transparent; } @media (max-width: 767px) { .sub-title { margin-bottom: 15px; } } .site-heading p { margin-bottom: 0px; margin-top: 25px; padding: 0px 10%; } .site-heading .devider { display: inline-block; width: 50px; height: 2px; background: var(--color-primary); position: relative; z-index: 1; left: 10px; } .site-heading.light .devider, .bg-theme .site-heading .devider, .bg-gradient .site-heading .devider, .shadow .site-heading .devider, .bg-dark .site-heading .devider { background: var(--white); } @media (max-width: 767px) { .site-heading p { padding: 0px; } } @media only screen and (max-width: 767px) { .site-heading { margin-bottom: 40px; font-size: 36px; line-height: 1.2; } } .heading-left { position: relative; z-index: 1; margin-bottom: 60px; } .heading-left .heading { font-weight: 800; margin-bottom: 0px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .heading-left .heading { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .heading-left .heading { margin-bottom: 15px; font-size: 36px; line-height: 1.2; } } .heading-left p { margin-bottom: 0px; } .heading-left .btn { margin-top: 30px; } @media only screen and (max-width: 767px) { .heading-left { margin-bottom: 30px; } } .sub-heading { text-transform: uppercase; color: var(--color-primary); font-weight: 800; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; z-index: 1; margin-bottom: 20px; } .shadow .sub-heading { -webkit-text-fill-color: var(--white); font-weight: 800; } .bg-gradient .sub-heading { color: var(--white); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-color: transparent; background-clip: inherit; -webkit-text-fill-color: inherit; opacity: 0.9; } .site-heading.text-light .sub-title, .site-heading.text-light .sub-heading { -webkit-text-fill-color: inherit; color: var(--white); } .video-play-button i { display: inline-block; background: var(--color-primary); height: 100px; width: 100px; line-height: 100px; text-align: center; border-radius: 50%; color: rgb(255, 255, 255); position: relative; } .video-play-button i { font-weight: 100; font-size: 35px; position: relative; left: 3px; top: 2px; } .video-play-button .effect { position: absolute; width: 150px; height: 150px; background: rgb(7, 7, 30); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; animation: 1500ms ease-out 0s infinite normal none running video-play; } .video-play-button .effect::after { position: absolute; content: ""; width: 150px; height: 150px; background: rgba(255, 255, 255, 0.2); opacity: 0; border-radius: 100%; left: 50%; top: 50%; animation: 1500ms ease-out 2s infinite normal none running video-play; } .video-play-button .effect::before { position: absolute; content: ""; width: 150px; height: 150px; background: rgb(7, 7, 30); opacity: 0; border-radius: 100%; left: 50%; top: 50%; animation: 1500ms ease-out 3s infinite normal none running video-play; } .video-play-button.with-text { width: auto; background: transparent; } .video-play-button.with-text span { position: relative; z-index: 1; } .video-play-button.with-text span i { margin-left: 25px; margin-right: 30px; color: var(--white); left: -1px; } .video-play-button.with-text .effect { height: 60px; width: 60px; left: 0px; animation: inherit; background: var(--color-primary); top: 0px; opacity: 1; z-index: 1; } .video-play-button.with-text .effect::before { display: none; } .video-play-button.with-text .effect::after { background: var(--color-primary); height: 100%; width: 100%; z-index: inherit; animation-delay: 0s; } @-webkit-keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1.5); opacity: 0; } } @keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1.5); opacity: 0; } } @-webkit-keyframes video-play { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1.5); opacity: 0; } } @keyframes video-play { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1.5); opacity: 0; } } .zoom-animation { animation: 2000ms ease-out 0s infinite normal none running zoom; } @-webkit-keyframes zoom { 0% { transform: scale(1, 1); } 100% { transform: scale(1.2, 1.2); } } @keyframes zoom { 0% { transform: scale(1, 1); } 100% { transform: scale(1.2, 1.2); } } .spiner-animation { animation: 20s linear 0s infinite normal none running spinner; } @-webkit-keyframes spinner { 100% { transform: rotateZ(360deg); } } @keyframes spinner { 100% { transform: rotateZ(360deg); } } .spiner-reverse-animation { animation: 20s linear 0s infinite normal none running spinnerReverse; } @-webkit-keyframes spinnerReverse { 100% { transform: rotateZ(-360deg); } } @keyframes spinnerReverse { 100% { transform: rotateZ(-360deg); } } @keyframes UpDown { 0% { transform: translateY(0px); } 50% { transform: translateY(-25px); } 100% { transform: translateY(0px); } } .updown-animation { animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); animation-name: UpDown; animation-duration: 2s; } @-webkit-keyframes UpDown { 0% { transform: translateY(0px); } 50% { transform: translateY(-25px); } 100% { transform: translateY(0px); } } .leftRight-animation { animation: 10s ease-out 0s infinite normal none running fadeLeftRight; } @keyframes fadeLeftRight { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(100px); } } @-webkit-keyframes fadeLeftRight { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(100px); } } .rightLeft-animation { animation: 10s ease-out 0s infinite normal none running fadeRightLeft; } @keyframes fadeRightLeft { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(-50px); } } @-webkit-keyframes fadeRightLeft { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(-50px); } } .zoomUpDown-animation { animation: 10s ease-out 0s infinite normal none running zoomUpDown; } @keyframes zoomUpDown { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(0.7); } } @-webkit-keyframes zoomUpDown { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(0.8); } } .moving-animation { animation: 10s ease-out 0s infinite normal none running moving; } @-webkit-keyframes moving { 0% { transform: translate(0px, 0px); } 20% { transform: translate(0px, -30px); } 50% { transform: translate(-100px, -30px); } 70% { transform: translate(-100px, 0px); } 100% { transform: translate(0px, 0px); } } @keyframes moving { 0% { transform: translate(0px, 0px); } 20% { transform: translate(0px, -30px); } 50% { transform: translate(-100px, -30px); } 70% { transform: translate(-100px, 0px); } 100% { transform: translate(0px, 0px); } } @keyframes infinite-rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes infinite-rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes open { 0% { width: 0px; height: 0px; } 50% { width: 100px; height: 0px; } 100% { width: 100px; height: 55px; } } @keyframes open { 0% { width: 0px; height: 0px; } 50% { width: 100px; height: 0px; } 100% { width: 100px; height: 55px; } } @-webkit-keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } @keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } @-webkit-keyframes shine { 0% { background-position: 0px center; } 60% { background-position: 180px center; } 100% { background-position: 180px center; } } @keyframes shine { 0% { background-position: 0px center; } 60% { background-position: 180px center; } 100% { background-position: 180px center; } } @-webkit-keyframes infiniteMove { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } @keyframes infiniteMove { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } @-webkit-keyframes infiniteMove2 { 0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } 50% { border-radius: 50% 60% 30% / 30% 60% 70% 40%; } 100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } } @keyframes infiniteMove2 { 0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } 50% { border-radius: 50% 60% 30% / 30% 60% 70% 40%; } 100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } } .btn { display: inline-block; font-weight: 800; text-transform: capitalize; transition: all 0.35s ease-in-out 0s; overflow: hidden; border-radius: 7px; border: 2px solid transparent; font-size: 16px; letter-spacing: 0px; padding: 13px 30px; background: rgb(231, 237, 248); position: relative; z-index: 1; box-shadow: none !important; } .btn:focus, .btn.active { border-radius: 5px; box-shadow: inherit; border: 2px solid transparent; } .btn:hover { background-color: var(--color-primary); color: var(--white); } .btn.radius { border-radius: 6px; } .btn.btn-border { border: 2px solid rgb(221, 221, 221); background: transparent; position: relative; z-index: 1; overflow: hidden; font-weight: 800; } .btn.btn-border::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); transition: all 0.25s ease-in-out 0s; transform: translateY(-45%) skew(25deg) scale(0); } .btn.btn-border:hover::after { transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-border:hover { border-color: var(--dark); } .btn.btn-border.animation::after { position: absolute; top: 0px; right: inherit; bottom: inherit; left: 0px; content: ""; height: 100%; width: 0px; z-index: -1; background: rgb(231, 231, 231); transition: all 0.25s ease-in-out 0s; } .btn.btn-border.animation:hover { border-color: rgb(231, 231, 231); color: var(--dark); } .btn.btn-border.animation:hover::after { width: 100%; } .btn.btn-border-dark { border: 2px solid var(--dark); background: transparent; } .btn.btn-border-dark:hover { background: var(--dark); border-color: var(--dark); } .btn.btn-border-dark.animation::after { position: absolute; top: 0px; right: inherit; bottom: inherit; left: 0px; content: ""; height: 100%; width: 0px; z-index: -1; background: var(--dark); transition: all 0.25s ease-in-out 0s; } .btn.btn-border-dark.animation:hover { border-color: var(--dark); color: var(--white); } .btn.btn-border-dark.animation:hover::after { width: 100%; } .btn.btn-border-theme { border: 2px solid var(--color-primary); background: transparent; } .btn.btn-border-theme:hover { background: var(--color-primary); border-color: var(--color-primary); } .btn.btn-border-theme.animation::after { position: absolute; top: 0px; right: inherit; bottom: inherit; left: 0px; content: ""; height: 100%; width: 0px; z-index: -1; background: var(--color-primary); transition: all 0.25s ease-in-out 0s; } .btn.btn-border-theme.animation:hover { border-color: var(--color-primary); color: var(--white); } .btn.btn-border-theme.animation:hover::after { width: 100%; } .btn.btn-border-light { border: 2px solid var(--white); background: transparent; color: var(--white); } .btn.btn-border-light:hover { background: var(--white); border-color: var(--white); color: var(--dark); } .btn.btn-border-light.animation::after { position: absolute; top: 0px; right: inherit; bottom: inherit; left: 0px; content: ""; height: 100%; width: 0px; z-index: -1; background: var(--white); transition: all 0.25s ease-in-out 0s; } .btn.btn-border-light.animation:hover { border-color: var(--white); color: var(--dark); } .btn.btn-border-light.animation:hover::after { width: 100%; } .btn.btn-border.light { color: var(--white); border-color: var(--white); } .btn.btn-border.light::after { background: var(--color-primary); } .btn.btn-border.light:hover { border-color: var(--color-primary); } .btn.btn-gradient { border: none; color: var(--white); } .btn.btn-gradient::after { position: absolute; top: 0px; right: inherit; bottom: inherit; left: 0px; content: ""; height: 100%; width: 100%; z-index: -1; background-image: linear-gradient(to left, var(--color-primary), var(--color-secondary), var(--color-primary) ); transition: all 0.25s ease-in-out 0s; background-size: 220%; } .btn.btn-gradient:hover::after { background-position: -70% 0px; } .btn.btn-gradient.active { background-position: -70% 0px; } .btn.btn-theme { color: var(--white); border: none; background: var(--color-primary); } .btn.btn-theme::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); transition: all 0.25s ease-in-out 0s; transform: translateY(-45%) skew(25deg) scale(0); } .bg-dark .btn.btn-theme::after { background-color: var(--color-secondary); } .bg-dark .btn.btn-theme:hover { color: var(--color-heading); } .banner-style-four .btn.btn-theme::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; transition: all 0.25s ease-in-out 0s; transform: translateY(-45%) skew(25deg) scale(0); background: var(--white) !important; } .btn.btn-theme:hover::after { transform: translateY(-45%) skew(25deg) scale(1.2); } .banner-style-four .btn.btn-theme:hover { color: var(--color-heading) !important; } button { display: inline-block; font-weight: 800; text-transform: capitalize; transition: all 0.35s ease-in-out 0s; overflow: hidden; border-radius: 7px; box-shadow: inherit; font-size: 16px; letter-spacing: 0px; padding: 14px 40px; position: relative; z-index: 1; color: var(--white); border: none; background: #de9645; } button::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); transition: all 0.25s ease-in-out 0s; transform: translateY(-45%) skew(25deg) scale(0); } button:hover::after { transform: translateY(-45%) skew(25deg) scale(1.2); } button i { margin-right: 4px; } .btn.btn-theme.secondary { color: var(--white); border: none; background: var(--color-optional); } .btn.btn-theme.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); transition: all 0.25s ease-in-out 0s; transform: translateY(-45%) skew(25deg) scale(0); } .text-light .btn.btn-theme.secondary::after { background-color: var(--white); } .text-light .btn.btn-theme.secondary:hover { color: var(--color-heading); } .btn.btn-theme.secondary:hover::after { transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-theme.hover-light::after { background-color: var(--white); transition: all 0.25s ease-in-out 0s; } .btn.btn-theme.hover-light:hover { color: var(--dark); transition: all 0.25s ease-in-out 0s; } .btn.btn-theme.hover-light:hover::after { transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-light { color: var(--color-heading); background: var(--white); border: 2px solid transparent; } .btn.btn-light.btn-md { padding: 13px 52px; } .btn.btn-light:hover { color: var(--white); background: transparent; border: 2px solid var(--white); } .btn.btn-dark { color: var(--white); background: var(--dark); border: none; } .btn.btn-dark::after { position: absolute; top: 0px; right: inherit; bottom: inherit; left: 0px; content: ""; height: 100%; width: 0px; z-index: -1; background-color: var(--color-primary); transition: all 0.25s ease-in-out 0s; } .shadow .btn.btn-dark::after { background-color: var(--white); } .shadow .btn.btn-dark:hover { color: var(--color-heading) !important; } .btn.btn-dark:hover::after { width: 100%; } .btn.btn-dark.secondary { color: var(--white); border: none; background: var(--dark); } .btn.btn-dark.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--color-optional); transition: all 0.25s ease-in-out 0s; transform: translateY(-45%) skew(25deg) scale(0); } .btn.btn-dark.secondary:hover::after { transform: translateY(-45%) skew(25deg) scale(1.2); } .btn i { position: relative; top: 1px; margin-left: 5px; } .btn.text-slide { min-width: 150px; height: 55px; line-height: 55px; } .btn.text-slide span { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; text-align: center; } .btn.animate-border { overflow: inherit; z-index: inherit; width: 200px; height: 55px; line-height: 55px; padding: 0px; } .btn.animate-border:hover { background: transparent; color: var(--dark); } .btn.animate-border:hover .hover-border::after, .btn.animate-border:hover .hover-border::before { opacity: 1; animation: 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) 0s 1 normal forwards running open; } .btn.animate-border:hover .hover-border-bottom::after, .btn.animate-border:hover .hover-border-bottom::before { opacity: 1; animation: 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s 1 normal forwards running openB; } .btn.animate-border .hover-border { position: absolute; left: 0px; top: -1px; height: 100%; width: 100%; } .btn.animate-border .hover-border::before { position: absolute; content: ""; height: 0px; width: 0px; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-left: solid 2px var(--color-primary); right: 98px; top: -1px; } .btn.animate-border .hover-border::after { position: absolute; content: ""; height: 0px; width: 0px; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-right: solid 2px var(--color-primary); left: 98px; top: -1px; } .btn.animate-border .hover-border-bottom { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 1; } .btn.animate-border .hover-border-bottom::before { position: absolute; content: ""; width: 0px; display: block; opacity: 0; height: 55px; border-bottom: solid 2px var(--color-primary); right: -1px; bottom: -2px; } .btn.animate-border .hover-border-bottom::after { position: absolute; content: ""; width: 0px; display: block; opacity: 0; height: 100%; border-bottom: solid 2px var(--color-primary); left: 0px; bottom: -2px; } .btn.animated-arrow { border: none; background: transparent; min-width: 14rem; height: auto; padding: 0px; } .btn.animated-arrow .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1) 0s; position: relative; display: block; margin: 0px; width: 3.5rem; height: 3.5rem; background: var(--color-primary); border-radius: 2rem; } .btn.animated-arrow .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1) 0s; left: 15px; width: 1.125rem; height: 0.125rem; background: none; position: absolute; top: 0px; bottom: 0px; margin: auto; } .btn.animated-arrow .circle .icon::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid var(--white); border-right: 0.125rem solid var(--white); transform: rotate(45deg); } .btn.animated-arrow .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1) 0s; position: absolute; inset: 0px; padding: 15px 0px; margin: 0px 0px 0px 70px; color: var(--dark); line-height: 2; text-align: left; width: 100%; font-size: 14px; } .btn.animated-arrow:hover { color: var(--white); } .btn.animated-arrow:hover .circle { width: 100%; } .btn.animated-arrow:hover .circle .icon.arrow { background: var(--white); transform: translate(1.5rem, 0px); } .btn.animated-arrow:hover .button-text { color: var(--white); } .btn.circle { border-radius: 30px !important; } .btn-simple { line-height: 1; text-transform: uppercase; display: inline-block; color: var(--color-paragraph); } .btn-simple i { transform: rotate(-45deg); display: inline-block; margin-left: 2px; } .btn-simple:hover { color: var(--color-primary); } .video-btn i { display: inline-block; height: 55px; width: 55px; text-align: center; line-height: 55px; background: var(--color-primary); border-radius: 50%; position: relative; margin-right: 20px; color: var(--white); } .text-light .video-btn i { background: var(--white); color: var(--color-primary); } .video-btn i::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: var(--color-primary) repeat scroll 0 0; border-radius: 50%; animation: 1500ms ease-out 0s infinite normal none running pulse-border; z-index: -1; } .text-light .video-btn i::after { background: var(--white) repeat scroll 0 0; } .text-shine { background-image: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-position: 0px center; background-clip: text; -webkit-text-fill-color: transparent; animation: 3s linear 0s infinite normal forwards running shine; text-size-adjust: none; font-weight: 800; font-size: 16px; text-decoration: none; white-space: nowrap; padding: 12px 48px; } .animate-inout { background: linear-gradient(90deg, rgb(138, 101, 82) 0%, rgb(71, 45, 32) 100%); color: var(--white); font-size: 12px; text-transform: capitalize; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; overflow: hidden; border: solid 2px var(--color-primary); cursor: pointer; } .btn-icon { position: relative; padding-left: 20px; } .btn-icon:hover { color: var(--color-primary); } .btn-icon::after { position: absolute; right: 10px; top: 50%; content: ""; height: 2px; left: 0px; background: var(--color-heading); transform: translateY(-50%); margin-top: -1px; transition: all 0.35s ease-in-out 0s; } .btn-icon:hover::after { background: var(--color-primary); } .btn-icon i { font-weight: 800; } .btn-icon:hover { padding-left: 40px; } .animate-inout span { z-index: 1; transition: all 0.3s ease-out 0s; line-height: 20px; } .animate-inout::before, .animate-inout::after { width: 0%; height: 0%; position: absolute; content: ""; border-radius: 100%; } .animate-inout::after { transition: all 0.5s ease 0s; background-color: var(--white); } .animate-inout::before { transition: all 0.5s ease-out 0s; background: var(--color-primary); } .animate-inout.animate-inout-borde { background: transparent; color: var(--dark); } .animate-inout.animate-inout-borde::after { background: linear-gradient(90deg, rgb(138, 101, 82) 0%, rgb(71, 45, 32) 100%); } .animate-inout.animate-inout-borde:hover { color: var(--white); } .animate-inout.animate-inout-borde:hover::before { transition: all 0.5s ease-in 0s; } .animate-inout.animate-inout-borde:hover::after { transition: all 0.7s ease-in 0s; } .animate-inout:hover { color: var(--dark); } .animate-inout:hover::before, .animate-inout:hover::after { width: 200px; height: 200px; border-radius: 4px; } .animate-inout:hover::before { transition: all 0.5s ease-in 0s; } .animate-inout:hover::after { transition: all 0.7s ease-in 0s; } .btn-md { padding: 16px 52px; font-size: 17px; } .btn-md.btn-border { padding: 14px 52px; } .btn-sm { padding: 16px 45px; font-size: 14px; } .btn-sm.btn-border, .btn-sm.btn-light { padding: 14px 45px; } .mfp-close-btn-in .mfp-close::after { display: none; } .btn-animation { z-index: 1; position: relative; font-size: 18px; display: inline-block; margin-left: 10px; } .bg-dark .btn-animation { color: var(--white); } .btn-animation i { display: inline-block; height: 55px; width: 55px; text-align: center; line-height: 55px; background: var(--white); color: var(--color-heading); border-radius: 50%; font-weight: 400; margin-right: 10px; transition: all 0.35s ease-in-out 0s; transform: scale(0); } .btn-animation:hover { margin-left: 0px; color: var(--color-heading); } .bg-dark .btn-animation:hover { color: var(--white); } .btn-animation:hover i { transform: scale(1); } .btn-animation::after { position: absolute; left: -13px; top: 0px; content: ""; height: 60px; width: 60px; border: 1px solid rgb(194, 191, 191); border-radius: 50%; transition: all 0.35s ease-in-out 0s; transform: scale(1); z-index: -1; } .bg-dark .btn-animation::after { border: 1px solid rgba(255, 255, 255, 0.5); } .btn-animation:hover::after { transform: scale(0); } .btn-animation span { transition: all 0.35s ease-in-out 0s; left: -50px; position: relative; text-transform: uppercase; font-weight: 700; } .btn-animation:hover span { left: 0px; } .btn-animation.dark::after { border-color: rgb(197, 197, 197); z-index: -1; } .btn-animation.dark i { background: var(--color-primary); color: var(--white); } .btn-animation.dark:hover { color: var(--color-heading); } @media only screen and (max-width: 767px) { .row { --bs-gutter-x: 1.5rem; } } a.btn-round-animation { display: inline-block; height: 180px; width: 180px; text-align: center; line-height: 180px; border: 1px solid rgb(204, 204, 204); border-radius: 50%; font-size: 14px; font-weight: 700; overflow: hidden; position: relative; z-index: 1; } a.btn-round-animation i { display: inline-block; transform: rotate(-45deg); font-weight: 400; margin-left: 5px; } a.btn-round-animation::after { position: absolute; left: 0px; top: 0px; content: ""; height: 0px; width: 100%; background: var(--color-primary); z-index: -1; transition: all 0.3s ease-in-out 0s; border-radius: 50%; } a.btn-round-animation::before { position: absolute; left: 0px; bottom: 0px; content: ""; height: 0px; width: 100%; background: var(--bg-gradient); z-index: -1; transition: all 0.4s ease-in-out 0s; border-radius: 50%; } a.btn-round-animation:hover { color: var(--white); } a.btn-round-animation:hover::before { height: 100%; } a.btn-round-animation:hover::after { opacity: 0.4; height: 80%; } a.btn-round-animation.dark { border-color: rgba(255, 255, 255, 0.2); } .bg-dark, .bg-dark-secondary, .bg-dark p, .bg-dark-secondary p { color: rgb(204, 204, 204); } .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 { color: var(--white); } .nice-select { -webkit-tap-highlight-color: transparent; background-color: var(--white); border: 1px solid rgb(232, 232, 232); box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 16px; font-weight: normal; height: 50px; line-height: 50px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; transition: all 0.2s ease-in-out 0s; user-select: none; white-space: nowrap; width: 100%; margin-bottom: 15px; text-align: left !important; } .nice-select:hover { border-color: rgb(219, 219, 219); } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: rgb(153, 153, 153); } .nice-select::after { border-bottom: 2px solid rgb(153, 153, 153); border-right: 2px solid rgb(153, 153, 153); content: ""; display: block; height: 5px; margin-top: -6px; pointer-events: none; position: absolute; right: 12px; top: 50%; transform-origin: 66% 66%; transform: rotate(45deg); transition: all 0.15s ease-in-out 0s; width: 5px; } .nice-select.open .list { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0px); height: auto; overflow-y: auto !important; } .nice-select.open ::after { transform: rotate(-135deg); } .nice-select.disabled { border-color: rgb(237, 237, 237); color: rgb(153, 153, 153); pointer-events: none; } .nice-select.disabled::after { border-color: rgb(150, 170, 193); } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0px !important; right: 0px !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0px; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small::after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { background-color: var(--white); border-radius: 5px; box-shadow: rgba(68, 68, 68, 0.11) 0px 0px 0px 1px; box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0px; pointer-events: none; position: absolute; top: 100%; left: 0px; transform-origin: 50% 0px; transform: scale(0.75) translateY(-21px); transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25) 0s, opacity 0.15s ease-out 0s; z-index: 9; width: 100%; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; transition: all 0.2s ease 0s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: rgb(246, 246, 246); } .nice-select .option.selected { font-weight: 800; } .nice-select .option.disabled { background-color: transparent; color: rgb(153, 153, 153); cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } .mfp-iframe-holder .mfp-close { color: transparent; background: transparent; } .mfp-iframe-holder .mfp-close::before { position: absolute; right: 0px; top: 0px; height: 20px; width: 20px; z-index: 1; display: block; content: ""; font-family: "Font Awesome 5 Pro"; font-weight: 100; color: var(--white); } .item-flex { align-items: center; display: flex; } .item-flex li { margin-left: 30px; } .item-flex li:first-child { margin: 0px; border: none; padding: 0px; } .item-flex li i { margin-right: 10px; font-weight: 100; font-size: 24px; color: var(--color-primary); } .top-bar-area li { display: flex; align-items: center; border-left: 1px solid rgba(255, 255, 255, 0.5); margin-left: 30px; padding-left: 30px; } .top-bar-area .social li { display: inline-block; margin-right: 30px; } .top-bar-area .social li:first-child { margin-right: 0px; } .top-bar-area .text-end .social li { margin-right: 0px; margin-left: 30px; } .top-bar-area .text-end .social li:first-child { margin-left: 0px; } .top-bar-area { display: flex; align-items: center; justify-content: space-between; padding: 10px 0px; } .top-bar-area.top-bar-style-one.bg-dark { border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .top-bar-style-two { padding: 20px 0px; } .top-bar-style-two .text-end .social li { margin-left: 8px; } .top-bar-style-two .social li a { display: inline-block; background: var(--dark); color: var(--white); height: 38px; width: 38px; text-align: center; line-height: 38px; border-radius: 50%; } .top-bar-style-two .item-flex li i { font-weight: 600; color: var(--color-paragraph); } .call-entry { display: flex; justify-content: right; text-align: left; } .call-entry p { margin-bottom: 5px; line-height: 1; font-size: 14px; } .call-entry p strong { font-weight: 600; color: var(--blue); } .call-entry h5 { margin: 0px; font-weight: 600; font-size: 20px; letter-spacing: 0.6px; } .call-entry h5 a { display: inline-block; text-transform: lowercase; padding: 0px !important; } .call-entry i { display: inline-block; font-size: 40px; margin-right: 15px; position: relative; color: var(--white); } .top-bar-style-two .item-flex li strong { display: block; text-transform: uppercase; font-weight: 600; color: var(--white); } .top-bar-style-two .item-flex li a { font-weight: 500; color: var(--white); } .top-bar-style-two .item-flex li a:hover { color: var(--white); } .top-bar-style-two .item-flex li { line-height: 1.7; } .top-bar-style-two .item-flex li i { display: inline-block; font-size: 40px; color: var(--white); margin-right: 15px; font-weight: 100; } .banner-area { height: 100%; width: 100%; position: relative; } @media (max-width: 1023px) { .banner-area { height: auto; } } .banner-area div { height: 100%; } .banner-area div.swiper-slide .row div { height: auto; } .banner-area.top-pad-80 .content { padding-top: 80px; } @media (max-width: 1023px) { .banner-area.top-pad-80 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-80 .content { padding-top: 140px; } } .banner-area.top-pad-90 .content { padding-top: 90px; } @media (max-width: 1023px) { .banner-area.top-pad-90 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-90 .content { padding-top: 140px; } } .banner-area.top-pad-100 .content { padding-top: 100px; } @media (max-width: 1023px) { .banner-area.top-pad-100 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-100 .content { padding-top: 140px; } } .banner-area.top-pad-110 .content { padding-top: 110px; } @media (max-width: 1023px) { .banner-area.top-pad-110 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-110 .content { padding-top: 140px; } } .banner-area.top-pad-120 .content { padding-top: 120px; } @media (max-width: 1023px) { .banner-area.top-pad-120 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-120 .content { padding-top: 140px; } } .banner-area.top-pad-130 .content { padding-top: 130px; } @media (max-width: 1023px) { .banner-area.top-pad-130 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-130 .content { padding-top: 140px; } } .banner-area.top-pad-150 .content { padding-top: 150px; } @media (max-width: 1023px) { .banner-area.top-pad-150 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-150 .content { padding-top: 140px; } } .banner-area.auto-height { height: auto; } .banner-area.auto-height div { height: auto; } .banner-area.auto-height .content { padding: 200px 0px; } @media only screen and (max-width: 767px) { .banner-area.auto-height .content { padding: 60px 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.auto-height .content { padding: 120px 0px; } } .banner-area.auto-height .content .thumb { padding-left: 35px; } @media (max-width: 991px) { .banner-area.auto-height .content .thumb { padding-left: 0px; margin-top: 50px; } } .banner-area.auto-height.inc-header-transparent .content { padding-top: 250px; } @media only screen and (max-width: 767px) { .banner-area.auto-height.inc-header-transparent .content { padding-top: 140px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.auto-height.inc-header-transparent .content { padding-top: 220px; } } .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .info { padding-top: 80px; } .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 250px; } @media only screen and (max-width: 767px) { .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 50px; } } .banner-area .content { position: relative; z-index: 9; transition: all 500ms ease 0s; } @media (max-width: 1023px) { .banner-area .content { padding: 120px 0px; } } @media only screen and (max-width: 767px) { .banner-area .content { padding: 60px 0px; } } .banner-area h4 { transition: all 500ms ease 0s; transform: translate3d(-15%, 0px, 0px); opacity: 0; visibility: hidden; } .banner-area h2 { transition: all 500ms ease 0s; transform: translateY(-50%); opacity: 0; visibility: hidden; } .banner-area p, .banner-area ul { transition: all 500ms ease 0s; transform: translateY(50%); opacity: 0; padding-right: 25%; margin: 0px; visibility: hidden; } @media (max-width: 1023px) { .banner-area p { padding-right: 0px; } } .banner-area.text-center p { padding-left: 13%; padding-right: 13%; } @media (max-width: 1023px) { .banner-area.text-center p { padding: 0px; } } .banner-area .thumb { transition: all 500ms ease 0s; opacity: 0; visibility: hidden; } .banner-area .button { transition: all 500ms ease 0s; transform: translateY(50%); opacity: 0; visibility: hidden; margin-top: 30px; } .banner-area .banner-slide h4 { transform: translateY(50%); } .banner-area .banner-slide h2 { transform: translateY(50%); } .banner-area .banner-slide p, .banner-area .banner-slide ul { transform: translateY(50%); } .banner-area .banner-slide .button { transform: translateY(50%); } .banner-area .banner-slide .swiper-slide.swiper-slide-active h4 { transform: translateY(0px); transition-delay: 1200ms; } .banner-area .banner-slide .swiper-slide.swiper-slide-active h2 { transform: translateY(0px); transition-delay: 1400ms; } .banner-area .banner-slide .swiper-slide.swiper-slide-active p, .banner-area .banner-slide .swiper-slide.swiper-slide-active ul { transform: translateY(0px); transition-delay: 1600ms; } .banner-area .banner-slide .swiper-slide.swiper-slide-active .button { transform: translateY(0px); transition-delay: 1800ms; } .banner-area.double-items .thumb { transform: translateY(50%); } .banner-area.double-items .swiper-slide.swiper-slide-active .thumb { transform: translateY(0px); transition-delay: 500ms; visibility: visible; opacity: 1; } .banner-area.double-items.bottom-thumb .content { padding: 0px; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 120px; } @media only screen and (max-width: 767px) { .banner-area.double-items.bottom-thumb .content { padding: 50px 0px; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.double-items.bottom-thumb .content { padding: 120px 0px; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 50px; } } .banner-area.zoom-effect .banner-thumb { transition: all 10s ease-out 0s; transform: scale(1.1); position: absolute; left: 0px; top: 0px; content: ""; height: 100%; width: 100%; } .banner-area.zoom-effect .swiper-slide.swiper-slide-active .banner-thumb { transform: scale(1); } .banner-area .swiper-notification { display: none; } .banner-area .swiper-slide.swiper-slide-active h4 { transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: visible; transition-delay: 800ms; } .banner-area .swiper-slide.swiper-slide-active h2 { transform: translateY(0px); opacity: 1; visibility: visible; transition-delay: 1600ms; } .banner-area .swiper-slide.swiper-slide-active p, .banner-area .swiper-slide.swiper-slide-active ul { transform: translateY(0px); opacity: 1; visibility: visible; transition-delay: 2400ms; } .banner-area .swiper-slide.swiper-slide-active .button { transform: translateY(0px); opacity: 1; visibility: visible; transition-delay: 3200ms; } .banner-area.banner-style-two .swiper-slide.swiper-slide-active .button { transition-delay: 2400ms; } .banner-area .banner-items { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform, -webkit-transform; box-sizing: content-box; transform: translate3d(0px, 0px, 0px); } .banner-area:hover .swiper-button-prev, .banner-area:hover .swiper-button-next { opacity: 1; } .banner-area:hover .swiper-button-prev { left: 30px; right: auto; } .banner-area:hover .swiper-button-next { right: 30px; left: auto; } .banner-area .swiper-button-prev, .banner-area .swiper-button-next { height: auto; transition: all 0.35s ease-in-out 0s; opacity: 0; } .banner-area .swiper-button-prev::after, .banner-area .swiper-button-next::after { font-size: 28px; color: var(--color-heading); } .banner-area.navigation-circle .swiper-button-prev, .banner-area.navigation-circle .swiper-button-next { height: 60px; width: 60px; line-height: 60px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; border: 1px solid var(--color-primary); } .banner-area.navigation-circle .swiper-button-prev::after, .banner-area.navigation-circle .swiper-button-next::after { font-size: 16px; } .banner-area.navigation-right-bottom .swiper-button-prev, .banner-area.navigation-right-bottom .swiper-button-next { inset: auto 30px 50px auto; opacity: 1; transform: inherit; border-radius: inherit; } .banner-area.navigation-right-bottom .swiper-button-prev { right: 92px; } .banner-area.navigation-between-bottom .content { padding-bottom: 105px; } @media only screen and (min-width: 829px) and (max-width: 1023px) { .banner-area.navigation-between-bottom .content { padding-bottom: 220px; } } .banner-area.navigation-between-bottom .swiper-button-prev, .banner-area.navigation-between-bottom .swiper-button-next { inset: auto 30px 30px auto; opacity: 1; transform: inherit; border-radius: inherit; } .banner-area.navigation-between-bottom .swiper-button-prev { left: 30px; right: auto; } @media only screen and (max-width: 830px) { .banner-area .swiper-button-prev, .banner-area .swiper-button-next { display: none; } } .banner-area.navigation-custom .swiper-button-prev::after { font-family: ElegantIcons; content: "#"; font-size: 22px; } .banner-area.navigation-custom .swiper-button-next::after { font-family: ElegantIcons; content: "$"; font-size: 22px; } .banner-area.navigation-text .swiper-button-prev, .banner-area.navigation-text .swiper-button-next { opacity: 1; inset: auto 0px 0px auto; transform: inherit; display: inline-block; width: 150px; background: rgba(0, 0, 0, 0.2); text-align: center; height: 100px; line-height: 100px; } @media only screen and (max-width: 830px) { .banner-area.navigation-text .swiper-button-prev, .banner-area.navigation-text .swiper-button-next { display: none; } } .banner-area.navigation-text .swiper-button-prev { right: 151px; } .banner-area.navigation-text .swiper-button-prev::after { font-family: var(--font-heading); content: "Prev"; font-size: 16px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase !important; } .banner-area.navigation-text .swiper-button-next::after { font-family: var(--font-heading); content: "Next"; font-size: 16px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase !important; } .banner-area.navigation-icon-solid .swiper-button-prev::after, .banner-area.navigation-icon-solid .swiper-button-next::after { font-size: 30px; } .banner-area.navigation-custom-large .swiper-button-prev, .banner-area.navigation-custom-large .swiper-button-next { min-width: 65px; height: 30px; margin: 0px; } .banner-area.navigation-custom-large .swiper-button-prev::after { font-family: "Font Awesome 5 Pro"; content: "ï„„"; font-weight: 100; font-size: 30px; position: absolute; left: 8px; color: var(--white); } .banner-area.navigation-custom-large .swiper-button-prev::before { position: absolute; top: 50%; right: inherit; bottom: inherit; left: 12px; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--white); margin-top: -1px; } .banner-area.navigation-custom-large .swiper-button-next::after { font-family: "Font Awesome 5 Pro"; content: "ï„…"; font-weight: 100; font-size: 30px; position: absolute; right: 8px; color: var(--white); } .banner-area.navigation-custom-large .swiper-button-next::before { position: absolute; top: 50%; right: 12px; bottom: inherit; left: inherit; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--white); margin-top: -1px; } .banner-area.navigation-right-botom .swiper-button-prev, .banner-area.navigation-right-botom .swiper-button-next { position: absolute; inset: auto 30px 40px auto; opacity: 1; transform: inherit; } .banner-area.navigation-right-botom .swiper-button-prev { right: 60px; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev, .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-next { bottom: 30px; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev { right: 100px; } .banner-area .swiper-pagination { height: auto; bottom: 35px; } .banner-area .swiper-pagination span.swiper-pagination-bullet { height: 4px; width: 50px; background: rgba(255, 255, 255, 0.5); opacity: 1; border-radius: inherit; transition: all 0.35s ease-in-out 0s; } .banner-area .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: white; height: 7px; } @media only screen and (max-width: 767px) { .banner-area.include-pagination .content { padding-bottom: 100px; } } .banner-area .swiper-pagination-fraction span { transition: all 0.35s ease-in-out 0s; } .banner-area .swiper-pagination-fraction span.swiper-pagination-current { font-size: 30px; font-family: var(--font-heading); font-weight: 800; } .banner-style-one { padding-top: 250px; padding-bottom: 200px; background-size: 40%; background-repeat: no-repeat; background-position: right top; position: relative; z-index: 1; overflow: hidden; } .banner-style-one::after { position: absolute; left: 0px; bottom: 20%; content: ""; height: 400px; width: 400px; background: var(--bg-gradient); z-index: -1; border-radius: 50%; filter: blur(100px); opacity: 0.08; } .bg-dark .banner-style-one::after { opacity: 0.4; } .banner-one-item h4 { font-weight: 800; display: inline-block; position: relative; padding: 10px 20px; color: var(--color-primary); border: 1px solid; border-radius: 30px; } .bg-dark .banner-one-item h4 { border: 1px solid rgba(255, 255, 255, 0.2); } .banner-one-item h2 { margin: 0px; font-size: 90px; font-weight: 800; text-transform: uppercase; line-height: 1.1; } .bg-dark .banner-one-item h2 { color: var(--white); } @media (min-width: 1200px) { .banner-one-item h2 { font-size: 120px; } } .banner-one-item h2 strong { -webkit-text-stroke: 1px var(--color-heading); color: transparent; float: right; } .bg-dark .banner-one-item h2 strong { -webkit-text-stroke: 1px var(--white); color: transparent; opacity: 0.8; } .curve-text svg { fill: var(--white); height: 170px; width: 170px; overflow: inherit; animation: 20s linear 0s infinite normal none running spinner; text-shadow: rgb(0, 0, 0) 1px 1px; } .curve-text svg { background: var(--bg-gradient); border-radius: 50%; padding: 35px; position: relative; z-index: 1; font-size: 25px; height: 180px; width: 180px; text-transform: uppercase; font-weight: 800; } .curve-text svg a { display: inline-block; position: absolute; left: 50%; top: 50%; } .curve-text { display: inline-block; position: relative; } .curve-text a { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); z-index: 9; height: 45px; width: 45px; line-height: 45px; text-align: center; font-size: 40px; -webkit-text-stroke: 1px var(--white); color: transparent; } .curve-text svg path { fill: none; } .curve-text svg text { fill: var(--white); letter-spacing: 4px; } .banner-style-three { background-size: cover; padding-top: 200px; padding-bottom: 200px; position: relative; overflow: hidden; } .banner-style-three .row div { height: auto; } .banner-style-three h2 { margin: 0px; font-size: 65px; font-weight: 900; } .bg-dark .banner-style-three h2 { color: var(--white); } .banner-style-three .content { position: relative; z-index: 1; display: inline-block; margin-top: 60px; } .banner-style-three .content::after { position: absolute; left: -15%; top: 50%; content: ""; height: 500px; width: 500px; background: linear-gradient(90deg, rgb(237, 245, 255) 0%, rgb(204, 223, 247) 100%); z-index: -1; transform: translateY(-50%); border-radius: 50%; } .bg-dark .banner-style-three .content::after { background: var(--bg-gradient); opacity: 0.6; } .banner-style-three .fun-fact .counter { -webkit-text-stroke: 1px var(--color-heading); color: transparent; font-size: 100px; font-weight: 800; } .bg-dark .banner-style-three .fun-fact .counter { -webkit-text-stroke: 1px var(--white); } .banner-style-three .fun-fact .counter .operator { font-weight: 800; } .banner-style-three .fun-fact .medium { font-weight: 700; font-size: 20px; } .banner-style-three .thumb { position: relative; z-index: 1; padding-top: 30px; } .banner-style-three .thumb img { max-width: 60%; } .banner-style-three .thumb img:nth-child(2) { position: absolute; left: -100px; height: 150px; top: -50px; } .banner-animation-zoom { position: relative; z-index: 1; overflow: hidden; height: 600px; width: 100%; } .banner-animation-zoom .animation-zoom-banner { width: 100%; background-size: cover; background-position: center center; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); height: 100%; } @media (min-width: 1800px) { .banner-animation-zoom { height: 650px; } } .experience-box { position: absolute; z-index: 1; right: 0px; bottom: 0px; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 100px; text-align: left; max-width: 40%; } .experience-box .inner-content { position: relative; z-index: 1; } .banner-animation-zoom .container { position: relative; height: 100%; } .experience-box strong { display: block; font-size: 100px; line-height: 1; margin-bottom: 10px; margin-top: -15px; -webkit-text-stroke: 1px var(--white); color: transparent; } .experience-box h2 { color: var(--white); font-size: 18px; text-transform: uppercase; font-weight: 800; margin-bottom: 25px; } .experience-box::after { position: absolute; left: 0px; top: 0px; height: 100%; width: 500%; background: var(--color-primary); content: ""; z-index: -1; } .experience-box::before { position: absolute; left: 0px; top: 0px; height: 100%; width: 500%; background: url("../img/shape/graph.png") no-repeat; content: ""; } .experience-box .btn-animation { color: var(--white); } .experience-box p { color: var(--white); opacity: 0.9; } .services-item-one-items .services-carousel { position: relative; padding: 30px; top: -30px; margin: -30px -30px -60px; } .cteative-service-item { padding: 67px 60px; background: var(--white); border-radius: 10px; position: relative; z-index: 1; overflow: hidden; box-shadow: rgba(214, 215, 216, 0.57) 0px 5px 30px 0px; } .bg-dark .cteative-service-item { background: rgb(38, 37, 37); box-shadow: none; } .cteative-service-item i { display: inline-block; font-size: 50px; font-weight: 100; margin-bottom: 30px; } .bg-dark .cteative-service-item a { color: var(--white); } .bg-dark .cteative-service-item a:hover { color: var(--color-primary); } @media only screen and (min-width: 1400px) { .container-stage { margin-left: calc(50% - 660px); width: auto; min-width: auto; max-width: inherit; padding-right: 0px; } } .cteative-service-item h4 { font-size: 24px; margin-bottom: 20px; } .cteative-service-item img { height: 80px; margin-bottom: 50px; width: auto !important; } .cteative-service-item p { margin: 0px; } .cteative-service-item span { position: absolute; bottom: -19px; font-size: 120px; z-index: -1; font-weight: 900; line-height: 1; color: rgb(204, 204, 204); opacity: 0.2; } .bg-dark .cteative-service-item span { color: var(--white); opacity: 0.04; } .services-carousel.owl-carousel .owl-dots { position: absolute; top: -90px; right: 100px; } .services-carousel.owl-carousel .owl-dots .owl-dot span { background: transparent; border-width: 2px; border-style: solid; border-image: initial; height: 25px; width: 25px; border-color: var(--color-primary); position: relative; opacity: 0.6; } .services-carousel.owl-carousel .owl-dots .owl-dot span::after { position: absolute; left: 50%; top: 50%; content: ""; height: 8px; width: 8px; background: var(--bg-gradient); transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.6; } .services-carousel.owl-carousel .owl-dots .owl-dot.active span { opacity: 1; } .services-carousel.owl-carousel .owl-dots .owl-dot.active span::after { opacity: 1; } img.bg-move { position: absolute; max-width: 200px; transform: rotate(45deg); left: 0px; bottom: 80px; z-index: 9; } .services-button-prev, .services-button-next { height: 60px; width: 70px; line-height: 60px; position: relative; z-index: 1; } .services-nav .nav-items { display: flex; align-items: center; justify-content: center; border: 1px solid rgb(221, 221, 221); overflow: hidden; border-radius: 30px; } .bg-dark .services-nav .nav-items { border: 1px solid rgba(255, 255, 255, 0.3); } .services-button-prev { border-right: 1px solid rgb(221, 221, 221); } .bg-dark .services-button-prev { border-right: 1px solid rgba(255, 255, 255, 0.3); } .services-button-next::after { position: absolute; left: 50%; top: 50%; content: "\f105"; font-family: "Font Awesome 5 Pro"; transform: translate(-50%, -50%); margin-top: 1px; } .services-button-prev::after { position: absolute; left: 50%; top: 50%; content: "\f104 "; font-family: "Font Awesome 5 Pro"; transform: translate(-50%, -50%); margin-top: 1px; } .services-nav { display: flex; position: relative; right: 0px; top: -130px; justify-content: right; padding: 0px 30px; max-width: 100%; margin-bottom: -60px; } @media (min-width: 576px) { .services-nav { max-width: 540px; } } @media (min-width: 768px) { .services-nav { max-width: 720px; } } @media (min-width: 992px) { .services-nav { max-width: 960px; } } @media (min-width: 1400px) { .services-nav { max-width: 1320px; } } .service-hover-item { width: 100%; display: block; position: relative; z-index: 1; counter-increment: count 1; } .service-hover-wrapper { position: absolute; width: 337px; top: 50px; left: 185px; pointer-events: none; overflow: hidden; opacity: 0; transform: scale(0.8); transition: all 0.5s ease-out 0s; background-color: var(--ogency-black2); z-index: -1; } .service-hover-wrapper img { height: 100%; } .service-hover-items ul { list-style: none; margin: 0px; padding: 0px; } .service-hover-items > ul > li { border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 50px 0px; } .service-hover-items > ul > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .service-hover-content { display: grid; grid-template-columns: 0.5fr 1.6fr 2.5fr 1.2fr; column-gap: 70px; } .service-hover-content .arrow { text-align: right; display: flex; align-items: center; justify-content: flex-end; } .service-hover-items .icon i { display: inline-block; font-weight: 100; font-size: 55px; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; } .service-hover-content h2 { font-weight: 700; margin-top: -8px; font-size: 30px; } .service-hover-content ul { margin: 25px 0px 0px; padding: 0px; list-style: none; } .service-hover-content ul li { font-weight: 700; position: relative; z-index: 1; padding-left: 27px; color: rgb(204, 204, 204); margin-top: 5px; } .service-hover-content ul li::after { position: absolute; left: 0px; top: 0px; content: ""; font-family: "Font Awesome 5 Pro"; text-align: center; font-size: 15px; font-weight: 100; } .service-hover-content p { margin-bottom: 0px; } .service-hover-content .item-title { display: flex; flex-direction: column; justify-content: space-between; } .service-hover-content .item-title span { font-size: 60px; line-height: 1; -webkit-text-stroke: 1px var(--white); color: transparent; opacity: 0.3; } .service-hover-content .arrow .btn-animation { left: 50px; } .service-hover-content .btn-animation::after { background: rgba(255, 255, 255, 0.1); border: none; } .services-details-area .thumb img { margin-bottom: 40px; } .services-details-area h1, .services-details-area h2, .services-details-area h3, .services-details-area h4, .services-details-area h5, .services-details-area h6 { font-weight: 800; } .feature-list-item { margin: 0px; padding: 0px; list-style: none; } .feature-list-item li { position: relative; z-index: 1; padding-left: 32px; margin-top: 10px; font-weight: 600; } .feature-list-item li::after { position: absolute; left: 0px; top: 4px; content: ""; font-family: "Font Awesome 5 Pro"; color: var(--color-heading); font-weight: 500; font-size: 12px; height: 20px; width: 20px; text-align: center; line-height: 20px; border: 1px solid rgb(204, 204, 204); border-radius: 4px; } .quick-contact-widget { background-size: cover; position: relative; z-index: 1; padding: 60px 37px; background-position: center center; overflow: hidden; } .quick-contact-widget .content { position: relative; z-index: 1; } .quick-contact-widget h2 { font-weight: 800; margin-bottom: 10px; margin-top: 25px; } .quick-contact-widget h4 a { font-weight: 400; border-bottom: 2px solid; } .quick-contact-widget i { display: inline-block; height: 60px; width: 60px; line-height: 60px; font-weight: 100; background: rgb(255, 255, 255); color: var(--color-primary); font-size: 22px; border-radius: 50%; margin-bottom: 40px; position: relative; } .quick-contact-widget i::after { position: absolute; left: -10px; top: -10px; content: ""; height: 80px; width: 80px; background: rgb(255, 255, 255); z-index: -1; border-radius: 50%; opacity: 0.8; } .quick-contact-widget .btn-sm { font-size: 16px; } .services-sidebar .single-widget { margin-top: 50px; } .services-sidebar .single-widget .widget-title { font-weight: 800; margin-bottom: 30px; margin-top: -5px; position: relative; z-index: 1; display: inline-block; padding-bottom: 15px; } .services-sidebar .single-widget .widget-title::after { position: absolute; left: 10px; bottom: 0px; content: ""; height: 3px; width: 50px; border-bottom: 3px solid var(--color-primary); } .services-sidebar .single-widget .widget-title::before { position: absolute; left: 0px; bottom: 0px; content: ""; height: 3px; width: 5px; background: var(--dark); } .services-sidebar .single-widget h4.widget-title { font-size: 24px; } .services-sidebar .single-widget:first-child { margin-top: 0px; } .widget-brochure ul { padding-left: 0px; list-style: none; } .widget-brochure ul li a { display: flex; -webkit-box-align: center; align-items: center; margin-top: 15px; background: rgb(255, 255, 255); padding: 20px 25px; border-radius: 5px; border: 2px solid rgb(205, 223, 247); color: var(--color-heading); } .widget-brochure ul li a:hover { color: var(--color-primary); } .widget-brochure ul li:first-child a { margin-top: 0px; } .widget-brochure ul li:first-child a, .widget-brochure ul li a:hover { background: var(--dark); border-color: transparent; color: var(--white); } .widget-brochure ul li i { font-size: 35px; font-weight: 100; margin-right: 16px; display: inline-block; text-align: center; border-radius: 50%; transition: all 0.35s ease-in-out 0s; } .widget-brochure ul li:hover i, .widget-brochure ul li:first-child i { color: var(--white); } @media only screen and (max-width: 767px) { .services-more .row { margin-top: -20px; } } .services-more .item { padding: 50px 35px; overflow: hidden; margin-top: 15px; position: relative; border-radius: 10px; background: #1d1d1d; box-shadow: rgba(90, 144, 225, 0.1) 0px 30px 80px; } .services-more .item img { height: 80px; margin-bottom: 30px; } .services-more .item i::before { line-height: inherit; } @media only screen and (max-width: 767px) { .services-more .item { margin-top: 30px; text-align: center; } } .services-more .item i { display: inline-block; font-size: 40px; margin-bottom: 30px; background: var(--color-primary); color: var(--white); height: 70px; width: 70px; text-align: center; line-height: 70px; border-radius: 50%; } .services-more .item a { color: var(--color-heading); } .services-more .item a:hover { color: var(--color-primary); } .services-more .item p { margin: 0px; } .service-single-thumb { position: relative; z-index: 1; } .service-single-thumb img { margin-bottom: 40px; } .services-list-widget { padding: 60px 50px 50px; background-size: cover; background-position: center center; border: 2px solid; } .services-list-widget a { display: block; padding: 10px 50px 10px 0px; font-weight: 700; position: relative; font-size: 17px; } .services-list-widget .current-item a { color: var(--color-primary); font-weight: 800; } .services-list-widget li { border-top: 1px solid rgba(0, 0, 0, 0.1); } .services-list-widget li:first-child { border: none; margin-top: -10px; } .services-list-widget a i { float: right; font-weight: 400; position: absolute; right: 0px; top: 50%; transform: translateY(-50%) rotate(-45deg); margin-top: 1px; } .services-sidebar .single-widget.text-light .widget-title::after { border-color: var(--white); } .about-style-one-thumb { position: relative; padding-bottom: 50px; } .about-style-one-thumb .fun-fact { background: url("../img/shape/9.png") center center / contain no-repeat; position: absolute; right: 50px; bottom: -50px; padding: 80px 80px 100px; } .about-style-one-thumb .fun-fact .counter { position: relative; display: flex; align-items: center; justify-content: center; font-size: 60px; font-weight: 900; color: var(--white); line-height: 1; margin-bottom: 5px; font-family: var(--font-heading); } .about-style-one-thumb .fun-fact .medium { font-weight: 600; } .bg-dark .about-style-one .title { color: var(--white); } a.arrow-btn { display: inline-block; transform: rotate(-45deg); font-size: 100px; -webkit-text-stroke: 1px var(--color-primary); color: transparent; margin-top: 25px; line-height: 1; } .bg-dark a.arrow-btn { -webkit-text-stroke: 1px var(--white); color: transparent; } .blur-bg-theme { position: absolute; right: 0px; top: 0px; height: 300px; width: 300px; background: rgb(233, 10, 10); z-index: -1; border-radius: 50%; filter: blur(180px); opacity: 0.07; } .bg-dark .blur-bg-theme { opacity: 0.4; background: var(--bg-gradient); filter: blur(100px); } ul.list-simple { margin-top: 20px; padding: 0px; list-style: none; } ul.list-simple li { font-weight: 700; font-size: 18px; margin-top: 7px; padding-left: 32px; position: relative; z-index: 1; } ul.list-simple li::after { position: absolute; left: 0px; top: 7px; content: ""; font-family: "Font Awesome 5 Pro"; font-weight: 100; border: 1px solid rgb(221, 221, 221); height: 20px; width: 20px; line-height: 19px; text-align: center; border-radius: 5px; font-size: 12px; color: var(--color-heading); } .bg-dark ul.list-simple li::after { border: 1px solid rgba(255, 255, 255, 0.4); color: rgb(204, 204, 204); } .bg-dark .about-style-two-area { background: var(--dark-secondary); } .about-style-two-thumb { margin-top: 72px; position: absolute; left: 0px; top: 0px; height: 91%; width: 50%; background-size: cover; background-position: center center; } .experience-style-one { display: flex; align-items: center; position: absolute; background: var(--bg-gradient); padding: 35px; right: -50px; bottom: -12%; } .experience-style-one h3 { margin: 0px; font-weight: 700; font-size: 24px; color: var(--white); } .experience-style-one .video-button { margin-right: 40px; } .experience-style-one .video-button .video-play-button { position: relative; z-index: 1; display: block; } .experience-style-one .video-button .effect { background: var(--white); height: 60px; width: 60px; margin-top: 2px; margin-left: 2px; } .experience-style-one .video-button .effect::before, .experience-style-one .video-button .effect::after { background: var(--white); height: 100px; width: 100px; } .experience-style-one .video-button .video-play-button i { background: var(--white); color: var(--color-heading); } .about-style-two-info h2 strong { position: relative; z-index: 1; display: inline-block; } .about-style-two-info h2 strong::after { position: absolute; left: 0px; bottom: 0px; content: ""; height: 100%; width: 100%; background: url("../img/shape/8.png") center center / contain no-repeat; z-index: -1; } .about-style-two-info { position: relative; z-index: 1; padding: 120px 0px; } .bg-dark .about-style-two-info { padding: 0px; } .bg-dark .about-style-two-info::after { position: absolute; right: 0px; top: -120px; content: ""; height: 450px; width: 450px; background: var(--bg-gradient); z-index: -1; border-radius: 50%; filter: blur(100px); opacity: 0.2; } .faq-style-one { position: relative; } .faq-style-one button.accordion-button { color: var(--color-heading); font-size: 20px; position: relative; box-shadow: inherit; border: none; text-transform: inherit; font-weight: 800 !important; padding: 0px 0px 0px 35px !important; background: transparent !important; border-radius: inherit !important; } .bg-dark .faq-style-one button.accordion-button { font-weight: 700 !important; } .faq-style-one button.accordion-button::after { background: transparent; content: "\f105"; font-family: "Font Awesome 5 Pro"; font-weight: 100; font-size: 26px; position: absolute; top: -3px; left: 0px; opacity: 1; height: 100%; transform: inherit; } .faq-style-one button.accordion-button:not(.collapsed)::after { transform: inherit; content: ""; } .faq-style-one button.accordion-button:focus { background: transparent; color: var(--color-heading); border: none; box-shadow: inherit; padding-left: 0px; font-weight: 800; } .faq-style-one .accordion-item { background: transparent; border: none; margin-bottom: 35px; } .faq-style-one .accordion-body { padding-left: 35px; padding-top: 25px; padding-bottom: 0px; } .faq-style-one-content { margin-top: -15px; } .faq-style-one .accordion-body p:last-child { margin: 0px; } .bg-dark .faq-style-one button.accordion-button { color: var(--white); } .faq-style-one .accordion-item:last-child { margin-bottom: 0px; } .faq-style-two.faq-style-one button.accordion-button { padding-left: 0px !important; padding-right: 35px !important; } .faq-style-two.faq-style-one .accordion-body { padding-left: 0px; padding-right: 35px; margin-bottom: 15px; } .faq-style-two.faq-style-one button.accordion-button::after { left: auto; right: 0px; } .faq-style-two.faq-style-one .accordion-item { border-bottom: 1px solid rgb(204, 204, 204); padding-bottom: 20px; } .faq-style-two.faq-style-one .accordion-item { margin-bottom: 20px; } .item-center .portfolio-style-one { padding-right: 30px; } .item-center:nth-child(2n) .portfolio-style-one { padding-right: 0px; padding-left: 30px; } .portfolio-style-one { margin-top: 50px; } .pf-item-info { display: flex; justify-content: space-between; padding-left: 50px; margin-top: 30px; padding-right: 30px; } a.pf-btn { display: inline-block; height: 100px; width: 100px; text-align: center; line-height: 100px; background: var(--bg-gradient); border: 1px solid rgba(255, 255, 255, 0.3); font-size: 40px; } .bg-dark a.pf-btn { background: var(--dark-secondary); } a.pf-btn i { -webkit-text-stroke: 1px var(--white); color: transparent; font-weight: 900; transform: rotate(-45deg); } .pf-item-info .button { position: relative; top: -80px; } .pf-item-info .content-info { margin-right: 30px; } .pf-item-info .content-info span { text-transform: uppercase; font-weight: 500; display: inline-block; margin-bottom: 15px; border: 1px solid; padding: 3px 15px; border-radius: 40px; } .bg-dark .pf-item-info .content-info span { background: var(--bg-gradient); color: var(--white); border-radius: inherit; border: none; } .bg-dark .pf-item-info .content-info h2 a { color: var(--white); } .thumb-zoom { overflow: hidden; } .thumb-zoom img { transition: all 0.35s ease-in-out 0s; } .thumb-zoom:hover img { transform: scale(1.2); } @media (min-width: 1200px) { .project-style-one-area .container-fill { padding-left: 0px; padding-right: 0px; } } .project-style-one { overflow: hidden; position: relative; z-index: 1; padding-bottom: 10px; } .project-style-one .overlay { position: absolute; left: 50px; bottom: -50px; display: flex; align-items: center; background: var(--white); transition: all 0.35s ease-in-out 0s; visibility: hidden; opacity: 0; } .bg-dark .project-style-one .overlay { background: var(--dark); } .project-style-one .overlay::after { position: absolute; left: 0px; bottom: 0px; content: ""; height: 10px; width: 100%; background: var(--bg-gradient); } .project-style-one .overlay .link a { display: inline-block; height: 100px; width: 100px; text-align: center; line-height: 100px; border-right: 1px solid rgb(221, 221, 221); -webkit-text-stroke: 1px var(--color-heading); color: transparent; font-size: 40px; } .bg-dark .project-style-one .overlay .link a { border-right: 1px solid rgba(255, 255, 255, 0.5); -webkit-text-stroke: 1px var(--white); color: transparent; } .project-style-one .overlay .content { padding: 15px 50px 22px 40px; } .project-style-one .overlay .content h4 { margin: 0px; } .bg-dark .project-style-one .overlay .content h4 a { color: var(--white); } .project-style-one .overlay .content span { display: block; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; opacity: 0.9; margin-top: -5px; } .project-style-one .overlay .link a i { transform: rotate(-45deg); } .swiper-slide.swiper-slide-active .project-style-one .overlay { bottom: 0px; opacity: 1; visibility: visible; } .project-button-prev, .project-button-next { height: 60px; width: 80px; line-height: 60px; position: relative; z-index: 1; } .project-nav .nav-items { display: flex; align-items: center; justify-content: center; border: 1px solid; overflow: hidden; border-radius: 30px; } .bg-dark .project-nav .nav-items { border: 1px solid rgba(255, 255, 255, 0.3); } .project-button-prev { border-right: 1px solid; } .bg-dark .project-button-prev { border-right: 1px solid rgba(255, 255, 255, 0.3); } .project-button-next::after { position: absolute; left: 50%; top: 50%; content: "\f105"; font-family: "Font Awesome 5 Pro"; transform: translate(-50%, -50%); margin-top: 1px; } .project-button-prev::after { position: absolute; left: 50%; top: 50%; content: "\f104 "; font-family: "Font Awesome 5 Pro"; transform: translate(-50%, -50%); margin-top: 1px; } .project-nav { display: flex; justify-content: right; max-width: 100%; margin: auto; padding: 0px 15px; } .project-nav .nav-items { position: relative; right: 0px; top: -145px; margin-bottom: -60px; } @media (min-width: 576px) { .project-nav { max-width: 540px; } } @media (min-width: 768px) { .project-nav { max-width: 720px; } } @media (min-width: 992px) { .project-nav { max-width: 960px; } } @media (min-width: 1400px) { .project-nav { max-width: 1320px; } } .shape-left-top { position: absolute; left: 0px; top: -25%; width: 30%; z-index: -1; } .pricing-style-one-area { position: relative; z-index: 1; } .pricing-style-one { display: flex; padding: 40px; margin-top: 30px; background: rgb(255, 255, 255); border-radius: 30px; } .bg-dark .pricing-style-one { background: rgba(255, 255, 255, 0.06); } .pricing-style-one:first-child { margin-top: 0px; } .pricing-style-one.active { background: var(--bg-gradient); } .pricing-style-one .left { width: 50%; border-right: 1px solid rgba(255, 255, 255, 0.3); margin-right: 30px; padding-right: 30px; } .pricing-style-one h4 { font-weight: 900; } .pricing-style-one.active h4 { color: var(--white); } .pricing-style-one ul li { font-weight: 600; position: relative; z-index: 1; list-style: circle; } .pricing-style-one.active ul li { color: var(--white); } .pricing-style-one ul { list-style: circle; margin-left: 20px; } .pricing-style-one h2 { margin: 20px 0px 0px; font-weight: 700; font-size: 50px; } .pricing-style-one.active h2 { color: var(--white); } .pricing-style-one span { display: block; } .bg-dark .pricing-style-one span { color: rgb(204, 204, 204); } .pricing-style-one.active span { color: var(--white); opacity: 0.9; } .pricing-items p { margin-top: 25px; } .pricing-items h5 { margin: 25px 0px 0px; font-weight: 600; font-size: 24px; } .bg-dark .pricing-items h5 { color: var(--white); } .pricing-items h5 strong { font-size: 36px; text-decoration: underline; margin: 0px 3px; color: var(--color-secondary); } .pricing-style-one:first-child .btn { color: var(--color-heading); border-color: rgb(231, 231, 231); } .pricing-style-one:first-child .btn:hover { color: var(--white); border-color: var(--color-primary); } .bg-dark .pricing-style-one:first-child .btn { color: var(--white); border-color: var(--white); } .bg-dark .pricing-style-one:first-child .btn:hover { color: var(--white); border-color: var(--color-primary); } .fun-fact .counter { display: flex; align-items: center; font-size: 60px; line-height: 1.2; position: relative; margin-top: 20px; } .fun-fact .counter .operator { font-weight: 800; } .fun-fact-circle-lists { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin-top: 195px; margin-bottom: 170px; } .fun-fact-circle-lists .fun-fact { position: relative; padding: 15px; text-align: center; z-index: 1; } .fun-fact-circle-lists .fun-fact .operator { font-weight: 800; } .bg-dark .fun-fact-circle-lists .fun-fact .operator { font-weight: normal; } .fun-fact-circle-lists .fun-fact .counter { justify-content: center; color: var(--color-heading); font-weight: 800; } .bg-dark .fun-fact-circle-lists .fun-fact .counter { color: var(--white); font-weight: normal; } .fun-fact-circle-lists .fun-fact::after { height: 300px; width: 300px; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgb(201, 196, 196); content: ""; position: absolute; border-radius: 50%; z-index: -1; } .bg-dark .fun-fact-circle-lists .fun-fact::after { border: 1px solid rgb(111, 108, 108); } .fun-fact-circle-lists .fun-fact:nth-child(2)::after { height: 380px; width: 380px; background: var(--white); } .bg-dark .fun-fact-circle-lists .fun-fact:nth-child(2)::after { background: var(--dark); } .fun-fact-circle-lists .fun-fact:last-child::after { height: 420px; width: 420px; background: var(--white); } .bg-dark .fun-fact-circle-lists .fun-fact:last-child::after { background: var(--dark); } .fun-fact-circle-lists .fun-fact:last-child .counter { margin: 0px; } .fun-fact-circle-lists .fun-fact span.medium { font-weight: 600; } .bg-dark .fun-fact-circle-lists .fun-fact span.medium { color: var(--white); opacity: 0.9; } .fun-fact-circle-lists .fun-fact:nth-child(2) { position: relative; top: 40px; left: -5px; z-index: 9; } .fun-fact-circle-lists .fun-fact:nth-child(3) { top: -120px; left: -35px; } .fun-fact-circle-lists .fun-fact:nth-child(3)::after { height: 330px; width: 330px; } .fun-fact-circle-lists .fun-fact:last-child { top: 50px; right: 60px; } .fun-fact-circle-lists .fun-fact:last-child .counter .timer { font-size: 100px; font-weight: 900; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; /* -webkit-text-fill-color: transparent; */ position: relative; margin-top: 0px; } .brand-items { position: relative; display: flex; align-items: center; padding-top: 30px; padding-bottom: 50px; } .brand-conetnt { display: flex; align-items: center; justify-content: center; animation: 50s linear 0s infinite normal none running slide-left; } .brand-conetnt h2 { font-size: 100px; margin: 0px 50px; font-weight: 900; line-height: 1.4; text-decoration: underline; } .bg-dark .brand-conetnt h2 { color: var(--white); } .brand-conetnt .item:nth-child(2n) h2 { -webkit-text-stroke: 1px var(--white); color: transparent; border: none; text-decoration: none; } .brand-style-two-area .brand-conetnt .item:nth-child(2n) h2 { -webkit-text-stroke: 1px var(--color-heading); color: transparent; border: none; text-decoration: none; } .bg-dark .brand-style-two-area .brand-conetnt .item:nth-child(2n) h2 { -webkit-text-stroke: 1px var(--white); color: transparent; } .brand-conetnt .item { position: relative; } .brand-conetnt .item::after { position: absolute; right: -15px; top: 50%; content: ""; height: 40px; width: 40px; background: url("../img/shape/4.png") right center / contain no-repeat; transform: translateY(-50%); margin-top: 10px; } .brand-style-two-area .brand-conetnt .item::after { background: url("../img/shape/4-dark.png") right center / contain no-repeat; } .bg-dark .brand-conetnt .item::after { position: absolute; right: -15px; top: 50%; content: ""; height: 40px; width: 40px; background: url("../img/shape/4.png") right center / contain no-repeat; transform: translateY(-50%); margin-top: 10px; } @-webkit-keyframes slide-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @keyframes slide-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } .bg-dark .brand-style-two-area { background: var(--dark-secondary); } .brand-style-two-area .brand-items { padding: 0px; } .brand-style-two-area .brand-items .brand-conetnt h2 { line-height: 1; } .clietns-area { overflow: hidden; } .client-items { border-top: 1px solid rgba(255, 255, 255, 0.2); /* padding-top: 120px; */ } .client-items h4, .client-items h5 { font-weight: 600; margin-bottom: 30px; color: rgb(204, 204, 204); } .partner-box:first-child { margin-top: -35px; } .client-items .partner-box { display: flex; align-items: center; justify-content: center; } .client-item-box { position: relative; z-index: 1; } .client-item-box::after { z-index: -1; position: absolute; left: 50%; top: 50%; content: ""; height: 160%; width: 160%; /* background: url("../img/shape/globe.png") center center / contain no-repeat; */ transform: translate(-50%, -50%); } .client-items .partner-box .item { height: 145px; width: 179px; margin: 53px 16px 23px; background: rgba(255, 255, 255, 0.06); text-align: center; line-height: 100px; border-radius: 8px; align-items: center; display: flex; justify-content: center; } .client-items .partner-box .item img { height: 100%; width: auto; } .client-items .partner-box .item i { display: inline-block; font-size: 50px; line-height: 100px; } .client-items .partner-box .item i.fab.fa-angular { color: rgb(221, 27, 22); } .client-items .partner-box .item i.fab.fa-blackberry { color: rgb(77, 0, 38); } .client-items .partner-box .item i.fab.fa-amazon-pay { color: rgb(51, 62, 71); } .client-items .partner-box .item i.fab.fa-codepen { color: rgb(59, 89, 152); } .client-items .partner-box .item i.fab.fa-digital-ocean { color: rgb(0, 128, 255); } .client-items .partner-box .item i.fab.fa-dropbox { color: rgb(61, 154, 232); } .client-items .partner-box .item i.fab.fa-reddit { color: rgb(255, 69, 0); } .team-style-one-area { background-position: center top !important; } .team-style-one { overflow: hidden; border: 1px solid rgb(221, 221, 221); border-radius: 30px; } .bg-dark .team-style-one { border: 1px solid rgba(255, 255, 255, 0.2); } .team-style-one img { border-radius: 50%; max-width: 80%; margin: auto; } .team-style-one .thumb { padding: 10px; text-align: center; position: relative; z-index: 1; } .team-style-one .content { position: relative; padding: 30px; z-index: 1; border-top: 1px solid rgb(221, 221, 221); overflow: hidden; border-radius: 30px 30px 0px 0px; /* display: flex; */ align-items: center; justify-content: space-between; } .bg-dark .team-style-one .content { border-top: 1px solid rgba(255, 255, 255, 0.2); } .team-style-one .content i { display: inline-block; font-size: 38px; font-weight: 100; color: var(--color-primary); } .bg-dark .team-style-one .content i { color: var(--white); } .team-style-one h4 { margin-bottom: 5px; } .bg-dark .team-style-one h4 a { color: var(--white); } .team-style-one span { text-transform: uppercase; font-size: 13px; letter-spacing: 0.6px; } .bg-dark .team-style-one span { color: rgb(204, 204, 204); } .team-style-one .thumb .social { margin: 0px; padding: 0px; list-style: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; } .team-style-one .thumb .social li { display: inline-block; margin: 0px 1px; } .team-style-one .thumb .social li a { display: inline-block; height: 40px; width: 40px; background: var(--color-primary); line-height: 45px; border-radius: 50%; color: var(--white); position: relative; bottom: -30px; opacity: 0; visibility: hidden; } .team-style-one .thumb .social li:last-child a { transition: all 0.55s ease-in-out 0s; } .team-style-one:hover .thumb .social li a { bottom: 0px; opacity: 1; visibility: visible; } .team-style-one .social li.facebook a { background: rgb(59, 89, 152); } .team-style-one .social li.twitter a { background: rgb(29, 161, 242); } .team-style-one:hover .thumb img { /* filter: blur(2px); */ } .team-right-info h2 { font-weight: 800; } .team-right-info .fun-fact .medium { display: block; color: var(--color-heading); font-weight: 500; margin-bottom: 25px; } .team-right-info ul { margin-top: 25px; border-top: 2px solid rgb(221, 221, 221); padding-top: 17px; } ul.user-location li { display: grid; grid-template-columns: 2fr 4fr; margin-top: 15px; } ul.user-location li p { margin: 0px; } .team-right-info ul li a { font-weight: 600; } .team-right-info ul li strong { font-weight: 800; color: var(--color-heading); } .team-right-info ul li a { font-weight: 600; opacity: 0.9; } .team-right-info ul li a:hover { color: var(--color-primary); } .team-right-info > span { text-transform: uppercase; color: var(--color-primary); font-weight: 800; display: block; margin-bottom: 20px; } .team-right-info .social { display: flex; margin-top: 25px; font-weight: 800; align-items: center; } .team-right-info .social h4 { font-weight: 800; margin-bottom: 0px; margin-right: 25px; } .team-right-info .social ul { margin: 0px; padding: 0px; border: none; } .team-right-info .social .share-link { position: relative; z-index: 1; margin-left: 15px; padding-right: 20px; } .team-right-info .social .share-link > i { display: inline-block; height: 45px; background: var(--dark); line-height: 45px; width: 45px; text-align: center; border-radius: 50%; cursor: pointer; color: var(--white); } .team-right-info .social ul { display: flex; list-style-type: none; gap: 10px; padding: 0px; margin: 0px; position: absolute; left: 0px; top: 0px; z-index: 0; opacity: 0; pointer-events: none; transition: all 0.3s ease-in-out 0s; } .team-right-info .social .share-link:hover ul { left: 58px; opacity: 1; pointer-events: auto; } .team-right-info .social ul li { display: inline-block; margin: 0px; } .team-right-info .social ul li a { display: inline-block; height: 45px; width: 45px; line-height: 47px; background: var(--color-primary); text-align: center; border-radius: 50%; color: var(--white); } .skill-items .progress-box { margin-bottom: 35px; } .skill-items .progress-box:last-child { margin-bottom: 0px; } .skill-items .progress-box h5 { font-weight: 700; margin-bottom: 5px; text-align: left; position: relative; z-index: 1; font-size: 16px; } .skill-items .progress-box h5 span { position: absolute; font-size: 50px; line-height: 1; top: -21px; left: 0px; z-index: -1; opacity: 0.05; font-weight: 800; } .skill-items .skill-items { margin-top: 40px; } .skill-items .progress-box .progress { background: transparent; border-bottom: 2px solid rgb(207, 200, 200); box-shadow: inherit; border-radius: inherit; overflow: inherit; } .skill-items .progress-box .progress .progress-bar { height: 6px; background: var(--bg-gradient); top: 12px; position: relative; overflow: inherit; border-radius: 30px; } .skill-items .progress-box .progress .progress-bar span { position: absolute; right: 0px; top: -40px; display: block; font-size: 16px; color: var(--color-heading); font-weight: 700; } .qualification-item { display: inline-block; position: relative; padding: 50px; border-radius: 5px; z-index: 1; overflow: hidden; background: var(--white); box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 40px 0px; } .qualification-grid { display: grid; grid-template-columns: 0.3fr 1fr 1fr; gap: 30px; align-items: center; } .qualification-item i { display: inline-block; font-size: 70px; margin-bottom: 15px; color: var(--color-heading); line-height: 1; } .qualification-item h4 { margin: 0px; font-weight: 800; } .team-right-info { padding: 90px 100px 90px 70px; z-index: 1; } .team-experience .fun-fact .counter { font-weight: 900; color: transparent; -webkit-text-stroke: 1px var(--white); font-size: 70px; letter-spacing: -2px; } .team-right-info p { opacity: 0.9; } .team-content-top { position: relative; z-index: 1; margin-top: 50px; } .team-content-top::after { position: absolute; left: 0px; top: 0px; content: ""; height: 100%; width: 100%; border: 2px solid; z-index: -1; } .team-content-top .thumb img { padding: 50px 0px 50px 50px; position: relative; margin-top: -100px; } .team-qualifcations h2 { font-weight: 800; margin-bottom: 30px; font-size: 30px; } .team-qualifcations p:last-child { margin-bottom: 0px; } .qualification-grid h2 { writing-mode: vertical-lr; text-transform: uppercase; margin: 0px; color: rgb(185, 189, 198); } .choose-us-style-one .bottom-info { display: flex; align-items: center; justify-content: right; } ul.list-item li { display: flex; justify-content: space-between; border-top: 1px solid rgb(199, 200, 201); font-size: 20px; font-weight: 800; align-items: center; color: var(--color-heading); } .bg-dark ul.list-item li { border-top: 1px solid rgba(255, 255, 255, 0.2); font-weight: 700; color: rgb(204, 204, 204); } ul.list-item li strong { margin-left: 120px; font-size: 36px; -webkit-text-stroke: 1px rgb(155, 155, 155); color: transparent; font-weight: 900; } ul.list-item { margin-top: 50px; } ul.list-item li:first-child { margin-top: 0px; padding-top: 0px; border: none; } .choose-us-style-one-thumb { position: relative; } .choose-us-style-one-thumb .video-play-button { position: absolute; right: -45px; bottom: 150px; overflow: inherit; background: transparent; z-index: 1; } .choose-us-style-one-thumb .video-play-button i { background: var(--bg-gradient); } .video-play-button i::before { left: 3px; position: relative; } .testimonial-style-one { display: grid; grid-template-columns: 1fr 2fr; column-gap: 60px; align-items: center; border-right: 1px solid rgb(221, 221, 221); border-left: 1px solid rgb(221, 221, 221); border-image: initial; border-top: none; border-bottom: none; } .bg-dark .testimonial-style-one { border-color: rgba(255, 255, 255, 0.2); } .testimonial-style-one .rating { color: rgb(255, 170, 23); display: block; margin-bottom: 20px; } .testimonial-style-one .provider .thumb { height: 180px; width: 180px; margin: auto auto 30px; text-align: center; border-radius: 50%; position: relative; } .testimonial-style-one .provider .thumb > img { border-radius: 50%; display: block; } .testimonial-style-one .provider h4 { font-weight: 800; margin-bottom: 7px; } .testimonial-style-one-area .heading-left { border-bottom: 1px solid rgb(221, 221, 221); padding-bottom: 50px; margin: 0px; } .bg-dark .testimonial-style-one-area .heading-left { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .testimonial-style-one .content p { font-size: 26px; line-height: 1.6; margin-bottom: 0px; margin-top: -5px; } .testimonial-style-one .content { border-left: 1px solid rgb(221, 221, 221); padding: 120px 80px; } .bg-dark .testimonial-style-one .content { border-left: 1px solid rgba(255, 255, 255, 0.2); } .testimonial-style-one .provider { text-align: center; } .testimonial-style-one .provider .thumb .quote { height: 60px; width: 60px; background: var(--bg-gradient); text-align: center; line-height: 64px; overflow: hidden; border-radius: 50%; position: absolute; right: 0px; bottom: 0px; } .testimonial-style-one .provider .thumb .quote img { height: 20px; } .testimonial-one-swiper-nav { position: absolute; right: 0px; top: -110px; display: flex; width: 200px; justify-content: space-between; align-items: center; } .testimonial-one-swiper-nav > div { height: 40px; width: 40px; z-index: 9; position: relative; border-radius: 50%; } .testimonial-one-swiper-nav > div::after { position: absolute; top: -24px; content: ""; height: 100%; width: 100%; font-family: "Font Awesome 5 Pro"; text-align: center; color: var(--color-heading); font-size: 50px; line-height: inherit; font-weight: 100; } .bg-dark .testimonial-one-swiper-nav > div::after { color: var(--white); } .testimonial-one-swiper-nav .testimonial-one-button-next::after { content: "ï„…"; } .testimonial-one-swiper-nav .testimonial-one-button-prev::after { content: "ï„„"; } .testimonial-one-style-one-carousel { padding-top: 120px; margin-top: -120px; } .testimonial-one-swiper-nav .testimonial-one-pagination { background: transparent; position: absolute; line-height: 40px; color: var(--color-heading); font-size: 36px; width: auto; font-weight: 800; left: 50%; transform: translateX(-50%); top: 0px; } .bg-dark .testimonial-one-swiper-nav .testimonial-one-pagination { color: var(--white); } .testimonial-one-carousel-box { position: relative; } .thecontainer { width: 300%; height: 100vh; display: flex; flex-wrap: nowrap; position: relative; z-index: 7; } .panel { width: 100%; height: 100%; min-height: 100vh; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; } .panel .title { margin-bottom: 0px; } .multi-section { position: relative; z-index: 1; } .bg-shape-top { position: absolute; right: 5%; top: 0px; max-width: 10%; z-index: -1; } .achivement-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; } .achivement-item { padding: 50px; background: rgba(255, 255, 255, 0.05); display: flex; justify-content: center; flex-direction: column; } .achivement-item:nth-child(2) { background: rgba(255, 255, 255, 0.1); } .achivement-grid:nth-child(2) .achivement-item { height: 100%; background: rgba(255, 255, 255, 0.15); } .achivement-grid { display: grid; row-gap: 30px; } .achivement-item i { display: inline-block; font-size: 60px; margin-bottom: 25px; } .achivement-item h4 { font-weight: 600; margin: 0px; } .achivement-skill-items { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 10%; text-align: left; margin-top: 60px; padding-bottom: 60px; } .achivement-skill-items .progress-box .progress { height: 3px; border-radius: inherit; background: rgba(255, 255, 255, 0.4); overflow: inherit; } .achivement-skill-items .progress-box .progress .progress-bar { background: var(--white); position: relative; overflow: inherit; } .achivement-skill-items .progress-box .progress .progress-bar span { position: absolute; right: 0px; bottom: -80px; font-size: 40px; font-weight: 900; -webkit-text-stroke: 1px var(--white); color: transparent; } .achivement-skill-items .progress-box h5 { font-weight: 900; margin-bottom: 25px; } .achivement-skill-items .progress-box .progress .progress-bar::after { position: absolute; right: 0px; top: -9px; content: ""; height: 20px; width: 20px; background: var(--color-primary); border: 3px solid; border-radius: 50%; } .contact-panel-bg { position: absolute; right: 0px; top: 0px; height: 100%; width: 40%; background-size: cover; background-position: left top; } .footer-box { border: 1px solid rgb(221, 221, 221); border-radius: 30px; overflow: hidden; } .bg-dark .footer-box { border: 1px solid rgba(255, 255, 255, 0.3); } footer { width: 92%; margin: auto; padding-bottom: 4%; } footer .f-item.about { position: relative; z-index: 1; } footer .f-item.about::after { position: absolute; right: 0px; top: -100%; content: ""; height: 400%; width: 300%; background: rgb(246, 246, 246); z-index: -1; border-right: 1px solid rgb(221, 221, 221); } .bg-dark footer .f-item.about::after { position: absolute; right: 0px; top: -100%; content: ""; height: 400%; width: 300%; background: var(--dark-secondary); z-index: -1; border-right: 1px solid rgba(255, 255, 255, 0.3); } .footer-bottom { border-top: 1px solid rgb(221, 221, 221); margin: 0px; padding: 15px; background: transparent !important; } .bg-dark .footer-bottom { background: var(--dark); border-top: 1px solid rgba(255, 255, 255, 0.3); } .footer-bottom p { margin: 0px; color: var(--color-paragraph); } .bg-dark .footer-bottom p { color: rgb(204, 204, 204); } footer img.logo { /* height: 109px; */ padding-left: 30px; margin-bottom: 25px; } footer .widget-title { margin-bottom: 30px; font-size: 22px; font-weight: 800; } .bg-dark footer .widget-title { color: var(--white); } .bg-dark footer p, .bg-dark footer { color: rgb(204, 204, 204); } .footer-social ul { margin: 0px; padding: 0px; list-style: none; } .footer-social ul li { display: inline-block; } .footer-social ul li a { display: inline-block; height: 45px; width: 45px; text-align: center; line-height: 46px; border-radius: 50%; margin-right: 10px; color: var(--white); background: var(--dark); } .bg-dark .footer-social ul li a { background: rgb(64, 62, 68); } .bg-dark .footer-social ul li a { color: var(--white); } .footer-social ul li a:hover { background: var(--color-primary); } footer .f-item.link li { margin-top: 10px; font-size: 15px; } footer .f-item.link li a { display: inline-block; font-weight: 600; color: var(--color-paragraph); } footer .f-item.link li a:hover { color: var(--color-primary); } .bg-dark footer .f-item.link li a { font-size: 18px; color: rgb(210, 210, 212); } footer .f-item.link li a:hover { color: var(--color-primary); } .bg-dark footer .f-item.link li a:hover { color: var(--white); } .f-item.contact li { display: flex; margin-top: 20px; } .f-item.contact li strong { display: block; text-transform: uppercase; color: var(--color-heading); font-size: 14px; margin-bottom: 3px; } .bg-dark .f-item.contact li strong { color: var(--white); } .f-item.contact li i { display: inline-block; height: 45px; width: 45px; text-align: center; line-height: 45px; border-radius: 50%; margin-right: 20px; background: rgba(255, 255, 255, 0.1); color: var(--white); font-weight: 300; font-size: 18px; } .bg-dark .f-item.contact li { color: rgb(222, 222, 222); } .f-item.contact li p { margin: 0px; } .bg-dark .f-item.contact li p { color: rgb(222, 222, 222); } .f-item.contact li a { font-weight: 500; } .bg-dark .f-item.contact li a { color: rgb(222, 222, 222); } .bg-dark .f-item.contact li a:hover { color: var(--white); } .f-item.newsletter form { background: var(--white); position: relative; overflow: hidden; border-radius: 40px; margin-top: 20px; border: 2px solid; } .bg-dark .f-item.newsletter form { border: none; } .f-item.newsletter form input { box-shadow: inherit; border: none; min-height: 60px; padding-left: 25px; } .f-item.newsletter form button { position: absolute; right: 5px; top: 5px; height: 50px; width: 50px; padding: 0px; border-radius: 50%; } .f-item.newsletter form button i { margin: 0px 0px 0px 2px; transform: rotate(-45deg); } .accrdion-portfolio-area, .accrdion-portfolio-area div { height: 100vh; } .accordion-portfolio-lists li { overflow: hidden; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom: none; } .accordion-portfolio-lists { overflow: hidden; margin: 0px auto; padding: 0px; list-style: none; display: flex; align-items: center; transition: all 300ms ease 0s; min-height: auto; position: relative; } .accordion-portfolio-lists { height: 100%; padding-top: 130px; padding-bottom: 25px; width: 98%; } .accordion-portfolio-lists li { cursor: grab; position: relative; z-index: 1; overflow: hidden; margin: 0px; padding: 1.6em; list-style: none; width: 16.6667%; height: inherit; background-position: center center; background-size: cover; background-repeat: no-repeat; transition: all 250ms ease-in-out 0s; border-radius: 30px; display: flex; flex-direction: column; justify-content: flex-end; } .accordion-portfolio-lists li::after { position: absolute; left: 0px; top: 0px; content: ""; height: 100%; width: 100%; background: var(--bg-gradient); z-index: -1; opacity: 0.75; transition: all 0.35s ease-in-out 0s; } .accordion-portfolio-lists li:nth-child(2)::after { background: rgb(251, 160, 101); } .accordion-portfolio-lists li:nth-child(3)::after { background: rgb(188, 205, 126); } .accordion-portfolio-lists li:nth-child(4)::after { background: rgb(106, 133, 11); } .accordion-portfolio-lists li.out::after { opacity: 0; } .accordion-portfolio-lists li .accordion-overlay.big-section { width: 100%; } .accordion-portfolio-lists li.out { width: 50%; } .accrdion-portfolio-area .accordion-overlay { display: inline-block; height: auto; min-height: auto; padding: 30px; border-radius: 20px; position: relative; z-index: 1; } .accordion-portfolio-lists li h3 { position: absolute; left: 50%; font-weight: 700; padding: 0px; transform: translateX(-50%); top: 50px; writing-mode: vertical-rl; transition: all 0.35s ease-in-out 0s; font-size: 22px; margin: 0px !important; } .accordion-portfolio-lists li.out h3 { writing-mode: inherit; left: auto; transform: inherit; right: 50px; display: none; border-radius: 10px; } .accordion-portfolio-lists li > span { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 900; letter-spacing: .4rem; font-size: 60px; bottom: -15px; color: white; transition: all 0.35s ease-in-out 0s; } .accordion-portfolio-lists li.out > span { bottom: -200px; visibility: visible; opacity: 0; transition-duration: 0.1s; } .accordion-portfolio-lists li::before { position: absolute; left: 0px; bottom: 0px; content: ""; height: 30%; width: 100%; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%) 0px 0px repeat scroll rgba(0, 0, 0, 0); z-index: -1; transition: all 0.35s ease-in-out 0s; visibility: hidden; opacity: 0; } .accordion-portfolio-lists li.out::before { height: 80%; visibility: visible; opacity: 1; } .accrdion-portfolio-area .accordion-overlay span { display: inline-block; border-radius: 30px; margin-bottom: 10px; text-transform: uppercase; font-size: 14px; font-weight: 600; position: relative; z-index: 1; padding-left: 115px; transition: all 0.35s ease-in-out 0s; transform: translateX(100px); opacity: 0; visibility: hidden; } .accrdion-portfolio-area .out .accordion-overlay span { transform: translateX(0px); opacity: 1; visibility: visible; transition-delay: 0.15s; } .accrdion-portfolio-area .accordion-overlay span::after { position: absolute; left: 0px; top: 50%; content: ""; height: 1px; width: 100px; background: var(--white); } .accrdion-portfolio-area .accordion-overlay h2 { margin: 0px; font-weight: 900; transition: all 0.35s ease-in-out 0s; transform: translateX(-100px); opacity: 0; visibility: hidden; } .accrdion-portfolio-area .out .accordion-overlay h2 { transform: translateX(0px); opacity: 1; visibility: visible; transition-delay: 0.15s; } .accrdion-portfolio-area .accordion-overlay p { z-index: 1; position: relative; color: var(--white); margin: 15px 0px 0px; transition: all 0.35s ease-in-out 0s; transform: translateX(50px); opacity: 0; visibility: hidden; } .accrdion-portfolio-area .out .accordion-overlay p { opacity: 0.9; visibility: visible; transform: translateX(0px); transition-delay: 0.15s; } .accrdion-portfolio-area .accordion-overlay > a { display: inline-block; height: 70px; width: 70px; text-align: center; line-height: 68px; background: var(--dark); border-radius: 50%; margin-top: 25px; opacity: 0; visibility: hidden; transform: translateY(25px); font-size: 30px; border: 2px solid rgb(255, 255, 255); } .accrdion-portfolio-area .accordion-overlay a i { transform: rotate(-45deg); -webkit-text-stroke: 1px var(--white); color: transparent; } .accrdion-portfolio-area .out .accordion-overlay a { opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 0.3s; } .popup-single-modal .modal-content { position: relative; } .bg-dark .popup-single-modal .modal-content { background: var(--dark-secondary); } .popup-single-modal .modal-content .modal-header { position: absolute; border: none; margin: 0px; padding: 0px; width: auto; z-index: 9; right: 45px; top: 45px; } .popup-single-modal .modal-content .modal-header button.btn-close { height: 16px; width: 16px; line-height: 30px; background: var(--white); opacity: 1; color: var(--white); border-radius: 50%; position: relative; font-weight: 500; overflow: inherit; } .popup-single-modal .modal-content .modal-header button.btn-close::after { position: absolute; left: 50%; top: 50%; content: ""; font-family: "Font Awesome 5 Pro"; transform: translate(-50%, -50%); height: auto; width: auto; z-index: 1; background: transparent; color: var(--color-heading); } .popup-single-modal .modal-content .modal-header button.btn-close::before { position: absolute; left: -5px; top: -5px; content: ""; height: 42px; width: 42px; background: var(--white); z-index: -1; border-radius: 50%; opacity: 0.5; } .popup-single-modal .modal-dialog-scrollable .modal-body { padding: 50px; border-radius: inherit; } .popup-single-modal .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track { box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 6px inset; background-color: rgb(245, 245, 245); } .popup-single-modal .modal-dialog-scrollable .modal-body::-webkit-scrollbar { width: 6px; background-color: rgb(245, 245, 245); } .popup-single-modal .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb { background-color: var(--dark); } .bg-dark .popup-single-modal .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track { box-shadow: inset 0 0 6px var(--white); background-color: rgb(245, 245, 245); } .bg-dark .popup-single-modal .modal-dialog-scrollable .modal-body::-webkit-scrollbar { width: 6px; background-color: rgb(245, 245, 245); } .bg-dark .popup-single-modal .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb { background-color: var(--color-primary); } @media (min-width: 1400px) { .popup-single-modal .modal-xl { max-width: 1320px; } } ul.gallery-project-basic-info { margin: 0px 0px 0px 50px; padding: 0px 0px 0px 50px; list-style: none; border-left: 1px solid rgb(221, 221, 221); } .bg-dark ul.gallery-project-basic-info { border-left: 1px solid rgba(255, 255, 255, 0.3); } ul.gallery-project-basic-info li { margin-top: 20px; font-weight: 700; color: var(--color-heading); font-size: 18px; } .bg-dark ul.gallery-project-basic-info li { color: var(--white); font-weight: 600; font-size: 15px; margin-top: 25px; } ul.gallery-project-basic-info li:first-child { margin-top: 0px; } ul.gallery-project-basic-info li span { display: block; text-transform: uppercase; font-weight: 500; font-size: 14px; color: var(--color-paragraph); } .bg-dark ul.gallery-project-basic-info li span { color: rgb(204, 204, 204); font-weight: 400; } .project-details h1, .project-details h2, .project-details h3, .project-details h4, .project-details h5, .project-details h6 { font-weight: 800; margin-bottom: 20px; } .bg-dark .project-details h1, .bg-dark .project-details h2, .bg-dark .project-details h3, .bg-dark .project-details h4, .bg-dark .project-details h5, .bg-dark .project-details h6 { font-weight: 700; } .thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } ul.list-disc { list-style: disc; margin-left: 20px; padding: 0px; } ul.list-disc li { list-style: disc; margin-top: 7px; } .bg-dark ul.list-disc li { color: rgb(204, 204, 204); } .home-blog-style-one { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 30px 30px 30px 0px; position: relative; z-index: 1; } .home-blog-style-one .info { position: relative; z-index: 1; background: var(--white); padding: 0px; border-radius: 10px; } .home-blog-style-one img { border-radius: 10px !important; } .home-blog-style-one::after { position: absolute; right: 0px; left: 30px; top: 0px; content: ""; height: 100%; border: 1px solid rgb(231, 231, 231); border-radius: 10px; z-index: -1; } .home-blog-style-one h4 { font-size: 24px; } .bg-dark .home-blog-style-one .info { background: transparent; } .bg-dark .home-blog-style-one::after { border-color: rgba(255, 255, 255, 0.15); } .bg-dark .home-blog-style-one .info li, .bg-dark .home-blog-style-one .info a { color: rgb(204, 204, 204); } .bg-dark .blog-area .meta li::after { background: rgb(204, 204, 204); } .bg-dark .blog-area .post-title a { color: var(--white); } .home-blog-style-one .thumb { margin-right: 30px; } .home-blog-two .thumb img { border-radius: 10px; } .home-blog-two .info .content { background: var(--white); padding: 16px; border-radius: 10px; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 40px 0px; } .bg-dark .home-blog-two .info .content { background: rgb(51, 50, 50); box-shadow: none; } .home-blog-two .info { position: relative; padding-left: 50px; top: -80px; margin-bottom: -100px; padding-right: 50px; } .bg-dark .blog-area .home-blog-two .meta li, .bg-dark .blog-area .home-blog-two .meta li a { color: rgb(204, 204, 204); } .bg-dark .blog-area .home-blog-two .meta li a:hover { color: var(--white); } .bg-dark .blog-area .home-blog-two a.button-regular { color: rgb(204, 204, 204); } .bg-dark .blog-area .home-blog-two a.button-regular:hover { color: var(--white); } .home-blog-two .thumb .date { position: absolute; left: 30px; bottom: -25px; background: var(--bg-gradient); color: var(--white); font-size: 50px; text-align: center; line-height: 1; } .home-blog-two .thumb .date { display: block; font-size: 36px; padding: 20px 30px 25px; text-align: center; font-weight: 900; line-height: 1.2; border-radius: 10px; } .home-blog-two .thumb .date strong { font-size: 16px; text-transform: uppercase; font-weight: 600; display: block; } @media (min-width: 1024px) { .blog-style-two-area .row { --bs-gutter-x: 60px; } } ul.contact-address { padding: 90px 60px; border-radius: 30px; background-size: contain; background-repeat: no-repeat; background-position: right bottom; } ul.contact-address h4 { font-weight: 700; margin-bottom: 8px; } ul.contact-address > li { border-bottom: 1px solid rgba(255, 255, 255, 0.4); margin-bottom: 25px; padding-bottom: 25px; } ul.contact-address li:last-child { margin: 0px; padding: 0px; border: none; } ul.contact-address li p { margin: 0px; } ul.contact-address li a { font-weight: 500; color: rgb(204, 204, 204); } ul.contact-address li a:hover { color: var(--white); } ul.contact-address ul.social-link li { display: inline-block; } ul.contact-address ul.social-link li a { display: inline-block; height: 50px; width: 50px; line-height: 54px; text-align: center; background: rgba(255, 255, 255, 0.08); border-radius: 50%; margin-right: 12px; margin-top: 10px; } ul.contact-address ul.social-link li a:hover { background: var(--color-primary); color: var(--white); } .contact-form-style-one .form-group { margin-bottom: 15px; } .contact-form-style-one input, .contact-form-style-one textarea, .contact-form-style-one select { min-height: 60px; padding: 10px 30px; border-radius: 30px; } .contact-form-style-one textarea { padding-top: 20px; min-height: 220px; } ul.contact-address li a.phone-link { font-size: 36px; font-weight: 800; color: var(--white); text-decoration: underline; } ul.contact-address > li:first-child { border: none; margin-bottom: 0px; } .contact-form-style-one button { border-radius: 30px; margin-top: 13px; } .error-page-area { position: relative; z-index: 1; } .error-page-area .shape-left { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 100%; width: 20%; z-index: -1; opacity: 0.3; background-position: left center !important; background-repeat: no-repeat !important; background-size: contain !important; } .error-page-area .shape-right { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); height: 100%; width: 20%; z-index: -1; opacity: 0.3; background-position: right center !important; background-repeat: no-repeat !important; background-size: contain !important; } .error-box { padding-top: 60px; } .error-box h1 { font-size: 150px; line-height: 110px; font-weight: 800; margin-bottom: 40px; text-shadow: rgb(192, 192, 192) 3px 3px; } .error-box h2 { font-weight: 700; margin-bottom: 20px; } .error-box p { padding: 0px 10%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .experience-box { max-width: 50%; } .pf-item-info .content-info h2 { font-size: 30px; } .pf-item-info { padding-left: 0px; } .pf-item-info .content-info h2 { font-size: 30px; } .pf-item-info { padding-left: 0px; } .fun-fact-circle-lists .fun-fact:nth-child(2)::after { height: 300px; width: 300px; } .fun-fact-circle-lists .fun-fact:last-child::after { height: 350px; width: 350px; } .fun-fact-circle-lists .fun-fact::after { height: 270px; width: 270px; } .panel .align-center { align-items: center; } .testimonial-style-one { grid-template-columns: 1fr 3fr; column-gap: 15px; } .service-hover-content { grid-template-columns: 0.5fr 1.6fr 2fr 1.5fr; column-gap: 50px; } .award-area .align-center { align-items: center; } .award-area .align-center { align-items: center; } .qualification-grid { display: block; } .qualification-grid h2 { writing-mode: inherit; color: var(--color-heading); margin-bottom: 30px; } .qualification-item { margin-right: 30px; width: 45%; } .team-qualifcations .skill-items { padding-left: 0px; margin-top: 50px; } footer { width: 96%; padding-bottom: 2%; } footer .f-item.about { padding-right: 0px; } } @media (max-width: 991px) { .accordion-portfolio-lists { padding: 30px 15px; display: block; height: auto; width: 100%; } .accrdion-portfolio-area, .accrdion-portfolio-area div { height: inherit; min-height: inherit; } .accordion-portfolio-lists li { width: 100%; height: 90px; display: block; border: none; margin-top: 15px; border-radius: 10px; padding: 35px; } .accordion-portfolio-lists li h3 { writing-mode: inherit; padding: 15px; position: absolute; top: 50%; transform: translate(0px, -50%); right: 15px; left: 100px; text-align: right; } .accordion-portfolio-lists li > span { left: 30px; top: 50%; transform: translate(0px, -50%); font-size: 60px; bottom: auto; } .accordion-portfolio-lists li.out { width: 100%; padding-top: 200px; height: auto; } .accordion-portfolio-lists li.out h3 { display: none; } .accrdion-portfolio-area .out .accordion-overlay h2 { font-size: 24px; } .accordion-portfolio-lists li.out::before { height: 100%; } .accordion-portfolio-lists li::after { opacity: 0.8; } .accrdion-portfolio-area .out .accordion-overlay p { padding: 0px; } .bg-dark ul.gallery-project-basic-info { border: none; background: var(--dark); } .error-box { padding-top: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pin-spacer { width: auto !important; height: auto !important; padding: 0px !important; } .thecontainer { max-width: inherit !important; height: auto !important; width: auto !important; display: block !important; position: inherit !important; transform: none !important; } .panel.overflow-hidden { display: block; height: auto; min-height: auto; padding: 120px 0px; text-align: center; transform: none !important; } .panel .site-title { margin-bottom: 30px; } .achivement-skill-items { grid-template-columns: 1fr; margin-top: 20px; row-gap: 45px; padding-bottom: 10px; } .achivement-skill-items .progress-box .progress .progress-bar span { bottom: auto; font-size: 20px; top: -54px; -webkit-text-stroke: inherit; color: var(--white); font-weight: 700; } .achivement-skill-items .progress-box h5 { display: inline-block; } .contact-panel-bg { display: none; } .panel.contact-panel { text-align: center; } .accordion-portfolio-lists li.out { padding-top: 280px; } .accrdion-portfolio-area .out .accordion-overlay h2 { font-size: 36px; } .banner-style-one { padding-top: 120px; padding-bottom: 120px; } .banner-style-one .curve-text { margin-top: 40px; } .banner-one-item h4 { margin-bottom: 30px; } .banner-style-three { padding: 120px 0px; text-align: center; } .banner-style-three .fun-fact .counter { margin-top: 0px; } .banner-style-three .fun-fact .counter { justify-content: center; } .banner-style-three .content::after { height: 300px; width: 300px; left: 50%; transform: translate(-50%, -50%); display: none; } .banner-style-three .thumb img { width: 100%; max-width: 100%; } .banner-style-three .content { margin-top: 30px; } .banner-one-item h4 { margin-bottom: 30px; } .experience-box { position: inherit; background: var(--bg-gradient); width: 100%; max-width: 100%; margin: 0px; padding: 50px; } .banner-animation-zoom { height: auto; padding-top: 450px; } .banner-animation-zoom .animation-zoom-banner { height: 450px; } .banner-animation-zoom .row > div { padding: 0px; } .banner-one-item h4 { margin-bottom: 30px; } .experience-box { position: inherit; background: transparent; width: 100%; max-width: 100%; margin: 0px; padding: 120px 0px; } .experience-box::after { left: -100%; } .experience-box::before { left: -50%; width: 200%; background-size: cover; } .about-area.default-padding-bottom.relative { overflow: hidden; } .portfolio-style-one-area.default-padding.bg-gray { overflow: hidden; } .about-style-one-thumb { margin-bottom: 50px; } .about-style-one-thumb .fun-fact { display: none; } .about-style-one-thumb { padding-bottom: 30px; } .about-style-two-thumb { width: 100%; height: 450px; position: relative; margin-bottom: 50px; } .about-style-two-info { padding: 0px; } .experience-style-one { display: none; } .client-items { text-align: center; } .client-item-box { margin-top: 50px; } .team-content-top .thumb img { padding: 0px; margin: 0px; } .team-content-top { margin: 0px; } .team-content-top::after { display: none; } .team-right-info { padding: 0px; margin-top: 50px; } .award-area .site-title { margin-bottom: 60px; } .pricing-style-one:first-child { margin-top: 50px; } .testimonial-style-one { display: block; } .testimonial-style-one .provider .thumb { margin: auto auto 30px; } .testimonial-style-one { padding: 50px 37px; text-align: center; border-bottom: 1px solid rgb(221, 221, 221); } .bg-dark .testimonial-style-one { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .testimonial-style-one .content { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid rgb(221, 221, 221); padding: 30px 0px 0px; margin-top: 30px; } .bg-dark .testimonial-style-one .content { border-top: 1px solid rgba(255, 255, 255, 0.2); border-left: none; } .testimonial-style-one .content p { font-size: 20px; line-height: 1.8; } .testimonial-style-one-area { padding-bottom: 120px; } .testimonial-one-swiper-nav { position: inherit; top: 0px; width: auto; max-width: 300px; margin-top: 30px; left: 50%; transform: translateX(-50%); right: auto; } .fun-fact-circle-lists { grid-template-columns: 1fr 1fr; margin: 0px; row-gap: 50px; } .fun-fact-circle-lists .fun-fact { margin: 30px auto auto; inset: auto !important; } .fun-fact-circle-lists .fun-fact::after { height: 100% !important; width: 100% !important; } .fun-fact-circle-lists .fun-fact { display: flex; flex-direction: column; justify-content: center; margin: 0px; height: 300px !important; width: 300px !important; visibility: visible !important; opacity: 1 !important; animation: auto ease 0s 1 normal none running none !important; } .fun-fact-circle-lists .fun-fact:first-child { margin-top: 0px; } .fun-fact-circle-lists .fun-fact .counter { margin: 0px; } .cteative-service-item { padding: 60px 30px; border: 1px solid rgb(221, 221, 221); box-shadow: none; } .bg-dark .cteative-service-item { border: none; } .services-nav { top: 0px; margin: 0px 0px 40px; justify-content: left; padding: 0px; } .services-item-one-items .services-carousel { top: 0px; margin: 0px; padding: 0px; } .bg-static { display: none; } .service-hover-wrapper { display: none; } .service-hover-content { grid-template-columns: 1fr; row-gap: 30px; } .service-hover-content .arrow { text-align: left; justify-content: flex-start; align-items: flex-start; } .service-hover-content .arrow .btn-animation { left: 0px; } .choose-us-style-one-thumb .video-play-button { right: auto; left: 50%; transform: translateX(-50%); } ul.list-item { margin-top: 0px; } .choose-us-style-one-thumb { margin-bottom: 50px; } .choose-us-style-one .bottom-info { display: block; margin-top: 10px; } .brand-conetnt h2 { font-size: 60px; } .brand-conetnt .item::after { margin-top: 5px !important; } .item-center:nth-child(2n) .portfolio-style-one { padding-right: 0px; padding-left: 0px; } .item-center .portfolio-style-one { padding-right: 0px; } ul.gallery-project-basic-info { border: none; margin: 0px 0px 30px; background: var(--bg-gray); padding: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 50px; } ul.gallery-project-basic-info li { margin: 0px !important; } .thumb-grid { margin-top: 40px; } .home-blog-style-one { display: block; border: 1px solid rgb(231, 231, 231); border-radius: 30px; padding: 30px; } .home-blog-style-one .thumb { margin: 0px; } .home-blog-style-one::after { display: none; } .bg-dark .home-blog-style-one { border-color: rgba(255, 255, 255, 0.3); } .home-blog-style-one .thumb { margin-bottom: 30px; } .home-blog-two .info { top: 0px; padding: 0px; margin: 0px; } .home-blog-two .info .content { border-radius: inherit; background: var(--bg-gray); } .home-blog-two .thumb .date { bottom: 30px; } .home-blog-two .thumb img { border-radius: inherit; } .home-blog-two { overflow: hidden; border-radius: 10px; } footer .f-items { padding-left: 50px; padding-right: 50px; } footer .f-item.about { padding-right: 30px; } footer .f-item.about::after { display: none; } } @media (max-width: 767px) { .accrdion-portfolio-area .accordion-overlay span { background: var(--bg-gradient); padding: 4px 20px; margin-bottom: 15px; transform: translateX(0px); } .accrdion-portfolio-area .accordion-overlay span::after { display: none; } .accrdion-portfolio-area .accordion-overlay { padding: 0px; text-align: center; width: 100%; } .accrdion-portfolio-area .accordion-overlay h2 { transform: translateX(0px) !important; } .banner-one-item h2 { font-size: 40px; } .banner-one-item h2 strong { float: none; } .banner-style-one { text-align: center; padding-top: 60px; padding-bottom: 60px; } .banner-style-one .curve-text { margin-top: 40px; } .banner-one-item h4 { margin-bottom: 30px; } .banner-style-three { padding: 60px 0px; text-align: center; } .banner-style-three .fun-fact .counter { margin-top: 0px; } .banner-style-three .fun-fact .counter { justify-content: center; } .banner-style-three h2 { font-size: 36px; } .banner-style-three .content::after { height: 300px; width: 300px; left: 50%; transform: translate(-50%, -50%); display: none; } .banner-style-three .thumb img { width: 100%; max-width: 100%; } .banner-style-three .content { margin-top: 30px; } .banner-one-item h4 { margin-bottom: 30px; } .experience-box { position: inherit; background: var(--bg-gradient); width: 100%; max-width: 100%; margin: 0px; padding: 50px; } .banner-animation-zoom { height: auto; padding-top: 300px; } .banner-animation-zoom .animation-zoom-banner { height: 300px; } .banner-animation-zoom .row > div { padding: 0px; } .banner-one-item h4 { margin-bottom: 30px; } .experience-box { position: inherit; background: transparent; width: 100%; max-width: 100%; margin: 0px; padding: 50px 15px; } .experience-box::after { left: -100%; } .experience-box::before { left: -50%; width: 200%; background-size: cover; } .about-style-one-thumb .fun-fact { display: none; } .about-style-one-thumb { padding-bottom: 30px; } .about-style-two-thumb { width: 100%; height: 300px; position: relative; margin-bottom: 40px; } .experience-style-one { display: none; } .about-style-two-info { padding: 0px; } .fun-fact-circle-lists { grid-template-columns: 1fr; margin: 0px; } .fun-fact-circle-lists .fun-fact { margin: 30px auto auto; inset: auto !important; } .fun-fact-circle-lists .fun-fact::after { height: 100% !important; width: 100% !important; } .fun-fact-circle-lists .fun-fact { display: flex; flex-direction: column; justify-content: center; height: 300px !important; width: 300px !important; } .fun-fact-circle-lists .fun-fact:first-child { margin-top: 0px; } .fun-fact-circle-lists .fun-fact .counter { margin: 0px; } .team-content-top .thumb img { padding: 0px; margin: 0px; } .team-content-top { margin: 0px; } .team-content-top::after { display: none; } .award-area .site-title { margin-bottom: 30px; } .award-area { text-align: center; } .qualification-grid h2 { writing-mode: inherit; } .qualification-grid { grid-template-columns: 1fr; text-align: center; } .team-right-info { padding: 0px; margin-top: 30px; } .pf-item-info { padding-left: 0px; padding-right: 0px; } .pf-item-info { display: block; } .bg-dark .fun-factor-circle-area.bg-gray { background: var(--dark); padding-top: 60px; } .item-center .portfolio-style-one { padding-right: 0px; } .pf-item-info .button { right: auto; top: 0px; margin-top: 30px; } .item-center:nth-child(2n) .portfolio-style-one { padding-left: 0px; } .pf-item-info .content-info { margin-right: 0px; } .pf-item-info { display: block; } .project-style-one .overlay { left: 30px; } .project-nav .nav-items { margin: 0px; top: 0px; right: auto; left: 0px; } .project-nav { justify-content: start; padding: 0px; margin-bottom: 50px; margin-top: -15px; } ul.gallery-project-basic-info { border: none; margin: 0px 0px 30px; background: var(--bg-gray); padding: 50px; } .thumb-grid { grid-template-columns: 1fr; margin-top: 40px; } .pricing-style-one:first-child { margin-top: 40px; } .pricing-style-one { display: block; } .pricing-style-one .left { width: 100%; border: none; padding: 0px; margin-bottom: 30px; } .pricing-style-one:first-child { margin-top: 40px; } .client-items { text-align: center; padding-top: 60px; } .client-item-box { margin-top: 40px; } .client-item-box::after { height: 100%; width: 100%; } .client-items .partner-box { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 0px; } .client-items .partner-box .item { width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; line-height: 100px; margin: 0px; padding: 50px 0px; } .client-items .partner-box:nth-child(2) { margin-top: 30px; } .client-items .partner-box .item i { line-height: initial; } .choose-us-style-one-thumb .video-play-button { right: auto; left: 50%; transform: translateX(-50%); } ul.list-item { margin-top: 0px; } .choose-us-style-one-thumb { margin-bottom: 40px; } .choose-us-style-one .bottom-info { display: block; margin-top: 10px; } .pin-spacer { width: auto !important; height: auto !important; padding: 0px !important; } .thecontainer { max-width: inherit !important; height: auto !important; width: auto !important; display: block !important; position: inherit !important; transform: none !important; } .panel.overflow-hidden { display: block; height: auto; min-height: auto; padding: 60px 0px; text-align: center; transform: none !important; } .panel .site-title { margin-bottom: 30px; } .achivement-items { grid-template-columns: 1fr; row-gap: 30px; } .achivement-skill-items { grid-template-columns: 1fr; margin-top: 20px; row-gap: 45px; padding-bottom: 10px; } .achivement-skill-items .progress-box .progress .progress-bar span { bottom: auto; font-size: 20px; top: -54px; -webkit-text-stroke: inherit; color: var(--white); font-weight: 700; } .achivement-skill-items .progress-box h5 { display: inline-block; } .contact-panel-bg { display: none; } .panel.contact-panel { text-align: center; } .services-nav { top: 0px; margin: 0px 0px 40px; justify-content: left; padding: 0px; } .services-item-one-items .services-carousel { top: 0px; margin: 0px; padding: 0px; } .cteative-service-item { border: 1px solid rgb(221, 221, 221); } .bg-dark .cteative-service-item { border: none; } .bg-static { display: none; } .service-hover-wrapper { display: none; } .service-hover-content { grid-template-columns: 1fr; row-gap: 30px; } .service-hover-content .arrow { text-align: left; justify-content: flex-start; align-items: flex-start; } .service-hover-content .arrow .btn-animation { left: 0px; } .testimonial-style-one { display: block; } .testimonial-style-one .provider .thumb { margin: auto auto 30px; } .testimonial-style-one { padding: 50px 37px; text-align: center; border-bottom: 1px solid rgb(221, 221, 221); } .bg-dark .testimonial-style-one { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .testimonial-style-one .content { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid rgb(221, 221, 221); padding: 30px 0px 0px; margin-top: 30px; } .bg-dark .testimonial-style-one .content { border-top: 1px solid rgba(255, 255, 255, 0.2); border-left: none; } .testimonial-style-one .content p { font-size: 20px; line-height: 1.8; } .testimonial-style-one-area { padding-bottom: 60px; } .testimonial-one-swiper-nav { position: inherit; top: 0px; width: auto; max-width: 300px; margin-top: 30px; left: 50%; transform: translateX(-50%); right: auto; } .brand-conetnt h2 { font-size: 36px; line-height: 1.2; } .brand-items { padding-top: 40px; } .brand-conetnt .item::after, .bg-dark .brand-conetnt .item::after { margin-top: 5px; } .home-blog-style-one { display: block; border: 1px solid rgb(231, 231, 231); border-radius: 30px; padding: 30px; } .home-blog-style-one .thumb { margin: 0px; } .home-blog-style-one::after { display: none; } .bg-dark .home-blog-style-one { border-color: rgba(255, 255, 255, 0.3); } .home-blog-style-one .thumb { margin-bottom: 30px; } .home-blog-two .info { top: 0px; padding: 0px; margin: 0px; } .home-blog-two .info .content { border-radius: inherit; background: var(--bg-gray); } .home-blog-two .thumb .date { bottom: 30px; } .home-blog-two .thumb img { border-radius: inherit; } .home-blog-two { overflow: hidden; border-radius: 10px; } footer .f-item.about::after { display: none; } footer .f-items { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 600px) and (max-width: 1200px) { } @media only screen and (min-width: 480px) and (max-width: 767px) { } @media only screen and (max-width: 480px) { .cteative-service-item { padding: 50px 37px; } .swiper-slide.swiper-slide-active .project-style-one .overlay { left: 0px; background: var(--color-primary); bottom: 9px; } .project-style-one .overlay .content span { color: var(--white); opacity: 0.9; } .project-style-one .overlay .link { display: none; } .project-style-one .overlay .content { padding: 25px 60px 30px; border: none; } .project-style-one .overlay::after { display: none; } .project-style-one .overlay .content h4 a { color: var(--white); } .team-content-top .thumb img { padding: 0px; margin: 0px; } .team-content-top { margin: 0px; } .team-content-top::after { display: none; } .team-right-info { padding: 0px; margin-top: 30px; } .team-right-info .social { display: block; } .team-right-info .social .share-link { margin: 30px 0px 0px; display: none; } } @media (min-width: 1024px) { .home-five nav.navbar.validnavs.navbar-fixed.nav-full-width { border-bottom: none; box-shadow: none; background: transparent !important; } .home-five nav.navbar.validnavs.navbar-fixed.nav-full-width .navbar-header { border: none; } .home-five nav.navbar.validnavs.navbar-fixed.nav-full-width .attr-right::after { border: none; } } .banner-style-five-area { padding-top: 230px; padding-bottom: 200px; background-size: cover; background-position: center top; } .banner-five-info h2 { text-transform: uppercase; font-size: 160px; font-weight: 900; line-height: 1; display: block; } .banner-five-info h2 strong { display: block; text-align: right; color: transparent; -webkit-text-stroke: 2px var(--white); font-size: 230px; position: relative; } .banner-five-info h2 strong span { position: absolute; color: var(--color-primary); animation: 4s ease-in-out 0s infinite normal none running text-animation; right: 0px; bottom: 0px; background: url("../img/shape/banner.jpg") left bottom / cover text; -webkit-text-fill-color: transparent; } .banner-five-info p { padding-left: 50%; margin: 40px 0px 0px; font-size: 20px; } @keyframes text-animation { 0%, 100% { clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); } 50% { clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); } } .btn-animated { display: inline-block; float: right; height: 150px; width: 150px; text-align: center; line-height: 150px; background: var(--dark-secondary); border-radius: 50%; font-size: 60px; -webkit-text-stroke: 1px var(--color-secondary); border: 1px solid rgba(255, 255, 255, 0.1); color: transparent !important; } .btn-animated i { transform: rotate(-45deg); transition: all 0.35s ease-in-out 0s; } .btn-animated:hover i { transform: rotate(0deg); } .banner-five-info .btn-animated { margin-right: 150px; } .parallax-items { position: relative; height: 100vh; overflow: hidden; } .parallax-item { position: absolute; height: 100vh; width: 100%; top: 0px; left: 0px; background-size: cover !important; background-position: center bottom !important; } section.parallax-item a { height: 100%; width: 100%; left: 0px; top: 0px; border-radius: 60px 60px 0px 0px; background-size: cover; background-position: center center; } .parallax-item:not(:first-child) { top: 100%; } .parallax-item { background: linear-gradient(to right, rgb(78, 93, 24), rgb(151, 177, 94)); border-radius: 60px 60px 0px 0px; display: grid; grid-template-columns: 1fr 2fr; padding: 5%; column-gap: 100px; align-items: center; } .parallax-item:nth-child(2) { background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0), rgb(234, 29, 34)); } .parallax-item:nth-child(3) { background: linear-gradient(to right, rgb(0, 0, 0), rgb(230, 182, 117)); } .parallax-item:nth-child(6) { background: linear-gradient(to right, rgb(56, 66, 6), rgb(162, 162, 91)); } .parallax-item:nth-child(8) { background: linear-gradient(to right, rgb(232, 4, 138), rgb(34, 17, 53)); } .parallax-item:nth-child(5) { background: linear-gradient(to right, rgb(53, 31, 33), rgb(242, 226, 202)); } .parallax-item:nth-child(7) { background: linear-gradient(to right, rgb(15, 73, 23), rgb(19, 122, 75)); } .parallax-item:nth-child(9) { background: linear-gradient(to right, rgb(10, 75, 187), rgb(140, 189, 235)); } .parallax-item:nth-child(4) { background: linear-gradient(to right, rgb(152, 122, 90), rgb(194, 185, 177)); } .parallax-item:nth-child(10) { background: linear-gradient(to right, rgb(98, 4, 176), rgb(212, 196, 255)); } .parallax-item:nth-child(11) { background: linear-gradient(to right, rgb(231, 52, 38), rgb(1, 1, 1)); } section.parallax-item .item-background { background-size: cover; background-position: center center; border-radius: 100px; height: 80%; } .project-thumb img { border-radius: 10px; } .popup-single-modal .modal-content { border-radius: 0px; } .parralax-overlay span { display: inline-block; background: transparent; text-transform: uppercase; padding: 6px 29px; border-radius: 5px; margin-bottom: 15px; border: 2px solid rgb(151 177 94 ); font-size: 27px; font-weight: 800; letter-spacing: .1rem; } .parralax-overlay h2 { font-weight: normal; font-size: 42px; } .parralax-overlay p { margin: 31px 0px 0px; font-size: 20px; color: var(--white); /* text-transform: uppercase; */ /* border-top: 2px solid; */ padding-top: 15px; } .cursor { position: fixed; top: 0px; left: 0px; z-index: 100; user-select: none; pointer-events: none; opacity: 0; } .follower { width: 1rem; height: 1rem; border-radius: 50%; background-color: rgb(214, 211, 209); } .cursor-hover { display: flex; justify-content: center; align-items: center; width: 7rem; height: 7rem; border-radius: 50%; background-color: var(--black); color: var(--white); font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; text-align: center; font-size: 43px; border: 1px solid rgba(255, 255, 255, 0.1); } .cursor-hover i { display: inline-block; transform: rotate(-45deg); font-weight: 400; } .preview__wrapper { overflow: hidden; } .preview__image { opacity: 0.6; } a.item.default-padding { height: 600px; width: 100%; display: block; background-size: cover; background-position: center center; } .navbar span.badge { background: var(--bg-gradient); font-size: 13px; font-weight: 600; text-align: right; float: right; padding: 4px 5px; margin-top: 4px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-style-five-area { padding-top: 120px; padding-bottom: 130px; } .banner-five-info h2 { font-size: 120px; } .banner-five-info h2 strong { font-size: 150px; } .banner-five-info .button { text-align: center; } .banner-five-info .btn-animated { margin: 0px; text-align: center; float: none; } .scroll-parallax-area div { height: 100%; } .scroll-parallax-area .pin-spacer { height: 100% !important; } .parallax-items div { height: auto; } .parallax-item { width: 100%; padding: 50px; height: 100%; justify-content: center; display: flex; flex-direction: column; } section.parallax-item .item-background { height: 400px; border-radius: 10px; margin-top: 30px; width: 100%; } .parallax-items { position: relative; overflow: hidden; height: 100vh !important; min-height: auto !important; } .parralax-overlay h2 { font-size: 34px; } .parralax-overlay p { margin-top: 20px; } .parralax-overlay { width: 100%; } } @media (max-width: 767px) { .banner-five-info h2 { font-size: 60px; text-align: center; } .banner-five-info h2 strong { font-size: 80px; text-align: center; } .banner-style-five-area { padding-top: 80px; padding-bottom: 90px; } .banner-five-info h2 strong span { right: auto; left: 50%; transform: translateX(-50%); } .banner-five-info .btn-animated { margin: 0px; float: none; } .banner-five-info { text-align: center; } .scroll-parallax-area div { height: 100%; } .scroll-parallax-area .pin-spacer { height: 100% !important; } .parallax-items div { height: auto; } .parallax-item { width: 100%; padding: 50px; height: 100%; justify-content: center; display: flex; flex-direction: column; } section.parallax-item .item-background { height: 300px; border-radius: 10px; margin-top: 30px; width: 100%; } .parallax-items { position: relative; overflow: hidden; height: 100vh !important; min-height: auto !important; } .parralax-overlay h2 { font-size: 34px; } .parralax-overlay p { margin-top: 20px; } .parralax-overlay { width: 100%; } } @media only screen and (max-width: 400px) { .parralax-overlay h2 { font-size: 26px; } section.parallax-item .item-background { height: 250px; } } .avrix-preloader { -webkit-box-align: center; align-items: center; cursor: default; display: flex; height: 100vh; min-height: 100vh; max-height: 100vh; -webkit-box-pack: center; justify-content: center; position: fixed; left: 0px; top: 0px; width: 100%; z-index: 9000; } .avrix-preloader .animation-preloader { z-index: 1000; position: relative; } .avrix-preloader .animation-preloader::after { position: absolute; left: 50%; top: 50%; content: ""; height: 100%; width: 100%; background: url(../img/logo-icon.png); transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: center; } .bg-dark .avrix-preloader .animation-preloader::after { background: url(../img/logo-icon-light.png); background-repeat: no-repeat; background-position: center; } .avrix-preloader .animation-preloader .spinner { -webkit-animation: spinner 1s infinite linear; animation: spinner 1s infinite linear; border-radius: 50%; border: 2px solid rgba(2, 109, 255, 0.3); border-top-color: var(--color-primary); height: 110px; margin: auto; width: 110px; } .bg-dark .avrix-preloader .animation-preloader .spinner { border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: rgba(255, 255, 255, 1); } .avrix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .avrix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .avrix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .avrix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .avrix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { -webkit-animation-delay: 1s; animation-delay: 1s; } .avrix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .avrix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .avrix-preloader.dark .animation-preloader .spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; } .avrix-preloader .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; z-index: 1; pointer-events: none; } .avrix-preloader .loader .row { height: 100%; } .avrix-preloader .loader .loader-section { padding: 0px; } .avrix-preloader .loader .loader-section .bg { background-color: var(--white); height: 100%; left: 0; width: 100%; -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); } .bg-dark .avrix-preloader .loader .loader-section .bg { background-color: var(--dark); } .avrix-preloader .loader.dark_bg .loader-section .bg { background: #111339; } .avrix-preloader.loaded .animation-preloader { opacity: 0; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .avrix-preloader.loaded .loader-section .bg { width: 0; -webkit-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); -o-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); } @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @media screen and (max-width: 767px) { .avrix-preloader .animation-preloader .spinner { height: 8em; width: 8em; } } @media screen and (max-width: 500px) { .avrix-preloader .animation-preloader .spinner { height: 7em; width: 7em; } } @media (min-width: 1024px) { nav.navbar.validnavs.navbar-fixed.nav-full-width.bg-transparent { border: none; box-shadow: none; } nav.navbar.validnavs.navbar-fixed.nav-full-width.bg-transparent .navbar-header { border: none; } nav.navbar.validnavs.navbar-fixed.nav-full-width.bg-transparent .attr-right::after { border: none; } } .banner-area.banner-style-five .align-center { align-items: center; } .banner-area.banner-style-five .swiper-pagination { display: flex; position: absolute; inset: 50% 50px auto auto; width: auto; flex-direction: column; justify-content: center; align-items: center; transform: translateY(-50%); } .banner-area.banner-style-five .swiper-pagination span.swiper-pagination-bullet { height: 18px; width: 18px; background: transparent; border: 1px solid; border-radius: 50%; opacity: 0.4; position: relative; margin: 10px 0px; transform: scale(1); } .banner-area.banner-style-five .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; transform: scale(1.5); } .banner-area.banner-style-five .swiper-pagination span.swiper-pagination-bullet::after { position: absolute; left: 50%; top: 50%; content: ""; height: 4px; width: 5px; background: var(--white); transform: translate(-50%, -50%); border-radius: 50%; } .banner-area.banner-style-five .swiper-pagination span { display: block; } .banner-style-five .text-fixed { position: absolute; z-index: -1; top: 80px; } .banner-style-five .text-fixed h1 { font-size: 150px; line-height: 110px; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 1px var(--white); color: transparent; } .banner-style-five .content h2 { font-size: 70px; font-weight: 900; } .banner-style-five .content .tags { position: relative; padding-left: 200px; } .banner-style-five .content .tags::after { position: absolute; left: 0px; top: 50%; content: ""; height: 1px; width: 190px; border-top: 1px solid; } .banner-style-five .content .tags a { text-transform: uppercase; display: inline-block; position: relative; z-index: 1; padding-right: 7px; } .banner-style-five .content .tags a::after { position: absolute; right: 2px; bottom: 0px; content: ","; } .banner-style-five .content .tags a:last-child::after { display: none; } .banner-area.banner-style-five .banner-slide-counter .text-fixed { transition: all 500ms ease 0s; transform: translate3d(-15%, 0px, 0px); opacity: 0; visibility: hidden; } .banner-area.banner-style-five .banner-slide-counter h2 { transition: all 500ms ease 0s; transform: translateY(-50%); opacity: 0; visibility: hidden; } .banner-area.banner-style-five .banner-slide-counter .tags { transition: all 500ms ease 0s; transform: translateY(50%); opacity: 0; padding-right: 25%; margin: 0px; visibility: hidden; } .banner-area.banner-style-five .banner-slide-counter .button { transition: all 500ms ease 0s; transform: translateY(50%); opacity: 0; visibility: hidden; margin-top: 30px; } .banner-area.banner-style-five .banner-slide-counter .swiper-slide.swiper-slide-active .text-fixed { transform: translateY(0px); transition-delay: 500ms; opacity: 0.3; visibility: visible; } .banner-area.banner-style-five .banner-slide-counter .swiper-slide.swiper-slide-active h2 { transform: translateY(0px); transition-delay: 1000ms; opacity: 1; visibility: visible; } .banner-area.banner-style-five .banner-slide-counter .swiper-slide.swiper-slide-active .tags { transform: translateY(0px); transition-delay: 1600ms; opacity: 1; visibility: visible; } .banner-area.banner-style-five .banner-slide-counter .swiper-slide.swiper-slide-active .button { transform: translateY(0px); opacity: 1; visibility: visible; transition-delay: 2100ms; } .banner-area.navigation-between-bottom .content { padding-bottom: 100px; padding-top: 130px; } @media (max-width: 1023px) { .banner-area.banner-style-five { height: 100%; } .banner-area.navigation-between-bottom .content { padding-top: 0px; } .banner-style-five .text-fixed h1 { font-size: 100px; line-height: 1; } .banner-style-five .text-fixed { top: -40px; } .banner-area.banner-style-five .swiper-pagination { right: 30px; top: 40%; } } @media (max-width: 767px) { .banner-style-five .content h2 { font-size: 40px; } .banner-style-five .content .tags { padding-left: 100px; } .banner-style-five .content .tags::after { width: 80px; } .banner-style-five .text-fixed h1 { font-size: 80px; } .banner-style-five .text-fixed { top: -40px; } .banner-area.banner-style-five .swiper-pagination { right: 30px; top: 35%; } } @media (max-width: 450px) { .nav-full-width .side { padding-left: 15px; padding-right: 15px; } .banner-style-five .content h2 { font-size: 36px; } .banner-style-five .content .tags { padding-left: 50px; } .banner-style-five .content .tags::after { width: 40px; } .banner-style-five .text-fixed h1 { font-size: 50px; } .banner-style-five .text-fixed { top: -25px; } .banner-area.banner-style-five .swiper-pagination { display: none; } } .project-details-thumb img { margin-bottom: 60px; } .project-single-tags a { display: inline-block; position: relative; z-index: 1; padding-right: 10px; text-transform: uppercase; color: var(--color-paragraph); } .project-single-tags a::after { position: absolute; right: 0px; bottom: 0px; content: ","; } .project-single-tags a:last-child::after { display: none; } .project-single-tags { margin-bottom: 15px; } .project-single-tags a:hover { color: var(--color-primary); } .project-details-thumb h2 { font-weight: 800; margin: 0px; padding-right: 15%; } .project-author-details ul { margin: 0px; padding: 0px; list-style: none; display: grid; row-gap: 30px; } .project-author-details ul li { display: grid; grid-template-columns: 1fr 3fr; column-gap: 60px; position: relative; z-index: 1; border-top: 1px solid rgb(221, 221, 221); padding-top: 30px; } .project-author-details ul li:first-child { border: none; padding: 0px; } .project-author-details ul li h3 { font-weight: 800; font-size: 20px; margin: 0px; } .project-author-details ul li p { margin: 0px; } .project-author-details ul li .right-info h3 { color: var(--color-paragraph); font-weight: 600; } p.project-inner-tag { font-weight: 700; line-height: 2.3; text-transform: uppercase; } .item-grid-container { display: grid; row-gap: 60px; } .item-grid-container img { margin-top: 50px; } .item-grid-colum { display: grid; grid-template-columns: 1fr 3fr; gap: 60px 50px; } .item-grid-colum h1, .item-grid-colum h2, .item-grid-colum h3, .item-grid-colum h4, .item-grid-colum h5, .item-grid-colum h6 { font-weight: 800; } .related-project-items { border-top: 1px solid rgb(221, 221, 221); } @media only screen and (min-width: 768px) and (max-width: 991px) { .item-grid-container { row-gap: 30px; } .item-grid-colum { grid-template-columns: 1fr; row-gap: 15px; } .project-details-thumb h2 { padding-right: 0px; } .project-details-style-two .thumb-grid { margin-top: 0px; margin-bottom: 40px; } .item-grid-container img { margin-top: 30px; } } @media (max-width: 767px) { .project-details-thumb img { margin-bottom: 30px; } .project-details-thumb h2 { padding-right: 0px; } .project-author-details ul li { grid-template-columns: 1fr; row-gap: 15px; } .item-grid-colum { grid-template-columns: 1fr; row-gap: 0px; } .item-grid-container img { margin-top: 30px; } .item-grid-container { row-gap: 30px; } .project-details-style-two .thumb-grid { margin-top: 0px; margin-bottom: 40px; } } *, ::after, ::before { box-sizing: border-box; } @font-face { font-weight: normal; font-style: normal; font-family: codropsicons; src: url("../fonts/codropsicons/codropsicons.woff") format("woff"), url("../fonts/codropsicons/codropsicons.ttf") format("truetype"); } *, ::after, ::before { box-sizing: border-box; } .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } body { background: rgb(231, 236, 234); color: rgb(116, 119, 123); font-weight: 400; font-size: 1em; font-family: 'centurygothic', sans-serif; } a { color: rgb(44, 193, 133); text-decoration: none; outline: none; } a:hover, a:focus { color: rgb(116, 119, 123); } .support { display: none; color: rgb(239, 81, 137); text-align: left; font-size: 1.5em; max-width: 1200px; margin: 1em auto 0px; padding: 0px; } .no-flexbox .support { display: block; } .hidden { position: absolute; width: 0px; height: 0px; overflow: hidden; opacity: 0; } .container > section { padding: 5em 0px; font-size: 1.25em; min-height: 100%; } p { } .codrops-header { padding: 7em 0px 3em; letter-spacing: -1px; } .codrops-header h1 { max-width: 1200px; margin: 0px auto; font-weight: 800; font-size: 5em; line-height: 1; } .codrops-header h1 span { display: block; font-size: 50%; font-weight: 400; padding-top: 0.325em; color: rgb(189, 194, 201); } .codrops-top { width: 100%; text-transform: uppercase; font-weight: 700; font-size: 0.69em; line-height: 2.2; } .codrops-top a { display: inline-block; padding: 1em 2em; text-decoration: none; letter-spacing: 1px; } .codrops-top span.right { float: right; } .codrops-top span.right a { display: block; float: left; } .codrops-icon::before { margin: 0px 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: codropsicons; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; } .codrops-icon-drop::before { content: ""; } .codrops-icon-prev::before { content: ""; } .related { text-align: center; } .related > a { width: calc(100% - 20px); max-width: 340px; border: 1px solid; display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; } .related a img { max-width: 100%; opacity: 0.8; } .related a:hover img, .related a:active img { opacity: 1; } .related a h3 { margin: 0px; padding: 0.5em 0px 0.3em; max-width: 300px; text-align: left; } @media screen and (max-width: 1280px) { .codrops-header h1 { padding: 0px 0.5em; } .support { padding: 0px 1.5em; } } @media screen and (max-width: 30em) { .container > section { padding: 3em 0px; } .codrops-header { padding: 2em 0px 1em; } .codrops-header h1 { font-size: 3.5em; } } @media screen and (max-width: 25em) { .codrops-icon { font-size: 1.5em; } .codrops-icon span { display: none; } } @font-face { font-weight: normal; font-style: normal; font-family: stroke7pixeden; src: url("../fonts/stroke7pixeden/stroke7pixeden.woff?u58ytb") format("woff"), url("../fonts/stroke7pixeden/stroke7pixeden.ttf?u58ytb") format("truetype"); } .tabs { position: relative; overflow: hidden; margin: 0px auto; width: 100%; font-weight: 300; font-size: 1.25em; } .tabs nav { text-align: center; } .tabs nav ul { position: relative; /* display: flex; */ margin: 0px auto; padding: 0px; max-width: 1200px; list-style: none; flex-flow: wrap; justify-content: center; } .tabs nav ul li { padding: 0px 34px; position: relative; z-index: 1; display: block; margin: 0px; text-align: center; flex: 1 1 0%; } .tabs nav a { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 2.5; color: rgb(205, 205, 205); } .tabs nav a span { text-transform: uppercase; vertical-align: middle; /* font-size: 1em; */ 500 12px freight-sans-pro, font-family: sans-serif;500 12px freight-sans-pro, font-family: sans-serif; font: 500 18px freightneo, sans-serif; letter-spacing: 0.2em; } .tabs nav li.tab-current a { color: rgb(147 210 255); } .tabs nav a:focus { outline: none; } .icon::before { z-index: 10; display: inline-block; margin: 0px 0.4em 0px 0px; vertical-align: middle; text-transform: none; font-weight: normal; font-variant: normal; font-size: 1.3em; font-family: stroke7pixeden; line-height: 1; speak: none; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } .icon-upload::before { content: ""; } .icon-tools::before { content: ""; } .icon-plane::before { content: ""; } .icon-joy::before { content: ""; } .icon-plug::before { content: "îšš"; } .icon-home::before { } .icon-gift::before { content: "î™’"; } .icon-display::before { content: ""; } .icon-date::before { content: "î™ "; } .icon-config::before { content: ""; } .icon-coffee::before { content: ""; } .icon-camera::before { content: ""; } .icon-box::before { content: "î™´"; } .content-wrap { position: relative; } .content-wrap section { display: none; margin: 0px auto; padding: 1em; max-width: 1200px; text-align: center; } .content-wrap section.content-current { display: contents; transform: translate(0px, 0px); } .gallery-image { /* padding-top: 30px; */ width: 100%; height: 300px; object-fit: cover; } .content-wrap section p { margin: 0px; padding: 0.75em 0px; color: rgba(40, 44, 42, 0.05); font-weight: 900; font-size: 4em; line-height: 1; } .no-js .content-wrap section { display: block; padding-bottom: 2em; border-bottom: 1px solid rgba(255, 255, 255, 0.6); } .no-flexbox nav ul { display: block; } .no-flexbox nav ul li { min-width: 15%; display: inline-block; } @media screen and (max-width: 58em) { .tabs nav a.icon span { /* display: none; */ } .tabs nav a::before { margin-right: 0px; } } .tabs-style-bar nav { background: rgba(40, 44, 42, 0.05); } .tabs-style-bar nav ul { border: 4px solid transparent; } .tabs-style-bar nav ul li a { margin: 0px 2px; background-color: rgb(247, 247, 247); color: rgb(116, 119, 123); transition: background-color 0.2s ease 0s, color 0.2s ease 0s; } .tabs-style-bar nav ul li a:hover, .tabs-style-bar nav ul li a:focus { color: rgb(44, 193, 133); } .tabs-style-bar nav ul li a span { text-transform: uppercase; letter-spacing: 1px; font-weight: 500; font-size: 0.6em; } .tabs-style-bar nav ul li.tab-current a { background: rgb(44, 193, 133); color: rgb(255, 255, 255); } .tabs-style-iconbox nav { background: rgba(255, 255, 255, 0.4); } .tabs-style-iconbox nav ul li a { overflow: visible; padding: 2em 0px; line-height: 1; transition: color 0.2s ease 0s; } .tabs-style-iconbox nav ul li a span { font-weight: 700; font-size: 0.7em; } .tabs-style-iconbox nav ul li.tab-current { z-index: 100; } .tabs-style-iconbox nav ul li.tab-current a { background: rgb(255, 255, 255); box-shadow: rgb(255, 255, 255) -1px 0px 0px; } .tabs-style-iconbox nav ul li.tab-current a::after { position: absolute; top: 100%; left: 50%; margin-left: -10px; width: 0px; height: 0px; border-style: solid; border-color: rgb(255, 255, 255) transparent transparent; border-image: initial; border-width: 10px; content: ""; pointer-events: none; } .tabs-style-iconbox nav ul li:first-child::before, .tabs-style-iconbox nav ul li::after { position: absolute; top: 20%; right: 0px; z-index: -1; width: 1px; height: 60%; background: rgba(0, 0, 0, 0.07); content: ""; } .tabs-style-iconbox nav ul li:first-child::before { right: auto; left: 0px; } .tabs-style-iconbox .icon::before { display: block; margin: 0px 0px 0.25em; } .tabs-style-underline nav { background: rgb(29, 29, 29); } .tabs-style-underline nav a { padding: 0.25em 0px 0.5em; transition: color 0.2s ease 0s; } .tabs-style-underline nav li:last-child a { } .tabs-style-underline nav li a::after { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 6px; background: rgb(61, 145, 198); content: ""; transition: transform 0.3s ease 0s; transform: translate3d(0px, 150%, 0px); } .tabs-style-underline nav li.tab-current a::after { transform: translate3d(0px, 0px, 0px); } .tabs-style-underline nav a span { font-weight: 700; } .tabs-style-linetriangle nav a { overflow: visible; border-bottom: 1px solid rgba(0, 0, 0, 0.2); transition: color 0.2s ease 0s; } .tabs-style-linetriangle nav a span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1em; } .tabs-style-linetriangle nav li.tab-current a::after, .tabs-style-linetriangle nav li.tab-current a::before { position: absolute; top: 100%; left: 50%; width: 0px; height: 0px; border: solid transparent; content: ""; pointer-events: none; } .tabs-style-linetriangle nav li.tab-current a::after { margin-left: -10px; border-width: 10px; border-top-color: rgb(231, 236, 234); } .tabs-style-linetriangle nav li.tab-current a::before { margin-left: -11px; border-width: 11px; border-top-color: rgba(0, 0, 0, 0.2); } @media screen and (max-width: 58em) { .tabs-style-linetriangle nav { font-size: 0.6em; } } .tabs-style-topline { max-width: 1200px; } .tabs-style-topline nav li { border: 1px solid rgba(40, 44, 42, 0.1); } .tabs-style-topline nav li:not(:last-child) { border-right: none; } .tabs-style-topline nav li.tab-current { border-top-color: rgb(44, 193, 133); border-bottom: none; } .tabs-style-topline nav a { padding: 0.65em 0px 0.5em; background: rgba(40, 44, 42, 0.05); color: rgb(116, 119, 123); line-height: 1; transition: color 0.2s ease 0s; } .tabs-style-topline nav a:hover, .tabs-style-topline nav a:focus { color: rgb(44, 193, 133); } .tabs-style-topline nav li.tab-current a { background: none; box-shadow: rgb(44, 193, 133) 0px 3px 0px inset; color: rgb(44, 193, 133); } .tabs-style-topline .icon::before { display: block; margin: 0px; } .tabs-style-topline nav a span { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 0.5em; } .tabs-style-iconfall { overflow: visible; } .tabs-style-iconfall nav a { display: inline-block; overflow: visible; padding: 1em 0px 2em; color: rgb(116, 119, 123); line-height: 1; transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; } .tabs-style-iconfall nav a:hover, .tabs-style-iconfall nav a:focus, .tabs-style-iconfall nav li.tab-current a { color: rgb(44, 193, 133); } .tabs-style-iconfall nav a span { font-weight: 700; } .tabs-style-iconfall nav li::before { position: absolute; bottom: 1em; left: 50%; margin-left: -20px; width: 40px; height: 4px; background: rgb(44, 193, 133); content: ""; opacity: 0; transition: transform 0.2s ease-in 0s; transform: scale3d(0, 1, 1); } .tabs-style-iconfall nav li.tab-current::before { opacity: 1; transform: scale3d(1, 1, 1); } .tabs-style-iconfall .icon::before { display: block; margin: 0px 0px 0.35em; opacity: 0; transition: transform 0.2s ease 0s, opacity 0.2s ease 0s; transform: translate3d(0px, -100px, 0px); pointer-events: none; } .tabs-style-iconfall nav li.tab-current .icon::before { opacity: 1; transform: translate3d(0px, 0px, 0px); } @media screen and (max-width: 58em) { .tabs-style-iconfall nav li .icon::before { opacity: 1; transform: translate3d(0px, 0px, 0px); } } .tabs-style-linemove nav { background: rgb(255, 255, 255); } .tabs-style-linemove nav li:last-child::before { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 4px; background: rgb(44, 193, 133); content: ""; transition: transform 0.3s ease 0s; } .tabs-style-linemove nav li:first-child.tab-current ~ li:last-child::before { transform: translate3d(-400%, 0px, 0px); } .tabs-style-linemove nav li:nth-child(2).tab-current ~ li:last-child::before { transform: translate3d(-300%, 0px, 0px); } .tabs-style-linemove nav li:nth-child(3).tab-current ~ li:last-child::before { transform: translate3d(-200%, 0px, 0px); } .tabs-style-linemove nav li:nth-child(4).tab-current ~ li:last-child::before { transform: translate3d(-100%, 0px, 0px); } .tabs-style-linemove nav a { padding: 1em 0px; color: rgb(116, 119, 123); line-height: 1; transition: color 0.3s ease 0s, transform 0.3s ease 0s; } .tabs-style-linemove nav li.tab-current a { color: rgb(44, 193, 133); transform: translate3d(0px, 8px, 0px); } .tabs-style-linemove nav a span { font-weight: 700; } .tabs-style-line nav ul { padding: 0px 2em; max-width: none; box-shadow: rgb(209, 211, 210) 0px -2px inset; } .tabs-style-line nav a { padding: 0.7em 0.4em; box-shadow: rgb(209, 211, 210) 0px -2px inset; color: rgb(116, 119, 123); text-align: left; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 0.8em; line-height: 1; transition: color 0.3s ease 0s, box-shadow 0.3s ease 0s; } .tabs-style-line nav a:hover, .tabs-style-line nav a:focus { box-shadow: rgb(116, 119, 123) 0px -2px inset; } .tabs-style-line nav li.tab-current a { box-shadow: rgb(44, 193, 133) 0px -2px inset; color: rgb(44, 193, 133); } @media screen and (max-width: 58em) { .tabs-style-line nav ul { display: block; box-shadow: none; } .tabs-style-line nav ul li { display: block; flex: 0 0 auto; } } .tabs-style-circle { overflow: visible; } .tabs-style-circle nav li::before { position: absolute; top: 50%; left: 50%; margin: -60px 0px 0px -60px; width: 120px; height: 120px; border: 1px solid rgb(44, 193, 133); border-radius: 50%; content: ""; opacity: 0; transition: transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0s, opacity 0.2s 0s; } @media screen and (max-width: 58em) { .tabs-style-circle nav li::before { margin: -40px 0px 0px -40px; width: 80px; height: 80px; } } .tabs-style-circle nav li.tab-current::before { opacity: 1; transform: scale3d(1, 1, 1); } .tabs-style-circle nav a { overflow: visible; color: rgb(116, 119, 123); font-weight: 700; font-size: 0.9em; line-height: 1.1; transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; } .tabs-style-circle nav a span { display: inline-block; } .tabs-style-circle nav a span, .tabs-style-circle .icon::before { transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; } .tabs-style-circle nav a:hover, .tabs-style-circle nav a:focus { color: rgb(74, 74, 75); } .tabs-style-circle nav li.tab-current a { color: rgb(44, 193, 133); } .tabs-style-circle nav li.tab-current a span { transform: translate3d(0px, 4px, 0px); } .tabs-style-circle .icon::before { display: block; margin: 0px; pointer-events: none; } .tabs-style-circle nav li.tab-current .icon::before { transform: translate3d(0px, -4px, 0px); } .tabs-style-shape { max-width: 1200px; } .tabs-style-shape nav ul li { margin: 0px 3em; } .tabs-style-shape nav ul li:first-child { margin-left: 0px; } .tabs-style-shape nav ul li.tab-current { z-index: 100; } .tabs-style-shape nav li a { overflow: visible; margin: 0px -3em 0px 0px; padding: 0px; color: rgb(255, 255, 255); font-weight: 500; } .tabs-style-shape nav li:first-child a span { padding-left: 2em; border-radius: 30px 0px 0px; } .tabs-style-shape nav li:last-child a span { padding-right: 2em; border-radius: 0px 30px 0px 0px; } .tabs-style-shape nav li a svg { position: absolute; left: 100%; margin: 0px; width: 3em; height: 100%; fill: rgb(189, 194, 201); } .tabs-style-shape nav li a svg:nth-child(2), .tabs-style-shape nav li:last-child a svg { right: 100%; left: auto; transform: scale3d(-1, 1, 1); } .tabs-style-shape nav li a span { display: block; overflow: hidden; padding: 0.65em 0px; background-color: rgb(189, 194, 201); text-overflow: ellipsis; white-space: nowrap; } .tabs-style-shape nav li a:hover span { background-color: rgb(44, 193, 133); } .tabs-style-shape nav li a:hover svg { fill: rgb(44, 193, 133); } .tabs-style-shape nav li a svg { pointer-events: none; } .tabs-style-shape nav li a svg use { pointer-events: auto; } .tabs-style-shape nav li.tab-current a span, .tabs-style-shape nav li.tab-current a svg { transition: none 0s ease 0s; } .tabs-style-shape nav li.tab-current a span { background: rgb(255, 255, 255); } .tabs-style-shape nav li.tab-current a svg { fill: rgb(255, 255, 255); } .tabs-style-shape .content-wrap { background: rgb(255, 255, 255); } @media screen and (max-width: 58em) { .tabs-style-shape nav ul { display: block; padding-top: 1.5em; } .tabs-style-shape nav ul li { display: block; margin: -1.25em 0px 0px; flex: 0 0 auto; } .tabs-style-shape nav ul li a { margin: 0px; } .tabs-style-shape nav ul li svg { display: none; } .tabs-style-shape nav ul li a span { box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px; line-height: 1; padding: 1.25em 0px 2em !important; border-radius: 30px 30px 0px 0px !important; } .tabs-style-shape nav ul li:last-child a span { padding: 1.25em 0px !important; } .tabs-style-shape nav ul li.tab-current { z-index: 1; } } .tabs-style-linebox nav ul li { margin: 0px 0.5em; flex: 0 0 auto; } .tabs-style-linebox nav a { padding: 0px 1.5em; color: rgb(116, 119, 123); font-weight: 700; transition: color 0.3s ease 0s; } .tabs-style-linebox nav a:hover, .tabs-style-linebox nav a:focus { color: rgb(44, 193, 133); } .tabs-style-linebox nav li.tab-current a { color: rgb(255, 255, 255); } .tabs-style-linebox nav a::after { position: absolute; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%; background: rgb(210, 216, 214); content: ""; transition: background-color 0.3s ease 0s, transform 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; transform: translate3d(0px, 100%, 0px) translate3d(0px, -3px, 0px); } .tabs-style-linebox nav li.tab-current a::after { transform: translate3d(0px, 0px, 0px); } .tabs-style-linebox nav a:hover::after, .tabs-style-linebox nav a:focus::after, .tabs-style-linebox nav li.tab-current a::after { background: rgb(44, 193, 133); } @media screen and (max-width: 58em) { .tabs-style-linebox nav ul { display: block; box-shadow: none; } .tabs-style-linebox nav ul li { display: block; flex: 0 0 auto; } } .tabs-style-flip { max-width: 1200px; } .tabs-style-flip nav a { padding: 0.5em 0px; color: rgb(44, 193, 133); transition: color 0.3s ease 0s; } .tabs-style-flip nav a:hover, .tabs-style-flip nav a:focus, .tabs-style-flip nav li.tab-current a { color: rgb(116, 119, 123); } .tabs-style-flip nav a span { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 0.625em; } .tabs-style-flip nav a::after { position: absolute; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%; background-color: rgb(240, 240, 240); content: ""; transition: transform 0.3s ease 0s, background-color 0.3s ease 0s; transform: perspective(900px) rotate3d(1, 0, 0, 90deg); transform-origin: 50% 100%; perspective-origin: 50% 100%; } .tabs-style-flip nav li.tab-current a::after { background-color: rgb(255, 255, 255); transform: perspective(900px) rotate3d(1, 0, 0, 0deg); } .tabs-style-flip .content-wrap { background: rgb(255, 255, 255); } .tabs-style-fillup nav ul li a { padding: 1.9em 0px; border-right: 1px solid rgb(44, 193, 133); line-height: 1; transition: color 0.3s ease 0s; backface-visibility: hidden; } .tabs-style-fillup nav ul li:last-child a { border: none; } .tabs-style-fillup nav ul li.tab-current { z-index: 100; } .tabs-style-fillup nav ul li.tab-current a { color: rgb(255, 255, 255); } .tabs-style-fillup nav ul li a::after { position: absolute; top: 0px; left: 0px; z-index: -1; width: 100%; height: calc(100% + 1px); border: 1px solid rgb(44, 193, 133); background: rgb(44, 193, 133); content: ""; transition: transform 0.3s ease 0s; transform: translate3d(0px, 100%, 0px); } .tabs-style-fillup nav ul li.tab-current a::after { transform: translate3d(0px, 0px, 0px); } .tabs-style-fillup nav ul li a span, .tabs-style-fillup .icon::before { transition: transform 0.5s ease 0s; transform: translate3d(0px, 5px, 0px); } .tabs-style-fillup nav ul li a span { display: block; font-weight: 700; font-size: 0.7em; line-height: 1.5; } .tabs-style-fillup .icon::before { display: block; margin: 0px; } .tabs-style-fillup nav ul li.tab-current a span, .tabs-style-fillup li.tab-current .icon::before { transform: translate3d(0px, -10px, 0px); } .tabs-style-tzoid { max-width: 1200px; } .tabs-style-tzoid nav { padding: 0px 1em; } .tabs-style-tzoid nav ul li { backface-visibility: hidden; } .tabs-style-tzoid nav ul li a { padding: 0px 1.5em 0px 0.3em; color: rgb(13, 149, 100); transition: color 0.2s ease 0s; } @media screen and (max-width: 54em) { .tabs-style-tzoid nav ul li a { padding: 0px 0.5em 0px 0.3em; } } .tabs-style-tzoid nav ul li a:hover, .tabs-style-tzoid nav ul li a:focus { color: rgb(255, 255, 255); } .tabs-style-tzoid nav ul li.tab-current a, .tabs-style-tzoid nav ul li.tab-current a:hover { color: rgb(44, 193, 133); } .tabs-style-tzoid nav ul li a span { font-weight: 500; font-size: 0.75em; } .tabs-style-tzoid nav ul li a::after { position: absolute; inset: 0px; z-index: -1; outline: transparent solid 1px; border-radius: 10px 10px 0px 0px; background: rgb(44, 193, 133); box-shadow: rgba(0, 0, 0, 0.05) 0px -3px 3px inset; content: ""; transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); transform-origin: 0px 0px; backface-visibility: hidden; } .tabs-style-tzoid nav ul li.tab-current a::after, .tabs-style-tzoid .content-wrap { background: rgb(255, 255, 255); box-shadow: none; } .tabs-style-circlefill { max-width: 700px; border: 1px solid rgb(44, 193, 133); } .tabs-style-circlefill nav ul li { overflow: hidden; border-right: 1px solid rgb(44, 193, 133); } .tabs-style-circlefill nav li a { padding: 1.5em 0px; color: rgb(255, 255, 255); font-size: 1.25em; } .tabs-style-circlefill nav li:first-child { border-left: none; } .tabs-style-circlefill nav li:last-child { border: none; } .tabs-style-circlefill nav li::before { position: absolute; top: 50%; left: 50%; margin: -40px 0px 0px -40px; width: 80px; height: 80px; border: 1px solid rgb(44, 193, 133); border-radius: 50%; background: rgb(44, 193, 133); content: ""; transition: transform 0.3s ease 0s; } .tabs-style-circlefill nav li.tab-current::before { transform: scale3d(2.5, 2.5, 1); } .tabs-style-circlefill nav a { transition: color 0.3s ease 0s; } .tabs-style-circlefill nav a span { display: none; } .tabs-style-circlefill nav li.tab-current a { color: rgb(255, 255, 255); } .tabs-style-circlefill .icon::before { display: block; margin: 0px; pointer-events: none; } .tabs-style-circlefill .content-wrap { border-top: 1px solid rgb(44, 193, 133); } #body { } @media only screen and (min-width: 768px) { #body { } } @media only screen and (max-width: 767px) { #body { padding: 1px; } } #body .out-wrap { display: inline-grid; position: relative; box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 10px -2px; width: 90%; margin: 20px auto; justify-items: center; } #body .out-wrap #tabs { width: max-content; border-bottom: 0px; margin: 0px -50px 20px; display: flex; overflow: scroll hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; flex-wrap: nowrap !important; } #body .out-wrap #tabs::-webkit-scrollbar { display: none; } #body .out-wrap #tabs li { width: auto; white-space: nowrap; flex: 1 1 0%; padding: 10px; } #body .out-wrap #tabs li a { border: 0px; border-radius: 0px; cursor: pointer; margin: 0px; color: rgb(255, 255, 255); text-transform: uppercase; } #body .out-wrap #tabs li a:hover { background: rgb(221, 221, 221); color: rgb(48, 48, 48); } #body .out-wrap #tabs li.active a { background: rgb(255, 255, 255); color: rgb(61, 90, 104); } #body .out-wrap .tab-content { overflow: hidden !important; } .upcoming span { color: rgb(255, 255, 255); display: inline-block; background: #de9645; text-transform: none; padding: 5px 30px; border-radius: 5px; margin-bottom: 15px; font-size: 16px; } .link .date { display: block; font-size: 20px; padding: 20px 30px 25px; font-weight: 900; line-height: 1.2; border-right: 1px solid rgb(134, 134, 134); } .home-blog-two .content a{ text-transform: capitalize; color: #ffffff; /* font-size: 18px; */ } .home-blog-two .content .button-regular{ text-transform:capitalize; color: #ffffff; font-size: 16px; font-weight: 500; } @media screen and (max-width: 58em) { .tabs .navigation{ order:1!important; } .tabs .content-wrap{ order:2!important; } } .social-icons .item{ display: inline-block; height: 45px; width: 45px; text-align: center; line-height: 46px; border-radius: 50%; margin-right: 10px; color: var(--white); /* background: #5b80c5; */ } .social-icons .item:hover{ display: inline-block; height: 45px; width: 45px; text-align: center; line-height: 46px; border-radius: 50%; margin-right: 10px; color: #000000; background: #fff; } .accrdion-portfolio-area .accordion-overlay a{ text-transform: uppercase; font-weight: 500; font-family: var(--font-heading); } .slider-wrapper .slide-navigation__txt li span{ font-weight: 500; font-family: var(--font-heading); } .home-blog-two .content a { font-family: var(--font-default); } .contact-form-style-one label{ padding-left: 20px; color: #fff; }