/*
* ----------------------------------------------------------------------------------------
Author       : Tanvir Hossain
Template Name: Nino - Premium Portfolio Template
Version      : 1.0                                          
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 01.GLOBAL CSS STYLE
* 02.COMMON CSS STYLE
* 03.MENU CSS STYLE
* 04.HEADER CSS STYLE
* 05.ABOUT CSS STYLE
* 06.SERVICE CSS STYLE
* 07.SKILL CSS STYLE
* 08.RESUME CSS STYLE
* 09.PORTFOLIO CSS STYLE
* 10.TESTIMONIALS CSS STYLE
* 11.PRICING CSS STYLE
* 12.CLIENTS CSS STYLE
* 13.CONTACT CSS STYLE
* 14.FOOTER CSS STYLE
* 15.PRELOADER & BOUNCE CCS STYLE
* 16.BLOG CSS STYLE
* 17.GALLERY
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 01.GLOBAL STYLE
* ----------------------------------------------------------------------------------------
*/

:root {
--main-color: #070707;
--heading-color: #fff;
--primary-color: #f4f3ed;
--lighter-color: #f7f7f7;
--subtitle-color: #f7f7f7;
--black-color: #070707;
--border-color: rgba(255, 255, 255, 0.0784313725);
--button-border: rgba(119, 119, 125, 0.2);
--body-background: #000;
--grey-bg: #e6eaee;
--text-font: "Poppins", sans-serif;
--title-font: "Oswald", sans-serif;
}

* {
margin: 0;
padding: 0;
border: none;
outline: none;
box-shadow: none;
}

