:root {
    --body-font: 'Inter', sans-serif;
    --heading-font: 'Inter', sans-serif;
    --color-body: #151718;
    --color-border: #E2E5F1;
    --color-black: #151718;
    --color-white: #ffffff;
    --color-primariy: #F94D1C;
    --color-primariy-low: #FEEDE8;
    --color-form: #f7f7f9;
    --shadow-white: rgb(0 0 0 / 8%);
    --border-white: #f1f1f1;
    --box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06);
    --hbox-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.2), 0px 4px 13px -2px rgba(19, 16, 34, 0.12);
}


section.elementor-section.elementor-section-boxed>.elementor-container {
    max-width: 1320px;
}
ul {
    list-style: none;
}
.elementor-widget-container p > a {
    color:var(--color-primariy);
    font-weight: 600;
}
.elementor-widget-container p > a:hover {
    color:#27415B;
}
/* ==================================
===== SLIDER CSS ======
================================== */

.animated {
    transition: all 0.5s ease;
}

.slick-dots {
    position: absolute;
    bottom: 25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

.slick-arrow {
    width: 44px;
    height: 44px;
    cursor: pointer;
    top: calc(50% - 44px);
}

.slick-prev {
    z-index: 1;
}

.slick-arrow{
    border: none;
    background: var(--color-primariy);
    color: var(--color-white);
    font-size: 17px;
    height: 50px;
    width: 50px;
    line-height: 17px;
    border-radius: 30PX;
    transition: .4s;
    margin: 2px;
    right: 10px;
    top: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.slick-arrow:hover{
    background: var(--color-primariy-low);
    color: var(--color-primariy);
}



/* ====================================================== */
/* ============== SLIDER STYLE CSS ====================== */
/* ====================================================== */

.slider-item {
    position: relative;
    z-index: 9999;
}
.slider-area .slider-item {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
}
.slider-item:after {
    content: "";
    background-color: rgb(15 44 73 / 90%);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.content-row{
    align-items: center;
}
.slider-feature-img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}
.slider-feature-img img {
    margin-left: 31px;

}
.slider-content-box {
    z-index: 99;
}
.inner-slider .calfin-section-stitle {
    display: inline-block;
}
.inner-slider .calfin-t-title {
    font-size: 64px;
    margin-bottom: 10px;
    line-height: 82px;
    font-weight: 600;
    margin-bottom: 13px;
    color: var(--color-white);
}

.inner-slider .sty_des {
    color: #fff;
    padding: 0;
    margin-bottom: 40px;
}
.inner-slider {
    padding: 148px 0;
}
.calfin-slider-wrapper .slick-arrow.slick-next {
    position: absolute;
    right: 80px;
    top: 45%;
    bottom: 0;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    font-size: 30px;
}
.calfin-slider-wrapper .slick-arrow.slick-prev {
    position: absolute;
    left: 80px;
   	top: 45%;
    bottom: 0;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    font-size: 30px;
}

.calfin-slider-wrapper .slick-dots {
    bottom: 20px;
}
/*=========================================
=========== CALFIN SERVICE ===============
=========================================*/

.box-inner {
    padding: 30px;
    box-shadow: var(--box-shadow);
    transition: .4s;
    margin-bottom: 30px;
}
.box-inner:hover {
    box-shadow: var(--hbox-shadow);
}
.services-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 10px;
}
.box-inner:hover .services-title a{
    color: var(--color-primariy);
}
.service-icon {
    font-size: 30px;
    margin-bottom: 15px;
    height: 64px;
    width: 65px;
    background:var(--color-primariy-low) ;
    line-height: 64px;
    text-align: center;
    border-radius: 100%;
    color: var(--color-primariy);
    transition: .4s;
    display: inline-block;
}
.box-inner:hover .service-icon{
    color: var(--color-white);
    background: var(--color-primariy);
}
.services-txt {
    margin-bottom: 30px;
    line-height: 25px;
}

a.services-btn {
    height: 30px;
    width: 50px;
    border-radius: 30px;
    border: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-primariy);
    transition: .4s;
}
.box-inner:hover .services-btn{
    background: var(--color-primariy);
    color: var(--color-white);
}

/*===========================================
===========  SERVICE V2 STYEL =========
============================================*/
 .inner-box-two{
    display: flex;
    border: 1px solid #E2E5F1;
    box-shadow: none;
	 border-radius: 5px;
	 transition: .4s;
}
.service-two-wrapper .container {
    margin: 0;
}

.service-two-i {
    height: 50px;
    width: 50px;
    border-radius: 5px;
    margin-right: 15px;
    text-align: center;
  	background: var(--color-primariy-low);
	color: var(--color-primariy);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-inner:hover .service-two-i{
	background: var(--color-primariy);
	color: var(--color-white);
}
.service-des-v2{
    margin: 0;
} 

/*=========================================
=========== CALFIN SERVICE V3 ===============
=========================================*/
.box-inner-three {
    text-align: center;
    padding: 30px;
    margin-bottom: 30px;
}
.service-wrapper-three .service-icon {
    position: relative;
    font-size: 50px;
    margin-bottom: 30px;
    height: 148PX;
    width: 148PX;
    background:var(--color-white);
    line-height: 148px;
    text-align: center;
    color: var(--color-primariy);
    transition: .4s;
    display: inline-block;
    border-radius: 0;
    border: 1px solid #EFF2FC;
 
}
.service-wrapper-three .box-inner-three:hover .service-icon{
    color: var(--color-primariy);
    background: var(--color-primariy-low);
}
span.icon-attribute {
    position: absolute;
    font-size: 18px;
    background:var(--color-primariy);
    color: var(--color-white);
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 30px;
    top: -16px;
    right: -16px;
    transition: .4s;
}
.service-wrapper-three .services-title {
    margin-bottom: 13px;
    font-size: 24px;
    line-height: 31px;
    font-weight: 600;
}

/*===============================================
============== CALFIN SERVICE V4 ================
================================================*/

.service-four-inner-box {
    background: var(--color-white);
    padding: 30px;
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    border-radius: 5px;
}

.service-four-inner-box .service-four-image img {
     object-fit: cover;
     width: 100%;
	height:350px
}

.service-four-inner-item {
    background: var(--color-white);
    width: 90%;
    margin-top: -50px;
    z-index: 18;
    position: relative;
    border-radius: 0px 10px 0px 0px;
    padding-top: 50px;
}
.service-four-icon {
    height: 60px;
    width: 60px;
    font-size: 30px;
    border-radius: 100%;
    background: var(--color-primariy);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -32px;
    right: 50px;
}

h2.service-four-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}
.service-four-txt {
    margin-bottom: 15px;
}
a.service-four-btn {
    font-weight: 600;
    line-height: 25px;
}
.service-four-btn .service-v4-icon {
    color: red;
    margin-left: 5px;
}
/*====================================================
=========== IMAGE WITH VIDEO SERVICE ===============
===================================================*/

