@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

body {font-family: "Jost", sans-serif !important;}
a {text-decoration: none;font-family: "Jost", sans-serif;font-size: 15px;}
h1, h2, h3, h4, h5, h6 { font-family: "Jost", sans-serif;}
p, .main-table ul li {color: #171717;font-size: 16px;font-family: "Jost", sans-serif;letter-spacing: .5px;line-height: 1.6;margin: 0 0 10px 0;}
.service-section-m{display:none;}
.service-section-D{display:block;}
.testimonial-section {
            background-color: #f8f9fa;
        }

        .testimonial-section h2 {
            color: #2b5799;
            font-weight: bold;
            text-transform: uppercase;
        }

        .testimonial-section h3 {
            color: #343a40;
            font-weight: bold;
        }

        .testimonial-section .highlight {
            color: #2b5799;
        }

        .testimonial-section p {
            font-size: 1.1rem;
            color: #6c757d;
text-align:center;
        }

        .blockquote-footer {
            font-size: 1rem;
            color: #343a40;
        }

        .dots {
            display: flex;
            justify-content: center;
        }

        .dots button {
            height: 12px;
            width: 12px;
            margin: 0 4px;
            background-color: #2b5799;
            border-radius: 50%;
            border: none;
        }

        .dots button.active, .dots button:hover {
            background-color: #000;
        }

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}
.custom-btn { background: #2a5698; color: #fff; display: inline-block; padding: 17px 32px; font-size: 15px; font-weight: 500; letter-spacing: .8px;}
.custom-btn:hover { color: #fff;}
.custom-btn i { font-size: 17px; margin: 0 0 0 8px;}
.heading h2 {font-family: "Jost", sans-serif;color: #171717;font-size: 31px;letter-spacing: normal;font-weight: 600;text-align: inherit;margin: 0 0 10px 0;}
.heading p { color: #171717; font-size: 21px; margin: 0 0 30px 0;}
.sub-title { font-size: 22px; font-weight: 600; letter-spacing: .5px;}
#marquee1 a {
    font-size: 16px !important;
    color: #375295;
}
.top{ position: fixed;
    right: 18px;
    bottom: 30px;
    text-align: center;
    color: #fff;
    background: #2a5698;
    padding: 10px 10px;
    z-index: 99;
    border-radius: 50%;
    border: 2px solid #fff; cursor:pointer; opacity:0; transition:ease-in 0.5s;}
	
.top.scll-top{opacity:1; transition:ease-in 0.5s; bottom: 50px;}
	
.top .fa{display:block !important;}

.top-header {padding: 10px 0 5px 0;}
.top-header a { color: #2a5698; font-size: 16px; margin: 0 0 0 20px; font-weight: 500; line-height: 1;}
header { box-shadow: 0 12px 22px -4px rgba(81,93,105,.4);}
.testimonial-section { background-image: url('image/about-bg.jpg'); padding: 7% 0; background-size: cover;}
.testimonial-section .heading { color: #273c4f;}
.testimonial-section .client-bx {margin: 10px 0;background: #424e92;padding: 20px;min-height: 360px;height: 100%;display: inline-block;position: relative;}
.testimonial-section .client-bx p.text-end { position: absolute; bottom: 20px; right: 20px}
.testimonial-section .client-bx img { border-radius: 50%; border: 2px solid #fff;}
.testimonial-section .client-bx h5 {color: #fff;text-transform: uppercase;font-size: 24px;letter-spacing: 1px;padding-bottom: 15px;}
.testimonial-section .client-bx p {/* color: #eeeeee; *//* margin: 15px 0 0 0; */text-align: justify;/* font-size: 14px; */color: #fffcfc;font-size: 16px;font-family: "Jost", sans-serif;/* letter-spacing: .5px; *//* line-height: 1.6; */margin: 0 0 10px 0; 0; */letter-spacing: .5px;line-height: 1.6;font-weight: 300;}
.testimonial-section .carousel-indicators { bottom: -50px}
.testimonial-section .carousel-indicators [data-bs-target] { background-color: #273c4f;}
/*  */
.testimonial-section .client-bx-innr {margin: 10px 0;background: #273c4f;padding: 30px;}
.testimonial-section .client-bx-innr img { border-radius: 50%; border: 2px solid #fff;}
.testimonial-section .client-bx-innr h5 { color: #fff; text-transform: uppercase; font-size: 17px; letter-spacing: 1px; margin: 0;}
.testimonial-section .client-bx-innr p { color: #eeeeee; margin: 15px 0 0 0;text-align: justify; font-size: 14px; letter-spacing: .5px; line-height: 1.6; font-weight: 300;}
.min_lh_1{ min-height: 320px !important;}
.min_lh_2{ min-height: 380px !important;}
.min_lh_3{ min-height: 310px !important;}
.min_lh_4{ min-height: 300px !important;}
.min_lh_5{ min-height: 450px !important;}
.min_lh_6{ min-height: 360px !important;}
.min_lh_7{min-height: 310px !important;}
.para_detl{display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient:vertical;overflow: hidden;}


.ser-bx {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    z-index: 0;
}
.ser-bx .img {
    width: 100%;
    height: 240px;
    display: block;
}
.ser-bx .img .icon {
    width: 70px;
    height: 70px;
    background: #424e92;
    margin: 0 auto;
    opacity: 0;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.ser-bx .img .icon span {
    color: #fff;
}
.ser-bx .text {
    width: 90%;
    background: #fff;
    padding: 20px;
    margin: 0 auto;
    margin-top: -75px;
    border-radius: 4px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 15px 46px -16px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 15px 46px -16px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 46px -16px rgb(0 0 0 / 10%);
}
.ser-bx .text h3 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}
.ser-bx .text p {
    margin-bottom: 0;
    font-size: 15px;
}
.ser-bx:hover .img .icon {
    opacity: 1;
}
.ser-bx:hover .text {
    background: #4b498f;
}
.ser-bx:hover .text h3 {
    color: #fff;
}
.ser-bx:hover .text p {
    color: rgba(255, 255, 255, 0.8);
}



.services { padding: 50px 0; background: #f5f5f5;  background: url(../Image/services-bg.png); position:relative;}
.services:before{background: rgba(240,240,240,.3); content:''; position:absolute; height:100%; width:100%; left:0; top:0;}
.service-bx{ position: relative;  margin-bottom: 50px;}
.icon-bx{display: flex;background: #fff;border-radius: 30px 0px 0px;transition: .6s;background: #424e9226;}
.icon{}
.service-bx:hover .icon-bx {background: #375295; transition: .6s;}
.icon i{font-size: 25px; width: 66px; height: 66px;  line-height: 66px; background: #375295; color: #fff; border-radius: 25px 0px 0px 0px; display: inline-block; text-align: center; transition: .7s;}
.service-bx:hover .icon i{ background: #375295; transition: .6s;}
.icon-bx h3 {margin-left: 50px;margin-top: 17px;font-size: 18px;color:#000;}
.icon-bx h3 a{font-size: 18px;color:#000;}
.service-bx:hover .icon-bx h3 a { color: #fff;}
.service-bx-img {position: relative;    overflow: hidden;}
.service-bx:hover .service-bx-img img {
    transform: scale(1.1);
    transition: .5s;
}
.service-bx .service-bx-img:before { content: ""; position: absolute; left: 0;top: 250px; height: 100%; width: 100%; opacity: 0; background: #013e59; transition: .8s;  z-index: 9; clip-path: circle(63% at 50% 95%);}
.service-bx:hover .service-bx-img:before { opacity: .75;  transition: .8s; top: 50px;}
.service-bx .service-bx-img img{transform: scale(1); transition: .5s;}
.service-bx .rd-btn{text-align: center; position: absolute; bottom: -54px; left: 0; right: 0; transition: .8s;}
.service-bx .rd-btn a{padding: 7px 30px;border-radius: 5px;background: #375295;color: #fff;font-size: 15px;margin-left: 5px;font-weight: 500;display: inline-block;position: relative;border: 2px solid #375295;overflow: hidden;z-index: 999;}
.service-bx:hover .rd-btn { transition: .8s; bottom: 35px;}
.service-bx .rd-btn a:hover {background-color: #eee;color: #375295;border-color: #eee;}


.whatsapp_btn{
    position: fixed;
    top: 15em;
    right: 20px;
    width: 55px;
    height: 55px;
    z-index: 9999;
}
.whatsapp_btn .icon_logo{
    position: relative;
    z-index: 100;
    padding: 5px;
}

.whatsapp_btn .icon_logo > a > img{
    width: 100%;
}

.whatsapp_btn .circle_waves{
    border-radius: 50%;
    background-color: #3cc04e;
    width: 55px;
    height: 55px;
    position: absolute;
    opacity: 0;
    bottom: 1px;
    left: 0px;
    z-index: 99;
    animation: waves 4s infinite cubic-bezier(.36, .11, .89, .32);
}

@keyframes waves {
    from {
        transform: scale(.55, .55);
        opacity: .6;
    }
    to {
        transform: scale(1.8, 1.8);
        opacity: 0;
    }
}

.banner-section .carousel-caption { top: 0; left: 0; right: 0; bottom: 0; text-align: left; padding: 10%; background-image: linear-gradient(90deg, rgba(26, 26, 26, 0.7), transparent);}
.banner-section .carousel-caption h1 { font-size: 60px; font-weight: 600; letter-spacing: .3px; text-shadow: 3px 3px 3px #2c2c2c; margin: 0 0 40px 0;}
.banner-section .carousel-caption .custom-btn { box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 15px;}

.service-section {padding: 3% 0;}
.service-section .ser-bx {/* border: 1px solid #e0e0e0; */position: relative;min-height: 380px;margin: 10px 0;}
.service-section .ser-bx .heading { padding: 15px;}
.service-section .ser-bx .heading h4 { color: #2c2c2c; font-size: 20px; font-weight: 600;}
.service-section .ser-bx .heading a { color: #2c2c2c;}
.service-section .ser-bx .heading a i ,.service-section .ser-bx .ser-description a i{ margin: 0 5px 0 0;}
.service-section .ser-bx .ser-description{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(42, 86, 152, .98); padding: 30px 25px; opacity: 0; transition: all .6s ease-in-out;} 
.service-section .ser-bx:hover .ser-description { opacity: 1;}
.service-section .ser-bx .ser-description h4 { background-color: #fff; margin: 0 0 20px -25px; padding: 12px 24px; color: #2c2c2c; font-size: 19px; font-weight: 600; box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 15px;}
.service-section .ser-bx .ser-description p, .service-section .ser-bx .ser-description a {color: #ffffff;font-size: 15px;}
.service-section .carousel-item { padding: 0 8%;}
.service-section .carousel-control-next, .service-section .carousel-control-prev { width: 11%; opacity: 1;}
.service-section .carousel-control-prev-icon, .service-section .carousel-control-next-icon { background-image: none !important;}

.why-us { padding: 5% 0; background: #ececec;}
.why-us .Key-Differancials:nth-child(2) {/* margin: 40px 0 0 0; */}
.why-us .Key-Differancials:nth-child(3) {/* margin: 80px 0 0 0; */}
.why-us .Key-Differancials:nth-child(4) {/* margin: 120px 0 0 0; */}
.why-us .Key-Differancials h4{ color: #2c2c2c; font-size: 22px; font-weight: 600; margin: 20px 20px 10px 0;}
.why-us .Key-Differancials p { padding: 0 20px 0 0;}
.why-us .Key-Differancials .pic { overflow: hidden; }
.why-us .Key-Differancials .pic img { filter: brightness(85%); transition: all .5s ease-in-out;}
.why-us .Key-Differancials img:hover { transform: scale(1.2);}

.outsourcing-section { padding: 5% 0;}
.outsourcing-section .left-img { position: relative; overflow: hidden;}
.outsourcing-section .left-img .text { position: absolute; width: 100%; left: 0; bottom: 0; background-image: linear-gradient(transparent 0%, #1f1f1f); padding: 25px;  transition: all .4s ease-in-out;}
.outsourcing-section .left-img .text h3 { color: #fff; font-size: 32px; font-weight: 600; letter-spacing: .8px; margin: 0 0 5px 0;}
.outsourcing-section .left-img .text a { color: #fff; font-size: 15px; font-weight: 600; text-transform: uppercase; transition: all .3s ease-in-out; }
.outsourcing-section .left-img .text a:hover { letter-spacing: 1px;}
.outsourcing-section .left-img img { transition: all .4s ease-in-out; width: 100%; height: 360px; object-fit: cover;}
.outsourcing-section .left-img:hover img { filter: brightness(80%); transform: scale(1.1);}
.outsourcing-section .left-img:hover .text { padding: 25px 25px 25px 32px;}
.outsourcing-section .outsourcting-bx { background: #fff; padding: 40px 25px; height: 360px; transition: all .4s ease-in-out; cursor: pointer;}
.outsourcing-section .outsourcting-bx:hover { padding: 40px 0 40px 35px; filter: brightness(95%);}
.outsourcing-section .outsourcting-bx:nth-child(5)  {background: #dad6ce;}
.outsourcing-section .outsourcting-bx:nth-child(3) { background: #2a5698;}
.outsourcing-section .outsourcting-bx:nth-child(4) { background: #FF7477;}
.outsourcing-section .outsourcting-bx:nth-child(6) { background: #2a5698;}
.outsourcing-section .outsourcting-bx:nth-child(7) { background: #df9926;}
.outsourcing-section .outsourcting-bx .icon { background: #fff; display: inline-block; padding: 15px; border-radius: 50%; margin: 0 0 30px 0; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;}
.outsourcing-section .outsourcting-bx .icon img { width: 50px;}
.outsourcing-section .outsourcting-bx h5 { text-transform: uppercase; font-size: 15px; letter-spacing: 1px; color: #fff;}
.outsourcing-section .outsourcting-bx p { font-size: 22px; font-weight: 600; margin: 0 0 40px 0; color: #fff;}
.outsourcing-section .outsourcting-bx a { color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase;}

.social-impact {padding: 5% 0;background: #375295;}
.social-impact img { width: 72px; margin: 10px 0 20px 0;}
.social-impact h4 { color: #fff; font-size: 21px; font-weight: 500;} 

.contact-section {padding: 0 0 5% 0;}
.contact-section .contact-detail h6{ font-size: 18px; color: #3f3f3f;}
.contact-section .contact-detail p, .contact-section .contact-detail p a {color: #171717; margin: 0 0 30px 0; font-size: 19px; font-weight: 500;}
.contact-section .contact-form .form-control{ padding: 10px 0; margin: 0 0 30px 0; font-size: 17px; border: none; border-radius: 0; border-bottom:  1px solid #3f3f3f;}
.contact-section .contact-form input[type="button"] { border: 0; background: #2a5698; color: #fff; font-size: 16px; font-weight: 600; padding: 16px 27px; letter-spacing: .5px;}

footer { background: #0d1832; padding: 5% 0 4% 0;} 
footer h4 { color: #fff; font-size: 18px; text-transform: uppercase; letter-spacing: .8px; margin: 0 0 15px 0; font-weight: 600;}
footer p, footer a { color: #b9b9b9; font-size: 15px; margin: 0 0 2px 0;}
footer a:hover { color: #fff;}
footer .social-icon a {display: inline-block; border: 1px solid #b9b9b9; border-radius: 50%; width: 30px; height: 30px; font-size: 14px; text-align: center; line-height: 2; margin: 0 5px 0 0;}

/*quick-btn*/
.quick-btn{ position: fixed; top: 18%; left: 10px; z-index: 999;}
.quick-btn ul{ margin: 0; position:relative;  padding: 0; list-style: none; padding: 6px 6px; border-radius: 5px;}
.quick-btn ul .quick-link {position:relative;padding: 15px 0;}
.quick-btn ul li{ width: 35px; height: 2px; margin: 10px 0; background: #000; transition:0.5s;}
.quick-btn ul li.active{ width: 80px; height: 5px;}	
.quick-btn ul li.active span { display: inline-block;}
.quick-btn ul li span{ left: 10px; width: 100px; top: 3px; display: none; color: #000; font-size: 16px; padding: 5px 0; transition: 0.5s; font-weight: 500;}
.quick-btn ul li.active span { display: inline-block;}
.quick-btn ul .quick-link:hover span{ display:block; transition:0.5s; left: -60px; cursor: pointer;}	
.quick-btn ul li a{ width: 10px; height: 10px; display: block; transition:0.5s;}
/*quick-btn*/

.inner-heading {padding: 6% 0;background: url(image/Services_ban.JPG);}
.inner-heading h2 { color: #fff; font-size: 62px; margin: 0; font-weight: 700; letter-spacing: 1.5px; text-align: center;}

.service-apporach { padding: 5% 0; background: #ececec;}
.service-apporach p, .service-apporach ul li { font-size: 18px;}

.core-values { padding: 5% 0;}
.core-values .core-values-bx {background: #dfdfdf;padding: 25px 0;margin: 0 0 25px 0;min-height: 180px;}
.core-values .core-values-bx img { margin: 0 0 15px 0;}
.core-values .core-values-bx p { text-align:center !important;}

.service-page {padding: 1% 0;}
.service-page .heading {position: relative;}
.service-page .heading::before { content: ''; position: absolute; width: 60px; height: 60px; background:  rgba(42, 86, 152, .3); border-radius: 50%; left: -20px; top: 120%;}
.service-page .service-pagre-right { border-left: 1px solid rgba(20, 20, 20, 0.4); padding: 10px 0 10px 30px;}
.service-page .service-pagre-right .accordion-button { color: #202020; padding: 20px; font-size: 18px; font-weight: 700;}
.accordion-button:focus { box-shadow: none;}    
.service-page .service-pagre-right p, .service-page .service-pagre-right ul li { font-size: 17px;}

.social-impact-icon img{width: 122px;margin: 10px 0;}
.team-bx { background: #fff; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.team-bx .name { background: #b9b9b9; padding: 25px;}
.team-bx .name h4 { font-size: 24px; letter-spacing: .5px; margin: 0; font-weight: 700; text-align: center;}
.team-bx .name p { margin: 0; text-align: center; font-size: 17px;}

@media (min-width: 320px) and (max-width: 768px) {
    .service-section-D{display:none;}
    .service-section-m{display:block;}
    p, .main-table ul li { font-size: 15px;}
    .custom-btn { background: #2a5698; color: #fff; display: inline-block; padding: 17px 32px; font-size: 15px; font-weight: 500; letter-spacing: .8px;}
    .custom-btn:hover { color: #fff;}
    .custom-btn i { font-size: 17px; margin: 0 0 0 8px;}
    .heading h2 { font-size: 32px;}
    .heading p { font-size: 18px; margin: 0 0 20px 0;}
    .sub-title { font-size: 18px;}

    .service-section .ser-bx { min-height: 300px;}

    .why-us { padding: 7% 0;}
    .why-us .Key-Differancials:nth-child(2) { margin: 20px 0 0 0;}
    .why-us .Key-Differancials:nth-child(3) { margin: 20px 0 0 0;}
    .why-us .Key-Differancials:nth-child(4) { margin: 20px 0 0 0;}

    .outsourcing-section { padding: 7% 0;}
    .outsourcing-section .left-img .text { padding: 15px;}
    .outsourcing-section .left-img .text h3 { font-size: 24px;}
    .outsourcing-section .left-img .text a { font-size: 14px;}
    .outsourcing-section .left-img img { height: 240px;}
    .outsourcing-section .left-img:hover .text { padding: 25px 25px 25px 32px;}
    .outsourcing-section .outsourcting-bx { padding: 30px 20px; height: auto;}

    .social-impact { padding: 7% 0;}

    .contact-section { padding: 5% 0;}
    .contact-section .contact-detail h6{ font-size: 16px;}
    .contact-section .contact-detail p, .contact-section .contact-detail p a {margin: 0 0 20px 0; font-size: 15px;}
    .contact-section .contact-form .form-control{ margin: 0 0 20px 0; font-size: 16px;}
    .contact-section .contact-form input[type="button"] { font-size: 14px; padding: 14px 18px;}

    .quick-btn{ display: none;}

    .inner-heading h2 { font-size: 32px;}

    .core-values { padding: 5%;}
    .core-values .core-values-bx { background: #dfdfdf; padding: 25px 0; margin: 0 0 25px 0; min-height: 180px;}
    .core-values .core-values-bx img { margin: 0 0 15px 0;}

    .service-page { padding: 6%;}
    .service-page .service-pagre-right { border-left: 0; padding:0;}
    .service-page .service-pagre-right .accordion-button { padding: 20px; font-size: 16px; font-weight: 700;}
    .accordion-button:focus { box-shadow: none;}    
    .service-page .service-pagre-right p, .service-page .service-pagre-right ul li { font-size: 15px;}

    .social-impact-icon img{ width: 72px; margin: 10px 0; }
    
    .team-bx { margin: 0 0 15px 0;}
    .team-bx .name { padding: 15px;}
}

.container_faq {
    width: 60%;
    height: auto;
    padding: 20px;}

.faq_s {
    width: 100%;
    background-image: url(https://fintaccx.in/Image/GLOBAL_SERVICE.jpg);
}