@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

.logo, .hero-container h6, .hero-container h2, .case-study-hero h3,  .font h6 , .discover-img-text p, .system-and-technical-section h6 , .italic-text,
.featured-container h6, .featured-container h2, .footer-section h3, .case-study-hero h2, .inner-padding-section h2,
.about-hero-cotainer h3, .three-box-container h2, .four-box-container h1{
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
}
.nav-ul li a, .hero-container p, .links, .featured-container p, .case-study-hero-infobox h6, .inner-padding-section p,
.inner-padding-section ul li, .footer-nav li a, .disclaimer-text, .three-box-container p, .saas-text, .case-study-btn{
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.box h6, .system-and-technical-section p , .system-and-technical-section li,
.hero-container .hero-btn{
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}
body{
    background: #F5F5F5;
}

.white-bg{
    background: #fff;
    border-radius: 20px;
}
.custom-container{
    max-width: 1920px;
    width: 80%;
}
.logo{
    text-decoration: none;
    color: #5C5E5D;
    font-size: 24px;
}
.logo:hover{ color: #5C5E5D;}
.logo img{    
    margin-right: 20px;
    position: relative;
    top: -3px;
}
.nav-ul{
    margin: 0;
}
.nav-ul li{
    list-style: none;
    float: left;
    padding-left: 64px; 
}
.nav-ul li a{
    text-decoration: none;
    color: #464947;
    font-size: 16px;
}
.nav-ul li a.active{
    font-weight: 600;
}
.hero-container h6{
    color: #464947;
    font-size: 24px; 
    margin-bottom: 15px;
}
.hero-container h2{
    font-size: 64px; 
    font-weight: regular; 
    margin-bottom: 25px;
    color: #464947;
}
.hero-container p{
    font-size: 24px;
    color: #464947;
    font-weight: 300;
    margin-bottom: 40px;
}
.about-hero-cotainer p{
    font-weight: 400;
}
.hero-container p span{
    font-weight: 500;
}
.hero-container .hero-btn{
    display: inline-block;
    text-decoration: none;
    margin-right: 15px;
    padding: 8px 20px;
    border-radius: 35px;
    font-size: 16px;
    color: #007BFF;
    border: 1px solid #007BFF;
    font-weight: 600;
}
.hero-container .hero-btn:hover, .hero-container .hero-btn.active{
    color: #fff;
    background: #007BFF;
    font-weight: 400;
}

.hero-container .hero-btn.active:hover{
    background: #0067d5;
}
.case-study-infobox{
    margin-top: 100px;
}
.case-study-infobox .box{ padding-right: 5%;}
.case-study-infobox .box p{
    font-size: 14px !important;
}
.case-study-infobox .box{
    width: 33%;
}
.section{
    padding:50px 25px;
    
}
.hero-container{
    padding-top:130px;
    padding-bottom: 130px; 
}

.header-section{
    padding: 20px 20px 30px;
}
.hero-section{
    padding: 0 25px 65px;
}

.clr{
    background-color: #007BFF;
    border-radius: 20px;
    padding: 2px 4px;
    font-size: 7px;
}

.margin{
    margin-right: 90px;
}
.pad{
    padding: 1px 56px; 
}
.box h6{
    font-weight: 700;
    font-size: 20px;
}
.margin h6, .pad h6{
    margin-bottom: 0;
}

.img-bx { width: 32px; height: 32px; margin-bottom: 20px;}

.font{
    color: #464947;
    /* margin-bottom: 121px;  */
}
.font h6{
     margin-bottom: 20px;
}
/* .font p{
    margin-bottom: 121px; 
} */
.business-section img , .right-logo img{
    /* padding: 9px 229px;  */
    padding: 1px 152px;
}

.system-and-technical-section h6{
    font-size: 36px;
    color: #464947;
}
.italic-text{
    padding: 9px 70px;
    color: #939393;
    font-size: 20px;
}
.case-study-section{
    padding-top:110px ;
    padding-bottom:100px ;
}
.featured-container h6{
    font-size: 24px;
    color: #464947;
    margin-bottom: 100px;
}
.featured-container h2{
    font-size: 46px;
    color:#464947; 
    margin-bottom: 35px;
}
.featured-container a { text-decoration: none;}
.featured-container h2 img{ margin-left: 16px;}
.featured-container p{
   font-size: 20px;
   color: #464947;
}
.featured-container p span{
    font-weight: 600;
}
.featured-img-container{
    padding-left: 10%;
}
.featured-row{ 
    margin-bottom: 20px;
    margin-top: 20px;
}
.line-divider{
    width: 100%;
    height: 1px;
    background: #D2D2D2;
    margin: 128px 0;
}
.footer-section{
    padding: 10px 0 10px;
    text-align: center;
    background: #5E5E5E;
    color: #fff;
    margin-top: 130px;
}
.footer-section .container{
    position: relative;
}
#scrollToTop{
    position: relative;
    top: -100px;
}
.footer-section .container::before{
    content: '';
    width: 510px;
    height: 340px;
    background: url(./../images/footer-icon.svg) no-repeat 0 0;
    position: absolute;
    bottom: -15px;
    left: -70px;
}
.footer-btn{
    display: inline-block;
    text-decoration: none;
    padding: 5px 20px;
    border-radius: 35px;
    line-height: 20px;
    font-size: 16px;
    border: 1px solid #007BFF;
    color: #fff;
    background: #007BFF;
    font-weight: 400;
}
.footer-btn:hover{
    color: #fff;
}
.footer-section h3{
    font-size: 36px;
    color: #ffffff;
    margin: 40px 0 75px;
}
.inner-space{
    padding-top: 100px;
    padding-bottom: 80px;
}


.case-study-hero-infobox{
    display: flex;
}
.case-study-hero-infobox .box p{
    font-size: 14px !important;
}
.case-study-hero-section{
    padding-top: 0;
}
.case-study-hero-section .box{
    flex: 1;
    padding-right: 10%;
}
.case-study-hero h6{
    font-size: 20px; 
    color: #464947;
    margin-bottom: 15px;
    font-weight: 600;
}
.case-study-hero h6 a{
    display: inline-block;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 35px;
    line-height: 20px;
    font-size: 16px;
    border: 1px solid #007BFF;
    color: #fff;
    background: #007BFF;
    font-weight: 400;
    margin-left: 20px;
}
.case-study-hero h6 a img{
    position: relative;
    top: -1px;
    margin-right: 5px;
}
.case-study-hero h2{
    font-size: 72px;
    color: #464947;
    margin-bottom: 60px;
}
.case-study-hero h2 span{
    font-weight: 700;
}
.case-study-hero h3 span{
    font-weight: 700;
    
}
.case-study-hero h3{
    font-size: 48px;
    color:#464947;
    margin-bottom: 70px;
}

.inner-padding-section{
    padding-top: 100px;
    padding-bottom: 100px;
}
.inner-padding-section h2{
    font-size: 48px;
    color: #464947;
    margin-bottom: 35px;
}
.inner-padding-section p{
    font-size: 20px;
    color: #464947;
    margin-bottom: 0px;
}
.img-column{
    text-align: right;
    padding-top: 80px;
}
.img-column img{
    min-width: 210px;
    max-width: 210px;
}
.hero-container .img-column img{
    min-width: inherit;
    max-width: inherit;
}
.inner-padding-section ul{
    margin: 10px 0 ;
}
.inner-padding-section ul li{
    font-size: 20px;
    color: #464947;
}
.inner-padding-section ul li span{
    font-weight: 600;
}
.discover-img-text{
    text-align: center;
}
.discover-img-text{
    align-items: center;
    height: 100%;
}
.discover-img-text p{
    font-style: italic;
    color: #939393;
    padding: 0 20%;
    text-align: justify;
}
.discover-row{
    margin-top: 30px;
    margin-bottom: 80px;
}
.technical-ul li{
    margin-bottom: 10px;
}
.technical-ul{
    margin-bottom: 25px !important;
}
.validate-imgs{
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}
.validate-imgs a{
    display: inline-block;
    width: 48%;
}


.about-hero-cotainer h3{
    font-size: 48px;
    color: #464947;
    margin-bottom: 50px;
}
.about-hero-cotainer h2{
    margin-bottom: 35px;
}
.inner-padding-section p span{
    font-weight:600 !important;
}
.footer-nav{
    margin: 64px 0 10px;
    padding: 0;
}
.footer-nav li{
    position: relative;
    display: inline-block;
    padding: 0px 20px;
}
.footer-nav li::after{
    content: '';
    width: 1px;
    height: 80%;
    background: #fff;
    position: absolute;
    right: 0;
    top: 10%;
}
.footer-nav li:last-child:after{
    display: none;
}
.footer-nav li a{
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    color: #ffffff;
    text-decoration: underline;
}
.footer-nav li a.active{
        font-weight: 600;
}
.footer-nav li:nth-child(2) a{
    text-decoration: none;
}
.all-rights{
    font-size: 12px;
    padding-top: 24px;
}

.disclaimer-text{
    font-size: 8px;
    padding-top: 10px;
    color: #5e5e5e;
}
.fancybox__thumbs{
    display: none !important;
}
.mob-nav {
    position: absolute;
    top: 25px;
    right: 30px;
    display: block;
    width: 40px;
    display: none;
}
.mob-nav span {
    width: 100%;
    height: 1px;
    background: #000;
    margin-bottom: 12px;
    float: left;
}
.navbar {
    float: left;
    color: white;
    padding: 0;
}
.cross-icon {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 30px;
    display: none;
}
.cross-icon img {
    width: 100%;
}
.numbers-ul li{
    list-style: decimal;
}
.design-row{
    padding-top: 120px;
}
.orange-color{
    color:#E96100 ;
}
.three-box-container h2{
    font-size: 32px;
    margin-bottom: 30px;
    color: #464947;
}

.three-box-container p{
    font-size: 20px;
    margin: 0;
    color: #464947;
    padding-right: 15%;
}
.three-box{ padding-right: 10%;}
.hero-section .img-column{
    padding-top: 0;
}
.featured-study-icon{
    position: relative;
    top: -8px;
}
.saas-text{
    font-size: 24px;
    color: #464947;
    padding-left: 3px;
}
.four-box-container{
    padding-top: 60px;
    padding-bottom: 10px;
}
.four-box-container h1{
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 100px;
    color: #464947;
}
.four-box-container h1 span{
    color: #E96100;
}
.up-arrow-wrap{
    padding-top: 160px;
}
.case-study-btn{
    display: inline-block;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 35px;
    font-size: 16px;
    color: #fff;
    background: #007BFF;
    border: 1px solid #007BFF;
    font-weight: 500;
    margin-top: 50px;
}
.case-study-btn:hover{
    color: #fff;
}
a[data-fancybox="gallery"]{
    display: inline-flex;
    position: relative;
}
a[data-fancybox="gallery"]::before{
    content: '';
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 30px;
    height: 30px;
    background: url(../images/img-expand-icon.svg);
    background-size: cover;
}
.view-other-cases{
    display: inline-block;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 35px;
    line-height: 20px;
    font-size: 16px;
    border: 1px solid #007BFF;
    color: #fff;
    background: #007BFF;
    font-weight: 400;
    margin-left: 20px;
}
.view-other-cases:hover{ color: #ffffff;}
@media (max-width: 1920px) {
    .three-box-container h2{ margin-bottom: 15px;}
    .three-box{ margin-bottom: 50px;}
    .hero-container h2, .case-study-hero h2{font-size: 54px;  }
    .about-hero-cotainer h3, .case-study-hero h3{ font-size: 36px;}
    .hero-container p, .inner-padding-section p, .inner-padding-section ul li, .three-box-container p{ font-size: 16px;}
    .three-box-container h2{ font-size: 28px;}
    .featured-container h2{ font-size: 42px;}
    .inner-padding-section h2{ font-size: 42px;}
    .featured-container p{ font-size: 16px;}
    .hero-h2 br{ display: none;}
    .three-box{ padding-right: 6%;}
    .footer-section .container::before{ width: 400px; height: 230px; bottom: -10px; left: -120px; background-size: contain;}
}

@media (max-width: 1399px) {
    .section{ padding: 40px 25px;}
    .featured-container h6{ font-size: 20px; margin-bottom: 50px;}
    .hero-container .mt-5{margin-top: 0 !important;}
    .featured-container h2{ font-size: 36px;}
    .line-divider{ margin: 70px 0;}
    .header-section{ padding: 20px 20px 30px;}
    .img-column{ text-align: center;}
    .case-study-infobox .box p br{ display: none;}
    .nav-ul li{padding-left: 38px;}
    .four-box-container h1{ font-size: 36px;}
    .footer-section .container::before{ bottom: -40px;}
}
@media (max-width: 1199px) {
    .hero-container{ padding-top: 90px; padding-bottom: 90px;}
    .featured-row{ margin-bottom: 0px; margin-top:0px;}
    .featured-row .col-xl-8.mt-5{margin-top: 0 !important;}
    .featured-img-container{ padding: 0;}
    .case-study-infobox{ margin-top: 64px;}
    .img-column{ display: none;}
    .inner-padding-section ul li{ font-size: 16px;}
    .case-study-section{ padding-top: 80px;}
    .three-box-section{ padding-bottom: 0;}
    
}
@media (max-width: 992px) {
    .hero-container .img-column{ display: block;}
    .mob-nav, .cross-icon {
        display: block;
    }
    .navbar {
        visibility: hidden;
        opacity: 0;
        transform: scale(1);
        /* transition: all 1s ease-in-out; */
        height: 0;
        /* transition-delay: 0.5s; */
    }
        .home-page .navbar.active {
        background: rgb(0 0 0 / 94%);
    }
        .navbar.active {
            display: flex;
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            background: rgb(0 0 0 / 85%);
            height: 100%;
            justify-content: center;
            align-items: center;
            visibility: visible;
            opacity: 1;
            transform: scale(1);
            height: 100%;
            transition: all 1s ease-in-out;
        }
    .navbar.active .nav-ul li {
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .navbar.active .nav-ul li a {
        font-size: 16px;
        text-align: center;
        color: #fff;
        display: block;
        padding: 10px 15px;
    }
    .custom-container{ width: 100%;}
    .footer-section h3{ font-size: 36px;}
    .hero-container h2, .case-study-hero h2{font-size: 46px;}
    .case-study-hero h3{ font-size: 28px;}
    .case-study-section{ padding-top: 90px;}
    .case-study-hero h2{ margin-bottom: 40px;}
    .case-study-hero-section .box{ padding-right: 5%;}
    .inner-space{ padding-top: 70px; padding-bottom: 70px;}
    .hero-container .hero-btn, .case-study-hero h6 a{margin-bottom: 20px;}
    .four-box-container h1{ font-size: 32px;}
    .three-box-container p{ padding-right: 0;}
    .saas-text{ font-size: 18px;}
    .footer-section h3{ font-size: 24px;}
    .footer-section h3 br{display: none;}
    
}

@media (max-width:767px){
    .featured-container h2 br{ display: none;}
    .section{ padding: 30px 25px;}
    .featured-container h6{ margin-bottom: 0px;}
    .featured-container h2 {font-size: 34px;}
    .case-study-infobox{ display: block !important;  }
    .header-section{ padding: 20px 20px 30px;}
    .inner-padding-section h2{ font-size: 36px;}
    .inner-padding-section p{ font-size: 16px;}
    .inner-padding-section{ padding-top: 70px; padding-bottom: 70px;}
    .hero-container .hero-btn, .case-study-hero h6 a{ padding: 6px 15px; }
    .case-study-hero h6 a{ margin-left: 0; margin-top: 5px;}
    .case-study-hero-infobox{ flex-wrap: wrap;}
    .case-study-hero-section .box{ padding-right: 3%; width: 49%; flex: auto;}
    .case-study-infobox .box{ width: 100%;}
    .footer-nav li{ width: 100%;}
    .footer-nav{  margin-bottom: 30px;}
    .footer-nav li::after{ display: none;}
    .all-rights{ padding-top: 5px;}
    .footer-section .container::before{ width: 250px; height: 154px; left: -100px;  bottom: -30px;}
    .footer-section h3{ margin-bottom: 45px;}
}
@media (max-width:520px){
    .hero-container h2{ font-size: 40px;}
    .case-study-hero-section .box{ padding-right: 0%; width: 100%; }
    .section{ padding: 25px 20px;}
    .header-section{ padding: 25px 10px;}
    .mob-nav{ right: 20px;}
}