.video-image-items {
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
}
.video-image-items img {
    height: 520px ;
    width: 636px;
    object-fit: cover;
}
.expariance-box{
    position: absolute;
    top: 80px;
    right: -100px;
    display: inline-block;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    border-radius: 10px;
    width: 280px;
    padding: 25px;
    display: flex;
    align-items: center;
}
.expariance-box h2 {
    font-size: 55px;
    line-height: 66px;
    font-weight: 700;
    color: var(--color-primariy);
    margin: 0;
}
.expariance-box span {
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    padding-left: 15px;
}
.video-button-wrapper {
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--color-primariy);
    line-height: 100px;
    text-align: center;
    font-size: 38px;
    left: -50px;
    bottom: 100px;
    border-radius: 10px;
    transition: .4s;
}
.video-button-wrapper .video-btn {
    color: #fff;
}
.video-button-wrapper svg {
    height: 60px;
    width: 60px;
}

/*=============================================
============= PROJECT LIST STYLE  =============
==============================================*/
.project-list-box {
    position: relative;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    padding: 30px;
    transition: .4s;
    border-radius: 5px;
    margin-bottom: 30px;
}
.project-list-box:hover {
    box-shadow: var(--hbox-shadow);
}
.project-list-icon {
    position: absolute;
    right: 0;
    top: 27%;
    height: 60px;
    width: 70px;
    font-size: 30px;
    background: var(--color-primariy);
    color: var(--color-white);
    text-align: center;
    line-height: 59px;
    border-radius: 42px 0px 0px 40px;
    transition: .4s;
}
.project-list-icon svg {
    height: 30px;
    width: 30px;
}
.project-list-number {
    font-size: 32px;
    line-height: 41px;
    font-weight: 800;
    margin: 0;
    color: var(--color-primariy);
}

/*====================================================
============= TESTIMONIAL STYLE START  ==============
====================================================*/
.testimonial-item-content .share {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--color-primariy);
}

.testimonial-item-content .share i {
    padding: 0px 4px;
}
.testimonial-item-box {
    padding: 50px 45px;
    box-shadow: var(--box-shadow);
    position: relative;
    background: var(--color-white);
    border-radius: 5px;
    margin-bottom:30px;
    transition: .4s;
}
.testi-box{
    margin: 15px;
}
.testmonial-content {
    margin-bottom: 35px;
}
.testimonial-info {
    display: flex;
    align-items: center;
}
.testimonial-info .image-wrap {
    width: 70px;
    height: 70px;
    margin-right: 20px;
}
.testimonial-info .image-wrap img {
    width: 100%;
    border-radius: 100px;
}
.testimonial-information .testimonial-name {
    font-size: 24px;
    line-height: 31px;
    font-weight: 600;
    margin-bottom: 5px;
}
.testimonial-information .testimonial-designation{
    color: var(--color-primariy);
    display: inline-block;
}
span.testi-quit {
    font-size: 54px;
    height: 60px;
    width: 60px;
    color: var(--color-primariy);
    display: inline-block;
    text-align: center;
    line-height: 62px;
    position: absolute;
    right: 45px;
    bottom: 55px;
}

/* Testimonial Slider BUTTON STYLE */

.testimonial-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}


.testimonial-arrow-wrapper button:hover {
    color: var(--color-primariy);
    background: var(--color-primariy-low);
}
.testimonial-prev.slick-arrow {
    right: 70px;
}
/*=================================================
============= SLICK SLIDER DOTS STYEL  =============
===================================================*/

.slick-dots {
    position: absolute;
    bottom: -50px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    position: relative;
    padding: 0;
    cursor: pointer;
    display: inline-block;
    width: unset;
    height: unset;
    margin: 0 4px;
}
.slick-dots li button{
    width: 8px;
    height: 8px;
    display: inline-block;
    font-size: 0;
    line-height: unset;
    padding: unset;
    border: none;
    border-radius: 50px;
    box-shadow: var(--box-shadow);
    background: var(--color-primariy);
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;

}
.slick-dots li.slick-active button{
    width: 40px;
    opacity: 1;
}
/*=======================================
============= ABOUT IMAGE  =============
========================================*/
.about-image {
    position: relative;
}
.about-small-img {
    position: absolute;
    right: -80px;
    bottom: 30px;
    width: 280px;
    object-fit: cover;
}

.about-small-img img {
    width: 100%;
    height: 100%;
}


/* ==================================
===== TITLE SECTION STYLE ======
================================== */

.calfin-section-stitle {
    color: var(--color-primariy);
    font-size: 18px;
    text-transform: uppercase;
    line-height: 28px;
    letter-spacing: 5px;
    margin: 0;
    padding-bottom: 10px;
    font-weight: 400;
}


.calfin-t-title {
    font-size: 40px;
    margin-bottom: 20px;
    line-height: 52px;
    font-weight: 600;

}
.calfin-t-title .highlight-heading {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-weight: 400;
}

.calfin-t-title .highlight-heading::after {
    position: absolute;
    bottom: 18%;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    z-index: -1;
    background-color: var(--color-primariy);
	right: 0;
    margin: auto;
}


/* ==========================================
========= TITLE TWO SECTION STYLE ==========
=========================================== */
.calfin-title-two-wrapper .title-two-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tb-two.calfin-button {
    width: 55%;
    text-align: right;
}

/*==============================================
========== CALFIN IMAGE WITH EFFECT CSS ========
================================================*/
.calfin-image-wrapper .calfin-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-expariance-box {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--color-primariy);
    width: 170px;
    height: 170px;
    padding: 25px;
    text-align: center;
    border-radius: 100px;
}
.img-expariance-box h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 55px;
    color: var(--color-white);
    margin: 0;
}
.img-expariance-box span {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-white);
    display: inline-block;
}
.image-shape {
    background: var(--color-primariy);
    animation: morph 8s ease-in-out infinite;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    height: 70%;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    width: 86%;
    position: absolute;
    bottom: 42px;
    z-index: 0;
    left: -9px;
}

