/*
Theme Name: Code Hive
Theme URI: https://codehiveml.com/
Author: Codehive
Author URI: https://codehiveml.com/
Description: Code Hive is founded on the principles of dynamism, client focus, and technological power. Our journey has been deeply intertwined with the process
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: <https://www.gnu.org/licenses/gpl-2.0.html>
Tags: custom-Theme
*/

* {
    margin:0;
    padding:0;
}

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0;
}
@font-face {
    font-family: 'gilroyblack';
    src: url('fonts/gilroy-black-webfont.woff2') format('woff2'),
         url('fonts/gilroy-black-webfont.woff') format('woff'),
         url('fonts/gilroy-black-webfont.svg#gilroyblack') format('svg');
    font-weight: normal;
    font-style:normal;
}
p {
    font-size: 16px;
    line-height: 26px;
    color: #000;
}

body {
    background-color: #fff;
    font-family: 'Lato', sans-serif;
}

.navbar-light .navbar-toggler-icon {
    background-image:url("images/menu.svg") !important;
    background-size:35px;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #191919;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-image: none;
    background-size: auto;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
}

.navbar-toggler>.close {
    display: inline;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.navbar-toggler.collapsed>.close,
.navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
    display: none;
}

.menuLogo {
    display: none;
}

header {
    padding: 20px 0;
    z-index: 99;
    width: 100%;
    background: #191919;
}

.innerHeader {
    background: #000;
}

header .row {
    align-items: center;
}

/* header .clsLogo img {
    width: 210px;
} */

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 25px;
}

.ClsMenuSection {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.clsMenu {
    clear: both;
}

.clsMenu li.nav-item a:before {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -7px;
    width: 2rem;
    height: 0.2rem;
    background: #4169e1;
    content: "";
    opacity: 0;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}

.clsMenu li.nav-item:hover>a:before, .clsMenu li.nav-item.current-menu-item > a:before  {
    opacity: 1;
}
.WePrioritize-content p {
    margin-bottom: 0;
}
div#collapseExample {
    position: absolute;
    right: 13px;
}

header .card-body {
    background: transparent;
    padding: 10px 10px 0 10px;
}

header span.input-group-text {
    cursor: pointer;
    background: #191919;
}

.clsMenu .nav-link {
    padding-bottom: 0;
    font-size: 16px;
    color: #fff !important;
    padding: 3px 14px !important;
}
.clsMenu a {
    padding-bottom: 0;
    font-size: 16px;
    color: #fff !important;
    padding: 3px 12px !important;
	white-space:nowrap;
}
.clsMenu a:hover{
    text-decoration: none;
	
}
.clsSearchs span {
    color: #fff;
    padding-top: 4px;
}

.clsMenu .nav-link:hover {
    color: #fff !important;
}

.clsMenu .nav-link.clsMenuActive {
    color: #fff !important;
}

.clsMenu li.menu-item {
    position: relative;
        cursor: pointer;
    padding: 0px 8px !important;
}

.clsMenu li.nav-item.clsNoLine::after {
    display: none;
}

.clsMenu .navbar-light .navbar-brand {
    color: rgba(0, 0, 0, .9);
    display: flex;
}

.animated-icon1 {
    width: 26px;
    height: 16px;
    position: relative;
    margin: 6px 0 0 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 9999;
}

.clsmenlo .clsSearchs span {
    font-size: 32px;
}

.animated-icon1 span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.animated-icon1 span {
    background: #fff;
}



.animated-icon1 span:nth-child(1) {
    top: 0px;
}

.animated-icon1 span:nth-child(2) {
    top: 8px;
}

.animated-icon1 span:nth-child(3) {
    top: 16px;
}

.animated-icon1.open span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
    opacity: 0;
    /* left: -60px; */
}

.animated-icon1.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/* .clsMenu .nav-link:hover {
    color: #fff !important;
} */

.clsMenu .navbar {
    padding-right: 0;
}

.clsMenu li.nav-item:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

/* rotate caret on hover */
.dropdown-menu>li>a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
}

/* .clsMenu .navbar-light .navbar-toggler-icon {
    filter: invert(1);
} */

.clsMenu .navbar-light .navbar-toggler {
    color: #fff;
    border-color: #fff;
}

/* .background-overlay {
    background-color: transparent;
    background-image: linear-gradient(135deg, #01234DCC 0%, #01234D80 100%);
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
} */
.clsBanner .carousel-indicators {
    z-index: 999;
}

.clsBanner .carousel-inner .carousel-caption {
    position: absolute;
    right: 0%;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: right;
    top: 5%;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

.clsBanner .carousel-item img {
    height: 460px;
    object-fit: cover;
}

.clsBanner .carousel-caption h1 {
    font-size: 50px;
    line-height: 70px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-family: 'gilroyblack';
    padding-top: 40px;
}

.clsBanner .carousel-caption h1 span {
    color: #4169e2;
}

.clsBannerBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
}

.clsBannerBtn a {
    height: 40px;
    border-radius: 10px;
    background-color: #4169e1;
    display: block;
    padding: 7px 32px 0 32px;
    color: #fff;
    margin: 0 10px;
    transition: 0.3s;
    border: #4169e1 solid 1px;

}

.clsBannerBtn a:hover {
    text-decoration: none;
}

.clsPortfolio {
    background: #fff !important;
    border: #000 solid 1px !important;
    color: #000 !important;
    transition: 0.3s;
}

.clsLetstalk:hover {
    background: #fff !important;
    border: #000 solid 1px !important;
    color: #000 !important;
}

.clsPortfolio:hover {
    background: #4169e1 !important;
    border: #4169e1 solid 1px !important;
    color: #fff !important;
}

.headersearch-form.opensearch {
    max-height: 5rem;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.headersearch-form {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    background: #fff;
    height: 5rem;
    max-height: 0;
    padding: 0 5em 0 3rem;
    z-index: 9;
    border-radius: 0;
    -webkit-transition: max-height 250ms ease-out, transform 250ms ease-out, -webkit-transform 250ms ease-out;
    transition: max-height 250ms ease-out, transform 250ms ease-out, -webkit-transform 250ms ease-out;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 10%);
}

.headersearch-form .search-form {
    margin: 1rem 0 0;
    width: 100%;
    max-width: 100%;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: var(--responsive--aligndefault-width);
}

.search-form>label {
    width: 100%;
    margin-bottom: 0;
    font-weight: var(--form--label-weight);
    display: none;
}

.headersearch-form .search-form .search-field {
    margin: 0;
    border: 0;
    outline: 0;
    background: #fff;
    border-bottom: 0;
    padding-right: 30px;
    color: #222;
    font-size: 1.4rem;
    padding-bottom: 5px;
    line-height: 1.5;
    height: 3rem;
}

.search-form .search-field {
    flex-grow: 1;
    max-width: inherit;
    margin-top: calc(var(--global--spacing-vertical) / 3);
    margin-right: calc(0.66 * var(--global--spacing-horizontal));
}

.headersearch-form .search-submit {
    display: none;
}

.search-form .search-submit {
    margin-top: calc(var(--global--spacing-vertical) / 3);
    margin-left: 10px;
}

.headersearch-form button.search-untoggle {
    position: absolute;
    top: 1.6rem;
    right: 2rem;
    font-size: 1.5rem;
    border: 0;
    background: none;
    padding: 0;
    outline: 0;
    color: #000;
    cursor: pointer;
}

span.searchicon.sclose {
    cursor: pointer;
}

.header-search.newsearch {
    padding-left: 12px;
}

.clsWhoWeAre {
    padding: 3.2rem 0;
}

.clsWhoeWeContent {
    background: #191919;
    padding: 22px;
}

.clsWhoeWeContent p {
    color: #fff;
}

.clswhoimagesec {
    display: flex;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    transition: transform .3s;
}

