/*
10px	0.625rem
11px	0.6875rem
12px	0.75rem
13px	0.8125rem
14px	0.875rem
15px	0.9375rem
16px	1rem
17px	1.0625rem
18px	1.125rem
19px	1.1875rem
20px	1.25rem
21px	1.3125rem
22px	1.375rem
23px	1.4375rem
24px	1.5rem
25px	1.5625rem
26px	1.625rem
27px	1.6875rem
28px	1.75rem
29px	1.8125rem
30px	1.875rem
31px	1.9375rem
32px	2rem
33px	2.0625rem
34px	2.125rem
35px	2.1875rem
36px	2.25rem
37px	2.3125rem
38px	2.375rem
39px	2.4375rem
40px	2.5rem
41px	2.5625rem
42px	2.625rem
43px	2.6875rem
44px	2.75rem
45px	2.8125rem
46px	2.875rem
47px	2.9375rem
48px	3rem
49px	3.0625rem
50px	3.125rem
51px	3.1875rem
52px	3.25rem
53px	3.3125rem
54px	3.375rem
55px	3.4375rem
56px	3.5rem
57px	3.5625rem
58px	3.625rem
59px	3.6875rem
60px	3.75rem
61px	3.8125rem
62px	3.875rem
63px	3.9375rem
64px	4rem
80px	5rem
*/

/*
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
*/
:root {
    --red-color: #fe031a;
    --grey-dark: #1e2329;
    --blue-color: #00A1E1;
    --blueLight-color: #EBEFF9;
    --blueDark-color: #032D60;
    --body-color: #282c32;
    --heading-color: #032D60;
    --green-color: #09b4b0;
    --color-white: #fff;
    --color-yellow: #FFBF36;
    --color-yellow-dark: #e8a413;

    --btn-primary-color: #00A0E3;
    
    --body-bg: #fff;
    --body-bg-secondary: #eff1f8;

    --heading-font: "DM Sans", sans-serif;
    --body-font: "DM Sans", sans-serif;

    --font-weight-300: 300;
    --body-font-weight: 400;
    --font-weight-500: 500;
    --heading-weight: 600;
    --font-weight-700: 700;

    font-size: 16px;
    --body-font-size: 1rem;
    --font-size-18: 1.25rem;
    --lead-text: 1.375rem;

  }

body {color: var(--body-color); font-size: var(--body-font-size); font-family: var(--body-font); font-optical-sizing: auto; background-color: var(--body-bg);}
a {transition: all 0.3s; text-decoration: none;}
a:hover {text-decoration: none; transition: all 0.3s;}
.font-size-18 {font-size: var(--font-size-18);}
.lead-text {font-size: var(--lead-text); font-weight: 700;}
.lead-text:last-child {margin-bottom: 0;}
.img-radius {border-radius: 4px;}
.body-bg-secondary {background-color: var(--body-bg-secondary);}

.colorYellow {color: var(--color-yellow);}
.colorWhite {color: var(--color-white)!important;}

b, strong {font-weight: 700;}