.image-shape2 {
    background: var(--color-primariy-low);
    animation: morph2 8s ease-in-out infinite;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    height: 97%;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    width: 76%;
    position: absolute;
    top: 13px;
    z-index: 0;
    left: 13px;
}

.calfin-image {
    position: relative;
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

@keyframes morph2 {
    0% {
        border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%;
    }
    50% {
        border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
    }
    100% {
        border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%;
    }
}

/* ==========================================
=============   OUT TEAM SECTION CSS========
=========================================== */

.team-items .team-content-wrap {
    margin-bottom: 30px;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    transition: all ease 0.4s;
    overflow: hidden;
    border-radius: 5px;
}
.team-items .team-content-wrap .team-top-content{
    position: relative;
}
.team-items .team-content-wrap .team-img img {
    width: 100%;
    height: 100%;
    background-size: cover;
}
.team-items .team-social {
    position: absolute;
    bottom: -30px;
    display: inline-block;
    margin: 0;
    right: 20px;
    padding-right: 0;
}
.team-items .team-social>li {
    position: relative;
    list-style-type: none;
    display: inline-block;
}
.team-items .team-social li ul li a ,
.team-items .team-social>li>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--color-primariy);
    color: var(--color-white);
    border-radius: 30px;
    transition: all ease 0.4s;
    font-size: 16px;
}
.team-items .team-social>li>a:hover {
    color: var(--color-white);
}
.team-items .team-social li ul {
    position: absolute;
    right: 0;
    bottom: -300%;
    opacity: 0;
    visibility: hidden;
    transition: all ease 0.8s;
    z-index: 9999;
    padding-right: 0;
}
.team-items:hover .team-social li ul {
    opacity: 1;
    visibility: visible;
    bottom: 60px;
    right: 0;
    z-index: 9999;
}
.team-items .team-social li {
    list-style-type: none;
    padding: 5px 0;
}

.team-social-icon svg,
.team-social svg {
    width: 30px;
    height: 30px;
}
.team-items .team-social li ul li a:hover {
    background-color: var(--color-white);
    color: var(--color-primariy);
}
.team-items .team-content-wrap .team-content {
    padding: 30px 30px;
    text-align: left;
}
.team-content .team-title {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 28px;
}
.team-content .team-designation {
   line-height: 26px;
    font-size: 16px;
    font-weight: 400;
}

/* ================================================
===============  OUR TEAM DETAILS CSS ===========
================================================== */

.team-title-wrapper .team-title {
    font-size: 24px;
    line-height: 31px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 10px;
}

.team-title-wrapper .team-designation {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: var(--color-primariy);
    margin-bottom: 15px;   
}

.team-sort-dec {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 10px;
    color: #6C7176;
}
.team-info-list-wrapper .info-label {
    color: #1D2150;
    min-width: 100px;
    font-weight: 600;
    line-height: 20px;
}
.team-social-area {
    margin-top: 20px;
}
.team-info-wrapper {
   
    padding-left: 100px;
}
.team-info-wrapper ul{
    padding: 0;
    margin: 0;
}
.team-info-list-wrapper ul li {
    padding: 10px 0;
    list-style: none;
    color: #6C7176;
}
.team-social-area ul li {
    display: inline-block;
    margin-right: 10px;
}

.team-social-area ul li a {
    width: 40px;
    height: 40px;
    color: var(--color-black);
    background:var(--color-primariy-low);
    border-radius: 30px;
    text-align: center;
    font-size: 14px;
    line-height: 40px;
    transition: .4s;
}
.team-social-area ul li a:hover{
    color: var(--color-white);
    background:var(--color-primariy);
}
.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ================================================
=============== CALFIN LATEST NEWS CSS ===========
================================================== */

.calfin-section-description {
    margin-bottom: 30px;
}
.post-grid-meta{
    padding: 0;
}
.blog-image{
    border-radius: 5px;
    min-height: 100px;
}
.blog-image img {
    width: 100%;
    height: 100%;

}
.blog-content-wrapper {
    margin: -100px 30px 30px;
}
.blog-content{
    position: relative;
    box-shadow: var(--box-shadow);

}
.blog-date {
    padding: 12px;
    text-align: center;
    background: var(--color-primariy);
}
.blog-date .posted-on a {
    color: #fff;
}