.clswhoimagesec img {
    width: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.clswhoimagesec h2 {
    align-self: center;
    position: absolute;
    z-index: 10;
    font-family: 'gilroyblack';
    font-size: 66px;
    font-weight: bold;
    color: #000;
    padding-left: 30px;
    text-transform: uppercase;
    margin-top: 50px;
}

.clswhoimagesec h2:before {
    content: '';
    background: #4169e2;
    height: 8px;
    width: 160px;
    position: absolute;
    top: -25px;
}

.clsWhoWeAre h3 {
    font-size: 36px;
    color: #000000;
    font-weight: 300;
    line-height: 40px;
}

.clsWhoWeRightContent {
    padding: 0 40px;
}

.clsWhoWeRightContent h4 {
    font-size: 30px;
    line-height: 24px;
    color: #000000;
    font-weight: 700;
    border-bottom: #4169e1 solid 2px;
    margin: 16px 0;
    padding-bottom: 14px;
}

.clsmissionvission p {
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    font-weight: 300;
    text-align: left;
}

.clsWhoeWeContent p {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    text-align: left;
}

.clsmissionvission {
    margin-top: 72px;
}

.clsOurCoreValues {
    background-color: #fafafc;
    background-image: url(images/arrow-icon-bg.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding: 3rem 0 5rem 0;
    background-size: contain;
}

.clsOurvaluetitlesec {
    width: 100%;
    max-width: 570px;
    margin: 0 auto;
    text-align: center;
}

.clsOurCoreValues h2 {
    font-size: 50px;
    color: #4169e1;
    font-weight: bold;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    font-weight: bold;
}

.clsOurvaluetitlesec p {
    font-size: 18px;
    line-height: 26px;
    color: #000000;
    font-weight: 300;
    text-align: center;
}

.clsValueMiddleSec {
    margin-top: 40px;
}

.clsSuccess {
    float: right;
    max-width: 330px;
    margin-right: 0;
    text-align: right;
    margin: 30px 0;
}

.clsSuccess h3 {
    font-size: 22px;
    line-height: 24px;
    color: #000000;
    font-weight: 700;
}

.clsSuccess p {
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    font-weight: 300;
}

.clsSuccess.clsInnovation {
    text-align: left;
    float: left;
}

.clswhatmakes {
    padding: 4.5rem 0 3.5rem 0;
    background: url(images/what-makes-bg.png) no-repeat center right;
    position: relative;
}

.clswhatmakes::before {
    content: '';
    background: #f3f3f3;
    position: absolute;
    width: 100%;
    height: 200px;
    bottom: 0;
    z-index: 0;
}

.clsWhatmakeimgsec {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clsWhatmakeimgsec img {
    width: 100%;
    height: 100%;
    border-radius: 100px 100px 0 100px;
}

.clsMakeoverlay:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(65, 105, 225, 0.8);
    border-radius: 100px 100px 0 100px;
}

.clsYellowNumber {
    position: absolute;
    bottom: 0;
    right: 0px;
    background: #ffb741;
    border-radius: 50px 50px 0 50px;
    padding: 24px;
}

.clsinnernumber h3 {
    font-size: 50px;
    color: #000000;
    font-family: 'gilroyblack';
    margin: 0;
    padding: 0;
}

.clsinnernumber p {
    font-size: 18px;
    color: #000000;
    font-weight: 700;
    padding: 0;
    margin: 0;
    position: relative;
    top: -12px;
}

.clsinnernumber {
    margin-bottom: 16px;
}

.clswhatmakes h2 {
    font-size: 50px;
    color: #000000;
    font-weight: bold;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    margin-bottom: 22px;
    margin-top: 50px;
}

.clswhatmakes h2 span {
    color: #4169e1;
}

.clsWhatmakescontentright {
    padding: 0 50px;
}

.clsHighStandards h3 {
    font-size: 22px;
    line-height: 30px;
    color: #000000;
    font-weight: 700;
}

.clsHighStandards p {
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    font-weight: 300;
}

.clsHighStandards {
    margin-bottom: 32px;
}

.clsStandOut h2 span {
    color: #ffb841 !important;
}

.clsStandOut {
    margin-top: 2.5rem;
    z-index: 9999;
}

.clsWhatMakesBox {
    border-radius: 20px;
    background-color: #ffffff;
    /* box-shadow: 0px 0px 24px -2px #a7a7a7; */
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
	height: calc(100% - 30px);
/*     height: 370px; */
    margin-top: 2rem;
    position: relative;
/*     margin-left: 15px;
    margin-right: 15px; */
    z-index: 99;
}

.clsWhatMakesBox img {
    border-radius: 30px;
    width: 100%;
    position: relative;
/*     top: -110px;
    left: -26px; */
    height: 220px;
    object-fit: cover;
}

.clsBoxcont {
	margin-top:20px;
/*     position: absolute;
    top: 180px;
    padding-right: 26px; */
}

.clsBoxcont h5 {
    font-size: 51px;
    line-height: 24px;
    color: #333333;
    font-family: 'gilroyblack';
    padding: 5px 0 12px 0;
}

.clsBoxcont h6 {
    font-size: 22px;
    line-height: 24px;
    color: #333333;
    font-weight: 700;
}

.clsBoxcont p {
    font-size: 16px;
    line-height: 26px;
    color: #333333;
    font-weight: 300;
    padding: 6px 0 12px 0;
	margin-bottom:0;
}

.clsTestmonial .carousel-caption {
    position: static;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

.clsTestmonial .carousel-caption h3 {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    font-weight: 600;
    padding: 18px 0 12px 0;
}

.clsTestmonial .carousel-caption small {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    font-weight: 400;
}

.carousel-control-prev,
.carousel-control-next {
    color: #000;
    width: 5%;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    color: #000;
}

.clsTestmonial {
    background: #f3f3f3;
    padding: 1.5rem 0 3rem 0;
}

.clsTestmonial .rounded-circle {
    border: #ffffffa6 solid 12px;
    height: 182px;
}

.clsQuote {
    position: relative;
}

.clsQuote::before {
    background: url(images/testmonials-quote-icon.png) no-repeat;
    content: '';
    position: absolute;
    width: 60px;
    height: 54px;
    top: 0;
    left: 324px;
    background-size: 60px;
}

.clsTestmonial span.material-symbols-outlined {
    color: #000;
}

footer {
    background: #191919;
    padding: 2rem 0;
}

.clsSocialMedia ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clsSocialMedia ul li {
    display: inline;
    margin: 0 4px;
}

.clsSocialMedia ul li a img {
    width: 30px;
}

.clsFooterLink ul {
    margin: 14px 0 0 0;
    padding: 0;
    list-style: none;
}

.clsFooterLink ul li {
    display: inline;
    padding: 0 8px;
}

.clsFooterLink ul li a {
    font-size: 13px;
    line-height: 30px;
    color: #f2f2f2;
    font-weight: 400;
}

.clsCopyRights {
    font-size: 13px;
    line-height: 30px;
    color: #f2f2f2;
    font-weight: 400;
    padding: 6px 0 0 6px;
    margin: 0;
}

.footerletstalk {
    text-align: right;
}

.footerletstalk h3 {
    font-size: 35px;
    color: #ffffff;
    font-weight: 600;
}

.footerletstalk h4 {
    font-size: 18px;
    color: #ffffff;
    font-weight: 700;
}

.footerletstalk p {
    font-size: 13px;
    line-height: 18px;
    color: #ffffff;
    font-weight: 300;
    margin: 0;
}

/* about */

#myCarousel .carousel-item .mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-attachment: fixed;
}

#myCarousel h4 {
    font-size: 50px;
    margin-bottom: 15px;
    color: #FFF;
    line-height: 100%;
    letter-spacing: 0.5px;
    font-weight: 600;
}

#myCarousel p {
    font-size: 18px;
    margin-bottom: 15px;
    color: #d5d5d5;
}

#myCarousel .carousel-item a {
    background: #4169e1;
    border: #4169e1 solid 1px;
    font-size: 14px;
    color: #FFF;
    padding: 8px 28px;
    display: inline-block;
    border-radius: 50px;
    transition: 0.3s;
}

#myCarousel .carousel-item a:hover {
    background: #fff;
    text-decoration: none;
    border: #000 solid 1px;
    color: #000;
}

#myCarousel .carousel-item h4 {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

#myCarousel .carousel-item p {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

#myCarousel .carousel-item a {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

#myCarousel .carousel-item .mask img {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
    display: block;
    height: auto;
    /* max-width: 100%; */
}

#myCarousel h4,
#myCarousel p,
#myCarousel a,
#myCarousel .carousel-item .mask img {
    -webkit-animation-duration: 1s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#myCarousel .container {
    max-width: 1430px;
}

#myCarousel .carousel-item {
    height: 100%;
    min-height: 550px;
}

/* #myCarousel{position:relative; z-index:1; background:url(../images/banner-round-bg.png) center center no-repeat; background-size:cover; } */

.carousel-control-next,
.carousel-control-prev {
    height: 40px;
    width: 40px;
    padding: 12px;
    top: 40%;
    bottom: auto;
    transform: translateY(-50%);
}


.carousel-item {
    position: relative;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    transition: -webkit-transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease, -webkit-transform .6s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.carousel-fade .carousel-item {
    opacity: 0;
    -webkit-transition-duration: .6s;
    transition-duration: .6s;
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
    opacity: 1
}

.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-right.active {
    opacity: 0
}

.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

@supports (transform-style:preserve-3d) {

    .carousel-fade .carousel-item-left.active,
    .carousel-fade .carousel-item-next,
    .carousel-fade .carousel-item-prev,
    .carousel-fade .carousel-item-prev.active,
    .carousel-fade .carousel-item.active {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}



@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

#myCarousel h4 {
    font-size: 40px;
    line-height: 60px;
    color: #0b243b;
    font-weight: bold;
    font-family: 'gilroyblack';
    text-transform: uppercase;
}

#myCarousel p {
    font-size: 22px;
    color: #333333;
    font-weight: 300;
}

/* .clsBannerbg {
    background: url(../images/banner-round-bg.png) no-repeat top center;
    background-size: contain;
} */
.home header {
    position: absolute;
}
.home section.banner-inner{
    background-color: #f9f2ed;
    padding-top: 5rem;
    padding-bottom: 2rem;
}
.home header {
    background: transparent;
}

.home .clsMenu .nav-link {
    color: #000 !important;
}

.home span.searchicon.sclose img {
    filter: invert(1);
}

.clsRowheight {
    min-height: 500px;
}

#myCarousel .carousel-indicators li {
    width: 12px;
    border-radius: 50px;
    height: 12px;
    background-color: #999999;
    margin-right: 8px;
    margin-left: 8px;
}
#myCarousel .carousel-indicators li.active{
    background-color: #313131;
}
.clsWhyCHooseTile p {
    font-size: 22px;
    color: #333333;
    font-weight: 300;
    margin-bottom: 8px;
}

.clsWhyCHooseTile h2 {
    font-size: 32px;
    color: #0b243b;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'gilroyblack';
}

.clsWhyCHooseTile {
    text-align: center;
}

.clsWhyChoose {
    padding: 3rem 0;
}

.clsWhyChoosebox {
    background: #fff;
    padding:20px;
    text-align: center;
}
/*.clsWhyChoosebox:hover{*/
/*    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);*/
/*}*/
.clsWhyChoosebox img {
    margin-bottom: 16px;
}
.clsWhyChoosebox h3{
    font-size: 18px;
    line-height: 30px;
    color: #1a1a1a;
    font-weight: 700;
}
.clsWhyChoosebox p {
    padding: 4px 0 0;
    min-height:78px;
}

.clsWhyChoosebox a {
    font-size: 16px;
    color: #4169e1;
    font-weight: 400;
}

.clsWhyChoosebox a span {
    font-size: 12px;
    position: relative;
    top: 2px;
    padding-left: 5px;
    transition: all 0.4s;
}

.clsWhyChoosebox a:hover {
    text-decoration: none;
}

.clsWhyChoosebox:hover a span {
    padding-left: 9px;
}