body {
color: #e6eaee;
background: var(--body-background);
font-weight: 400;
margin: 0 auto;
padding: 0;
width: 100%;
line-height: 30px;
font-size: 16px;
font-family: "Poppins", sans-serif;
overflow-x: hidden;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.accordion-item .accordion-button {
color: var(--heading-color);
font-family: "Oswald", sans-serif;
}

h1,
.h1 {
font-size: 58px;
}

h2,
.h2 {
font-size: 22px;
}

h3,
.h3 {
line-height: 1.3;
font-size: 30px;
}

h4,
.h4 {
line-height: 1.1;
font-size: 24px;
}

h5,
.h5 {
line-height: 1.4;
font-size: 20px;
}

h6,
.h6 {
font-size: 16px;
}

p {
line-height: 28px;
}

ul,
li {
margin: 0;
padding: 0;
}

fieldset {
border: 0 none;
margin: 0 auto;
padding: 0;
}

.no-padding {
padding: 0 !important;
}

a {
color: var(--main-color);
cursor: pointer;
outline: none;
-webkit-transition: 0.5s;
transition: 0.5s;
text-decoration: none;
font-family: "Poppins", sans-serif;
}

a:hover,
a:focus,
a:visited {
text-decoration: none;
outline: none;
}

a:hover {
color: #000;
}

ul,
li {
list-style: none;
padding: 0;
margin: 0;
}

img {
max-width: 100%;
display: inline-block;
}

mark {
color: var(--primary-color);
background: transparent;
text-decoration: underline;
}

input,
select,
textarea,
.nice-select,
.form-control {
width: 100%;
height: auto;
border: none;
font-size: 20px;
border-radius: 0;
padding: 20px 0;
background-color: #fff;
border-bottom: 2px solid rgba(41, 41, 41, 0.1);
}

input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.nice-select::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
color: var(--main-color);
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
.nice-select:-ms-input-placeholder,
.form-control:-ms-input-placeholder {
color: var(--main-color);
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

input::-ms-input-placeholder,
select::-ms-input-placeholder,
textarea::-ms-input-placeholder,
.nice-select::-ms-input-placeholder,
.form-control::-ms-input-placeholder {
color: var(--main-color);
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.nice-select::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
color: var(--main-color);
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder,
.nice-select::-moz-placeholder,
.form-control::-moz-placeholder {
color: var(--main-color);
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
.nice-select:-ms-input-placeholder,
.form-control:-ms-input-placeholder {
color: var(--main-color);
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

input::placeholder,
select::placeholder,
textarea::placeholder,
.nice-select::placeholder,
.form-control::placeholder {
color: var(--main-color);
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

input:focus,
select:focus,
textarea:focus,
.nice-select:focus,
.form-control:focus {
border-bottom: 2px solid rgba(41, 41, 41, 0.1);
}

.nice-select {
font-size: 20px;
line-height: 1.3;
}

.nice-select:after {
width: 8px;
height: 8px;
right: 8px;
border-color: var(--heading-color);
}

.nice-select .current {
font-weight: 500;
color: var(--heading-color);
}

.nice-select .list {
min-width: 100%;
border-radius: 0;
}

textarea {
display: inherit;
padding-top: 20px;
}

label {
cursor: pointer;
font-weight: 500;
margin-bottom: 5px;
color: var(--main-color);
}

.form-group {
position: relative;
margin-bottom: 15px;
}

input:focus,
button:focus,
.form-control:focus {
outline: none;
box-shadow: none;
border-color: #cfdbf1;
}

input[type="search"]::-ms-clear {
display: none;
width: 0;
height: 0;
}

input[type="search"]::-ms-reveal {
display: none;
width: 0;
height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}

input[type="checkbox"],
input[type="radio"] {
height: auto;
width: auto;
}

html {
scroll-behavior: unset !important;
}

/*
* ----------------------------------------------------------------------------------------
* 02.COMMON CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.no-gap {
margin-left: 0;
margin-right: 0;
}

.no-gap > div {
padding-left: 0;
padding-right: 0;
}

.section-title {
margin-bottom: 50px;
}

.has-border {
border-bottom: 1px solid #454545;
}

.section-title .sub-title {
font-weight: 500;
display: block;
color: rgba(255, 255, 255, 0.65);
}

.section-black-title h2 {
color: var(--main-color);
}

.section-title h2 {
margin-bottom: 15px;
font-size: 60px;
line-height: 70px;
text-transform: uppercase;
padding-bottom: 20px;
}

.section-title p {
font-size: 16px;
text-transform: uppercase;
}

.section-title h2 span {
color: var(--main-color);
}

.section-title h6 {
font-size: 18px;
}

.section-title h6 span {
color: var(--primary-color);
}
/* Button Style One */
.theme-btn {
background: var(--main-color);
color: var(--white-color);
cursor: pointer;
display: inline-block;
border: 1px solid var(--button-border);
font-size: 14px;
font-weight: 500;
line-height: 20px;
margin: 0 5px 10px 0;
overflow: visible;
border-radius: 2px;
padding: 20px 34px;
text-align: center;
text-transform: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.theme-btn3 {
background: white;
color: #070707;
cursor: pointer;
display: inline-block;
border: 1px solid var(--button-border);
font-size: 14px;
font-weight: 500;
line-height: 20px;
margin: 0 5px 10px 0;
overflow: visible;
border-radius: 2px;
padding: 20px 34px;
text-align: center;
text-transform: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.theme-btn-two {
background: var(--primary-color);
color: var(--black-color);
}

.theme-btn:focus {
text-decoration: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.theme-btn3:focus {
text-decoration: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.theme-btn i {
margin-left: 4px;
}
.theme-btn3 i {
margin-left: 4px;
}

.theme-btn:hover {
border: 1px solid var(--button-border);
text-decoration: none;
color: var(--main-color);
-webkit-transition: 0.3s;
transition: 0.3s;
background: transparent;
}

.theme-btn3:hover {
border: 1px solid var(--button-border);
text-decoration: none;
color: white;
-webkit-transition: 0.3s;
transition: 0.3s;
background: transparent;
}
.theme-btn-two:hover {
border: 1px solid var(--border-color);
text-decoration: none;
color: var(--heading-color);
}

.theme-btn:active {
box-shadow: rgba(0, 0, 0, 0.125) 0 3px 5px inset;
outline: 0;
}

/* Button Style Two */
.theme-btn2{
    background: white;
    color: black;
    cursor: pointer;
    display: inline-block;
    border: 1px solid var(--button-border);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin: 0 5px 10px 0;
    overflow: visible;
    border-radius: 2px;
    padding: 20px 34px;
    text-align: center;
    text-transform: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.theme-btn2-two {
    background: var(--primary-color);
    color: var(--black-color);
    }
    
.theme-btn2:focus {
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
    
.theme-btn2 i {
    margin-left: 4px;
    }
    
.theme-btn2:hover {
    border: 1px solid #f4f3ed25;
    text-decoration: none;
    color: white;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background: transparent;
}
.theme-btn2-two:hover {
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--heading-color);
}
    
.theme-btn2:active {
    box-shadow: rgba(0, 0, 0, 0.125) 0 3px 5px inset;
    outline: 0;
}

/* End Button Style */

.details-btn {
width: 50px;
height: 50px;
background: #131313;
line-height: 50px;
border-radius: 50%;
text-align: center;
display: inline-block;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 1px solid var(--border-color);
}

.details-btn:hover {
color: var(--black-color);
background: var(--primary-color);
}

.read-more {
color: white;
font-size: 14px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
text-transform: capitalize;
}

.read-more i {
float: right;
margin-top: 2px;
margin-left: 7px;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.read-more:hover {
color: var(--primary-color);
}

.read-more:hover i {
margin-left: 10px;
}

.list-style-one li {
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: 500;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.list-style-one li:not(:last-child) {
margin-bottom: 10px;
}

.list-style-one.two-column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 30px;
}

.list-style-one.two-column li {
width: 48%;
color: rgb(119, 119, 125);
font-size: 16px;
}

.list-style-one.two-column li i {
padding-right: 10px;
}

.list-style-two li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.list-style-two li:before {
content: "\f00c";
line-height: 1;
font-size: 16px;
margin-right: 20px;
color: var(--lighter-color);
width: 30px;
height: 30px;
background: var(--primary-color);
line-height: 30px;
border-radius: 50%;
text-align: center;
font-family: "Font Awesome 5 Pro";
}

.list-style-two li:not(:last-child) {
margin-bottom: 25px;
}

.social-style-one {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-left: -5px;
margin-right: -5px;
}

.social-style-one a {
color: #b0afaf;
font-size: 14px;
margin-left: 5px;
margin-right: 5px;
width: 35px;
height: 35px;
background: #0c0b0b;
line-height: 35px;
border-radius: 50%;
text-align: center;
}

.social-style-one a:hover {
color: var(--black-color);
background: var(--primary-color);
}

.social-style-two {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-left: -12px;
margin-right: -12px;
}

.social-style-two a {
color: rgba(255, 255, 255, 0.35);
margin-left: 12px;
margin-right: 12px;
}

.social-style-two a:hover {
color: var(--primary-color);
}

.pagination {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
margin-left: -15px;
margin-right: -15px;
}

.pagination li {
margin: 10px 15px 0;
}

.pagination li a,
.pagination li .page-link {
padding: 0;
border: none;
font-size: 24px;
box-shadow: none;
font-weight: 600;
color: var(--main-color);
background: transparent;
}

.pagination li.active .page-link,
.pagination li:hover:not(.disabled) .page-link {
background: transparent;
color: var(--primary-color);
}

.ratting {
line-height: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-left: -5px;
margin-right: -5px;
}

.ratting i {
margin: 5px;
color: #ab6034;
}

.slick-arrow {
width: 40px;
height: 40px;
color: var(--black-color);
-webkit-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
border-radius: 50%;
background: var(--main-color);
border: 1px solid var(--button-border);
}

.slick-arrow:focus,
.slick-arrow:hover {
color: var(--white-color);
background: transparent;
border-color: var(--main-color);
}

.slider-arrows button:first-child {
margin-right: 5px;
}

.slider-arrows button:last-child {
}

/*** Slick Dots ***/
.slick-dots {
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;
}

.slick-dots li {
position: relative;
cursor: pointer;
margin: 8px;
width: 6px;
height: 6px;
opacity: 0.3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-webkit-transition: 0.5s;
transition: 0.5s;
border-radius: 50%;
background: #1d1b1a;
}

.slick-dots li button {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
height: 0;
}

.slick-dots li:before {
content: "";
width: 0;
height: 0;
left: 50%;
top: 50%;
-webkit-transition: 0.5s;
transition: 0.5s;
border-radius: 50%;
position: absolute;
border: 1px solid var(--primary-color);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.slick-dots li.slick-active {
background: var(--primary-color);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.slick-dots li.slick-active:before {
width: 21px;
height: 21px;
}

.single-page-hero-area {
padding-top: 200px;
padding-bottom: 50px;
background: var(--primary-color);
}

.single-page-hero-area h2 {
margin-bottom: 15px;
font-size: 150px;
text-transform: uppercase;
padding-bottom: 20px;
text-align: center;
color: var(--main-color);
}

.single-page-hero-area p {
padding: 0px 200px;
font-size: 16px;
line-height: 24px;
text-align: center;
color: var(--main-color);
}

/*
* ----------------------------------------------------------------------------------------
* 03.MENU CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.header-area {
position: relative;
left: 0px;
top: 0px;
z-index: 999;
width: 100%;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}

.fixed-header .header-upper {
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
border-bottom: 1px solid rgba(119, 119, 125, 0.2);
background: var(--primary-color);
}

.fixed-header .header-inner {
padding: 15px 0px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}

.header-inner {
padding: 30px 0px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}

.main-header .header-upper {
z-index: 5;
width: 100%;
position: fixed;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}

.logo img {
width: 100px;
}

.main-menu {
text-align: right;
}

.main-menu ul li {
display: inline-block;
margin-left: 30px;
position: relative;
}

.main-menu ul li:last-child {
margin-right: 0;
}

.main-menu ul li.has-dropdown > a {
padding-right: 14px;
}

.main-menu ul li.has-dropdown > a:after {
position: absolute;
content: "\f107";
right: -4px;
top: 10px;
font-size: 16px;
color: var(--main-color);
font-family: "Font Awesome 6 Pro";
-webkit-transition: 0.3s;
transition: 0.3s;
}

.main-menu ul li .sub-menu li.has-dropdown > a:after {
right: 15px;
top: 6px;
}

.main-menu ul li a {
font-size: 15px;
line-height: 20px;
font-weight: 500;
padding: 10px 0px;
display: inline-block;
-webkit-transition: 0.3s;
transition: 0.3s;
text-transform: uppercase;
color: var(--main-color);
}

.main-menu ul li .active {
color: var(--primary-color);
}

.main-menu ul li:hover > a {
color: var(--main-color);
}

.main-menu ul li:hover > a:after {
color: var(--main-color);
}

.main-menu ul li:hover .sub-menu {
visibility: visible;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
top: 100%;
}

.main-menu ul li .sub-menu {
margin-top: 10px;
position: absolute;
right: 0;
top: 110%;
min-width: 180px;
background-color: var(--black-color);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility: hidden;
z-index: 99;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
padding: 20px 0px 15px;
-webkit-transition: 0.3s;
transition: 0.3s;
border-top: 2px solid #000;
}

.main-menu ul li .sub-menu li {
margin: 0;
padding: 0;
display: inline;
position: relative;
width: 100%;
display: block;
}

.main-menu ul li .sub-menu li a {
display: block;
padding: 5px 25px;
-webkit-transition: 0.3s;
transition: 0.3s;
text-align: left;
font-size: 13px;
line-height: 20px;
font-weight: 400;
transition: 0.3s;
text-transform: uppercase;
color: var(--heading-color);
}

.main-menu ul li .sub-menu li .active {
color: var(--primary-color);
}

.main-menu ul li .sub-menu li:hover > a {
color: var(--primary-color);
}

.main-menu ul li .sub-menu li > .sub-menu {
right: 120%;
top: 0;
visibility: hidden;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.main-menu ul li .sub-menu li:hover > .sub-menu {
right: 100%;
left: auto;
visibility: visible;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.side-menu-icon i {
color: var(--main-color);
font-size: 32px;
cursor: pointer;
position: relative;
top: 5px;
}

.linkstyle {
cursor: pointer;
font-size: 18px;
position: relative;
white-space: nowrap;
}

.linkstyle:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: var(--main-color);
top: 100%;
left: 0;
pointer-events: none;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}

.linkstyle:hover:before {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

/*----------------------------------------*/
/*  MEAN MENU CSS START
/*----------------------------------------*/
/* mean menu customize */
.mean-container a.meanmenu-reveal {
display: none;
}

.mean-container .mean-nav {
background: none;
margin-top: 0;
}

.mean-container .mean-bar {
padding: 0;
min-height: auto;
background: none;
}

.mean-container .mean-nav > ul {
padding: 0;
margin: 0;
width: 100%;
list-style-type: none;
display: block !important;
}

.mean-container a.meanmenu-reveal {
display: none !important;
}

.mean-container .mean-nav ul li a {
width: 100%;
padding: 10px 0;
color: var(--primary-color);
border-top: 1px solid #353535;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
}

.mean-container .mean-nav ul li a:hover {
color: var(--primary-color);
}

.mean-container .mean-nav ul li a.mean-expand {
margin-top: 5px;
padding: 0 !important;
line-height: 14px;
border: 1px solid #353535 !important;
height: 30px;
width: 30px;
line-height: 30px;
color: var(--primary-color);
line-height: 30px;
top: 0;
font-weight: 400;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
background: var(--tp-theme-1);
color: var(--tp-common-white);
border-color: #353535;
}

.mean-container .mean-nav ul li > a > i {
display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
color: var(--tp-common-white);
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
color: var(--tp-heading-primary);
}

/*----------------------------------------*/
/*  Sidebar CSS START
/*----------------------------------------*/
.sidebar__area {
position: fixed;
right: -485px;
top: 0;
width: 465px;
height: 100%;
background: var(--black-color) none repeat scroll 0 0;
overflow-y: scroll;
-ms-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
-o-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
z-index: 9999;
}

@media (max-width: 575px) {
.sidebar__area {
width: 290px;
}
}

.sidebar__area.sidebar-opened {
right: 0px;
}

.sidebar__area-2 {
left: -485px;
}

.sidebar__area-2.sidebar-opened {
left: 0px;
}

.sidebar__wrapper {
position: relative;
padding: 45px;
background: var(--black-color);
}

@media (max-width: 575px) {
.sidebar__wrapper {
padding: 20px;
}
}

.sidebar__close {
position: absolute;
top: 35px;
right: 45px;
}

@media (max-width: 575px) {
.sidebar__close {
top: 12px;
right: 20px;
}
}

.sidebar__close-btn {
display: inline-block;
font-size: 16px;
height: 45px;
width: 45px;
line-height: 49px;
background: #000;
color: #fff;
border-radius: 50%;
}

.sidebar__close-btn:hover {
background: #000;
}

.sidebar__close-btn-3 {
background: #666;
}

.sidebar__close-btn-3:hover {
background: #666;
}

.body-overlay {
background-color: rgba(0, 0, 0, 0.7);
height: 100%;
width: 100%;
position: fixed;
top: 0;
z-index: 999;
left: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility: hidden;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}

.body-overlay:hover {
cursor: pointer;
}

.body-overlay.opened {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
}

/*
* ----------------------------------------------------------------------------------------
* 04.HEADER CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.main-hero-area {
padding-top: 115px;
background: var(--primary-color);
}

.hero-content h2 {
font-weight: 500;
font-size: 185px;
text-transform: uppercase;
text-align: center;
color: var(--main-color);
}

.hero-content p {
color: var(--main-color);
}

.hero-btns {
margin-top: 30px;
}

.hero-content .hero-btns .read-more {
margin-top: 15px;
text-decoration: underline;
}

.author-image-part {
z-index: 1;
overflow: hidden;
max-width: 575px;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
border-radius: 0 0 580px 565px;
}

.author-image-part .bg-circle {
z-index: -2;
width: 425px;
height: 425px;
position: absolute;
left: 5%;
top: 4%;
border-radius: 50%;
background: var(--black-color);
}

.author-image-part .progress-shape {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
text-align: center;
}

.hero-counter-area {
margin-top: 60px;
}

.counter-item {
text-align: center;
}

.counter-title {
color: var(--primary-color);
}

.hero-counter-area .count-text {
line-height: 1;
font-weight: 700;
color: var(--primary-color);
text-align: center;
font-size: 50px;
}

.hero-counter-area .count-text.plus:after {
content: "+";
}

.hero-counter-area .count-text.k-plus:after {
content: "k+";
}

.hero-counter-area .count-text.percent:after {
content: "%+";
}

.hero-counter-area .counter-title {
display: block;
}

.hero-image {
text-align: center;
position: relative;
}

.hero-image img {
width: 400px;
text-align: center;
border-radius: 20px;
border: 3px solid #fff;
margin-top: -100px;
rotate: 10deg;
-webkit-transition: 0.4s;
transition: 0.4s;
}

.hero-image img:hover {
rotate: 0deg;
-webkit-transition: 0.4s;
transition: 0.4s;
}

/*Clienti Reviews*/
.clienti-reviews .clienti-profile {
list-style-type: none;
display: flex;
padding: 0;
margin: 0;
}

.clienti-reviews .clienti-profile li {
flex: 0 0 60px;
height: 60px;
width: 60px;
margin-left: -15px;
border-radius: 100%;
}

.clienti-reviews .clienti-profile li img {
border-radius: 100%;
}

.clienti-reviews .clienti-profile li:first-child {
margin-left: 0px;
}

.clienti-reviews .reviews {
font-size: 18px;
font-weight: 500;
color: var(--main-color);
display: block;
margin-top: 20px;
}

.clienti-reviews .reviews span {
color: #d57835;
font-size: 15px;
}

.clienti-reviews .reviews p {
margin-top: 20px;
font-size: 16px;
}

/*
* ----------------------------------------------------------------------------------------
* 05.ABOUT CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.about-area {
padding-top: 100px;
padding-bottom: 100px;
}

.about-img-div {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}

.about-img-div img {
border-radius: 20px;
border: 4px solid white;
}

.hero-content .job {
display: inline-block;
background-color: #f5f5f5;
padding: 15px 40px;
margin-top: 10px;
}

.hero-content .job span {
position: relative;
display: inline-block;
padding-right: 15px;
margin-right: 10px;
}

.hero-content .job span:last-child {
margin: 0px;
padding: 0px;
}

.hero-content .job span:last-child:after {
display: none;
}

.hero-content .job span:after {
position: absolute;
content: "";
width: 6px;
height: 6px;
background-color: rgba(0, 0, 0, 0.15);
right: 0px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 100%;
}

.about-content-part p {
font-size: 30px;
line-height: 1.4em;
text-align: justify;
}

.about-image-part {
text-align: center;
padding: 40px;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
/* Image-box-Animation start */

.about-img-mini {
border: 2px solid var(--primary-color);
border-radius: 6px;
}

/* Image-box-Animation End */

.about-image-area img {
width: 50%;
text-align: center;
}

.about-image-part img {
border-radius: 10px;
}

.about-image-part h2 {
margin-top: 30px;
font-size: 30px;
}

.about-content-part h2 {
font-size: 55px;
line-height: 72px;
margin-bottom: 20px;
}

.about-content-part h2 span {
padding: 0 20px;
border: 1px solid rgba(0, 0, 0, 0.1);
}

.about-social {
margin-top: 30px;
}

.about-social ul {
list-style: none;
}

.about-social ul li {
display: inline-block;
margin-right: 15px;
}

.about-social ul li a {
font-size: 20px;
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 10px 14px;
border-radius: 3pz;
}

.about-image-part .dot-shape {
position: absolute;
left: -10%;
top: 25%;
-webkit-animation: rotated_circle linear 10s infinite;
animation: rotated_circle linear 10s infinite;
}

.about-btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
color: #fff;
border: 1px solid rgb(237, 237, 238);
padding: 15px 20px 10px 20px;
border-radius: 30px;
}

.about-btn img {
border-radius: 50%;
margin-right: 15px;
}

.about-btn h6 {
font-weight: 400;
color: rgb(119, 119, 125);
margin-bottom: 0;
margin-right: 15px;
margin-top: -5px;
}

.about-btn i {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.about-counter-part {
text-align: center;
background-color: var(--main-color);
border-radius: 10px;
padding: 50px;
position: relative;
}

.about-counter-part:before {
position: absolute;
content: "";
left: -22px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 28px;
width: 28px;
background-color: var(--main-color);
rotate: 48deg;
}

.about-counter-part h2 {
font-size: 80px;
font-weight: 500;
line-height: 1;
letter-spacing: -2.4px;
color: var(--black-color);
margin-bottom: 15px;
}

.about-counter-part p {
color: var(--black-color);
font-size: 12px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 2.4px;
text-transform: uppercase;
}

h2.about-pre-title {
font-size: 40px;
font-family: var(--text-font);
font-size: 22px;
text-transform: capitalize;
color: var(--primary-color);
}

.single-about-content-part span {
color: var(--main-color);
}

/*
* ----------------------------------------------------------------------------------------
* 06.SERVICE CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.services-area {
padding-top: 100px;
padding-bottom: 100px;
background: var(--primary-color);
}

.service-item {
position: relative;
padding: 60px 40px;
border-radius: 20px;
border: 1px solid var(--border-color);
background: var(--lighter-color);
margin-bottom: 30px;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.service-item:hover.service-item h5 {
color: var(--primary-color);
background: var(--main-color);
-webkit-transition: 0.5s;
transition: 0.5s;
}

.service-item h5 {
margin-bottom: 60px;
color: rgb(119, 119, 125);
font-family: var(--text-font);
border: 1px solid;
display: inline-block;
padding: 4px 10px;
font-size: 14px;
border-radius: 6px;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.service-item p {
margin-bottom: 0;
color: rgb(119, 119, 125);
}

.service-item h4 {
color: var(--main-color);
font-size: 30px;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
}

.service-item i {
position: absolute;
font-size: 60px;
color: var(--main-color);
-webkit-transition: 0.5s;
transition: 0.5s;
top: 18%;
right: 4%;
font-size: 30px;
}

.service-item:hover {
border-color: var(--primary-color);
-webkit-transition: 0.5s;
transition: 0.5s;
}

.service-item:hover.service-item i {
rotate: 45deg;
}

.service-item:hover .details-btn {
color: var(--black-color);
background: var(--primary-color);
}

/*
* ----------------------------------------------------------------------------------------
* 07.SKILL CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.skill-area {
padding-top: 20px;
}

.skill-item {
-webkit-transition: 0.5s;
transition: 0.5s;
text-align: center;
margin-bottom: 30px;
border-radius: 14px;
padding: 25px;
border: 1px solid var(--border-color);
}

.skill-item h5 {
margin-top: 20px;
color: var(--subtitle-color);
font-size: 16px;
line-height: 19px;
}

.skill-item .percent {
padding: 10px;
display: block;
font-size: 20px;
font-weight: 600;

color: var(--black-color);
}

.skill-item:hover {
border-color: var(--primary-color);
}

.skill-item:hover .percent {
color: var(--heading-color);
background: var(--black-color);
}

.extra-skills {
}

.extra-skills ul {
margin-top: 30px;
}

ul.extra-skills li {
border: 1px solid var(--border-color);
display: inline-block;
border-radius: 12px;
padding: 3px 10px;
margin-bottom: 10px;
margin-right: 20px;
}

ul.extra-skills li i {
padding-right: 10px;
}

/*
* ----------------------------------------------------------------------------------------
* 08.RESUME CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.resume-area {
padding-top: 100px;
padding-bottom: 100px;
background: var(--primary-color);
}

.resume-wrapper {
position: relative;
}

.resume-wrapper:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
}

.resume-wrapper i {
color: var(--primary-color);
font-size: 40px;
margin-bottom: 30px;
display: block;
}

.resume-wrapper .resume-box {
margin-bottom: 20px;
background: var(--lighter-color);
padding: 60px 40px;
border-radius: 20px;
}

.resume-box h2 {
color: var(--main-color);
font-size: 30px;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
}

.resume-wrapper .resume-box:last-child {
margin-bottom: 0;
}

.resume-wrapper .resume-box .resume-date {
background: var(--main-color);
position: relative;
display: inline-block;
border: 2px solid var(--border-color);
border-radius: 2em;
margin-bottom: 1em;
padding: 5px 12px;
font-weight: 400;
color: #fff;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
-webkit-transition: linear 0.1s;
transition: linear 0.1s;
}

.resume-wrapper .resume-box .resume-date:before {
content: "";
position: absolute;
top: 50%;
left: -20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 20px;
height: 1px;
border-top: 2px solid var(--main-color);
}

.resume-wrapper .resume-box .resume-date:after {
content: "";
position: absolute;
top: 50%;
left: -23px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: var(--main-color);
width: 5px;
height: 5px;
border-radius: 50%;
}

.resume-box p {
margin-bottom: 0;
margin-top: 20px;
color: rgb(119, 119, 125);
text-align: justify;
}

.resume-box span {
color: rgb(119, 119, 125);
}

.skill-area {
padding-top: 120px;
background: var(--primary-color);
}

.skill-item {
-webkit-transition: 0.5s;
transition: 0.5s;
text-align: center;
margin-bottom: 30px;
border-radius: 14px;
padding: 40px 30px;
background: var(--lighter-color);
}

.skill-item h5 {
color: var(--main-color);
font-size: 20px;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
}

.skill-item .percent {
padding: 10px;
display: block;
font-size: 20px;
font-weight: 600;
color: var(--black-color);
}

.skill-item:hover {
border-color: var(--primary-color);
}

.skill-item:hover .percent {
color: var(--heading-color);
background: var(--black-color);
}

.extra-skills {
}

.extra-skills ul {
margin-top: 30px;
}

ul.extra-skills li {
border: 2px solid var(--border-color);
display: inline-block;
border-radius: 12px;
padding: 3px 10px;
margin-bottom: 10px;
margin-right: 20px;
}

ul.extra-skills li i {
padding-right: 10px;
}

/*
* ----------------------------------------------------------------------------------------
* 09.PORTFOLIO CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.projects-area {
padding-top: 100px;
padding-bottom: 50px;
}

.btn-2-div{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 0 0 100px 0;
}

.filter ul {
margin: 0;
padding: 0;
}

.filter ul li {
position: relative;
display: inline-block;
border: 1px dashed black;
border-radius: 2em;
margin: 0 7px 10px 0;
padding: 0.5em 1em;
font-size: 0.9em;
font-family: "Roboto Mono", monospace;
color: black;
cursor: pointer;
-webkit-transition: linear 0.1s;
transition: linear 0.1s;
}

.filter ul li:hover,
.filter ul li.mixitup-control-active {
background: black;
color: white;
}

.theme-dark .filter ul li {
border-color: white;
color: white;
}

.theme-dark .filter ul li:hover,
.theme-dark .filter ul li.mixitup-control-active {
background: white;
color: black;
}

.portfolio-box {
position: relative;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
overflow: hidden;
border-radius: 0.5em;
}

.portfolio-box:after {
content: "";
position: absolute;
top: 0;
left: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
background-image: -webkit-linear-gradient(
bottom,
rgba(0, 0, 0, 0.3),
transparent
);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
width: 100%;
height: 100%;
-webkit-transition: ease-out 0.16s;
transition: ease-out 0.16s;
}

.portfolio-box img {
-webkit-transform: scale(1);
transform: scale(1);
width: 100%;
-webkit-transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
-webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.portfolio-box .portfolio-category {
position: absolute;
top: 16px;
right: 16px;
display: inline-block;
background: rgba(0, 0, 0, 0.2);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
border-radius: 2em;
padding: 0.5em 1em;
color: white;
font-weight: 400;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.portfolio-box .portfolio-caption {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
left: 0;
visibility: hidden;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
margin-bottom: -6px;
padding: 0 30px 24px;
-webkit-transition: ease-out 0.5s;
transition: ease-out 0.5s;
}

.portfolio-box .portfolio-caption * {
margin: 0;
color: white;
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
-webkit-transition: linear 0.06s;
transition: linear 0.06s;
}

.portfolio-box .portfolio-caption *:hover {
text-shadow: 0 0 white;
}

.portfolio-box:hover:after {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.portfolio-box:hover img {
-webkit-transform: scale(1.04);
transform: scale(1.04);
-webkit-filter: blur(1.5px);
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="1.5" /></filter></svg>#filter');
filter: blur(1.5px);
}

.portfolio-box:hover .portfolio-caption {
visibility: visible;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
margin-bottom: 0;
}

.single-project-page-right,
.single-project-page-left {
border: 1px solid rgba(0, 0, 0, 0.05);
}

.single-project-page-design {
padding-top: 30px;
}

.single-project-image img {
width: 100%;
}

.single-info h3 {
font-size: 20px;
}

.single-image {
margin-bottom: 30px;
}

.single-info {
padding-bottom: 30px;
}

.single-info:last-child {
padding-bottom: 0px;
}

.single-info p {
margin-bottom: 0;
}

.project-image {
margin-bottom: 45px;
}

.single-project-item {
padding: 30px;
border: 1px solid var(--border-color);
}

/*
* ----------------------------------------------------------------------------------------
* 10.TESTIMONIALS CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.testimonials-area {
padding-top: 100px;
padding-bottom: 100px;
background: var(--primary-color);
}

.testimonial-item {
-webkit-transition: 0.5s;
transition: 0.5s;
padding: 20px 20px;
border-radius: 16px;
background: var(--lighter-color);
border: 1px solid var(--border-color);
margin-bottom: 30px;
}

.testimonial-item .author {
margin-bottom: 25px;
display: inline-block;
}

.testimonial-item .author img {
display: inline-block;
border-radius: 50%;
height: 60px;
width: 60px;
}

.testimonial-item .text {
margin-bottom: 30px;
color: rgb(119, 119, 125);
}

.testimonial-item .testi-des h5 {
margin-bottom: 0;
color: var(--main-color);
font-size: 30px;
text-transform: uppercase;
margin-top: 20px;
}

.testimonial-item .testi-des span {
margin-bottom: 0;
color: rgb(119, 119, 125);
font-size: 14px;
line-height: 22px;
}

.testimonial-item:hover {
border: 1px solid var(--main-color);
}

.testimonial-item:hover .author:before {
color: var(--black-color);
background: var(--primary-color);
}

.testimonials-wrap {
margin-left: -15px;
margin-right: -15px;
}

.testimonials-wrap .testimonial-item {
margin-left: 15px;
margin-right: 15px;
}

/*
* ----------------------------------------------------------------------------------------
* 11.PRICING CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.pricing-area {
padding-top: 100px;
padding-bottom: 100px;
}

.pricing-item {
padding: 10px;
border-radius: 16px;
margin-bottom: 30px;
border: 1px solid var(--border-color);
}

.pricing-item .pricing-header {
padding: 20px 20px;
border-radius: 16px;
border: 1px solid var(--border-color);
}

.pricing-header h4.title {
margin: 12px 0px;
color: var(--subtitle-color);
font-size: 40px;
line-height: 49px;
padding-bottom: 20px;
text-transform: uppercase;
}

.pricing-item .pricing-header .save-percent {
margin-bottom: 20px;
color: rgb(119, 119, 125);
font-size: 20px;
line-height: 27px;
}

.pricing-item .pricing-header .save-percent span {
color: var(--primary-color);
}

.pricing-item .pricing-header .price {
font-size: 38px;
font-weight: 500;
color: var(--primary-color);
}

.pricing-item .pricing-header .price:before {
content: "$";
}

.pricing-item .pricing-header .price:after {
font-size: 16px;
font-weight: 400;
color: var(--main-color);
content: "/Hour";
}

.pricing-item .pricing-details {
padding: 20px 20px;
}

.pricing-item .pricing-details p {
margin-bottom: 35px;
}

.pricing-item .pricing-details ul {
padding-bottom: 12px;
}

.pricing-item .pricing-details ul li {
margin-bottom: 10px;
}

.pricing-item .pricing-details ul li i {
padding-right: 10px;
}

.pricing-item .pricing-details ul li.unable {
color: rgb(119, 119, 125);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
}

.pricing-item .pricing-details ul li.unable:before {
color: white;
}

/*
* ----------------------------------------------------------------------------------------
* 12.CLIENTS CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.client-logo-area {
padding-top: 20px;
}

.client-logo-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -30px;
margin-right: -30px;
}

.client-logo-wrap .client-logo-item {
width: calc(20% - 60px);
margin: 0 30px 10px;
}

/*
* ----------------------------------------------------------------------------------------
* 13.CONTACT CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.contact-area {
padding-top: 100px;
padding-bottom: 100px;
background: var(--primary-color);
}
.contact-form-area {
padding: 50px 30px 20px 40px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--lighter-color);
}
.contact-form-area .form-group {
margin-bottom: 32px;
}

.contact-form-area .form-group .for-icon {
right: 26px;
font-size: 16px;
margin-bottom: 0;
position: absolute;
margin-top: -45px;
color: var(--main-color);
}

.contact-form-area .form-group .form-control {
font-size: 16px;
color: var(--main-color);
font-weight: 400;
line-height: 1.3;
padding: 19px 20px 19px 20px;
background: transparent;
border: 1px solid var(--black-color);
border-radius: 10px;
font-family: var(--text-font);
}

.contact-form-area .form-group input[type="text"] {
color: var(--main-color);
}

.contact-form-area .form-group .form-control:focus {
box-shadow: none;
background: transparent;
border-color: var(--main-color);
}

.contact-form-area .form-group label {
font-size: 16px;
color: var(--main-color);
font-weight: 400;
margin-bottom: 18px;
text-transform: uppercase;
}

.contact-form-area .form-group .nice-select .current {
font-weight: 400;
color: rgba(255, 255, 255, 0.2);
}

.contact-form-area .form-group .nice-select:focus .current {
color: white;
}

.contact-form-area .form-group .nice-select:focus:after {
border-color: white;
}

.contact-form-area .form-group .nice-select .list {
background: var(--black-color);
}

.contact-form-area .form-group .nice-select .option.focus,
.contact-form-area .form-group .nice-select .option.selected.focus,
.contact-form-area .form-group .nice-select .option:hover {
background-color: var(--heading-color);
}

.contact-form-area .form-group .nice-select:after {
right: 26px;
margin-top: -6px;
border-color: rgba(255, 255, 255, 0.2);
}

.contact-icon {
padding-bottom: 1px;
}

.circle-btn i {
font-size: 30px;
color: var(--black-color);
}

.single-contact {
padding-bottom: 20px;
}

.single-contact p {
color: rgb(119, 119, 125);
}

.single-contact h2 {
margin-top: 15px;
margin-bottom: 5px;
text-transform: capitalize;
font-weight: 400;
-webkit-transition: 0.3s;
transition: 0.3s;
text-transform: uppercase;
color: var(--main-color);
font-size: 20px;
}

.contact-content-part {
padding: 50px 30px 20px 40px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--lighter-color);
}

.contact-page-content h6 {
font-size: 18px;
margin-bottom: 22px;
color: rgb(119, 119, 125);
}

.contact-page-content .social-style-one a {
width: 40px;
height: 40px;
line-height: 40px;
color: var(--lighter-color);
}

.contact-page-content .social-style-one a:not(:hover) {
background: white;
}

.contact-page-form {
padding: 45px 50px 50px;
border-radius: 14px;
background: var(--lighter-color);
border: 1px solid var(--border-color);
}

.contact-page-form .form-group .nice-select,
.contact-page-form .form-group .form-control {
background: rgba(255, 255, 255, 0.07);
}

.our-location iframe {
height: 600px;
}

.input-success,
.input-error {
margin-bottom: 0;
margin-top: 10px;
border-radius: 4px;
display: none;
color: green;
}

.input-success {
border: 1px solid #01b500;
}

.input-error {
border: 1px solid #ff0000;
}

.has-error .help-block.with-errors {
margin-top: 5px;
color: red;
}

#msgSubmit.h4 {
font-size: 20px;
margin-bottom: 0;
margin-top: 10px;
}

/*
* ----------------------------------------------------------------------------------------
* 14.FOOTER CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.main-footer {
background: var(--primary-color);
}

.footer-bottom {
}

.copyrights {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
}

p.copy-left-text {
color: var(--main-color);
font-size: 12px;
line-height: 12px;
font-weight: 300;
padding: 0;
margin: 0;
}

p.copy-right-text {
color: var(--main-color);
font-size: 12px;
line-height: 20px;
font-weight: 300;
-moz-text-align-last: right;
text-align-last: right;
}
.footer-img {
align-self: right;
}

.footer-top h2 {
color: var(--main-color);
font-size: 180px;
line-height: 1em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
}

.footer-top {
padding-top: 100px;
padding-bottom: 100px;
}
.footer-top p {
color: var(--main-color);
font-size: 20px;
text-align: center;
}

/*
* ----------------------------------------------------------------------------------------
* 15.PRELOADER & BOUNCE CCS STYLE
* ----------------------------------------------------------------------------------------
*/
html.lenis,
html.lenis body {
height: auto;
}

.lenis.lenis-smooth {
scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}

.lenis.lenis-stopped {
overflow: hidden;
}

.lenis.lenis-smooth iframe {
pointer-events: none;
}

body.loaded {
overflow: hidden !important;
height: 100% !important;
}

.preloader {
position: fixed;
z-index: 10;
height: 100vh;
width: 100%;
left: 0;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: transparent;
z-index: 99999999999999;
}

.preloader svg {
position: absolute;
top: 0;
width: 100vw;
height: 110vh;
fill: var(--body-background);
}

.preloader .preloader-heading .load-text {
font-size: 20px;
font-weight: 200;
letter-spacing: 15px;
text-transform: uppercase;
z-index: 20;
}

.load-text span {
-webkit-animation: loading 1s infinite alternate;
animation: loading 1s infinite alternate;
}

.load-text span:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}

.load-text span:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}

.load-text span:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}

.load-text span:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}

.load-text span:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.load-text span:nth-child(6) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.load-text span:nth-child(7) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}

@-webkit-keyframes loading {
0% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}

@keyframes loading {
0% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}

.color-pulse {
background: #00ff00;
}

.circle {
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0px 0px 1px 1px #0000001a;
}

.pulse {
-webkit-animation: pulse-animation 2s infinite;
animation: pulse-animation 2s infinite;
}

@-webkit-keyframes pulse-animation {
0% {
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
}

100% {
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
}
}

@keyframes pulse-animation {
0% {
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
}

100% {
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
}
}

.light-dark-version {
position: fixed;
top: 45px;
right: 40px;
z-index: 9999;
cursor: pointer;
}

.progress-wrap {
position: fixed;
bottom: 30px;
right: 30px;
height: 44px;
width: 44px;
cursor: pointer;
display: block;
border-radius: 50px;
z-index: 100;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility: hidden;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
mix-blend-mode: difference;
}

.progress-wrap.active-progress {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
-webkit-transform: translateY(0);
transform: translateY(0);
}

.progress-wrap i {
position: absolute;
left: 10px;
top: 8px;
font-size: 25px;
text-align: center;
}

.progress-wrap svg path {
fill: none;
}

.progress-wrap svg.progress-circle path {
stroke: #ddd;
stroke-width: 4;
box-sizing: border-box;
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
}

.progress-wrap {
right: 10px;
bottom: 20px;
}

/* ===== # Magic Cursor ===== */
#magic-cursor {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
pointer-events: none;
z-index: 10000;
-webkit-transition: opacity 0.2s ease-in-out 0.5s;
transition: opacity 0.2s ease-in-out 0.5s;
}

#ball {
position: fixed;
width: 40px;
height: 40px;
border: 2px solid #999999;
border-radius: 50%;
pointer-events: none;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
box-sizing: border-box;
/* -webkit-transform: scale(0.5);
    transform: scale(0.5); */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* -webkit-transition: 0.2s;
    transition: 0.2s; */
margin-left: -20px;
margin-top: -20px;
}

.magic-cursor.cursor-hover {
margin-left: -40px;
margin-top: -40px;
width: 80px;
height: 80px;
background-color: #cc0000;
opacity: 0.3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}

#ball.hovered {
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity: 0 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/*
* ----------------------------------------------------------------------------------------
* 16.BLOG CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.blog-area {
padding: 100px 0px;
}

.blog-post-box {
margin-bottom: 60px;
border: 1px solid #242424;
padding: 40px 20px;
}

.blog-post-box .blog-post-img {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
border-radius: 0.5em;
}

.blog-post-box .blog-post-img img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
-webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog-post-box .blog-post-img .blog-post-category {
position: absolute;
top: 16px;
left: 16px;
background: rgba(0, 0, 0, 0.2);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
border-radius: 2em;
padding: 0.5em 1em;
color: white;
font-weight: 400;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.blog-post-box .blog-post-img .blog-post-category a {
color: var(--primary-color);
font-size: 12px;
}

.blog-post-box .blog-post-img .blog-post-category a:hover {
color: white;
}

.blog-post-box .blog-post-img:hover img {
-webkit-transform: scale(1.04);
transform: scale(1.04);
-webkit-filter: blur(1.5px);
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="1.5" /></filter></svg>#filter');
filter: blur(1.5px);
}

.blog-post-caption {
padding-left: 60px;
}

.blog-post-caption h2 a {
display: block;
padding: 10px 0px;
color: var(--white-color);
font-family: var(--title-font);
font-size: 40px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.3px;
text-transform: uppercase;
}

.blog-post-caption h3 {
font-size: 13px;
text-transform: uppercase;
color: var(--primary-color);
font-family: var(--text-font);
}

.blog-category {
padding: 80px 0px;
}

.single-blog-post {
margin-bottom: 50px;
}

.single-blog-post h2 {
font-size: 22px;
}

.single-blog-post a.read-more {
background: #000;
color: #fff;
padding: 6px 20px;
border: 1px solid #000;
}

.single-blog-post a.read-more:hover {
background: transparent;
color: #000;
border: 1px solid #000;
}

.post-date {
margin-bottom: 10px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 30px;
}

.post-date span {
margin-right: 20px;
color: var(--heading-color);
background: var(--primary-color);
padding: 10px 20px;
border-radius: 10px;
text-transform: uppercase;
}

.post-date span i {
margin-right: 5px;
color: var(--black-color);
}

.single-blog-post p {
font-size: 16px;
margin-bottom: 20px;
}

.blog-carosel-control {
position: absolute;
top: 50%;
color: #000;
font-size: 30px;
margin-top: -50px;
background: #333;
height: 100px;
width: 25px;
text-align: center;
line-height: 99px;
}

.blog-carosel-control.right {
right: 0px;
left: auto;
}

.pagination {
margin: 0;
}

ul.blog_pagination li a {
border: 1px solid #e8e8e9;
border-radius: 0 !important;
color: #353535;
font-size: 16px;
height: 35px;
line-height: 20px;
margin: 5px;
width: 35px;
}

.black-icon {
background: #333 none repeat scroll 0 0 !important;
color: #fff !important;
}

.black-icon:hover {
background: #333 !important;
}

.black-icon i {
font-size: 14px;
}

ul.blog_pagination li a:hover {
color: #fff;
background: #333;
border: 1px solid #333;
}

.single-side-bar {
margin-bottom: 40px;
overflow: hidden;
}

.single-side-bar h2 {
margin-bottom: 15px;
font-size: 22px;
margin-top: 0;
text-transform: capitalize;
}

.single-side-bar input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid #333;
border-radius: 0;
box-shadow: none;
color: #e3e8f0;
height: 50px;
float: left;
padding-left: 10px;
}

.single-side-bar input:hover,
.single-side-bar input:focus {
border: 1px solid #333;
box-shadow: none;
outline: 0 none;
}

.single-side-bar button {
background: #333 none repeat scroll 0 0;
border: 1px solid #333;
color: #fff;
height: 42px;
padding: 0 32px;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.single-side-bar button:hover {
background: transparent;
color: #fff;
border: 1px solid #333;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.single-side-bar ul {
margin: 0;
padding: 0;
list-style: none;
}

.single-side-bar ul li a {
color: #fff;
display: block;
font-size: 16px;
padding: 5px 0;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.single-side-bar ul li a span {
float: right;
}

.single-side-bar ul li a:hover {
color: var(--primary-color);
}

.single-blog-social-icon {
overflow: hidden;
float: left;
width: 177px;
margin-bottom: 10px;
}

.single-blog-social-icon i {
border: 1px solid #333;
border-radius: 50px;
float: left;
font-size: 22px;
height: 50px;
line-height: 50px;
margin-right: 15px;
text-align: center;
width: 50px;
}

.single-blog-social-icon .facebook {
border: 1px solid #5d82d1;
color: #5d82d1;
}

.single-blog-social-icon .twitter {
border: 1px solid #00bff3;
color: #00bff3;
}

.single-blog-social-icon .youtube {
border: 1px solid #cb1d1f;
color: #cb1d1f;
}

.single-blog-social-icon .youtube-play {
border: 1px solid #cb1d1f;
color: #cb1d1f;
}

.single-blog-social-icon .behance {
border: 1px solid #0068ff;
color: #0068ff;
}

.single-blog-social-icon .dribbble {
border: 1px solid #ea4c8a;
color: #ea4c8a;
}

.tag {
overflow: hidden;
}

.tag a {
color: #fff;
float: left;
font-size: 14px;
font-weight: 300;
border-radius: 12px;
margin: 5px 7px;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
padding: 8px 20px;
border: 1px solid var(--border-color);
}

.tag a:hover {
color: #ccc;
border: 1px solid #333;
background: transparent;
}

.single-blog-post-details blockquote {
font-size: 16px;
line-height: 28px;
padding-left: 40px;
border-left: 1px solid #fff;
}

.single-blog-post-details img {
width: 100%;
}

.single-blog-post-details h2 {
padding: 20px 0px;
font-size: 40px;
color: var(--white-color);
}

.next-previews-button-design {
margin-top: 40px;
overflow: hidden;
}

.next-previews-button-design a {
color: #000;
}

.post-comments-area {
overflow: hidden;
margin-top: 50px;
}

.post-comments-area h2 {
margin-bottom: 20px;
}

.single-comment {
overflow: hidden;
margin-bottom: 60px;
}

.single-comment img {
float: left;
margin-right: 50px;
margin-bottom: 80px;
width: 100px;
border-radius: 50%;
}

.single-comment h5 {
font-weight: 700;
}

.single-comment p {
}

.single-comment a {
color: #fff;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

.single-comment a:hover {
color: #333;
}

.single-comment a i {
font-size: 10px;
background: #767676 none repeat scroll 0 0;
color: #fff;
padding: 5px;
margin-right: 5px;
border-radius: 30px;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

.single-comment a:hover i {
background: #333 none repeat scroll 0 0;
border-radius: 30px;
color: #fff;
font-size: 10px;
padding: 5px;
}

.comment-form-area {
margin-left: 150px;
background: #191919;
padding: 50px 30px;
border-radius: 12px;
}

.comment-form-area input {
background: var(--white-color);
border: 1px solid #e3e8f0;
box-shadow: none;
color: var(--black-color);
height: 50px;
border-radius: 0;
padding-left: 10px;
}

.comment-form-area input:hover,
.comment-form-area input:focus {
border: 1px solid var(--border-color);
box-shadow: none;
outline: 0 none;
}

.comment-form-area textarea {
background: var(--white-color);
border: 1px solid #e3e8f0;
box-shadow: none;
color: var(--black-color);
height: 150px;
border-radius: 0;
padding-left: 10px;
}

.comment-form-area textarea:hover,
.comment-form-area textarea:focus {
border: 1px solid var(--border-color);
box-shadow: none;
outline: 0 none;
}

.comment-form-area button {
background: var(--primary-color) none repeat scroll 0 0;
border: 1px solid #333;
color: var(--black-color);
font-size: 16px;
padding: 8px 20px;
display: inline-block;
border-radius: 12px;
}

.owl-theme .owl-controls .owl-page span {
display: block;
width: 6px;
height: 6px;
margin: 5px 7px;
filter: Alpha(Opacity=50);
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
border-radius: 20px;
background: #000;
}

.single-blog {
margin-right: 30px;
}

.single-blog h5 {
font-weight: 300;
font-size: 12px;
}

.single-blog h3 {
color: #aeaeae;
padding: 10px 15px;
font-size: 10px;
text-transform: uppercase;
display: inline-block;
letter-spacing: 3px;
}

.single-blog h2 {
margin-top: 0;
}

.single-blog h2 a {
font-size: 30px;
margin-top: 0;
margin-bottom: 20px;
text-transform: capitalize;
font-weight: 700;
color: #000;
}

.single-blog p {
padding-bottom: 30px;
}

.blog-description {
padding: 20px 30px;
border: 1px solid #f8f8f8;
text-align: center;
}

.blog-area .owl-theme .owl-controls .owl-page span {
display: block;
width: 5px;
height: 5px;
margin: 5px 7px;
border-radius: 20px;
background: #000;
}

.single-blog-post-details,
.single-blog-sidebar-area,
.post-comments-area {
padding-right: 60Q;
}

.single-side-bar {
}

.single-side-bar {
-webkit-transition: 0.5s;
transition: 0.5s;
margin-bottom: 30px;
border-radius: 14px;
padding: 25px;
border: 1px solid var(--border-color);
}

.company-design-area {
padding: 100px 0px;
}

.company-design-area h2 {
text-transform: uppercase;
font-size: 16px;
text-align: center;
color: #fff;
margin-bottom: 30px;
letter-spacing: 5px;
font-weight: 500;
}

.scroller__inner {
padding-block: 16px;
padding-block: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 80px;
gap: 5rem;
}

.scroller__inner img {
margin-right: 30px;
}

.scroller[data-animated="true"] {
overflow: hidden;
-webkit-mask: -webkit-linear-gradient(
left,
transparent,
white 20%,
white 80%,
transparent
);
mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-animation: scroll var(--_animation-duration, 40s)
var(--_animation-direction, forwards) linear infinite;
animation: scroll var(--_animation-duration, 40s)
var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
--_animation-direction: reverse;
}

.scroller[data-direction="left"] {
--_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
--_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
--_animation-duration: 60s;
}

@-webkit-keyframes scroll {
to {
-webkit-transform: translate(calc(-50% - 0.5rem));
transform: translate(calc(-50% - 0.5rem));
}
}

@keyframes scroll {
to {
-webkit-transform: translate(calc(-50% - 0.5rem));
transform: translate(calc(-50% - 0.5rem));
}
}


/* GALLERY START HERE */
.galllery-fluid{
    width: 1300px;
    margin: 0 auto;
}
@media only screen and (max-width: 456px) {
    .galllery-fluid{
        width: 100%;
        margin: 0 auto;
        padding: 0 10px;
    }
}

@media only screen and (min-width: 457px) and (max-width: 767px) {
    .galllery-fluid{
        width: 100%;
        margin: 0 auto;
        padding: 0 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1400px) {
    .galllery-fluid{
        width: 100%;
        margin: 0 auto;
        padding: 0 50px;
    }
}
@media only screen and (max-width: 480px) {
    .theme-btn3-div{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}



/* youtube video */
.yt-videos{
    border: 1px solid rgba(255, 255, 255, 0.315);
    border-radius: 12px;
}
/* youtube video */

/* GALLERY END HERE */