@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100;9..40,200;9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900;9..40,1000&display=swap');
@import url('jquery.animatedheadline.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css');
:root {
    --primary-color: #004aad;
    --secondary-color: #4477CE;
    --light-color:#d9eeff;
    --yellow-color: #f8b434;
    --font-main: 'DM Sans', sans-serif;
    --transition : all linear 0.3s;
}
html,body {position: relative; scroll-behavior: smooth;}
body {font-family: var(--font-main); overflow-x: hidden; font-size: 16px;}
a {text-decoration: none; color:#000 ;}
.logo {max-width: 100%; width: 100%; height: 60px; overflow: hidden;}
.logo a {display: block; height: 100%;}
.logo img {max-width: 100%; width: 100%; height: 100%; object-fit: contain;}
header {padding: 5px 0; background-color: #fff; z-index: 111 !important;}
.btn-grad { background-image: linear-gradient(to right, #63c1f5 0%, #4477ce  51%, #0081c9  100%);
    padding: 7px 15px; transition: 0.5s; background-size: 200% auto; color: white;}
.btn-grad:hover {background-position: right center; color: #fff; text-decoration: none;} 
.btn-grad2 { background-image: linear-gradient(to right, #03A9F4 0%, #3356ff  51%, #3F51B5  100%);
    padding: 7px 15px; transition: 0.5s; background-size: 200% auto; color: white;}
.btn-grad2:hover { background-position: right center; color: white; text-decoration: none;} 
.navbar-expand-lg .navbar-nav .nav-link { padding-right: 15px; padding-left:15px; color: #000;
    text-transform: uppercase; font-weight: 600; padding-top: 10px; padding-bottom: 10px;}
.main-banner {background-color: var(--secondary-color); overflow: hidden; min-height: 90vh; display: flex; 
    align-items: flex-start; justify-content: center; background-color: #5f9aff;}
.main-banner h1 {font-size: 76px; color: #fff; font-weight: bold;}
.main-banner .container {position: relative; z-index: 2;}
/* .main-banner ul {list-style: none; padding: 0; margin:15px 0 0;}
.main-banner ul li {padding: 12px 0; color: #fff; font-size: 18px; display: flex; align-items: center;}
.main-banner ul li img {margin-right: 10px; max-width: 25px;} */
/* .main-banner form .form-control { border-radius: 2px; padding: 10px 15px;}
.main-banner .form-check-input:checked { background-color: #fce319; border-color: #fce319;} */
.main-banner .btn {font-weight: bold; text-transform: uppercase; border-radius: 2px;}
.why-choose-sec {padding: 50px 0;background-color: var(--light-color);}
.title {font-size: 40px; text-align: center; margin-bottom: 30px;}
.title span {color: var(--primary-color); font-weight: bold;}
.why-choose-sec img {display: flex; align-items: center; max-width: 40px; flex: 0 0 40px; align-self: start;}
.why-choose-sec .card {box-shadow: 0 10px 50px rgb(52 46 173 / 10%); border-radius: 12px; background-color: #fff;
     transition: var(--transition); border: 1px solid #efefef;}
.why-choose-sec .card h4 {font-size: 16px; font-weight: 600; margin: 0;}
.container {max-width: 90%;}
.features-sec {padding: 50px 0; position: relative; background-color: var(--light-color);}
.features-sec .box-ft {display: flex; align-items: flex-start; justify-content: flex-start;
    background: #fff; border-radius: 15px; transition: var(--transition); padding: 15px 15px 25px 10px;
    position: relative; height: 100%;}
.features-sec .box-ft:before {content: "";background: #0000;width: 100%;height: 100%;position: absolute;
    top: -15px;bottom: 0;left: -15px;right: 0;margin: auto;border-radius: 15px;z-index: 0;
    border: 3px solid;}
.features-sec .box-ft img {max-width: 30px; margin-right: 5px;}
.features-sec .box-ft p {font-size: 13px; margin: 0;}
.features-sec .box-ft h5 { font-weight: bold; font-size: 16px; color: var(--primary-color);}
.benefits-sec {padding: 50px 0 70px; position: relative;}
.benefits-sec h4 {font-size: 36px; color: var(--primary-color); font-weight: bold;}
.benefits-sec p {font-size: 18px; line-height: 1.7; margin: 0; opacity: 0.8;}
.benefits-sec ul {list-style: none; padding: 0; margin:15px 0 0;}
.benefits-sec ul li {display: flex; align-items: center; padding: 8px 0;}
.benefits-sec ul li img {max-width: 20px; margin-right: 10px;}
.pricing-sec  {padding: 50px 0;}
.price-table { width: 100%; margin: 20px auto;  background: #fff; transition: 0.4s;
    border-radius: 15px; padding: 10px 15px 10px 5px; align-items: baseline; 
    position: relative; justify-content: center;}
.price-table:before {content: "";background: #0000;width: 100%;height: 100%;position: absolute;
    top: -15px;bottom: 0;left: -15px;right: 0;margin: auto;border-radius: 15px;z-index: 0;border: 3px solid;}
.price-table .price-info h4 {text-align: center; margin: 0; font-size: 26px; font-weight: bold;}
.price-table .price-info { padding: 15px; border-radius: 15px;text-align: center; margin-bottom: 30px;}
.price-group .col-md-3:nth-child(1) .price-table {background-color: var(--light-color);}
.price-table .price-info p {margin: 0;}
.price-table .price-info .price h3 {margin-bottom: 0; font-size: 34px; font-weight: bold;}
.price-table .price-info .price {margin: 15px 0 0;}
.price-table .price-info .price h3 sup {font-size: 16px; font-family: Arial, Helvetica, sans-serif;}
.price-table .price-info .price p {font-size: 14px;}
.price-table .price-ft p {font-size: 14px; text-align: center;}
.price-table .btn { font-weight: 600; width: 100%; padding:10px 15px; position: relative; z-index: 2;
    font-size: 16px;}
.price-table .price-ft h4 {font-size: 20px;font-weight: bold;text-align: center;color: #000;}
.price-table .price-ft ul {list-style: none; padding: 0; margin: 0 0 15px;}
.price-table .price-ft ul li {display: flex; align-items: center; justify-content: center;
    font-size: 14px; padding: 2px 0;}
.price-group .col-md-3:nth-child(1) .price-table {background-color: var(--light-color);}
.price-group .col-md-3:nth-child(1) .price-table .btn {background-color: #fa983d;}
.price-group .col-md-3:nth-child(1) .price-table .price-info {background-color: #fbc893;}
.price-group .col-md-3:nth-child(2) .price-table {background-color: #d4f9e9;}
.price-group .col-md-3:nth-child(2) .price-table .btn {background-color: #00E785;}
.price-group .col-md-3:nth-child(2) .price-table .price-info {background-color: #00E785;}
.price-group .col-md-3:nth-child(3) .price-table {background-color: #fdecff;}
.price-group .col-md-3:nth-child(3) .price-table .btn {background-color: #F9B4FF;}
.price-group .col-md-3:nth-child(3) .price-table .price-info {background-color: #F9B4FF;}
.price-group .col-md-3:nth-child(4) .price-table {background-color: #dcf3ff;}
.price-group .col-md-3:nth-child(4) .price-table .btn {background-color: #52C4FF;}
.price-group .col-md-3:nth-child(4) .price-table .price-info {background-color: #52C4FF;}
.call-out-sec {padding: 50px 0; text-align: center;}
.call-out-sec .wrap {background-color: var(--light-color); border-radius: 15px; padding:30px;}
.call-out-sec .wrap h3 {font-size: 36px; color: #000; text-align: center; font-weight: bold; 
    margin-bottom: 30px;}
.call-out-sec ul {display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.call-out-sec ul li {margin:0 15px; display: flex; align-items: center; justify-content: center;}
.call-out-sec ul li img {max-width: 25px;}
.ab-sec {background-color: var(--primary-color); overflow: hidden;  text-align: center;
     background-image: url(../images/banner.png);  padding: 50px 0; background-attachment: fixed;
    background-position: center; background-size: 30% auto; background-blend-mode: screen;}
.ab-sec h1 {color: #fff; margin-bottom: 15px; font-weight: bold;}
.ab-sec p {color: #fff;}
.nav-link.active {background-color: #0081C9;color: #fff !important;border-radius: 5px;}
footer {background-color: var(--primary-color); padding: 30px 0 30px;}
footer ul {display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start;}
footer ul li {margin: 0 25px 0 0;}
footer ul li a {color: #fff;}
footer p {color: #fff; font-size: 14px; margin: 0;}
@media screen and (max-width:768px) {
    .hide-me {display: none !important;}
    .call-out-sec ul {justify-content: center; text-align: left; padding: 0;}
    .call-out-sec ul li {margin: 10px;}
    .call-out-sec .wrap { padding: 30px;}
    .call-out-sec .wrap h3 {font-size: 24px;}
    .call-out-sec, .pricing-sec, .main-banner { padding: 30px 0;}
    .title {font-size: 22px;}
    .title br {display: none;}
    .benefits-sec .row {margin: 30px 0;}
    .container { max-width: 100%;}
    .main-banner h3 { font-size: 26px;}
    .navbar>.container-fluid {justify-content: flex-end !important;}
    .navbar-toggler { background-color: #eee; border: 0;}
    .navbar-toggler:focus {text-decoration: none;outline: 0 !important;box-shadow: none !important;}
    .navbar-collapse {position: fixed; background: #fff;top: 58px; z-index: 55; width: 100%;
        left: 0; border-radius: 0;}
    .process {width: 100% !important;}
    .process2 {width: 100% !important;}
    #canvas {display: none;}
    #canvas2 {display: none;}
    .process-items {display: block !important;}
    .process-items li {display: block !important; width: 100% !important;  margin: 0 0 30px;
        transform: scale(1) translateY(40px) !important;}
    .main-banner h1 { font-size: 50px;}
    .main-banner {  min-height: auto;}
}
.img-bg1 {position: absolute; bottom:-10px; left: 0; width: 100%; z-index: 1;  opacity: 0.5;
    filter: brightness(0) invert(1);}  
.process { width: 1000px; margin: 1em auto; cursor: default;}
.process-items {display: table;margin: 0 0 10px;padding: 0;list-style-type: none;color: #fff;
    font-size: 18px;text-align: center;}
.process-items li {display: table-cell;width: 25%;vertical-align: bottom;padding: 0 0.5em;
    transform: scale(0.75) translateY(40px);transform-origin: bottom center;transition: transform 0.5s;}
.process-items li.active {transform: scale(0.9) translateY(0); font-size: 15px;}
.process-items em {display: block;margin-top: 0.5em; font-weight: bold; font-size: 24px;}
footer p span { color: #fff; background: #1d7dff; padding: 3px 10px; font-weight: 400;  border-radius: 60px; margin: 0 10px; letter-spacing: 1px;}
.client-sec {padding:50px 0 15px; position:relative;}
.client-logo {max-width:100%; overflow:hidden; height:70px; width:100%;}
.client-logo img {max-width:100%; width:100%; height:100%; object-fit:contain;}
.client-logo .slick-dots { bottom: -55px;}
.slick-dots li {margin: 0;}
.about-sec {padding:50px 0; position:relative;}
.about-sec .headline { font-size: 36px; color: var(--primary-color); font-weight: bold;}
.wcs-img {max-width:90px !important; width:100%;}
.process2 { width: 1000px; margin: 1em auto; cursor: default;}
.process2 .process-items li {width: 20%;}
@media (min-width: 992px) { 
  .navbar .dropdown:hover .dropdown-menu { display: block; margin-top: 0;}
}
.dropdown-item:hover {background-color:#0081C9;}
.dropdown-item:hover a {color:#fff;}
.sp-icon {max-width:40px; width:100%; height:40px; object-fit:contain; background-color:#0081C9; padding:5px;
    border-radius:50%; margin-right:15px;
}
.image-container { position: relative; width: 100%;  z-index: 1;}
.image-container2 { width: 100%; height: 70vh; }
.image-container2 img { height: 100%; margin:0; object-fit: cover; object-position: center center;}

.capture-canvas {position:absolute; top:0; left:0;pointer-events: none; will-change: transform, opacity;
     transform-origin: center center;  z-index: 9;}
#capture {max-width: 630px;height: 400px; position:relative; width:100%;background-color: #d4e1f4;}
#capture img {width: 100%;height: 100%; object-fit: cover;display: inline-block;}
#capture-wrap {position:relative; width:100%; height:100%;}
#capture2 {max-width: 600px;height: 350px; position:relative; width:100%;background-color: #d4e1f4;}
#capture2 img {width: 100%;height: 100%;object-fit: cover;display: inline-block;}
#capture-wrap2 {position:relative; width:100%; height:100%;}
#capture3 {max-width: 630px;height: 350px; position:relative; width:100%;background-color: #d4e1f4;}
#capture3 img {width: 100%;height: 100%;object-fit: cover;display: inline-block;}
#capture-wrap3 {position:relative; width:100%; height:100%;}
.card-box { padding:50px; border-radius:15px; margin:100px 0; background-color:#deebff;}
canvas {background-color:transparent;}
.lead-table-sec {padding:80px 0; background-color:#f1f1f1;}
.lead-table {margin-top:50px; border-radius:15px; overflow:hidden; text-align:center;}
.lead-table table { font-size: 15px; border-collapse: collapse;}
.lead-table thead th { background: #1a3e6f; color: #fff; text-align: center; padding: 12px 8px;
  font-weight: 600; border-color: #153154;}
.lead-table tbody th { background: #e9eff7; color: #1a3e6f; font-weight: 600; border-color: #c8d3e0;
  text-align: center; padding: 10px 8px; font-size: 22px;}
.lead-table tbody td { text-align: center; padding: 10px 8px; border-color: #e0e6ee; font-size: 18px;}
.lead-table tbody tr:nth-child(odd) td {background: #f8fafc;}
.lead-table td span:first-child {font-weight: 600; font-size: 16px;}
.lead-table tbody tr:hover td { background: #edf4ff;}
@media (min-width: 769px) { 
    .mobile-only {display:none;}
}
@media (max-width: 768px) { 
    .card-box { margin: 30px 0; padding: 20px;}
    .image-container2 { height: 40vh;}
    #capture, #capture2, #capture3 { max-width: 100%; height: auto; margin: 15px 0;}
    .mobile-only {display:block;}
}
.ft-restate .box-ft p {font-size: 15px;margin: 10px 0 0;}
.ft-restate .box-ft { padding: 15px 20px 25px 10px;}