.clsAboutMobileSec {
    background-color: #1a1a1a;
    padding: 5rem 2rem 4rem 2rem;
    background-image: url(images/mobile-section-bg.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    border-radius: 30px;
    margin: 0 40px;
}

.clspercent h3 {
    font-size: 22px;
    color: #4169e1;
    font-weight: 300;
}

.clspercent p {
    font-size: 18px;
    line-height: 26px;
    color: #000;
    font-weight: 400;
}
.clstopviews {
    position: relative;
    top: 24px;
}
p.mobiletextleft {
    line-height: 32px;
}
.clspercent h4 {
    font-size: 60px;
    line-height: 36px;
    color: #4169e1;
    font-weight: 275;
}
.clsService {
    padding:2rem 0 4rem 0;
}

.clsServiceBox {
    text-align: center;
}

.clsServiceBox h3 {
    font-size: 22px;
    color: #1a1a1a;
    font-weight: 500;
    font-family: 'gilroyblack';
    margin: 12px 0 0 0;
    text-transform: uppercase;
}

.clsServiceBox p {
    font-size: 18px;
    line-height: 24px;
    color: #1a1a1a;
    font-weight: 500;
}

.showcase {
    width: 100%;
    height: 170px;
    color: white;
    text-align: left;
    background: url(images/staffing-img.html) no-repeat top right;
    border-radius: 20px;
    margin-top: 2rem;
}

.showcase img {
    width: 100%;
    height: 100%;
}

.showcase .overlay {
    width: 100%;
    height: 170px;
    background: rgba(1, 1, 1, 1.0);
    background: linear-gradient(90deg, rgba(1, 1, 1, 1.0), rgba(10, 190, 66, 0.0));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-left: 3rem;
    border-radius: 20px;
}

.showcase h2 {
    font-size: 22px;

    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'gilroyblack';
    max-width: 500px;
    margin-bottom: 0;
}

.showcase p {
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    max-width: 440px;
    margin-bottom: 0;
}
.clsSiteBtn a{
    background: #4169e1;
    border: #4169e1 solid 1px;
    font-size: 14px;
    color: #FFF;
    padding: 8px 28px;
    display: inline-block;
    border-radius: 50px;
}
.clsSiteBtn a:hover{
    background: #fff;
    text-decoration: none;
    border: #000 solid 1px;
    color: #000;
}
.clsAIMachine{
    background: #f9f9f9;
    padding: 3rem 0;
}
.clsAIMachine h2{
    font-size: 30px;
    line-height: 34px;
    color: #0b243b;
    font-weight: bold;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    margin:20px 0 4px 0;
}
.clsAIMachine p{
    font-size: 14px;
    line-height: 24px;
    color: #1a1a1a;
    font-weight: 400;
}
.clsBussinessIdea h3{
    font-size: 18px;
    color: #1a1a1a;
    font-weight: bold;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    margin-bottom: 4px;
}
.clsBussinessIdea p{
    font-size: 14px;
    line-height: 24px;
    color: #1a1a1a;
    font-weight: 400;
    margin-bottom: 0;
}
.clsBussinessIdea {
    padding: 20px;
    border-radius: 14px;
}
/*.clsBussinessIdea:hover {*/
/*    background: #fff;*/
/*}*/
.clsBlog{
    padding: 4rem 0;
}
.clsBlogBox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 19px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 24px;
    padding:10px;
}
.clsBlog-img{
    margin-right: 20px;
    width: 116px;
}
.clsBlog-img img {
    width: 240px;
    height: 80px;
    object-fit: cover;
    border-radius: 14px;
    object-position: center;
}
.clsBlog-content a {
    font-size: 16px;
    color: #f5bc3b;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.clsBlog-content a:hover{
    text-decoration: none;
}
.clsBlog-content a span {
    font-size: 12px;
    position: relative;
    top: 2px;
    padding-left: 5px;
    transition: all 0.4s;
}
.clsBlog-content:hover  a span{
    padding-left: 9px;
}
.clsBlog-content p{
    font-size: 18px;
    line-height: 26px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 6px;
     overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}
.clsBlog .clsWhatmakeimgsec img {
    border-radius: 16px;
    height: 244px;
    object-fit: cover;
}
.clsBlog .clsMakeoverlay:before {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
}
.clsBlog .clsYellowNumber {
    position: absolute;
    bottom: 0;
    right: 0px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    left: 0;
    text-align: center;
}
.clsBlog .clsYellowNumber img{
    width: 40px;
    height: auto;
}
.clsBlog  .clsinnernumber {
    display: flex;
    align-items: center;
    padding-left: 50px;
}
.clsBlog  .clsinnernumber p {
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    padding: 0;
    margin: 0;
    position: relative;
    top: 0;
    left: 10px;
}
.clsBlog .clsWhatmakeimgsec{
    position: relative;
    cursor: pointer;
}
.clsBlog .clsWhatmakeimgsec:before{
    content: 'Video';
    background: #4169e1;
    width: 60px;
    position: absolute;
    top: 17px;
    left: 20px;
    height: 24px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 20px;
}

/* service */

.clsServicePage .clswhoimagesec h2{
    font-size: 40px;
}
.clsWePrioritize{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 19px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 24px;
    padding: 14px;
}
.no-shadow{
    box-shadow: none;
}
.WePrioritize-img {
    margin-right: 44px;
    margin-left: 10px;
    /* width: 116px; */
}
.WePrioritize-content p {
    font-size: 17px;
    line-height: 28px;
    color: #000000;
    font-weight: 300;
}
.WePrioritize-content p span{
    color: #4169e1;
    font-weight: 600;
}
.clsWhoWeAre.clsServicePage h3 {
    font-size: 26px;
}
.clsMobileIconSec{
    position: relative;
    width: 100%;
    max-width: 332px;
}
.clsMicon1 {
    position: absolute;
    left: -60px;
    top: 0;
}
.clsMicon2 {
    right: -50px;
    position: absolute;
    top: 40px;
}
.clsMicon3 {
    position: absolute;
    bottom: 0px;
    right: -90px;
}
.clsValueServ h3{
    font-size: 30px;
    line-height: 24px;
    color: #000000;
    font-weight: 700;
    margin-bottom: 30px;
}
.clsValueServ p{
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    font-weight: 300;
}
.clsValueServ{
    align-items: center;
    margin: 4.5rem 0;
}
.clsUicon1 {
    position: absolute;
    top: -60px;
    right: 40px;
}
.clsUicon3 {
    position: absolute;
    right: -50px;
    top: 130px;
}
.clsUicon4 {
    position: absolute;
    right: 0;
    bottom: -40px;
}
.clsUicon2 {
    position: absolute;
    bottom: 10px;
    left: -70px;
}
.clsconsultingicon1 {
    position: absolute;
    top: -60px;
    left: -60px;
}
.clsconsultingicon2 {
    position: absolute;
    top: 23px;
    right: -66px;
}
.clsconsultingicon3 {
    position: absolute;
    right: -90px;
    top: 130px;
}
.clsconsultingicon4 {
    position: absolute;
    left: 40px;
    bottom: -20px;
}
.clsappmar1 {
    position: absolute;
    top: -60px;
    right: -70px;
}
.clsappmar2 {
    position: absolute;
    bottom: 50px;
    left: -70px;
}
.clsappmar3 {
    position: absolute;
    right: -80px;
    bottom: -60px;
}
.clsOurCoreService {
    background-color: #fafafc;
    padding: 3rem 0 1rem 0;
    background-image: none;
}
.clsOurProcess{
    padding:4rem 0 0;
}
.clsOurProcess h2{
    font-size: 50px;
    color: #4169e1;
    font-weight: bold;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    font-weight: bold;
}
.clsProcessone{
    background: url(images/process-bg-1.jpg) no-repeat;
    background-size: cover;
    min-height:619px;
}
.clsStep-1 {
    width: 100%;
    max-width: 320px;
    background-color: #fdc162c2;
    padding: 30px;
    position: relative;
    top: 60px;
    left: 60px;
}
.clsStep-1 h2{
font-size: 60px;
    color: #000000;
    font-family: 'Lato', sans-serif;
}
.clsStep-1 h3{
    font-size: 30px;
    color: #1a1a1a;
    font-weight:700;
}
.clsStep-1 h3 span{
    font-weight:300;
}
.clsStep-1 p{
    font-size: 16px;
    line-height: 26px;
    color: #1a1a1a;
    font-weight: 400;
}
.clsStep-1.clsStep-2{
    min-height: auto;
    background: url(images/process-bg-2.jpg) no-repeat;
    position: static;
    max-width: 100%;
    background-size: cover;
}
.clsStep-1.clsStep-2 h2{
    font-size: 40px;
    line-height: 38px;
    color: #ffffff;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
}
.clsStep-1.clsStep-2 h3 {
    font-size: 25px;
    color: #fff;
    line-height: 31.2px;
}
.clsStep-1.clsStep-2 p {
    color: #fff;
}
.clsStep-1.clsStep-2.clsStep-3{
    background-color: #f2f2f2;
    background-image:none;
}
.clsStep-1.clsStep-2.clsStep-3 h3, .clsStep-1.clsStep-2.clsStep-3 h2, .clsStep-1.clsStep-2.clsStep-3 p{
    color: #000;
}
.clsStep-1.clsStep-2.clsStep-3.clsStep-4{
    background-color: #2a2f36;
    background-image:none;
}
.clsStep-1.clsStep-2.clsStep-3.clsStep-4 h3, .clsStep-1.clsStep-2.clsStep-3.clsStep-4 h2, .clsStep-1.clsStep-2.clsStep-3.clsStep-4 p{
    color: #fff;
}
.clsStep-1.clsStep-2.clsStep-3.clsStep-4.clsStep-5{
    min-height: auto;
    background: url(images/process-bg-3.jpg) no-repeat;
    position: static;
    max-width: 100%;
    background-size: cover;
}

/* blog */

.details-card {
    padding: 4rem 0;
}
.details-card .clsOurvaluetitlesec h2{
    font-size: 3rem;
    color: #4169e1;
    font-weight: bold;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    font-weight: bold;
}
.card-content {
	background: #ffffff;
	border: 4px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
	border-radius:20px;
}

.card-img {
	position: relative;
	overflow: hidden;
	border-radius: 0;
	z-index: 1;
	border-radius:20px 20px 0 0;
}

