/*=======================================================================Template Name: BuildkonAuthor:  ThemeOriAuthor URI: http://themeori.comVersion: 1.0Description: This Template is created for web template   -------------------------------------------------------------------------- CSS Index* Default CSS* Top Bar CSS* Main Menu CSS* Responsive Menu CSS* Banner CSS* About CSS* Achievement CSS* Work CSS* Team CSS* Home Form CSS* Testimonial CSS* Blog CSS* Footer CSS* Footer Bottom CSS* Animate CSS* Scroll Top CSS* Preloader CSS* Page Header CSS* Pricing CSS* All Blog Page CSS* Contact CSS/* Google Fonts========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*==========================================================================Default CS========================================================================= */
body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    background: transparent;
    line-height: 30px;
    font-weight: 400;
    color: #4B4B4B;
}


#about-us-header {
    background-image: url(assets/img/About-Us-Banner.jpg);
}


#service-header{
    background-image: url(assets/img/Service-Banner-1.jpg);
    
}


#contact-header{
    background-image: url(assets/img/Contact-Us-Banner-1.jpg);
   
}


#gallery-header{
    background-image: url(assets/img/Gallery-Banner.jpg);
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media (min-width: 1200px) {
    .container-head {
        max-width: 1250px;
    }
}

a {
    text-decoration: none;
    border: none;
    outline: 0;
    color: #0071bc;
    font-family: "Poppins", sans-serif;
}

a:hover,
a:focus,
a:active,
button:focus {
    text-decoration: none;
    border: none;
    outline: 0;
    color: #fff;
}

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

p {
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 85px;
    color: #051235;
    line-height: 95px;
    font-weight: 800;
}

h2 {
    font-size: 48px;
    line-height: 58px;
    color: #051235;
    font-weight: 700;
}

h3 {
    font-size: 24px;
    line-height: 36px;
    color: #051235;
    font-weight: 700;
}

h4,
h5,
h6 {
    font-weight: 600;
    font-size: 20px;
    line-height: 34px;
}

input,
input:hover,
input:focus,
input[type=text],
input[type=email],
textarea,
textarea:hover,
textarea:focus,
button,
button:hover,
button:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0px;
    outline: none;
}

.section-padding {
    padding: 130px 0px;
}

.section-title>span {
    color: #0071bc;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    display: inline-block;
}

.section-title p {
    padding: 5px 0px;
    font-size: 20px;
}

.services-head h2 {
    color: white;
    margin-bottom: 20px;
}

.section-title h2 {
    color: black;
    margin-bottom: 20px;
}

.algin-center {
    text-align: center;
    max-width: 510px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.s-table {
    height: 100%;
    width: 100%;
    display: table;
}

.s-tablec {
    display: table-cell;
    vertical-align: middle;
}

.theme-btn,
.pri-btn,
.price-btn {
    display: inline-flex;
    align-items: center;
    display: inline-flex;
    /* Use inline-flex to keep it inline and use flexbox */
    align-items: center;
    /* Align items vertically in the center */
    text-decoration: none;
    /* Remove underline */
    background: #0071bc;
    color: #fff;
    font-size: 18px;
    line-height: 28px;
    padding: 14px 31px;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    z-index: 3;
    width: max-content;
    position: relative;
}

#nav-button {
    text-align: center;
    font-size: 18px;
    max-width: max-content;
   padding: 2px 0px;
    display: inline-flex;
    font-weight: 400;
    justify-content: center;
}

#nav-button img{
    margin: 0px;
    width: 10%;
    height: inherit;
}

/* .nav-btn{
    w
} */

