@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');
:root {
--primary-color: #fcf9ce;
--secondary-color: #ffe5e5;
--third-color: #666;
--primary-bg-color: #060707;
--primary-black: #000;
--primary-white: #fff;
--primary-border: #313130;
--secondary-bg-color: #070707;
--primary-hover: #00247e;
}
/**
Theme Name:
Theme URI:
Description:
Author: Greyhound-Tech-Solutions
Author URI:
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
industrial, bootstrap, bootstrap HTML5 template, bootstrap responsive theme, business, clean, corporate, creative, css3, finance, html5, portfolio, responsive
Version: 1.0
*/
/**
1. CSS RESET
2. GENERAL
3. HEADER
4. HEADINGS
5. BUTTONS
*/
/*------------------------------------------------*/
/*--------------------[CSS RESET ]-------------------*/
/*------------------------------------------------*/
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
html {
scroll-behavior: smooth;
}
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: 0;
padding: 0;
border: 0;
outline: 0;
}
img {
max-width: 100%;
}
a:hover, a:focus, a:active {
text-decoration: none;
outline: none !important;
border: 0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input:focus {
outline: none;
}
input::-moz-focus-inner {
border: 0;
display: none;
}
input::-webkit-focus-inner {
border: 0;
display: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
}
::-webkit-input-placeholder {
color: var(--third-color);
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder {
color: var(--third-color);
opacity: 1;
/* Firefox */
}
::-ms-input-placeholder {
color: var(--third-color);
opacity: 1;
/* Firefox */
}
::placeholder {
color: var(--third-color);
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: var(--third-color);
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: var(--third-color);
}
table {
border-collapse: collapse;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
ul,
li {
margin: 0;
padding: 0;
}
figure {
margin: 0px;
}
form {
position: relative;
}
.form-control:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: 0 0 0;
box-shadow: 0 0 0;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
font-size: inherit;
color: inherit;
font-weight: inherit;
line-height: inherit;
}
h1:hover a,
h2:hover a,
h3:hover a,
h4:hover a,
h5:hover a,
h6:hover a {
font-size: inherit;
color: inherit;
font-weight: inherit;
}
hr {
margin: 0;
padding: 0;
border-color: var(--primary-black);
}
ul {
list-style-type: none;
}
li {
list-style: none;
position: relative;
}
a,
button {
position: relative;
}
a:hover, a:focus,
button:hover,
button:focus {
outline: 0;
text-decoration: none;
}
input,
textarea,
button {
border: 0px;
}
/*------------------------------------------------*/
/*--------------------[GENERAL ]-------------------*/
/*------------------------------------------------*/
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white a {
color: var(--primary-white) !important;
}
/* background */
.bg-cover {
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-position: center;
}
.bg-center {
background-position: center;
}
.bg-contain {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: relative;
}
.bg-right {
background-repeat: no-repeat;
background-position: right;
}
.bg-left {
background-repeat: no-repeat;
background-position: left;
}
.bg-bottom {
background-repeat: no-repeat;
background-position: bottom;
}
.bg-top {
background-repeat: no-repeat;
background-position: top;
}
.lr-9 [class*="col"] {
padding-left: 9px;
padding-right: 9px;
}
.bg-overlay {
position: relative;
z-index: 1;
}
.bg-overlay::before {
position: absolute;
left: 0;
content: "";
top: 0;
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
}
.fix {
position: relative;
overflow: hidden;
z-index: 1;
}
.shape {
position: absolute;
}
button {
border: none;
}
.equal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.equal > [class*="col-"] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.overlay {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 40%;
opacity: 0;
visibility: hidden;
}
.overlay.active {
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 100%;
content: "";
background-color: var(--primary-black);
z-index: 99;
opacity: 0.5;
visibility: visible;
}
img.alignright {
float: right;
margin: 0 0 1em 1em;
}
img.alignleft {
float: left;
margin: 0 1em 1em 0;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
a img.alignright {
float: right;
margin: 0 0 1em 1em;
}
a img.alignleft {
float: left;
margin: 0 1em 1em 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
/*rtl:ignore*/
float: left;
/*rtl:ignore*/
margin-right: 1.5em;
margin-bottom: 1.5em;
}
.alignright {
/*rtl:ignore*/
float: right;
/*rtl:ignore*/
margin-left: 1.5em;
margin-bottom: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;
}
/* --------------------------------------------
Template Default Fonts & Fonts Styles
---------------------------------------------- */
body {
font-family: "Hanken Grotesk",sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: var(--primary-black);
background-color: var(--secondary-bg-color);
}
.wrapper{
position: relative;
width: 100%;
overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Hanken Grotesk", sans-serif;
margin: 0px;
font-weight: 600;
color: var(--primary-black);
letter-spacing: 1px;
}
h1 {
font-size: 60px;
line-height: 70px;
letter-spacing: 1px;
}
h1.fs-lg {
font-size: 80px;
line-height: 115%;
letter-spacing: -4px;
}
h2 {
font-size: 36px;
line-height: 130%;
}
h3 {
font-size: 24px;
line-height: 36px;
}
h4 {
font-size: 1.25rem;
line-height: 1.875rem;
}
h5 {
font-size: 1.125rem;
line-height: 1.88rem;
}
h6 {
font-size: 0.875rem;
line-height: 1.5rem;
}
a {
text-decoration: none;
font-weight: 400;
outline: none !important;
cursor: pointer;
font-size: 16px;
line-height: 28px;
color: var(--primary-white);
font-family: "Hanken Grotesk",sans-serif;
cursor: pointer;
}
p {
margin: 0px;
}
@-webkit-keyframes border-transform {
0%,
100% {
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
}
70% {
border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
}
}
.home-main-contant-style{
padding: 120px 0;
}
.home-main-contant-style-2{
padding-top: 120px;
}
.home-main-contant-style-3{
padding-bottom: 120px;
}
.home-main-contant-style-4{
padding-bottom: 60px;
}
.home-main-contant-style-5{
padding-top: 60px;
}
.home-main-contant-style-6{
padding:120px 0 190px 0;
}
section.skills-block.home-main-contant-style-2 {
padding-top: 180px;
}
.home-main-contant-style-7 {
padding-top: 210px;
}
.border-radius-10{
border-radius: 10px;
}
.border-radius-20{
border-radius: 20px;
}
.border-radius-30{
border-radius: 30px;
}
.mb-30{
margin-bottom: 30px;
}
/*------------------------------------------------*/
/*--------------------[HEADER ]-------------------*/
/*------------------------------------------------*/
.navigation.nav-menu > li > a {
margin: 0; }
@media (min-width: 1920px){
.header-main-block .container, .banner-block .full-width-block .container {
max-width: 1630px;
}}
@media (min-width: 1400px){
.container,.full-width-block.common-page .container{
max-width: 1350px;
}
}
.sticky-header:not(.header-submenu).is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--primary-white);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
z-index: 9999;
-webkit-transition: 0.1s ease;
-moz-transition: 0.1s ease;
-ms-transition: 0.1s ease;
-o-transition: 0.1s ease;
transition: 0.1s ease;
padding-top: 0;
margin: 0;
}
.sticky-header:not(.header-submenu).is-sticky .nav-header,
.sticky-header:not(.header-submenu).is-sticky .topbar ul.topbarnav
{
padding-top: 20px;
}
.sticky-header:not(.header-submenu).is-sticky .nav-search-inner input[type="text"], .sticky-header:not(.header-submenu).is-sticky .nav-search-inner input[type="search"]{
line-height: 40px!important;
}
.sticky-header:not(.header-submenu).is-sticky .nav-search-close-button{
top: 6px;
}
.sticky-header:not(.header-submenu).is-sticky .nav-menu > li > a {
padding-left: 20px;
padding-right: 20px;
padding-top: 14px;
padding-bottom: 30px;
}
.sticky-header:not(.header-submenu).is-sticky .topbar ul.topbarnav,
.sticky-header:not(.header-submenu).is-sticky .nav-cart,
.sticky-header:not(.header-submenu).is-sticky .nav-search{
padding-top: 14px;
}
.header-main-block.header-style.transparent-header-style.sticky-header.is-sticky {
background: var(--primary-white);
}
.header-main-block.header-style.transparent-header-style.sticky-header {
background: transparent;
}
.sticky-header:not(.header-submenu).is-sticky .topbar ul.topbarnav li ul{
top: 49px;
}
.sticky-header:not(.header-submenu).is-sticky .nav-menu > li > a {
line-height: 50px;
}
.header-style .nav-header {
padding-top: 30px;
}
.header-style .nav-menu > li > a {
line-height: 90px;
}
#scrollUp {
background-color:rgba(255, 255, 255, 0.7);
border-radius: 50%;
bottom: 5%;
color:inherit;
height: 40px;
width: 40px;
position: fixed;
right: 1%;
text-align: center;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: .3s ease-out;
-o-transition: .3s ease-out;
transition: .3s ease-out;
}
.sticky-header:not(.header-submenu).is-sticky {
background: #f8f6df;
}
.nav-brand i {
color: var(--primary-color);
}
.nav-menu > li > a {
text-transform: capitalize;
display: inline-block;
text-decoration: none;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
font-weight: bold;
}
.cd-header-block.sticky {
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: var(--primary-white);
z-index: 9999;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.navigation-portrait .nav-menu > li > a {
width: 100%;
height: auto;
padding: 10px 10px 10px 30px;
}
.header-main-block {
background-color: transparent;
margin-top: 20px;
position: absolute;
z-index: 99;
width: 100%;
}
.cd-header-style2 .nav-brand img {
margin: 13% 0;
}
.navigation {
width: 100%;
display: table;
position: relative;
font-family: inherit;
}
.navigation * {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.navigation-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 19998;
}
.navigation-hidden {
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.align-to-right {
float: right;
}
.nav-header {
float: left;
}
.navigation-hidden .nav-header {
display: none;
}
.nav-brand {
width: auto;
height: auto;
display: inline-block;
line-height: 70px;
}
.nav-brand img {
bottom: 0;
left: 0;
display: block;
}
.nav-brand:hover,
.nav-brand:focus {
color: inherit;
}
.navigation-portrait .nav-brand {
line-height: 48px;
}
.nav-logo > img {
height: 48px;
margin: 11px auto;
padding: 0 15px;
float: left;
}
.nav-logo:focus > img {
outline: initial;
}
.navigation-portrait .nav-logo > img {
height: 36px;
margin: 6px auto 6px 15px;
padding: 0;
}
.nav-toggle {
width: 30px;
height: 30px;
padding: 6px 2px 0;
position: absolute;
top: 50%;
margin-top: -12px;
right: 0;
display: none;
cursor: pointer;
}
.nav-toggle:before {
content: "";
position: absolute;
width: 24px;
height: 2px;
background-color: var(--primary-black);
border-radius: 10px;
box-shadow: 0 0.5em 0 0 var(--primary-black), 0 1em 0 0 var(--primary-black);
}
.navigation-portrait .nav-toggle {
display: block!important;
}
.navigation-portrait .nav-menus-wrapper {
width: 320px;
height: 100%;
top: 0;
left: -400px;
position: fixed;
background-color: var(--primary-white);
z-index: 20000;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-transition-duration: .8s;
transition-duration: .8s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right {
left: auto;
right: -400px;
}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open {
left: 0;
}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right.nav-menus-wrapper-open {
left: auto;
right: 0;
}
.nav-menus-wrapper-close-button {
width: 30px;
height: 40px;
margin: 10px 7px;
display: none;
float: right;
color: inherit;
font-size: 26px;
cursor: pointer;
}
.navigation-portrait .nav-menus-wrapper-close-button {
display: block;
}
.nav-menu {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
background: var(--primary-bg-color);
}
.navigation-portrait .nav-menu {
width: 100%;
}
.navigation-landscape .nav-menu.nav-menu-centered {
float: none;
text-align: left;
}
.navigation-landscape .nav-menu.nav-menu-centered > li {
float: none;
}
.nav-menu > li {
display: inline-block;
float: left;
text-align: left;
}
.navigation-portrait .nav-menu > li {
width: 100%;
position: relative;
border-top: solid 1px #f0f0f0;
}
.navigation-portrait .nav-menu > li:last-child {
border-bottom: solid 1px #f0f0f0;
}
.nav-menu + .nav-menu > li:first-child {
border-top: none;
}
.navigation-portrait .nav-menu > li > a {
width: 100%;
height: auto;
padding: 12px 15px 12px 26px;
}
.nav-menu > li:hover > a,
.nav-menu > li.active > a,
.nav-menu > li.focus > a{
color: var(--primary-color);
}
.nav-menu > li > a > i,
.nav-menu > li > a > [class*="ion-"] {
width: 18px;
height: 16px;
line-height: 16px;
-webkit-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
}
.nav-menu > li > a > [class*="ion-"] {
width: 16px;
display: inline-block;
-webkit-transform: scale(1.8);
-ms-transform: scale(1.8);
transform: scale(1.8);
}
.navigation-portrait .nav-menu.nav-menu-social {
width: 100%;
text-align: center;
}
.nav-menu.nav-menu-social > li {
text-align: center;
float: none;
border: none !important;
}
.navigation-portrait .nav-menu.nav-menu-social > li {
width: auto;
}
.nav-menu.nav-menu-social > li > a > [class*="ion-"] {
font-size: 12px;
}
.nav-menu.nav-menu-social > li > a > .fa {
font-size: 14px;
}
.navigation-portrait .nav-menu.nav-menu-social > li > a {
padding: 15px;
}
.submenu-indicator {
margin-left: 5px;
margin-top: 4px;
float: right;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.navigation-portrait .submenu-indicator {
width: 54px;
height: 44px;
margin-top: 0;
position: absolute;
top: 0;
right: 0;
text-align: center;
z-index: 20000;
}
.submenu-indicator-chevron {
height: 6px;
width: 6px;
display: flex;
border-style: solid;
border-width: 0 2px 2px 0;
border-color: transparent #70798b #70798b transparent;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: border 0.3s;
transition: border 0.3s;
margin:3px 0 0 5px;
}
.navigation-portrait .submenu-indicator-chevron {
position: absolute;
top: 18px;
left: 24px;
}
.nav-menu > li:hover > a .submenu-indicator-chevron,
.nav-menu > .active > a .submenu-indicator-chevron,
.nav-menu > .focus > a .submenu-indicator-chevron {
border-color: transparent var(--primary-color) var(--primary-color) transparent;
}
.navigation-portrait .submenu-indicator.submenu-indicator-up {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.nav-overlay-panel {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: none;
z-index: 19999;
}
.no-scroll {
width: 100%;
height: 100%;
overflow: hidden;
}
/* SEARCH PANEL */
.header-contact {
float: right;
z-index: 99;
}
.header-contact {
float: right;
z-index: 99;
text-align: right;
cursor: pointer;
background: var(--secondary-bg-color);
padding: 15px 32px;
color: var(--primary-white);
margin-top: 20px;
border-radius: 10px;
}
.header-contact:hover {
background: var(--primary-color);
}
.header-contact:hover a , .header-contact:hover a .sm_svg,
.portfolio-block .portfolio-contact-btn a:hover .sm_svg{
color: var(--primary-black);
}
.navigation-portrait .nav-search {
padding: 0 10px;
margin-right: 55px;
}
.nav-cart{
margin-right: 0;
position:relative;
}
.navigation-hidden .nav-search {
display: none;
}
.navigation-portrait .nav-search-button {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 22px;
}
.nav-search > form {
width: 100%;
height: 100%;
padding: 0 auto;
display: none;
position: absolute;
left: 0;
top: 0;
background-color: var(--primary-white);
z-index: 99999;
}
.nav-search-close-button {
width: 28px;
height: 28px;
display: block;
position: absolute;
right: 0;
top: 30px;
line-height: normal;
color: inherit;
font-size: 20px;
cursor: pointer;
text-align: center;
}
.navigation-portrait .nav-search-close-button {
top: 10px;
right: 14px;
}
/* NAVIGATION BUTTON */
.nav-button {
margin: 18px 15px 0;
padding: 8px 14px;
display: inline-block;
color: var(--primary-white);
font-size: 14px;
text-align: center;
text-decoration: none;
border-radius: 4px;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.nav-button:hover,
.nav-button:focus {
color: var(--primary-white);
text-decoration: none;
opacity: 1;
}
.navigation-portrait .nav-button {
width: calc(100% - 52px);
margin: 17px 26px;
}
.always-btn-show {
background-color: transparent;
border: medium none;
color: var(--primary-black);
cursor: pointer;
float: right;
font-size: 30px;
margin-top: 20px;
}
/*------------------------------------------------*/
/*--------------[PAGE HEADING BREADCRUMB]-----------*/
/*------------------------------------------------*/
.breadcrumb a {
font-size: 20px;
color: var(--primary-black);
}
.page-heading .breadcrumb > a:hover{
text-decoration: underline;
}
.delimeter {
padding: 0 15px;
font-size: 20px;
font-weight: bold;
}
.breadcrumb {
margin-top: 15px;
margin-bottom: 0;
}
.breadcrumb .current {
font-size: 20px;
font-weight: bold;
}
/*------------------------------------------------*/
/*--------------------[HEADINGS]-------------------*/
/*------------------------------------------------*/
.section-head {
position: relative;
}
.section-head .heading-bg {
font-size: 14px;
letter-spacing: 0px;
color: var(--primary-color);
text-transform: uppercase;
border: 1px solid var(--primary-color);
padding: 3px 8px;
border-radius: 5px;
font-weight: 600;
}
.section-head .section-title {
margin-top: 10px;
font-size: 35px;
line-height: 44px;
color: var(--primary-black);
font-weight: 600;
}
.heading-1 {
font-size: 40px;
line-height: 33px;
color: var(--primary-black);
font-weight: 700;
font-family: "Hanken Grotesk", sans-serif;
}
.heading-2 {
font-size: 30px;
line-height: 39px;
font-weight: 500;
font-family: "Hanken Grotesk", sans-serif;
}
.heading-2.white {
color: var(--primary-white);
}
.about-block .about-content h1 {
line-height: 53px;
color: var(--primary-white);
font-size: 40px;
letter-spacing: 1px;
text-align: center;
margin-top: 20px;
}
.about-content h1 {
line-height: 53px;
color: var(--primary-white);
font-size: 40px;
letter-spacing: 0px;
text-align: left;
margin-top: 20px;
}
.about-block h2.section-heading {
border: 1px solid var(--primary-border);
max-width: max-content;
border-radius: 30px 30px;
padding: 5px 28px;
font-size: 17px;
margin: 0 auto;
color: var(--primary-color);
}
h2.section-heading {
border: 1px solid var(--primary-border);
max-width: max-content;
border-radius: 30px 30px;
padding: 5px 28px;
font-size: 17px;
color: var(--primary-color);
}
/*------------------------------------------------*/
/*--------------------[BUTTONS]-------------------*/
/*------------------------------------------------*/
.button {
display: inline-block;
font-size: 16px;
font-weight: 700;
}
.button.button-primary {
color: var(--primary-white);
background-color: var(--primary-color);
padding: 15px 40px;
position: relative;
z-index: 2;
border-radius: 5px;
}
.button.button-primary:hover, .button.button-primary:focus {
-webkit-transition: -webkit-box-shadow 0.3s ease-in;
transition: -webkit-box-shadow 0.3s ease-in;
transition: box-shadow 0.3s ease-in;
transition: box-shadow 0.3s ease-in, -webkit-box-shadow 0.3s ease-in;
}
.button.button-minimal {
font-size: 16px;
line-height: 27px;
color: var(--primary-balck);
font-weight: 500;
}
.button.button-minimal .icon {
font-size: 14px;
margin-left: 5px;
}
.button.play-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 120px;
height: 120px;
background-color: var(--primary-color);
color: var(--primary-white);
border-radius: 50%;
-webkit-animation: playVideo infinite 3.5s;
animation: playVideo infinite 3s;
}
.button.play-button .play-icon {
font-size: 25px;
color: var(--primary-color);
}
/*------------------------------------------------*/
/*--------------------[BANNER]-------------------*/
/*------------------------------------------------*/
.banner-block {
padding: 20px 25px 0 25px;
}
.full-width-block {
background: #f8f6df;
border-radius: 30px;
}
.full-width-block .banner-image img {
overflow: hidden;
display: flex;
justify-content: center;
margin: 0 auto;
padding-top: 8.5%;
z-index: 9;
position: relative;
}
.banner-block-content {
position: relative;
}
.banner-content span.back-text {
z-index: 1;
position: relative;
}
.banner-content span.fornt-text {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--primary-black);
z-index: 9;
position: relative;
}
h2.banner-call {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
margin-top: -2.8%;
left: -5.3%;
font-size: 20px;
position: absolute;
}
h2.banner-call span {
padding-left: 33px;
}
.banner-content {
position: absolute;
text-align: center;
bottom: 31%;
}
.banner-content h1 {
font-size: 211px;
line-height: 192px;
margin-left: 29px;
font-weight: 900;
letter-spacing: 1px;
}
.banner-sub-content {
position: absolute;
bottom: 24%;
z-index: 9;
}
h3.text-right {
margin-right: -55%;
font-size: 36px;
}
h3.text-left {
font-size: 36px;
margin-left: 36px;
}
h2.banner-call {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
margin-top: -7%;
left: -5.5%;
font-size: 20px;
position: absolute;
}
/*------------------------------------------------*/
/*--------------------[MARQUEE]-------------------*/
/*------------------------------------------------*/
.text-slider-btn a {
position: absolute;
right: 0;
left: 0;
background: var(--primary-color);
z-index: 999;
margin: 0 auto;
padding: 10px;
border-radius: 50%;
width: 210px;
height: 210px;
text-align: center;
line-height: 190px;
margin-top: -8.5%;
color: var(--primary-black);
font-size: 18px;
font-weight: bold;
}
.text-slider-btn .sm_svg {
color: var(--primary-black)
}
.marquee-slider-block .portal-icon,.marquee-slider-block-three .portal-icon {
font-size: 45px;
line-height: 40px;
}
.marquee-slider-block .portal-icon{
color: var(--primary-color);
}
.marquee-slider-block-three{
color: var(--primary-black);
}
.marquee-slider-block {
transform: rotate(3deg);
position: relative;
z-index: 9;
width: 110%;
left: -20px;
background-color: #212121;
padding:30px 0;
}
.slide-roll {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.slide-roll .roll-box {
position: relative;
-webkit-animation: slide-har 80s linear infinite;
animation: slide-har 80s linear infinite;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.slide-roll .roll-box .roll-item {
padding: 0 30px;
}
.slide-roll .roll-box .roll-item .roll-title .title {
white-space: nowrap;
line-height: 1;
font-size: 50px;
color: var(--primary-color);
margin: 0;
}
.slide-roll .roll-box .roll-item .roll-title img {
min-width: 40px;
margin-left: 65px;
animation: rotateImg 15s infinite linear;
}
.slide-roll .roll-box-revers {
position: relative;
-webkit-animation: slide-har-revers 80s linear infinite;
animation: slide-har-revers 80s linear infinite;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.marquee-slider-block-two {
background-color: #262626;
}
.marquee-slider-block-two .slide-roll .roll-box .roll-item .title {
color: var(--primary-white);
font-weight: 400;
font-size: 80px !important;
}
.marquee-slider-block-two .slide-roll .roll-box .roll-item .portal {
margin-left: 0;
min-width: 40px;
}
.marquee-slider-block-two .slide-roll .roll-box .roll-item .poliox-circule {
position: relative;
margin-right: 40px;
}
.marquee-slider-block-two .slide-roll .roll-box .roll-item .poliox-circule .circule-1 {
min-width: 130px;
margin-left: 0;
animation: rotateImg 15s infinite linear;
}
.marquee-slider-block-two .slide-roll .roll-box .roll-item .poliox-circule .portal-icon {
background: #4dffaf;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
text-align: center;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.marquee-slider-block-three {
transform: rotate(-3deg);
background-color: #f7f7ef;
width: 110%;
left: -20px;
position: relative;
margin-top: -120px;
padding: 30px 0;
}
.marquee-slider-block-three .roll-title .title {
color: var(--primary-black) !important;
}
.sc-brand-section {
background-color: var(--primary-white);
}
.sc-brand-section .px-brand img {
opacity: 0.3;
transition: 0.4s;
}
.sc-brand-section .px-brand img:hover {
opacity: 1;
}
@-webkit-keyframes slide-har {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes slide-har {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes slide-har-revers {
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes slide-har-revers {
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
/*------------------------------------------------*/
/*--------------------[ABOUT ]-------------------*/
/*------------------------------------------------*/
.about-left-content {
background: var(--primary-black);
padding: 60px 80px 35px 60px;
border-radius: 10px;
min-height: 504px;
}
.about-list-content-right.social-icon-list ul li {
padding: 0;
border: none;
margin-left: 8px;
margin-top: 21px;
display: inline-block;
}
.about-list-content-left h5, .about-list-content-right h5 {
color: var(--primary-white);
font-size: 21px;
font-weight: normal;
letter-spacing: -.7px;
}
.about-left-content ul li:last-child {
border: none;
}
.about-left-content ul li {
border-bottom: 1px solid var(--primary-border);
padding: 16px 0;
}
.about-list-content-right.social-icon-list ul li i {
background: #212121;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
}
.about-list-content-right.social-icon-list ul li i:hover {
background:var(--primary-color)!important;
color: var(--primary-black);
}
.about-content h1 span {
padding-left: 20%;
}
.about-block .full-width-block {
background: #f7f7ef;
position: relative;
}
.about-block-title h1 {
font-size: 90px;
padding: 210px 0 50px 0;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 1px;
line-height: 90px;
}
.banner-right .about-list-content-right.social-icon-list {
float: left;
}
.about-block-sub-title p {
font-size: 20px;
margin-left: 110px;
line-height: 28px;
color: #000;
font-weight: 400;
text-align: justify;
}
.about-bottom-content img {
position: relative;
top: -27px;
left: 6.3%;
}
.banner-right .about-list-content-right.social-icon-list ul {
margin-top: 35px;
}
.banner-right .about-list-content-right.social-icon-list ul li{
margin: 0 8px 0 0;
}
.banner-right .about-list-content-right.social-icon-list ul li i {
background: #212121;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
}
.about-block .banner-right {
padding-bottom: 425px;
}
.about-video-scetion {
margin-top: -16%;
position: relative;
}
.awards-content-block ul li {
padding: 23px 0;
border-bottom: 1px solid var(--primary-border);
}
.awards-content-block ul li:first-child {
border-top: 1px solid var(--primary-border);
}
.job-experience-content-block ul li {
border: 1px solid var(--primary-border);
border-radius: 30px;
padding: 26px 40px;
margin-bottom: 22px;
}
.job-experience-content-block ul li.last-item {
margin-bottom: 0;
}
last-item.awards-content-block ul li h5, .job-experience-content-block ul li h5 {
color: var(--primary-color);
line-height: 30px;
}
.why-with-me .swiper-work-slider {
width: 150%;
overflow: hidden;
position: relative;
margin-top: -12%;
}
.about-why-work-me {
background: var(--primary-black);
padding: 120px 0 220px 0;
position: relative;
border-radius: 20px;
}
.why-with-me .swiper-work-slider .swiper-slide.item {
background: var(--secondary-bg-color);
border: 1px solid var(--primary-border);
padding: 35px 52px 35px 60px;
}
.work-content .work-number {
color: var(--primary-color);
font-size: 16px;
margin-bottom: 20px;
}
.work-image img {
max-width: 255px;
}
.work-title {
font-size: 48px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--primary-white);
line-height: 50px;
}
.work-dec {
color: var(--primary-white);
margin-top: 25px;
font-size: 18px;
}
.why-with-me .swiper-work-slider-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
right: 0;
left: 0;
margin-top: 60px;
display: flex;
justify-content: center;
}
.why-with-me .swiper-pagination-bullet {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 100%;
background: var(--primary-color);
opacity: .2;
border: 2px solid var(--primary-white);
box-sizing: border-box;
margin-right: 12px;
}
.why-with-me .swiper-pagination-bullet-active {
opacity: 1;
background: var(--primary-color);
}
.why-with-me {
padding-bottom: 120px;
}
/*------------------------------------------------*/
/*--------------------[COUNTER ]-------------------*/
/*------------------------------------------------*/
.single-count {
position: relative;
background: transparent;
padding: 20px 30px;
border-radius: 9px;
border: 1px solid var(--primary-border);
}
.single-count.counter-item h4 .single-count .counter-text .count, .counter-text {
font-size: 60px;
font-weight: 600;
margin-right: 2px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: var(--primary-color);
}
.single-count.counter-item h4 {
color: var(--primary-color);
margin-left: 23px;
font-weight: 500;
font-size: 18px;
line-height: 29px;
margin-bottom: 0;
}
.counter-text{
margin-right:0;
}
/*------------------------------------------------*/
/*--------------------[SKILLS]-------------------*/
/*------------------------------------------------*/
section.skills-block{
background-color: var(--secondary-bg-color);
}
.skills-list {
border: 1px solid var(--primary-border);
border-radius: 100px;
padding: 38px;
}
.skills-percentage {
font-size: 48px;
line-height: 60px;
padding-top: 25px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #fffffe;
}
.skills-title {
font-size: 18px;
line-height: 34px;
color: var(--primary-color);
font-weight: 500;
}
.skills-block-content {
padding: 108px 0;
}
/*------------------------------------------------*/
/*--------------------[PORTFOLIO]-------------------*/
/*------------------------------------------------*/
section.portfolio-block {
background-color: var(--primary-black);
border-radius: 30px;
}
.portfolio-block .portfolio-contact-btn a{
background: transparent;
z-index: 999;
margin: 0 auto;
padding: 10px;
border-radius: 50%;
width: 210px;
height: 210px;
text-align: center;
line-height: 190px;
display: block;
border: 1px solid var(--primary-border);
color: var(--primary-color);
}
.portfolio-block .portfolio-contact-btn a .sm_svg {
color: var(--primary-color);
}
.portfolio-block .cbp-l-grid-projects-desc {
overflow: visible;
}
.portfolio-block .cbp-l-grid-projects-desc {
font: 500 16px "Hanken Grotesk", sans-serif;
color: var(--primary-color);
text-transform: uppercase;
margin: 30px 0 7px 0;
}
.portfolio-block .cbp-l-grid-projects-title a, #portfolio .cbp-l-grid-projects-title{
font: 700 30px "Hanken Grotesk", sans-serif;
color: var(--primary-white);
line-height: 30px;
}
.cbp-l-grid-projects-title {
font: inherit;
color: inherit;
}
.portfolio-block .cbp-footer-year {
background: var(--primary-color);
padding: 5px 30px;
border-radius: 30px 30px 30px 30px;
margin-top: 40px;
color:var(--primary-black)
}
.portfolio-block .cbp-item:hover .cbp-l-grid-projects-title a, #portfolio .cbp-item-wrapper:hover .cbp-l-grid-projects-title{
text-decoration: underline;
color: var(--primary-color);
}
#portfolio .cbp-caption-zoom .cbp-caption:hover .cbp-caption-defaultWrap {
-webkit-transform: none;
transform: none;
}
#portfolio .cbp-l-inline-title {
font: 700 30px "Hanken Grotesk", sans-serif;
color: var(--primary-black);
}
#portfolio .cbp-l-inline-subtitle {
font: 400 16px / 26px "Hanken Grotesk", sans-serif;
color: var(--third-color);
margin-top: 10px;
}
.cbp-l-inline-desc {
font: 400 16px / 28px "Hanken Grotesk", sans-serif;
color: var(--third-color);
margin-top: 20px;
margin-bottom: 20px;
}
.portfolio-contact-btn {
padding-top: 140px;
}
.portfolio-block .cbp-slider-controls {
top: 5px;
right: 5px;
}
.portfolio-block .cbp-slider-next, .cbp-slider-prev {
background: var(--primary-black);
}
.portfolio-block .cbp-caption-activeWrap {
background-color: transparent;
}
.portfolio-block .cbp-caption-active .cbp-caption, .cbp-caption-active .cbp-caption-defaultWrap, .cbp-caption-active .cbp-caption-activeWrap {
overflow: hidden;
z-index: 1;
}
.cbp-caption-overlayBottomReveal .cbp-caption:hover .cbp-caption-defaultWrap {
top: 0;
}
.portfolio-grid-style-block .cbp-caption-overlayBottomAlong .cbp-caption:hover .cbp-caption-activeWrap ,
.portfolio-grid-style-block .cbp-caption-overlayBottomAlong .cbp-caption:hover .cbp-caption-defaultWrap{
-webkit-transform: none;
transform: none;
}
.portfolio-block .cbp-caption-active .cbp-caption-activeWrap {
width: 100%;
position: absolute;
z-index: 2;
height: 100%;
top: 0;
margin: 0 auto;
opacity: 0;
}
.portfolio-block .cbp .cbp-item:hover .cbp-caption-activeWrap {
opacity: 1 !important;
}
.portfolio-block .cbp-caption-overlayBottomReveal .cbp-caption-activeWrap {
bottom: 0;
z-index: 9;
height: auto;
}
.portfolio-block .cbp-l-caption-buttonLeft, .cbp-l-caption-buttonRight {
background-color: var(--primary-color);
color: var(--primary-black);
display: inline-block;
font: 600 16px / 30px "Hanken Grotesk", sans-serif;
min-width: 90px;
text-align: center;
margin: 10px;
padding: 0 0;
border-radius: 50%;
line-height: 90px;
min-height: 90px;
}
.portfolio-block .cbp-l-project-details-visit {
color: var(--primary-white);
font: 600 16px / 30px "Hanken Grotesk", sans-serif;
background-color: var(--primary-black);
}
.portfolio-block .cbp-footer-number {
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
}
.portfolio-block .cbp-l-grid-projects-number {
padding: 0 0 10px 95px;
font: 500 16px "Hanken Grotesk", sans-serif;
color: var(--primary-color);
}
body.portfolio-style {
background: black;
}
.portfolio-border-bottom {
border-bottom: 1px solid var(--primary-border);
padding-top: 120px;
}
.about-block-title.portfolio-banner-block h1 {
padding-bottom: 0;
}
.portfolio-detalis-info .single_list>ul {
display: flex;
flex-wrap: wrap;
padding-bottom: 55px;
}
.portfolio-detalis-info .single_list>ul>li {
width: 20%;
border: 1px solid var(--primary-border);
padding: 25px;
}
.portfolio-list-block-cat h3 {
margin: 16px 0 52px 0;
font-size: 22px;
letter-spacing: -1px;
}
.portfolio-detalis-info .single_list h3 {
font-size: 20px;
margin-bottom: 10px;
}
.portfolio-detalis-info .single_list p {
font-size: 18px;
font-weight: 400;
}
.portfolio-detalis-info .single_list .list_inner ul {
display: flex;
}
.portfolio-detalis-info .single_list .list_inner li {
width: 25%;
}
.portfolio-detalis-info .single_list .list_inner .sm_svg {
color: var(--primary-black);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.portfolio-detalis-info .sm_svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.portfolio-detalis-title {
font-size: 40px;
margin: 54px 0 25px 0;
line-height: 50px;
letter-spacing: 1px;
}
.portfolio-detalis-text p {
margin-bottom: 30px;
}
.portfolio-detalis-text p,.portfolio-detalis-list p {
color: var(--third-color)
}
.portfolio-detalis-list .portfolio-detalis-overview-title {
font-size: 40px;
margin: 50px 0 25px 0;
}
.portfolio-detalis-list li {
margin-bottom: 15px;
position: relative;
}
.portfolio-detalis-list ul li p {
padding-left: 20px;
}
.portfolio-detalis-list li::after {
content: '';
width: 10px;
height: 10px;
background-color:var(--primary-black);
border-radius: 50%;
position: absolute;
top: 8px;
}
.portfolio-detalis-list ul {
margin: 25px 0 50px 0;
}
.portfolio-block .portfolio-contact-btn a:hover {
background: var(--primary-color);
color: var(--primary-black);
}
.prev_next, .tag-social-block {
padding: 38px 0;
border-top: 1px solid var(--primary-border);
border-bottom: 1px solid var(--primary-border);
margin-top: 110px;
}
.prev_next a {
color:var(--primary-black);
font-size: 18px;
font-weight: 700;
text-align: center;
text-decoration: none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.pagination-block {
padding-bottom: 120px;
}
.prev, .next {
border: 1px solid var(--primary-border);
padding: 10px 38px;
border-radius: 30px;
}
.back-to-ovrview a {
text-decoration: underline;
}
.prev:hover, .next:hover {
background:var(--primary-black);
display: block;
}
.prev:hover a, .next:hover a {
color: var(--primary-white);
}
/*------------------------------------------------*/
/*--------------------[SERVICE]-------------------*/
/*------------------------------------------------*/
.service-item {
border-top: 1px solid var(--primary-border);
display: grid;
background: transparent;
padding: 35px 0;
grid-template-columns: repeat(2, 1fr);
align-items: center;
position: relative;
cursor: pointer;
}
.service-item.last-item {
border-bottom: 1px solid var(--primary-border);
}
.service-item .service-content {
transition: 0.6s;
transform: translateY(0);
padding-left: 38px;
}
.service-item .service-content .service-title {
color: var(--primary-white);
margin-bottom: 25px;
transition: 0.4s;
transform: translateY(0);
transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease-out;
font-size: 60px;
}
.service-item .service-content .service-desc {
color: var(--third-color);
margin-left: 70px;
margin-top: 25px;
}
h5.service-number {
color: var(--primary-color);
top: -57px;
position: relative;
left: -40px;
}
h5.service-number::after {
content: "";
border-bottom: 2px solid var(--primary-color);
display: block;
position: relative;
top: -15px;
left: 28px;
width: 40px;
}
.service-item .service-btn i {
display: inline-block;
color: var(--primary-white);
text-align: center;
font-size: 13px;
position: relative;
}
.service-btn span {
font-size: 18px;
margin-right: 14px;
color: var(--primary-white);
}
.service-item .service-inner-image {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 160px;
z-index: 9;
}
.service-item .service-inner-image img {
-webkit-clip-path: inset(50% 0 50% 0);
clip-path: inset(50% 0 50% 0);
transition: -webkit-clip-path 0.3s ease-in;
transition: clip-path 0.3s ease-in;
transition: clip-path 0.3s ease-in, -webkit-clip-path 0.3s ease-in;
}
.service-item:hover .service-inner-image img {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
transition: -webkit-clip-path 0.5s cubic-bezier(0.33, 1, 0.68, 1);
transition: clip-path 0.5s cubic-bezier(0.33, 1, 0.68, 1);
transition: clip-path 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-clip-path 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.service-item:hover .service-title {
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
}
.service-item:hover .service-btn span, .service-item:hover .service-btn i {
color: var(--primary-color);
}
.sidrbar-service-list, .sidrbar-service-list-image {
background: #f7f7ef;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
padding: 35px;
position: relative;
}
.sidrbar-service-list-image img::after{
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.sidebar-content {
margin-top: 54px;
}
.sidrbar-service-list ul li:last-child {
margin-bottom: 0;
}
.sidrbar-service-list ul li {
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
padding: 15px 36px;
margin-bottom: 15px;
}
.sidrbar-service-list ul li a {
color: #000;
font-weight: 600;
font-size: 18px;
display: block;
}
.sidrbar-service-list ul li a i {
float: right;
line-height: 30px;
}
.sidrbar-service-list-image a {
position: absolute;
left: 0;
right: 0;
justify-content: center;
display: flex;
bottom: 40%;
background: var(--primary-color);
width: 160px;
margin: 0 auto;
padding: 15px;
border-radius: 10px;
font-weight: bold;
font-size: 18px;
color:var(--primary-black);
z-index: 99;
}
.sidrbar-service-list-image .sm_svg {
color: var(--primary-black);
}
.sidrbar-service-list ul li:hover {
background: var(--primary-black);
}
.sidrbar-service-list ul li:hover a,.sidrbar-service-list ul li:hover a i {
color: var(--primary-white);
}
.sidrbar-service-list .sidrbar-service-list-title {
font-size: 30px;
line-height: 30px;
margin-bottom: 36px;
}
/*------------------------------------------------*/
/*--------------------[QUERY FAQ]-------------------*/
/*------------------------------------------------*/
.accordion {
margin-top: 40px;
}
.accordion .accordion-item {
margin-bottom: 20px;
background: #f7f7ef;
border: 1px solid var(--primary-white);
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
}
.accordion .accordion-body {
font-size: 16px;
line-height: 27px;
color: var(--third-color)var(--third-color);
font-weight: 400;
}
.accordion .accordion-button {
font-size: 20px;
line-height: 26px;
padding: 20px 30px;
font-weight: 500;
border-radius: 0;
background-color: #f7f7ef;
color: var(--primary-black)!important;
}
.accordion .accordion-button:not(.collapsed) {
background-color: #f7f7ef;
color: var(--primary-black);
border-bottom: 1px solid var(--primary-black);
}
.accordion-button:focus {
z-index: 3;
outline: 0;
box-shadow: none;
}
.accordion .accordion-button::before {
position: absolute;
right: 20px;
top: 35%;
font-weight: 400;
background-image: none;
}
.accordion .accordion-item:first-of-type {
border-radius: 0;
}
.accordion .accordion-item:last-of-type {
border-radius: 0;
}
.query-wrapper.query-style2 .accordion {
margin-top: 0;
}
.query-wrapper.query-style2 .accordion-item ,.query-wrapper.query-style2 .accordion .accordion-button{
background: none;
border: none;
border-bottom: 1px solid var(--primary-border);
color: var(--primary-white)!important;
}
.query-wrapper.query-style2 .accordion .accordion-button:not(.collapsed) {
background-color: var(--secondary-bg-color);
color: var(--secondary-bg-color);
border-bottom: 1px solid var(--primary-border);
box-shadow: none;
color: var(--primary-white)!important;
}
.query-wrapper.query-style2 .accordion-button::after,
.query-wrapper.query-style2 .accordion-button:not(.collapsed)::after {
background-image: none;
}
.query-wrapper.query-style2 .accordion-item:last-child {
margin-bottom: 0;
}
.query-wrapper.section-padding .section-title {
padding: 60px 0 0 0;
margin-top: 0;
font-size: 40px;
font-weight: 700;
}
/*------------------------------------------------*/
/*--------------------[PRICE]-------------------*/
/*------------------------------------------------*/
.pricing-wrapper .pricing-card {
padding-bottom: 50px;
background: transparent;
border: 1px solid var(--primary-border);
border-radius: 30px;
}
.pricing-wrapper .pricing-card .pricing-plan {
display: inline-block;
font-size: 23px;
line-height: 23px;
color: var(--primary-color);
font-weight: 400;
font-family: "Hanken Grotesk", sans-serif;
text-align: left;
margin: 42px 0 0 46px;
}
.pricing-wrapper .pricing-card .pricing-price{
padding: 20px 46px;
}
.pricing-wrapper .pricing-card .price {
font-size: 50px;
line-height: 50px;
font-weight: 700;
color: var(--primary-black);
font-family: "Hanken Grotesk", sans-serif;
text-align: left;
}
.pricing-wrapper .pricing-card .price-small-text {
font-size: 60px;
line-height: 50px;
font-weight: 400;
color: var(--primary-white);
}
.pricing-wrapper .pricing-card .price-small-text-month {
color: var(--primary-color);
font-size: 16px;
line-height: 24px;
font-weight: 400;
margin-top: 20px;
}
.plan-features {
border-top: 1px solid var(--primary-border);
margin: 20px 46px 0 46px;
padding-top: 37px;
}
.pricing-wrapper .pricing-card .pricing-text {
font-size: 14px;
line-height: 18px;
color: var(--third-color)var(--third-color);
font-weight: 400;
text-align: left;
width: 70%;
margin: 0 auto;
margin-top: 15px;
position: relative;
}
.pricing-wrapper .pricing-card .pricing-text::after {
content: "";
width: 140px;
height: 1px;
background-color: #ebebeb;
position: absolute;
bottom: -40px;
left: 23px;
}
.pricing-wrapper .pricing-card .plan-features .features-item {
font-size: 18px;
line-height: 26px;
color: var(--primary-color);
font-weight: 400;
font-family: inherit;
text-align: left;
letter-spacing: 0px;
}
.pricing-wrapper .pricing-card .plan-features .features-item.ultra {
color: var(--primary-white);
}
.pricing-wrapper .pricing-card .plan-features .features-item:not(:last-child) {
margin-bottom: 15px;
}
.pricing-wrapper .pricing-card .plan-features .features-item .icon {
color: var(--primary-color);
margin-right: 14px;
font-size: 12px;
border: 1px solid var(--primary-color);
border-radius: 50%;
height: 20px;
width: 20px;
line-height: 20px;
display: inline-block;
padding: 0;
text-align: center;
}
.pricing-wrapper .pricing-card .button {
margin-top: 20px;
background-color: transparent;
}
.pricing-wrapper .pricing-card .button.button-primary {
color: var(--primary-color);
padding: 15px 40px;
position: relative;
z-index: 2;
border-radius: 40px;
display: block;
margin: 60px 46px 0 46px;
text-align: center;
border: 1px solid var(--primary-border);
}
.pricing-wrapper .ultra-card .price {
color: var(--primary-white);
}
.pricing-wrapper .ultra-card .pricing-text {
color: var(--primary-white);
}
.pricing-wrapper .ultra-card .plan-features .features-item {
color: var(--primary-color);
}
.pricing-content p.body-text , .call-to-action p.body-text{
padding: 20px 0 40px 0;
}
.pricing-wrapper .pricing-card .button.button-primary:hover {
background: var(--primary-color);
color: var(--primary-black);
}
.priceing-page.pricing-wrapper.portfolio-block {
background-color: var(--secondary-bg-color);
border-radius: 30px;
}
/*------------------------------------------------*/
/*--------------------[TESTIMONIAL]---------------*/
/*------------------------------------------------*/
.testimonial-slider{
border-bottom: 1px solid var(--primary-border);
}
.home-testimonial-block h1 {
font-size: 120px;
color: var(--primary-color);
letter-spacing: 2px;
line-height: 78px;
}
.home-testimonial-block .section-title {
padding: 0 50px;
}
span.dot::before {
content: ".";
font-size: 170px;
color: var(--primary-color);
line-height: 0;
}
.home-testimonial-block h1 span {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--primary-color);
}
.testimonial-slider .item {
border: 1px solid var(--primary-border);
padding: 46px;
}
.testimonial-icon i {
font-size: 49px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--primary-color);
}
.testimonial-dec p {
font-size: 20px;
margin-top: 27px;
color: var(--primary-color);
}
.testimonial-image img {
max-width: 70px;
height: 70px;
float: left;
}
.testimonial-content {
margin-top: 45px;
}
.product-content-block .product-review li {
display: inline-block;
padding-right: 5px;
}
.product-content-block .product-review li i {
color: #ffa700;
font-size: 14px;
}
.testimonial-content {
margin-top: 42px;
}
.testimonial-title {
color: var(--primary-white);
padding: 13px 0 0 90px;
font-size: 24px;
font-weight: bold;
}
.testimonial-sub-title {
color: var(--primary-color);
padding: 4px 0 0 90px;
font-size: 18px;
}
ul.list-inline.product-review {
background: var(--primary-black);
padding: 5px 20px;
border-radius: 30px;
border: 1px solid var(--primary-border);
margin: 10px 4px 0 0;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--primary-color);
}
.swiper-container-horizontal>.swiper-pagination-progressbar {
bottom: 0 !important;
top: 99.7%;
}
.home-testimonial-block .marquee-slider-block {
width: 100% !important;
background: none;
transform: none;
left: 0;
right: 0;
}
/*------------------------------------------------*/
/*--------------------[CLIENT]-------------------*/
/*------------------------------------------------*/
.project-brands {
border-top: 1px solid var(--primary-border);
border-bottom: 1px solid var(--primary-border);
}
.slider-item {
border: 1px solid var(--primary-border);
border-radius: 20px;
}
.home-brand-block h1 {
font-size: 22px;
text-align: center;
color: var(--primary-white);
letter-spacing: 1px;
padding-bottom: 40px;
}
/*------------------------------------------------*/
/*--------------------[BLOG]-------------------*/
/*------------------------------------------------*/
.blog-content {
left: -6px;
position: relative;
top: 20px;
}
.blog-date i {
font-size: 11px;
margin-right: 10px;
color: var(--primary-color);
}
.blog-date {
font-size: 16px;
font-weight: 500;
color: var(--primary-color);
margin-bottom: 10px;
}
.blog-content h1 {
font-size: 60px;
line-height: 46px;
}
.blog-content .blog-title {
font-size: 42px;
color: var(--primary-white);
letter-spacing: 1px;
}
p.blog-desc {
margin-top: 23px;
color: #a6a6a6;
font-size: 18px;
width: 570px;
}
.blog-btn i {
top: 20px;
position: relative;
color: var(--primary-color);
}
.blog-item:hover .blog-title {
color: var(--primary-color);
border-bottom: 1px solid var(--primary-color);
}
.blog-item {
border-top: 1px solid var(--primary-border);
padding: 35px 0 !important;
position: inherit !important;
}
.blog-item.last-item {
border-bottom: 1px solid var(--primary-border);
}
.blog-slider .blog-content {
background: var(--primary-white);
width: 620px;
padding: 60px 30px;
position: absolute;
bottom: 0;
top: unset;
left: 0;
}
.blog-slider .blog-date i,.blog-slider .blog-date,.blog-slider .blog-content .blog-title,.blog-slider p.blog-desc {
color: var(--primary-black);
}
.blog-info-block {
display: flex;
gap: 60px;
align-items: center;
justify-content: flex-start;
text-align: left;
}
.blog-info-block .info {
display: flex;
align-items: flex-start;
justify-content: flex-start;
align-items: center;
}
.blog-info-block .image img {
width: 70px;
height: 70px;
border-radius: 50%;
margin-right: 20px;
}
.blog-info-block .title span {
color: var(--third-color);
}
.blog-info-block .title h3 {
color: var(--primary-black);
font-size: 18px;
font-weight: 500;
line-height: 1;
text-align: center;
}
.portfolio-detalis-text.bg-style2 .icon i {
font-size: 60px;
margin-bottom: 15px;
}
.portfolio-detalis-text.bg-style2 {
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
padding: 40px;
}
.portfolio-detalis-text.bg-style2 p {
font-style: italic;
font-size: 20px;
line-height: 35px;
}
.portfolio-detalis-text.bg-style2 p.client-name {
text-decoration: underline;
font-style: normal;
margin-bottom: 0;
}
.tag-social-block .about-list-content-right.social-icon-list ul li {
margin-top: 0;
}
.single-post-wrapper .post-comment input,
.single-post-wrapper .post-comment textarea {
padding: 15px 20px;
border: 1px solid #ebebeb;
margin-bottom: 20px;
}
.single-post-wrapper .post-comment input {
min-width: 49.2%;
border-radius: 30px;
}
.single-post-wrapper .post-comment input:not(:last-child) {
margin-right: 15px;
}
.single-post-wrapper .post-comment ::-webkit-input-placeholder {
font-size: 14px;
line-height: 18px;
color: #5f6168;
font-weight: 400;
font-family: "Oxygen", sans-serif;
}
.single-post-wrapper .post-comment :-ms-input-placeholder {
font-size: 14px;
line-height: 18px;
color: #5f6168;
font-weight: 400;
font-family: "Oxygen", sans-serif;
}
.single-post-wrapper .post-comment ::-ms-input-placeholder {
font-size: 14px;
line-height: 18px;
color: #5f6168;
font-weight: 400;
font-family: "Oxygen", sans-serif;
}
.single-post-wrapper .post-comment ::placeholder {
font-size: 14px;
line-height: 18px;
color: #5f6168;
font-weight: 400;
font-family: "Oxygen", sans-serif;
}
.single-post-wrapper .post-comment textarea {
min-height: 180px;
width: 100%;
border-radius: 10px;
}
.single-post-wrapper button.button.button-primary {
border-radius: 30px;
background: #000;
}
.single-post-wrapper .post-comment .button {
margin-top: -5px;
}
.blog-detalis-block h2.section-heading {
margin: 0;
color: var(--primary-black);
}
.blog-detalis-block .portfolio-list-block-title h1 {
margin: 30px 0 25px 0;
letter-spacing: 0px;
}
.blog-detalis-block .portfolio-detalis-top-image,
.blog-detalis-block .portfolio-detalis-text{
margin-top: 60px;
}
.blog-detalis-block .about-list-content-right.social-icon-list h5,
.blog-detalis-block .tag h5{
color: var(--primary-black);
font-weight: bold;
margin-right: 30px;
}
.blog-detalis-block .tag a {
color: var(--third-color);
}
.blog-small-image {
padding-top: 30px;
}
.post-comment {
margin-top: 60px;
}
.post-comment p {
padding: 15px 0 30px 0;
}
/*------------------------------------------------*/
/*--------------[Home Watch Video STYLE]-----------*/
/*------------------------------------------------*/
.watch-video {
width: 100%;
display: block;
padding-top: 15%;
}
.watch-video.style2 {
padding-top: 0;
}
.watch-video span {
display: block;
margin-top: 15px;
text-transform: capitalize;
font-family: 'Raleway', sans-serif;
}
.watch-video .btn-video {
font-size: 18px;
height: 130px;
width: 130px;
margin: 0 auto;
display: table;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.06);
background: var(--primary-color);
color: var(--primary-black);
line-height: 130px;
font-weight: bold;
}
.watch-video .btn-video:hover,
.watch-video .btn-video:focus,
.watch-video .btn-video:active,
.about-video-block-style .watch-video .btn-video:hover{
text-decoration: none;
background:var(--primary-black);
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
color: var(--primary-color);
}
.watch-video .btn-video i {
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0;
padding: 0;
}
.video_area {
position: relative;
overflow: hidden;
width: 100%;
z-index: 1;
padding: 200px 0 50px 0;
background: #2d2ed4;
background: -webkit-linear-gradient(to right, #e24997, #2d2ed4);
background: linear-gradient(to right, #e24997, #2d2ed4);
}
.video_area .video-top-thumbnail img {
width: 100%;
position: absolute;
top: -2px;
left: 0;
z-index: 1;
}
.video_area_text {
position: relative;
z-index: 1;
}
.video_area_text h2 {
padding-bottom: 170px;
}
.about-video-block-style .watch-video{
position: absolute !important;
top: 50% !important;
left: 50% !important;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-backface-visibility: hidden;
padding-top: 0;
}
.about-video-block-style .watch-video .btn-video i {
position: relative;
display: block;
vertical-align: middle;
top: 25%;
padding: 0;
left: 5%;
}
/*------------------------------------------------*/
/*--------------[CONTACT STYLE]-----------*/
/*------------------------------------------------*/
.form-control {
background: #f6f7f8 none repeat scroll 0 0;
border: 0 solid transparent;
border-radius: 3px;
box-shadow: none;
color: inherit;
font-size: 13px;
height: auto;
line-height: 1.33333;
padding: 15px 15px 15px 20px;
}
.contact-block-style {
background: transparent;
z-index: 1;
position: relative;
padding: 40px 60px;
box-shadow: 0px 1px 51.3px 5.7px rgb(137 143 156 / 15%);
border: 1px solid var(--primary-white);
}
h1.main-title {
font-size: 42px;
line-height: 56px;
}
.contact-info-block {
margin-top: 60px;
}
.contact-form-bg.bg-white {
padding: 60px 40px;
}
.contact_us_contact_form .form-control {
border: 1px solid var(--primary-border) !important;
border: none;
padding: 15px;
background: transparent;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
height: 44px;
font-size: 16px;
-webkit-transition: border .9s ease;
-o-transition: border .9s ease;
transition: border .9s ease;
margin-bottom: 20px;
}
.contact-block-style .contact_us_contact_form .form-control::placeholder,.contact-block-style .contact_us_contact_form .form-control{
color: var(--third-color)var(--third-color);
}
.contact_us_contact_form textarea {
min-height: 175px;
resize: none;
}
.error {
color: #ff0404;
font-size: 12px;
font-weight: bold;
}
.contact_us_contact_form .btn-style {
background: var(--primary-balck);
color: var(--secondary-white);
display: block;
margin: 0 auto;
}
.type-wrap span {
font-size: 30px;
overflow: hidden;
line-height: 40px;
letter-spacing: 1px;
text-transform: capitalize;
}
.type-style-1 .type-wrap span {
font-size: 60px;
text-transform: uppercase;
line-height: 80px;
}
.single-contact-option i, .single-social-icon i {
border: 3px solid transparent;
border-radius: 50%;
font-size: 36px;
height: 95px;
line-height: 90px;
transition: all 0.3s ease 0s;
width: 95px;
}
.single-contact-option i {
background: var(--primary-white) none repeat scroll 0 0;
margin-bottom: 30px;
}
.single-contact-option:hover i, .single-social-icon a:hover i {
background: var(--primary-color) none repeat scroll 0 0;
border: 3px solid var(--primary-white);
box-shadow: 0 0 0 4px var(--primary-color);
color:var(--primary-white);
}
.single-contact-option h6 {
color: inherit;
font-weight: bold;
margin-bottom: 5px;
}
.single-contact-option p {
color: inherit;
line-height: 26px;
margin: 0;
}
.form-details {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
.contact-info-block .contact-info i {
float: left;
margin: 0;
line-height: 31px;
background: var(--primary-white);
padding: 20px;
border-radius: 5px;
}
.contact-info-block .contact-info {
margin-bottom: 40px;
}
.contact-info-block .contact-info p {
font-size: 24px;
font-weight: bold;
line-height: inherit;
}
.contact-info-block p, .contact-info-block h6 {
padding-left: 30px;
overflow: hidden;
}
.contact-info-block .contact-info h6 {
margin-bottom: 6px;
text-transform: capitalize;
font-size: 14px;
color: var(--third-color);
}
.address-block i, .email-block i, .cell-number-block i {
font-size: 30px;
margin-bottom: 25px;
line-height: 45px;
color: var(--primary-black);
}
.address-block p,.email-block p, .cell-number-block p {
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.home-contact {
position: relative;
left: 0;
right: 0;
content: "";
overflow: hidden;
margin-top: -120px;
clear: both;
}
.contact-submit-btn{
float: left;
z-index: 99;
text-align: right;
cursor: pointer;
background: var(--secondary-bg-color);
padding: 15px 32px;
color: var(--primary-white);
margin-top: 20px;
border-radius: 30px;
}
.main-title.form-right-title {
font-size: 28px;
margin-bottom: 60px;
line-height: 0;
}
/*------------------------------------------------*/
/*--------------------[FOOTER]-------------------*/
/*------------------------------------------------*/
footer .footer-wrapper .section-title {
padding: 120px;
text-align: center;
}
footer .footer-wrapper {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
footer .footer-wrapper .section-heading {
border: 1px solid var(--primary-border);
max-width: max-content;
border-radius: 30px 30px;
padding: 5px 28px;
font-size: 17px;
color: var(--primary-black);
margin: 0 auto;
}
footer .footer-wrapper h1 {
margin: 26px 0 30px 0;
letter-spacing: 1px;
}
h3.mail-address {
font-size: 40px;
letter-spacing: 1px;
}
.footer-contact-btn a {
background: var(--primary-black);
z-index: 999;
margin: 0 auto;
padding: 10px;
border-radius: 50%;
width: 210px;
height: 210px;
text-align: center;
line-height: 190px;
display: block;
margin-top: 66px;
color: var(--primary-white);
font-size: 17px;
font-weight: bold;
}
footer .footer-wrapper.footer-bg-style2 {
background-color: #f7f7ef;
margin: 0 25px;
border-bottom: 1px solid var(--primary-border);
}
footer .footer-wrapper.footer-bg-style2 .section-heading {
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
footer .footer-wrapper.footer-bg-style2 .footer-contact-btn a {
background: var(--primary-color);
color: var(--primary-black);
}
footer.footer-wrapper.footer-bg-style2 .sm_svg {
color: var(--primary-black);
}
footer .footer-wrapper.footer-bg-style2 h1, footer .footer-wrapper.footer-bg-style2 h3.mail-address{
color: var(--primary-color);
}
h3.mail-address{
color: var(--primary-balck);
}
.banner-block.about-block.portfolio-bg-style .full-width-block {
border-radius: 30px 30px 0 0;
}
.footer-bg-style2 .sm_svg {
color: var(--primary-black);
}
.footer-contact-btn a:hover, .footer-contact-btn a:hover .sm_svg {
color: var(--primary-color);
}
.footer-wrapper.footer-bg-style2 .footer-contact-btn a:hover .sm_svg {
color: var(--primary-black);
}
footer#contact .section-title.text-center {
padding: 120px 0;
}
footer#contact .contact-form-bg.bg-white {
background: transparent !important;
}
footer#contact .contact-info-block {
text-align: left;
}
footer#contact .contact-block-style {
border: none;
}
footer#contact .contact-form-bg.bg-white {
padding: 0;
}
.sm_svg {
width: 24px;
height: 24px;
fill: currentColor;
color: var(--primary-white);
}
.copy-text {
font-size: 18px;
color: var(--primary-color);
font-weight: 500;
}
.copy-social ul li {
display: inline;
padding: 4px 20px;
border: 1px solid var(--primary-border);
border-radius: 30px;
margin-right: 10px;
}
.copy-link ul li {
display: inline;
padding-left: 36px;
}
.copy-link ul li a {
font-size: 18px;
color: var(--primary-color);
}
.copy-s-top {
position: absolute;
right: 6%;
background: var(--primary-color);
padding: 12px;
border-radius: 10px;
color:var(--primary-black);
}
.copyright {
padding: 60px 0;
}
.copy-social ul li:hover {
background: var(--primary-color);
}
.copy-social ul li:hover a {
color: var(--primary-black);
}
/*------------------------------------------------*/
/*----------------[CURSOR STYLE]-----------------*/
/*------------------------------------------------*/
.cursor {
position: fixed;
background-color: var(--primary-color);
width: 15px;
height: 15px;
border-radius: 100%;
z-index: 1;
-webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 10000;
-webkit-transform: scale(1);
transform: scale(1);
}
.cursor.active {
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0);
}
.cursor.menu-active {
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0);
}
.cursor.hovered {
opacity: 1;
}
.cursor-follower {
position: fixed;
border: 0.5px solid var(--primary-color);
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 1;
-webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background;
transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 10000;
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
.cursor-follower.active {
opacity: 1;
-webkit-transform: scale(2);
transform: scale(2);
}
.cursor-follower.menu-active {
opacity: 1;
-webkit-transform: scale(2);
transform: scale(2);
}
.cursor-follower.hovered {
opacity: 1;
}
/*------------------------------------------------*/
/*--------------------[RESPONSIVE]-------------------*/
/*------------------------------------------------*/
@media only screen and (max-width: 1900px) {
.marquee-slider-block-three {
width: 100%;
left: 0;
overflow: hidden;
}
.marquee-slider-block {
width: 100%;
left: 0;
overflow: hidden;
}
.about-block .banner-right {
padding-bottom: 300px;
}
.copy-link ul li {
padding-left: 20px;
}
.copy-link ul li a , .copy-text{
font-size: 16px;
}
.copy-social ul li {
padding: 4px 8px;
margin-right: 6px;
}
.copy-s-top {
right: 3px;
}
.cursor-follower, .cursor{
display: none;
}
.service-item .service-content .service-title {
font-size: 40px;
}
.service-item .service-content .service-desc {
margin-left: 0;
}
.home-testimonial-block h1 {
font-size: 70px;
line-height: 60px;
}
.single-count.counter-item h4 .single-count .counter-text .count, .counter-text {
font-size: 30px;
}
}
@media only screen and (max-width: 1200px) {
.header-contact,.header-menu-bg{
display: none;
}
.sticky-header:not(.header-submenu).is-sticky .nav-menu > li > a {
line-height: 25px;
}
.sticky-header:not(.header-submenu).is-sticky .nav-menu > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.banner-block-content .home-main-contant-style-7 {
padding-top: 120px;
}
.about-why-work-me {
padding: 120px 0 170px 0;
}
.home-testimonial-block h1 {
font-size: 60px;
line-height: 50px;
}
.job-experience-content-block ul li {
padding: 26px 15px;
}
.banner-right .about-list-content-right.social-icon-list ul {
margin-top: 0;
}
.about-bottom-content {
display: block !important;
}
.about-bottom-content img {
top: 0;
left: 0;
margin: 15px 0;
}
.about-block-sub-title p {
margin-left: 0;
}
.nav-toggle {
display: block;
}
.plan-features {
margin: 20px 30px 0 30px;
}
.header-style .nav-menu > li > a {
line-height: inherit;
}
.pricing-wrapper .pricing-card .pricing-price {
padding: 20px 30px;
}
.pricing-wrapper .pricing-card .pricing-plan {
margin: 42px 0 0 30px;
}
.pricing-wrapper .pricing-card .button.button-primary {
padding: 15px 30px;
margin: 60px 30px 0 30px;
}
.about-block-title h1 {
font-size: 50px;
padding: 120px 0 50px 0;
line-height: 60px;
}
.portfolio-list-block-title h1,.contact-block-title h1{
font-size: 50px;
line-height: 50px;
}
.contact-submit-btn {
float: none;
padding: 15px 30px;
}
.contact-block-style {
padding: 40px 20px;
}
.contact-info-block p, .contact-info-block h6 {
padding-left: 10px;
}
.contact-info-block .contact-info p {
font-size: 14px;
}
.portfolio-block .cbp-l-grid-projects-title a {
font: 700 18px "Hanken Grotesk", sans-serif;
}
.portfolio-block .cbp-footer-year {
padding: 2px 8px;
margin-top: -5px;
margin-left: -20px;
}
.service-item .service-content .service-desc {
margin-left: 0;
}
.testimonial-sub-title {
padding: 10px 0 10px 0;
}
.testimonial-content {
display: block !important;
}
.blog-content {
left: 0;
position: relative;
top: 0;
overflow: hidden;
}
.blog-content .blog-title {
font-size: 22px;
}
.blog-content h1 {
font-size: 60px;
line-height: 18px;
}
.blog-date {
margin-bottom: 0;
}
footer.footer-wrapper h1 , h3.mail-address {
font-size: 22px;
line-height: 28px;
}
footer .footer-wrapper h1 {
margin: 26px 0 30px 0;
letter-spacing: 1px;
font-size: 34px;
line-height: 40px;
}
.single-count {
padding: 20px 15px;
}
.testimonial-slider .item {
padding: 25px;
}
.about-content h1, .about-block .about-content h1 {
line-height: 36px;
font-size: 26px;
letter-spacing: 1px;
}
.text-slider-btn a {
margin-top: -13.5%;
}
.nav-menus-wrapper.show {
right: 0px;
}
.nav-menus-wrapper{
position: fixed;
right: -540px;
top: 0;
width: 300px;
height: 100vh;
scroll-behavior: smooth;
overflow-y: scroll;
-webkit-transition: right 0.5s ease-in;
transition: right 0.5s ease-in;
background-color: var(--primary-white);
padding: 20px;
z-index: 9999;
-webkit-box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.15);
box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.15);
}
.nav-menus-wrapper ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
background-color: transparent;
margin-top: 30px;
}
.nav-menus-wrapper ul > li {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.nav-menus-wrapper ul > li a {
font-size: 16px;
position: relative;
display: block;
padding: 10px 15px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
text-decoration: none;
color: var(--primary-black);
outline-width: 0;
text-transform: capitalize;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.navigation .close-nav {
border: 0;
background: transparent;
color: var(--primary-black);
border-radius: 30px;
font-size: 20px;
position: absolute;
left: 25px;
top: 17px;
}
}
@media only screen and (min-width: 1201px) {
.menu-contact-list{
display: none!important;
}
.nav-menus-wrapper {
overflow: hidden;
display: flex;
justify-content: center;
margin: 0;
}
button.close-nav {
display: none;
}
}
@media only screen and (max-width: 767px) {
footer .footer-wrapper .section-title {
padding: 120px 0;
text-align: center;
}
.contact-block-title .contact-email {
font-size: 18px;
}
.contact-form-bg.bg-white {
padding: 60px 10px;
}
.blog-small-image img,
.service-small-image img{
margin-bottom: 30px;
width: 100%;
}
.sidrbar-service-list-image img {
width: 100%;
}
.blog-info-block,.blog-info-block .info {
display: block;
text-align: center;
}
.blog-info-block .title {
padding-top: 10px;
}
.tag-social-block {
display: block !important;
}
.blog-detalis-block .about-list-content-right.social-icon-list h5, .blog-detalis-block .tag h5 {
margin-right: 0;
}
.blog-slider .blog-content {
width: 100%;
padding: 20px 20px;
position: unset;
}
.item .blog-inner-image img {
margin: 0;
}
p.blog-desc {
width: 100%;
}
.prev_next a {
font-size: 14px;
}
.prev, .next {
padding: 2px 10px;
}
.portfolio-detalis-info .single_list>ul>li {
width: 100%;
padding: 15px;
}
.about-block .banner-right {
padding-bottom: 150px;
}
.watch-video .btn-video {
height: 80px;
width: 80px;
line-height: 80px;
}
.about-why-work-me {
padding: 120px 0 100px 0;
}
.portfolio-block .cbp-l-grid-projects-number {
padding: 0 0 10px 0;
}
.portfolio-block .cbp-l-grid-projects-desc {
margin: 25px 0 7px 0;
}
.portfolio-block .cbp-footer-year {
padding: 2px 8px;
margin-top: -10px;
margin-left: -35px;
}
.skills-list {
padding: 15px;
}
.about-content h1, .about-block .about-content h1 {
line-height: 26px;
font-size: 18px;
letter-spacing: 0;
}
.about-block-title h1,.portfolio-list-block-title h1,
.contact-block-title h1{
font-size: 30px;
line-height: 40px;
}
.copy-content {
display: block !important;
text-align: center;
}
.copy-social ul li {
padding: 6px 10px;
margin-bottom: 15px;
display: block;
}
.about-left-content {
padding: 30px 30px 30px 30px;
min-height: auto;
}
.about-list-content-left h5, .about-list-content-right h5 {
font-size: 16px;
}
h3.text-left {
font-size: 20px;
margin-left: 0;
}
h3.text-right {
margin-right: 0;
font-size: 20px;
}
.banner-sub-content .d-flex {
display: block !important;
}
.banner-sub-content {
position: absolute;
bottom: 6%;
z-index: 9;
left: 0;
display: flex;
justify-content: center;
margin: 0 auto;
right: 0;
}
.cd-header-block {
padding: 0 30px;
}
.banner-content {
bottom: 38%;
right: 0;
left: 0;
}
.about-right-content img {
margin-top: 30px;
}
.service-item , .service-item .service-content,.service-inner{
display: block!important;
}
.service-item .service-content .service-title {
font-size: 36px;
}
.service-item .service-content {
padding-left:0;
}
h5.service-number {
top: -10px;
left: 0;
}
.blog-inner-image img {
margin-bottom: 20px;
width: 100%;
}
}
@media only screen and (max-width: 991px) {
.single-post-wrapper .post-comment input {
width: 100%;
}
.portfolio-detalis-title, .portfolio-detalis-list .portfolio-detalis-overview-title {
font-size: 30px;
line-height: 36px;
}
.single-post-wrapper .post-comment {
margin-top: 90px;
}
.header-style .nav-header, .header-style .nav-search, .header-style .nav-cart{
padding: 10px 0;
line-height: 0;
}
.about-why-work-me {
padding: 121px 0 130px 0;
}
.navigation-portrait .nav-search-button {
width: auto;
height: auto;
line-height: 30px;
font-size: 22px;
}
.nav-brand{
width: 130px;
}
.nav-toggle {
width: 30px;
height: 23px;
padding: 5px 0 0;
}
.why-with-me .swiper-work-slider .swiper-slide.item {
padding: 20px 20px 20px 20px!important;
}
.why-with-me .swiper-work-slider .swiper-slide.item .d-flex {
display: block !important;
}
.home-brand-block h1 {
line-height: 28px;
}
.work-dec {
margin-bottom: 25px;
}
.skills-list,.single-count{
margin-top: 30px;
}
footer .footer-wrapper {
height: auto;
}
.copy-content {
display: block !important;
text-align: center;
}
.copy-link ul li {
display: inline;
padding-left: 15px;
}
.copy-social {
padding: 30px 0;
}
.copy-s-top {
position: relative;
right: 0;
background: var(--primary-white);
bottom: -30px;
margin: 0 auto;
}
}
@media screen and (min-width: 768px) and (max-width: 800px) {
.text-slider-btn a {
margin-top: -22%;
}
}
@media screen and (min-width: 992px) and (max-width: 1024px) {
.text-slider-btn a {
margin-top: -17%;
}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
.banner-content h1 {
font-size: 90px;
line-height: 90px;
}
.sidrbar-service-list ul li {
padding: 15px 20px;
}
.about-block .banner-right {
padding-bottom: 230px;
}
h3.text-left {
font-size: 20px;
margin-left: 0;
margin-right: 65px;
}
h3.text-right {
margin-right: 0;
font-size: 20px;
}
.banner-content {
position: absolute;
text-align: center;
bottom: 38%;
left: 0;
right: 0;
}
.banner-sub-content {
bottom: 30%;
display: flex;
justify-content: center;
left: 0;
right: 0;
}
.about-right-content img {
width: 100%;
margin-top: 30px;
}
.skills-list {
padding: 21px;
}
.service-item .service-content .service-title {
font-size: 38px;
}
}
@media screen and (min-width: 1201px) and (max-width: 1400px) {
.text-slider-btn a {
margin-top: -13%;
}
.nav-menu > li > a {
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (min-width: 1201px) and (max-width: 1900px) {
.banner-content {
left: 0;
right: 0;
}
.single-count.counter-item h4 {
font-size: 16px;
line-height: 24px;
}
.banner-content h1 {
font-size: 130px;
line-height: 140px;
margin-left: 0;
}
h3.text-left {
font-size: 30px;
margin-left: 0;
margin-right: 65px;
}
h3.text-right {
margin-right: 0;
font-size: 30px;
}
.banner-sub-content {
bottom: 22%;
display: flex;
justify-content: center;
left: 0;
right: 0;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.banner-content h1 {
font-size: 36px;
line-height: 40px;
}
.text-slider-btn a {
width: 170px;
height: 170px;
line-height: 161px;
margin-top: -38.5%;
font-size: 12px;
}
}
@media only screen and (min-width: 415px) and (max-width: 500px) {
.banner-content h1 {
font-size: 45px;
line-height: 50px;
}
.text-slider-btn a {
width: 170px;
height: 170px;
line-height: 152px;
margin-top: -33.5%;
}
}
@media only screen and (min-width: 501px) and (max-width: 600px) {
.banner-content h1 {
font-size: 72px;
line-height: 94px;
}
.text-slider-btn a {
width: 170px;
height: 170px;
line-height: 152px;
margin-top: -26.5%;
}
}