.card-img img {
    width: 100%;
    height: 220px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.card-img span {
	position: absolute;
    top: 15%;
    left: 12%;
    background: #4169e1;
    padding: 6px;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transform: translate(-50%,-50%);
}
.card-img span h4{
        font-size: 12px;
        margin:0;
        padding:10px 5px;
         line-height: 0;
}
.card-desc {
	padding: 1.25rem 2rem 2.5rem;
}

.card-desc h3 {
	color: #000000;
    font-weight: 600;
    font-size: 1.3em;
    line-height: 1.3em;
    margin-top: 0;
    margin-bottom: 5px;
    padding: 0;
     overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

.card-desc p {
	color: #747373;
    font-size: 14px;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.5;
	margin: 0px;
	margin-bottom: 20px;
	padding: 0;
	  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
           line-clamp: 3; 
   -webkit-box-orient: vertical;
}
.btn-card{
	background-color: #4169e1;
	color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    padding: .84rem 2.14rem;
    font-size: .81rem;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    margin: 0;
    border: 0;
    -webkit-border-radius: .125rem;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
    white-space: normal;
    word-wrap: break-word;
    color: #fff;
}
.btn-card:hover {
    background: #333;
}
a.btn-card {
    text-decoration: none;
    color: #fff;
}
.clsQuotes a{
    background: #4169e1;
    border: #4169e1 solid 1px;
    border-radius: 50px;
    transition: 0.3s;
}
.home li.nav-item.clsQuotes a:hover{
    background: transparent;
    text-decoration: none;
    border: #000 solid 1px;
    color: #000 !important;
}
.clsMenu li.nav-item.clsQuotes a:before{
    background: transparent;
}
img.textright {
    float: none;
    margin:0 auto;
}
.modal-backdrop{
    z-index: 0;
}
.home li.nav-item.clsQuotes a {
    color: #fff !important;
}
.clsMbg{
    background: #fff url(../../uploads/2024/01/mobile-app-del-bg.webp) no-repeat;
    background-size: 100% 100%;
    padding: 4rem;
    min-height: 511px;
    display: flex;
    align-items: center;
}
.clsMbg img{
    margin-bottom: 12px;
}
.clsMbg h3{
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'gilroyblack';
}
.clsMbg p{
    font-size: 22px;
    line-height: 36px;
    color: #ffffff;
    font-weight: 400;
}
.clsMbg > div{
    max-width: 430px;
}
.clsWebdel{
    background-color: #154db1;
    padding: 2.5rem;
    text-align: center;
}
.home .clsMenu a{
    color:#000 !important;
}
.clsWebdel h3{
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'gilroyblack';
}
.clsWebdel p{
    font-size: 22px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 300;
}
.clsWebdel.clsappmar{
    background-color: #1889db !important;
    background-image: url(images/app-mar-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.clsWebdel img {
    height: 271px;
    object-fit: contain;
    object-position: center;
}
.clsWebdel.clsConsulting{
    background-color: #ffc300;
}
.clsWebdel.clsConsulting h3, .clsWebdel.clsConsulting p{
    color: #000;
}
.clsWebdel.clsConsulting.clsUUx{
    background-color: #ffe200;
	height:413px;
}
.clsWebdel.clsConsulting.clsemptytitle{
    background-color: #d6e2ff;
    min-height: 408px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.clsWebdel.clsConsulting.clsemptytitle a{
    background: #4169e1;
    border: #4169e1 solid 1px;
    border-radius: 50px;
    transition: 0.3s;
    color: #fff;
    padding: 6px 20px;
}
.clsWebdel.clsConsulting.clsemptytitle a:hover{
    background: transparent;
    text-decoration: none;
    border: #000 solid 1px;
    color: #000 !important;
}
.clsWebdel.clsConsulting img {
    height: auto;
}
.clsiphone {
    background: url(images/iphone.png) no-repeat;
    min-height: 467px;
    background-position: center;
    background-size: contain;
    position: relative;
}
.clsRevolutionize{
    background: url(images/revolutionize-bg.png) repeat-x bottom center;
}
.clsiphone h3 {
    max-width: 230px;
    position: absolute;
    top: 9rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 37px;
    color: #1a1a1a;
    font-weight: 900;
}
.clsiphone h3 span{
    color: #4169e1;
}
.clspercent {
    text-align: center;
    margin-left: -10rem;
}
.clspercent > div{
    margin-bottom: 24px;
}
.clsContactbook{
    background-image: url(images/contact-bg.png);
    background-repeat: repeat-x;
    background-color: #004f9e;
    background-position: bottom center;
    height: 600px;
	padding-top:5rem;
}
@media (max-width: 767px){
	.clsContactbook {
		padding-top:5rem !important;
	}
	
}
	
.clsContactbook .col-lg-12.clscontactbreadcrumb {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 5rem;
}
.col-lg-12.clscontactbreadcrumb span, .col-lg-12.clscontactbreadcrumb a {
    color: #fff;
}
.clsContactbook span.wpcf7-spinner {
    display: none;
} 
.clsContactbook .wpcf7 form.sent .wpcf7-response-output, .clsQuoteFormBox .wpcf7 form.sent .wpcf7-response-output {
    color: #46b450;
    position: absolute;
    bottom: 10px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    left: 0;
    right: 0;
    border: none;
    text-align: center;
    font-size: 13px;
}
.clsQuoteFormBox .wpcf7 form.sent .wpcf7-response-output{
    position: static;
}
.clsContactbook .wpcf7-not-valid-tip {
position: absolute;
    z-index: 1;
    left: 5px;
    color: #ed1c24;
    font-size: 0.7rem;
    width: 20rem;
    bottom: -24px;
}
.clsContactFormBox .form-group i, .clsQuoteFormBox .form-group i {
    color: #ed1c24;
}
.clsContactbook img{
    padding-bottom: 16px;
}
.clsContactbook h3{
    font-size: 40px;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'gilroyblack';
}
.clsContactbook p{
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
}
.clsContactFormBox{
    border-radius: 20px;
    background-color: #ffffff;
    padding: 32px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 99;
    width: 100%;
    max-width: 490px;
}
.clsContactFormBox h4{
    font-size: 34px;
    line-height: 30px;
    color: #000000;
    font-weight: 400;
    text-align: center;
    padding-top:1.2rem;
    padding-bottom: 2rem;
}
.clsContactFormBox input, .clsContactFormBox textarea{
    border-radius: 8px;
    background-color: #f5f5f5;
    border: none;
}
.clsContactFormBox label{
    font-size: 16px;
    color: #4d4d4d;
    font-weight: 400;
    width: 100%;
    margin-bottom: 0;
}
.clsContactFormBox .wpcf7-submit, .clsQuoteFormBox input.wpcf7-submit{
    border-radius: 9px;
    background-color: #4169e1;
    text-align: center;
    color: #fff;
    width: 100%;
    border: none;
    height: 50px;
    cursor: pointer;
}
.clsContactFormBox .wpcf7-submit:hover, .clsQuoteFormBox input.wpcf7-submit:hover{
    background-color:#0e329f;
}
.clsReachus{
    padding: 2.5rem 0;
}
.clsReachus ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.clsReachus ul li{
    margin: 14px 0;
    display: flex;
    font-weight: 600;
}
.clsReachus ul li span img{
    width: 28px;
    margin-right:16px;
}
.clsOurSupport{
    border-radius: 20px;
    background-color: #ffffff;
    padding: 32px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    margin-top: 13rem;
}
.clsSupportcontent h4{
    font-size: 26px;
    line-height: 30px;
    color: #000000;
    font-weight: 400;
}
.clsSupportcontent p{
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    font-weight: 400;
    margin-bottom: 0;
}
.clsSupportcontent a{
    font-size: 18px;
    line-height: 30px;
    color: #4169e1;
    font-weight: 600;
}
.clshead-phone {
    padding-right: 30px;
}
.modal-body .clsContactFormBox{
    position: static;
    background-color: transparent;
    padding: 10px;
    box-shadow: none;
}
.clsBlogDetails{
    border-top: #ccc solid 1px;
    padding: 3rem 0;
}
.clsBlogDetails .container{
    /*max-width: 800px;*/
    margin: 0 auto;
}
.clsBlogDetails h2{
    font-size: 34px;
    color: #000;
    text-transform: uppercase;
    font-family: 'gilroyblack';
}
.clsBlogDetails p{
    display: block;
    width:100%;
}
.clsBlogDetails ul, .clsBlogDetails ol{
    margin-left: 40px;
    margin-bottom: 24px;
}
.clsBlogDetails ul li, .clsBlogDetails ol li{
    padding:8px 0;
}
.clsQuoteBtn {
    text-align: center;
    margin: 0 auto;
    max-width:240px;
	width: 15%;
}
.clsQuoteBtn button {
    width: 240px;
    margin-top: 20px;
}
.modal-body .clsContactFormBox input, .modal-body .clsContactFormBox textarea {
    border-radius: 8px;
    /*background-color: transparent;*/
    /*border: #cbcbcb solid 1px;*/
}

.wp-block-columns{
    margin-bottom:0 !important;
}
figure {
    margin: 0 !important;
}
section.clsbreadcrumb {
    border-bottom: #cccccc59 solid 1px;
    padding-bottom: 7px;
        padding-top: 5px;
	display:none;
}
section.clsbreadcrumb a {
    color: #4169e1;
}
.clsContactFormBox .col-lg-6 {
    float: left;
}
.clsBussinessIdea.act {
    background: #fff;
}
.search-results #main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem;
}
.search-results #main ul {
    margin-left: 42px;
    margin-bottom: 18px;
}
.search-results #main ul li {
    padding-bottom: 12px;
}
.error-404 {
  margin: 0 auto;
  text-align: center;
  padding: 3rem 0;
}
.error-404 .error-code {
  bottom: 60%;
  color: #4686CC;
  font-size: 96px;
  line-height: 100px;
  font-weight: bold;
}
.error-404 .error-desc {
    font-size: 15px;
    color: #707070;
}
.error-404 .m-b-10 {
  margin-bottom: 10px!important;
}
.error-404 .m-b-20 {
  margin-bottom: 20px!important;
}
.error-404 .m-t-20 {
  margin-top: 20px!important;
  color:#4169e1;
}
.error-desc a {
    background: #4169e1;
    border-color: #4169e1;
    border-radius: 50px;
}
.error404 section.clsbreadcrumb {
    padding-top: 4px;
}
li.nav-item.clsQuotes a:hover {
    background: #fff;
    border-color: #fff;
    color: #000 !important;
}
.clsBlog-content {
    width: 80%;
}
.clsBlog-img {
    width: 20%;
}
img.logo1 {
    display: none;
}
.home img.logo1 {
    display: block;
}
.home img.logo2 {
    display: none;
}
.clsQuoteFormBox span.wpcf7-spinner {
    display: none;
}
.page-id-84 main#main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 25px 3rem 25px;
}
.page-id-84 section.clsbreadcrumb {
    padding-top: 4px;
    margin-bottom: 2rem;
}
.page-id-84 main#main .col-lg-12 {
    padding: 0;
    margin: 0;
}
.page-id-84 main#main h1 {
        font-family: 'gilroyblack';
    text-transform: uppercase;
    margin-bottom:20px;
     font-size: 24px;
}
.page-id-84 main#main h2 {
    font-size: 20px;
}
.ClsMenuSection .modal-title, .clsBlog .modal-title{
    color: #4169e1;
    font-size: 24px;
    text-transform: uppercase;
        font-family: 'gilroyblack';
}
/*.single-post section.clsBanner {*/
/*    display: none;*/
/*}*/
.single-post .clsBanner .carousel-item img, .page-id-17 .clsBanner .carousel-item img{
    height: 240px;
    object-fit: cover;
}
.page-id-117 main#main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 25px;
}
.page-id-117 main#main h2 {
    display: none;
}
.page-id-117 main#main ul {
    margin-left: 10px;
    margin-top: 20px;
    list-style:none;
}
.page-id-117 main#main ul li a {
    color: #000;
    font-size: 1.2rem;
    margin: 4px 0;
}
.home section.clsBanner, .home section.clsbreadcrumb, .page-id-15 section.clsBanner, .page-id-15 section.clsbreadcrumb, .page-id-117 section.clsBanner, .page-id-84 section.clsBanner {
    display: none;
}
.single-post main#main .card-img {
    display: none;
}
section.clsBlogDetails div {
    width: 100% !important;
}
a.viewAllBlog {
    background: #4169e1;
    border: #4169e1 solid 1px;
    font-size: 14px;
    color: #FFF;
    padding: 8px 28px;
    display: inline-block;
    border-radius: 50px;
    transition: 0.3s;
    text-transform: uppercase;
    font-weight: 600;
        margin-top: 20px;
}
a.viewAllBlog:hover {
    background: #333;
     border: #333 solid 1px;
     color:#fff;
     text-decoration: none;
}
.clsProjectDetail label {
    width: 100%;
}
.single-post section.clsTestmonial {
    display: none;
}