.blog-item {
    padding: 25px 30px;
    background: var(--color-white);
    text-align: center;
}
.blog-content .blog-item ul li {
    display: inline-block;
    font-size: 14px;
    margin-right: 15px;
    text-transform: capitalize;
    line-height: 28px;
}
.blog-content .blog-item ul li i {
    margin-right: 5px;
    color: #fa360a;
}
.blog-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}
.blog-btn {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.blog-section-items .slick-slider {
    margin-right: -420px;
}


/* ===========================================
============= BLOG TWO SECTION CSS ===========
============================================= */

.blog-two-item {
    position: relative;
}

.blog-two-content-wrp {
    position: relative;
    transition: all 4s;
    margin-bottom: 30px;
}
.blog-two-content-wrp img {
   	 min-height: 100px;
}
.item  .blog-items .blog-image img {
    object-fit: cover;
    border-radius: 5px;
    display: block;
    width: 100%;
	height:350px

}

.blog-two-content {
    position: absolute;
    background-color: var(--color-white);
    padding: 25px 30px;
    width: 84%;
    transition: all 0.4s;
    bottom: 5%;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 5px;
}
.blog-two-content:hover {
    background: var(--color-primariy);
    color: var(--color-white);
}

.blog-two-meta .post-grid-meta {
    margin-bottom: 8px;
}
.blog-two-meta .post-grid-meta li {
    display: inline;
    margin-right: 18px;
    font-size: 14px;
}
.blog-two-meta .post-grid-meta li:last-child {
    margin-right: 0;
}
.blog-two-meta .post-grid-meta li i {
    margin-right: 5px;
}

.blog-two-content:hover .blog-title a{
    color: var(--color-white);
}
.blog-two-content:hover .blog-two-meta .item-date .posted-on a{
    color: #fff;
}


/* ==========================================
========= PROJECT TWO SECTION CSS ===========
============================================ */
.project-two-wrapper .project-filter {
    text-align: center;
    margin-bottom: 50px;
}
.project-menu .project-filter li {
    display: inline;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
}
.project-menu ul li.active{
    color: var(--color-primariy);
}
.project-two-item{
    position: relative;
}
.project-two-content-wrp{
    position: relative;
    transition: all 4s;
    margin-bottom: 30px;
}
.project-two-wrapper .project-two-content-wrp img{
    height: 100%;
    width: 100%;
    object-fit: cover;
	border-radius: 10px;
}
.project-two-content {
    position: absolute;
    opacity: 0;
    bottom: 5%;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 5px;
    background-color: var(--color-white);
    padding: 25px 30px;
    width: 96%;
    transition: all 0.4s;
    box-shadow: var(--box-shadow);
}

.project-two-item .project-two-content-wrp:hover .project-two-content {
    opacity: 1;
    width: 86%;
    transition: all 0.4s;
}
.content_inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.project-cats ul {
    margin: 0;
    padding: 0;
}
.project-cats ul li {
    display: inline;
}
.project-cats ul li a {
    font-size: 16px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-right: 10px;
    color: var(--color-primariy);
    transition: all 0.4s;
}
.project-cats ul li a:hover{
    color: var(--color-black);
}
.project-title{
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
    margin: 0;;
}
.project-button .project-icon {
    display: inline-flex;
    height: 40px;
    width: 40px;
    font-size: 30px;
    background: var(--color-primariy);
    color: var(--color-white);
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    transition: all 0.4s;
}
.project-button .project-icon:hover {
    color: var(--color-primariy);
    background: var(--color-primariy-low);
}

/* =================================================
============ PROJECT DETAILS STYLE CSS =============
==================================================== */
.project-details-item {
    border: 2px solid #E2E5F1;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 5px;
}

.project-details-item .project-datails-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-details-content {
    padding: 50px;
    background:var(--color-primariy);
    margin-top: 30px;
    border-radius: 5px;
}


.project-meddile-item {
    border-right: 1px solid var(--border-white);
}

.project-name {
    font-size: 16px;
    line-height: 20px;
    color: var(--color-white);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 20px;
}
.project-d-title {
    font-size: 24px;
    line-height: 31px;
    font-weight: 600;
    margin: 0;
    color: var(--color-white);
}
/* ===========================================
============== ACCORDION STYLE CSS ===========
============================================= */

.faq-accordion .accordion-item {
    border: none;
    border-radius: 0;
    margin-bottom: 20px;
    border: 1px solid #D4D7E5;
    border-radius: 5px;
}

.faq-accordion .accordion-button {
    border: none;
    color: var(--color-black);
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    padding: 25px;
    background: transparent;
    text-align: left;
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.faq-accordion .accordion-body {
    padding: 0 50px 25px 20px;
    line-height: 25px;
}
.accordion-collapse {
    border: none;
}
.faq-accordion .accordion-button::after {
    position: absolute;
    right: 30px;
    background-image: none;
    content: "\F135";
    font-family: 'bootstrap-icons';
    padding: 0;
    font-size: 22px;
    width: auto;
    height: auto;
    color: var(--color-primariy);
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
    content: "\F124";
    color: var(--color-primariy);
}

/* =========================================
========= CALL US ADDONS CSS ================
========================================== */
.call-us-box {
    background: #0F2C49;
    padding: 30px;
    text-align: center;
}
.call-us-title{
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 20px;
    color: var(--color-white);
}
.call-icon {
    font-size: 36px;
    margin-bottom: 25px;
    height: 74PX;
    width: 74PX;
    color: #fff;
    background: var(--color-primariy);
    transition: .4s;
    display: inline-flex;
    border-radius: 100%;
    border: none;
    align-items: center;
    justify-content: center;
}
.call-icon i {
    border: 1px solid #ffff;
    padding: 17px;
    border-radius: 100%;
}
span.call-stitle {
    font-weight: 600;
    display: inline-block;
    line-height: 20px;
    margin-bottom: 15px;
    color: var(--color-white);
}
.call-us-number{
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin: 0; 
    color: var(--color-white);
}



/* ========================================
============ AUTHOR  STYLE CSS ===========
========================================== */
.author-info-item {
    padding: 50px 30px;
    background: #0F2C49;
    text-align: center;
}
.author-image {
    margin-bottom: 30px;
}
.author-info-item .author-image img {
    width: 210px;
    height: 210px;
    border-radius: 100%;
    object-fit: cover;
}
.author-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-white);
}
.author-number p {
   
    margin-bottom: 5px;
}
.author-number{
    margin-bottom: 20px;
    line-height: 25px;
    color: var(--color-white);
}
.author-social-icon ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.author-social-icon ul li {
    display: inline-block;
}
.author-social-icon ul li a {
    font-size: 18px;
    width: 35px;
    height: 35px;
   color: var(--color-white);
    background: var(--color-primariy);
    display: block;
    border-radius: 100%;
    text-align: center;
    padding: 4px 0;
    margin-right: 10px;
    transition: .4s;
}
.author-social-icon ul li a:hover{
    background: var(--color-white);
    color: var(--color-primariy);
}

/*************************************
******** SKILLBAR BOX CSS  **********
*************************************/

.calfin-skills-wrapper .skillbar-item {
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
}

.calfin-skills-wrapper .skillbar-item .skill-title {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 20px;
}

.calfin-skills-wrapper .skillbar-item .skillbar {
    height: 8px;
    background: var(--color-primariy-low);
    position: relative;
    text-align: right;
}

.calfin-skills-wrapper .skillbar-item .skillbar .skill-percent-count-wrap {
    position: absolute;
    right: 0;
    top: -37px;
    font-size: 16px;
    font-weight: 600;
}

.calfin-skills-wrapper .skillbar-item .skillbar .count-bar {
    background: var(--color-primariy);
    height: 100%;
    position: relative;
    text-align: right;
    position: relative;
    text-align: right;
    padding-right: 0;
    border-radius: 10px;
    overflow: visible !important;
    width: 0;
}


/*******************************************
******** ABOUT SECTION STYLE CSS  **********
********************************************/
.calfin-about-stitle {
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    color: var(--color-primariy);
    letter-spacing: 1.2px;
    margin-bottom: 8px; 
}
.calfin-about-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 52px;
    margin-bottom: 10px;
}
.calfin-about-us-dec {
    margin-bottom: 40px;
    line-height: 25px;
}


