@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

html {scroll-behavior: smooth;}
body {
  font-family: "Karla", sans-serif;
  color:#000;
}
::-webkit-scrollbar {
    width: 0.8rem;
    height: 0.8rem
}
::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: .5rem
}
::-webkit-scrollbar-thumb {
    background: #c2c2c2;
    border-radius: 10px;
    border: 2px solid #f0f0f0
}
::-webkit-scrollbar-thumb:hover {
    background: #a3a8ac;
}
.font-weight-medium { font-weight:500}
.font-weight-semibold { font-weight:600}
.primary-font {
  font-family: "Karla", sans-serif;
}
.secondary-font, .heading-fonts, h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}
.primary-color {
    color: #01a1e4;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.25;
    font-weight: 700;
}
a, a:hover {
    color: inherit;
    text-decoration: none;
}
.text-link  {
    color: #01a1e4;
}

a.text-link:hover, a.text-link:focus, .text-hover:hover, .text-hover:focus {
    color: #02a4e6;
}
.text-underline,  .text-hover-underline:hover { text-decoration: underline;}

.btn {padding-inline: 1.25rem;}
.btn-outline-primary {
    color: #01a0e3;
    border-color: #01a0e3;
}
.btn-outline-primary:hover {
    background: #01a0e3;
    border-color: #01a0e3;
}
.btn-primary {
    background: #01a0e3;
    border-color: transparent;
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background: #0c4475;
    border-color: #0c4475;
}
.btn-primary:hover, .btn-primary:focus {
    background: #00aae6;
    border-color: transparent;
    }

.btn-primary:focus {
    box-shadow: 0 0 0 .2rem rgb(9 51 88 / 20%);
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgb(9 51 88 / 20%);
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: #093358;
    border-color: #093358;
}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    background-color: #093358;
    border-color: #093358;
}
.text-color-1 {
      color: #647676;
}
.navbar-nav li.nav-item .nav-link {
    padding: 0.5rem 1.125rem;
}

.navbar-nav li.nav-item .nav-link:hover {
    color: #01a1e4;
}
header {
    /* color: #fff; */
    background: rgba(40, 58, 90, 0.9);
    background: #fff;
    box-shadow: 0 0px 18px 0 rgba(0, 66, 124, .12);
    top: 0;
    z-index: 100;
}
.logo {
    font-size: 24px;
    white-space:normal;
    line-height: 1;
    font-weight: 700;
    color: #0c4475;
    width: 250px;
}
.sub-heading {font-size: 1.125rem;font-weight: 500;}

.banner {
    min-height: calc(300px + 16vw);
    position: relative;
    color: #fff;
}
.banner:after {
    content: '';
    background: rgb(0 9 16 / 51%);
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 1;
}

.banner > div {
    position: relative;
    z-index: 10;
}
.banner h1 {font-size:3rem;font-size: clamp(1.5rem, calc(16px + 4vw), 2.5rem);}
.banner p { font-size:1.275rem}
.section-title {color: #0c4475;font-weight: 600;font-size: clamp(1.5rem, calc(15px + 3.75vw), 2.5rem);}
.features, .our-customers {
    background: #ebf2f5;
    box-shadow: inset 0px 0px 20px -8px #ccc;
}

.feature-col .card {    box-shadow: 0 4px 4px rgb(2 2 2 / 5%);
border:none;
    border-radius:0.5rem
}
.feature-col h4 {font-size: clamp(1.125rem, calc(0.75rem + 0.35vw), 1.375rem);font-weight: 600;/* font-family: 'Karla'; */}
.feature-col i {width: 80px;height: 80px;display: flex;justify-content: center;align-items: center;margin-top: -40px;background: #fff;border-radius: 100%;margin-inline: auto;color: #0c4475;box-shadow: 0px -4px 10px 0px #efefefcc;}

.contact-us-details em {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(0 0 0 / 22%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: 10px;
    border-radius: 50%;
    font-size: 1.25rem;
}
.footer {
     color: rgb(255 255 255 / 60%);
}
.footer-menu {
    gap: 12px 25px;
    color: rgb(255 255 255 / 60%);
}
.footer-menu li a:hover {
    color: #01a1e4;
}

.contact-form {
    background: #ebf2f5;
    box-shadow: inset 0px 0px 20px -8px #ccc;
    padding-block: 80px;
}
.contact-form .form-control{
    border-radius: 0.25rem;
}
.contact-image{
    text-align: center;
}
.contact-image img{
    border-radius: 100%;
    width: clamp(60px, calc(50px + 5vw), 220px);
    transform: rotate(29deg);
}

.contact-form h3{
    text-align: center;
    color: #0062cc;
    color: #005daf;
}
.faqs-banner h1 {
    /* text-align: center; */
    font-size: 3rem;
}

.faqs-banner p {
    font-size: 1.25rem;
    font-weight: 500;
}
.faqs-section {
    row-gap: 40px;
}
.faq h4 {font-size: 1.275rem;font-family: "Karla", sans-serif;}
.faq p { margin-bottom: 0; font-size: 1.125rem;}

.faq-section {flex-direction: column;display: flex;row-gap: 20px;}
a.whatsapp-floating-button {
    position: fixed;
    inset: auto 12px 12px auto;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(77, 194, 71) !important;
    border-radius: 100%;
    transition: 0.5s;
  animation: pulse 1.5s infinite; /* Apply the pulse animation */
}

@keyframes pulse {
  0% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(1.2); /* Slightly enlarge the icon */
  }
  100% {
    transform: scale(1); /* Return to original size */
  }
}
form#contactForm {
    padding: 40px;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.10);
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.10);
    background: #f5f7fa;
    border: 1px solid #e8ecf1;
}