.search.search-results .clsTestmonial {
    display: none !important;
}
.search-results .clsBussinessIdea {
    padding-left: 0;
}
.search-results .clsBussinessIdea a {
    background: #4169e1;
    border: #4169e1 solid 1px;
    font-size: 14px;
    color: #FFF;
    padding: 5px 18px;
    display: inline-block;
    border-radius: 50px;
    transition: 0.3s;
    margin-top: 6px;
}
.search-results .clsBussinessIdea a:hover {
    background: #333;
    border: #333 solid 1px;
}
body.search.search-results .clsAIMachine h2 {
    width: 100%;
}
.clsBussinessIdea {
    border-radius: 0;
}

.Clsnavigation ul.sub-menu {
    visibility:hidden;
    display:none;
}
.Clsnavigation ul li.clsSubMenu ul.sub-menu {
    visibility:visible;
    background: #4169e1;
    width: 200px;
    position: absolute;
    top:42px;
    list-style: none;
    display:block;
    z-index: 9999;
    box-shadow: 0px 8px 25px rgb(0 0 0 / 35%) !important;
}
.clsMenu ul li.menu-item-has-children > a {
    background: url(images/expand_more.png) no-repeat;
background-size: 9px;
    background-position: top 13px right;
    padding-right: 20px !important;
}

.Clsnavigation ul li.clsSubMenu ul.sub-menu li a {
    color: #fff !important;
    display:block;
    padding: 8px 12px !important;
    word-wrap: break-word;
}
.Clsnavigation ul li.clsSubMenu ul.sub-menu li a:hover {
background: #ffffff;
    color: #0b243b !important;
}
.Clsnavigation ul li.clsSubMenu ul.sub-menu li {
    border-bottom: #8f8f8f solid 1px;
}


.clsMenu ul.sub-menu:after {
    content: " ";
    position: absolute;
    left: 35px;
    top: -1.4rem;
    border-top: none;
    border-right: 0.5rem solid transparent;
    border-left: 0.5rem solid transparent;
    border-bottom: 0.5rem solid #4169e1;
    width: 0.9rem;
    height: 1.4rem;
    text-align: center;
}
.header.is-sticky {
  position: fixed;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  /*backdrop-filter: blur(10px);*/
  animation: slideDown 0.35s ease-out;
  background:#191919;
  z-index: 999;
}


.clsBuld{
/*     background: url('https://codehiveml.com/wp-content/uploads/2023/09/blue-bg.jpg') no-repeat; */
	background: rgb(0,144,223);
    background: radial-gradient(circle, rgba(0,144,223,1) 0%, rgba(0,144,223,1) 25%, rgba(0,144,223,1) 67%, rgba(0,144,223,1) 90%, rgba(14,106,171,1) 100%);
    background-size: cover;
    text-align: center;
    padding: 4rem 0 0;
    position: relative;
}
.clsBuld h1{
    font-size: 60px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    text-shadow: 4px 4px 7px rgba(0,0,0,0.24);
    padding: 2.6rem 0 1rem 0;
}
.pro-logo img {
    height: 52px;
}
.clsBookaCall{
    background: #011a27;
    padding: 1.5rem 0;
    text-align: center;
}
.clsBookaCall .container{
    width: 100%;
    max-width: 776px;
    margin: 0 auto;
}
.clsBookaCall p{
    font-size: 16px;
    color: #ffffff;
    line-height: 26px;
    font-weight: 400;
}
.clsBookaCall a{
    background: #ffc362;
    border: #ffc362 solid 1px;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    font-weight: 700;
    padding: 8px 28px;
    display: inline-block;
    border-radius: 50px;
    transition: 0.3s;
    margin-top: 14px;
}
.clsBookaCall a:hover{
    text-decoration: none;
    background: #fff;
    border: #fff solid 1px;
}
.clstypesofweb{
    padding: 3.4rem 0;
}
.clstypesofwebtopsec{
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.clstypesofweb h2{
    font-size: 34px;
    color: #000000;
    font-weight: bold;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    letter-spacing: 0;
}
.clstypesofweb p{
    color: #011b28;
}
.clstypofwebbox {
    text-align: center;
    padding: 0 2rem;
}
.clstypofwebbox img{
    border-radius: 15px;
	box-shadow: rgb(31 0 245 / 80%) 0px 0px 15px;
    height: 118px;
    width: 100%;
    max-width: 224px;
    margin: 14px auto;
    object-fit: cover;
}
.clstypofwebbox h3{
    font-size: 22px;
    color: #000000;
    font-weight: 700;
}
.clstypofwebbox p{
    color: #011b28;
	text-align:center;
}
.clsprowhyselect{
    padding: 2.6rem 0;
    background-color: #1a1a1a;
}
.clsprowhyselect h2{
    font-size: 34px;
    color: #ffffff;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    letter-spacing: normal;
}
.clssvgicons{
    text-align: center;
    margin-top: 2.6rem;
}
.clssvgicons h3{
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    padding: 1.4rem 0;
}
.clspackages{
    padding: 4rem 0;
    position: relative;
}
.clspackages::before {
    content: '';
    background: #f1f1f1;
    position: absolute;
    width: 100%;
    height: 540px;
    bottom: 0;
    z-index: 0;
}
.clspackages h2, .clsOurworkses h2{
    font-size: 34px;
    color: #000000;
    font-family: 'gilroyblack';
    text-transform: uppercase;
    letter-spacing: 0;
}
.clspackages h3, .clsOurworkses h3{
    font-size: 26px;
    line-height:36px;
    color: #1a1a1a;
    font-weight: 700;
    text-align: center;
}
.clsPackagebox{
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0px 8px 24px 10px rgba(0, 0, 0, 0.1);
    /* margin: 2.4rem 1.6rem 0 1.6rem; */
}
.clsPackagebox h4{
    text-align: center;
    font-size: 22px;
    color: #000000;
    font-weight: 700;
    padding: 1.6rem 0 1rem 0;
}
.clsPackagebox ul{
    padding: 0;
    margin: 0px 0 30px 70px;
    list-style: none;
}
.clsPackagebox ul li{
    background: url('../../uploads/2023/09/tick.svg') no-repeat left center;
    padding: 6px 0 6px 34px;
}
.clsBottomcolortxt{
    background: #0037a2;
    height: 77px;
    border-radius: 0 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
}
.clsPackaec{
    width: 100%;
    max-width: 1100px;
    margin:0 auto;
    margin-top: 2rem;
}
.botred{
    background-color: #ff1e23;
}
.botyel{
    background-color: #cd6000;
}
.clsbookyoursession{
    max-width: 900px;
    margin: 3rem auto;
    margin-bottom: 0;
    text-align: center;
}
.clsbookyoursession a{
    border-radius: 12px;
    background-color: #011b28;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #ffffff;
    font-weight: 700;
    max-width: 400px;
    margin: 0 auto;
}
.clsbookyoursession a span img{
    height: 34px;
    display: block;
    padding-right: 12px;
}
.clsbookyoursession a:hover{
    text-decoration: none;
    background-color: #063952;
}
.clsbookyoursession h4{
    font-size: 34px;
    color: #000000;
    font-weight: 700;
    padding: 1.6rem 0 0 0;
}
.clsbookyoursession p{
    font-size: 23px;
    line-height: 40px;
    color: #000000;
    font-weight: 300;
}
.clsOurworkses{
    padding: 4rem 0;
}

.item {
    position: relative;
    overflow: hidden;
}
.item img{
    width: 100%;
}
.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;    
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: .5s ease;
    text-align: center;
}
.green {
    background-color: rgba(3, 142, 72, 0.70);
}
.blue{
    background-color: rgba(50, 146, 197, 0.70);
}
.pinks{
    background-color: rgba(180, 59, 184, 0.70);
}
.yellow{
    background-color: rgba(247, 171, 17, 0.70);
}
.darkblue{
    background-color: rgba(0, 27, 35, 0.70);
}
.darkgreen{
    background-color: rgba(0, 186, 183, 0.70);
}
.darkpink{
    background-color: rgba(255, 91, 117, 0.70);
}
.darkreddd{
    background-color: rgba(207, 28, 0, 0.70);
}
.darkorange{
    background-color: rgba(255, 147, 41, 0.70);
}