.calfin-about-us-dec ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.calfin-about-us-dec ul li {
    line-height: 20px;
    position: relative;
    padding-left: 35px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    display: inline-block;
    width: 50%;
}

.calfin-about-us-dec ul li:after {
    content: "\F26E";
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    color: var(--color-white);
    font-size: 20px;
    font-weight: 500;
    background: var(--color-primariy);
    border-radius: 30px;
}

/* ==========================================
========= BRAND LOGO SECTION CSS ===========
============================================ */

.calfin-brand-items .brand-logo-item img {
    margin: auto;
	max-width: 150px;
}
.calfin-brand-items {
    text-align: center;
    justify-content: center;
}



/* ==========================================
============= TABS SECTION CSS ==============
============================================ */
.tabs-section-wrapper{
    box-shadow: var(--box-shadow);
}
.tabs-section-wrapper .nav-tabs .nav-link{
    margin-bottom: 0px;
    border: none;
    border-radius: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--color-white);
    padding: 30px 35px;
    margin: auto;
}
.tabs-section-wrapper .nav-tabs .nav-link.active {
    background: var(--color-primariy-low);
    color: var(--color-black);
}
.tabs-section-wrapper .nav{
    justify-content: space-evenly;
    background: var(--color-primariy);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
.tab-custom-content ul {
    margin-top: 30px;
    padding: 0;
    list-style: none;
}

.tab-custom-content ul li {
    line-height: 20px;
    position: relative;
    padding-left: 35px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    display: inline-block;
    width: 50%;
}
.nav-tabs {
    border: none;
}
.tab-custom-content ul li:after {
    content: "\F26E";
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    color: var(--color-primariy);
    font-size: 20px;
    font-weight: 500;
    border-radius: 30px;
    border: 1px solid #F94D1C;
}
.alfin-tab-custom-content{
    padding: 30px;
}
.alfin-tab-custom-content.custom-image {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
}
.custom-image .tab-custom-image {
    width: 30%;
    margin-left: 50px;
}
.custom-image .tab-custom-image img{
    object-fit: cover;
}


.custom-image .tab-custom-content {
    width: 70%;
}











/* ==================================
========= VIDEO BUTTON CSS ===========
================================== */

.video-icons {
    color: var(--color-white);
    background: var(--color-yellow);
    box-shadow: inset 1px 1px 0px 2px white;
    border: 1px solid var(--color-yellow);
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    padding: 26px 30px;
    transition: all 0.4s ease;
    font-size: 30px;
}




.video-icons svg {
    height: 36px;
    width: 36px;
}


/*=================================
==== PROGRESSBAR SECTION CSS =====
=================================*/

.calfin-progress-box {
    text-align: center;
}

.calfin-progressbar-wrapper .calfin-circle-progress-item {
    position: relative;
    display: inline-block;
}

.calfin-progressbar-wrapper .calfin-circle-progress-item .calfin-count-numbers {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    text-align: center;
}

.calfin-progressbar-wrapper .calfin-circle-progress-item .calfin-count-numbers span {
    font-size: 30px;
    font-weight: bold;
    line-height: 106px;
    color: var(--color-black);
}

.calfin-progressbar-wrapper .calfin-progress-box {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 30px;
}

.calfin-progressbar-wrapper .calfin-progress-box .calfin-progress-title {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    margin-top: 15px;
    line-height: 30px;
}

.calfin-progressbar-wrapper .calfin-progress-box .calfin-progress-content p {
    margin-bottom: 0;
}


/*=========================================
======== calfin CONTACT FORM 7 CSS ========
===========================================*/

.calfin-input-area input[type="text"],
.calfin-input-area input[type="email"],
.calfin-input-area input[type="number"],
.calfin-input-area textarea {
    margin-bottom: 20px;
    border: 1px solid #ebebeb;
	background: var(--color-white);
}
.calfin-input-area input[type="text"]::placeholder,
.calfin-input-area input[type="email"]::placeholder,
.calfin-input-area input[type="number"]::placeholder,
.calfin-input-area textarea::placeholder {
	color:var(--color-black);
}

input.wpcf7-form-control.wpcf7-submit {
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    color: var(--color-white);
    transition: .4s;
	display: inline-block;
	width:100%;
	font-weight: 600;
}

input.wpcf7-form-control.wpcf7-submit:hover {
    background-color: var(--color-black);
}

.calfin-contact-from-two-wrapper .calfin-input-area textarea {
    height: 100%;
    width: 100%;
}
.calfin-contact-from-two-wrapper .calfin-input-area input[type="text"],
.calfin-contact-from-two-wrapper .calfin-input-area input[type="email"],
.calfin-contact-from-two-wrapper .calfin-input-area input[type="number"],
.calfin-contact-from-two-wrapper .calfin-input-area textarea {

    border: none;
	background: var(--color-white);
}
/*=================================
===== calfin CONTACT INFO CSS =====
=================================*/

.contact-small-title {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-yellow);
    text-transform: uppercase;
}

.calfin-contact-info {
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 25px rgb(0 0 0 / 11%);
}

.calfin-contact-info .contact-info-title {
    color: var(--color-black);
    font-size: 48px;
    line-height: 62px;
    margin: 0;
    margin-bottom: 50px;
    margin-top: 20px;
}

.calfin-cinfo {
    display: flex;
    margin-bottom: 45px;
}

.calfin-cinfo:last-child {
    margin-bottom: 0 !important;
}

.calfin-cinfo .calfin-cinfo-icon {
    width: 60px;
    height: 60px;
    background: var(--color-yellow);
    color: var(--color-white);
    text-align: center;
    border-radius: 100%;
    font-size: 30px;
    line-height: 42px;
    margin-right: 20px;
    padding: 10px;
    display: block;
}

.calfin-cinfo-dec .cinfo-title {
    font-size: 18px;
    color: var(--color-black);
    line-height: 28px;
    margin: 0;
    margin-bottom: 5px;
}

.calfin-cinfo-dec p {
    font-size: 16px;
    color: var(--color-black);
    margin: 0;
    line-height: 26px;
}

.calfin-cinfo-icon svg {
    height: 40px;
    width: 40px;
    margin-top: -14px;
}

