@import url('https://fonts.googleapis.com/css2?family=Belanosima:wght@400;600;700&family=Cal+Sans&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poetsen+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import "bootstrap-icons/font/bootstrap-icons";
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Montserrat", sans-serif;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 15px;
}
.navik-header,
.navik-header * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navik-header:before,
.navik-header:after,
.navik-header *:before,
.navik-header *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navik-header {
position: relative;
font-size: 16px;
line-height: 1.42857143;
background-color: transparent;
z-index: 99999;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.navik-header ul {
margin-bottom: inherit;
}
.navik-header img {
max-width: 100%;
height:24px;
vertical-align: top;
}
.navik-header a:hover,
.navik-header a:focus,
.navik-header a:active {
text-decoration: none;
}
.navik-header a:focus,
.navik-header a:active {
outline: none;
}
.navik-header-container {
position: relative;
}
.navik-header-overlay .navik-header-container {
position: inherit;
}
.navik-header .logo {
text-align: center;
padding: 30px 40px;
}
.navik-header .logo img {
max-width: 100%;
height: auto;
}
.burger-menu {
position: absolute;
top: 35px;
right: 14px;
width: 20px;
height: 17px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
-webkit-transition: transform 330ms ease-out;
-moz-transition: transform 330ms ease-out;
-o-transition: transform 330ms ease-out;
transition: transform 330ms ease-out;
}
.burger-menu.menu-open {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.line-menu {
background-color: #222222;
border-radius: 2px;
width: 100%;
height: 3px;
}
.line-menu.line-half {
width: 50%;
}
.line-menu.first-line {
transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
transform-origin: right;
}
.menu-open .line-menu.first-line {
-webkit-transform: rotate(-90deg) translateX(3px);
-moz-transform: rotate(-90deg) translateX(3px);
-o-transform: rotate(-90deg) translateX(3px);
transform: rotate(-90deg) translateX(3px);
}
.line-menu.last-line {
align-self: flex-end;
transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
transform-origin: left;
}
.menu-open .line-menu.last-line {
-webkit-transform: rotate(-90deg) translateX(-3px);
-moz-transform: rotate(-90deg) translateX(-3px);
-o-transform: rotate(-90deg) translateX(-3px);
transform: rotate(-90deg) translateX(-3px);
}
.navik-menu>ul {
display: none;
padding: 0 0 20px;
}
.navik-menu ul li {
position: relative;
}
.navik-menu ul li>a {
display: block;
font-family: "Montserrat", sans-serif;
font-size: 16px;
color: #222222;
padding: 14px 15px;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navik-menu ul li.current-menu>a,
.navik-menu ul li:hover>a {
color: #ffffff;
background-color: transparent;
}
.navik-menu ul ul li>a {
font-size: 14px;
text-transform: inherit;
background-color: #efefef;
padding: 14px 15px 14px 30px;
}
.navik-menu ul ul ul li>a {
padding: 14px 15px 14px 45px;
}
.navik-menu ul ul li:hover>a {
background-color: #efefef;
}
.dropdown-plus {
width: 49px;
height: 49px;
line-height: 49px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.dropdown-plus:before,
.dropdown-plus:after {
position: absolute;
content: '';
top: 24px;
right: 18px;
width: 13px;
height: 1px;
background-color: #111111;
}
.dropdown-plus:after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.navik-menu li>ul,
.dropdown-plus.dropdown-open:after {
display: none;
}
.header-shadow-wrapper {
position: relative;
top: 100%;
left: 0;
width: 100%;
height: 2px;
overflow: hidden;
z-index: -1;
}
.header-shadow-wrapper:after {
display: block;
position: relative;
content: "";
width: 100%;
height: 60px;
top: -60px;
border-radius: 50%;
-webkit-box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.1);
}
/* =============================================
Center menu
================================================ */
.logoCenter {
display: none;
}
.center-menu-1 .navik-menu>ul:first-child {
padding: 0;
}
/* =============================================
Dark version navigation menu
================================================ */
.navik-header.header-dark {
background-color: #111111;
}
.navik-header.header-dark .line-menu,
.navik-header.header-dark .dropdown-plus:before,
.navik-header.header-dark .dropdown-plus:after {
background-color: #fff;
}
.header-dark .navik-menu ul li>a {
color: #fff;
}
.header-dark .navik-menu ul li.current-menu>a,
.header-dark .navik-menu ul li:hover>a {
color: #26c6da;
background-color: #313131;
}
.header-dark .navik-menu ul ul li>a {
color: #c1c1c1;
background-color: #212121;
}
/* =============================================
Menu overlay
================================================ */
.navik-header-overlay {
position: absolute;
font-size: 16px;
top: 0;
left: 0;
width: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.navik-header-overlay img {
max-width: 100%;
height: auto;
vertical-align: top;
}
.navik-header-overlay a:hover,
.navik-header-overlay a:focus,
.navik-header-overlay a:active {
text-decoration: none;
}
.navik-header-overlay a:focus,
.navik-header-overlay a:active {
outline: none;
}
.navik-header-overlay .logo {
position: absolute;
top: 30px;
left: 15px;
z-index: 2;
}
.navik-header-overlay .burger-menu,
.navik-fixed-sidebar+.burger-menu {
display: block;
position: fixed;
flex-direction: inherit;
justify-content: inherit;
width: 50px;
height: 47px;
top: 30px;
right: 15px;
background: #111111;
padding: 15px;
z-index: 99999;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navik-header-overlay .burger-menu:hover {
-webkit-box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.4);
}
.navik-header-overlay .burger-menu>span,
.navik-fixed-sidebar+.burger-menu>span {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 17px;
-webkit-transition: transform 330ms ease-out;
-moz-transition: transform 330ms ease-out;
-o-transition: transform 330ms ease-out;
transition: transform 330ms ease-out;
}
.navik-header-overlay .line-menu,
.navik-fixed-sidebar+.burger-menu .line-menu {
background-color: #fff;
}
.navik-header-overlay .burger-menu.menu-open,
.navik-fixed-sidebar+.burger-menu.menu-open {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.navik-header-overlay .menu-open>span,
.navik-fixed-sidebar+.menu-open>span {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-menu-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
overflow: hidden;
overflow-y: auto;
z-index: 9999;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.nav-menu-wrapper.overlay-menu-open {
visibility: visible;
opacity: 1;
}
.navik-menu-overlay {
position: relative;
display: table;
width: 100%;
height: 100%;
}
.navik-menu-overlay>ul {
padding: 80px 0 100px;
display: table-cell;
vertical-align: middle;
text-align: right;
}
.navik-menu-overlay ul li a {
font-family: "Montserrat", sans-serif;
text-decoration: none;
}
.navik-menu-overlay>ul>li {
position: relative;
padding: 0 65px 0 15px;
margin-bottom: 12px;
}
.navik-menu-overlay>ul>li:last-child {
margin-bottom: 0;
}
.navik-menu-overlay>ul>li>.menu-overlay-link a {
display: inline-block;
color: #212121;
font-size: 28px;
font-weight: 800;
line-height: 1.2em;
text-transform: uppercase;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.navik-menu-overlay>ul>li.current-menu>.menu-overlay-link a,
.navik-menu-overlay>ul>li>.menu-overlay-link a:hover,
.overlay-menu-hover>.menu-overlay-link a,
.overlay-dropdown-plus:hover+a {
color: #26c6da !important;
}
.overlay-dropdown-plus {
width: 20px;
height: 20px;
line-height: 20px;
position: absolute;
top: 6px;
right: 30px;
opacity: 0;
cursor: pointer;
}
.overlay-dropdown-plus:before,
.overlay-dropdown-plus:after {
position: absolute;
content: '';
top: 9px;
right: 5px;
width: 10px;
height: 2px;
background-color: #616161;
}
.overlay-dropdown-plus:after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.navik-menu-overlay>ul>li>ul {
display: none;
padding: 10px 0 20px;
}
.overlay-dropdown-plus.overlay-dropdown-open:after {
display: none;
}
.navik-menu-overlay>ul>li.menuFade>.menu-overlay-link a,
.navik-menu-overlay>ul>li.menuFade>ul,
.navik-menu-overlay>ul>li.menuFade>.menu-overlay-link .overlay-dropdown-plus {
opacity: 0;
}
/* ===== IE Only ===== */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.navik-menu-overlay>ul>li.menuSlideIn>ul {
opacity: 1;
}
}
@supports (-ms-accelerator:true) {
.navik-menu-overlay>ul>li.menuSlideIn>ul {
opacity: 1;
}
}
/* ===== End ===== */
.navik-menu-overlay>ul>li li,
.navik-menu-overlay>ul ul {
display: inline;
}
.navik-menu-overlay>ul ul li {
margin-left: 32px;
}
.navik-menu-overlay>ul ul li a {
font-size: 14px;
font-style: italic;
color: #818181;
white-space: nowrap;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.navik-menu-overlay>ul ul li a:hover {
color: #26c6da !important;
}
.navik-menu-overlay>ul>li>ul>li,
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li>ul li {
position: relative;
}
.navik-menu-overlay>ul>li>ul>li:after,
.navik-header-overlay.menu-slide .navik-menu-overlay>ul ul li a::before {
position: absolute;
content: "";
top: 3px;
left: -18px;
width: 1px;
height: 13px;
background: #d1d1d1;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.navik-menu-overlay>ul>li>ul>li:first-child {
margin-left: 0;
}
.navik-menu-overlay>ul>li>ul>li:first-child:after {
display: none;
}
.navik-menu-overlay.submenu-no-separate>ul>li>ul li:after,
.navik-header-overlay.menu-slide .navik-menu-overlay.submenu-no-separate>ul ul li a::before {
display: none !important;
}
.navik-menu-overlay.submenu-no-separate>ul ul li {
margin-left: 20px;
}
@-webkit-keyframes menuFadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-80px, 0, 0);
transform: translate3d(-80px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes menuFadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-80px, 0, 0);
transform: translate3d(-80px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.navik-menu-overlay>ul>li.menuSlideIn>.menu-overlay-link a,
.navik-menu-overlay>ul>li.menuSlideIn>ul {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: menuFadeInLeft;
animation-name: menuFadeInLeft;
}
/* ===== IE Only ===== */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.navik-menu-overlay>ul>li.menuSlideIn>ul {
animation-name: menuFadeIn;
}
}
@supports (-ms-accelerator:true) {
.navik-menu-overlay>ul>li.menuSlideIn>ul {
animation-name: menuFadeIn;
}
}
/* ===== End ===== */
@-webkit-keyframes menuFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes menuFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.navik-menu-overlay>ul>li.menuSlideIn .menu-overlay-link .overlay-dropdown-plus {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: menuFadeIn;
animation-name: menuFadeIn;
}
.navik-menu-overlay>ul>li.menuSlideOut .menu-overlay-link .overlay-dropdown-plus {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: subMenuFadeOut;
animation-name: subMenuFadeOut;
}
.overlay-center-menu .navik-menu-overlay>ul>li.menuSlideIn .menu-overlay-link .overlay-dropdown-plus {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.overlay-center-menu .navik-menu-overlay>ul>li.menuSlideIn>.menu-overlay-link a,
.overlay-center-menu .navik-menu-overlay>ul>li.menuSlideIn>ul {
-webkit-animation-name: menuFadeIn;
animation-name: menuFadeIn;
}
@-webkit-keyframes subMenuFadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes subMenuFadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.overlay-submenu-close>li {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: subMenuFadeOut;
animation-name: subMenuFadeOut;
}
/* ========== Submenu vertical ========== */
.submenu-vertical>ul ul li {
margin-left: 0 !important;
}
.submenu-vertical>ul>li>ul li,
.submenu-vertical>ul>li>ul ul {
display: block;
}
.submenu-vertical>ul>li>ul>li:after {
display: none;
}
.submenu-vertical>ul>li>ul li {
position: relative;
margin-bottom: 5px;
}
.submenu-vertical>ul>li>ul li:last-child {
margin-bottom: 0 !important;
}
.submenu-vertical>ul>li ul {
position: relative;
right: -30px;
padding-right: 30px !important;
}
.submenu-vertical>ul>li>ul ul {
display: none;
padding-top: 5px;
}
.submenu-vertical>ul>li.menuFade>ul {
opacity: 1;
}
.submenu-vertical>ul>li.menuSlideIn>ul {
-webkit-animation-name: none;
animation-name: none;
}
.submenu-vertical>ul>li.menuSlideIn ul:not(.overlay-submenu-close) a {
display: inline-block;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: menuFadeInLeft;
animation-name: menuFadeInLeft;
}
.submenu-vertical>ul>li ul:not(.overlay-submenu-close) a {
opacity: 0;
}
.submenu-vertical>ul>li>ul li .overlay-dropdown-plus {
top: 1px;
right: -35px;
}
.submenu-vertical>ul>li.menuSlideOut li a {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: subMenuFadeOut;
animation-name: subMenuFadeOut;
}
.overlay-center-menu .submenu-vertical>ul>li>ul li .overlay-dropdown-plus {
right: -30px;
}
.overlay-center-menu .submenu-vertical>ul>li ul {
right: 0 !important;
padding-right: 0px !important;
}
.overlay-center-menu .submenu-vertical>ul>li.menuSlideIn ul:not(.overlay-submenu-close) a {
-webkit-animation-name: menuFadeIn;
animation-name: menuFadeIn;
}
/* ========== END ========== */
.menu-social-media {
position: absolute;
right: 0;
bottom: 24px;
font-size: 0;
width: 100%;
text-align: right;
padding: 0 65px;
}
.menu-social-media a {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 0 6px 6px;
border: 3px solid #212121;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.menu-social-media a:hover {
opacity: 0.8;
}
.menu-social-media a img {
position: absolute;
height: 14px;
width: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.header-dark .nav-menu-wrapper {
background-color: #111111;
}
.navik-header-overlay.header-dark .burger-menu.menu-open {
background-color: #000;
}
.overlay-center-menu .menu-social-media {
text-align: center;
padding: 0 15px;
}
.overlay-center-menu .menu-social-media a {
margin: 0 3px 6px;
}
.overlay-center-menu .navik-menu-overlay>ul {
text-align: center;
}
.overlay-center-menu .navik-menu-overlay>ul>li {
padding: 0 15px;
}
.overlay-center-menu .navik-menu-overlay>ul>li>ul {
padding: 15px 0 21px;
}
.overlay-center-menu .menu-overlay-link {
position: relative;
display: inline-block;
}
.overlay-center-menu .overlay-dropdown-plus {
right: -30px;
}
.header-dark .navik-menu-overlay>ul>li>.menu-overlay-link a {
color: #fff;
}
.header-dark .overlay-dropdown-plus:before,
.header-dark .overlay-dropdown-plus:after {
background-color: #717171;
}
.header-dark .navik-menu-overlay>ul ul li a {
color: #a1a1a1;
}
.header-dark .navik-menu-overlay>ul>li>ul>li:after,
.menu-slide.header-dark .navik-menu-overlay>ul ul li a::before {
background-color: #515151 !important;
}
.header-dark .menu-social-media a {
border-color: #fff;
opacity: 0.2;
}
.header-dark .menu-social-media a:hover {
opacity: 1;
}
.header-color-bg .nav-menu-wrapper {
background-color: #006aa1;
}
.header-color-bg .navik-menu-overlay>ul>li>.menu-overlay-link a {
color: #fff;
}
.header-color-bg .overlay-dropdown-plus:before,
.header-color-bg .overlay-dropdown-plus:after,
.header-color-bg .navik-menu-overlay>ul>li>ul li:after,
.menu-slide.header-color-bg .navik-menu-overlay>ul ul li a::before {
background-color: #fff !important;
}
.header-color-bg .navik-menu-overlay>ul ul li a {
color: #fff;
}
.header-color-bg .menu-social-media a {
border-color: #fff;
}
.header-color-bg .navik-menu-overlay>ul>li.current-menu>.menu-overlay-link a,
.header-color-bg .overlay-menu-hover>.menu-overlay-link a,
.header-color-bg .overlay-dropdown-plus:hover+a {
color: #fff !important;
}
.header-color-bg .navik-menu-overlay>ul>li>.menu-overlay-link a:hover,
.header-color-bg .navik-menu-overlay>ul ul li a:hover {
color: rgba(255, 255, 255, 0.8) !important;
}
.header-bg-image .nav-menu-wrapper {
background-color: inherit;
background-image: url('../examples/demo/images/overlay-menu-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-bg-image .navik-menu-overlay>ul>li>.menu-overlay-link a {
color: #fff;
}
.header-bg-image .overlay-dropdown-plus:before,
.header-bg-image .overlay-dropdown-plus:after {
background-color: #fff;
}
.header-bg-image .navik-menu-overlay>ul ul li a {
color: rgba(255, 255, 255, 0.6);
}
.header-bg-image .navik-menu-overlay>ul>li>ul>li:after {
background-color: rgba(255, 255, 255, 0.25) !important;
}
.header-bg-image .menu-social-media a {
border-color: #fff;
}
.header-bg-image .menu-social-media a:hover {
opacity: 0.6;
}
/* =============================================
Menu slide
================================================ */
.navik-header-overlay.menu-slide .nav-menu-wrapper {
width: 320px;
left: inherit;
right: 0;
visibility: visible;
opacity: 1;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.navik-header-overlay.menu-slide .nav-menu-wrapper.overlay-menu-open {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-box-shadow: -15px 0px 60px -5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -15px 0px 60px -5px rgba(0, 0, 0, 0.3);
box-shadow: -15px 0px 60px -5px rgba(0, 0, 0, 0.3);
}
.slidemenu-bg-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.overlay-menu-open+.slidemenu-bg-overlay {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul ul li a {
position: relative;
display: block;
padding-left: 20px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navik-header-overlay.menu-slide .navik-menu-overlay.submenu-no-separate>ul ul li a {
padding-left: 15px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul {
display: block;
text-align: left;
padding: 120px 0 100px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li {
padding: 0 35px 0 30px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li ul .overlay-dropdown-plus {
top: -1px;
right: -5px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay .menu-overlay-link {
padding-right: 30px;
}
.navik-header-overlay.menu-slide .menu-social-media {
right: inherit;
left: 0;
text-align: left;
padding: 0 30px;
}
.navik-header-overlay.menu-slide .menu-social-media a {
margin: 0 6px 6px 0;
}
@-webkit-keyframes menuFadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(40px, 0, 0);
transform: translate3d(40px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes menuFadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(40px, 0, 0);
transform: translate3d(40px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li.menuSlideIn>ul {
opacity: 1;
-webkit-animation-name: none;
animation-name: none;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li.menuSlideIn>.menu-overlay-link a,
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li.menuSlideIn ul:not(.overlay-submenu-close) a {
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: menuFadeInRight;
animation-name: menuFadeInRight;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul ul:not(.overlay-submenu-close) a {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li.menuSlideIn .menu-overlay-link .overlay-dropdown-plus {
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li li {
display: block;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li>ul {
padding-top: 25px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li>ul ul {
display: none;
padding-top: 5px;
padding-left: 20px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li>ul li {
margin-left: 0 !important;
margin-bottom: 5px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li>ul>li:after {
display: none;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul ul li a:hover {
padding-left: 30px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay.submenu-no-separate>ul ul li a:hover {
padding-left: 25px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul ul li a::before {
top: 2px;
left: 5px;
}
/* =============================================
Mega menu
================================================ */
.navik-menu .mega-menu-container ul li {
position: relative;
}
.navik-menu .mega-menu-container ul li a {
font-style: inherit;
color: inherit;
background-color: inherit;
padding: inherit;
}
.header-dark .navik-menu .mega-menu-container ul li a,
.navik-menu .mega-menu-container ul li:hover a {
background-color: inherit;
}
.navik-menu .mega-menu-container {
padding: 15px 30px 0;
}
.navik-menu .mega-menu>ul .dropdown-plus {
display: none;
}
.navik-menu .mega-menu-box {
margin-bottom: 30px;
}
.navik-menu .mega-menu-heading {
font-family: "Montserrat", sans-serif;
font-size: 15px;
color: #212121;
margin-bottom: 12px;
text-transform: uppercase;
}
.navik-menu .mega-menu-heading a {
color: #212121;
text-decoration: none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.header-dark .navik-menu .mega-menu-heading a {
color: #fff;
}
.navik-menu .mega-menu-desc {
font-family: "Montserrat", sans-serif;
font-size: 14px;
font-style: italic;
line-height: 1.42857143;
color: #818181;
}
.navik-menu .mega-menu-container li>ul {
display: block;
}
.navik-menu ul.mega-menu-list li a {
font-size: 14px;
font-style: italic;
color: #818181;
padding: 5px 0;
}
.navik-menu .mega-menu-heading a:hover,
.navik-menu ul.mega-menu-list li a:hover {
color: #26c6da;
}
.navik-menu ul.mega-menu-list ul {
padding-left: 15px !important;
}
.navik-menu .mega-menu-thumbnail {
margin-bottom: 20px;
}
.navik-menu .mega-menu-thumbnail img {
width: 100%;
height: auto;
}
.navik-menu .mega-menu-thumbnail>a {
display: block;
position: relative;
}
.navik-menu .mega-menu-thumbnail>a:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.navik-menu .mega-menu-thumbnail:hover>a:before {
background-color: rgba(0, 0, 0, 0.2);
}
/* =============================================
Fixed sidebar menu
================================================ */
.body-fixed-sidebar {
overflow-x: hidden;
}
.navik-fixed-sidebar {
position: fixed;
top: 0;
width: 250px;
height: 100%;
z-index: 9999999;
overflow-y: auto;
background-color: #fff;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.navik-sidebar-left {
left: 0;
-webkit-box-shadow: 2px 0px 12px -2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 0px 12px -2px rgba(0, 0, 0, 0.15);
-o-box-shadow: 2px 0px 12px -2px rgba(0, 0, 0, 0.15);
box-shadow: 2px 0px 12px -2px rgba(0, 0, 0, 0.15);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.navik-sidebar-right {
right: 0;
-webkit-box-shadow: -2px 0px 12px -2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: -2px 0px 12px -2px rgba(0, 0, 0, 0.15);
-o-box-shadow: -2px 0px 12px -2px rgba(0, 0, 0, 0.15);
box-shadow: -2px 0px 12px -2px rgba(0, 0, 0, 0.15);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.navik-sidebar-left.fixed-sidebar-open {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.navik-sidebar-right.fixed-sidebar-open {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.navik-fixed-sidebar .navik-header-container {
display: flex;
flex-wrap: wrap;
height: 100%;
padding: 0 28px;
}
.navik-fixed-sidebar .menu-social-media {
position: inherit;
bottom: inherit;
align-self: flex-end;
padding: 0 0 30px !important;
text-align: left;
}
.navik-fixed-sidebar .menu-social-media a {
margin: 0 6px 6px 0;
}
.navik-fixed-sidebar .menu-social-media a:last-child {
margin-right: 0;
}
.navik-fixed-sidebar+.burger-menu {
z-index: 9999999;
}
.navik-sidebar-left+.burger-menu {
top: 0;
right: inherit;
left: 0;
}
.navik-sidebar-right+.burger-menu {
top: 0;
right: 0;
}
.fixedsidebar-bg-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
opacity: 0;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.6);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navik-side-content {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.navik-sidebar-left.fixed-sidebar-open~.navik-side-content {
-webkit-transform: translateX(125px);
-moz-transform: translateX(125px);
-o-transform: translateX(125px);
transform: translateX(125px);
}
.navik-sidebar-right.fixed-sidebar-open~.navik-side-content {
-webkit-transform: translateX(-125px);
-moz-transform: translateX(-125px);
-o-transform: translateX(-125px);
transform: translateX(-125px);
}
.navik-fixed-sidebar .logo {
display: none;
padding: 70px 0;
}
.navik-side-content>.logo {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 47px;
padding: 0 50px;
z-index: 99999;
text-align: center;
background-color: #fff;
-webkit-box-shadow: 0px 2px 12px -2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 2px 12px -2px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0px 2px 12px -2px rgba(0, 0, 0, 0.15);
box-shadow: 0px 2px 12px -2px rgba(0, 0, 0, 0.15);
}
.navik-side-content>.logo img {
max-width: inherit;
max-height: 47px;
width: auto;
}
.fixed-sidebar-open~.fixedsidebar-bg-overlay {
visibility: visible;
opacity: 1;
}
.fixed-menu-wrap {
width: 100%;
}
/* ========== Navigation menu ========== */
.navik-menu-fixed {
padding-top: 90px;
}
.navik-menu-fixed ul li {
position: relative;
}
.navik-menu-fixed ul li a {
font-family: "Montserrat", sans-serif;
display: block;
padding-right: 17px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navik-menu-fixed>ul>li.current-menu>a,
.navik-menu-fixed ul li:hover>a {
color: #26c6da !important;
}
.navik-menu-fixed>ul {
margin-bottom: 40px;
}
.navik-menu-fixed>ul>li {
margin-bottom: 14px;
}
.navik-menu-fixed>ul>li:last-child {
margin-bottom: 0;
}
.navik-menu-fixed>ul>li>a {
font-size: 18px;
font-weight: 700;
color: #212121;
text-transform: uppercase;
}
.navik-menu-fixed>ul ul {
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.navik-menu-fixed>ul ul.submenu-collapse {
opacity: 1;
}
.navik-menu-fixed>ul ul li {
margin-bottom: 6px;
}
.navik-menu-fixed>ul ul li:last-child {
margin-bottom: 0;
}
.navik-menu-fixed>ul ul a {
position: relative;
padding-left: 18px;
font-size: 14px;
font-style: italic;
color: #818181;
}
.navik-menu-fixed>ul ul a::before {
position: absolute;
content: "";
top: 3px;
left: 4px;
width: 1px;
height: 12px;
background-color: #d1d1d1;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.navik-menu-fixed>ul ul a:hover {
padding-left: 24px;
}
.navik-menu-fixed>ul>li>ul {
padding: 27px 0 15px;
}
.navik-menu-fixed>ul>li>ul ul {
padding-top: 6px;
}
.navik-menu-fixed>ul>li>ul>li ul {
padding-left: 18px;
}
.navik-menu-fixed .overlay-dropdown-plus {
top: -1px;
right: -7px;
opacity: 1;
}
.navik-menu-fixed>ul ul .overlay-dropdown-plus {
top: -3px;
}
.navik-menu-fixed.submenu-no-separate>ul ul a::before {
display: none !important;
}
.navik-menu-fixed.submenu-no-separate>ul ul a,
.navik-menu-fixed.submenu-no-separate>ul>li>ul>li ul {
padding-left: 12px;
}
.navik-menu-fixed.submenu-no-separate>ul ul a:hover {
padding-left: 18px;
}
/* ========== END ========== */
/* ========== Color scheme ========== */
.navik-fixed-sidebar.sidebar-dark,
.sidebar-dark~.navik-side-content>.logo {
background-color: #111111;
}
.navik-fixed-sidebar.sidebar-dark .menu-social-media a {
border-color: #fff;
opacity: 0.2;
}
.navik-fixed-sidebar.sidebar-dark .menu-social-media a:hover {
opacity: 1;
}
.sidebar-dark .navik-menu-fixed>ul>li>a {
color: #fff;
}
.sidebar-dark .navik-menu-fixed>ul ul a {
color: #a1a1a1;
}
.sidebar-dark .navik-menu-fixed>ul ul a::before {
background-color: #515151;
}
.sidebar-dark .overlay-dropdown-plus:before,
.sidebar-dark .overlay-dropdown-plus:after {
background-color: #717171;
}
.navik-fixed-sidebar.sidebar-color-bg,
.sidebar-color-bg~.navik-side-content>.logo {
background-color: #37ad00;
}
.navik-fixed-sidebar.sidebar-color-bg .menu-social-media a {
border-color: #fff;
}
.sidebar-color-bg .navik-menu-fixed>ul>li>a,
.sidebar-color-bg .navik-menu-fixed>ul ul a {
color: #fff !important;
}
.sidebar-color-bg .navik-menu-fixed>ul ul a::before,
.sidebar-color-bg .overlay-dropdown-plus:before,
.sidebar-color-bg .overlay-dropdown-plus:after {
background-color: #fff;
}
.sidebar-color-bg .navik-menu-fixed ul li a:hover {
color: rgba(255, 255, 255, 0.8) !important;
}
/* ========== END ========== */
/* =============================================
Menu icons
================================================ */
.navik-menu .navik-menu-icon {
margin-right: 5px;
color: #a1a1a1;
}
.navik-menu ul li>a .navik-menu-icon,
.navik-menu .mega-menu-heading a .navik-menu-icon {
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.navik-menu ul li.current-menu>a .navik-menu-icon,
.navik-menu ul li:hover>a .navik-menu-icon,
.navik-menu .mega-menu-heading a:hover .navik-menu-icon {
color: #00660e !important;
}
.header-dark .navik-menu .navik-menu-icon {
color: #717171;
}
.navik-menu-overlay .navik-menu-icon {
position: relative;
top: -2px;
margin-right: 10px;
}
.navik-menu-overlay>ul ul li a .navik-menu-icon {
top: -1px;
margin-right: 7px;
}
.menu-slide .navik-menu-overlay>ul ul li a .navik-menu-icon {
margin-right: 5px;
}
.navik-menu-fixed .navik-menu-icon {
margin-right: 5px;
}
/* =============================================
================================================
Media queries for responsive design
================================================
================================================ */
@media (min-width: 768px) {
.navik-menu {
clear: both;
}
.header-shadow-wrapper:after {
-webkit-box-shadow: 0px 10px 40px -5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 10px 40px -5px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0px 10px 40px -5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 10px 40px -5px rgba(0, 0, 0, 0.1);
}
.navik-header-overlay .logo {
left: 30px;
}
.navik-header-overlay .burger-menu {
right: 30px;
}
.navik-menu-overlay>ul>li {
padding: 0 110px 0 30px;
margin-bottom: 16px;
}
.overlay-center-menu .navik-menu-overlay>ul>li {
padding: 0 30px;
}
.overlay-dropdown-plus {
width: 24px;
height: 24px;
line-height: 24px;
top: 7px;
right: 43px;
}
.overlay-dropdown-plus:before,
.overlay-dropdown-plus:after {
top: 11px;
right: 7px;
}
.navik-menu-overlay>ul>li>.menu-overlay-link a {
font-size: 34px;
}
.navik-menu-overlay>ul ul li a {
font-size: 16px;
}
.navik-menu-overlay>ul ul li {
margin-left: 42px;
}
.navik-menu-overlay>ul>li>ul>li:after {
top: 1px;
left: -23px;
height: 16px;
}
.navik-menu-overlay>ul>li>ul {
padding: 13px 0 16px;
}
.overlay-center-menu .navik-menu-overlay>ul>li>ul {
padding: 18px 0 21px;
}
.overlay-center-menu .overlay-dropdown-plus {
right: -42px;
}
.submenu-vertical>ul>li ul {
right: -60px;
padding-right: 60px !important;
}
.submenu-vertical>ul>li>ul li {
margin-bottom: 7px;
}
.submenu-vertical>ul>li>ul ul {
padding-top: 7px;
}
.submenu-vertical>ul>li>ul li .overlay-dropdown-plus {
top: -2px;
right: -67px;
}
.overlay-center-menu .submenu-vertical>ul>li>ul li .overlay-dropdown-plus {
right: -42px;
}
.menu-social-media {
bottom: 34px;
padding: 0 110px;
}
.overlay-center-menu .menu-social-media {
padding: 0 40px;
}
.navik-header-overlay.menu-slide .nav-menu-wrapper {
width: 400px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul {
padding: 140px 0 100px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li {
margin-bottom: 14px;
padding: 0 60px 0 45px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul ul li a {
padding-left: 23px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay.submenu-no-separate>ul ul li a {
padding-left: 15px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul ul li a:hover {
padding-left: 33px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay.submenu-no-separate>ul ul li a:hover {
padding-left: 25px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul ul li a::before {
left: 5px;
height: 15px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li>ul li {
margin-bottom: 7px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li>ul {
padding: 28px 0 16px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li>ul ul {
padding-top: 7px;
padding-left: 23px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li ul .overlay-dropdown-plus {
top: -2px;
right: -17px;
}
.navik-header-overlay.menu-slide .menu-social-media {
padding: 0 45px;
}
.navik-menu .mega-menu-media {
display: table;
width: 100%;
}
.navik-menu .mega-menu-media-img,
.navik-menu .mega-menu-media-info {
display: table-cell;
vertical-align: top;
}
.navik-menu .mega-menu-media-img {
width: 120px;
}
.navik-menu .mega-menu-media-img .mega-menu-thumbnail {
margin-bottom: 0;
}
.navik-menu .mega-menu-media-img img {
width: 100%;
height: auto;
}
.navik-menu .mega-menu-media-info {
padding-left: 20px;
}
.navik-menu-overlay .navik-menu-icon {
margin-right: 12px;
}
.menu-slide .navik-menu-overlay .navik-menu-icon {
margin-right: 10px;
}
.navik-menu-overlay>ul ul li a .navik-menu-icon {
margin-right: 8px;
}
.navik-menu-overlay.submenu-no-separate>ul ul li {
margin-left: 25px;
}
}
@media (min-width: 1200px) {
/* =============================================
Viewport Breakpoint
================================================ */
.navik-header-container {
height: 90px;
}
.navik-header-overlay .navik-header-container {
height: auto;
}
.navik-header .logo {
position: relative;
padding: 10px;
top: 45%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.navik-header .logo img {
max-width: inherit;
max-height: 60px;
width: auto;
}
.burger-menu {
display: none;
}
.navik-menu {
text-align: center;
clear: inherit;
}
.navik-menu>ul {
display: block !important;
padding: 0;
}
.navik-menu>ul>li {
display: inline-block;
}
.navik-menu ul li {
position: relative;
text-align: left;
list-style: none;
}
.navik-menu>ul>li>a {
position: relative;
/* height: 90px; */
line-height: 90px;
box-sizing: border-box;
white-space: nowrap;
padding: 0 7px;
color: #ffffff;
}
.navik-menu>ul>li:last-child>a {
padding: 0 0 0 20px;
}
.navik-menu.menu-hover-2>ul>li:last-child>a,
.navik-menu.menu-hover-3>ul>li:last-child>a,
.navik-menu.menu-hover-4>ul>li:last-child>a,
.center-menu-1 .navik-menu>ul>li:last-child>a,
.center-menu-2 .navik-menu>ul>li:last-child>a {
padding: 0 20px;
}
.navik-menu.separate-line.menu-hover-2>ul>li:last-child>a,
.navik-menu.separate-line.menu-hover-3>ul>li:last-child>a,
.navik-menu.separate-line.menu-hover-4>ul>li:last-child>a,
.center-menu-1 .navik-menu.separate-line>ul>li:last-child>a,
.center-menu-2 .navik-menu.separate-line>ul>li:last-child>a {
padding: 0 28px;
}
.navik-menu ul li.current-menu>a,
.navik-menu ul li:hover>a,
.header-dark .navik-menu ul li.current-menu>a,
.header-dark .navik-menu ul li:hover>a {
background-color: inherit;
}
.dropdown-plus {
display: none;
}
.navik-menu ul li.dropdown_menu>a>span:before {
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #c1c1c1;
position: relative;
content: '';
display: inline-block;
height: 4px;
width: 4px;
top: -3px;
margin-left: 8px;
box-sizing: content-box;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.header-dark .navik-menu ul li.dropdown_menu>a>span:before {
border-color: #a1a1a1;
}
.navik-menu li>ul {
display: block;
position: absolute;
width: 1500px;
right: 31px;
top: 100%;
left: -675px;
background-color: #fff;
padding: 0;
visibility: hidden;
opacity: 0;
-webkit-box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.header-dark .navik-menu li>ul {
background-color: #111111;
}
.navik-menu li:hover>ul {
visibility: visible;
opacity: 1;
}
.navik-menu li.submenu-right>ul {
left: inherit;
right: 0;
}
.navik-menu li>ul ul {
top: -27px;
left: 100%;
}
.navik-menu li.submenu-right>ul ul {
left: -100% !important;
}
.navik-menu ul ul li.dropdown_menu>a>span:before {
float: right;
top: 7px;
right: -10px;
margin: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.navik-menu ul ul li>a {
position: relative;
color: #222222;
padding: 9px 0px 7px !important;
}
.navik-menu ul ul li>a,
.navik-menu ul ul li:hover>a {
color: #222222;
background-color: transparent;
font-weight: 500;
}
.header-dark .navik-menu ul ul li>a {
color: #a1a1a1;
background-color: transparent;
}
.header-dark .navik-menu ul ul li:hover>a {
color: #fff;
background-color: transparent;
}
.header-dark .navik-menu ul ul li:hover>a .navik-menu-icon {
color: #fff !important;
}
.navik-menu ul ul li:hover>a {
padding-left: 55px !important;
}
.navik-menu ul ul li>a:before {
position: absolute;
content: "";
top: 17px;
left: 35px;
width: 0;
height: 1px;
background: #a1a1a1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navik-menu ul ul li:hover>a:before {
width: 10px;
}
.navik-menu ul li.dropdown_menu>a>span {
display: none;
}
.navik-menu.menu-caret ul li.dropdown_menu>a>span {
display: inline-block;
}
.navik-menu.menu-caret ul ul li.dropdown_menu>a>span {
display: inline;
}
.navik-menu.separate-line>ul>li>a {
position: relative;
}
.navik-menu.separate-line>ul>li>a:before {
position: absolute;
content: "";
top: 50%;
right: 0;
width: 1px;
height: 20px;
background: #eeeeee;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.header-dark .navik-menu.separate-line>ul>li>a:before {
background: #333333;
}
.navik-menu.separate-line>ul>li:last-child>a:before {
display: none;
}
.navik-menu.separate-line>ul>li>a {
padding: 0 28px;
}
.navik-menu.separate-line>ul>li:last-child>a {
padding: 0 0 0 28px;
}
/* =============================================
Header sticky
================================================ */
.navik-header.sticky {
position: fixed;
width: 100%;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: stickyTransition;
animation-name: stickyTransition;
background-color: #ffffff;
}
.navik-header.sticky .navik-header-container {
height: 70px;
}
.navik-header.sticky .navik-menu>ul>li>a {
height: 0px;
line-height: 70px;
color: #222222;
}
.navik-header.sticky .logo {
padding: 8px 40px 0 0;background-color: transparent;
}
.navik-header.center-menu-1.sticky .logo {
padding: 0;
}
.navik-header.sticky .logo img {
max-height: 60px;
}
@-webkit-keyframes stickyTransition {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes stickyTransition {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/* =============================================
Center menu
================================================ */
.navik-header.center-menu-1 {
position: relative;
}
.navik-header.center-menu-1.sticky {
position: fixed;
}
.navik-header.center-menu-1 .navik-header-container>.logo {
display: none;
}
.logoCenter {
text-align: center;
display: table-cell !important;
vertical-align: middle;
}
.navik-header.center-menu-1 .logoCenter .logo {
float: none;
top: 0;
width: inherit;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.center-menu-1 .navik-menu {
display: table !important;
float: none;
width: 100%;
}
.center-menu-1 .navik-menu>ul {
display: table-cell !important;
vertical-align: top;
}
.center-menu-1 .navik-menu>ul:first-child {
text-align: right;
padding: 0 40px;
}
.center-menu-1 .navik-menu>ul:first-child ul {
text-align: left;
}
.center-menu-1 .navik-menu>ul:last-child {
text-align: left;
padding: 0 40px;
}
.navik-header.center-menu-2 .navik-header-container {
height: auto;
}
.navik-header.center-menu-2 .logo {
float: none;
top: 0;
padding: 36px 30px;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.navik-header.center-menu-2 .logo img {
max-width: 100%;
max-height: inherit;
height: auto;
}
.center-menu-2 .navik-menu {
float: none;
text-align: center;
border-top: 1px solid #e9e9e9;
}
.center-menu-2.header-dark .navik-menu {
border-color: #333333;
}
.center-menu-2 .navik-menu li>ul {
text-align: left;
}
.center-menu-2 .navik-menu>ul>li>a {
height: 62px;
line-height: 62px;
}
.navik-header.center-menu-2.sticky .logo {
display: none;
}
.navik-header.center-menu-2.sticky .navik-menu {
border: none;
}
/* =============================================
Header transparent
================================================ */
.header-transparent-on .header-shadow-wrapper,
.header-opacity-on .header-shadow-wrapper {
display: none;
}
.navik-header.header-transparent-on,
.navik-header.header-opacity-on {
position: absolute;
width: 100%;
background-color: transparent;
}
.navik-header.header-opacity-on {
background-color: rgba(0, 0, 0, 0.3);
}
.header-transparent-on .navik-menu>ul>li>a,
.header-opacity-on .navik-menu>ul>li>a {
color: #f7f7f7;
}
.header-transparent-on .navik-menu>ul>li:hover>a,
.header-transparent-on .navik-menu>ul>li.current-menu>a,
.header-opacity-on .navik-menu>ul>li:hover>a,
.header-opacity-on .navik-menu>ul>li.current-menu>a {
color: #26c6da;
}
.header-transparent-on .navik-menu>ul>li.dropdown_menu>a>span:before,
.header-opacity-on .navik-menu>ul>li.dropdown_menu>a>span:before {
border-color: #f7f7f7;
}
.header-transparent-on.center-menu-2 .navik-menu {
border-color: rgba(255, 255, 255, 0.25);
}
.header-opacity-on.center-menu-2 .navik-menu {
border-color: rgba(255, 255, 255, 0.2);
}
.header-transparent-on .navik-menu.separate-line>ul>li>a:before {
background: rgba(255, 255, 255, 0.25);
}
.header-opacity-on .navik-menu.separate-line>ul>li>a:before {
background: rgba(255, 255, 255, 0.2);
}
.header-transparent-on .navik-menu>ul>li>a .navik-menu-icon,
.header-opacity-on .navik-menu>ul>li>a .navik-menu-icon {
color: rgba(255, 255, 255, 0.85);
}
/* =============================================
Hover transitions
================================================ */
.navik-menu.menu-hover-2>ul>li.current-menu>a,
.navik-menu.menu-hover-2>ul>li:hover>a {
background-color: #f8f8f8;
color: #212121;
}
.navik-menu.menu-hover-2>ul>li>a:after,
.navik-menu.menu-hover-3>ul>li>a:after {
position: absolute;
content: '';
left: 0;
bottom: -3px;
width: 100%;
height: 3px;
background: #26c6da;
opacity: 0;
z-index: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navik-menu.menu-hover-2>ul>li.current-menu>a:after,
.navik-menu.menu-hover-2>ul>li:hover>a:after {
opacity: 1;
}
.navik-menu.menu-hover-3>ul>li.current-menu>a,
.navik-menu.menu-hover-3>ul>li:hover>a {
color: #212121;
}
.navik-menu.menu-hover-3>ul>li>a:after {
width: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navik-menu.menu-hover-3>ul>li.current-menu>a:after,
.navik-menu.menu-hover-3>ul>li:hover>a:after {
width: 100%;
opacity: 1;
}
.navik-menu.menu-hover-4>ul>li>a>.hover-transition {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.navik-menu.menu-hover-4>ul>li>a>.hover-transition:after {
display: block;
position: relative;
content: "";
width: calc(100% + 2px);
height: 0;
top: 50%;
left: 50%;
background: #26c6da;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navik-menu.menu-hover-4>ul>li.current-menu>a>.hover-transition:after,
.navik-menu.menu-hover-4>ul>li:hover>a>.hover-transition:after {
opacity: 1;
height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.navik-menu.menu-hover-4>ul>li>ul {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.navik-menu.menu-hover-4>ul>li:hover>ul {
-webkit-transition-delay: 0.13s;
-moz-transition-delay: 0.13s;
-o-transition-delay: 0.13s;
transition-delay: 0.13s;
}
.navik-menu.menu-hover-4>ul>li.current-menu>a,
.navik-menu.menu-hover-4>ul>li:hover>a {
color: #fff;
}
.navik-menu.menu-hover-4>ul>li.current-menu.dropdown_menu>a>span:before,
.navik-menu.menu-hover-4>ul>li.dropdown_menu:hover>a>span:before {
border-color: #fff;
}
.header-dark .navik-menu.menu-hover-2>ul>li.current-menu>a,
.header-dark .navik-menu.menu-hover-2>ul>li:hover>a {
background-color: #222222;
color: #fff;
}
.header-dark .navik-menu.menu-hover-3>ul>li.current-menu>a,
.header-dark .navik-menu.menu-hover-3>ul>li:hover>a {
color: #fff;
}
.header-transparent-on .navik-menu.menu-hover-2>ul>li.current-menu>a,
.header-transparent-on .navik-menu.menu-hover-2>ul>li:hover>a {
background-color: rgba(255, 255, 255, 0.25);
color: #f7f7f7;
}
.header-opacity-on .navik-menu.menu-hover-2>ul>li.current-menu>a,
.header-opacity-on .navik-menu.menu-hover-2>ul>li:hover>a {
background-color: rgba(255, 255, 255, 0.2);
color: #f7f7f7;
}
.header-transparent-on .navik-menu.menu-hover-3>ul>li.current-menu>a,
.header-transparent-on .navik-menu.menu-hover-3>ul>li:hover>a,
.header-opacity-on .navik-menu.menu-hover-3>ul>li.current-menu>a,
.header-opacity-on .navik-menu.menu-hover-3>ul>li:hover>a {
color: #f7f7f7;
}
.navik-menu.menu-hover-4>ul>li.current-menu>a .navik-menu-icon,
.navik-menu.menu-hover-4>ul>li:hover>a .navik-menu-icon {
color: #fff !important;
}
.header-transparent-on .navik-menu.menu-hover-2>ul>li.current-menu>a .navik-menu-icon,
.header-transparent-on .navik-menu.menu-hover-2>ul>li:hover>a .navik-menu-icon,
.header-opacity-on .navik-menu.menu-hover-2>ul>li.current-menu>a .navik-menu-icon,
.header-opacity-on .navik-menu.menu-hover-2>ul>li:hover>a .navik-menu-icon,
.header-transparent-on .navik-menu.menu-hover-3>ul>li.current-menu>a .navik-menu-icon,
.header-transparent-on .navik-menu.menu-hover-3>ul>li:hover>a .navik-menu-icon,
.header-opacity-on .navik-menu.menu-hover-3>ul>li.current-menu>a .navik-menu-icon,
.header-opacity-on .navik-menu.menu-hover-3>ul>li:hover>a .navik-menu-icon {
color: rgba(255, 255, 255, 0.85) !important;
}
/* =============================================
Submenu
================================================ */
.navik-menu.submenu-top-border li>ul {
border-top: 3px solid #10bd00;
}
.navik-menu.submenu-top-border li>ul ul {
top: -30px;
}
.navik-menu.submenu-list-border li>ul ul {
top: -20px;
}
.navik-menu.submenu-top-border.submenu-list-border li>ul ul {
top: -23px;
}
.navik-menu.submenu-list-border ul ul li>a {
padding: 15px 35px 14px !important;
}
.navik-menu.submenu-list-border ul ul li:first-child>a {
padding: 8px 35px 14px 35px !important;
}
.navik-menu.submenu-list-border ul ul li:last-child>a {
padding: 15px 35px 8px 35px !important;
}
.navik-menu.submenu-list-border ul ul li:after {
position: absolute;
content: "";
bottom: 0;
left: 35px;
right: 35px;
height: 1px;
background: #eeeeee;
}
.navik-menu.submenu-list-border ul ul li:last-child:after {
display: none;
}
.navik-menu.submenu-list-border ul ul li:hover>a {
padding-left: 55px !important;
}
.navik-menu.submenu-list-border ul ul li:nth-child(n+2)>a:before {
top: 24px;
}
.header-dark .navik-menu.submenu-list-border ul ul li:after {
background: #333333;
}
/* =============================================
Submenu transitions
================================================ */
.navik-menu.submenu-flip li>ul {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.navik-menu.submenu-flip li:hover>ul {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.navik-menu.submenu-flip ul {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
}
.navik-menu.submenu-flip ul li {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
}
.navik-menu.submenu-scale li>ul {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.navik-menu.submenu-scale li.submenu-right ul {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.navik-menu.submenu-scale li:hover>ul {
-webkit-transform: scale(1);
transform: scale(1);
}
/* =============================================
Menu overlay
================================================ */
.navik-header-overlay .logo {
top: 50px;
left: 40px;
}
.navik-header-overlay .burger-menu {
top: 40px;
right: 40px;
}
.navik-menu-overlay>ul>li {
padding: 0 130px 0 40px;
}
.overlay-center-menu .navik-menu-overlay>ul>li {
padding: 0 40px;
}
.overlay-dropdown-plus {
right: 53px;
}
.submenu-vertical>ul>li ul {
right: -70px;
padding-right: 70px !important;
}
.submenu-vertical>ul>li>ul li .overlay-dropdown-plus {
right: -77px;
}
.navik-header-overlay.menu-slide .navik-menu-overlay>ul>li ul .overlay-dropdown-plus {
right: -7px;
}
.menu-social-media {
padding: 0 130px;
}
/* =============================================
Mega menu
================================================ */
.navik-mega-menu.mega-menu-fullwidth .navik-header-container {
position: inherit;
}
.navik-mega-menu .navik-header-container,
.navik-mega-menu.mega-menu-fullwidth {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
}
.navik-menu .mega-menu-container {
padding: 15px 15px 0;
}
.navik-mega-menu .navik-menu.submenu-flip>ul,
.navik-mega-menu .navik-menu.submenu-flip ul li.mega-menu,
.navik-mega-menu.mega-menu-fullwidth .navik-header-container {
-webkit-transform-style: unset;
transform-style: unset;
-webkit-perspective: none;
-ms-perspective: none;
perspective: none;
}
.navik-menu.submenu-flip .mega-menu>ul {
-webkit-perspective: inherit;
-ms-perspective: inherit;
perspective: inherit;
}
.navik-menu.submenu-scale li.mega-menu ul,
.navik-menu.submenu-scale li.mega-menu.submenu-right ul {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.navik-menu.submenu-scale .mega-menu-container li>ul {
-webkit-transform: scale(1);
transform: scale(1);
}
.navik-menu.submenu-flip .mega-menu-container li>ul {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.navik-menu ul li.mega-menu {
position: inherit;
font-size: initial;
}
.navik-menu li.mega-menu>ul {
width: 100%;
padding: 25px 20px 15px;
}
.navik-menu li.mega-menu:hover .mega-menu-container li>ul {
visibility: visible;
opacity: 1;
}
.navik-menu .mega-menu-container li ul,
.navik-menu.submenu-top-border .mega-menu-container li ul,
.navik-menu.submenu-list-border .mega-menu-container li ul {
position: relative;
top: 0 !important;
left: inherit;
width: 100%;
border-top: none;
padding: 0;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
-o-box-shadow: inherit;
box-shadow: inherit;
}
.navik-menu.menu-caret .mega-menu-container li.dropdown_menu>a>span,
.navik-menu .mega-menu-container ul li>a:before,
.navik-menu.submenu-list-border .mega-menu-container ul li:after {
display: none;
}
.navik-menu li.mega-menu.submenu-right>ul ul {
left: inherit !important;
}
.navik-menu .mega-menu-container ul li a,
.navik-menu .mega-menu-container ul li:hover a,
.navik-menu.submenu-list-border .mega-menu-container ul li a,
.navik-menu.submenu-list-border .mega-menu-container ul li:hover a,
.navik-menu.submenu-list-border .mega-menu-container ul li:first-child a,
.navik-menu.submenu-list-border .mega-menu-container ul li:first-child:hover a,
.navik-menu.submenu-list-border .mega-menu-container ul li:last-child a,
.navik-menu.submenu-list-border .mega-menu-container ul li:last-child:hover a {
padding: inherit !important;
}
.navik-menu .mega-menu-container ul.mega-menu-list li a,
.navik-menu .mega-menu-container ul.mega-menu-list li:hover a,
.navik-menu.submenu-list-border .mega-menu-container ul.mega-menu-list li a,
.navik-menu.submenu-list-border .mega-menu-container ul.mega-menu-list li:hover a {
padding: 5px 0 !important;
color: #818181;
}
.navik-menu .mega-menu-container ul.mega-menu-list li a:hover,
.navik-menu.submenu-list-border .mega-menu-container ul.mega-menu-list li a:hover {
padding-left: 20px !important;
}
.navik-menu .mega-menu-container ul.mega-menu-list li>a:before {
display: block;
left: 0;
top: 13px !important;
}
.header-dark .navik-menu .mega-menu-container ul.mega-menu-list li a {
color: #a1a1a1;
}
.header-dark .navik-menu .mega-menu-container ul.mega-menu-list li a:hover {
color: #fff;
}
/* =============================================
Fixed sidebar menu
================================================ */
.navik-fixed-sidebar {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.navik-side-content>.logo,
.navik-fixed-sidebar+.burger-menu,
.fixedsidebar-bg-overlay {
display: none;
}
.navik-fixed-sidebar .logo {
display: block;
}
.navik-side-content {
width: calc(100% - 250px);
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
-webkit-transform: translateX(0%) !important;
-moz-transform: translateX(0%) !important;
-o-transform: translateX(0%) !important;
transform: translateX(0%) !important;
}
.navik-sidebar-left~.fixedsidebar-bg-overlay+.navik-side-content {
margin-left: auto;
}
.navik-sidebar-right~.fixedsidebar-bg-overlay+.navik-side-content {
margin-right: auto;
}
.navik-sidebar-left,
.navik-sidebar-right {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.navik-menu-fixed {
padding-top: 0;
}
}
/*================css start===============*/
.banner-bg::before {content: "";
background-image: url(../images/software-development.webp);
background-size: cover;
background-position: center;
min-height: 800px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 60px;
width: 100%;
top: -92px;
background-size: 100%;
}
.banner-bg{height: 559px;}
.header_box {
background: linear-gradient(90deg, rgba(41, 91, 246, 1) 0%, rgba(36, 77, 173, 1) 100%);
padding: 2px;
}
ul.social-list li.social-item {
list-style: none;
margin: 0px -12px;
}
ul.social-list {
display: flex;
}
ul.social-list li.social-item a img {
width: 60%;
}
span.num-txt a {
color: #ffffff;
font-size: 16px;
font-family: "Montserrat", sans-serif;
}
/* .call-div img{width:5%;} */
.mail-call-div {
display: flex;
float: right;
}
.call-div {
margin: 3px 7px;
position: relative;
right: -20px;
}
.num-txt {
padding: 0 1px;
position: relative;
top: 3px;
}
.num-txt a {
text-decoration: none;
}
button.product-gallery {
border: unset;
padding: 8px 7px;
border-radius: 3px;
background-image: linear-gradient(to right, #f54d4d, #F56969);
color: #fff;
font-size: 15px;
font-weight: 500;
font-family: "Montserrat", sans-serif;
}
.product-btn {
float: right;
}
.pro-btn1 {
margin-top: 26px;
position: relative;
left: 10px;
}
button.product-gallery:hover {
background-image: linear-gradient(to right, #3D418D, #38AF58);
}
button.product-gallery:focus {
outline: unset;
outline: unset;
}
.service-cards {
display: flex;
gap: 27px;
flex-wrap: wrap;
margin-top: 33px;
}
.heading-one{margin-top: 71px;}
.service-card {
background-color: rgba(31, 39, 70, 0.8);
border-radius: 3px;
width: 135px;
height: 170px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 25px 10px;
transition: all 0.3s ease;
}
.service-card img {
width: 65px;
height: 65px;
}
.service-card-title {
font-size: 13px;
color: #ffffff;
text-align: center;
line-height: 18px;
padding-top: 36px;
margin-top: 30px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover img {
position: absolute;
top: 22px;
left: 45px;
overflow: hidden;
}
.swap-on-hover .swap-on-hover__front-image {
/* z-index: 9999; */
transition: opacity .5s linear;
cursor: pointer;
}
.swap-on-hover:hover>.swap-on-hover__front-image {
opacity: 0;
}
.swap-on-hover {
position: absolute;
width: 65px;
height: 65px;
}
.swap-on-hover img {
position: absolute;
top: 0;
left: 0;
width: 65px;
height: 65px;
transition: opacity 0.5s ease;
}
.swap-on-hover__front-image {
z-index: 1;
}
.swap-on-hover__back-image {
z-index: 0;
opacity: 0;
}
.service-card:hover .swap-on-hover__front-image {
opacity: 0;
}
.service-card:hover .swap-on-hover__back-image {
opacity: 1;
}
.service-card:hover {
background-color: #ffffff;
cursor: pointer;
}
.service-card:hover .service-card-title {
color: #222222;
}
.heading-main h1 {
font-size: 40px;
font-weight: 500;text-transform: uppercase;
}
.scanner-box {
padding: 8px;
background-image: linear-gradient(to right, #f54d4d, #F56969);
border-radius: 3px;
width: 145px;
position: relative;
top: 0px;
float: right;
right: -12px;
}
.scanner-box:hover {
background-image: linear-gradient(to right, #3D418D, #38AF58);
}
.scanner-box img {
width: 100%;
}
.underline-hover {
position: relative;
display: inline-block;
cursor: default;border-bottom: 4px solid #bdbdbd;
}
.underline-hover::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
/* Space between text and border */
height: 4px;
width: 0;
background: linear-gradient(90deg, rgba(41, 91, 246, 1) 0%, rgba(36, 77, 173, 1) 100%);
transition: width 0.3s ease;
}
.underline-hover::before{content: "";
    position: absolute;
    height: 4px;
    width: 30%;
    background: linear-gradient(90deg, rgba(41, 91, 246, 1) 0%, rgba(36, 77, 173, 1) 100%);
    top: 38px;}
.why-line::before{top:39px;}
.service-line::before{top:39px;}
.underline-hover:hover::after {
width: 100%;
}
.second-heading h2 {
font-weight: 600;
}
/*------------box grid css start-------------*/
.services-grid {
/* display: grid; */
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-bottom: 50px;
}
.service-item {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
padding: 25px 20px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
margin: auto 10px;
max-width: 291px;
min-height: 280px;
}
.why-group img {
width: 85%;
}
.service-icon {
width: 79px;
height: 79px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.service-icon img {
width: 55px;
height: 55px;
}
.service-title {
font-size: 15px;
font-weight: 700;
line-height: 20px;
margin-bottom: 15px;
color: #222222;
text-align: left;
font-family: "Montserrat", sans-serif;
}
.process-box img{width: 90%;}
ul.social-list li.social-item {
margin: 0px -12px;
}
p.service-description {
font-size: 15px;
color: #383434;
font-weight: 400;
text-align: center;
}
.service-item1:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #3582c8 0%, #3d57b8 100%);
}
.service-item2:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #e75782 0%, #bf336a 100%);
}
.service-item3:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #3ebdcb 0%, #167983 100%);
}
.service-item:hover p {
color: #ffffff;
}
.service-item:hover .service-title {
color: #ffffff;
}
/*------------box grid css end-------------*/
.banner-txt-box {
position: relative;
top: 10px;
}
section.we-do-back {
/* background-image: url(../images/what-bg.webp); */
background-size: 100%;
background-repeat: no-repeat;
background-color: #f1f1f1;
position: relative;
}
.more-text {
display: block;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.service-description.expanded .more-text {
max-height: 200px;
/* Adjust based on expected content height */
}
.service-description a {
color: #222222;
font-weight: 600;
}
.service-item3:hover a {
color: #ffffff;
}
.service-item4:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #ccd03c 0%, #aca11e 100%);
}
.service-item5:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #f08a17 0%, #9a3d16 100%);
}
.service-item6:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #5748e6 0%, #140f96 100%);
}
.service-item7:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #4f7c82 0%, #0b2e32 100%);
}
.service-item8:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #b24cd1 0%, #6b1c82 100%);
}
.service-item9:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #e41f7b 0%, #86003c 100%);
}
.service-item10:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #e76b6e 0%, #c34447 100%);
}
.service-item11:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #e7a300 0%, #f0c200 100%);
}
.service-item12:hover {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(180deg, #40ba0f 0%, #188300 100%);
}
#more {
display: none;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.service-icon1 {
background: linear-gradient(180deg, #3582c8 0%, #3d57b8 100%);
}
.service-icon2 {
background: linear-gradient(180deg, #e75782 0%, #bf336a 100%);
}
.service-icon3 {
background: linear-gradient(180deg, #3ebdcb 0%, #167983 100%);
}
.service-icon4 {
background: linear-gradient(180deg, #ccd03c 0%, #aca11e 100%);
}
.service-icon5 {
background: linear-gradient(180deg, #f08a17 0%, #9a3d16 100%);
}
.service-icon6 {
background: linear-gradient(180deg, #5748e6 0%, #140f96 100%);
}
.service-icon7 {
background: linear-gradient(180deg, #4f7c82 0%, #0b2e32 100%);
}
.service-icon8 {
background: linear-gradient(180deg, #b24cd1 0%, #6b1c82 100%);
}
.service-icon9 {
background: linear-gradient(180deg, #e41f7b 0%, #86003c 100%);
}
.service-icon10 {
background: linear-gradient(180deg, #e76b6e 0%, #c34447 100%);
}
.service-icon11 {
background: linear-gradient(180deg, #e7a300 0%, #f0c200 100%);
}
.service-icon12 {
background: linear-gradient(180deg, #40ba0f 0%, #188300 100%);
}
button.we-button {
border: unset;
background-image: linear-gradient(0deg, rgba(71, 197, 225, 0.75) 0%, rgba(22, 108, 127, 1) 100%);
padding: 10px 30px;
border-radius: 6px;
font-size: 16px;
font-weight: 500;
font-family: "Montserrat", sans-serif;
}
button.we-button:hover {
background-color: unset;
}
.pulse {
box-shadow: #2082a0;
transform: scale(1);
animation: pulse 2s infinite;
border-radius: 32px;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 #2082a0;
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px rgba(222, 84, 72, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(222, 84, 72, 0);
}
}
.info {
position: relative;
bottom: 0;
}
.text-back {
background-color: #edeeff;
border-radius: 188px 0 0 0;
padding:46px 30px;
box-shadow: 6px 4px 4px rgba(68, 67, 67, 0.04)
}
.why-text{padding-left: 30px;}
section.scan-bg {
background-color:#d4d9e7;
background-size: 100%;
background-repeat: no-repeat;
}
.scan-txt-t {
display: grid;
}
.scan-txt-t span {
color: #fff;
font-size: 93px;
font-weight: 700;
line-height: 1.2;
font-family: "Montserrat", sans-serif;
}
.super-txt span {
font-size: 37px;
font-family: "Montserrat", sans-serif;
font-weight: 700;
color: #000000;
}
.super-txt{margin-top: 15px;}
.try-txt p {
font-weight: 500;
font-size: 18px;
letter-spacing: 0;
line-height: 28px;
font-family: "Montserrat", sans-serif;
}
.overlap-group-3 button {
background: linear-gradient(45deg, #2857e1 0%, #244eb1 100%);
    color: #ffffff;
    border-radius: 3px;
    display: flex;
    padding: 7px 8px;
    width: fit-content;
    position: relative;
    top: 166px;
    right: 62px;
    border: unset;
    z-index: +99;
}
.overlap-group-wrapper {
width: 145px;
height: 50px;
top: 548px;
left: 769px;
}
.text-wrapper-10 {
font-weight: 500;
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
    margin: 0 7px;
}
.check-circle {
width: 24px;
height: 24px;
margin: 2px 10px;
}
.try-now-check i:hover {
color: rgb(26, 172, 58);
}
section.qr-stand {
background-image: url(../images/try-now-bg.webp);
background-size: 100%;
background-repeat: no-repeat;
}
.div-code-txt img {
position: relative;
top: -3px;
}
.div-code-txt img {
width:100%;
}
/*=============scanner stand css start==============*/
.componant-box {
padding: 10px;
background-color: #f5dede;
border-radius: 8px;
border-bottom: 15px solid #FB9B9B;
height: 220px;
width: 220px;
}
.componant-box img {
width: 35px;
}
.div-3 {
height: 65px;
width: 65px;
background: #ffffff;
border-radius: 60px;
margin: auto;
display: flex;
justify-content: center;
/* horizontal centering */
align-items: center;
box-shadow: 0px 1px 6px #e0474736;
margin-top: 15px;
}
p.qr-para {
font-weight: 500;
}
.componant-box {
background-size: 200% 200%;
background-image:
linear-gradient(to top, #FB9B9B 50%, transparent 50%);
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
.componant-box:hover {
color: white;
background-image:
linear-gradient(to top, #FB9B9B 51%, transparent 50%);
background-position: 0 100%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
.componant-box1 {
border-bottom: 15px solid #889FF9;
background-image:
linear-gradient(to top, #889FF9 50%, transparent 50%);
background-color: #dfd8f6;
}
.componant-box1:hover {
background-image:
linear-gradient(to top, #889FF9 51%, transparent 50%);
}
.componant-box2 {
border-bottom: 15px solid #54DA87;
background-image:
linear-gradient(to top, #54DA87 50%, transparent 50%);
background-color: #abedc4;
}
.componant-box2:hover {
background-image:
linear-gradient(to top, #54DA87 51%, transparent 50%);
}
.process-box-bg {
background: #d5f0fb;
}
.flow-img img {
width: 75%;
}
.flow-chart-bg a{color: #222222;text-decoration: none;}
h2.visitor-heading{font-size:50px;}
.visitor-heading span{font-size: 38px;}
.visitor-text-align{display: flex;justify-content: center;flex-direction: column;}
section.flow-chart-bg {
background-color: #f1f1f1;
}
section.choose-back {
background-color: #B7E3FF;
}
.white-box {
background: #ffffff;
padding: 20px;
box-shadow: 3px 4px 4px #63636314;
padding: 10px 20px;
}
.blue-box {
background-color: #b6e3ff;
padding: 14px;
height: 90px;
width: 90px;
border-radius: 1px;
}
.icon-bx {
display: flex;
justify-content: center;
flex-direction: column;
}
.service-title-add {
margin-bottom: 6px;
}
p.box-para-txt {
line-height: 1.4;
}
.m-box {
margin-bottom: 20px;
}
button.read-we {
background: linear-gradient(to bottom, #26689F 0%, #2197F8 100%);
padding: 9px 17px;
border: unset;
}
.img-opt-box {
display: flex;
justify-content: center;
flex-direction: column;
}
.third-heading h3 {
font-size: 25px;
font-weight: 500;
margin: 20px 0px 25px;
}
.tier-1 {
border: 1px solid #dee2e6;
}
section.our-clients {
background-color: #d5f0fb;
}
section.enquiry-back {
/* background-image: url('../images/enquiry-now.webp'); */
background-repeat: no-repeat;
background-size: 100%;
}
span.marko-txt {
font-family: "Montserrat", sans-serif;
font-size: 34px;
font-weight: 600;
line-height: normal;
}
.en-txt{display: contents; position: relative;}
.txt-our {
justify-content: center;
display: flex;
flex-direction: column;
}
button.enquiry-btn {
padding: 10px 24px;
border: 2px solid #ffffff;
background: linear-gradient(90deg, #4372E5 0%, #0030FE 100%);
border-radius: 2px;
color: #ffffff;
font-size: 16px;
font-weight: 500;
font-family: "Montserrat", sans-serif;
}
button.enquiry-btn:hover {
background: linear-gradient(90deg, #0333FD 0%, #0E8030 100%);
}
.btn-ento {
display: flex;
justify-content: center;
flex-direction: column;
}
.left-en img {
margin-top: -17px;
}
.key-imag img {
width: 100%;
}
.key-back {
background: #edeeff;
}
section.footer-back {
background-image: linear-gradient(#244DAD, #295BF6);
}
.footer-first-box {
background-color: #2c5add;
border-radius: 15px;
box-shadow: 0px 0px 2px #00000040;
padding: 20px 16px;
}
.footer-circle-logo img {
width: 65%;
box-shadow: 2px -4px 7px 0px #00000040;
border-radius: 43px;
padding: 11px;
background-image: linear-gradient(#244DAD, #2c5add);
}
ul.about-list {
display: flex;
margin: 0px;
}
ul.about-list li.about-item {
color: #ffffff;
list-style: disc;
margin: 0 18px;
}
ul.about-list li.about-item a {
color: #ffffff;
text-decoration: none;
position: relative;
left: -6px;
font-size: 15px;
transition: all 1s;
}
ul.txt-list li.txt-item a {
color: #ffffff;
text-decoration: none;
font-size: 15px;
transition: all 1s;
}
ul.txt-list li.txt-item {
color: #ffffff;
list-style: disc;
line-height: 1.8;
}
.try-scan {
padding: 20px 35px;
}
.table-hover>tbody>tr>td:hover {
--bs-table-color-state: #ffffff;
--bs-table-bg-state: rgb(38 83 205);
}
ul.txt-list li.txt-item a:hover {
transition: all .5s;
transform: translateX(-10px);
font-size: 16px;
}
ul.about-list li.about-item a:hover {
transition: all .5s;
transform: translateX(-10px);
font-size: 16px;
}
.footer-social-icon {
position: relative;
left: -32px;
}
button.nfc-btn {
padding: 10px 16px;
    border: unset;
    background: linear-gradient(90deg, #00c3e5 0%, #25bdeb 100%);
    border-radius: 2px;
    font-size: 16px;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
}
.nfc-btn a {
text-decoration: none;
color: #ffffff;
font-weight: 500;
font-family: "Montserrat", sans-serif;
}
button.nfc-btn:hover {
background: linear-gradient(90deg, #0333FD 0%, #0E8030 100%);
}
.social-link {
display: inline-block;
position: relative;
}
.social-link::after {
content: "";
position: absolute;
top: 50%;
left: 30%;
width: 50%;
height: 83%;
background: #fff;
border-radius: 100%;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none;
}
.social-link:hover::after {
animation: pulse-wave 1s ease-out infinite;
opacity: 1;
}
@keyframes pulse-wave {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
70% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
.copyright {
background-color: #fff;
}
.copyright p {
font-weight: 500;
font-family: "Montserrat", sans-serif;
}
/*==========-------our clients css start--------===========*/
.slider {
width: 100%;
overflow: hidden;
position: relative;
background-color: #B7E3FF;
}
.slider-items {
display: flex;
gap: 20px;
align-items: center;
animation: scroll 200s linear infinite;
width: max-content;
}
.slider-items img {
width: 175px;
height: 115px;
background: #ffffff;
padding: 1px 6px;
border-radius: 4px;
border: 2px solid #6fadd5;
flex-shrink: 0;
}
/* Animation */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.last-box {
padding-top: 25px;
}
.choose-back .service-title-add {
text-align: left;
}
h2.why-heading {
text-align: left;
}
.qr-stand .service-title {
text-align: center;
}
.services-grid .service-title {
text-align: center;display: block;
}
.drop-d-box{padding: 0px 30px;}
.list-box-add{display:contents;}
.drop-list{width: 300px;}
/*-----*/
.content{
margin: 30px auto;
height: 142px;
}
.content1 {
margin: 30px auto;
height: 142px;
}
.product1{
background-image: url(../images/visitor-management-header.webp);
}
.product2{
background-image: url(../images/meeting-room-product.webp);
}
.product3{
background-image: url(../images/help-desk-product.webp);
}
.product4{
background-image: url(../images/file-management-product.webp);
}
.product5{
background-image: url(../images/amc-management-product.webp);
}
.product6{
background-image: url(../images/lead-management-product.webp);
}
#bg{
display: inline-block;
height: 100%;
width: 95%;
/* margin-top: 10px; */
}
#bg2{
display: inline-block;
height: 100%;
width: 95%;
}
.product7{
background-image: url(../images/gatepass-product.webp);
}
.product8{
background-image: url(../images/guard-patrolling-product.webp);
}
.product9{
background-image: url(../images/courier-service-product.webp);
}
.product10{
background-image: url(../images/material-management-product.webp);
}
.product11{background-image: url(../images/queue-management-product.webp);}
.product12{background-image: url(../images/digital-menu.webp);}
.product13{background-image: url(../images/restaurant-billing-product.webp);}
.product14{background-image: url(../images/feedback-system-product.webp);}
.product15{background-image: url(../images/teacher-attendance-system.webp);}
.product16{background-image: url(../images/school-management.webp);}
.product17{background-image: url(../images/library-management.webp);}
.product18{background-image: url(../images/hostel-management.webp);}
.product19{background-image: url(../images/nfc-business.webp);}
.product20{background-image: url(../images/digital-visiting-card.webp);}
.product21{background-image: url(../images/gst-billing-software.webp);}
.product22{background-image: url(../images/event-management-software.webp);}
.product22{background-image: url(../images/inventory-management-system.webp);}
#bg3{
display: inline-block;
height: 100%;
width: 95%;
}
#bg4{
display: inline-block;
height: 100%;
width: 95%;
}
#bg5{
display: inline-block;
height: 100%;
width: 95%;
}
#list-content{
padding: 50px;
text-align: center;
}
#list-content li{color: #fff; list-style: none;
font-size: 40px;
display: none;
}
.shape-box{display:block;width: 20%;}
.service-title-add{font-size: 15px;
font-weight: 700;
line-height: 39px;
margin-bottom: 15px;
color: #222222;
text-align: left;
font-family: "Montserrat", sans-serif;}
.service-card.active {
background-color: #ffffff;
cursor: default;
}
.service-card.active .service-card-title {
color: #222222;position: absolute;
}
.service-card.active .swap-on-hover__front-image {
opacity: 0;
}
.service-card.active .swap-on-hover__back-image {
opacity: 1;
}
.circle-mobile{display: none;}
section.our-client-back{background-color: #B7E3FF;}
.logo-background{padding: 10px;border-radius:3px;}
button.scroll-btn{display: none;
cursor: pointer;
position: fixed; 
bottom: 20px;
right: 30px;
z-index: 99;
width: 40px;
height: 40px;
border-radius: 50%;
background-color:rgb(38 83 207);
color: white;
border: none;}
button.scroll-btn:hover{background-color: #2653cd;color: #ffffff;}
.scroll-btn i{font-size: 18px;}
/*==============whataps icon css start===============*/
.btn-whatsapp-pulse {
background: #25d366;
color: white;
position: fixed;
top: 69%;
right: 20px;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
width: 0;
height: 0;
padding: 25px;
text-decoration: none;
border-radius: 50%;
animation-name: pulse;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
}
80% {
box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
}
}
.btn-whatsapp-pulse-border {
bottom: 120px;
right: 20px;
animation-play-state: paused;
}
.btn-whatsapp-pulse-border::before {
content: "";
position: absolute;
border-radius: 50%;
padding: 25px;
border: 5px solid #25d366;
opacity: 0.75;
animation-name: pulse-border;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
@keyframes pulse-border {
0% {
padding: 25px;
opacity: 0.75;
}
75% {
padding: 50px;
opacity: 0;
}
100% {
opacity: 0;
}
}
/*---------enquiry slide css start----------*/
.slide-btn-enquiry{
position: fixed;
right: 0%;
top: 60%;
font-size: 15px;
font-weight: 500;
display: block;
z-index: 99999999;
background: linear-gradient(180deg, #3582c8 0%, #3d57b8 100%);
color: #fff;
padding: 9px 18px;
animation-name: btn-bounce;
animation-duration: .5s;
animation-iteration-count: 2;
border: 2px solid #ffffff;
font-family: "Montserrat", sans-serif;
border-radius: 10px 0px 0px 10px;
}   
@keyframes btn-bounce{
0%{transform:scale(1.0);}
50%{transform:scale(1.2);}
100%{transform:scale(1.0);}
}
.pop-up-form-right{
position: fixed;
right: 0%;
top: 20%;
display: none;
background-color: #ffffff;
box-shadow: -1px -1px 7px #838383;
font-size:12px;
padding:20px;width: 35%;z-index: +99999999;
}
@media(max-width:768px){
.slide-btn,.pop-up-form-right{display:none;}
}
span.en-arrow i{position: relative;top: 7px;left: 2px;}
.form-box{margin: 10px auto;}
.form-control-enquiry{font-family: "Montserrat", sans-serif;font-size: 14px;padding: 8px;
border:unset;}
.enquiry-heading h3{border-bottom: 2px solid #2653cf;width: fit-content;margin: auto;padding-bottom: 4px;color: #2653cf;font-weight: 600;}
button.en-sub{ font-size: 22px;
    border-radius: 2px;}
input.en-sub:hover{background: #ffffff;color: #2653cc;font-weight: 500;}
.close {
cursor: pointer;
position: relative;
top: 50%;
right: 0%;
padding: 12px 16px;
transform: translate(0%, -50%);
color: #000000;
font-size: 25px;
}
.close-cross{float: right;position: relative;top: -23px;}
/*=============about us css start============*/
.about-bg:before{content:"";  background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
background-size: 100%;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top:-92px;
}
.about-bg{position: relative;}
.about-img-box img{width: 55%;
position: relative;
bottom: 10px;
}
.card-bg{position: relative;}
.abut-head{display: flex;justify-content: center;flex-direction: column;z-index: +99;}
.about-img-box{display: flex;justify-content: end;}
/*---------drop in animation---------*/
* animation class and keyframes */
.overflow-hidden {
overflow: hidden;
}
.drop-in {
animation: drop-in 1s ease 200ms backwards;
}
.drop-in-2 {
animation: drop-in 1200ms ease 500ms backwards;
}
@keyframes drop-in {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translate(0px);
}
}
.custom-line {
width: 204px;
height: 4px;
background: linear-gradient(to right, #003399 0%, #003399 20%, #bdbdbd 20%, #bdbdbd 100%);
border-radius: 1px;
background-size: 200% 100%;
background-position: left;
animation: slideBorder 2s ease-out forwards;
}
@keyframes slideBorder {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
section.our-vision{background-color:#ededed;}
.vision-img img{width: 80%;z-index: +99;}
.vision-img{display: flex;justify-content: center;}
.vision-left{display: flex;justify-content: center;flex-direction: column;}
section.why-choose-txt{background-color: #ededed;}
.innovation-img iframe {
border: 0;
border-radius: 30px;
}
/*-------div left and right animation in css start--------*/
.animation-element {
opacity: 0;
position: relative;
&.slide-left {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
opacity: 0;
-moz-transform: translate3d(-100px, 0px, 0px);
-webkit-transform: translate3d(-100px, 0px, 0px);
-o-transform: translate(-100px, 0px);
-ms-transform: translate(-100px, 0px);
transform: translate3d(-100px, 0px, 0px);
}
&.slide-right {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
opacity: 0;
-moz-transform: translate3d(100px, 0px, 0px);
-webkit-transform: translate3d(100px, 0px, 0px);
-o-transform: translate(100px, 0px);
-ms-transform: translate(100px, 0px);
transform: translate3d(100px, 0px, 0px);
}
&.slide-left.in-view, &.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
}
.call-div a{color: #ffffff;text-decoration: none;}
/*---------breadcrumb css start---------*/
ul.bread-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
color: #ffffff;
position: relative;
}
ul.bread-list li {
display: flex;
align-items: center;
}
ul.bread-list li.bread-item a {
text-decoration: none;
color: #ffffff;
font-size: 13px;
}
ul.bread-list li.bread-separator {
padding: 0 10px;
color: #ffffff;
}
i.bread-aero::before {
content: "\f285";
font-size: 12px !important;
font-weight: 500 !important;
}
/*---------breadcrumb css end---------*/
.contact-banner{background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
left: 0;
bottom: 160px;
position: relative;
background-position: left bottom;
height: 400px;
width: 100%;
background-size: 100%;
z-index: -1;
}
/*-------------contact us css start----------------*/  
.right_conatct_social_icon{
background: linear-gradient(to top right, #244DAD -5%, #295BF6 100%);
}
.contact_us{
background-color: #f1f1f1;
padding: 50px 0px;
}
.contact_inner{
background-color: #fff;
position: relative;
box-shadow: 20px 22px 44px #cccc;
border-radius: 25px;
}
.contact_field{
padding: 60px 340px 90px 100px;
}
.right_conatct_social_icon{
height: 100%;
}
.contact_field h3{
color: #000;
font-size: 40px;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 10px
}
.contact_field p{
color: #000;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
margin-bottom: 35px;
}
.contact_field .form-control{
border-radius: 0px;
border: none;
border-bottom: 1px solid #ccc;
margin-bottom: 13px;
}
.contact_field .form-control:focus{
box-shadow: none;
outline: none;
border-bottom: 2px solid #2756dc;
}
.contact_field .form-control::placeholder{
font-size: 13px;
letter-spacing: 1px;
}
.contact_info_sec {
position: absolute;
background-color: #2d2d2d;
right: 1px;
top: 18%;
height: 340px;
width: 340px;
padding: 40px;
border-radius: 25px 0 0 25px;
}
.contact_info_sec h4{
letter-spacing: 1px;
padding-bottom: 15px;
color: #ffffff;
}
.info_single{
margin: 30px 0px;
}
.info_single i{
margin-right: 15px;
color: #ffffff;
}
.info_single span{
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
}
button.contact_form_submit {
background: linear-gradient(to top right, #244DAD -5%, #295BF6 100%);
border: none;
color: #fff;
padding: 10px 15px;
width: 100%;
margin-top: 25px;
border-radius: 35px;
cursor: pointer;
font-size: 14px;
letter-spacing: 2px;
}
.socil_item_inner li{
list-style: none;
}
.socil_item_inner li a{
color: #fff;
margin: 0px 15px;
font-size: 14px;
}
.socil_item_inner{
padding-bottom: 10px;
}
.map_sec{
padding: 50px 0px;
}
.map_inner h4, .map_inner p{
color: #000;
text-align: center
}
.map_inner p{
font-size: 13px;
}
.map_bind{
margin-top: 50px;
border-radius: 30px;
overflow: hidden;
}
.cont-box img{width: 52%;position: relative;top: -7px;}
.cont-box{display: flex;justify-content: end;}
/*-------------contact us css end----------------*/ 
/*---------video css start--------*/
/* .video-box {
position: fixed;
bottom: 20px;
left: 20px;
width: 150px;
border-radius: 10px;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
} */
.video-box img {
width: 100%;
border-radius: 6px;
display: block;
}
/* .close-btn {
position: absolute;
top: -5px;
right: 4px;
background-color: #f54f4f;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
font-size: 14px;
line-height: 20px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
} */
.video-box video{background:#2197f8;
padding: 4px;
border-radius: 3px;height: 315px;}
.contact-social-icon ul.social-list li.social-item {
margin: 0px -6px;
}
/*=================meeting room css start===================*/
section.meeting-bg::before{
content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
background-size: 100%;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;
}
section.why-need{background-color:#ededed;}
.booking-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.booking-list li {
counter-increment: step-counter;
margin-bottom: 0px;
}
.booking-list li::before {
content: counter(step-counter);
margin-right: 5px;
font-size: 80%;
background-color: rgb(38 83 205);
color: white;
font-weight: bold;
padding: 5px 10px;
border-radius: 14px;
}
li.booking-item p{display: inline-block;margin-left: 10px;}
.step-container1 {
display: flex;
flex-direction: column;
gap: 11px;
}
.step {
display: flex;
align-items: flex-start; /* Align text and circle to top */
}
.circle1 {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #2551c8;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}
.text1 {
margin: 4px 22px;
font-size: 15px;
line-height: 1.5;
font-family: "Montserrat", sans-serif;
}
.img-what img{width: 100%;}
section.simple-meeting{background-color:#ededed;}
section.help-management{background-color:#ededed;}
section.mlai-back-main{background-color:#ededed;}
section.amc-back{background-color:#ededed;}
section.gatepass-back{background-color:#ededed;}
section.gate-pass-back{background-image: url(../images/enquiry-now-old.webp);
background-size: 100%;
background-repeat: no-repeat;}
.pass-img img{width: 50%;}
.choose-mlai-why{display: flex;
justify-content: center;
flex-direction: column;}
section.work-back{background-color:#ededed;}
.componant-box-gate{width: unset;height:300px;}
.componant-box4{padding: 10px;
background-color: #b3d9ff;
border-radius: 8px;
border-bottom: 15px solid #0080ff;background-size: 200% 200%;background-image: linear-gradient(to top, #b3d9ff 50%, transparent 50%);
}
.componant-box4:hover {background-image: linear-gradient(to top, #0080ff2b 51%, transparent 50%);transition: background-position 300ms, color 300ms ease, border-color 300ms ease;}
section.today-contact{background-color:#d2f3ff;}
.abut-pass img{width: 70%;}
.meeting-bg{position: relative;}
.about-img-box-meeting img{width: 42%;position: relative;bottom: 17px;}
.about-img-box-meeting {display: flex;justify-content: end;}
.room-solution iframe{width: 515px;border-radius: 13px;border: 4px solid #2197f8;}
.meeting-space img{width: 100%;}
.help-desk img{width: 100%;}
.amc-management img{width: 100%;}
.lead-management img{width: 100%;}
.employee-gatepass img{width: 100%;}
/*-------------------visitor management system css start-------------------------*/
.banner_bg {
background-color: #d1d1d1;
background-image: url(../img/landing-page/landing-banner.webp);
min-height: 610px;
height: auto;
background-repeat: no-repeat;
background-size: 100%;
}
h1.banner-heading {
/* background: -webkit-linear-gradient(left, #0073ff, #000558);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-size: 40px;
font-family: "Inter", sans-serif;
font-weight: 500;
line-height: 1.8;
margin-top: 17px;
width: 85%;
color: #444444;
}
/*-------text animation start-------*/
.text {
width: 29ch;
/* border-right: 3px solid; */
animation: blink 1s step-end infinite, type 2.5s steps(29) forwards;
overflow: hidden;
white-space: nowrap;
}
@keyframes blink {
50% {
border-color: transparent;
}
}
@keyframes type {
0% {
width: 0;
}
}
/*-------text animation end-------*/
h2.banner-heading-txt {
color: #555353;
font-size: 25px;
font-family: "Inter", sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 70px -25px;
}
.card-1 {
/* background-image: url(../img/landing-page/card-1.webp); */
/* background-repeat: no-repeat;
background-size: 100%; */
padding: 0px 50px;
background-image: linear-gradient(to right, #5d660b, #7ba925);
border-radius: 3px;
}
.card-1:hover,
.card-2:hover,
.card-3:hover {
transform: scale(1.1);
}
.card-1:hover,
.card-2,
.card-3:hover {
transition: transform 0.5s;
}
.card-2 {
/* background-image: url(../img/landing-page/card-2.webp); */
/* background-repeat: no-repeat;
background-size: 100%; */
padding: 0px 50px;
background-image: linear-gradient(to right, #d53857, #ce5658);
border-radius: 3px;
}
.card-3 {
/* background-image: url(../img/landing-page/card-3.webp); */
/* background-repeat: no-repeat;
background-size: 100%; */
padding: 0px 50px;
background-image: linear-gradient(to right, #b28b24, #b89227);
border-radius: 3px;
}
.card-icon img {
width: 54px;
margin: 15px;
border: 1px solid #fff;
padding: 6px;
border-radius: 9px;
}
.card-icon p {
color: #fff;
font-size: 18px;
font-weight: 500;
display: contents;
font-family: "Inter", sans-serif;
}
.card-box {
width: 75%;
margin: auto;
position: relative;
top: -30px;
}
section.bg-blue {
background-color: #b8ddf3;
}
.color-box img {
width: 23%;
background-color: #9b9fe6;
padding: 3px;
border-radius: 7px;
}
.small-card-1 span p {
margin-top: 20px;
font-size: 16px;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.circle2 {
position: absolute;
margin: auto;
margin-top: 35px;
width: 50px;
height: 50px;
background-color: rgb(155 159 230);
border-radius: 7%;
transition: all 0.5s;
}
.spectacledcoder-card1:hover .circle2 {
margin-top: 0px;
background-color: rgb(155 159 230);
width: 200px;
height: 200px;
border-radius: 15px;
transition: all 0.5s;
}
.spectacledcoder-card1:hover .content {
color: white;
}
.spectacledcoder-card1 img {
position: absolute;
margin: auto;
margin-top: 35px;
padding-top: 8px;
width: 35px;
}
.content-txt {
margin: 100px auto;
z-index: 100;
color: black;
font-weight: 500;
font-size: 21px;
line-height: 1.3;
font-family: "Inter", sans-serif;
text-align: center;
}
.spectacledcoder-card1 {
display: flex;
margin: auto;
width: 200px;
height: 200px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 3px 11px #78bde7;
border-radius: 15px;
transition: all 2s;
align-items: start;
justify-content: center;
}
.small-box-1 {
margin: 10px;width: 200px;
}
.box-space {
justify-content: center;
}
.circle2-bx-2 {
background-color: #50dab1;
}
.spectacledcoder-card2:hover .circle2 {
background-color: #50dab1;
}
.circle2-bx-3 {
background-color: #eb8b8b;
}
.spectacledcoder-card3:hover .circle2 {
background-color: #eb8b8b;
}
.circle2-bx-4 {
background-color: #b5c132;
}
.spectacledcoder-card4:hover .circle2 {
background-color: #b5c132;
}
.circle2-bx-5 {
background-color: #ef7fa7;
}
.spectacledcoder-card5:hover .circle2 {
background-color: #ef7fa7;
}
.circle2-bx-6 {
background-color: #4beaec;
}
.spectacledcoder-card6:hover .circle2 {
background-color: #4beaec;
}
.visitor-select-area p {
font-size: 14px;
}
/* .paragraph-txt p{font-size: 16px;
font-family: Gordita !important;
color: #222;text-align: justify;} */
/* .form-box {
padding: 1px 20px 20px;
background-color: #3589da;
border-radius: 2px;
} */
.form-box h2 {
font-size: 35px;
font-family: "Inter", sans-serif;
}
.form-box h2:after {
bottom: unset;
top: 64px;
left: 50%;
width: 20%;
background-color: #fff;
}
.input-group input:focus {
outline: none;
border-color: #86a8e7;
box-shadow: 0 0 8px rgba(134, 168, 231, 0.5);
}
.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="password"],
.input-group input[type="textarea"] {
width: 100%;
padding: 9px 15px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 1em;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-group {
margin-bottom: 15px;
text-align: left;
}
.captcha-loader img {
position: absolute;
width: 12%;
right: 16px;
top: 5px;
}
.visitor-select-area span {
display: inline-block;
padding: 0 10px;
}
.visitor-select-area span p {
letter-spacing: unset;
margin: 0 0px 6px;
}
button.submit-button {
padding: 10px 29px;
border: unset;
border-radius: 2px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
}
button.submit-button:hover {
animation: pulse 1.5s infinite;
}
pulse animation {
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 7.42719px;
transform: scale(1.02476);
}
button.submit-button span {
font-size: 16px;
font-weight: 500;
font-family: "Inter", sans-serif;
}
/* @keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 #2c73cf;
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 15px #3690db;
}
80% {
transform: scale(1);
box-shadow: 0 0 0 0 #3690db;
}
} */
.form-box h2 {
margin-top: 13px;
}
section.flow-chart h2:after {
top: 88px;
width: 25%;
bottom: unset !important;
}
section.key-feature {
background-color: #d6dbd5;
}
.key-feature-image {
padding: 10px;
background-image: linear-gradient(to right, #ce2a42, #f7405e);
border-radius: 8px;
box-shadow: 2px 3px 4px #a59494;
}
.third-heading h3 {
font-size: 20px;
margin: unset;
font-weight: 600;
}
p.enquiry-paragraph{font-weight: 500;}
.key-feature-image p {
font-family: "Inter", sans-serif;
font-size: 15px;
margin-top: 12px;
}
.form-control{border-bottom: 1px solid #6e6969;border-radius: unset;}
.form-control:focus {
    border-color:unset;
    box-shadow: unset;
}
.read-txt {
display: flex;
flex-direction: column;
justify-content: center;
}
.key-feature span.moretext1,
.moretext2,
.moretext3,
.moretext4,
.moretext5,
.moretext6,
.moretext7,
.moretext8,
.moretext10,
.moretext11 {
display: none;
font-family: "Inter", sans-serif;
}
span.moreless-button1,
.moreless-button2,
.moreless-button3,
.moreless-button4,
.moreless-button5,
.moreless-button6,
.moreless-button7,
.moreless-button8,
.moreless-button10,
.moreless-button11 {
font-weight: 500;
color: #fff;
font-size: 15px;
font-family: "Inter", sans-serif;
}
.key-feature-image1 {
background-image: linear-gradient(to right, #2511b0, #553ee8);
}
.key-feature-image2 {
background-image: linear-gradient(to right, #5d660b, #7ba925);
}
.key-feature-image3 {
background-image: linear-gradient(to right, #5e1183, #7957e1);
}
.key-feature-image4 {
background-image: linear-gradient(to right, #2743b0, #4864e1);
}
.key-feature-image5 {
background-image: linear-gradient(to right, #46235c, #6d5a79);
}
.key-feature-image6 {
background-image: linear-gradient(to right, #b28b24, #b89227);
}
.key-feature-image7 {
background-image: linear-gradient(to right, #256870, #3aa787);
}
.key-feature-image8 {
background-image: linear-gradient(to right, #d53857, #ce5658);
}
.key-feature-image9 {
background-image: linear-gradient(to right, #1c299c, #5a77df);
}
.key-feature-image10 {
background-image: linear-gradient(to right, #2f8095, #3ba5bf);
}
.key-feature-image11 {
background-image: linear-gradient(to right, #227616, #48ae58);
}
.Key-Feature-aft h2:after,
.Our-Clients h2:after {
width: 7%;
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
border: 1px solid #386ec2;
padding: 5px;
margin: 0px auto;
border-radius: 2px;
}
.Our-Clients .item {
margin: 5px;
}
.item {
padding: 10px;
}
/* .v-management-img img{width: 75%;} */
.topbar_add {
background-color: #3589da !important;
padding: 4px;
}
.top-bar a {
text-decoration: none;
color: #fff;
font-family: "Inter", sans-serif;
}
/* Wobble Vertical */
@keyframes wobble-vertical {
16.65% {
transform: translateY(8px);
}
33.3% {
transform: translateY(-6px);
}
49.95% {
transform: translateY(4px);
}
66.6% {
transform: translateY(-2px);
}
83.25% {
transform: translateY(1px);
}
100% {
transform: translateY(0);
}
}
.wobble-vertical {
display: inline-block;
@include hideTapHighlightColor();
@include hardwareAccel();
@include improveAntiAlias();
&:hover {
animation-name: wobble-vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
.heading-box-txt {
margin-top: 60px;
}
.step-1-img:hover {
transition: transform 0.5s;
}
.step-1-img:hover {
transform: scale(1.1);
}
.v-management-img img {
width: 70%;
}
.box-wdth {
display: flex;
}
.footer-head {
font-family: "Inter", sans-serif;
}
.textwidget_p {
font-family: "Inter", sans-serif !important;
}
.footer_button_text {
font-family: "Inter", sans-serif !important;
}
footer .footer-Content {
background-color: #3589da;
}
.top-bar {
float: right;
}
.card-box-div-visitor{display: flex;margin: auto;}
.top-bar {padding-top: 10px;}
.card-box-visit{padding: 15px 25px;box-shadow: 3px 3px 19px 0px #cdcdcd;margin: 10px;width: 200px;}
.card-img-add img{background:#9e4ff5;border-radius: 29px;padding: 10px;}
.card-img-add-1 img{background-color: #007eff;}
.card-img-add-2 img{background-color: #f55151;}
.card-img-add-3 img{background-color: #979918;}
.card-img-add-4 img{background-color: #525eed;}
.card-img-add-5 img{background-color: #16917a;}
.card-box-visit:hover{border-bottom: 4px solid #9e4ff5;}
.card-img-add-1:hover{border-bottom: 4px solid #007eff;}
.card-img-add-2:hover{border-bottom: 4px solid #f55151;}
.card-img-add-3:hover{border-bottom: 4px solid #979918;}
.card-img-add-4:hover{border-bottom: 4px solid #525eed;}
.card-img-add-5:hover{border-bottom: 4px solid #16917a;}
.card-txt p{margin-top: 10px;}
.file-manage img{width: 100%;}
.file-sys{display: flex;justify-content: center;flex-direction: column;}
.help-desk-banner img{width: 40%;
position: relative;
bottom: 33px;}
.meeting-room-sys img{width: 40%;
position: relative;
bottom: 33px;}
.amc-management-img img{width: 40%;
position: relative;
bottom: 33px;}
.lead-management-img img{width: 40%;
position: relative;
bottom: 33px;}
.gatepass-system img{width: 40%;
position: relative;
bottom: 33px;}
.fine-management img{width: 40%;
position: relative;
bottom: 33px;
}
section.file-manage-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
background-size: 100%;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.file-manage-bg{position: relative;}
.amc-bg{position: relative;}
section.amc-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
background-size: 100%;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.lead-bg{position: relative;}
section.lead-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
background-size: 100%;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.gatepass-bg{position: relative;}
section.gatepass-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
background-size: 100%;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.help-desk-bg{position: relative;}
section.help-desk-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
background-size: 100%;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.visitor-manage-img img{width: 40%;
position: relative;
bottom: 33px;top:unset;}
section.gaurd-features{background-color: #ededed;}
section.checking-system{background-color: #ededed;}
section.speed-up{background-color: #ededed;}
.pre-trip{background-color: #ededed;}
section.complete-bg{background-image: linear-gradient(#2756dd, #15347c);}
section.corporate-travel{background-color: #ededed;}
.courier-service img{width: 65%;top: -17px;}
.speed-up-workflow img{width: 100%;}
.travel-request img{width: 100%;}
.claimed-expense img{width: 100%;}
.travel-spend img{width: 100%;}
.travel-box{display: flex;
justify-content: center;
flex-direction: column;}
.expense-process img{width: 100%;}
.e-receipt img{width: 100%;}
.key-features-travel img{width: 100%;}
section.manual-gate-pass{background-color: #ededed;}
.material-gate-pass img{width: 100%;}
section.returnable-bg, section.queue-bg-add, section.features-bg, section.need-bg, section.key-features-bg, section.restro-bg, .product-bg, .table-bg, .app-bg, .feed-bg,
.it-bg, .softflow-bg, .approval-bg, .Returns-bg, .imenucard-bg, .pg-bg, .library-bg, .features-bg-sys, .network-bg, .inventory-sys-bg, .customer-bg, .cool-card-bg, .touch-bg, 
.library-bg-1, .taxi-booking-bg, .fee-point, .desk-point, .feature-desk, .clinic-sys, .canteen-features-bg, .payroll-bg, .reports-bg,
.desk-hotel-sys, .parking-list-bg, .refund-list-bg, .privacy-list-bg, .client-div, .cold-management-sys, .cafe-manage-sys, 
.ware-manage-sys, .salon-manage-sys, .sales-portal, .automate-bg, .Invoice-bg, .card-slid-bg{background-color: #ededed;}
.imenucard-video iframe{border-radius: 15px;}
.num-box{background: #ffffff;
box-shadow: 2px 5px 4px 1px #e7e5e5;
padding: 17px;
border-radius: 5px;}
ul.of-list li.of-item{color: #ffffff;font-size: 15px;font-family:"Montserrat", sans-serif ;}
.app-box{padding: 25px 20px;
background: #ffffff;box-shadow: 2px 5px 4px 1px #e7e5e5;border-radius: 3px;}
section.waiter-bg{background-color:#b7e3ff;}
.feed-back-mg img{width: 50%;}
.school-managementt img{width: 65%;
top: -30PX;}
.guard-patrol-system img{width: 60%;}
.guard-patrol-system{display: flex; justify-content: end;}
.gaurd-system-img img{width: 45%;position: relative;top: -28px;}
.gaurd-sys-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.gaurd-sys-bg{position: relative;}
section.travel-system-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
section.travel-system-bg{position: relative;}
.pre-post-trip img{width: 100%;}
.material-sys-bg{position: relative;}
.material-sys-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.material-manage-img img{width: 70%;}
.returnable-gate-pass img{width: 100%;}
.add-remove img{width: 100%;}
.capture-material img{width: 100%;}
.identify-material img{width: 100%;}
.real-time-tracking img{width: 100%;}
.material-gate-pass-img img{width: 100%;}
.request img{width: 100%;}
.approval-img img{width: 100%;}
.dispatch-img img{width: 100%;}
.returns-img img{width: 100%;}
.add-mar-max{margin-top: 40px;}
.queue-management img{width: 67%;top: -20px;}
.queue-bg{position: relative;}
.queue-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.queue-system img{width: 100%;}
.digital-menu-card img{width: 67%;}
.menu-bg{position: relative;}
.menu-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.work-bg img{width: 90%;}
.feedback-menu img{width: 65%;top:-22px;}
.feedback-bg{position: relative;}
.feedback-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.e-campus-img img{width: 100%;}
.school--bg{position: relative;}
.school--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.teacher-bg{position: relative;}
.teacher-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.teacher-attend img{width: 65%;}
.mlai-teacher-attend img{width: 100%;}
.restro-billing-bg{position: relative;}
.restro-billing-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.restaurant-management img{width: 65%;}
.restro-manage-img img{width: 100%;}
.restro-benefirts img{width: 100%;}
.desktop-app img{width: 100%;}
.menu-scan-restro{width: 100%;}
.img-restro{display: flex;justify-content: center;flex-direction: column;}
.take-orders img{width: 100%;margin-top: 30px;}
.order-maage-restro img{width: 100%;}
.real-time-restro img{width: 100%;}
.table-reservation img{width: 100%;}
.payment-restro img{width: 100%;}
.shipping-method img{width: 40%; margin-top: 20px;}
.android-app-restro img{width: 100%;}
.hotel-bg{position: relative;}
.hotel-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.library-add{margin-top: 30px;}
.visiting-bg{position: relative;}
.visiting-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.visiting-card-img img{width: 75%;top: -22px;}
.event-bg{position: relative;}
.event-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.inventory-bg{position: relative;}
.inventory-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.eco-txt{font-weight: 600;}
.card-img-1 img{background:#c0e9b0;padding: 11px;border-radius: 44px;}
.card-img-1{text-align: center;width: 260px;
padding: 30px; transition: transform 0.4s ease-in-out;}
.all-nfc-card-box{display: flex;}
.card-img-2 img{background: #cd8c4f;}
.card-img-3 img{background: #5c95c5;}
.card-img-4 img{background: #ff9f00;}
.card-img-5 img{background: #acdbeb;}
.card-img-1:hover img {transform: scale(1.1);}
.card_features-add img{width: 100%;}
.only-img-nfc{margin-top: 90px;}
.cool-right li.cool-item p{text-align: right;}
ul.cool-list li.cool-item{list-style: none;}
span.list-heading{font-size: 18px;
color: #c64b04;
font-weight: 700;}
.nfc-card-work img{width: 100%;}
.one{background-image: linear-gradient(#f46a4b, #ec4a4a);}
.two{background-image: linear-gradient(#3d5eaa, #199bd0);}
.three{background-image: linear-gradient(#15ae84, #11699d);}
.step-two{margin-top: 60px;}
.step-three{margin-top: 80px;}
.noti-1{color:#4060ae !important;}
.noti-2{color: #13a287 !important;}
section.sharing-bg{background-image: linear-gradient(#2756dd, #15347c);}
.sharing-box{text-align: center;}
span.share-txt{font-size: 18px;font-weight: 600;}
.sharing-box img{border: 3px solid #ffffff;border-radius: 23px;padding: 12px;transition: transform 0.4s ease;}
.sharing-box:hover img {transform: scale(1.05);background: #f55252;}
.sharing-box:hover {
background-color: #ffffff20; 
}
.sharing-box {
background-color: transparent;
transition: background-color 0.4s ease;
padding: 20px;
text-align: center;
border-radius: 12px; /* optional for rounded corners */
}
.txt-t{position: relative;top: 10px;}
.apps:hover img{transform: scale(1.05);
background: linear-gradient(180deg, #3ebdcb 0%, #167983 100%);}
.tap-to-pay:hover img{background: linear-gradient(180deg, #5748e6 0%, #140f96 100%);}
.information:hover img{background: linear-gradient(180deg, #e7a300 0%, #f0c200 100%);}
/*--------nfc crosuel css start---------*/
.carousel-container {
width: 100%;
max-width: 1200px;
height: 450px;
position: relative;
perspective: 875px;
margin-top: 70px;
}
.carousel-track {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-nfc .card {
position: absolute;
width: 280px;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
}
.card-nfc .card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-nfc .card.center {
z-index: 10;
transform: scale(1.1) translateZ(0);
}
.card-nfc .card.center img {
filter: none;
}
.card-nfc .card.left-2 {
z-index: 1;
transform: translateX(-400px) scale(0.8) translateZ(-300px);
opacity: 0.7;
}
.card-nfc .card.left-2 img {
filter: grayscale(100%);
}
.card-nfc .card.left-1 {
z-index: 5;
transform: translateX(-200px) scale(0.9) translateZ(-100px);
opacity: 0.9;
}
.card-nfc .card.left-1 img {
filter: grayscale(100%);
}
.card-nfc .card.right-1 {
z-index: 5;
transform: translateX(200px) scale(0.9) translateZ(-100px);
opacity: 0.9;
}
.card-nfc .card.right-1 img {
filter: grayscale(100%);
}
.card-nfc .card.right-2 {
z-index: 1;
transform: translateX(400px) scale(0.8) translateZ(-300px);
opacity: 0.7;
}
.card-nfc .card.right-2 img {
filter: grayscale(100%);
}
.card-nfc .card.hidden {
opacity: 0;
pointer-events: none;
}
.card-nfc .member-info {
text-align: center;
transition: all 0.5s ease-out;
margin-top: -73px;
}
.card-nfc .member-name {
color: rgb(8, 42, 123);
font-size: 2.5rem;
font-weight: 700;
position: relative;
display: inline-block;
}
.card-nfc .member-name::before,
.card-nfc .member-name::after {
content: "";
position: absolute;
top: 100%;
width: 100px;
height: 2px;
background: rgb(8, 42, 123);
}
.card-nfc .member-name::before {
left: -120px;
}
.card-nfc .member-name::after {
right: -120px;
}
.card-nfc .member-role {
color: #848696;
font-size: 1.5rem;
font-weight: 500;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.1em;
position: relative;
}
.card-nfc .dots {
display: flex;
justify-content: center;
gap: 10px;
}
.card-nfc .dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(8, 42, 123, 0.2);
cursor: pointer;
transition: all 0.3s ease;
}
.card-nfc .dot.active {
background: rgb(8, 42, 123);
transform: scale(1.2);
}
.card-nfc .nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(8, 42, 123, 0.6);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
transition: all 0.3s ease;
font-size: 1.5rem;
border: none;
outline: none;
padding-bottom: 4px;
}
.card-nfc .nav-arrow:hover {
background: rgba(0, 0, 0, 0.8);
transform: translateY(-50%) scale(1.1);
}
.card-nfc .nav-arrow.left {
left: 20px;
padding-right: 3px;
}
.card-nfc .nav-arrow.right {
right: 20px;
padding-left: 3px;
}
.nfc-card-heaing-box{display: flex;justify-content: center;flex-direction: column;}
p.nfc-paragraph{font-size: 18px;font-weight: 600;text-align: center;color: #757576;}
.one-box{padding: 0px 30px 30px;
margin-top: 40px;
border-radius: 50px 2px 50px 2px;
background-color: #f5dede;
box-shadow: 1px 2px 5px 0px #eba3a3;}
.visit-one{background-image: linear-gradient(to right, #f54d4d, #F56969);padding: 15px 30px;width: fit-content;margin: auto;border-radius: 15px 0px 15px 0px;box-shadow: 1px 2px 5px 0px #eba3a3;box-shadow: 1px 2px 5px 0px #eba3a3;
position: relative;
left: -183px;
top: -10px;}
span.nfc-txt{color: #fff;font-size: 22px;font-weight: 500;font-family: "Montserrat", sans-serif;}
li.one-item{list-style: none;font-size: 20px;
font-weight: 400;font-family: "Montserrat", sans-serif;line-height: 40px;}
li.one-item i{color:#f56060;}
li.one-item span{margin-left: 15px;}
.one-box1{background-color: #abedc4;box-shadow: 1px 2px 5px 0px #6bd793;}
.visit-one1{background-image: linear-gradient(to right, #1ba34d, #55b178);box-shadow: 1px 2px 5px 0px #6bd793;}
li.one-item1 i{color:#198b43;}
/*--------nfc crosuel css end---------*/
/*-----card crosuel start css-------*/
#cCarousel {
position: relative;
width: 100%;
margin: auto;
}
#cCarousel .arrow {
position: absolute;
top: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
color: #2654d0;
font-size: 40px;
cursor: pointer;
}
#cCarousel #prev {
left: 0px;
}
#cCarousel #next {
right: 0px;
}
#carousel-vp {
width:100%;
max-width: 1200px;
height: 400px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
margin: auto;
}
#cCarousel #cCarousel-inner {
display: flex;
position: absolute;
transition: 0.3s ease-in-out;
gap: 10px;
left: 0px;
}
.cCarousel-item {
width: 350px;
height: auto;
min-height: 265px;
border-radius: 15px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 2px 4px 5px #ccc;
}
.cCarousel-item img {
width: 100%;
object-fit: cover;
min-height: 246px;
background: #2856dd17;
}
.cCarousel-item .infos {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background: white;
color: black;
}
.cCarousel-item .infos button {
background: #222;
padding: 10px 30px;
border-radius: 15px;
color: white;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
}
/*---------------*/
section.tab-bg{background-image: url(../images/enquiry-now-old.webp);
background-size: 100%;
background-repeat: no-repeat;}
button.tab-button{padding: 14px 30px;
border: unset;
border-radius: 3px;
background: #ffffff;font-size: 18px;
font-weight: 500;font-family: "Montserrat", sans-serif;}
.tab-box-btn{display: flex;justify-content:center ;flex-direction: column;}
button.tab-button:hover{background-image: linear-gradient(to right, #3D418D, #38AF58);color:#ffffff;}
/*------faq css start---------*/
.accordion .accordion-item {
border-bottom: 1px solid #ccc;
border-top: unset;
border-left: unset;
border-right: unset;
}
.accordion .accordion-item button[aria-expanded='true'] {
border-bottom: 1px solid #2654d4;
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
font-size: 1.15rem;
font-weight: 400;
border: none;
background: none;
outline: none;
}
.accordion button:hover,
.accordion button:focus {
cursor: pointer;
color: #2654d4;
}
.accordion button:hover::after,
.accordion button:focus::after {
cursor: pointer;
color: #03b5d2;
border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
padding: 1em 1.5em 1em 0;
font-family: "Montserrat", sans-serif;
font-size: 16px;font-weight: 500;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: '';
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: '';
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded='true'] {
color:#2654d4;
}
.accordion button[aria-expanded='true'] .icon::after {
width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
will-change: opacity, max-height;
background: #6c88d517;
}
.accordion .accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content p {
font-size: 1rem;
font-weight: 500;
margin: 2em 0;
}
.only-mobile h2{text-align: center;}
.only-line{margin: auto;}
.nfc-one-bg{position: relative;}
.nfc-one-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.library-bg{position: relative;}
.library-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.gst-add-bg{position: relative;}
.gst-add-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.term-bg{position: relative;}
.term-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.t-travel-bg{position: relative;}
.t-travel-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.fee-bg{position: relative;}
.fee-bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.desk--bg{position: relative;}
.desk--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.desk-box li.of-item{color:#222222 !important;}
.patient--bg{position: relative;}
.patient--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.canteen--bg{position: relative;}
.canteen--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
#more2 {
transition: all 0.4s ease-in-out;
}
.num-box1{margin-bottom: 10px;}
.hotel-manage--bg{position: relative;}
.hotel-manage--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.parking--bg{position: relative;}
.parking--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.refung--bg{position: relative;}
.refung--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.certificate--bg{position: relative;}
.certificate--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 221px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.img-certificate-1 img, .img-certificate-2 img, .img-certificate-3 img{width: 100%;border: 6px solid #195ead;
border-radius: 7px;}
.privacy--bg{position: relative;}
.privacy--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
/*-------clients page css start-------*/
.client-div {
margin-top: 20px;
}
.client-div .thumbnail:hover {
-webkit-transform: scale(1.1);
}
.client--bg{position: relative;}
.client--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
/*-------clients page css end-------*/
.certifide-box{margin-top: 30px;}
.error--bg{position: relative;}
.error--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 200px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.error-box{margin-top: 20px;}
.error_img_height{margin: 80px auto 25px;}
.error_home button{font-family: "Montserrat", sans-serif;
font-size: 15px;
padding: 12px 51px;
color: #ffffff;
border: unset;
border-radius: 3px;
background: linear-gradient(to bottom, #26689F 0%, #2197F8 100%);font-weight: 500;}
.thank--bg{position: relative;}
.thank--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 200px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.error_home span i{font-size: 45px;color: #2da55a;}
.error-img-box{margin: 80px auto 80px;}
.animated-icon {
display: inline-block;
color: #28a745; /* green check */
font-size: 3rem; /* adjust size as needed */
animation: bounce-in 1s ease-out forwards;
opacity: 0;
}
@keyframes bounce-in {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 1;
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
/*------testimonial css start-------*/
.testim {
width: 100%;
position: relative;
top: 50%;
/* -webkit-transform: translatey(-50%); */
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
/* transform: translatey(-50%); */
background-image: linear-gradient(#244DAD, #295BF6);
}
.testim .wrap {
position: relative;
width: 100%;
max-width: 1020px;
padding: 40px 20px;
margin: auto;
}
.testim .arrow {
display: block;
position: absolute;
color: #eee;
cursor: pointer;
font-size: 2em;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s ease-in-out;    
-ms-transition: all .3s ease-in-out;    
-moz-transition: all .3s ease-in-out;    
-o-transition: all .3s ease-in-out;    
transition: all .3s ease-in-out;
padding: 5px;
z-index: 22222222;
}
.testim .arrow:before {
cursor: pointer;
}
.testim .arrow:hover {
color: #f55454;
}
.testim .arrow.left {
left: 10px;
}
.testim .arrow.right {
right: 10px;
}
.testim .dots {
text-align: center;
position: absolute;
width: 100%;
bottom: 60px;
left: 0;
display: block;
z-index: 3333;
height: 12px;
}
.testim .dots .dot {
list-style-type: none;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #eee;
margin: 0 10px;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;    
-ms-transition: all .5s ease-in-out;    
-moz-transition: all .5s ease-in-out;    
-o-transition: all .5s ease-in-out;    
transition: all .5s ease-in-out;
position: relative;
}
.testim .dots .dot.active,
.testim .dots .dot:hover {
background: #f55757;
border-color: #f55757;
}
.testim .dots .dot.active {
-webkit-animation: testim-scale .5s ease-in-out forwards;   
-moz-animation: testim-scale .5s ease-in-out forwards;   
-ms-animation: testim-scale .5s ease-in-out forwards;   
-o-animation: testim-scale .5s ease-in-out forwards;   
animation: testim-scale .5s ease-in-out forwards;   
}
.testim .cont {
position: relative;
overflow: hidden;
}
.testim .cont > div {
text-align: center;
position: absolute;
top: 0;
left: 0;
padding: 0px 45px 75px;
opacity: 0;
}
.testim .cont > div.inactive {
opacity: 1;
}
.testim .cont > div.active {
position: relative;
opacity: 1;
}
.testim .cont div .img img {
display: block;
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
}
.testim .cont div.active .img img {
-webkit-animation: testim-show .5s ease-in-out forwards;            
-moz-animation: testim-show .5s ease-in-out forwards;            
-ms-animation: testim-show .5s ease-in-out forwards;            
-o-animation: testim-show .5s ease-in-out forwards;            
animation: testim-show .5s ease-in-out forwards;            
}
.testim .cont div.active h5 {
-webkit-animation: testim-content-in .4s ease-in-out forwards;    
-moz-animation: testim-content-in .4s ease-in-out forwards;    
-ms-animation: testim-content-in .4s ease-in-out forwards;    
-o-animation: testim-content-in .4s ease-in-out forwards;    
animation: testim-content-in .4s ease-in-out forwards;    
}
.testim .cont div.active h6 {
-webkit-animation: testim-content-in .4s ease-in-out forwards;    
-moz-animation: testim-content-in .4s ease-in-out forwards;    
-ms-animation: testim-content-in .4s ease-in-out forwards;    
-o-animation: testim-content-in .4s ease-in-out forwards;    
animation: testim-content-in .4s ease-in-out forwards;    
}
.testim .cont div.active p {
-webkit-animation: testim-content-in .5s ease-in-out forwards;    
-moz-animation: testim-content-in .5s ease-in-out forwards;    
-ms-animation: testim-content-in .5s ease-in-out forwards;    
-o-animation: testim-content-in .5s ease-in-out forwards;    
animation: testim-content-in .5s ease-in-out forwards;    
}
.testim .cont div.inactive .img img {
-webkit-animation: testim-hide .5s ease-in-out forwards;            
-moz-animation: testim-hide .5s ease-in-out forwards;            
-ms-animation: testim-hide .5s ease-in-out forwards;            
-o-animation: testim-hide .5s ease-in-out forwards;            
animation: testim-hide .5s ease-in-out forwards;            
}
.testim .cont div.inactive h5 {
-webkit-animation: testim-content-out .4s ease-in-out forwards;        
-moz-animation: testim-content-out .4s ease-in-out forwards;        
-ms-animation: testim-content-out .4s ease-in-out forwards;        
-o-animation: testim-content-out .4s ease-in-out forwards;        
animation: testim-content-out .4s ease-in-out forwards;        
}
.testim .cont div.inactive h6 {
-webkit-animation: testim-content-out .4s ease-in-out forwards;        
-moz-animation: testim-content-out .4s ease-in-out forwards;        
-ms-animation: testim-content-out .4s ease-in-out forwards;        
-o-animation: testim-content-out .4s ease-in-out forwards;        
animation: testim-content-out .4s ease-in-out forwards;        
}
.testim .cont div.inactive p {
-webkit-animation: testim-content-out .5s ease-in-out forwards;    
-moz-animation: testim-content-out .5s ease-in-out forwards;    
-ms-animation: testim-content-out .5s ease-in-out forwards;    
-o-animation: testim-content-out .5s ease-in-out forwards;    
animation: testim-content-out .5s ease-in-out forwards;    
}
@-webkit-keyframes testim-scale {
0% {
-webkit-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-webkit-box-shadow: 0px 0px 10px 5px #eee;        
box-shadow: 0px 0px 10px 5px #eee;        
}
70% {
-webkit-box-shadow: 0px 0px 10px 5px #ea830e;        
box-shadow: 0px 0px 10px 5px #ea830e;        
}
100% {
-webkit-box-shadow: 0px 0px 0px 0px #ea830e;        
box-shadow: 0px 0px 0px 0px #ea830e;        
}
}
@-moz-keyframes testim-scale {
0% {
-moz-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-moz-box-shadow: 0px 0px 10px 5px #eee;        
box-shadow: 0px 0px 10px 5px #eee;        
}
70% {
-moz-box-shadow: 0px 0px 10px 5px #ea830e;        
box-shadow: 0px 0px 10px 5px #ea830e;        
}
100% {
-moz-box-shadow: 0px 0px 0px 0px #ea830e;        
box-shadow: 0px 0px 0px 0px #ea830e;        
}
}
@-ms-keyframes testim-scale {
0% {
-ms-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-ms-box-shadow: 0px 0px 10px 5px #eee;        
box-shadow: 0px 0px 10px 5px #eee;        
}
70% {
-ms-box-shadow: 0px 0px 10px 5px #ea830e;        
box-shadow: 0px 0px 10px 5px #ea830e;        
}
100% {
-ms-box-shadow: 0px 0px 0px 0px #ea830e;        
box-shadow: 0px 0px 0px 0px #ea830e;        
}
}
@-o-keyframes testim-scale {
0% {
-o-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-o-box-shadow: 0px 0px 10px 5px #eee;        
box-shadow: 0px 0px 10px 5px #eee;        
}
70% {
-o-box-shadow: 0px 0px 10px 5px #ea830e;        
box-shadow: 0px 0px 10px 5px #ea830e;        
}
100% {
-o-box-shadow: 0px 0px 0px 0px #ea830e;        
box-shadow: 0px 0px 0px 0px #ea830e;        
}
}
@keyframes testim-scale {
0% {
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
box-shadow: 0px 0px 10px 5px #eee;        
}
70% {
box-shadow: 0px 0px 10px 5px #ea830e;        
}
100% {
box-shadow: 0px 0px 0px 0px #f55757;        
}
}
@-webkit-keyframes testim-content-in {
from {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-webkit-transform: translateY(0);        
transform: translateY(0);        
}
}
@-moz-keyframes testim-content-in {
from {
opacity: 0;
-moz-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-moz-transform: translateY(0);        
transform: translateY(0);        
}
}
@-ms-keyframes testim-content-in {
from {
opacity: 0;
-ms-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-ms-transform: translateY(0);        
transform: translateY(0);        
}
}
@-o-keyframes testim-content-in {
from {
opacity: 0;
-o-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-o-transform: translateY(0);        
transform: translateY(0);        
}
}
@keyframes testim-content-in {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);        
}
}
@-webkit-keyframes testim-content-out {
from {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-webkit-transform: translateY(-100%);        
transform: translateY(-100%);        
}
}
@-moz-keyframes testim-content-out {
from {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-moz-transform: translateY(-100%);        
transform: translateY(-100%);        
}
}
@-ms-keyframes testim-content-out {
from {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-ms-transform: translateY(-100%);        
transform: translateY(-100%);        
}
}
@-o-keyframes testim-content-out {
from {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);        
transform: translateY(-100%);        
}
}
@keyframes testim-content-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);        
}
}
@-webkit-keyframes testim-show {
from {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-webkit-transform: scale(1);       
transform: scale(1);       
}
}
@-moz-keyframes testim-show {
from {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-moz-transform: scale(1);       
transform: scale(1);       
}
}
@-ms-keyframes testim-show {
from {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-ms-transform: scale(1);       
transform: scale(1);       
}
}
@-o-keyframes testim-show {
from {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-o-transform: scale(1);       
transform: scale(1);       
}
}
@keyframes testim-show {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);       
}
}
@-webkit-keyframes testim-hide {
from {
opacity: 1;
-webkit-transform: scale(1);       
transform: scale(1);       
}
to {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-moz-keyframes testim-hide {
from {
opacity: 1;
-moz-transform: scale(1);       
transform: scale(1);       
}
to {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
}
@-ms-keyframes testim-hide {
from {
opacity: 1;
-ms-transform: scale(1);       
transform: scale(1);       
}
to {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
}
@-o-keyframes testim-hide {
from {
opacity: 1;
-o-transform: scale(1);       
transform: scale(1);       
}
to {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
}
@keyframes testim-hide {
from {
opacity: 1;
transform: scale(1);       
}
to {
opacity: 0;
transform: scale(0);
}
}
@media all and (max-width: 300px) {
body {
font-size: 14px;
}
}
@media all and (max-width: 500px) {
.testim .arrow {
font-size: 1.5em;
}
.testim .cont div p {
line-height: 25px;
}
}
.testim h5, .testim p{color: #ffffff;}
/*------testimonial css end-------*/
/*--------enquery form popup css start----------*/
#popup {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background-color: rgba(96, 95, 127, 0.7);
z-index: 1000;
}
.popup-container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
background-color: #ffffff;
padding: 20px 50px;
width: 42%;
border-radius: 8px;
position: relative;
z-index: 1001;
}
/* .popup::before{content: "";
    position: absolute;
    border-left: 3px solid #f55f5f;
    left: 0px;
    min-height: 442px;
    top: 0;} */
.close-popup {
display: flex;
justify-content: flex-end;
}
.close-popup a {
background-color:#367ac5;
color: #fff;
padding: 4px 10px;
font-weight: bold;
text-decoration: none;
border-radius: 28px;
display: inline-block;
}
.popup > h2 {
font-size: 1.6rem;
margin-bottom: 10px;
}
.popup > p {
font-size: 1.2rem;
margin-bottom: 10px;
}
.popup-btn {
display: inline-block;
text-decoration: none;
border: 2px solid rebeccapurple;
padding: 5px 15px;
border-radius: 20px;
margin: 10px 0px;
transition: 0.2s all ease-in;
}
.popup-btn:hover {
background-color: rebeccapurple;
color: #fff;
}
/*-------rating css start--------*/
.location-map{border-radius: unset;}
.cold--bg{position: relative;}
.cold--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.cold-img img{width: 100%;}
.logo-border-add{border: 2px solid #6fadd5;background: #ffffff;margin: 12px 10px;}
.clint-auto-div{justify-content:center ;}
a.site-map-list{color: #222222;
text-decoration: none;
font-size: 15px;font-family: "Montserrat", sans-serif;}
.cafe--bg{position: relative;}
.cafe--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.warehouse--bg{position: relative;}
.warehouse--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.salon--bg{position: relative;}
.salon--bg::before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
/*---------salon card css start---------*/
.go-corner {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 32px;
height: 32px;
overflow: hidden;
top: 0;
right: 0;
background-color:#2654d5;
border-radius: 0 4px 0 32px;
}
.go-arrow {
margin-top: -4px;
margin-right: -4px;
color: white;
font-family: courier, sans;
}
.card1-txt {
display: block;
position: relative;
background-color: #f2f8f9;
border-radius: 4px;
padding: 30px 15px;
margin: 12px;
text-decoration: none;
z-index: 0;
overflow: hidden;
height: auto;
min-height: 200px;
}
.card1-txt:before {
content: "";
position: absolute;
z-index: -1;
top: -16px;
right: -16px;
background:#2654d5;
height: 32px;
width: 32px;
border-radius: 32px;
transform: scale(1);
transform-origin: 50% 50%;
transition: transform 0.25s ease-out;
}
.card1-txt:hover:before {
transform: scale(50);
}
.card1-txt2:hover:before {
transform: scale(100);
}
.card1-txt2{border: 1px solid #d1d1d1;min-height: unset;margin: 15px auto;}
.card1-txt:hover p {
transition: all 0.3s ease-out;
color: rgba(255, 255, 255, 0.8);
}
.card1-txt:hover h3 {
transition: all 0.3s ease-out;
color: #ffffff;
}
a.card1-txt p, .card1-txt h3{color: #222222;font-family: "Montserrat", sans-serif;}
.digi-sllon-box{display: flex;}
.digi-img img{background: #2654d5;border-radius: 2px;padding: 20px;}
.digi-img{margin: 8px 9px;}
.lady-img img{width:100%;}
.feed-fill-img{background-color: #f9882d;
height: 150px;
width: 160px;
padding:30px;
border-top-right-radius: 2px;
border-top-left-radius: 2px;}
.feed-fill-img img{text-align: center;transition: transform 0.4s ease;}
.feed-fill-img:hover img {
transform: scale(1.1);
}
.feed-fill-txt{border: 1px solid #f9882d;
height: 32px;
width: 160px;
padding: 4px;
background: #ffffff;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;text-align: center;}
.feed-fill-txt p{font-weight: 600;}
.div-code-txt{display: flex;justify-content: center;margin: 20px auto;}
.gate-pass-try{margin-top: 30px;}
.feed-fill-img-2{background: #179ca6;}
.feed-fill-img-3{background: #7d51a1;}
.feed-fill-txt-2{border: 1px solid #179ca6;}
.feed-fill-txt-3{border: 1px solid #7d51a1;}
.lady-img{position: relative;top: 47px;}
.feed-img{text-align: center;}
.feed-img img{width: 82%;}
.lady-img-mobile{display: none;}
/*----------banner tooltib add css start----------*/
  .tooldiv {
   position: absolute;
    bottom: 36%;
    width: 248px;
    left: 14%;
    transform: translateX(-50%);
    background-color: #ffffff;
    color: #fff;
    padding: 4px 12px;
    border-radius: 5px;
    /* white-space: nowrap; */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 10;
    
  }
  .tooldiv1{position: absolute;
    bottom: 36%;
    left: 26%;}
.tooldiv2{position: absolute;
    bottom: 36%;
    left: 37%;}
    .tooldiv3{position: absolute;
    bottom: 36%;
    left: 50%;}
.tooldiv4{position: absolute;
    bottom: 36%;
    left: 50%;}
.tooldiv4{position: absolute;
    bottom: 36%;
    left: 63%;}
.tooldiv5{position: absolute;
    bottom: 36%;
    left: 75%;}
.tooldiv6{position: absolute;
    bottom: 36%;
    left: 86%;}
  .tooldiv p{font-size: 12px;margin-bottom: 0;color: #222222;
    font-weight: 500;}

  .service-card:hover .tooldiv {
    opacity: 1;
    visibility: visible;
  }

/*----------banner tooltib add css end----------*/
.why-digitize{margin-bottom: 0;}
.services-grid .service-item a{text-decoration: none;}
/*---------lazy loading css start---------*/
 .image-box-client {
      
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .image-box-client img {
      object-fit: cover;
    }

    .image-box-client.show {
      opacity: 1;
      transform: translateY(0);}
.flash-div{background-color: #ededed;}
.enquiry-heading h3{border-bottom: 3px solid #2653cf;margin: auto;}
/*--------try now popup------------*/
.modal-dialog-try{max-width: 40%;}
.close-try{transform: unset;display: flex;justify-content: end;}
button.try-get{top: 0;right: 0;}
.modal-header{margin-top: -15px;}
.feature-li-box, .feature-li-box-data{display: flex;justify-content: center;flex-direction: column;}
.feature-li-box-data img{width: 100%;}
.feed-img{position: relative;top: 105px;}
.visit-read a{text-decoration: none;}
span.visit-read{color: #0d6efd;}
a.product-card-box{text-decoration: none;}
.why-frist-txt{margin-top: 50px;}
.smart-courier-bg{position: relative;}
.smart-courier-bg:before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
.card-bg{position: relative;}
.card-bg:before{content: "";
background-image: url(../images/about/about_us.webp);
background-repeat: no-repeat;
min-height: 500px;
height: auto;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 60px;
width: 100%;
top: -92px;}
/*form css*/
   .content-card{
    background-color:white;
    box-shadow: 2px 3px 4px #d1d1d1;
}

.content-card input[type=text], [type=email]{
    border: none;
    border-bottom: 1px solid black;
    outline:none;
    width:100%;
    margin: 8px 0;
    padding:10px 0;
}
.content-card input[type=number]{
    border: none;
    border-bottom: 1px solid black;
    outline:none;
    margin: 8px 0;
    padding:5px 0;
}
.content-card input :hover {
    background-color: red;
}
select{
    border: none;
    border-bottom: 1px solid black;
    outline:none;
    margin: 8px 0;
    padding:5px 0;
    width:50%;
}
.content-card .beside{
    display:flex;  
    justify-content: space-between;
}
.content-card button{
    color:#ffffff;
    background-color: #4caf50;
    height:40px;
    width:25%;
    margin-top:15px;
    cursor: pointer;
    border:none;
    border-radius:2%;
    outline:none;
    text-align:center;
    font-size:16px;
    text-decoration:none;
    -webkit-transition-duration:0.4s;
    transition-duration:0.4s;
}
.content-card button:hover{
    background-color:#333333;
}
.content-card img{width: 100%;}
.frm-card-div{padding: 20px;}

/*--------------*/
.auth-container {
      width: 350px;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .button-box {
      display: flex;
    }

    .button-box button {
      flex: 1;
      padding: 15px;
      cursor: pointer;
      border: none;
      background: #ddd;
      font-weight: bold;
      transition: background 0.3s;
    }

    .button-box button.active {
      background: #2c3e50;
      color: #fff;
    }

    .form-wrapper {
      display: flex;
      width: 200%;
      transition: transform 0.5s ease-in-out;
    }

    .form-container {
      width: 50%;
      padding: 30px;
      box-sizing: border-box;
    }

    .form-container h4 {
      text-align: center;
      margin-bottom: 15px;
    }

    .form-container input {
      width: 100%;
      margin: 10px 0;
      padding: 12px;
      box-sizing: border-box;
    }

    .form-container button {
      width: 100%;
      padding: 12px;
      background: #2c3e50;
      color: #fff;
      border: none;
      cursor: pointer;
    }
.tooldiv p span.tool-border{border-bottom:1px solid #34436e;}

.toggle-btn {
  padding: 8px 20px;
  margin: 0 5px;
  border: none;
  background-color: #f0f0f0;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s ease;
}

.toggle-btn.active {
  background-color: #005a9c;
  color: white;
}

.form-control-enquiry {
  margin-top: 10px;
}
/*---------card image design start---------*/
figure.snip1200 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 310px;
  width: 100%;
  background: #e1e1e1;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-size: 15px;
}
figure.snip1200 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}
figure.snip1200 img {
  max-width: 100%;
  position: relative;
  opacity: 0.9;
  min-height: 275px;
}
figure.snip1200 figcaption {
  position: absolute;
  top: 45%;
  left: 7%;
  right: 7%;
  bottom: 45%;
  border: 1px solid #222222;
  border-width: 1px 1px 0;
}
figure.snip1200 .heading {
  overflow: hidden;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  position: absolute;
  bottom: 0;
  width: 100%;
}
figure.snip1200 h2 {
  display: table;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: auto;
  text-transform: uppercase;
  font-weight: 400;
}
figure.snip1200 h2 span {
  font-weight: 800;
}
figure.snip1200 h2:before,
figure.snip1200 h2:after {
  position: absolute;
  display: block;
  width: 1000%;
  height: 1px;
  content: '';
  background:#222222;
  top: 50%;
}
figure.snip1200 h2:before {
  left: -1000%;
}
figure.snip1200 h2:after {
  right: -1000%;
}
figure.snip1200 p {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  width: 100%;
  padding: 0 20px;
  margin: 0;
  opacity: 0;
  line-height: 1.6em;
  font-size: 0.9em;
}
figure.snip1200 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1200:hover img,
figure.snip1200.hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
figure.snip1200:hover figcaption,
figure.snip1200.hover figcaption {
  top: 7%;
  bottom: 7%;
}
figure.snip1200:hover p,
figure.snip1200.hover p {
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
.smart-digital-nfc-card-img img{width: 65%;}
.visit-txt-1{display:flex;justify-content: center;flex-direction: column;}
/*--------card sample--------*/
 .image-slider {
   display: flex;
   flex-flow: column;
   width:100%;
   aspect-ratio: 16 / 9;
   min-height: 300px;
   overflow: hidden;
   border-radius: 8px;
   container-type: inline-size;
   contain: content;
   background-color: #0006;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 2px 4px,
   rgba(0, 0, 0, 0.25) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 8px 16px,
   rgba(0, 0, 0, 0.15) 0px 16px 32px;
   }
   .slider__content {
   flex-grow: 1;
   display: flex;
   justify-content: space-between;
   }
   .slider-control--button {
   border: unset;
   background: 0;
   outline: 0;
   cursor: pointer;
   place-content: center;
   padding-inline: 3vw;
   z-index: 1;
   display: grid;
   }
   .icon {
   height: 2rem;
   width: 2rem;
   fill: var(--icon-default);
   border-radius: 50%;
   }
   .slider-control--button:where(:hover) {
   background-image: linear-gradient(
   to var(--position),
   #0000 0%,
   #0002,
   80%,
   #0006 100%
   );
   .icon {
   fill: var(--icon-accent);
   background: #0001;
   }
   }
   .slider-control--button:active {
   outline: 0.2em solid hsl(204 100 53);
   outline-offset: -0.5em;
   }
   .prev-button {
   --position: left;
   }
   .next-button {
   --position: right;
   }
   .image-display {
   position: fixed;
   inset: 0;
   }
   .slider-navigation {
   z-index: 10;
   display: grid;
   grid-auto-flow: column;
   grid-template-columns: repeat(6, 1fr);
   grid-auto-columns: 100%;
   gap: 1.25rem;
   padding: 1rem;
   place-content: center;
   background-color: var(--navigation-color);
   backdrop-filter: blur(6px);
   }
   .nav-button {
   display: grid;
   width: 100%;
   height: 100%;
   border-radius: 0.5em;
   overflow: hidden;
   align-items: center;
   justify-content: center;
   border: 0;
   aspect-ratio: 16 / 9;
   transition: filter 150ms linear, scale 266ms ease;
   }
   .thumbnail {
   display: block;
   max-width: 100%;
   width: 100%;
   object-fit: cover;
   height: 100%;
   }
   .nav-button[aria-selected="true"] {
   scale: 1.1;
   }
   .nav-button[aria-selected="true"],
   .nav-button:focus-visible {
   outline: 0.2em solid var(--active-color);
   outline-offset: 0.2em;
   }
   .nav-button[aria-selected="false"] {
   filter: opacity(0.7);
   }
   .nav-button[aria-selected="false"]:where(:hover, :focus-visible) {
   filter: opacity(1);
   }
   @container (max-width: 660px) {
   .nav-button:not(:has(img)) {
   background-color: rgb(241, 235, 232);
   }
   .slider-navigation {
   display: flex;
   justify-content: center;
   padding-block: 1.5em;
   }
   .nav-button {
   inline-size: 0.625rem;
   aspect-ratio: 1;
   border-radius: 50%;
   }
   .nav-button > .thumbnail {
   display: none;
   }
   .nav-button[aria-selected="true"] {
   background-color: black;
   scale:unset;
   }
   }
   .slider-control--button i::before{color:#ffffff;font-size: 25px;}
   .modal-body-try{position: relative;top: -20px;}