.overlay .text{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 33px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    font-family: 'gilroyblack';
    text-transform: uppercase;
}
.boxwork .col-lg-4{
    padding: 0;
    margin: 0;
}
.boxwork{
    margin-top: 2.6rem;
}
.page-template-fullwidth .clsTestmonial {
    display: none;
}

.header.is-sticky .clsLogo img {
  max-width: 70%;
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.home header.header.is-sticky .clsLogo a img.logo1 {
    display: none;
}
.home header.header.is-sticky .clsLogo a img.logo2 {
    display: block;
}
.home header.header.is-sticky .clsMenu a {
    color: #fff !important;
}
.home header.header.is-sticky span.searchicon.sclose img{
    filter: invert(0);
}
    
}


.container {
  position: relative;
  width: 50%;
}

.img-gallery-fluid{
  opacity: 1;
  display: block;
  width: 100%;
  filter: brightness(0.5);
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}


/* .container:hover .img-fluid {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}
.container:hover .middle-two {
  opacity: 1;
} */

/* .overlay-image:hover {
    filter: brightness(0.6);
} */

.overlay-image:hover .middle {
  opacity: 1;
}

.overlay-image:hover .middle-website {
    opacity: 1;
}

.overlay-image:hover .middle-two {
  opacity: 1;
}
.overlay .text{
	height: 100% !important;
}

.overlay-image:hover .heading-overlay {
  opacity: 1;
}



.heading-overlay{
	transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    font-size: 40px !important;
    color: white;
    font-weight: bolder;
}

.text-john {
    background-color: #0037a2;
    color: white;
    font-size: 16px;
	cursor: pointer;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.middle-two {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.middle-website {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

img.icon-image {
    width: 50%;
}

.row.boxwork.custom-gallery {
    justify-content: center !important;
    gap: 3rem;
}


.card-bodywrapper {
    display: flex !important;
    justify-content: center !important;
    border-right: 2px solid #0037a2;
    border-left: 2px solid #0037a2;}

.card-bodywrapper ul {
    margin: 0 !important;
    padding: 30px;
}

.header-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 77px;
    overflow: hidden;
    border-radius: 20px 20px 0px 0px;
    color: #fff !important;
    font-size: 20px;
    font-weight: 700;
	    border-top: 2px solid #0037a2;
    border-right: 2px solid #0037a2;
    border-left: 2px solid #0037a2;
}

hr.divider-header {
    margin-top: 0.2rem !important;
	margin-bottom: 0rem !important;
}

.card-headerImg img {
    width: 100%;
}

.header-heading {
   display: flex;
    flex-grow: 0.2;
    justify-content: center;
    align-items: center;
}
.header-section h3 {
    margin: 0px !important;
}

.card-item {
    display: flex;
    margin: 3px 0px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
/*     padding: 0px 30px 10px 30px; */
	padding: 0px 10px 10px 10px;
    border-bottom: 2px solid #eaeaea;
}

.content-card-item {
    margin: 0px 10px;
}

.img-card-item img {
    width: 50%;
    height: 40%;
}

.img-card-item {
    background: #0037a21c;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    justify-content: center;
}

.basic-card {
    border-right: 2px solid #0037a2;
    border-left: 2px solid #0037a2;
}
.header-section.basic-header-border {
    border-top: 2px solid #0037a2;
    border-left: 2px solid #0037a2;
    border-right: 2px solid #0037a2;
}

.standard-card {
    border-right: 2px solid #ff1e23;
    border-left: 2px solid #ff1e23;
}
.header-section.standard-card-border {
    border-top: 2px solid #ff1e23;
	    border-right: 2px solid #ff1e23;
    border-left: 2px solid #ff1e23;	
}

.standard-footer {
    background: #ff1e23;
}
.business-footer {
    background: #cd6000;
}

.business-card {
    border-right: 2px solid #cd6000;
    border-left: 2px solid #cd6000;
}
.header-section.business-header-border {
    border-top: 2px solid #cd6000;
    border-left: 2px solid #cd6000;
    border-right: 2px solid #cd6000;
}

.card-bodywrapper ul {
    padding: 0px;
    width: 100%;
}
.card-headerImg {
    height: 50px;
    width: 50px;
    margin: 0px 30px;
}

.clsBottomcolortxt.footer-card {
    height: 50px !important;
    font-size: 16px;
}
.img-card-item.red-cross {
    background: #ffe5e5;
}

.card-bodywrapper ul .card-item:last-child {
    border-bottom: none !important;
}

.gallery-section {
    display: flex;
    flex-direction: row;
    align-items: self-start;
    margin: 30px 0px;
}
.website-gallery {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}
.app-site {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}

.nav-item.clsQuotes.call-action {
    display: flex;
    justify-content: space-between;
    color: #fff !important;
    align-items: center;
}

.nav-item.clsQuotes.call-action a {
    color: #fff !important;
}

@media (min-width:768px) and (max-width:820px){
	.middle-website{
		top: 55%;
	}
	
	.middle{
		top: 55%;
	}
	.middle-two{
		top: 55%;
	}
	
}

@media (min-width: 990px) and (max-width:1400px){
	.footerletstalk {
		text-align: right;
		margin-right: 90px;
	}
}
@media screen and (max-width:767px){
	.middle .text-john {
		width: 25px !important;
		height: 25px;
	}
	.middle-two .text-john {
    width: 25px !important;
    height: 25px;
	}
	
	.middle-website .text-john {
    width: 25px !important;
    height: 25px;
	}
	.middle-website{
		top: 55%;
	}
	

	.middle{
		top: 55%;
	}
	.middle-two{
		top: 55%;
	}
	
	.overlay.heading-overlay .text {
    font-size: 12px;
	}
}
.clsMenu li.menu-item  ul.sub-menu li {
    padding-left:0 !important;
     padding-right:0 !important;
}
.Clsnavigation ul li.clsSubMenu ul.sub-menu li a:before{
    display:none;
}


@media(min-width:1025px){
    .home .clsMenu ul li.menu-item-has-children > a {
    background: url(images/expand_more_home.png) no-repeat;
background-size: 9px !important;
    background-position: top 13px right !important;
    padding-right: 20px !important;
}
}

#wpfront-scroll-top-container {
	bottom: 100px !important; 
}

/* .translatepress-ar .clsPackagebox.wow.fadeInLeft .card-item {
    flex-direction: row-reverse !important;
} */

.translatepress-ar .clsPackagebox.wow.fadeInLeft .content-card-item {
    text-align: end;
}



.translatepress-ar .clstypofwebbox.wow.fadeInLeft p {
    text-align: right !important;
}

div#trp-floater-ls {
    display: none !important;
}

/* button#drop-menu {
    border: none;
    background: #f9f2ed;
	cursor: pointer;
} */

button#drop-menu {
    border: none;
    background: transparent !important;
    cursor: pointer;
}

.page-template button#drop-menu {
    filter: invert(1) !important;
}

.page-template-default.page-id-95 button#drop-menu{
    filter: invert(1) !important;
    left: 70px !important;
}

.clsMenu ul li.menu-item-has-children > a{
	background: none !important;
}

button#drop-menu:focus {
    outline: none !important;
}
/* button#drop-menu {
    position: absolute;
    right: 10px;
    font-size: 25px;
    top: 2px;
} */

button#drop-menu img {
    width: 20px !important;
}

button#drop-menu {
    position: absolute;
    right: 0px;
    top: 0px;
    left: 90px;
}

button.drop-menu-mobile {
    border: none;
    color: #fff;
    background:  transparent !important;
    cursor: pointer;
	filter: invert(1) !important;
}

@media screen and (max-width:990px){
	button#drop-menu {
    border: none;
    background: transparent !important;
	cursor: pointer;
	color: #fff;
	position: absolute;
    right: 20px;
    top: 0px;
    height: 100% !important;
	filter: invert(1);
	display: flex;
    justify-content: end;
    align-items: center;
	}
}

}


@media screen and (max-width:992px){
	.home .clsMenu ul li.menu-item-has-children > a{
	background: none !important;
}

.translatepress-ar button#drop-menu {
    filter: invert(1);
    left: 80px;
}

}
@media screen and (min-width:992px) {	
.translatepress-ar .Clsnavigation ul li.clsSubMenu ul.sub-menu {
    right: 0 !important;
}
.translatepress-ar .clsMenu ul.sub-menu:after {
    left: 140px !important;
}
.translatepress-ar .Clsnavigation ul li.clsSubMenu ul.sub-menu li a {
    text-align: end !important;
}
}
a.heading-redirector {
    color: #fff !important;
}
a.heading-redirector:hover {
    text-decoration: none;
}

.rtl.page-id-85 button#drop-menu {
    filter: invert(0) !important;
}
/* .rtl.page-id-85 button#drop-menu.drop-menu-mobile {
    filter: invert(1) !important;
} */
.page-id-86 button#drop-menu {
    filter: invert(1) !important;
}
.page-id-15 button#drop-menu {
    filter: invert(1) !important;
}

li#menu-item-86 a:hover::before {
    opacity: 1 !important;
}