.cinfo-contact {
    display: block;
}

/*=================================
=====   calfin PORTFOLIO STYLE FOUR CSS  =====
=================================*/

.calfin-portfolio-items.portfolio-style-four .calfin-portfolio-dec {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    margin: 0;
    vertical-align: bottom;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    border-radius: 0;
    background-color: #0e1e2a;
    opacity: 0;
    visibility: hidden;
}

.calfin-portfolio-items.portfolio-style-four .portfolio-hover {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 100px;
    width: 100%;
    top: 0;
    bottom: 0;
}

.portfolio-hover {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 100px;
    width: 100%;
    top: 0;
    bottom: 0;
}

.calfin-portfolio-items.portfolio-style-four .calfin-portfolio-dec h6 {
    margin: 6px 0px 15px 0;
}

a.portfolio-btn {
    font-size: 24px;
}

.calfin-portfolio-items.portfolio-style-four .calfin-portfolio-item:hover .calfin-portfolio-dec {
    opacity: 85%;
    visibility: visible;
}




/*=================================
====== calfin SUBSCRIBE CSS =======
=================================*/

.calfin-subscribe-innter .mc4wp-form-fields input[type=email] {
    border: 2px solid #88a6dd;
    border-radius: 5px;
}

.calfin-subscribe-innter .mc4wp-form-fields button {
    width: auto;
    height: auto;
    border-radius: 5px;
    padding: 10px 30px;
    margin: 6px;
    background-color: #ffffff;
    color: #091d3e;
    font-weight: 600;
}

.calfin-subscribe-innter .mc4wp-form-fields button:hover {
    background-color: #091d3e;
    color: #ffffff;
}



/*=========================================
====== calfin CONTACT INFO BOX CSS ========
=========================================*/

.calfin-contact-info-box {
    text-align: center;
}

.calfin-cinfo-box-icon i {
    font-size: 40px;
    color: #104cba;
    line-height: 32px;
    margin-bottom: 20px;
}

.calfin-cinfo-box-dec {
    font-size: 18px;
    line-height: 28px;
    padding: 0 30px;
    font-weight: 500;
    color: #8a8a8a;
}

.calfin-cinfo-box-dec a {
    display: block;
    color: #8a8a8a;
}

.calfin-cinfo-box-dec a:hover {
    color: #104cba;
}

.calfin-contact-info-box {
    position: relative;
}

.cinfo-line {
    position: absolute;
    right: -48px;
    width: 89px;
    height: 113px;
    clip-path: polygon(50% 0, 45% 100%, 55% 100%);
    background: #e9e9e9;
    top: 0;
}

.calfin-cinfo-box-dec p {
    margin: 0;
}


/*====================================
======== calfin DOT SHAPE CSS ========
====================================*/

