/*-------------------------------------------------
[ ## Preloader ]
*/
.pace {
user-select: none;
z-index: 99999999999999;
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 400px;
border: 0px;
height: 1px;
overflow: hidden;
background: rgba($white, 0.05);
transition: all 1s;
pointer-events: none;
&.pace-inactive{
width: 100vw;
opacity: 0;
.pace-progress{
max-width: 100vw;
}
}
.pace-progress{
transform: translate3d(0, 0, 0);
max-width: 300px;
position: fixed;
z-index: 99999999999999;
display: block;
position: absolute;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: $white;
}
}
#preloader {
width: 100%;
height: 100vh;
overflow: hidden;
position: fixed;
z-index: 9999999;
pointer-events: none;
&.isdone{
visibility: hidden;
-webkit-transition-delay: 1.5s;
-o-transition-delay: 1.5s;
transition-delay: 1.5s;
&::before,
&::after{
height: 0;
transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
transition-delay: 1s;
}
}
&::before,
&::after{
content: "";
position: fixed;
left: 0;
height: 50%;
width: 100%;
background: $body--bg;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
&::before{
top: 0;
}
&::after{
bottom: 0;
}
}
.custom-container{
max-width: 1700px;
}
.row>*{
position: relative;
}
@media (min-width: 1480px){
.col-xxl-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
}
@media (max-width: 575px){
.col-xs-6 {
flex: 0 0 auto;
width: 50%;
@media only screen and (max-width: 400px) {
width: 100%;
}
}
}
::selection{
background-color: $base--color;
color: $white;
}
.fs-10px{
font-size: 11px;
}
.op-6{
opacity: 0.6;
}
/*-------------------------------------------------
[ ## Header ]
*/
.header-section {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 9;
background-color: transparent;
}
.header {
background-color: transparent;
width: 100%;
z-index: 9;
}
.header-section.header-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9;
background-color: transparent;
margin-top: 0;
animation-fill-mode: initial;
.header-top-area{
display: none !important;
}
.header-bottom-area{
background-color: rgba(19,23,64,.5);
backdrop-filter: blur(8px);
}
}
.header-bottom-area{
position: relative;
background: transparent;
padding-top: 10px;
padding-bottom: 10px;
@media only screen and (max-width: 991px) {
background-color: rgba(19,23,64,.5);
backdrop-filter: blur(8px);
padding-bottom: 10px;
}
.navbar-expand-lg{
background-color: transparent;
padding: 0 !important;
}
@media (max-width: 991px) {
.navbar-collapse{
background-color: transparent !important;
padding: 0 !important;
}
.navbar-collapse .main-menu {
padding: 15px 0;
}
.menu_has_children .sub-menu {
display: none !important;
li{
width: 100%;
}
}
.navbar-collapse .main-menu .menu_has_children.show .sub-menu ,
.navbar-collapse .main-menu .menu_has_children.show .sub-menu {
display: flex !important;
flex-wrap: wrap;
}
}
.navbar-collapse .main-menu li:last-child .sub-menu {
left: auto;
right: 0;
}
.navbar-collapse .main-menu{
align-items: center;
@media only screen and (max-width: 991px) {
align-items: flex-start;
}
}
.navbar-collapse .main-menu li {
position: relative;
padding-right: 40px;
@media only screen and (max-width:1199px) {
padding-right: 22px !important;
}
&:last-child{
padding-right: 0;
margin-right: 0;
}
&:hover .sub-menu{
transform: scaleY(1);
}
}
.navbar-collapse .main-menu li.menu_has_children {
position: relative;
i{
font-size: 12px;
margin-left: 5px;
}
}
@media (max-width: 991px) {
.navbar-collapse .main-menu li.menu_has_children::before {
top: 12px;
right: 15px;
}
}
.navbar-collapse .main-menu li a {
position: relative;
padding: 30px 0;
font-weight: 600;
align-items: center;
color: $white;
display: inline-block;
font-size: 15px;
transition: all 0.5s;
z-index: 9;
&.active,
&:hover{
color: $base--color;
}
}
@media (max-width: 991px) {
.navbar-collapse .main-menu li a {
padding: 12px 15px !important;
}
}
.navbar-collapse .main-menu li .sub-menu {
position: absolute;
top: 60px;
left: 0px;
padding: 10px 5px;
width: 180px;
background-color: $section--bg;
border: 1px solid $border--base;
border-radius: 15px;
display: block;
transform: scaleY(0);
transform-origin: top left;
transition: all 0.5s;
z-index: 10;
@media only screen and (max-width: 991px) {
width: 180px;
}
li{
margin-right: 0;
padding-right: 0;
transition: all ease 0.5s;
position: relative;
z-index: 2;
&:last-child {
border-bottom: 0px solid;
}
&:hover{
a{
color: $base--color;
}
}
a {
width: 100%;
font-size: 12px;
padding: 5px 15px;
display: block;
transition: all ease 0.3s;
&::before{
display: none;
}
}
}
}
@media (max-width: 991px) {
.navbar-collapse .main-menu li .sub-menu {
position: initial;
opacity: 1;
visibility: visible;
display: none;
-webkit-transition: none;
transition: none;
}
}
.navbar-collapse .main-menu li:last-child .sub-menu {
left: auto;
right: 0;
}
}
.site-logo{
max-width: 160px;
@media only screen and (max-width: 991px) {
max-width: 120px;
}
}
.header-action{
margin-left: 60px;
@media only screen and (max-width: 991px) {
margin-left: 12px;
}
}
.language-select{
background: transparent;
color: $white;
border: none;
border-radius: 3px;
font-size: 14px;
font-weight: 500;
@media only screen and (max-width: 991px) {
margin-left: 12px;
}
}
.header-link{
@media only screen and (max-width: 991px) {
display: none;
}
a{
color: $white;
i{
color: $base--color;
margin-right: 5px;
font-size: 16px;
}
}
a+a{
margin-left: 20px;
}
}
.header-social{
li{
display: inline-block;
font-size: 13px;
color: $white;
}
li + li{
margin-left: 15px;
}
}
.notification-icon{
width: 42px;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($white, 0.05);
color: $color--text;
border: 1px solid $border--base;
border-radius: 10px;
font-size: 20px;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler span {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 5px;
background-color: $base--color;
color: $white;
font-size: 14px;
}