li#menu-item-86 a::before {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -7px;
    width: 2rem;
    height: 0.2rem;
    background: #4169e1;
    content: "";
    opacity: 0;
    transition: all 0.4s;
}
.translatepress-ar .clsWebdel h3 {
    font-size: 22px !important;
}


.translatepress-ar .site-main ul {
    direction: rtl;
    text-align: end;
    margin-left: 0;
}

.translatepress-ar .site-main ul li {
    text-align: start;
    list-style-position: inside !important;
}

.translatepress-ar .site-main p {
    text-align: right;
    direction: rtl;
}
/* .translatepress-ar .clsWhatmakescontentright h3,h2,p {
    text-align: right;
    direction: rtl;
} */
.translatepress-ar section.clswhatmakes .row {
    flex-direction: row-reverse;
}
.translatepress-ar .row.clsStandOut h2 {
    text-align: center !important;
}
.translatepress-ar  .clsWhatMakesBox img{
    left: 57px !important;
}
.translatepress-ar .clsBoxcont {
    direction: rtl;
    text-align: right;
}
.translatepress-ar .clsOurvaluetitlesec h2{
	text-align: center !important;
    direction: rtl;
}

.translatepress-ar section.clsRevolutionize p{
    text-align: start;
    direction: rtl;
}
.translatepress-ar .clsiphone h3 {
    text-align: right;
    direction: rtl;
}
.page-id-86.translatepress-ar .content-area p {
    direction: rtl;
    text-align: right !important;
}

.translatepress-ar .clsWhatmakescontentright h2 {
    direction: rtl;
    text-align: right !important;
}
.translatepress-ar .clsWhatmakescontentright h3 {
    direction: rtl;
    text-align: right !important;
}
.translatepress-ar .clsBussinessIdea p {
    text-align: right !important;
    direction: rtl;
}
.translatepress-ar .clsAIMachine p {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clsAIMachine h2 {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clsWhyChoosebox p {
    text-align: right;
    direction: rtl;
}
.translatepress-ar .carousel-caption p {
    direction: rtl;
}
.translatepress-ar .clsBussinessIdea h3 {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clsWhoWeRightContent h3 {
    text-align: right;
    direction: rtl;
}
.translatepress-ar .clsWhoWeRightContent p {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .row.clsValueServ h3 {
    text-align: right;
    direction: rtl;
}
.translatepress-ar .row.clsValueServ p {
    text-align: right;
    direction: rtl;
}

.translatepress-ar section.clsOurProcess p {
    text-align: right;
    direction: rtl;
}

.translatepress-ar section.clsOurProcess h3 {
    text-align: right;
    direction: rtl;
}
.translatepress-ar section.clsOurProcess h2 {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clsContactbook p {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clsReachus h3 {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clsReachus p {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clsContactbook h3 {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clstypesofweb p {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clstypofwebbox p {
    text-align: right !important;
    direction: rtl;
}

.translatepress-ar .carousel-inner p {
    text-align: right;
    direction: rtl;
}
.translatepress-ar .carousel-inner h4 {
    text-align: right;
    direction: rtl;
}

.translatepress-ar .carousel-inner a {
    margin-left: 24.9rem;
}

.translatepress-ar .carousel-inner .clsPortfolio, .clsLetstalk {
    margin-left: 0px !important;
}


.translatepress-ar .clsWhoWeRightContent {
    direction: rtl;
    text-align: right;
}

.translatepress-ar .clsWhoeWeContent {
    direction: rtl;
    text-align: right;
}

.translatepress-ar .carousel-caption p {
    direction: rtl;
    text-align: center !important;
}

.translatepress-ar .clsOurSupport {
    gap: 15px;
    text-align: right;
    direction: rtl;
}

.translatepress-ar .clsReachus ul li {
    direction: rtl;
    justify-content: start;
	gap: 15px;
}

.translatepress-ar .text-left {
    text-align: start !important;
    direction: rtl;
	margin-right: 40px;
}

.translatepress-ar .clsWebdel.clsConsulting {
    height: 430px;
    max-height: 440px;
    overflow: auto;
}

.clsWebdel.clsConsulting {
    height: 430px !important;
    max-height: 440px;
    overflow: auto;
}
.translatepress-ar  .clsWebdel.clsappmar {
    height: 485px;
    max-height: 500px;
    overflow: auto;
}

.translatepress-ar .clsWhyCHooseTile p {
    text-align: center !important;
	direction: rtl;
}

.translatepress-ar .clsBookaCall p {
    text-align: center !important;
}

.translatepress-ar .clsStep-1.clsStep-2 h3 {
    line-height: 44.4px !important;
}

.translatepress-ar .clsbookyoursession p {
    text-align: center !important;
	direction: rtl;
}

.translatepress-ar .clsbooksession p {
    text-align: center !important;
	direction: rtl;
}
.translatepress-ar .more-details {
    text-align: center !important;
    direction: rtl;
}

/*
::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 100px;
} */
/*

::-webkit-scrollbar {
    background: #fff;
    border: 1px solid white;
    width: 10px !important;
} */


.translatepress-ar .contactus-section {
    text-align: right !important;
    direction: rtl;
}

.translatepress-ar li.number-english {
    display: none !important;
}

.translatepress-en_US li.number-arabic {
    display: none !important;
}

.translatepress-ar .footerletstalk {
		direction: rtl !important; 
}

.translatepress-ar.page-id-117 .wp-block-heading {
    text-align: right !important;
    direction: rtl;
}

.translatepress-ar .clswhoimagesec h2 {
    text-align: right !important;
    direction: rtl;
    margin-right: 30px;
}

.translatepress-ar .calendly-link-english  {
    display: none !important;
}

.translatepress-en_US .calendly-link-arabic  {
    display: none !important;
}


li#menu-item-1998 > a {
    pointer-events: none !important;
}


li#menu-item-1995 > a {
    pointer-events: none !important;
}

.translatepress-ar .row.clsbookyoursession a {
    gap: 15px;
    direction: rtl !important;
}
.translatepress-ar.page-id-1348 .row.clsbooksession a {
    direction: rtl !important;
    gap: 15px;
}
.translatepress-ar.page-id-1762 .row.clsbooksession a {
    direction: rtl !important;
    gap: 15px;
}

.translatepress-ar li#menu-item-86 button#drop-menu {
    left: 0px;
    right: 77px;
    display: flex;
    justify-content: flex-start;
}

.translatepress-ar li#menu-item-1998 button#drop-menu {
    left: 0px !important;
    justify-content: flex-start;
    display: flex;
}

.translatepress-ar .clsMbg h3 {
    direction: rtl;
    text-align: right;
}
.translatepress-ar .col-lg-3.clspercent h4 {
    text-align: end;
}

@media screen and (max-width:990px){

	.page-id-85.translatepress-ar button#drop-menu img {
    	filter: invert(1) !important;
	}
	.translatepress-ar li#menu-item-86 button#drop-menu {
    	right: 95px;
    	display: flex;
    	justify-content: flex-end;
    	left: 24rem !important;
	}

	.translatepress-ar button#drop-menu img {
    	filter: invert(0) !important;
	}
	
	.translatepress-ar li#menu-item-1998 button#drop-menu {
    	right: 95px;
    	display: flex;
    	justify-content: flex-end;
    	left: 24rem !important;
	}
	
	.translatepress-ar ul#mymenu li {
    	direction: rtl !important;
    	text-align: start !important;
	}
	.translatepress-ar ul#mymenu li > a {
    	padding: 0px !important;
	}

}
@media screen and (max-width:470px){
.translatepress-ar .carousel-inner a {
    margin-left: 18.9rem;
}	
}


.addition-footer-basic {
    background: white !important;
    border-left: 2px solid #0037a2;
    border-right: 2px solid #0037a2;
    border-bottom: 2px solid #0037a2;
}

.addition-footer-standard {
    background: white !important;
    border-left: 2px solid #ff1e23;
    border-bottom: 2px solid #ff1e23;
    border-right: 2px solid #ff1e23;
}

.addition-footer-business {
    background: white !important;
    border-bottom: 2px solid #cd6000;
    border-right: 2px solid #cd6000;
    border-left: 2px solid #cd6000;
}

.clsBuldd {
/*         background: url('https://codehiveml.com/wp-content/uploads/2023/09/blue-bg.jpg') no-repeat; */
	background: rgb(0,144,223);
        background: radial-gradient(circle, rgba(0,144,223,1) 0%, rgba(0,144,223,1) 25%, rgba(0,144,223,1) 67%, rgba(0,144,223,1) 90%, rgba(14,106,171,1) 100%);
        background-size: cover;
        text-align: center;
        padding: 4rem 0 0;
        position: relative;
    }
    .clsBuldd h1 {
        font-size: 55px;
        color: #ffffff;
        font-weight: bold;
        text-align: center;
        font-family: 'gilroyblack';
        text-transform: uppercase;
        text-shadow: 4px 4px 7px rgba(0, 0, 0, 0.24);
        padding: 2.6rem 0 1rem 0;
    }

    .pro-logoo img {
        height: 40px;
    }

    .containerr {
        width: 100%;
        max-width: 1660px;
        margin: 0 auto;
        padding: 0 25px;
    }

    .pro-web-img img {
        width: 100%; 
        height: auto;
    }

@media screen and (max-width: 768px) {
        .clsBuldd h1 {
            font-size: 30px; 
            padding: 1rem 0;
        }

        .pro-logoo img {
            height: 50px; 
        }
    }

.offer-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-top: 50px; /* Adjust the margin as needed */
    }
.offer-heading {
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .offer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 20px 0;
    }

    .offers {
      width: 23%;
      margin-bottom: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid #ddd;
      padding: 15px;
      text-align: center;
    }

    .offers img {
      max-width: 100%;
      height: auto;
      margin-bottom: 10px;
    }

    .offers h4 {
      color: #000000; 
    }

/* #highlightGrid {
    display: grid;
    grid-template-columns: repeat(2, auto);
	gap: 1em;
}
 */

#highlightGrid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
	row-gap: 20px;
}

.highlightBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
/*   padding: 3em;
    margin: 0 1em; */
}

.highlightBox img {
    width: 100%; 
    max-width: 100%; 
    margin-bottom: 10px;
}