.shapeanimation {
    position: absolute;
    top: 95px;
    left: 250px;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


/* custom animations */

@-webkit-keyframes shapeMover {
    0%,
    100% {
        -webkit-transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
        transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
    }
    50% {
        -webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
        transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
    }
}

@keyframes shapeMover {
    0%,
    100% {
        -webkit-transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
        transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
    }
    50% {
        -webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
        transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
    }
}

@keyframes shapeMover {
    0%,
    100% {
        transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
    }
    50% {
        transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
    }
}

@keyframes bubbleMover {
    0% {
        -webkit-transform: translateY(0px) translateX(0) rotate(0);
        transform: translateY(0px) translateX(0) rotate(0);
    }
    30% {
        -webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
        transform: translateY(30px) translateX(50px) rotate(15deg);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }
    50% {
        -webkit-transform: translateY(50px) translateX(100px) rotate(45deg);
        transform: translateY(50px) translateX(100px) rotate(45deg);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
    }
    80% {
        -webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
        transform: translateY(30px) translateX(50px) rotate(15deg);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    100% {
        -webkit-transform: translateY(0px) translateX(0) rotate(0);
        transform: translateY(0px) translateX(0) rotate(0);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }
}

.dot-shapes {
    position: absolute;
    width: 20em;
    height: 20em;
    z-index: 0;
    top: 0;
    background: #104cba;
}

.dot-shapes.shape_left_pos {
    left: -30em
}

.dot-shapes.shape_center_pos {
    left: 0;
    right: 0;
    margin: auto
}

.dot-shapes.shape_right_pos {
    right: -30em
}

.dot-shapes.shape_circle {
    border-radius: 50%
}

.dot-shapes.shape_egg {
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%
}

.dot-shapes.shape_organic_1 {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%
}

.dot-shapes.shape_organic_1_rotate {
    border-radius: 70% 30% 30% 70%/70% 70% 30% 30%
}

.dot-shapes.shape_organic_2 {
    border-radius: 70% 30% 70% 30%/30% 70% 30% 70%
}

.dot-shapes.shape_organic_2_rotate {
    border-radius: 30% 70% 30% 70%/70% 30% 70% 30%
}

.dot-shapes.shape_dots {
    -webkit-mask-image: url(../img/dots.svg);
    mask-image: url(../img/dots.svg);
    z-index: -1;
    -webkit-mask-size: 18px;
}


/*====================================
== calfin ELEMENTOR NAV WIDGET CSS ===
====================================*/

.elementor-widget-wp-widget-nav_menu ul {
    list-style: none;
    padding: 0;
}

.elementor-widget-wp-widget-nav_menu ul li {
    display: block;
}

.elementor-widget-wp-widget-nav_menu ul li a {
    display: block;
    padding: 20px 020px;
    border: 2px solid #e6ecf7;
    margin: 10px 0;
    font-size: 18px;
    color: #1d2c38;
    font-weight: bold;
    font-family: 'Nunito';
    line-height: 1.5;
    position: relative;
    border-radius: 5px;
}

.elementor-widget-wp-widget-nav_menu ul li a:hover,
.elementor-widget-wp-widget-nav_menu ul li.current-menu-item a {
    border-color: var(--color-yellow);
}

.elementor-widget-wp-widget-nav_menu ul li a:after {
    content: "\f061";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    right: 20px;
    position: absolute;
    font-size: 14px;
    line-height: 2.5;
    color: #8e959b;
}



@-webkit-keyframes zoomInOut {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes zoomInOut {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

span.bar.bar-ani:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    left: 6px;
    background: #ffffff;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG;
}

@-webkit-keyframes MOVE-BG {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(88px);
        transform: translateX(88px);
    }
}

@keyframes MOVE-BG {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(88px);
        transform: translateX(88px);
    }
}



@media only screen and (max-width: 1500px) {
    .main-slider-wrap .slider-caption {
        min-height: 700px;
    }
}

@media only screen and (max-width: 991px) {
    .main-slider-wrap .slider-caption {
        min-height: 600px;
    }
}

@media only screen and (max-width: 1500px) {
    .main-slider-wrap .slick-arrow.prev {
        left: 25px;
    }
}

.main-slider-wrap .slick-arrow.next {
    right: 200px;
}

@media only screen and (max-width: 1500px) {
    .main-slider-wrap .slick-arrow.next {
        right: 25px;
    }
}

.main-slider-wrap .slick-arrow:hover,
.main-slider-wrap .slick-arrow:focus {
    background: #F43336;
}

.main-slider-wrap .slick-arrow:hover i,
.main-slider-wrap .slick-arrow:focus i {
    color: white;
}

.main-slider-wrap:hover .slick-arrow {
    opacity: 1;
}


@media only screen and (max-width: 1500px) {
    .main-slider-content h1 {
        font-size: 60px;
    }
}

@media only screen and (max-width: 1200px) {
    .inner-slider {
        padding: 0px;
    }
    
}

@media only screen and (max-width: 767px) {
    .main-slider-content h1 {
        font-size: 45px;
    }
}

@media only screen and (max-width: 575px) {
    .main-slider-content h1 {
        font-size: 40px;
    }
}

@media only screen and (max-width: 480px) {
    .main-slider-content h1 {
        font-size: 35px;
    }
}

@media only screen and (max-width: 375px) {
    .main-slider-content h1 {
        font-size: 30px;
    }
}

.main-slider-content p {
    font-size: 18px;
    max-width: 555px;
}

@media only screen and (max-width: 480px) {
    .main-slider-content p {
        font-size: 16px;
    }
}

.main-slider-content .slider-btns {
    padding-top: 20px;
}

.main-slider-content .slider-btns .theme-btn {
    margin-top: 15px;
}

.main-slider-content .slider-btns .theme-btn:not(:last-child) {
    margin-right: 30px;
}

.main-slider-content * {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slick-active * {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.slick-active h1 {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.slick-active p {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.slick-active .slider-btns {
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}



@media all and (min-width: 1200px) and (max-width: 1500px) {
    .expariance-box {
        right: 0;
        display: block;
        text-align: center;
        padding: 15px;
    }
    .expariance-box h2 {
        font-size: 42px;
        line-height: 50px;
    
    }
    .calfin-slider-wrapper .slick-arrow.slick-prev {
        position: absolute;
        left: 50px;
        top: 45%;
        bottom: 0;
    }
    .calfin-slider-wrapper .slick-arrow.slick-next {
        position: absolute;
        right: 50px;
        top: 45%;
        bottom: 0;
    }
}
@media all and (min-width: 1200px) and (max-width: 1320px) {
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 102px;
    }
}
@media all and (min-width: 1100px) and (max-width: 1199px) {
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 119px;
    }
}
@media all and (min-width: 1024px) and (max-width: 1099px) {
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 73px;
    }
		.about-small-img {
		right: 0px;
		width: 220px;
	}
}
@media all and (min-width: 1024px) and (max-width: 1199px) {
    .calfin-home-banner-forms {
        padding: 36px;
    }
    .progress-bar-icon {
        margin-right: 10px;
        font-size: 25px;
        margin: 0px 10px 0px 0px;
    }
    .calfin-progress-text {
        padding: 0px 10px 0px 0px;
    }
    .progress {
        margin-top: 10px;
        margin-right: 15px;
    }
    .expariance-box {
        right: 0;
        display: block;
        text-align: center;
        padding: 15px;
    }
    .expariance-box h2 {
        font-size: 42px;
        line-height: 50px;
    }
    .calfin-slider-wrapper .slick-arrow.slick-prev {
        position: absolute;
        left: 50px;
        top: 45%;
        bottom: 0;
    }
    .calfin-slider-wrapper .slick-arrow.slick-next {
        position: absolute;
        right: 50px;
        top: 45%;
        bottom: 0;
    }

}

@media all and (min-width: 993px) and (max-width: 1199px) {
    
    .calfin-blog-post-content .post-meta-item ul li:last-child {
        margin-right: 0;
    }
    .calfin-blog-post-content .post-meta-item ul li {
        margin-right: 9px;
    }
    .button.search-open {
        display: none;
    }
}
@media screen and (max-width: 1023px) {
    .expariance-box {
        width: 230px;
    }
	.blog-section-items .slick-slider {
    margin-right: 0;
	}
       /* image with video */
       .expariance-box {
        display: block;
        text-align: center;
        top: 52%;
        padding: 15px;
    }
    .expariance-box h2 {
        font-size: 36px;
        line-height: 40px;
    }
    /* Section title */
    .expariance-box h2 {
        font-size: 42px;
        line-height: 50px;
    }
    ul.post-grid-meta {
        padding: 0;
    }
    .blog-item {
        padding: 30px 20px;
    }
    .latest-news-wrapper .calfin-t-title {
        padding: 0;
    }
    .inner-slider .calfin-t-title {
        padding: 0;
    }
    .title-two-items .calfin-section-title .calfin-t-title {
        padding: 0px;
    }
    .video-button-wrapper {
        left: 50%;
        right: 50%;
        transform: translate(-50%, -50%);
    }
    .video-button-wrapper {
        width: 80px;
        height: 80px;
        font-size: 30px;
        line-height: 84px;
        top: 50%;
    }
	.about-small-img {
		position: absolute;
		right: -52px;
	}
}
@media all and (min-width: 768px) and (max-width: 1023px) {
   
    .stellarnav.mobile.active>.button {
        opacity: 0;
        transition: .4s;
    }
    .video-image-items img {
        height: 520px;
        width: 450px;
    }
    .video-image-items {
        text-align: center;
    }
    .expariance-box {
        right: 0;
        top: 0;
        width: 205px;
    }
    .expariance-box h2 {
        font-size: 20px;
        line-height: 28px;
    }
	.about-small-img {
		right: 0px;
		width: 220px;
	}

}
@media all and (min-width: 992px) and (max-width: 1023px) {
   
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 67px;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .slider-feature-img img {
        margin-left: 67px;
    }
    .inner-slider {
        padding-top: 80px;
    }
    .project-meddile-item {
        border-right: none;
        margin-bottom: 50px;
    }
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 30px;
        border-bottom: 1px solid #Fff;
    }
  

}
@media screen and (max-width: 991px) {
    .alfin-tab-custom-content.custom-image {
        display: block;
    }
    .custom-image .tab-custom-content {
        width: 100%;
        margin-bottom: 30px;
    }
    .custom-image .tab-custom-image {
        width: 100%;
        margin-left: 0px;
        text-align: center;
    }
}
@media all and (min-width: 868px) and (max-width: 991px) {
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 70px;
        border-bottom: 1px solid #Fff;
    }
}
@media all and (min-width: 768px) and (max-width: 867px) {
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 50px;
        border-bottom: 1px solid #Fff;
    }
}
@media all and (min-width: 768px) and (max-width: 992px) {
   
    .calfin-blog-post-wrapper .row>div:last-child {
        margin-top: 30px;
    }
    .calfin-team-inner.team-style-one .calfin-team-item {
        margin-bottom: 30px;
    }
    
    .calfin-blog-post-content .post-meta-item ul li:last-child {
        margin-right: 0;
    }
    .calfin-service-hover.service-normal-hover {
        padding: 60px 27px;
    }
    .header-four .button.search-open {
        margin-right: 30px;
        position: absolute;
        right: 50px;
        top: 32px;
    }
    .team-info-wrapper {
        padding-left: 28PX;
    }
    .team-info-list-wrapper .info-label {
        min-width: 0;
        margin-right: 6px;
    }  
 }