.pricing-plan { padding-top:45px;}
.best-plan-col.pricing-plan {  padding-top:0px;}


.pricing-plan .card-body {
    margin-bottom: 16px;
    background-color: #fff;
    border: 1px solid #e3ebf6;
    border-radius: .5rem;
    text-align: center;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    padding-block: 45px 30px;
}

.pricing-plan.best-plan-col .card-body, .pricing-plan .card-body:hover {
    background: antiquewhite;
    background: rgb(1 160 227 / 8%);
}
span.best-plan {
    display: block;
    background: #ed7124;
    color: #ffffff;
    padding: 6px 5px;
    transform: rotate(-45deg);
    left: -30px;
    top: 15px;
    font-weight: bold;
    width: 130px;
}
.pricing-plan .card-body ul li {
    margin-bottom: 10px;
    /* line-height: 1.45; */
    font-size: 0.875rem;
    padding-left: 20px;
    position: relative;
}

.pricing-plan .card-body ul li:before {
    content: "\f00c" !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 600;
    font-size: 10px;
    text-align: center;
    background-color: rgba(109, 129, 245, 0.1);
    background: rgb(229 229 229 / 50%);
    color: #01a0e3 !important;
    width: 16px;
    height: 16px;
    line-height: 16px;
    display: inline-block;
    border-radius: 50%;
    left: 0;
    inset: 2px auto auto 0;
    position: absolute;
}

.pricing-plan .card-body h4 {
    font-size: 1.5rem;
    color: #303e67;
    font-family: inherit;
}

.pricing-plan .card-title {
    font-size: 24px;
    font-weight: 800;
    color: #303e67;
    font-family: inherit;
    display:inline-block;
    margin-bottom: 1.85rem;
    width:auto;
    position:relative;
    z-index: 1;
}

h5.card-title::after {
    content: '';
    position: absolute;
    height: 6px;
    background-color: rgba(255, 184, 34, 0.6);
    background-color: rgb(237 114 36 / 73%);
    bottom: -7px;
    width: 100%;
    right: 0;
    border-radius: 30px;
    transform: rotate(-5deg);
    z-index: -1;
} 
.footer-logo img { max-width:220px;}

.social-link {gap :20px;font-size:24px;line-height: 1;}

.social-link .facebook:hover {    color: #1877F2;}
.social-link .linkedin:hover {    color: #0077B5;}

@media(max-width:1199px) {
.logo {
    font-size: 20px;
}
.faqs-banner h1 {
    font-size: 2.45rem;
}
}
@media(max-width:991px) {
.navbar-nav li.nav-item .nav-link {
    padding: 0.25rem 0rem;
}
.navbar-toggler {
    padding: .25rem .5rem;
    font-size: 1.75rem;
    border: 1px solid #0c4475;
    color: #0c4475;
    }

.navbar-toggler[aria-expanded="true"] {
    color: #df0000;
    border-color: #df0000;
}
.navbar-toggler[aria-expanded="true"]:before {
    content: "\f00d";
}
       .navbar-brand {
    font-size: 20px;
    white-space:normal;
    line-height: 1;
    font-weight: 700;
    margin: 0;
    color: #0c4475;
    max-width: 200px;
}  
.faqs-banner h1 {
    font-size: 2.25rem;
}
}

@media(max-width:767px) {
html { font-size:15px}
.h1, h1 {
    font-size: clamp(1.75rem, calc(16px + 3vw), 2.5rem);
}
.h2, h2 {
    font-size: clamp(1.5rem, calc(14px + 2.75vw), 2rem);
}
.h3, h3 {
    font-size: clamp(1.25rem, calc(12px + 2.5vw), 1.75rem);
}
    .container {
    max-width: 100%;
}
    .sub-heading {
    font-size: 1rem;
}
    .banner p {
    font-size: 1rem;
}
.navbar-toggler {
        padding: .25rem .5rem;
        font-size: 1.25rem;
        height: 30px;
}
.navbar .btn {
    padding-block: 0px;
    line-height: 28px;
}
 .contact-form h3{
font-size:1.5rem
}  
.footer-heading {
    font-size: 20px;
}
.navbar-brand {
    font-size: 18px;
}
.faqs-banner h1 {
    font-size: 2rem;
}
.faqs-banner p {
    font-size: 1rem;
}
.faq h4 {font-size: 1.15rem;}
.faq p { margin-bottom: 0; font-size: 1rem;}
.faq-section {
    row-gap: 16px;
}
.faqs-section {
    row-gap: 30px;
}
.banner {
    min-height: 0;
}
}
@media(max-width:480px) {
html { font-size:14px;}
.navbar-brand {
    width: 130px;
    font-size: 18px;
    white-space:normal;
    line-height: 1;
    font-weight: 700;
    color: rgb(12 68 117 / 50%);
    margin: 0;
}

.navbar-brand:hover {
    color: #0c4475;
}

.navbar-brand span {
    color: #0c4475;
}
.banner h1 {
    font-size: clamp(1.5rem, calc(16px + 3vw), 2.5rem);
}
    .footer-menu {
    gap: 10px 20px;
}
footer.footer {
    padding-bottom: 40px;
}
}