.page-id-2797 .joinchat__button {
    display: none !important;
}

.page-id-2797 li.nav-item.clsQuotes {
    display: none !important;
}

/* .page-id-2797 .clsTestmonial {
    display: block !important;
} */


.page-id-2797 .product-section {
    display: block !important;
}

.page-id-2797 .contact-product-section {
    display: block !important;
    margin-top: 25px !important;
}

/* section.clsTestmonial.contact-product-section {
    margin: 20px 0px;
} */

.page-id-2797 .clsTestmonial.product-section {
    margin: 20px 0px;
    background: white;
}

.page-id-2797 .product-section span.material-symbols-outlined {
    color: #fff;
    font-size: 14px !important;
}

.page-id-2797  .product-section .carousel-control-prev{
    background: black !important;
    border-radius: 50px;
}

.page-id-2797  .product-section .carousel-control-next{
    background: black !important;
    border-radius: 50px;
    background: black;
}

.page-id-2797 .arabic-form-ul{
    list-style-type: none !important;
	margin-top: 30px;
}

.page-id-2797 ul.arabic-form-ul img {
    margin-left: 15px !important;
    width: 50px;
}

.page-id-2797 ul.arabic-form-ul li {
    color: white !important;
    font-size: 18px;
    display: flex;
    align-items: unset;
}


.page-id-2797 ul.arabic-form-ul-arabic {
    display: none !important;
}

.page-id-2797 select.form-control:not([size]):not([multiple]){
	background: whitesmoke !important;
    outline: none !important;
    border: none !important;
}

.page-id-2797 .form-group{
	margin-bottom: 0px !important;
}

.page-id-2797 .form-group p {
    margin: 0px !important;
}

.page-id-2797 .form-group label {
    margin: 0px !important;
}

.project-images {
    display: flex;
    background: #fdfdfd;
    width: 100%;
    justify-content: space-around;
    padding: 20px 0px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 20px;
	max-width: 730px;
}

/* .project-innerimg {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
} */

.clsTestmonial .curved-box {
    height: 200px !important;
    border-radius: 10% !important;
}

.row.text-center.project-row {
    justify-content: center !important;
}
.page-id-2797 .col-lg-12.clscontactbreadcrumb span {
    display: none !important;
}

@media (min-width:220px) and (max-width:560px){
	
	.page-id-2797 section.banner-mainImg Img {
    	width: 90% !important;
    	margin-top: 50px;
    	margin-right: -30px;
	}
	
	.page-id-2797 .carousel-control-next,
    .carousel-control-prev {
/*      top: 30% !important; */
}
	
	.page-id-2797 ul.arabic-form-ul img{
		width: 30px !important;
	}
	
	.page-id-2797 ul.arabic-form-ul li{
		font-size: 14px !important;
	}
	.page-id-2797 .clshead-phone{
		margin-left: 5px;
		padding-right: 0px !important;
	}
	.page-id-2797 .clshead-phone img {
    width: 100px !important;
	}
	
	.page-id-2797 .clsContactbook h3{
		font-size: 16px !important;
	}
}

@media screen and (max-width: 560px){
	.page-id-2797 .clsContactbook h3{
		font-size: 14px !important; 
	}
	
	section.clsReachus.reachUs-mobile {
		display: block !important;
	}
	.page-id-2797 .clsTestmonial{
		padding: 1rem 0rem !important;
	}
	.page-id-2797 .clsTestmonial.product-section{
		margin: 0px 0px !important; 
		display: none !important; 
	}
	.container.heading-wrapper.swap-heading{
		display: none !important;
	}
	.col-lg-5.col-md-5.wow.fadeInLeft.swap-location{
		display: none !important;
	}
	section.clsTestmonial.product-section.modile-products {
    	display: block !important;
	}
}

@media (min-width: 560px){
	section.clsTestmonial.product-section.modile-products{
	display: none !important; 
}
	.container.heading-wrapper.modile-products-heading {
    display: none;
}
}
@media screen and (max-width: 320px){
	.page-id-2797 .clsContactbook h3{
		font-size: 14px !important; 
	}
}


section.clsReachus.reachUs-mobile {
		display: none;
}

@media (min-width: 220px) and (max-width: 376px){
	.project-images2 {
    display: flex;
    background: #fdfdfd;
    width: 61.2%;
    justify-content: normal;
    padding: 10px;
    border-radius: 20px;
    max-width: 730px;
    overflow: scroll;
    gap: 10px;
	}	
}

@media (min-width: 377px) and (max-width: 415px){
	.project-images2 {
    display: flex !important;
    background: #fdfdfd;
    width: 55.3% !important;
    justify-content: normal;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 20px;
    max-width: 730px;
    overflow: scroll;
    gap: 10px;
	}	
}

@media (min-width: 765px) and (max-width: 850px){
	.project-images {
    width: 85% !important;
    padding: 20px;
}
}

@media (min-width: 416px) and (max-width: 545px){
	.project-images2 {
    display: flex !important;
    background: #fdfdfd;
    width: 53% !important;
    justify-content: normal;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 20px;
    max-width: 730px;
    overflow: scroll;
    gap: 10px;
	}
}

.page-id-2797 .clsOurSupport {
		display: none !important;
}

.page-id-2797 .clsReachus {
    padding: 4.5rem 0 !important;
}

.page-id-2797 .footerletstalk h3 {
    display: none;
}

.page-id-2797  section.banner-mainImg {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0px;
}
.page-id-2797 .clsContactbook h2{
    font-size: 2.5rem;
    color: white !important;
}

.page-id-2797 section.banner-mainImg Img {
    width: 55%;
}
.translatepress-ar .right-content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    direction: rtl;
    text-align: end;
}
.translatepress-ar h1.left-align {
   
    text-align: end;
}
.translatepress-ar .tab-bar {
    text-align: end;
    direction: rtl;
}

/* Custom css by kashif */
.products-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-top: 50px; /* Adjust the margin as needed */
      
    }

.products-heading {
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 20px;
    }


    .products {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 20px 0;
    }

    .product {
      width: calc(25% - 40px);
      /*margin-bottom: 20px;*/
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      /*border: 1px solid #ddd;*/
      padding: 15px;
      margin:10px;
      border-radius:10px;
      text-align: center;
    }

    .product img {
      max-width: 100%;
      height: auto;
      margin-bottom: 10px;
      border-radius:10px;
    }

    .product h4 {
      color: #000000;
    font-size: 1.2rem;
    margin-bottom: 0; 
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
      .product {
        width: 48%; /* Two items per row on smaller screens */
      }
    }

    @media (max-width: 480px) {
      .product {
        width: 100%; /* One item per row on even smaller screens */
      }
    }

/*Why choose us section*/
.why-choose-us-container {
    text-align: center;
    padding: 35px 10px;
    background-color: #1a1a1a;
  }

  .why-choose-us-heading {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #ffffff;
  }

  .features {
    display: flex;
    flex-direction: column; /* Adjusted for better responsiveness */
    align-items: center;
  }

  .feature {
    width: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    
  }

  .feature-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }

  .feature-heading {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ffffff;
  }

  @media (min-width: 600px) {
    /* Adjust styles for screens wider than 600px */
    .features {
      flex-direction: row; /* Display features in a row */
      justify-content: space-around;
    }

    .feature {
      width: 48%; /* Two columns with a small gap */
    }
  }


/* Business Type css*/
  
  .business-types-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }

  .business-type-row {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center;
   /* margin-bottom: 50px;*/
  }

  .business-type {
    width: calc(100% - 40px); /* Take up full width with 20px margin on each side */
   /* max-width: 300px;  Limit maximum width */
    height: auto; /* Let height adjust based on content */
    /*border: 2px solid #ddd; */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px; /* Adjusted margin for better spacing */
    text-align: center;
    /*padding: 2px; */
  }

  .business-type img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px 10px 0 0;
  }

  .business-types-container h1 {
    font-weight: bold;
    
  }
.business-type h4{
font-size: 1.2rem;
margin-bottom:10px
}


  @media (min-width: 600px) {
    /* Adjust styles for screens wider than 600px */
    .business-type {
      width: calc(50% - 40px); /* Two columns with margin on each side */
    }
  }

  @media (min-width: 900px) {
    /* Adjust styles for screens wider than 900px */
    .business-type {
      width: calc(25% - 40px); /* fourcolumns with margin on each side */
    }
  }

/*Book session css*/
.clsbooksession{
    max-width: 900px;
    margin: 3rem auto;
    text-align: center;
}
.clsbooksession a{
    border-radius: 12px;
    background-color: #011b28;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #ffffff;
    font-weight: 700;
    max-width: 400px;
    margin: 0 auto;
}
.clsbooksession a span img{
    height: 34px;
    display: block;
    padding-right: 12px;
}
.clsbooksession a:hover{
    text-decoration: none;
    background-color: #1a1a1a;
}
.clsbooksession h4{
    font-size: 34px;
    color: #000000;
    font-weight: 700;
    padding: 1.6rem 0 0 0;
}
.clsbooksession p{
    font-size: 23px;
    line-height: 40px;
    color: #000000;
    font-weight: 300;
	margin-bottom:0;
}
.more-details {
    text-align: center;
    margin: 20px 0; /* Adjust the margin as needed */
  }



/* Preloader css */
    /* Preloader styles */
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

 /*    .preloader-spinner {
        border: 8px solid #f3f3f3;
        border-top: 8px solid #4169e1;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    } */

.loader {
  font-size: 48px;
  display: inline-block;
  font-weight: bold;
  color: #263238;
  letter-spacing: 2px;
  position: relative;
  box-sizing: border-box;
}
.loader::after {
  content: 'CODEHIVE';
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  -webkit-text-stroke: 2px #263238;
  text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
 
  overflow: hidden;
  box-sizing: border-box;
  animation: animloader 4s linear infinite;
}

@keyframes animloader {
  0% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}
@media only screen and (max-width: 600px) {
    #preloader {
        align-items: center; /* Change alignment for smaller screens */
    }
    .loader {
        font-size: 3rem; /* Adjust font size for smaller screens */
    }
}