@media screen and (max-width: 767px) {
    .elementornavs.mobile>.button {
        display: none;
    }

    .calfin-blog-post-box .calfin-blog-post-item {
        margin-bottom: 30px;
    }

    .calfin-blog-post-content .post-meta-item ul li {
        margin-right: 12px;
    }

    .calfin-blog-post-content .post-meta-item ul li:last-child {
        margin-right: 0;
    }

    .expariance-box {
        display: none;
    }
    .testimonial-item-box {
        padding: 50px 30px;
        margin: 0 10px 30px;
    }
    .latest-news-wrapper .title-box {
        padding: 30px 20px;
    }

    .team-info-wrapper {
        padding-left: 0;
        margin-top: 30px;
    }
    .slider-feature-img img {
        margin-left: 0px; 
    }
    
    .inner-slider .calfin-t-title {
        font-size: 50px;
        line-height: 65px;
        padding: 0;
    }
    .inner-slider {
        padding: 30px;
    }
   
    .project-meddile-item {
        border-right: none;
        border-left: none;
        margin-bottom: 50px;
    }
    .calfin-about-us-dec ul li {
        width: 100%;
    }
    .tab-custom-content ul li {
        width: 100%;
    }
    .calfin-title-two-wrapper .title-two-items {
        margin-bottom: 30px;
        display: block;
    }
    .title-two-items .calfin-button {
        width: 100%;
        text-align: left;
    }
    .title-two-items .calfin-t-title {
        margin-bottom: 30px;
    }
    .testimonial-items {
        display: block;
        margin-bottom: 30px;
    }
    .calfin-t-title {
        margin-bottom: 20px;
    }
    .about-small-img {
        right: 0px;
    }
    .tabs-section-wrapper .nav {
        display: block;
    }
	.calfin-button {
   		width: 100%;
	}
	.calfin-t-title {
    font-size: 36px;
    line-height: 48px;
	}
	.blog-content-wrapper {
    margin: -100px 20px 30px;
	}
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .inner-slider {
        margin-top: 80px;
    }
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 100px;
        border-bottom: 1px solid #Fff;
    }
}

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

    .calfin-blog-post-box>.row {
        margin: 0 -10px;
    }
    input.wpcf7-form-control.wpcf7-submit {
        padding: 15px 20px;
    }
    span.testi-quit {
        display: none;
    }
    .team-info-list-wrapper .info-label {
        color: var(--color-black);
        min-width: 80px;
    }
    .inner-slider {
        margin-top: 60px;
    }
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 60px;
        border-bottom: 1px solid #Fff;
    }
   
    .tabs-section-wrapper .nav-tabs .nav-link {
    padding: 30px 60px;
    }
    .title-two-items .calfin-section-title .calfin-t-title {
        font-size: 36px;
    }
	.about-small-img {
   	width: 200px;
	bottom: 0px;
	}
	.calfin-t-title .highlight-heading::after {
    width: 50%;
	}
}

@media screen and (max-width: 375px) {
    .inner-slider .calfin-t-title {
        font-size: 40px;
        line-height: 56px;
    }
    .tabs-section-wrapper .nav-tabs .nav-link {
        padding: 30px 80px;
    }
	.calfin-t-title {
    font-size: 30px;
    line-height: 42px;
    font-weight: 500;

}
   
}

.tp-section-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-repeat: no-repeat;
}

.shapeanimation {
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-duration: 9s;
    -webkit-animation-duration: 9s;
    z-index: -1;
}


/* custom animations */

@-webkit-keyframes shapeMover {
    0%,
    100% {
        -webkit-transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
        transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
    }
    50% {
        -webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
        transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
    }
}

@keyframes shapeMover {
    0%,
    100% {
        -webkit-transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
        transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
    }
    50% {
        -webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
        transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
    }
}

@keyframes shapeMover {
    0%,
    100% {
        transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
    }
    50% {
        transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
    }
}

@keyframes bubbleMover {
    0% {
        -webkit-transform: translateY(0px) translateX(0) rotate(0);
        transform: translateY(0px) translateX(0) rotate(0);
    }
    30% {
        -webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
        transform: translateY(30px) translateX(50px) rotate(15deg);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }
    50% {
        -webkit-transform: translateY(50px) translateX(100px) rotate(45deg);
        transform: translateY(50px) translateX(100px) rotate(45deg);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
    }
    80% {
        -webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
        transform: translateY(30px) translateX(50px) rotate(15deg);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    100% {
        -webkit-transform: translateY(0px) translateX(0) rotate(0);
        transform: translateY(0px) translateX(0) rotate(0);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }
}