.theme-btn::before,
.price-btn::before,
.all-btn::before {
    background: #051235;
    content: "";
    position: absolute;
    right: auto;
    left: 0;
    width: 0;
    height: 100%;
    top: 0;
    bottom: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.theme-btn:hover::before {
    right: 0;
    left: auto;
    width: 100%;
}

.theme-btn img {
    margin-left: 1vw;
    height: 3vh;
    width: inherit;
}

.pricing-item:hover .price-btn::before {
    right: 0;
    left: auto;
    width: 100%;
}

.all-btn,
.all-btn:hover {
    color: #051235;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.all-btn {
    color: #fff;
}

.all-btn::before {
    background: #fff;
    color: #000;
}

.price-btn {
    background: #051235;
}

.box,
.price-btn::before {
    background: #0071bc;
}

/*========================================================================== Top Bar ========================================================================== */
.top-bar {
    background: #051235;
    padding: 10px 0px;
}

.top-left li {
    display: inline-block;
    margin-right: 25px;
}

.top-left li a {
    color: #fff;
    font-weight: 600;
    line-height: 28px;
}

.top-left li i:before {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 3px;
    margin-right: 5px;
}

.top-left li:last-child {
    margin: 0;
}

.top-right {
    text-align: right;
}

.top-right li {
    display: inline-block;
    margin-right: 15px;
}

.top-right li:last-child {
    margin: 0;
}

.top-right li a {
    color: #fff;
    font-size: 15px;
}

/*==========================================================================Main Menu========================================================================== */
.header-menu {
    background: #fff;
    position: relative;
}

.header-menu.sticky-menu {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
    animation: header_sticky 1.1s;
}

@-webkit-keyframes header_sticky {
    0% {
        top: -250px;
    }

    100% {
        top: 0;
    }
}

@keyframes header_sticky {
    0% {
        top: -250px;
    }

    100% {
        top: 0;
    }
}

.logo a {
    display: inline-block;
}

.logo a img {
    max-width: 180px;
}

.main-menu ul {
    text-align: center;
}

.main-menu li {
    display: inline-block;
    position: relative;
}

.main-menu li a {
    color: #051235;
    display: block;
     font-size: 15px;
    line-height: 28px;
    font-weight: 700;
    padding: 30px 25px;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.main-menu li a:hover,
ul#mobilemenu li.active>a {
    color: #0071bc;
}

.main-menu li:last-child a {
    padding-right: 0px;
}

.main-menu li ul {
    font-size: 20px;
    background: #fff;
    border-top: 2px solid #0071bc;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    text-align: left;
    top: 125px;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 230px;
    z-index: -1;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
}

.main-menu li ul li a {
    color: #051235;
}

.main-menu li li {
    display: block;
}

.main-menu li li a {
    padding: 0px;
    padding-bottom: 15px;
    margin: 15px 25px;
    text-transform: none;
    border-bottom: 1px solid #eee;
    color: #051235;
}

.main-menu li li:last-child a {
    border: none;
}

.main-menu li li:hover>a {
    color: #0071bc;
    margin-left: 28px;
}

.main-menu ul li a {
    color: #051235;
}

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

.main-menu li ul ul,
.main-menu li:hover ul ul {
    left: 230px;
    top: 78px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden;
    border: none;
}

.main-menu li:hover ul li:hover ul {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    top: 0;
    border-top: 3px solid #0071bc;
}

.main-menu li:hover ul>li:hover ul {
    top: -17px;
}

.main-menu li:hover ul li:hover ul li a {
    border-bottom: 1px solid #eee;
}

.main-menu li:hover ul li:hover ul li:last-child a {
    border: none;
    padding: 0;
}

.main-menu li ul>li:last-child>a {
    padding-bottom: 0;
}

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

#mobile-menu {
    display: none;
}

/*==========================================================================Responsive Menu Css========================================================================== */
.responsive-menu {
    position: absolute;
    top: -13px;
    right: 0;
    width: 100%;
}

.mean-container a.meanmenu-reveal span {
    background: #051235;
    margin-top: 6px;
}

.mean-container a.meanmenu-reveal {
    color: #051235;
    margin-right: 3px;
    width: 35px;
    height: 31px;
}

.mean-container .mean-bar {
    background: transparent;
    padding: 0;
}

.mean-container .mean-nav {
    background: #FAFAFB;
    margin-top: 75px;
}

.mean-container .mean-nav li:first-child>a {
    border: none;
}

.mean-container .mean-nav ul li a,
.mean-container .mean-nav ul li li a,
.mean-container .mean-nav li li:first-child>a {
    color: #051235;
    font-size: 16px;
    font-weight: 700;
    border-top: 1px solid #E7E7E7;
    opacity: 1;
}

.mean-container .mean-nav ul li a.mean-expand {
    background: #0071bc;
    height: 37px;
    color: #fff;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: #0071bc;
}

.mean-bar a i {
    font-size: 30px;
    padding-top: 2px;
    display: block;
}