h2, .h2 {font-size: 3rem; font-weight: 700; color: var(--heading-color);}
h3, .h3 {font-size: 1.5rem; color: var(--heading-color); font-weight: 700; margin-bottom: 15px;}
h4, .h4, .title {font-size: 1.25rem; color: #01113A; font-weight: 700; margin-bottom: 15px;}

@media (min-width:992px) and (max-width:1399px) {
  body {font-size: 0.875rem;}
  h2, .h2 {font-size: 2rem;}
  h3, .h3 {font-size: 1.375rem; margin-bottom: 10px;}
  h4, .h4, .title {font-size: 1.125rem; margin-bottom: 10px;}
  .lead-text {font-size: 1rem;}
  .section-padding {padding-top: 40px; padding-bottom: 40px;}
}

@media (min-width:768px) and (max-width:991px) {
  h2, .h2 {font-size: 2rem;}
  h3, .h3 {font-size: 1.375rem; margin-bottom: 10px;}
  h4, .h4, .title {font-size: 1.125rem; margin-bottom: 10px;}
}

@media screen and (max-width:767px) {
  h2, .h2 {font-size: 2rem;}
  h3, .h3 {font-size: 1.375rem; margin-bottom: 10px;}
  h4, .h4, .title {font-size: 1.125rem; margin-bottom: 10px;}
}

.section-padding {padding-top: 60px; padding-bottom: 60px;}
.section-header {margin-bottom: 30px;}
.section-body {margin-top: 60px; margin-bottom: 30px;}
.section-footer {margin-top: 60px;}
.blue-light-bg {background-color: var(--blueLight-color);}

@media (min-width:992px) and (max-width:1399px) {
  .section-padding {padding-top: 40px; padding-bottom: 40px;}
}

@media (min-width:768px) and (max-width:991px) {
  .section-padding {padding-top: 40px; padding-bottom: 40px;}
}

@media screen and (max-width:767px) {
  .section-padding {padding-top: 30px; padding-bottom: 30px;}
  .section-header {margin-bottom: 15px;}
  .section-body {margin-top: 15px; margin-bottom: 15px;}
  .section-footer {margin-top: 30px;}
}

/* BTN */
.readMoreArrow {position: relative; font-weight: 500;}
.readMoreArrow span {padding-right: 15px; display: inline-block; text-align: left; transition: all 0.3s;}
.readMoreArrow span::after {content: '\F280'; position: absolute; top: 2px; right: 0; font-size: 12px; font-family: 'bootstrap-icons';}
.readMoreArrow:hover span {padding-right: 20px; transition: all 0.3s;}

.btn-primary-arrow {background-color: var(--btn-primary-color); color: #fff; font-weight: 500; padding:8px 15px;}
.btn-primary-arrow span {padding-right: 15px; display: inline-block; text-align: left; transition: all 0.3s; position: relative;}
.btn-primary-arrow span::after {content: '\F285'; position: absolute; top: 4px; right: 0; font-size: 12px; font-family: 'bootstrap-icons';}
.btn-primary-arrow:hover {background-color: var(--blueDark-color); color: #fff;}
.btn-primary-arrow:hover span {transition: all 0.3s;}

.btn-warning-arrow {background-color: var(--color-yellow); color: #000; font-weight: 500;}
.btn-warning-arrow span {padding-right: 15px; display: inline-block; text-align: left; transition: all 0.3s; position: relative;}
.btn-warning-arrow span::after {content: '\F285'; position: absolute; top: 2px; right: 0; font-size: 12px; font-family: 'bootstrap-icons';}
.btn-warning-arrow:hover {background-color: var(--color-yellow-dark);}
.btn-warning-arrow:hover span {transition: all 0.3s;}

.btn-primary {background-color: var(--btn-primary-color);}
.btn-warning {background-color: var(--color-yellow);}

.blogGradient {background: radial-gradient(circle at center, #0d6efd 0%, #1745c7 30%, #1b2a88 70%); color: white; min-height: 100%;}
.latest-blogs-section .card:nth-child(2){background-color: #BADBF7;}
.latest-blogs-section .card:nth-child(3){background-color: #DBE5FF;}
.latest-blogs-section .card:nth-child(4){background-color: #D7F3E4;}
.latest-blogs-section .card:hover {background-color: #fff;}

.common-banner {position: relative; margin-top: 80px;}
.common-banner .container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);}
.common-banner h1 {font-size: 3.75rem; color: var(--blue-color); font-weight: 700;}
.banner-subheading {font-size: 1.5rem; color: var(--blueDark-color); font-weight: 500;}
.banner-footer {position: absolute; left: 50%; bottom: -60px; z-index: 1; transform: translateX(-50%);}
.banner-footer img {margin: 0 25px;}

@media (min-width:992px) and (max-width:1399px) {
  .common-banner h1 {font-size: 3rem;}
  .banner-footer {display: flex;}
}

@media (min-width:768px) and (max-width:991px) {
  .common-banner .container {transform: translate(-50%, -70%);}
  .common-banner h1 {font-size: 2.75rem;}
  .banner-subheading.mt-4 {margin-top: 0!important;}
  .banner-footer {display: flex;}
}

@media (min-width:768px) and (max-width:991px) {
  .common-banner .banner-img {height: 360px;}
}

@media screen and (max-width:767px) {
  .common-banner .banner-img {height: 400px;}
  .common-banner h1 {font-size: 2rem;}
  .banner-subheading {font-size: 1.25rem;}
  .banner-footer {display: flex; justify-content: space-around; width: 100%;}
  .banner-footer img {flex: 0 0 20%; max-width: 20%; margin: 0;}
}

.introSection {background: linear-gradient(45deg, #f2f6ff 10%, #ffffff 90%);}
.afterBanner {margin-top: 80px;}

@media screen and (max-width:767px) {
  .introSection {text-align: center;}
  .introSection img {margin-top: 20px;}
} 

.fullWidthCta {text-align: center; background: url('../images/common/cta-bg.jpg') no-repeat; background-size: cover; padding: 60px 0;}
.cta-on-demand {background-image: url(../images/common/cta-on-demand.jpg);}

@media (min-width:992px) and (max-width:1399px) {
  .fullWidthCta {padding: 40px 0;}
}

@media screen and (max-width:767px) {
  .fullWidthCta {padding: 30px 0;}
} 

.card {border: none; padding: 20px; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); border: 1px solid #f1f1f1;}
@media screen and (max-width:767px) {
  .card {padding: 10px;}
} 

/* list */
.check-list li {position: relative; padding-left: 30px; margin-bottom: 25px;}
.check-list li::before {content: '\F272'; position: absolute; top: 0; left: 0; font-family: 'bootstrap-icons'; font-size: 20px; color: #00A0E3; font-weight: 700;}

.caret-list li {position: relative; padding-left: 30px; margin-bottom: 15px;}
.caret-list li::before {content: '\F231'; position: absolute; top: -2px; left: 0; font-family: 'bootstrap-icons'; font-size: 20px; color: #00A0E3; font-weight: 700;}

.dot-list li {position: relative; padding-left: 25px; margin-bottom: 10px;}
.dot-list li::before {content: '\F309'; position: absolute; top: -2px; left: 0; font-family: 'bootstrap-icons'; font-size: 20px; color: #00A0E3; font-weight: 700;}

.difference-section {margin: 20px 0 0 0;}
.difference-section .container {background: url('../images/common/partners.jpg') no-repeat 100% 50%; background-size: contain; padding-top: 170px; padding-bottom: 170px;}

@media (min-width:768px) and (max-width:991px) {
  .difference-section .container {padding-top: 0; padding-bottom: 0; background-size: 300px;}
}

@media screen and (max-width:767px) {
  .difference-section .container {padding-top: 0; padding-bottom: 0; background: none;}
}

.clientSayOuter {background: url('../images/home/blue-line.png') no-repeat 100% 0; padding: 130px 0 0 0;}
.clientSayInner {background: url('../images/home/yellow-line.png') no-repeat 0 100%; padding: 0 0 60px 0;}
.clientSayInner .blockquote {background: url('../images/home/quote.png') no-repeat; padding-top: 60px; margin-top: 60px; font-size: 1rem;}

@media (min-width:992px) and (max-width:1399px) {
  .clientSayOuter {background-position: -60% 0;}  
  .clientSayInner {background-position: 130% 100%;}
}
@media (min-width:768px) and (max-width:991px) {
  .clientSayOuter,
  .clientSayInner {background: none; padding: 0;}
}

@media screen and (max-width:767px) {
  .clientSayOuter,
  .clientSayInner {background: none; padding: 0;}
  .clientSayInner h2 {text-align: center; margin-top: 30px;}
  .clientSayInner .blockquote {padding-top: 60px; padding-bottom: 20px; margin: 0;}
  .clientSayInner .slick-prev, 
  .clientSayInner .slick-next {display: none!important;}
}


.partner-section {border-top: 1px solid #eee;}
.partner-section img {vertical-align: middle;}
.partner-section-badge {padding-bottom: 40px; padding-top: 40px;}

.cloud-form-section {background: url('../images/l1-services/leverage.svg') left center no-repeat, linear-gradient(to right, #0060CF, #0060CF); background-size: contain, cover; color: #fff; position: relative; overflow: hidden;}
.cloud-form-section .cta-form-section{margin: auto 50%;}
.cloud-form-section h2{margin-bottom: 20px;}
.para3 {font-weight: 500;font-size: 1.25rem; color: #fff;}
.cta-form .custom-input {border: 1px solid #ccc; border-radius: 0; padding: 10px 12px; font-size: 16px; color: #484848; margin-bottom: 15px;}
.cta-form .submit-btn {background-color: #FFBF36; color: #000; border: none; border-radius: 0; padding: 16px 24px; font-weight: 700; font-size: 16px; transition: background-color 0.3s ease; width: 100%;}
.cta-form .submit-btn:hover {background-color: #e6b800;}

@media screen and (max-width:767px) {
 .cloud-form-section .cta-form-section {margin: 20px 0;} 
}

/* FAQS */
.faqs-section .accordion-item {margin-bottom: 10px;}
.faqs-section .accordion-item:first-of-type,
.faqs-section .accordion-item:last-of-type {border-radius: 0;}
.faqs-section .accordion-button {font-size: 1.25rem; color: var(--blueDark-color);font-weight: 700;}
.faqs-section .accordion-button:hover {color: var(--blue-color);}
.faqs-section .accordion-button:not(.collapsed) {color: var(--blue-color); background-color: transparent;}
.faqs-section .accordion-button:focus {box-shadow: none;}
.faqs-section .accordion-body p.answer-p { font-size: 1rem;color: #484848;font-weight: 500;}

/* Gold Partner Section */
.gold-partner-section .left-col {background-color: #fff3df; padding: 30px; justify-content: end;}
.gold-partner-section .right-col {background-color: #d7ecfd; padding: 30px;}
.gold-partner-section .icon {font-size: 30px;color: #0d6efd; margin-right: 15px;}
.gold-partner-section .chat-call {display: flex; align-items: start; background: url('../images/common/chat-call.svg') no-repeat; padding-left: 60px;}
.gold-partner-section .highlight {font-weight: 600;color: #b88400;}

.slick-dots li,
.slick-dots li button,
.slick-dots li button:before {width: 30px; height: 4px;}
.slick-dots li button:before {content: ' '; background-color: #00A0E3;}