@charset "UTF-8";
/*-----------------------------------------------------------------------------------
Template Name: Creasoft - software and digital agency HTML 5 template
Author: Egens Theme
Author https://themeforest.net/user/egenstheme/portfolio
Support: https://www.egenslab.com/support/
Version: 1.0
-----------------------------------------------------------------------------------
CSS INDEX
===================
01.COMMON
02.Header css
03.Hero css
04.Services css
05.About css
06.Feature css
07.Project css
08.Partner css
09.Price plan css
10.Testimonial css
11.Our Team css
12.Blog css
13.Subscribe css
14.Footer css
15.Home two css
16.Contact page css
17.Error page css
18.FAQ page css
19.Service page css
20.Project page css
21.About page css
22.Blog page css
-----------------------------------------------------------------------------------*/
.pt-50 {
padding-top: 50px;
}
/*===========================
01.COMMON CSS
===========================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
}
body {
height: 100%;
overflow-x: clip;
font-size: 16px;
-webkit-tap-highlight-color: rgba(48, 120, 251, 0.15);
}
.skip-link {
position: absolute;
top: 8px;
left: 8px;
z-index: 1005;
padding: 12px 16px;
min-height: 44px;
border-radius: 8px;
background: #111827;
color: #ffffff;
font-weight: 700;
transform: translateY(-140%);
transition: transform 0.2s ease;
display: inline-flex;
align-items: center;
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.noscript-nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 12px 16px;
background: #111827;
color: #fff;
}
.noscript-nav a {
color: #fff;
text-decoration: underline;
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0 8px;
}
a:focus,
input:focus,
textarea:focus,
button:focus {
outline: 0 solid;
}
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
* {
scroll-margin-top: 100px;
}
@media (max-width: 767px) {
* {
scroll-margin-top: 140px;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
margin-bottom: 15px;
}
img {
max-width: 100%;
}
a,
ul,
ol {
padding: 0;
margin: 0;
list-style: none;
}
p {
margin: 0;
color: #272727;
line-height: 1.8;
}
@media (max-width: 767px) {
p {
font-size: 14px;
}
}
a,
button {
touch-action: manipulation;
}
a,
a:hover {
text-decoration: none;
}
input,
select,
iframe,
img,
svg,
video {
vertical-align: middle;
}
.sec-pad {
padding: 72px 0;
}
@media (max-width: 767px) {
.sec-pad {
padding: 36px 0;
}
}
@media (max-width: 576px) {
.sec-pad {
padding: 24px 0;
}
}
.sec-mar {
margin: 48px 0;
}
@media (max-width: 767px) {
.sec-mar {
margin: 30px 0;
}
}
@media (max-width: 576px) {
.sec-mar {
margin: 22px 0;
}
}
.sec-mar-top {
margin-top: 48px;
}
@media (max-width: 767px) {
.sec-mar-top {
margin-top: 30px;
}
}
@media (max-width: 576px) {
.sec-mar-top {
margin-top: 22px;
}
}
.sec-mar-bottom {
margin-bottom: 48px;
}
@media (max-width: 767px) {
.sec-mar-bottom {
margin-bottom: 30px;
}
}
@media (max-width: 576px) {
.sec-mar-bottom {
margin-bottom: 22px;
}
}
/*=======================================
preloader start
=======================================*/
.preloader {
position: fixed;
width: 100%;
height: 100%;
z-index: 99999;
background: #000;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@-webkit-keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
@keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
@-webkit-keyframes loaderBlock {
0%, 30% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
55% {
background-color: #fff;
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes loaderBlock {
0%, 30% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
55% {
background-color: #2563eb;
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-webkit-keyframes loaderBlockInverse {
0%, 20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
55% {
background-color: #fff;
}
100% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
@keyframes loaderBlockInverse {
0%, 20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
55% {
background-color: #2563eb;
}
100% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
.preloader .loader {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
-webkit-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
-webkit-animation: loader 1.2s infinite ease-in-out;
animation: loader 1.2s infinite ease-in-out;
}
.preloader .loader span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #fff;
-webkit-animation: loaderBlock 1.2s infinite ease-in-out both;
animation: loaderBlock 1.2s infinite ease-in-out both;
}
.preloader .loader span:nth-child(1) {
top: 0;
left: 0;
}
.preloader .loader span:nth-child(2) {
top: 0;
right: 0;
-webkit-animation: loaderBlockInverse 1.2s infinite ease-in-out both;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
.preloader .loader span:nth-child(3) {
bottom: 0;
left: 0;
-webkit-animation: loaderBlockInverse 1.2s infinite ease-in-out both;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
.preloader .loader span:nth-child(4) {
bottom: 0;
right: 0;
}
@media (prefers-reduced-motion: reduce) {
.preloader .loader,
.preloader .loader span {
animation: none;
-webkit-animation: none;
}
.preloader .loader {
opacity: 0.9;
}
}
/*=======================================
preloader end
=======================================*/
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: 0 !important;
padding-bottom: 0 !important;
box-sizing: border-box;
background-color: #0e0e0e;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
z-index: 99;
}
/* line animation css - start */
.creasoft-wrap {
position: relative;
overflow: clip;
z-index: 1;
}
.line_wrap {
top: 0px;
left: 50%;
bottom: 0px;
width: 80%;
z-index: -1;
display: block;
position: absolute;
transform: translateX(-50%);
border-left: 1px solid rgba(23, 22, 26, 0.06);
}
@media (max-width: 767px) {
.line_wrap {
display: none;
}
}
.line_wrap.layout2 {
border-left: 1px solid rgba(246, 246, 246, 0.02);
}
.line_wrap.layout2 .line_item {
border-right: 1px solid rgba(246, 246, 246, 0.02);
}
.line_wrap:before {
width: 1px;
left: -1px;
content: "";
height: 100px;
position: absolute;
animation: scroll1 15s ease-out infinite;
background-image: linear-gradient(0deg, #000000, transparent);
}
.line_item {
width: 20%;
float: left;
height: 100%;
position: relative;
display: inline-block;
border-right: 1px solid rgba(23, 22, 26, 0.06);
}
@media (max-width: 767px) {
.line_item {
border-right: 1px solid rgba(0, 0, 0, 0.03);
}
}
.line_item:before {
width: 1px;
right: -1px;
content: "";
height: 100px;
position: absolute;
}
.line_item:nth-child(odd):before {
animation: scroll2 15s ease-out infinite;
background-image: linear-gradient(0deg, transparent, #000000);
}
.line_item:nth-child(even):before {
animation: scroll1 15s ease-out infinite;
background-image: linear-gradient(0deg, #000000, transparent);
}
@keyframes scroll1 {
0% {
top: 0px;
opacity: 1;
}
50% {
top: 50%;
}
100% {
top: 100%;
opacity: 0.5;
}
}
@keyframes scroll2 {
0% {
opacity: 1;
bottom: 0px;
}
50% {
bottom: 50%;
}
100% {
bottom: 100%;
opacity: 0.5;
}
}
.scroll-to-top .top {
position: fixed;
cursor: pointer;
border: none;
padding: 0;
font: inherit;
bottom: 240px;
right: 20px;
color: #fff;
background: #2563eb;
z-index: 5001;
width: 44px;
height: 44px;
border-radius: 50%;
text-align: center;
line-height: 44px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
transition: 0.9s;
}
.scroll-to-top .top i {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
transition: 0.5s;
}
.scroll-to-top .top i:last-child {
opacity: 0;
visibility: hidden;
top: 60%;
}
.scroll-to-top .top::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #000;
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
.scroll-to-top .top:hover, .scroll-to-top .top:focus {
color: #fff;
}
.scroll-to-top .top:hover::before, .scroll-to-top .top:focus::before {
opacity: 1;
visibility: visible;
}
.scroll-to-top .top:hover i:first-child, .scroll-to-top .top:focus i:first-child {
opacity: 0;
top: 0;
visibility: hidden;
}
.scroll-to-top .top:hover i:last-child, .scroll-to-top .top:focus i:last-child {
opacity: 1;
visibility: visible;
top: 50%;
}
.breadcrumbs {
position: relative;
height: 480px;
background-image: url(/img/breadcrumb-bg.jpg);
background-image: image-set(url(/img/breadcrumb-bg.webp) type("image/webp"), url(/img/breadcrumb-bg.jpg) type("image/jpeg"));
background-size: cover;
background-position: center center;
z-index: 1;
}
@media (max-width: 767px) {
.breadcrumbs {
height: auto;
min-height: auto;
padding: 24px 0;
padding-top: max(100px, 80px + env(safe-area-inset-top));
padding-bottom: 16px;
}
}
.breadcrumbs:before {
position: absolute;
content: "";
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #0e0e0e;
opacity: 1;
z-index: -1;
}
.breadcrumb-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
height: 480px;
}
@media (max-width: 767px) {
.breadcrumb-wrapper {
height: auto;
min-height: 160px;
padding: 0;
}
}
.breadcrumb-cnt {
position: relative;
}
.breadcrumb-cnt h1 {
font-size: 60px;
font-weight: 700;
color: #2563eb;
width: min(900px, 100%);
text-transform: capitalize;
margin-bottom: 5px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.breadcrumb-cnt h1 {
font-size: 40px;
}
}
@media (max-width: 767px) {
.breadcrumb-cnt h1 {
font-size: 30px;
width: auto;
}
}
.breadcrumb-cnt span {
font-size: 14px;
color: #fff;
text-transform: capitalize;
word-break: break-word;
}
.breadcrumb-cnt span a {
display: inline-block;
color: #2563eb;
}
.breadcrumb-cnt span i {
margin: 0 5px;
}
@media (max-width: 767px) {
.breadcrumb-cnt span i {
margin: 0 3px;
}
}
.breadcrumb-cnt .breadcrumb-video {
position: absolute;
right: 0;
top: 0;
}
@media (max-width: 767px) {
.breadcrumb-cnt .breadcrumb-video {
display: none;
}
}
.breadcrumb-cnt .breadcrumb-video img {
max-width: 370px;
max-height: 340px;
border-radius: 5px;
}
.breadcrumb-cnt .breadcrumb-video:before {
position: absolute;
content: "";
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #0e0e0e;
opacity: 0.7;
border-radius: 5px;
}
.breadcrumb-cnt .breadcrumb-video .video-inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.breadcrumb-cnt .breadcrumb-video .video-inner .video-popup {
height: 80px;
width: 80px;
line-height: 80px;
border: 2px dashed #fff;
text-align: center;
display: inline-block;
color: #fff;
border-radius: 50%;
font-size: 20px;
animation-name: ripple;
animation-duration: 2.5s;
cursor: pointer;
animation-iteration-count: infinite;
background: transparent;
padding: 0;
margin: 0;
}
/* About-section video modal — minimal lightbox for the home-page "Get To Know" play button. */
.modal-video {
position: fixed;
inset: 0;
z-index: 10100;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.85);
padding: 24px;
animation: modalVideoFadeIn 0.2s ease-out;
}
.modal-video-body {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.modal-video-inner {
width: 100%;
}
.modal-video-movie-wrap {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-video-movie-wrap video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
}
.modal-video-close-btn {
position: absolute;
top: -44px;
right: 0;
width: 32px;
height: 32px;
background: transparent;
border: 0;
cursor: pointer;
z-index: 2;
}
.modal-video-close-btn::before, .modal-video-close-btn::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: #fff;
}
.modal-video-close-btn::before {
transform: translateY(-50%) rotate(45deg);
}
.modal-video-close-btn::after {
transform: translateY(-50%) rotate(-45deg);
}
.modal-video-close-btn:hover::before, .modal-video-close-btn:hover::after {
background: #2563eb;
}
@keyframes modalVideoFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*Section title*/
.title-wrap {
max-width: 630px;
margin: 0 auto;
}
.sec-title {
text-align: center;
margin-bottom: 50px;
}
.sec-title.layout2 {
text-align: left;
}
.sec-title.white h2,
.sec-title.white p {
color: #fff;
}
.sec-title.white span {
color: #93c5fd;
border-bottom-color: #93c5fd;
}
.sec-title span {
font-weight: 600;
font-size: 16px;
display: inline-block;
color: #2563eb;
text-transform: capitalize;
border-bottom: 1px solid #2563eb;
padding-bottom: 2px;
margin-bottom: 5px;
}
.sec-title h2 {
font-weight: 700;
font-size: 40px;
text-transform: capitalize;
color: #17161A;
margin-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sec-title h2 {
font-size: 35px;
}
}
@media (max-width: 767px) {
.sec-title h2 {
font-size: 30px;
}
}
/*Common button*/
.cmn-btn {
position: relative;
display: inline-block;
}
.cmn-btn a {
position: relative;
display: inline-block;
background-color: #000000;
border-radius: 5px;
min-width: 170px;
font-weight: 700;
font-size: 17px;
text-align: center;
color: #FFFFFF;
padding: 15px 30px;
border: 1px solid #000000;
overflow: hidden;
z-index: 1;
-webkit-transition: all 0.8s ease-out 0s;
-moz-transition: all 0.8s ease-out 0s;
-ms-transition: all 0.8s ease-out 0s;
-o-transition: all 0.8s ease-out 0s;
transition: all 0.8s ease-out 0s;
vertical-align: top;
}
@media (max-width: 767px) {
.cmn-btn a {
min-width: 140px;
font-size: 14px;
}
}
.cmn-btn a:after {
position: absolute;
content: "";
display: block;
left: 15%;
right: -20%;
top: -4%;
height: 150%;
width: 150%;
bottom: 0;
background-color: #2563eb;
transform: skewX(45deg) scale(0, 1);
z-index: -1;
-webkit-transition: all 0.8s ease-out 0s;
-moz-transition: all 0.8s ease-out 0s;
-ms-transition: all 0.8s ease-out 0s;
-o-transition: all 0.8s ease-out 0s;
transition: all 0.8s ease-out 0s;
}
.cmn-btn a:hover {
color: #000;
}
.cmn-btn a:hover:after {
transform: skewX(45deg) scale(1, 1);
}
.cmn-btn .line-1 {
position: absolute;
right: 8px;
top: 7px;
z-index: 2;
}
.cmn-btn .line-1:before {
position: absolute;
content: "";
border: 1px solid #FFFFFF;
width: 25px;
opacity: 0.1;
right: 0;
-webkit-transition: all 0.8s ease-out 0s;
-moz-transition: all 0.8s ease-out 0s;
-ms-transition: all 0.8s ease-out 0s;
-o-transition: all 0.8s ease-out 0s;
transition: all 0.8s ease-out 0s;
}
.cmn-btn .line-1:after {
position: absolute;
content: "";
border: 1px solid #FFFFFF;
height: 25px;
opacity: 0.1;
-webkit-transition: all 0.8s ease-out 0s;
-moz-transition: all 0.8s ease-out 0s;
-ms-transition: all 0.8s ease-out 0s;
-o-transition: all 0.8s ease-out 0s;
transition: all 0.8s ease-out 0s;
}
.cmn-btn .line-2 {
position: absolute;
left: 8px;
bottom: 8px;
z-index: 2;
}
.cmn-btn .line-2:before {
position: absolute;
content: "";
border: 1px solid #FFFFFF;
height: 25px;
opacity: 0.1;
right: 0px;
bottom: -2px;
}
.cmn-btn .line-2:after {
position: absolute;
content: "";
border: 1px solid #FFFFFF;
width: 25px;
opacity: 0.1;
left: 0;
}
.cmn-btn:hover .line-1:before {
border: 1px solid #000;
opacity: 0.5;
}
.cmn-btn:hover .line-1:after {
border: 1px solid #000;
opacity: 0.5;
}
.mobile-menu-logo {
display: none;
}
.mobile-menu-logo .remove {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.mobile-menu-logo .remove i {
height: 30px;
width: 30px;
line-height: 30px;
display: inline-block;
color: #fff;
background-color: #2563eb;
text-align: center;
border-radius: 50%;
transform: rotate(-45deg);
}
/*================================
Responsive mobile menu css
=================================*/
@media only screen and (max-width: 1023px) {
header .main-nav {
position: fixed;
top: 0;
left: 0;
width: 280px;
padding: 10px 0 !important;
z-index: 99999;
height: 100%;
overflow: auto;
display: block;
background: #fff;
-webkit-transform: translateX(-280px);
transform: translateX(-280px);
-webkit-transition: -webkit-transform 0.3s ease-in;
transition: -webkit-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
}
header .main-nav .mobile-menu-logo {
position: relative;
text-align: left;
padding: 20px 10px;
margin-bottom: 20px;
display: block;
border-bottom: 1px solid #2563eb;
}
header .main-nav ul {
float: none;
text-align: left;
padding: 0;
}
header .main-nav ul li {
position: relative;
display: block;
border-bottom: 1px solid #eee;
padding: 0px 10px !important;
}
header .main-nav ul li:last-child {
border: none;
}
header .main-nav ul li a,
header .main-nav ul li .nav-dropdown-trigger {
padding: 12px 0;
display: block;
font-weight: 600;
font-size: 16px;
color: #17161a;
text-transform: capitalize;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
header .main-nav ul li .nav-dropdown-trigger:hover {
color: #2563eb;
}
header .main-nav ul li ul.sub-menu {
position: static;
min-width: 200px;
background: 0 0;
border: none;
border-top: none;
border-radius: 0;
overflow: visible;
opacity: 1;
visibility: visible;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: none;
transform: none;
-webkit-transition: none;
transition: none;
display: none;
margin-top: 0 !important;
padding: 0;
transform: translateY(0px);
}
header .main-nav ul li ul.sub-menu li {
padding: 0 !important;
}
header .main-nav ul li ul.sub-menu li a {
padding: 12px 10px;
display: flex;
align-items: center;
color: #17161a;
font-size: 15px;
font-weight: 500;
}
header .main-nav ul li ul.sub-menu li a .bi {
font-size: 15px;
color: #666;
margin-right: 8px;
width: 16px;
}
header .main-nav ul li ul.sub-menu li a::before {
display: none;
}
header .main-nav ul li ul.sub-menu li a:hover {
padding-left: 10px;
}
header .main-nav ul li ul.sub-menu li a:hover .bi {
color: #2563eb;
}
header .main-nav.slidenav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
header .main-nav ul li > .bi {
display: block;
top: 8px;
right: 10px;
font-size: 16px;
color: #000;
}
.mobile-menu {
position: relative;
top: 2px;
padding: 0 5px;
border-radius: 50%;
display: inline-block;
text-align: right;
margin-left: 30px;
}
.cross-btn {
display: inline-block !important;
position: relative;
width: 30px !important;
height: 22px !important;
cursor: pointer;
border: 3px solid transparent !important;
}
.cross-btn span {
width: 100%;
height: 2px;
background: #2563eb !important;
display: block;
position: absolute;
right: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.cross-btn .cross-top {
top: 0;
}
.cross-btn .cross-middle {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
}
.cross-btn .cross-bottom {
bottom: 0;
width: 100%;
}
.cross-btn.h-active span.cross-top {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
margin-top: -1px;
}
.cross-btn.h-active span.cross-middle {
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
opacity: 0;
}
.cross-btn.h-active span.cross-bottom {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 50%;
margin-bottom: -1px;
}
}
@media only screen and (min-width: 1200px) {
.main-menu ul li:hover ul.sub-menu:not(.d-none) {
display: block !important;
transition: all linear 0.3s;
}
}
.cursor {
position: fixed;
top: 0%;
left: 0%;
width: 30px;
height: 30px;
z-index: 999999;
pointer-events: none;
border-radius: 50%;
transform-origin: left top;
transition: transform 0.35s;
transform: scale(0.35) translate(-50%, -50%);
mix-blend-mode: exclusion;
background-color: #fff;
}
/*===========================
MOBILE-FIRST OPTIMIZATIONS
Touch targets, layout, performance
===========================*/
@media (max-width: 767px) {
html {
scroll-padding-top: 70px;
}
}
@media (max-width: 576px) {
.container {
padding-left: 12px;
padding-right: 12px;
}
}
@media (max-width: 360px) {
.container {
padding-left: 10px;
padding-right: 10px;
}
}
.nav-dropdown-trigger,
.scroll-to-top .top {
min-height: 44px;
min-width: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 1023px) {
.cross-btn,
.mobile-menu button,
.mobile-menu .cross-btn {
min-height: 48px;
min-width: 48px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.12);
border-radius: 6px;
margin-left: 8px;
}
.mobile-menu .cross-btn span {
background: #fff !important;
}
.mobile-menu .cross-btn {
padding: 10px;
/* width/height set by min-width/min-height 44px above — do not shrink */
}
.nav-right {
gap: 8px;
flex-shrink: 0;
}
header .main-nav.mobile-closed > ul {
display: none !important;
}
header .main-nav.mobile-open > ul {
display: block !important;
overflow-y: auto;
max-height: calc(100dvh - 80px);
-webkit-overflow-scrolling: touch;
}
header .main-nav.mobile-open > ul > li {
display: block !important;
}
header .main-nav.mobile-open .mega-menu-details {
display: none !important;
}
header .main-nav.mobile-open .mega-menu-categories {
width: 100%;
}
header .main-nav.mobile-open .mega-menu-cat-item {
padding: 12px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-right .mobile-menu {
display: inline-block !important;
margin-left: 12px;
z-index: 100060;
}
.nav-right .mobile-menu .cross-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.nav-right .mobile-menu .cross-btn span {
background: #ffffff !important;
}
.nav-right .mobile-menu .cross-btn.h-active {
display: none !important;
}
.nav-right .get-qoute {
display: none !important;
}
}
@media (hover: none) and (pointer: coarse) and (max-width: 1023px) {
header .main-nav.mobile-closed > ul {
display: none !important;
}
header .main-nav.mobile-open > ul {
display: block !important;
}
.nav-right .mobile-menu {
display: inline-block !important;
}
.nav-right .get-qoute {
display: none !important;
}
}
@media (min-width: 1024px) {
.mobile-menu {
display: none;
}
}
@media (hover: none) and (pointer: coarse) {
a:hover,
button:hover,
.single-service:hover {
transform: none !important;
box-shadow: inherit !important;
}
}
.cmn-btn a {
min-height: 44px;
padding: 12px 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 576px) {
.cmn-btn a {
padding: 12px 20px;
min-width: 100%;
}
}
@media (max-width: 767px) {
.hero-content .buttons,
.buttons {
flex-direction: column;
gap: 12px;
margin-top: 24px;
}
}
@media (max-width: 767px) {
.hero-content .buttons .cmn-btn,
.buttons .cmn-btn {
margin-right: 0;
width: 100%;
}
}
@media (max-width: 767px) {
.hero-content .buttons .cmn-btn a,
.buttons .cmn-btn a {
width: 100%;
}
}
@media (max-width: 576px) {
.breadcrumb-cnt h1 {
font-size: 24px;
}
}
.hero-content h1 {
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
.hero-content h1 .hero-phrase {
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
overflow: visible;
}
@media (max-width: 576px) {
.hero-content h1 {
font-size: 24px;
line-height: 1.25;
}
}
@media (max-width: 360px) {
.hero-content h1 {
font-size: 20px;
line-height: 1.3;
}
}
@media (max-width: 767px) {
.typewriter-cursor {
display: none;
}
.cmn-btn a {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-wrapper {
padding-top: max(210px, 190px + env(safe-area-inset-top));
padding-bottom: 120px;
justify-content: flex-start;
}
.hero-content {
padding-left: 16px;
padding-right: 16px;
}
.hero-content p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.hero-content .buttons {
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.hero-wrapper .widgets-container {
position: relative !important;
bottom: auto !important;
margin-top: 24px;
padding-left: 16px;
padding-right: 16px;
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
gap: 10px;
}
}
@media (max-width: 360px) {
header .main-menu > .main-nav:not(.slidenav) {
visibility: hidden;
pointer-events: none;
}
header .main-menu > .main-nav.slidenav {
visibility: visible;
pointer-events: auto;
}
.hero-content {
padding-left: 4px;
padding-right: 4px;
}
.hero-content h1 {
font-size: 19px;
line-height: 1.3;
}
footer .address p,
footer .phone a,
footer .email a {
word-break: normal;
overflow-wrap: break-word;
white-space: normal;
}
}
a, button, .cmn-btn, .nav-dropdown-trigger {
-webkit-tap-highlight-color: rgba(48, 120, 251, 0.15);
}
@supports (padding: max(0px)) {
.scroll-to-top .top {
bottom: max(160px, 150px + env(safe-area-inset-bottom));
right: max(20px, env(safe-area-inset-right));
}
}
@media (max-width: 767px) {
.scroll-to-top .top {
bottom: 160px;
opacity: 0.45;
transition: opacity 0.3s ease;
}
.scroll-to-top .top:hover, .scroll-to-top .top:focus, .scroll-to-top .top:active {
opacity: 1;
}
}
@media only screen and (max-width: 1023px) {
.mobile-menu-logo .remove {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
}
}
@media (max-width: 767px) {
.project-slider .swiper-wrapper {
flex-wrap: wrap;
transform: none !important;
transition: none !important;
}
.project-slider .swiper-wrapper > .swiper-slide,
.project-slider .swiper-wrapper > * {
width: 100% !important;
flex: 0 0 100%;
margin-right: 0 !important;
margin-bottom: 16px;
}
.project-slider .single-item {
width: 100%;
}
.project-slider .swiper-button-next,
.project-slider .swiper-button-prev,
.project-slider + .swiper-button-next,
.project-slider + .swiper-button-prev {
display: none;
}
}
@media (max-width: 767px) {
.single-service .service-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.single-service h3 {
font-size: 20px;
}
.single-service {
max-height: none;
}
}
@media (max-width: 767px) {
.sec-title h2 {
font-size: 26px;
}
}
@media (max-width: 576px) {
.sec-title h2 {
font-size: 22px;
}
}
.footer-menu,
.footer-widget {
word-break: break-word;
}
@media (max-width: 767px) {
.footer-widget-accordion details {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-widget-accordion details:last-child {
border-bottom: none;
}
.footer-accordion-summary {
font-weight: 700;
font-size: 16px;
color: #e4e4e4;
padding: 12px 0;
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
user-select: none;
}
.footer-accordion-summary::-webkit-details-marker {
display: none;
}
.footer-accordion-summary::marker {
display: none;
}
.footer-accordion-summary::after {
content: "+";
font-size: 18px;
width: 24px;
text-align: center;
transition: transform 0.2s;
}
.footer-widget-accordion details[open] .footer-accordion-summary::after {
content: "−";
}
.footer-tagline {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (min-width: 768px) {
.footer-accordion-summary {
font-weight: 700;
font-size: 25px;
color: #e4e4e4;
padding: 0;
cursor: default;
margin-bottom: 20px;
}
.footer-accordion-summary::after {
display: none;
}
}
@supports (padding: max(0px)) {
body {
padding-left: env(safe-area-inset-left, 0);
padding-right: env(safe-area-inset-right, 0);
}
}
.creasoft-wrap {
overflow-x: clip;
}
body.nav-dropdown-open {
touch-action: none;
-webkit-overflow-scrolling: auto;
}
@supports (padding: max(0px)) {
.hero-wrapper .widgets-container {
padding-left: max(10px, env(safe-area-inset-left));
padding-right: max(10px, env(safe-area-inset-right));
bottom: max(20px, env(safe-area-inset-bottom));
}
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container {
flex-wrap: wrap;
justify-content: center;
gap: 16px;
padding-left: 16px;
padding-right: 16px;
}
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container .single-widget {
width: 56px;
min-height: 60px;
flex-shrink: 0;
}
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container .single-widget .widget {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container .single-widget .widget .stars2 {
position: static;
transform: none;
order: 2;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
color: #ffc107;
white-space: nowrap;
}
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container .single-widget .widget a {
order: 1;
}
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container .single-widget .widget img {
max-width: 44px;
max-height: 26px;
}
}
.services-swipe-hint {
text-align: center;
font-size: 14px;
color: #666;
margin-top: 12px;
margin-bottom: 0;
}
@media (max-width: 767px) {
.cta-button a {
top: 140px;
}
}
@media only screen and (max-width: 1023px) {
header .main-nav {
z-index: 100050;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}
header .main-nav.slidenav {
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
}
}
@supports (padding: max(0px)) {
footer .container {
padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
}
@media only screen and (max-width: 1023px) {
header .main-nav .mobile-menu-logo {
padding-right: 54px;
}
header .main-nav .mobile-menu-logo a img {
max-width: calc(100% - 10px);
}
@supports (padding-left: env(safe-area-inset-left)) {
header .main-nav.slidenav .mobile-menu-logo {
padding-left: max(20px, env(safe-area-inset-left));
}
}
}
/*===========================
MOBILE QA FIXES — March 2026
Touch targets, font sizes, spacing
===========================*/
@media (max-width: 767px) {
body {
font-size: 14px;
}
p,
.sec-title p,
.single-service .service-desc,
.item-inner-cnt p {
font-size: 14px !important;
}
.single-service .read-btn span,
.num-icon,
.section-number,
.agile-playboard__card-number,
.agile-playboard__detail-number,
.core-values__num,
.tech-stack-showcase__badge,
.story-cta-section__share-label {
font-size: 12px !important;
}
.cookie-consent-banner__text {
font-size: 14px !important;
}
}
@media (max-width: 767px) {
.achievements-section .item-inner-cnt .view-btn a {
min-height: 44px !important;
padding: 10px 16px !important;
display: inline-flex !important;
align-items: center !important;
}
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container .single-widget .widget a {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 767px) {
.single-blog .blog-thumb .tag a {
min-height: 44px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
}
}
@media (max-width: 767px) {
.swiper-button-next-testimonial,
.swiper-button-prev-testimonial {
min-width: 44px !important;
min-height: 44px !important;
}
}
@media (max-width: 767px) {
.achievements-section .item-inner-cnt > span {
font-size: 14px !important;
}
}
@media (max-width: 767px) {
.testimonial-area .testimonial-header .reviewer-info span {
font-size: 14px;
}
}
@media (max-width: 767px) {
footer .phone a,
footer .email a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
@media (max-width: 767px) {
.footer-cta-link {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 767px) {
.footer-bottom .copy-txt a,
.footer-bottom .footer-bottom-menu li a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
}
}
@media (max-width: 767px) {
.subscribe-highlight-item span {
font-size: 14px !important;
}
}
@media (max-width: 767px) {
.footer-bottom .copy-txt span {
font-size: 14px !important;
}
}
@media (max-width: 767px) {
.single-feature a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
@media (max-width: 767px) {
.single-service .read-btn a,
.single-service-2 .read-btn a {
min-height: 44px !important;
padding: 10px 24px !important;
display: inline-flex !important;
align-items: center !important;
}
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container a,
.hero-wrapper .widgets-container .widget a img {
min-height: 28px;
}
.hero-wrapper .widgets-container .single-widget {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 767px) {
.row > [class*=col-],
.single-service,
.single-feature,
.single-item,
.item-inner-cnt,
.service-details-content,
.blog-details-content,
.sidebar-banner--utility {
min-width: 0;
}
.sec-title h2,
.sec-title h3,
.single-service h4,
.single-feature h4,
.item-inner-cnt h3,
.item-inner-cnt h4,
.service-details-content h2,
.service-details-content h3 {
word-break: break-word;
overflow-wrap: anywhere;
}
.cmn-btn a,
.faq-toggle-btn,
.story-cta-section__btn,
.footer-menu li a,
.footer-bottom .footer-bottom-menu li a {
white-space: normal;
text-align: center;
}
footer .phone a,
footer .email a,
footer .address p {
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
}
img,
video,
svg,
iframe {
max-width: 100%;
}
}
@media (max-width: 767px) {
.sidebar-banner--utility {
min-height: 0;
}
.service-details {
margin-top: 0;
margin-bottom: 40px;
}
.service-details-content {
margin-bottom: 24px;
}
.sidebar-widget {
margin-bottom: 16px;
}
}
@media (max-width: 767px) {
.cta-button a,
.scroll-to-top .top {
z-index: 99;
}
.cta-button a {
right: 8px;
}
}
@media (orientation: landscape) and (max-height: 500px) {
.header-area {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.logo a img {
max-width: 180px !important;
padding: 4px 0 !important;
}
.sticky {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.hero-content {
padding-top: 60px;
}
}
@media (max-width: 380px) {
.header-area {
padding-left: 8px;
padding-right: 8px;
}
.logo a img {
max-width: 220px;
}
.hero-content .buttons .cmn-btn a {
padding-left: 16px;
padding-right: 16px;
font-size: 14px;
}
.hero-wrapper .widgets-container {
padding-left: 8px;
padding-right: 8px;
}
}
@media (max-width: 767px) {
.sec-mar-top {
margin-top: 40px;
}
.sec-mar {
margin: 40px 0;
}
.project-slider {
margin-top: 40px;
}
.project-area {
margin-top: 30px;
margin-bottom: 30px;
padding-top: 30px;
padding-bottom: 30px;
}
.features-area {
padding: 40px 0;
}
.section-band-light {
padding-top: 30px;
padding-bottom: 30px;
}
}
@media (max-width: 1199px) {
a,
button,
[role=button],
input[type=submit],
input[type=button] {
min-height: 44px;
min-width: 44px;
}
footer a,
nav a {
padding-top: 11px;
padding-bottom: 11px;
display: inline-block;
}
}
@media (max-width: 1199px) {
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
input[type=search],
select,
textarea {
font-size: 16px !important;
}
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
.cv2-card__text span,
.cv2-hero__eyebrow,
.tech-stack-section__badge,
.tech-stack-showcase__badge,
.wf-card__step,
.story-cta-section__share-label,
.qa-domain-showcase__num,
.agile-playboard__count,
.agile-playboard__detail-eyebrow,
.agile-playboard__proof-label {
font-size: 13px !important;
}
}
@media (max-width: 767px) {
.footer-tagline {
-webkit-line-clamp: 5;
}
}
@media (max-width: 767px) {
.footer-bottom .footer-bottom-menu {
padding-right: 68px;
}
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
.domain-cta-link,
.agile-playboard__card-number,
.wf-card__step {
font-size: 14px !important;
}
}
/*===========================
02.Header css
===========================*/
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10001;
}
.nav-dropdown-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 10000;
cursor: pointer;
-webkit-transition: all opacity 0.2s ease ease-out 0s;
-moz-transition: all opacity 0.2s ease ease-out 0s;
-ms-transition: all opacity 0.2s ease ease-out 0s;
-o-transition: all opacity 0.2s ease ease-out 0s;
transition: all opacity 0.2s ease ease-out 0s;
}
body.nav-dropdown-open {
overflow: hidden;
}
body.nav-dropdown-open header.header-area {
z-index: 10001;
}
.header-area {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 100px;
padding-top: max(30px, env(safe-area-inset-top));
padding-left: max(100px, env(safe-area-inset-left));
padding-right: max(100px, env(safe-area-inset-right));
background-color: #0e0e0e;
position: relative;
z-index: 100;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.header-area {
padding: 28px 30px;
padding-top: max(28px, env(safe-area-inset-top));
padding-left: max(30px, env(safe-area-inset-left));
padding-right: max(30px, env(safe-area-inset-right));
}
}
@media (max-width: 767px) {
.header-area {
padding: 22px 10px;
padding-top: max(22px, env(safe-area-inset-top));
padding-left: max(10px, env(safe-area-inset-left));
padding-right: max(10px, env(safe-area-inset-right));
}
}
.logo a {
display: inline-block;
}
.logo a img {
max-width: 220px;
height: auto;
object-fit: contain;
margin-left: 20px;
}
@media only screen and (max-width: 1023px) {
.logo a img {
max-width: 200px;
height: auto;
padding: 25px 0px;
margin-left: 10px;
}
}
.main-nav {
text-align: center;
}
.main-nav ul {
list-style: none;
}
.main-nav ul li {
display: inline-block;
position: relative;
padding: 0 25px;
color: #e4e4e4;
}
.main-nav ul li:first-child {
padding-left: 0;
}
.main-nav ul li a,
.main-nav ul li .nav-dropdown-trigger {
position: relative;
font-size: 15px;
padding: 30px 0;
font-weight: 500;
color: #e4e4e4;
display: inline-block;
text-transform: capitalize;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.main-nav ul li a.active,
.main-nav ul li .nav-dropdown-trigger.active {
color: #2563eb;
}
.main-nav ul li a:hover,
.main-nav ul li .nav-dropdown-trigger:hover {
color: #2563eb;
}
.main-nav ul li > i {
position: absolute;
top: 30px;
right: 0;
font-size: 14px;
text-align: center;
z-index: 999;
cursor: pointer;
}
.main-nav ul li ul.sub-menu {
position: absolute;
left: 0;
right: 0;
top: auto;
margin: 0;
opacity: 0;
visibility: hidden;
min-width: 230px;
background-color: #fff;
text-align: left;
z-index: 9;
border-radius: 12px;
overflow: hidden;
border-top: 3px solid #2563eb;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
padding: 0.5rem 0;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
.main-nav ul li ul.sub-menu > li {
padding: 0;
display: block;
border-bottom: none;
}
.main-nav ul li ul.sub-menu > li:last-child {
border: none;
}
.main-nav ul li ul.sub-menu > li a {
position: relative;
display: flex;
align-items: center;
padding: 9px 18px 9px 16px;
color: #444;
font-weight: 400;
text-transform: capitalize;
font-size: 14px;
line-height: 1;
border-radius: 4px;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.main-nav ul li ul.sub-menu > li a .bi {
font-size: 16px;
color: #888;
margin-right: 10px;
width: 20px;
text-align: center;
flex-shrink: 0;
transition: color 0.2s;
}
.main-nav ul li ul.sub-menu > li a::before {
display: none;
}
.main-nav ul li ul.sub-menu > li a.active {
font-weight: 500;
color: #2563eb;
}
.main-nav ul li ul.sub-menu > li a:hover {
color: #2563eb;
padding-left: 20px;
}
.main-nav ul li ul.sub-menu > li a:hover .bi {
color: #2563eb;
}
.main-nav ul li:hover ul.sub-menu {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.main-nav ul li:hover div.mega-menu {
visibility: visible;
opacity: 1;
}
.main-nav ul li:hover div.mega-menu.mega-menu-closed {
visibility: hidden;
opacity: 0;
}
.main-nav ul li.mega-menu-parent-closed:hover div.mega-menu {
visibility: hidden;
opacity: 0;
}
@media (max-width: 767px) {
.main-nav .main-nav ul li div.mega-menu {
visibility: hidden !important;
opacity: 0 !important;
}
}
.main-nav ul li.has-child:not(.mega-menu-parent-closed) > .nav-dropdown-trigger[aria-expanded=true] + div.mega-menu {
visibility: visible;
opacity: 1;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.mega-menu {
position: fixed;
left: 50%;
transform: translateX(-50%);
top: auto;
width: 640px;
opacity: 0;
visibility: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
transition: opacity 0.3s ease, visibility 0.3s ease;
border-radius: 12px;
z-index: 10002;
}
.mega-menu.mega-menu-closed {
visibility: hidden !important;
opacity: 0 !important;
}
@media (max-width: 767px) {
.mega-menu {
position: absolute;
width: 100%;
left: 0;
transform: none;
border-radius: 0;
}
}
.mega-menu .mega-menu-content {
display: flex;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(18px) saturate(1.6);
-webkit-backdrop-filter: blur(18px) saturate(1.6);
border-radius: 12px;
overflow: hidden;
border-top: 3px solid #2563eb;
border: 1px solid rgba(255, 255, 255, 0.55);
border-top: 3px solid #2563eb;
}
.mega-menu .mega-menu-categories {
min-width: 210px;
background: rgba(245, 247, 250, 0.75);
padding: 0.5rem 0;
border-right: 1px solid rgba(234, 237, 240, 0.7);
}
.mega-menu .mega-menu-categories .mega-menu-cat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px 12px 18px;
cursor: pointer;
transition: all 0.2s ease;
color: #555;
border: none;
background: transparent;
font: inherit;
width: 100%;
text-align: left;
margin: 0;
white-space: nowrap;
border-left: 3px solid transparent;
text-decoration: none;
}
.mega-menu .mega-menu-categories .mega-menu-cat-item > .bi {
font-size: 16px;
color: #888;
width: 20px;
flex-shrink: 0;
text-align: center;
transition: color 0.2s;
}
.mega-menu .mega-menu-categories .mega-menu-cat-item > span {
flex: 1;
font-size: 14px;
font-weight: 500;
text-align: left;
}
.mega-menu .mega-menu-categories .mega-menu-cat-item > .arrow {
font-size: 14px;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
color: #2563eb;
}
.mega-menu .mega-menu-categories .mega-menu-cat-item:hover, .mega-menu .mega-menu-categories .mega-menu-cat-item.active {
background: #fff;
color: #2563eb;
border-left: 3px solid #2563eb;
}
.mega-menu .mega-menu-categories .mega-menu-cat-item:hover > .bi, .mega-menu .mega-menu-categories .mega-menu-cat-item.active > .bi {
color: #2563eb;
}
.mega-menu .mega-menu-categories .mega-menu-cat-item:hover > .arrow, .mega-menu .mega-menu-categories .mega-menu-cat-item.active > .arrow {
opacity: 1;
transform: translateX(2px);
}
.mega-menu .mega-menu-details {
flex: 1;
padding: 1.25rem 1.75rem;
min-height: 280px;
min-width: 0;
}
.mega-menu .mega-menu-details .mega-menu-detail-panel {
animation: fadeIn 0.18s ease;
max-width: 340px;
}
.mega-menu .mega-menu-details ul {
display: block !important;
list-style: none;
padding: 0;
margin: 0;
}
.mega-menu .mega-menu-details ul li {
display: block !important;
width: 100%;
padding: 0 !important;
}
.mega-menu .mega-menu-details ul li a {
display: flex !important;
align-items: center;
width: 100%;
padding: 9px 8px 9px 0 !important;
color: #444;
font-size: 14px;
font-weight: 400;
text-align: left;
transition: color 0.2s, padding-left 0.2s, background 0.2s;
border-radius: 4px;
}
.mega-menu .mega-menu-details ul li a::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #d0d5dd;
margin-right: 10px;
flex-shrink: 0;
transition: background 0.2s, transform 0.2s;
}
.mega-menu .mega-menu-details ul li a:hover {
color: #2563eb;
padding-left: 4px !important;
}
.mega-menu .mega-menu-details ul li a:hover::before {
background: #2563eb;
transform: scale(1.3);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(4px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media only screen and (max-width: 1023px) {
.sub-menu.d-block .mega-menu-content {
display: flex;
flex-direction: column;
background: transparent;
overflow: visible;
}
.sub-menu.d-block .mega-menu-content .mega-menu-categories {
width: 100%;
min-width: auto;
background: transparent;
border-right: none;
padding: 0;
}
.sub-menu.d-block .mega-menu-content .mega-menu-categories .mega-menu-cat-item {
padding: 10px 15px;
color: #fff;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
.sub-menu.d-block .mega-menu-content .mega-menu-categories .mega-menu-cat-item > .bi {
color: #ccc;
}
.sub-menu.d-block .mega-menu-content .mega-menu-categories .mega-menu-cat-item > .arrow {
display: none;
}
.sub-menu.d-block .mega-menu-content .mega-menu-categories .mega-menu-cat-item:hover, .sub-menu.d-block .mega-menu-content .mega-menu-categories .mega-menu-cat-item.active {
background: rgba(255, 255, 255, 0.05);
color: #2563eb;
}
.sub-menu.d-block .mega-menu-content .mega-menu-categories .mega-menu-cat-item:hover > .bi, .sub-menu.d-block .mega-menu-content .mega-menu-categories .mega-menu-cat-item.active > .bi {
color: #2563eb;
}
.sub-menu.d-block .mega-menu-content .mega-menu-details {
padding: 0 15px 10px;
min-height: auto;
}
.sub-menu.d-block .mega-menu-content .mega-menu-details ul li a {
color: #ccc;
font-size: 13px;
padding: 6px 0;
text-align: left;
word-wrap: break-word;
overflow-wrap: break-word;
}
.sub-menu.d-block .mega-menu-content .mega-menu-details ul li a:hover {
color: #2563eb;
}
}
@media only screen and (max-width: 1023px) {
.main-nav .sub-menu.d-block {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
max-height: 70vh;
border-radius: 16px 16px 0 0;
overflow-y: auto;
z-index: 10002;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
background: #0e0e0e;
padding: 0 16px 24px;
box-sizing: border-box;
}
}
.nav-right {
display: flex;
align-items: center;
gap: 12px;
}
.get-qoute {
text-align: right;
}
@media (max-width: 767px) {
.get-qoute {
display: none;
}
}
.get-qoute .cmn-btn a {
background-color: #0e0e0e;
border-color: #0e0e0e;
box-shadow: -1px 0 6px rgba(37, 99, 235, 0.8), 1px 0 6px rgba(37, 99, 235, 0.8), 0 -1px 6px rgba(0, 229, 255, 0.5), 0 1px 6px rgba(0, 229, 255, 0.5);
}
/*===========================
03.Hero css
===========================*/
.hero-area {
position: relative;
height: 100vh;
height: 100dvh;
background-image: url(/img/bg.webp);
background-image: image-set(url(/img/bg.webp) type("image/webp"), url(/img/bg.png) type("image/png"));
background-size: cover;
background-position: top left;
background-color: #0e0e0e;
overflow: hidden;
}
@media (max-width: 767px) {
.hero-area {
height: unset;
background-image: url(/img/bg-mobile.webp);
background-image: image-set(url(/img/bg-mobile.webp) type("image/webp"), url(/img/bg.png) type("image/png"));
}
}
.hero-area .ken-burns-slideshow {
position: absolute;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
width: 50%;
border-radius: 100px 0px 0px 0px;
box-shadow: -1px 0 6px rgba(37, 99, 235, 0.8), -1px 0 12px rgba(0, 229, 255, 0.5);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.hero-area .ken-burns-slideshow {
display: none;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero-area .ken-burns-slideshow {
width: 45%;
}
}
.hero-area .ken-burns-slideshow img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
animation: kenburns 20s infinite;
}
@keyframes kenburns {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
95% {
transform: scale3d(1.5, 1.5, 1.5) translate3d(-100px, -80px, 0px);
animation-timing-function: ease-in;
opacity: 1;
}
100% {
transform: scale3d(1.5, 1.5, 1.5) translate3d(-90px, -70px, 0px);
opacity: 0;
}
}
.hero-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
height: 100dvh;
padding-top: 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero-wrapper {
padding-top: 100px;
}
}
@media (max-width: 767px) {
.hero-wrapper {
min-height: 100vh;
min-height: 100dvh;
height: auto;
}
}
.hero-wrapper .widgets-container {
position: absolute;
bottom: 20px;
left: 0;
width: 55%;
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-left: 100px;
padding-right: 20px;
z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero-wrapper .widgets-container {
padding-left: 60px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-wrapper .widgets-container {
padding-left: 40px;
width: 60%;
}
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container {
bottom: 20px;
width: 100%;
padding-left: 10px;
padding-right: 10px;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
}
}
.hero-wrapper .widgets-container .single-widget {
min-height: 80px;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container .single-widget {
width: 60px;
min-height: 50px;
padding: 5px;
}
}
.hero-wrapper .widgets-container .single-widget .widget {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
overflow: visible;
}
.hero-wrapper .widgets-container .single-widget .widget .widget-badge-link {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-wrapper .widgets-container .single-widget .widget .stars2 {
display: flex;
justify-content: center;
flex-wrap: nowrap;
gap: 1px;
}
.hero-wrapper .widgets-container .single-widget .widget .stars2 span {
display: inline-block;
color: #ffc107;
font-size: 12px;
flex-shrink: 0;
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container .single-widget .widget .stars2 span {
font-size: 9px;
}
}
.hero-wrapper .widgets-container .single-widget img {
height: auto;
width: auto;
max-width: 100%;
}
@media (max-width: 767px) {
.hero-wrapper .widgets-container .single-widget img {
max-width: 50px;
max-height: 30px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1699px) {
.hero-content {
padding-left: 60px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero-content {
padding-left: 30px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-content {
margin-bottom: 50px;
}
}
.hero-content.layout2 h1 {
text-transform: capitalize;
}
.hero-content.layout2 h1 span {
text-transform: uppercase;
}
.hero-content h1 {
font-weight: 800;
font-size: 44px;
text-transform: uppercase;
color: #e4e4e4;
margin-bottom: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1699px) {
.hero-content h1 {
font-size: 40px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.hero-content h1 {
font-size: 36px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-content h1 {
font-size: 32px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-content h1 {
font-size: 28px;
line-height: 38px;
}
}
@media (max-width: 767px) {
.hero-content h1 {
font-size: clamp(19px, 3.5vw + 8px, 28px);
line-height: 1.35;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero-content h1 {
font-size: 34px;
}
}
.hero-content h1 .hero-phrase {
display: block;
background: linear-gradient(135deg, #2563eb 0%, #00e5ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
min-height: 1.5em;
overflow: visible;
filter: brightness(1.15);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero-content h1 .hero-phrase.fade-in {
opacity: 1;
transform: translateY(0);
}
.hero-content h1 .hero-phrase.fade-out {
opacity: 0;
transform: translateY(8px);
}
.hero-content p {
font-weight: 400;
font-size: 16px;
color: #e4e4e4;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-content p {
font-size: 15px;
}
}
@media (max-width: 767px) {
.hero-content p {
font-size: 14px;
}
}
/* Blinking cursor for typewriter */
@keyframes blink {
50% {
opacity: 0;
}
}
.typewriter-cursor {
animation: blink 1s step-end infinite;
-webkit-text-fill-color: #00e5ff;
background: none;
-webkit-background-clip: unset;
background-clip: unset;
}
/* The caret glyph is generated here rather than as a literal "|" text node, so
it never enters the H1's textContent (keeps extractors from reading "Fintech|"). */
.typewriter-cursor::after {
content: "|";
}
.buttons {
margin-top: 40px;
}
.buttons .cmn-btn {
margin-right: 20px;
}
@media (max-width: 767px) {
.buttons .cmn-btn {
margin-right: 10px;
}
}
.buttons .cmn-btn:last-child {
margin: 0;
}
.cmn-btn.layout-two a {
background-color: transparent;
border: 1px solid #0f172a;
color: #0f172a;
}
@keyframes rotateme {
0% {
transform: rotate(0deg);
opacity: 1;
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
opacity: 1;
}
}
/*===========================
04.Services css
===========================*/
.services-area {
position: relative;
}
@media (max-width: 767px) {
.services-area {
margin: 80px 0 32px;
}
}
.services-area .swiper-button-next,
.services-area .swiper-button-prev {
top: 70%;
}
@media (max-width: 767px) {
.services-area .swiper-button-next,
.services-area .swiper-button-prev {
display: none;
}
}
.services-area .swiper-button-next:after,
.services-area .swiper-button-prev:after {
font-size: 20px;
height: 40px;
min-width: 40px;
color: #2a2a2a;
border: 1px solid #2a2a2a;
text-align: center;
line-height: 40px;
border-radius: 50%;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.services-area .swiper-button-next:hover:after,
.services-area .swiper-button-prev:hover:after {
color: #e4e4e4;
background-color: #2a2a2a;
}
.services-area .swiper-button-next {
right: 7%;
}
@media only screen and (min-width: 1400px) and (max-width: 1699px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.services-area .swiper-button-next {
right: 1%;
}
}
.services-area .swiper-button-prev {
left: 7%;
}
@media only screen and (min-width: 1400px) and (max-width: 1699px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.services-area .swiper-button-prev {
left: 1%;
}
}
.swiper.services-slider {
padding: 5px;
}
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
.swiper.services-slider {
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: none;
perspective: none;
}
.swiper.services-slider .swiper-wrapper {
-webkit-transform-style: flat;
transform-style: flat;
}
.swiper.services-slider .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: flat;
transform-style: flat;
}
.swiper.services-slider .single-service {
-webkit-transform: none !important;
transform: none !important;
}
}
.single-service {
position: relative;
background-color: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 30px;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.single-service span {
position: absolute;
right: 30px;
top: 30px;
font-weight: 700;
font-size: 50px;
-webkit-text-stroke: 2px #2563eb;
-webkit-text-fill-color: transparent;
opacity: 0.2;
line-height: 1;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.single-service .icon {
margin-bottom: 20px;
width: 64px;
height: 64px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(135deg, #101119 0%, #1e2740 35%, #2563eb 100%);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}
.single-service .icon i {
font-size: 28px;
color: #ffffff;
}
.single-service .icon.icon--software-dev {
background-image: linear-gradient(135deg, #101119 0%, #1d3557 40%, #2563eb 100%);
}
.single-service .icon.icon--qa {
background-image: linear-gradient(135deg, #101119 0%, #2b9348 35%, #52b788 100%);
}
.single-service .icon.icon--cloud {
background-image: linear-gradient(135deg, #101119 0%, #1b4b7a 35%, #48bfe3 100%);
}
.single-service .icon.icon--data {
background-image: linear-gradient(135deg, #101119 0%, #4b0082 35%, #9d4edd 100%);
}
.single-service .icon.icon--product {
background-image: linear-gradient(135deg, #101119 0%, #ff7b00 35%, #ffb703 100%);
}
.single-service .icon.icon--ai {
background-image: linear-gradient(135deg, #101119 0%, #3a0ca3 35%, #4cc9f0 100%);
}
.single-service .icon.icon--eudr {
background-image: linear-gradient(135deg, #101119 0%, #1b3d1b 35%, #4caf50 100%);
}
.single-service h3,
.single-service h4 {
font-style: normal;
font-weight: 500;
font-size: 25px;
color: #17161a;
margin-bottom: 10px;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.single-service p {
font-weight: 400;
font-size: 16px;
color: #272727;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.single-service .read-btn {
text-align: right;
}
.single-service .read-btn a {
position: relative;
font-weight: 500;
font-size: 15px;
color: #17161a;
text-align: right;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-height: 44px;
padding: 8px 4px;
margin-top: 12px;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.single-service .read-btn a:after {
content: "";
display: inline-block;
flex: 0 0 28px;
height: 28px;
width: 28px;
border: 1px solid rgb(55, 179, 74);
border-radius: 50%;
background: transparent url("data:image/svg+xml;utf8,/ to for correct heading order (no level skips). The template
styles bare h2/h3 at 35px; this keeps these small sub-headings visually
unchanged. Specificity (0,2,1) beats the template's `.service-details-content h3`. */
.service-details-content h3.sds-subhead {
font-size: 1.05rem;
font-weight: 600;
color: #0f172a;
margin-top: 0;
margin-bottom: 8px;
line-height: 1.4;
}
/* Case-study detail content (e.g. /case-study/gdi-hadp) shares .blog-details-content
with blog posts, but its headings sat one level deeper (h3–h6). We shifted the
tags up one level (h3→h2 … h6→h5) for correct heading order; these scoped rules
restore the original per-level sizing for the shifted tags. Section headings
(was h4 → now h3) need no rule — .blog-details-content h3 already matches the old
h4 (both 27px). Double class beats the base .blog-details-content rules. */
.blog-details-content.blog-details-content--case-study h2 {
font-weight: 600;
font-size: 27px;
text-transform: capitalize;
color: #17161a;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.blog-details-content.blog-details-content--case-study h2 {
font-size: 22px;
}
}
.blog-details-content.blog-details-content--case-study h4 {
font-weight: 600;
font-size: 20px;
text-transform: uppercase;
color: #111111;
margin-bottom: 5px;
}
.blog-details-content.blog-details-content--case-study h4.cs-col-label {
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
margin-bottom: 10px;
}
/* QA service detail pages (/quality-assurance/*): card sub-headings ("Types of …",
tool lists) were h5, promoted to h4 so the heading order under the now-h3 section
title is correct (h3 → h4, no skip). The base .blog-details-content h4 renders at
27px/600 — pin these promoted sub-headings back to the original Bootstrap-h5
rendering (20px/500) so the visual hierarchy is unchanged. */
.blog-details-content .bullet-points-3 h4,
.blog-details-content h4.qa-subhead {
font-size: 1.25rem; /* 20px — matches the prior h5 */
font-weight: 500;
text-transform: none;
margin-bottom: 10px;
}
/* Blog posts (/blogs/agentic-ai-…, /blogs/practical-guide-…): the post title is the
breadcrumb h1, so section headings were h3 and sub-points h4. Promoted h3→h2 / h4→h3
for correct order under the h1. Pin the new h2 to the prior h3 rendering (27px) so the
section headings look identical. The new h3 (was h4) already matches at 27px. */
.blog-details-content.blog-details-content--post h2 {
font-weight: 600;
font-size: 27px;
text-transform: capitalize;
color: #17161a;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.blog-details-content.blog-details-content--post h2 {
font-size: 22px;
}
}
/* /product-engineering/software-architecture-design case-study card: the
Challenge/Solution/Outcome micro-labels were h6, promoted to h4 (section title is now
h3). Pin them back to the prior Bootstrap-h6 rendering (16px) so they stay small. */
.blog-details-content .arch-case-col h4 {
font-size: 1rem; /* 16px — matches the prior h6 */
font-weight: 600;
text-transform: none;
margin-bottom: 0.5rem;
}
/* Success-story & case-study detail templates (.blog-details-content.cs-detail):
the content title is the breadcrumb h1, so section headings were h4 and sub-points
h5/h6. Promoted sections h4→h3 (free — base h3/h4 are both 27px) and ALL sub-points
h5/h6→h4 for correct order (h1→h2→h3→h4). Pin the now-h4 sub-points back to the
prior sub-heading size so the visual hierarchy (27px section / 20px sub-point) holds. */
.blog-details-content.cs-detail h4 {
font-size: 1.25rem; /* 20px — matches the prior h5; h6 categories bump 16→20px */
margin-bottom: 0.85rem;
}
.cta-text-link {
display: inline-block;
padding: 11px 0;
min-height: 44px;
}