/*==========================================================================Banner ========================================================================== */
.banner {
    background-color: #051235;
    background-image: url('assets/img/Banner.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    /* overflow: hidden; */
    
}

.banner-content {
    text-align: center;
    padding: 185px 0px;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.banner-content h1 {
    color: #fff;
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 5rem;
}

#blinking {
    display: inline-block;
    animation: blinking 1s infinite;
    transition: transform 0.2s;
    animation: growing 1s infinite alternate;
}

@keyframes growing {
    0% {
        transform: scale(1);
        /* Normal size */
    }

    100% {
        transform: scale(1.2);
        /* 20% bigger */
    }
}

.banner-content h2 {
    font-size: 34px;
    font-weight: 300;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 35px;
}

.banner-content span {
    font-size: 20px;
    line-height: 30px;
    color: #0071bc;
    font-weight: 600;
}

.banner-right {
    position: absolute;
    background: url("assets/img/banner-right.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    height: 100%;
    width: 50%;
    right: 0px;
    top: 50px;
}

/*==========================================================================About ========================================================================== */
.about-image1 img {
    text-align: left;
    width: 100%;
}

.about-btn {
    margin-top: 35px;
    margin-bottom: 22px;
}

.about-left {
    margin-left: 35px;
    margin-top: 35px;
    margin-bottom: 52px;
}

.about-image1 {
    position: relative;
    max-width: 480px;
    background: #f7f7f7;
    min-height: 500px;
    margin: 0 auto;
}

.img-2 {
    position: absolute;
    bottom: -52px;
    left: -52px;
    max-width: 225px;
    border: 10px solid #fff;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
}

.img-3 {
    position: absolute;
    left: -35px;
    top: -35px;
    max-width: 80px;
    z-index: -1;
}

/*==========================================================================Services Css========================================================================== */
.s-item{
    text-align: center;
    height: 200px;
}

.services {
    background-image: url(assets/img/Bg.jpg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

.service-item {
   
    background: #fff;
    padding: 60px 30px 55px 30px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.service-item:hover {
    border: 2px solid #ffffff;
    background-color: #0071bc;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.service-item i::before {
    font-size: 70px;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.service-item i {
    color: #0071bc;
    display: block;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.service-item h3 {
    color: #0071bc;
    text-transform: uppercase;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    
}

.service-item p {
   
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.service-item:hover i,
.service-item:hover h3,
.service-item:hover p {
    color: #fff;
}

/*==========================================================================Achievement Css========================================================================== */
.achievement {
    background-color: #051235;
    background-image: url(assets/img/about-BG.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.achievement-left {
    max-width: 430px;
}

.achievement-left h2{
    color: #0071bc;
}
.achievement-left p {
    color: #000000;
}

.achievement-left p {
    margin-top: 20px;
    margin-bottom: 35px;
}

.achievement-item {
    width: max-content;
    padding: 30px 25px 23px 25px;
    background: #FFF;
    border-radius: 4px;
}

.achievement-item li i {
    display: block;
}

.achievement-item li i::before {
    color: #0071bc;
    font-size: 60px;
}

.achievement-item li {
    margin-right: 15px;
}

.achievement-item li:last-child {
    margin: 0;
}

.counter {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: #051235;
    margin-bottom: 5px;
    display: block;
}

.counter-title {
    font-size: 17px;
    font-family: 'Work Sans', sans-serif;
}

.achievement-item p{
    font-size: 15px;
    font-family: 'Work Sans', sans-serif;
}

/*==========================================================================Work Css========================================================================== */
.work-item {
    position: relative;
}

.work-overly {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    position: absolute;
    left: 30px;
    bottom: 0px;
    background: #0071bca8;
    right: 30px;
    padding: 20px 25px;
    border-radius: 3px;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.work-overly h3 a,
.work-overly p {
    color: #fff;
}

.work-overly .overlay-plus a {
    display: block;
    position: absolute;
    background: black;
    top: 50%;
    right: 25px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.work-overly .overlay-plus a i::before {
    background: #fff;
    height: 35px;
    width: 35px;
    color: #0071bc;
    display: block;
    line-height: 35px;
    text-align: center;
    border-radius: 2px;
}

.work-item:hover .work-overly {
    opacity: 1;
    bottom: 30px;
}

.work-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.work-item img {
    transform: scale(1);
    transition: 0.3s ease-in-out;
}

.work-item:hover img {
    transform: scale(1.1);
}

.work-details-item {
    border-top: 1px solid #eaeaea;
}

.work-details-content,
.work-details-help {
    background: #FAFAFB;
}

.work-details-content ul li {
    margin-bottom: 15px;
}

.work-details-content ul li:last-child {
    margin-bottom: 0;
}

.work-details-content li i {
    color: #0071bc;
    font-size: 14px;
    margin-right: 7px;
}

.work-details-content li span {
    color: #051235;
    font-weight: 600;
    margin-right: 10px;
}

.work-details-content li a {
    color: #4B4B4B;
}

.work-details-help li i {
    font-size: 40px;
    color: #0071bc;
    margin-right: 15px;
}

.work-details-help li p {
    color: #4B4B4B;
}

.work-details-help li p {
    color: #4B4B4B;
    line-height: 26px;
}

.work-details-help li h5 {
    color: #051235;
    font-size: 18px;
    font-weight: 500;
}

/*==========================================================================Team  Css========================================================================== */
.team {
    background-color: #FAFAFB;
    background-image: url(assets/img/team.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
}

.team-content {
    background: #fff;
    padding: 20px 15px 30px 15px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.team-member:hover .team-content {
    background: #0071bc;
}

.team-content li a i {
    color: #051235;
    background: #FAFAFB;
    display: block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 14px;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.team-content li {
    display: inline-block;
    margin-right: 10px;
}

.team-content li:last-child {
    margin: 0;
}

.team-content h3 {
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    font-size: 20px;
}

.team-content p {
    margin-bottom: 13px;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.team-member:hover .team-content p,
.team-member:hover .team-content h3 {
    color: #fff;
}

/*==========================================================================Quote Form ========================================================================== */
.home-form {
    background-color: #051235;
    background-image: url(assets/img/quote-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    position: relative;
}

.home-left-bg {
    position: absolute;
    background: url("assets/img/quote-left-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 45%;
    left: 0px;
    top: 0px;
    bottom: 0px;
}

.quote-title {
    margin-bottom: 40px;
}

.quote-title h2 {
    color: #fff;
}

.quote-from .form-control {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    background: #1e2a4a;
    border: 0px;
    height: 57px;
    border-radius: 0px;
    padding: 15px 20px;
}

.form-control:focus {
    color: #fff;
    background: #1e2a4a;
    border: 0;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.quote-from .form-group {
    margin-bottom: 30px;
}

.quote-from .form-row>.col,
.quote-from .form-row>[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

.quote-from .form-row {
    margin-right: -15px;
    margin-left: -15px;
}

/*==========================================================================Testimonial CSS========================================================================== */
.testimonial-item {
    background: #FAFAFB;
    padding: 35px 35px;
    position: relative;
}

.testimonial-item img {
    max-height: 85px;
    max-width: 85px;
    border-radius: 50%;
}

.testimonial-content {
    margin-top: 20px;
}

.testimonial-content p {
    margin-bottom: 10px;
}

.testimonial-content h3 {
    font-size: 20px;
}

.testimonial-content h4 {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #0071bc;
}

.testimonial-icon {
    position: absolute;
    right: 35px;
    top: 35px;
    display: inline-block;
    font-size: 60px;
    opacity: 0.1;
}

.pagination-area .dots span {
    display: inline-block;
    height: 19px;
    width: 19px;
    border: 1px solid #0071bc;
    background: 0 0;
    position: relative;
    opacity: 1
}

.pagination-area .dots span.swiper-pagination-bullet-active {
    border: 1px solid #0071bc;
    opacity: 1
}

.pagination-area .dots span.swiper-pagination-bullet-active::before {
    position: absolute;
    content: "";
    height: 9px;
    width: 9px;
    border-radius: 50%;
    top: 50%;
    left: 8px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #0071bc
}

.swiper-slide-active {
    border-bottom: 3px solid #0071bc;
    border-radius: 4px;
}

.swiper-slide-active .testimonial-icon {
    color: #0071bc;
}

/*==========================================================================Blog CSS========================================================================== */
.blog {
    background: #FAFAFB;
    background-image: url(assets/img/blog-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.blog-content {
    background: #fff;
    padding: 30px 30px;
}

.blog-content li {
    display: inline-block;
    margin-right: 15px;
}

.blog-content li:last-child {
    margin: 0;
}

.blog-content li i:before {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 3px;
    margin-right: 5px;
    color: #0071bc;
}

.blog-content h3 a,
.blog-content h3 a:hover {
    font-size: 20px;
    line-height: 30px;
    padding-top: 5px;
    color: #051235;
    display: block;
    padding-bottom: 10px;
}

.blog-content a {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    display: block;
    margin-top: 8px;
    color: #0071bc;
}

.blog-content a:hover {
    color: #0071bc;
}

.blog-content a i {
    margin-left: 5px;
    vertical-align: middle;
    margin-bottom: 1px;
    font-size: 14px;
}

.blog-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.blog-img img {
    transform: scale(1);
    transition: 0.3s ease-in-out;
}

.blog-img img:hover,
.blog-item:hover .blog-img img {
    transform: scale(1.1);
}
/*==========================================================================Clients CSS========================================================================== */

.carousel {
    width: 100%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    &:hover {
      .carousel__item {
        animation-play-state: paused !important;
      }
    }
    &__list {
      display: flex;
      width: 100%;
      min-width: calc(var(--width) * var(--quantity));
      position: relative;
    }
    &__item {
      width: var(--width);
      height: var(--height);
      position: absolute;
      left: 100%;
      text-align: center;
      font-size: 45px;
      animation: slide var(--duration) linear infinite;
      animation-delay: calc((var(--duration) / var(--quantity)) * (var(--position) - var(--quantity))) !important;
      object-fit: cover; /* Ensure the image fits within the specified dimensions */
      [reverse="true"] & {
        animation: slideReverse var(--duration) linear infinite;
      }
    }
  }
  
  @keyframes slide {
    from {
      left: 100%;
    }
    to {
      left: calc(var(--width) * -1);
    }
  }
  
  @keyframes slideReverse {
    from {
      left: calc(var(--width) * -1);
    }
    to {
      left: 100%;
    }
  }
  



/*==========================================================================Footer CSS========================================================================== */
#footer-padding {
    padding: 100px 0px;
}


.footer {
    padding-bottom: 0px;
    background: #051235;
    background-image: url(assets/img/footer-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.logo-footer img {
    max-width: 230px;
}

.widget .widget-title {
    font-size: 20px;
    line-height: 34px;
    color: #fff;
    margin-bottom: 2px;
    font-weight: 600;
    position: relative;
}

.widget .widget-title::before {
    position: absolute;
    content: '';
    height: 3px;
    width: 30px;
    bottom: -10px;
    left: 0;
}

.widget p {
    color: #fff;
}

.widget li a {
    color: #fff;
    transition: 0.3s;
}

.widget li a:hover {
    color: #0071bc;
    margin-left: 2px;
}

.widget li {
    margin-bottom: 10px;
    font-size: 16px;
}

.widget li:last-child {
    margin: 0;
}

.footer_menu {
    margin-left: 40px;
}

.footer_menu.two {
    margin-left: 20px;
}

.subscribe-from {
    position: relative;
    width: 100%;
    margin-top: 25px;
}

#subscribe {
    color: #ffffff;
}

.subscribe-from input[type="text"] {
    color: #000;
    display: block;
    height: 60px;
    padding-left: 20px;
    padding-right: 60px;
    position: relative;
    width: 100%;
    background: #fff;
    border: none;
}

.subscribe-from button {
    display: block;
    cursor: pointer;
    height: 60px;
    width: 100%;
    margin-top: 2vh;
    padding: 11px 0px;
    right: 0px;
    text-align: center;
    top: 0px;
    background: #0071bc;
    border: none;
    color: #fff;
    font-size: 20px;
}

.contact-icon-widget {
    margin-right: 15px;
}

.contact-icon-widget i:before {
    margin: 0;
    color: #0071bc;
    font-size: 20px;
    display: inline-block;
    padding: 0;
    vertical-align: middle;
}

.contact-icon-widget i {
    display: block;
}

.contact_list .contact-widget-item {
    margin-bottom: 15px;
}

.contact_list .contact-widget-item:last-child {
    margin: 0;
}

/*========================================================================== Footer Bottom CSS========================================================================== */
.footer-bottom {
    background: #051235;
    padding: 20px 0px;
}

.footer-copyright {
    text-align: center;
}

.footer-copyright p {
    font-size: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.footer-social li a {
    height: 30px;
    width: 30px;
    background: rgba(255, 255, 255, 0.1);
    color: #6C6C6C;
    display: block;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
}

.footer-social li a:hover {
    background: #0071bc;
    opacity: 1;
    color: #fff;
}

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

.footer-social li:last-child {
    margin: 0;
}

.footer-social {
    text-align: right;
}

.form-group {
    margin: 0;
}

/*==========================================================================Animate ========================================================================== */
.up-down-animate {
    -webkit-animation-name: up-down;
    animation-name: up-down;
    -moz-animation-name: up-down;
    -ms-animation-name: up-down;
    -o-animation-name: up-down;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -moz-animation-duration: 4s;
    -ms-animation-duration: 4s;
    -o-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes up-down {
    0% {
        transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
    }

    50% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
    }

    100% {
        transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
    }
}

/*==========================================================================Scroll Top CSS========================================================================== */
.scroll-top {
    background: #0071bc;
    bottom: 1%;
    color: #fff;
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    position: fixed;
    right: 1%;
    text-align: center;
    width: 40px;
    z-index: 9;
    cursor: pointer;
    display: none;
}

.scroll-up:hover {
    color: #fff;
}

.bottom-right-icon {
    position: fixed;
    bottom: 10vh;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.bottom-right-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Optional: Rounded corners */
}

.bottom-right-icon:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    /* Optional: Hover effect */
}

/*==========================================================================Preloader CSS========================================================================== */
.spinner {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 100px auto;
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {

    0%,
    100% {
        -webkit-transform: scale(0.0)
    }

    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {

    0%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

.theme-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #051235;
    z-index: 9999999999;
}

.theme-loader .spinner {
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
}

/*==========================================================================Page Header CSS========================================================================== */
.page-header {
    background: #051235;
    padding: 150px 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.page-header-content h2 {
    text-align: center;
    z-index: 5;
    color: #fff;
}

.page-header-content ul {
    margin-top: 20px;
    margin-left: 3px;
}

.page-header-content li,
.page-header-content li a {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.page-header-content li:last-child {
    color: #0071bc;
}

.page-header-content li:last-child::before {
    content: "/";
    padding-right: 15px;
    padding-left: 10px;
    display: inline-block;
    color: #fff;
}

.main-content {
    padding: 130px 0px;
}

/*==========================================================================Pricing CSS==========================================================================*/
.pricing-item {
    background: #fff;
    text-align: center;
    border: 1px solid #ececec;
}

.pricing-item:hover {
    box-shadow: 0px 20px 60px rgba(42, 61, 126, 0.08);
    border: 1px solid #f4f4f4;
}

.pricing-item:hover .pricing-header {
    background: #0071bc;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.box .pricing-header {
    background: #0071bc;
}

.box {
    border: 1px solid #fff;
}

.pricing-header {
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    padding: 30px 40px;
}

.box {
    box-shadow: 0px 20px 60px rgba(42, 61, 126, 0.08);
}

.box i {
    color: #fff;
}

.pricing-header i {
    font-size: 50px;
    color: #051235;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.pricing-price h4 {
    font-size: 28px;
    line-height: 38px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: 400;
    color: #051235;
}

.pricing-price h3 {
    font-size: 25px;
    line-height: 35px;
    font-weight: 400;
    color: #051235;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.pricing-price h3 span {
    font-size: 16px;
    line-height: 26px;
    color: #0071bc;
    font-weight: 400;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.pricing-content {
    padding: 45px;
    padding-top: 0;
}

.pricing-content ul li {
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;
}

.pricing-content ul li:last-child {
    padding-top: 10px;
    border-bottom: none;
}

.pricing-item:hover .pricing-price h4 {
    color: #fff;
}

.pricing-item:hover .pricing-price h3 {
    color: #fff;
}

.pricing-item:hover .pricing-header i {
    color: #fff;
}

.pricing-item:hover .pricing-price h3 span {
    color: #fff;
}

/*==========================================================================All Blog Page CSS========================================================================== */
.theme-btn.blog-btn {
    display: inline-block;
    margin-top: 25px;
    transition: color 1s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.blog-main-content h2 a,
.blog-main-content h2 a:hover {
    color: #051235;
    font-size: 28px;
    line-height: 38px;
    padding-bottom: 15px;
    display: block;
}

.blog-main-content {
    padding: 40px 40px;
    background: #FAFAFB;
}

.blog-main-content li {
    margin-right: 25px;
    padding-bottom: 5px;
}

.blog-main-item {
    margin-bottom: 50px;
}

.blog-pagination li {
    display: inline-block;
    margin-right: 15px;
}

.blog-pagination li a {
    color: #051235;
    background: #f3f3f3;
    display: block;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    font-weight: 600;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.blog-pagination li:last-child {
    margin: 0;
}

.blog-pagination li .active,
.blog-pagination li a:hover {
    background: #0071bc;
    color: #fff;
}

.widget-list {
    padding: 30px;
    background: #FAFAFB;
    margin-bottom: 30px;
}

.widget-search {
    margin-bottom: 30px;
}

.widget-search-box input[type="text"] {
    color: #051235;
    display: block;
    height: 60px;
    font-size: 14px;
    background: #FAFAFB;
    outline: 0;
    padding-left: 20px;
    padding-right: 60px;
    position: relative;
    width: 100%;
    border: none;
}

.widget-search-box button {
    display: block;
    height: 60px;
    width: 60px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    background: #0071bc;
    border: none;
    color: #fff;
    border-radius: 3px;
    font-size: 20px;
    line-height: 60px;
}

.widget-search form.widget-search-box {
    position: relative;
    width: 100%;
}

.widget-title h2 {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 40px;
    font-weight: 600;
    position: relative;
}

.widget-title h2::before {
    position: absolute;
    content: '';
    height: 3px;
    width: 50px;
    bottom: -10px;
    left: 0;
    background: #0071bc;
}

.category-item ul li {
    margin-bottom: 10px;
    background: #fff;
    padding: 15px 30px;
}

.category-item li a {
    color: #051235;
    font-weight: 600;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.category-item li a:hover {
    color: #0071bc;
    margin-left: 3px;
}

.category-item li a i {
    float: right;
    font-size: 16px;
    color: #0071bc;
    position: relative;
    top: 2px;
}

.post-item ul li {
    position: relative;
    font-size: 14px;
    padding-left: 95px;
    margin-bottom: 23px;
    padding-bottom: 25px;
    border-bottom: 1px solid #C4C4C4;
    overflow: hidden;
}

.post-item ul li img {
    position: absolute;
    left: 0;
    top: 5px;
    width: 80px;
    height: 80px;
}

.post-item li h4 {
    font-size: 18px;
    line-height: 28px;
}

.post-item li a {
    color: #051235;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.post-item li a:hover {
    color: #0071bc;
}

.post-item ul li:last-child {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.post-item ul i {
    color: #0071bc;
    font-size: 14px;
    position: relative;
    top: 2px;
    margin-right: 7px;
}

.post-item ul span {
    color: #4B4B4B;
    font-size: 14px;
}

.blog-single .blog-tags ul li,
.blog-tags ul li {
    display: inline-block;
}

.blog-tags li a {
    display: inline-block;
    background: #fff;
    padding: 0px 15px;
    float: right;
    margin-right: 15px;
    color: #051235;
    font-weight: 500;
    padding-top: 7px;
    padding-bottom: 10px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.blog-tags li a:hover,
.blog-single .blog-tags li a:hover {
    background: #0071bc;
    color: #fff;
}

.gallery ul li img {
    width: 100%;
    border-radius: 6px;
}

.gallery ul li {
    max-width: 46%;
    margin-bottom: 24px;
    margin-right: 24px;
}

.gallery ul li:nth-child(2) {
    margin-bottom: 15px;
    margin-right: 0;
}

.gallery ul li:nth-child(4) {
    margin-bottom: 0;
    margin-right: 0;
}

.widget-gallery ul {
    flex-wrap: wrap;
}

.blog-content h4 {
    font-weight: 400;
    position: relative;
    z-index: 2;
}

.blog-content h4 i {
    position: absolute;
    top: 0;
    left: 60px;
    font-size: 60px;
    color: #0071bc;
    z-index: -1;
    opacity: 0.25;
}

.video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 50%;
    padding: 18px 20px 18px 28px;
}

.video-icon::before {
    position: absolute;
    content: '';
    width: 80px;
    height: 80px;
    display: block;
    top: 50%;
    left: 50%;
    z-index: 0;
    background: #0071bc;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: pulse-border 1500ms ease-out infinite;
}

.video-icon span {
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 26px solid #fff;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    display: block;
}

.video-icon::after {
    position: absolute;
    content: '';
    background: #0071bc;
    top: 50%;
    left: 50%;
    display: block;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: all 200ms;
}

@-webkit-keyframes pulse-border {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

@keyframes pulse-border {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

.blog-img {
    position: relative;
}

.blog-single .blog-tags li a {
    display: inline-block;
    background: #FAFAFB;
    padding: 0px 15px;
    float: right;
    margin-right: 15px;
    color: #051235;
    font-weight: 500;
    padding-top: 7px;
    padding-bottom: 10px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.blog-single .blog-tags ul li {
    display: inline-flex;
}

.blog-single h2 a,
.work-content h2 a,
.blog-single h2 a:hover,
.work-content h2 a:hover {
    color: #051235;
    font-size: 28px;
    line-height: 38px;
    padding-bottom: 15px;
    display: block;
    font-family: 'Work Sans', sans-serif;
}

.comt-user {
    float: left;
    margin-top: 8px;
}

.comt-detail {
    overflow: hidden;
    padding-left: 30px;
}

.comtuser-name p {
    margin: 0;
    font-size: 14px;
}

.comtuser-name {
    position: relative;
    overflow: hidden;
}

.comtuser-name a {
    position: absolute;
    top: 0;
    color: #0071bc;
    font-weight: 600;
    right: 0;
}

.comtuser-name h3 {
    font-size: 24px;
    font-weight: 600;
    color: #051235;
}

.comt-user img {
    width: 100%;
    border-radius: 20px;
}

.comment-count {
    border-top: 1px solid #ececec;
}

.comtuser-name a i {
    margin-right: 5px;
    color: #0071bc;
}

.comment-temp li:last-child {
    margin: 0;
}

.comment-item {
    background: #FAFAFB;
    padding: 30px;
}

/*==========================================================================Contact CSS========================================================================== */
.contact-item {
    background: #FAFAFB;
    padding: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.contact-item:hover {
    background-color: #0071bc;
    background-image: url(assets/img/con-bg.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.contact-item li {
    margin-right: 18px;
}

.contact-item i::before {
    display: block;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    color: #0071bc;
    font-size: 50px;
}

.contact-item h3 {
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    line-height: 50px;
    font-weight: 600;
}

.contact-item p {
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.contact-item p:last-child {
    margin: 0;
}

.contact-item:hover i::before,
.contact-item:hover h3,
.contact-item:hover span,
.contact-item:hover p {
    color: #fff;
}

.follow-us ul li {
    display: inline-block;
    margin-right: 10px;
}

.follow-us li a i {
    color: #051235;
    background: #FAFAFB;
    display: block;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.follow-us li a i:hover {
    color: #fff;
    background: #0071bc;
}

.form-right {
    padding: 55px;
    background: #FAFAFB;
}

.form-title h3 {
    font-size: 30px;
    font-weight: 600;
}

.contact-map iframe {
    width: 100%;
    height: 550px;
    margin-bottom: -10px;
}

.form-group {
    margin-bottom: 30px;
}

.form-group input {
    width: 100%;
    height: 60px;
    border: 1px solid #ebebeb;
    padding-left: 25px;
}

.form-group button {
    border: none;
}

.form-group textarea {
    border: 1px solid #ebebeb;
    padding: 20px;
    width: 100%;
    padding-left: 25px;
    resize: none;
    height: auto;
}

.form-group input:hover,
.form-group input:focus,
.form-group textarea:hover {
    outline: none;
}

input[type="text"]:focus,
textarea:focus,
input[type="email"]:focus {
    border-color: #ebebeb;
}

.faq-contact {
    max-width: 900px;
    margin: 0 auto;
}


/* our client carousel css starts */

.slider-wrapper {
    width: 90%;
    max-width: 1536px;
    margin-inline: auto;
    position: relative;
    height: 200px;
    margin-top: 5rem;
    overflow: hidden;
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0)
    );
  }
  
  @keyframes scrollLeft {
    to {
      left: -200px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -200px;
    }
  }
  
  .item {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 6px;
    position: absolute;
  }
  
  .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
  
  .left .item {
    left: max(calc(200px * 31), 100%);
    animation: scrollLeft 31s linear infinite;
  }
  
  .right .item {
    right: max(calc(200px * 31), 100%);
    animation: scrollRight 31s linear infinite;
  }
  
  .left .item1,
  .right .item1 {
    animation-delay: calc((-31s / 31) * 30);
  }
  .left .item2,
  .right .item2 {
    animation-delay: calc((-31s / 31) * 29);
  }
  .left .item3,
  .right .item3 {
    animation-delay: calc((-31s / 31) * 28);
  }
  .left .item4,
  .right .item4 {
    animation-delay: calc((-31s / 31) * 27);
  }
  .left .item5,
  .right .item5 {
    animation-delay: calc((-31s / 31) * 26);
  }
  .left .item6,
  .right .item6 {
    animation-delay: calc((-31s / 31) * 25);
  }
  .left .item7,
  .right .item7 {
    animation-delay: calc((-31s / 31) * 24);
  }
  .left .item8,
  .right .item8 {
    animation-delay: calc((-31s / 31) * 23);
  }
  .left .item9,
  .right .item9 {
    animation-delay: calc((-31s / 31) * 22);
  }
  .left .item10,
  .right .item10 {
    animation-delay: calc((-31s / 31) * 21);
  }
  .left .item11,
  .right .item11 {
    animation-delay: calc((-31s / 31) * 20);
  }
  .left .item12,
  .right .item12 {
    animation-delay: calc((-31s / 31) * 19);
  }
  .left .item13,
  .right .item13 {
    animation-delay: calc((-31s / 31) * 18);
  }
  .left .item14,
  .right .item14 {
    animation-delay: calc((-31s / 31) * 17);
  }
  .left .item15,
  .right .item15 {
    animation-delay: calc((-31s / 31) * 16);
  }
  .left .item16,
  .right .item16 {
    animation-delay: calc((-31s / 31) * 15);
  }
  .left .item17,
  .right .item17 {
    animation-delay: calc((-31s / 31) * 14);
  }
  .left .item18,
  .right .item18 {
    animation-delay: calc((-31s / 31) * 13);
  }
  .left .item19,
  .right .item19 {
    animation-delay: calc((-31s / 31) * 12);
  }
  .left .item20,
  .right .item20 {
    animation-delay: calc((-31s / 31) * 11);
  }
  .left .item21,
  .right .item21 {
    animation-delay: calc((-31s / 31) * 10);
  }
  .left .item22,
  .right .item22 {
    animation-delay: calc((-31s / 31) * 9);
  }
  .left .item23,
  .right .item23 {
    animation-delay: calc((-31s / 31) * 8);
  }
  .left .item24,
  .right .item24 {
    animation-delay: calc((-31s / 31) * 7);
  }
  .left .item25,
  .right .item25 {
    animation-delay: calc((-31s / 31) * 6);
  }
  .left .item26,
  .right .item26 {
    animation-delay: calc((-31s / 31) * 5);
  }
  .left .item27,
  .right .item27 {
    animation-delay: calc((-31s / 31) * 4);
  }
  .left .item28,
  .right .item28 {
    animation-delay: calc((-31s / 31) * 3);
  }
  .left .item29,
  .right .item29 {
    animation-delay: calc((-31s / 31) * 2);
  }
  .left .item30,
  .right .item30 {
    animation-delay: calc((-31s / 31) * 1);
  }
  .left .item31,
  .right .item31 {
    animation-delay: calc((-31s / 31) * 0);
  }

/* our client carousel css ends */


/* Card css starts */

/* Container to hold the cards */
.boxesContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 10px;
    height: max-content;
  }
  
  /* Box for each card to maintain aspect ratio and alignment */
  .cardBox {
    width: 250px;
    perspective: 1000px;
  }
  
  /* Styling for the card */
  .card {
    text-align: center;
    width: 100%;
    min-height: 300px; /* Ensures the card has a minimum height */
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 0.6s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Card faces */
  .card .front,
  .card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center;    /* Center content horizontally */
    padding: 20px;
  }
  
  /* Front face of the card */
  .card .front {
    background-color: #fff;
    color: #0071bc;
  }
  
  /* Back face of the card */
  .card .back {
    background-color: #0071bc;
    color: #fff;
    transform: rotateY(180deg);
    border: 2px solid #ffffff;
  }
  
  /* Flip effect on hover */
  .cardBox:hover .card {
    transform: rotateY(180deg);
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
.boxesContainer {
    width: 100vw;

}
    .cardBox {
      width: 80%;
    }
  }
  
  @media (max-width: 480px) {
    .cardBox {
      width: 100%;
    }
  }
  
  
/* card css ends */

.quality-card .row {
    display: flex;
    flex-wrap: wrap;
}

.quality-card .col-xl-4, 
.quality-card .col-md-6 {
    display: flex;
    align-items: stretch;
}

.quality-item {
    height: 90px;
    text-align: center;
    padding-top: 2vh;
    padding-bottom: 2vh;
    background-color: #fff;
    color: #0071bc;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quality-item h3, .quality-item h5 {
    text-align: center;
    background-color: #fff;
    color: #0071bc;
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quality-item h3:hover, .quality-item h5:hover {
    background-color: #0071bc;
    color: #fff;
   border: 2px solid #fff;
}

.quality-item:hover {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #fff;
    color: #0071bc;
}


.white-hr {
    border-top: 1px solid #989898;
}

.card-image{
    width: 50%;

    border-radius: calc(.25rem - 1px);
}

.border-item{
    border: 2px solid #0071bc;
}

.choose-us{ 
    background-image: url(assets/img/about-BG.jpg);
}
.custom-alert {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-width: 400px;
    width: 100%;
}