/*===========================================================================*/
/*! Basic resetting......... */
/*===========================================================================*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

.hero-ul li {
    list-style: unset;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    color: var(--text-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;

}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

input,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

a:link,
a:visited,
a:hover,
a:active {
    color: inherit;
}

/*===========================================================================*/
/*! Basic resetting End......... */
/*===========================================================================*/

.container {

    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;

}

/*===========================================================================*/
/*! Section Header......... */
/*===========================================================================*/

.section-header {

    padding: 0 10px;
}

.section-header .container nav {

    padding: 30px 0;
}

.section-header .container .kr-logo {

    background: url(https://21881320.fs1.hubspotusercontent-na1.net/hubfs/21881320/lp-assets/Kry-new-lp-july2023/kr-logo.png) top left no-repeat;
    background-size: contain;
    width: 250px;
    height: 52px;
    display: inline-block;
}

/*===========================================================================*/
/*! Section-1 ......... */
/*===========================================================================*/


/*
  popup css
  */

.kry_lp-cta-btn{color:#fff !important}
.hero-pop-btn {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.popup-container {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.popup {
  background-color: var(--background-color);
  padding: 20px;
  border-radius: 10px;
  width: 400px;
  position: relative;
}

.popup h2 {
    color: var(--text-color) !important;
    margin-top: 0;
    text-align: center;
    font-size: 22px !important;
    padding: 10px;
}
.close-btn {
    color: var(--text-color);
    cursor: pointer;
    font-weight: 500;
    font-size: 40px;
    position: absolute;
    right: 10px;
    top: -5px;
}

@media (max-width: 500px) {
  .popup {
    width: 90%;
  }
  .popup h2 {
   
    font-size: 18px !important;
   
}
}
/* popup css end */




.section-1 a.hero-pop-btn {
    font-size: 17px;
    font-family: "Open Sans", Sans-serif;
    font-size: 20px;
    font-weight: 700;
    fill: white;
    color: white;
    background-color:#53C076;
    padding: 20px 30px 20px 30px;
    width:fit-content;
    border-radius: 15px 15px 15px 15px;
    transition: all .3s;
}

.section-1 a.hero-pop-btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.section-1 {

    padding: 0px 10px 50px 10px;
}

.section-1 .container .kr-hero {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.section-1 .container .kr-hero .kr-hero-left {

    max-width: 44%;
    background: var(--background-color-purple);
    border-radius: 30px;
    padding: 40px 50px;
    order: 1;
    flex-grow: 1;
}

.section-1 .container .kr-hero .kr-hero-left .kr-form-group:not(:nth-last-of-type(1)) {

    margin-bottom: 15px;
}

.section-1 .container .kr-hero .kr-hero-left .kr-form-group label {


    display: block;
    color: #3F3F3F;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.32px;
    margin-bottom: 5px;

}

.section-1 .container .kr-hero .kr-hero-left .kr-form-group input[type="text"],
input[type="email"],
input[type="tel"],
input[type="text"] {

    display: block;
    /* width: 400px; */
    width: 100%;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #4A2985;
    min-height: 50px;
    padding: 0 10px;
    font-family: 'Inter', sans-serif;
}

.section-1 .container .kr-hero .kr-hero-left .kr-form-group input[type="submit"] {

    width: 100%;
    display: inline-block;
    border-radius: 20px;
    background: #FCB53B;
    padding: 21px 53px;
    border: none;
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 15px;
}

.section-1 .container .kr-hero .kr-hero-left .kr-form-group input[type="submit"]:hover {

    color: #ffffff;
    background: #d90873;
}

.section-1 .container .kr-hero .kr-hero-right {

    max-width: 51.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;


}

.section-1 .container .kr-hero .kr-hero-right h1 {

    color: var(--e-global-color-4c564cf );
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.4em;
}

.section-1 .container .kr-hero .kr-hero-right .ktn-hero-right-h1 {

    font-size: 36px;
}



.section-1 .container .kr-hero .kr-hero-right h2 {

    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 0.945631970260223rem + 1.2391573729863694vw, 1.875rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.4em;
}

.section-1 .container .kr-hero .kr-hero-right p {

    color: var(--text-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8em;

}


/*===========================================================================*/
/*! New icons block ......... */
/*===========================================================================*/

.section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 22px;

}

.section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon {

    background: #492A85;
    border-radius: 10px;
    padding: 14px 20px 14px 14px;
    display: flex;
    flex-direction: column;
    justify-content: end;

}

.section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon:nth-child(even) {

    background: #E12172;
}

.section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon .ktn-icon-img {

    display: flex;
    justify-content: end;
}

.section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon .ktn-icon-text h2 {

    font-size: 41px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;

}

.section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon .ktn-icon-text span {

    font-size: 16px;
    margin-left: -5px;
}

.section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon .ktn-icon-text p {

    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}



/*===========================================================================*/
/*! Section-2 ......... */
/*===========================================================================*/

.section-2 {

    padding: 30px 10px 0 10px;
}

.section-2 .container .heading {

    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-2 .container .heading h2 {

    color: var(--text-color);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
}

.section-2 .container .heading p {
    color: var(--text-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8em;
    text-align: center;
}

/*===========================================================================*/
/*! Section-3 ......... */
/*===========================================================================*/

.section-3 {

    padding: 50px 10px;

}

.section-3 .container .kr-ourkey {

    display: flex;
    flex-direction: column;
    gap: 40px;
}

.section-3 .container .kr-ourkey .heading h2 {

    color: var(--text-color);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
}

.section-3 .container .kr-ourkey .content ul {

    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.section-3 .container .kr-ourkey .content ul li {

    width: 100%;

}

.section-3 .container .kr-ourkey .content ul li .box-holder {

    border-radius: 39px;
    overflow: hidden;
    display: flex;
}

.section-3 .container .kr-ourkey .content ul li .box-image {

    width: 40%;
    min-height: 250px;
    display: block;
}

.section-3 .container .kr-ourkey .content ul li .box-image-1 {
    background: url(https://21881320.fs1.hubspotusercontent-na1.net/hubfs/21881320/lp-assets/Kry-new-lp-july2023/Collaboration.png) top center/cover no-repeat;
}

.section-3 .container .kr-ourkey .content ul li .box-image-2 {
    background: url(https://21881320.fs1.hubspotusercontent-na1.net/hubfs/21881320/lp-assets/Kry-new-lp-july2023/Budgeting.png) top center no-repeat;
}

.section-3 .container .kr-ourkey .content ul li .box-image-3 {
    background: url(https://21881320.fs1.hubspotusercontent-na1.net/hubfs/21881320/lp-assets/Kry-new-lp-july2023/Trust.png) top center/cover no-repeat;
}

.section-3 .container .kr-ourkey .content ul li:nth-child(even) .box-holder {

    flex-direction: row-reverse;
}

.section-3 .container .kr-ourkey .content ul li .box-title {

    padding: 30px;
    background:var(--e-global-color-primary);
    min-height: 320px;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-holder li:nth-child(2) .box-title {
    background: #E02672 !important;

}

.section-3 .container .kr-ourkey .content ul li .box-title h3 {

    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 1.0673791821561338rem + 0.7434944237918215vw, 1.625rem);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    /* min-height: 62px; */
}

.section-3 .container .kr-ourkey .content ul li .box-title p {

    padding: 20px 0;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8em;
    text-align: left;
}

.section-3 .test-dev-btn {
    text-align: center;
    margin-top: 50px;
}


/*===========================================================================*/
/*! Section-4 ......... */
/*===========================================================================*/

.section-4 {

    padding: 70px 10px 0px 10px;
}

.section-4 .container .heading {

    display: flex;
    flex-direction: column;
    gap: 30px;
}

.section-4 .container .heading h2 {

    color: var(--text-color);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
}

.section-4 .container .heading p {
    color: var(--text-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8em;
    text-align: center;
}

.section-4 .container .test-dev-image {

    padding: 20px 0 0 0;
}

.section-4 .container .test-dev-image img {

    margin: 0 auto;
    max-width: 85%;

}

.section-4 .container .test-dev-btn {

    text-align: center;
    padding: 30px 0;
}

.section-4 .container .test-dev-btn a,
.section-3 .container .test-dev-btn a {

    display: inline-block;
    max-width: 100%;
    padding: 20px 30px;
    border-radius: 15px;
    border: 2px solid #E02672;
    /* box-shadow: 0px 20px 30px 0px rgba(91, 166, 115, 0.15); */
    color: #ffffff;
    background: #d90873;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.section-4 .container .test-dev-btn a:hover,
.section-3 .container .test-dev-btn a:hover {

    color: #dfdada;
    background: #d90873;
    border: 2px solid #d90873;
}

@media (width <=770px) {
    .section-4 {
        margin-top: 40px;
    }
}

/*===========================================================================*/
/*! Section-5 ......... */
/*===========================================================================*/

.section-5 {

    padding: 30px 10px 30px 10px;
}

.section-5 .container .heading h2 {

    color: var(--text-color);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
}

.section-5 .container .kr-committed {

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
}

.section-5 .container .kr-committed .committed-box-holder {

    width: 32.5%;
    min-height: 240px;
    overflow: hidden;
    border-radius: 39px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    margin-top: 35px;
    background: var(--background-color-gray);
    padding: 40px;
}
.test-dev-image img {
    border-radius: 20px;
}
.section-5 .container .kr-committed .committed-box-holder .box1 h2 {

    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.4em;
}

.section-5 .container .kr-committed .committed-box-holder .committed-box-content {

    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 25px;
}


.section-5 .container .kr-committed .committed-box-holder .committed-box-content img {

    width: 66px;
    height: 66px;
    object-fit: contain;
}

.section-5 .container .kr-committed .committed-box-holder .committed-box-content h3 {
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 1.0673791821561338rem + 0.7434944237918215vw, 1.625rem);
    font-style: normal;
    font-weight: 600;

}

.section-5 .container .kr-committed .committed-box-holder .committed-box-content p {

    padding: 20px 0;
    color: var(--text-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.8em;

}

/*===========================================================================*/
/*! Section-6 ......... */
/*===========================================================================*/

.section-6 {

    padding: 30px 10px 30px 10px;
}

.section-6 .container .heading {

    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-6 .container .heading h2 {

    color: var(--text-color);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
}

.section-6 .container .heading p {
    color: var(--text-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8em;
    text-align: center;
}

/*===========================================================================*/
/*! Section-7 ......... */
/*===========================================================================*/

.section-7 {

    background: #d90873;
    padding:70px 10px;
/*   margin:100px 0 70px 0; */

}


.section-7 .container .kr-testing {
    padding: 20px 0;
    display: flex;
    align-items: center;
}

.section-7 .container .kr-testing .kr-testing-left {

    max-width: 100%;
      display:grid;
    gap:20px;
  place-items: center;
    text-align: center;

}

.section-7 .container .kr-testing .kr-testing-left img {

    max-width:200px;
}

.section-7 .container .kr-testing .kr-testing-right {

    max-width: 65%;

}



.section-7 .container .kr-testing .kr-testing-left h2 {

    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
/*     font-size: clamp(1.375rem, 0.9488847583643123rem + 1.734820322180917vw, 2.25rem); */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/*===========================================================================*/
/*! Section-8 ......... */
/*===========================================================================*/

.section-8 {
    padding: 100px 10px 100px 10px;
}

.section-8 .container .kr-industries .industries-heading h2 {

    color: var(--text-color);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);

    font-style: normal;
    font-weight: 700;
}

.section-8 .container .kr-industries .industries-content ul {

    display: flex;
    gap: 25px 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
}

.section-8 .container .kr-industries .industries-content ul li {

    width: 19%;
    min-height: 210px;
    overflow: hidden;
}

.section-8 .container .kr-industries .industries-content ul li .service {

    min-height: 210px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: start;
    align-items: center;
    padding: 35px 15px 0 15px;
    background: var(--background-color-gray);
    border-radius: 38px;
}

.section-8 .container .kr-industries .industries-content ul li .service .service-image img {

    width: 65px;
    height: 65px;
    object-fit: contain;
}

.section-8 .container .kr-industries .industries-content ul li .service .service-text h3 {

    color: var(--text-color);
    font-family: Inter;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;

}

/*===========================================================================*/
/*! Section-9 ......... */
/*===========================================================================*/

.section-9 {
    padding: 80px 10px;
    border-bottom: 2px solid #D90873;
  
}

.section-9 .container .kr-certification,
.section-10 .container .kr-memberships {

    display: flex;
    flex-direction: column;
    gap: 50px;
}

.section-9 .container .kr-certification .heading>h2,
.section-10 .container .kr-memberships .heading>h2 {

    color: var(--text-color);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
}

.section-9 .container .kr-certification .heading>p,
.section-10 .container .kr-memberships .heading>p {

    color: var(--text-color);
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8em;
    padding-top: 35px;
}

.section-9 .container .kr-certification .content ul,
.section-10 .container .kr-memberships .content ul {

    display: flex;
    gap: 15px;
}

.section-9 .container .kr-certification .content ul li>div,
.section-10 .container .kr-memberships .content ul li>div {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 5px;
}

.section-9 .container .kr-certification .content ul li p,
.section-10 .container .kr-memberships .content ul li p {

    color: var(--text-color);
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.section-9 .container .kr-certification .certificate-btn {

    text-align: center;
}

.section-9 .container .kr-certification .certificate-btn a {

    border: 2px solid #4a2885;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: Roboto, sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    max-width: 250px;
    padding: 20px 20px;
    transition: .2s;
    background: #4a2885;
}

.section-9 .container .kr-certification .certificate-btn a:hover {

    color: #cdcdcd;

}

/*===========================================================================*/
/*! Section-10 ......... */
/*===========================================================================*/

.section-10 {
    padding: 90px 10px 130px 10px;
    background: var(--background-color-purple);
}

.section-10 .container .kr-memberships .content ul li .holder-li {

    display: flex;
    gap: 30px;

}

.section-10 .container .kr-memberships .content ul li:nth-child(1) p {

    margin-top: -8px;
}

.section-10 .container .kr-memberships .content ul li:nth-child(4) p {

    padding-top: 8px;
}


/*===========================================================================*/
/*! Section-12 ......... */
/*===========================================================================*/

.section-12 {
    padding: 90px 10px 50px 10px;
    background: var(    --background-color-purple);
}

.section-12 .certificate-btn {

    text-align: center;
  padding:50px 0;
}

.section-12 .certificate-btn a {

    border: 2px solid #4a2885;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: Roboto, sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    max-width: 250px;
    padding: 20px 20px;
    transition: .2s;
    background: #4a2885;
}

.section-12 .certificate-btn a:hover {

    color: #cdcdcd;

}

.section-12 .container {
    background: var(--background-color);
    padding: 50px;
    display: flex;
  gap:20px;
    border-radius: 20px;
}

.card {
    margin-top: 30px !important;
}

.card2 {
    margin-top: 30px;
    flex-direction: row-reverse;

}

.container.container-2 {
    background: unset;
    text-align: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;

}

.container.container-2 .heading h2 {
  
      color: var(--text-color);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
}

.section-12 .container .left {
    flex: 3;
    padding: 20px;
}

.section-12 .container .left h2 {
    color: var(--e-global-color-4c564cf );
    font-family: "Inter", Sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5em;
}

.section-12 .container .left p {
    font-size: 18px;
    line-height: 1.6em;
    margin-top: 15px;

}
.section-12 .container .left ul{
  
  margin:5px 20px;
}
.section-12 .container .left ul li {
  
  list-style:square;
  font-size:18px;
 
}

.section-12 .container .right {
    flex: 1;
}

.section-12 .container .right img {
    height: auto;

    border-radius: 20px;
}


@media (551px <=width <=800px) {
    .section-12 .container {
        flex-direction: column;
        align-items: center;
        flex-direction: column-reverse;
    }

    .section-12 .container .left h2 {
        text-align: center;

    }
}

@media (width <=550px) {
    .section-12 .container {
        flex-direction: column;
        align-items: center;
        flex-direction: column-reverse;
        padding: 20px;

    }

    .section-12 .container .left h2 {
        font-size: 30px;

    }

    .section-12 .container .right img {
        min-width: unset;
    }

}



/*===========================================================================*/
/*! Section-Footer ......... */
/*===========================================================================*/

.section-footer {

    padding: 60px 10px 80px 10px;
}

.section-footer .container .kr-footer {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.section-footer .container .kr-footer .footer-left {

    max-width: 62%;
}

.section-footer .container .kr-footer .footer-right {

    max-width: 35%;
}

.section-footer .container .kr-footer .footer-right ul {

    display: flex;

}

.section-footer .container .kr-footer .footer-left p {

    color: #b8b7b7;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    line-height: 1.4em;
    font-weight: 400;

}

.section-footer .container .kr-footer .footer-right ul li:not(:nth-last-child(1)) {

    border-right: 1px solid #cfcfcf;
}

.section-footer .container .kr-footer .footer-right ul li a {

    color: #b8b7b7;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    display: inline-block;
    padding: 0 10px;
}

/* For Mobile */
@media (320px <=width <=550px) {
    /*===========================================================================*/
    /*! Section Header......... */
    /*===========================================================================*/

    .section-header .container nav {
        padding: 15px 0;
    }

    .section-header .container .kr-logo {
        width: 200px;
    }

    /*===========================================================================*/
    /*! Section-1 ......... */
    /*===========================================================================*/

    .section-1 {

        padding: 0 10px 50px 10px;
    }

    .section-1 .container .kr-hero .kr-hero-left {

        padding: 30px;
    }

    .section-1 .container .kr-hero .kr-hero-right {

        padding: 0 0 20px 0;
    }

    .section-1 .container .kr-hero .kr-hero-right {
        width: 100%;
    }

    .section-1 .container .kr-hero .kr-hero-left .kr-form-group input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="text"] {

        display: block;
        width: 100%;
        min-height: 40px;
    }

    .section-1 .container .kr-hero .kr-hero-left .kr-form-group input[type="submit"] {

        font-size: 1rem;
        padding: 10px;

    }

    .section-1 .container .kr-hero .kr-hero-left,
    .section-1 .container .kr-hero .kr-hero-right {

        max-width: 100%;

    }



    /*===========================================================================*/
    /*! New icons block ......... */
    /*===========================================================================*/
    
    .section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons {

        grid-template-columns: 1fr;
    }

    .section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon {

        padding: 14px 25px 14px 15px;
        flex-direction: row-reverse;
        justify-content: space-between;

    }

    .section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon .ktn-icon-text {

        display: flex;
        gap: 10px;
        align-items: center;

    }

    .section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon .ktn-icon-text h2 {

        font-size: 30px;

    }

    .section-1 .container .kr-hero .kr-hero-right .ktn-hero-icons .ktn-hero-icon .ktn-icon-text .ktn-icon-text-sub {

        align-self: flex-end;
        line-height: 1.5;
    }





    /*===========================================================================*/
    /*! Section-3 ......... */
    /*===========================================================================*/

    .section-3 {

        padding: 30px 10px;
    }

    .section-3 .container .kr-ourkey .content ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .section-3 .container .kr-ourkey .content ul li {

        width: 100%;
    }

    .section-3 .container .kr-ourkey .content ul li:nth-child(even) .box-holder {

        flex-direction: column;
    }

    .section-3 .container .kr-ourkey .content ul li .box-image-2 {
        background: url(https://21881320.fs1.hubspotusercontent-na1.net/hubfs/21881320/lp-assets/Kry-new-lp-july2023/Budgeting.png) top center no-repeat;
    }

    .section-3 .container .kr-ourkey .content ul li .box-holder {

        max-width: 100%;
        flex-direction: column;

    }

    .section-3 .container .kr-ourkey .content ul li .box-image {

        width: 100%;
        min-height: 200px;
        display: block;
    }

    .section-3 .container .kr-ourkey .content ul li .box-title {
        min-height: 0;
        padding: 30px;
        width: 100%;
    }

    .section-3 .container .kr-ourkey .content ul li .box-title h3 {
        min-height: 0;
    }

    /*===========================================================================*/
    /*! Section-4 ......... */
    /*===========================================================================*/

    .section-4 {
        padding: 0px 10px;
    }

    .section-4 .container .heading {
        gap: 10px;
    }

    .section-4 .container .test-dev-image img {
        max-width: 100%;
    }

    /*===========================================================================*/
    /*! Section-5 ......... */
    /*===========================================================================*/

    .section-5 {

        padding: 20px 10px 0 10px;
    }

    .section-5 .container .kr-committed .committed-box-holder {

        width: 100%;
        min-height: 200px;
    }

    .section-5 .container .kr-committed {

        gap: 30px;
    }

    .section-5 .container .kr-committed .committed-box-holder .committed-box-content {
        gap: 20px;
        align-items: center;
    }

    .section-5 .container .kr-committed .committed-box-holder .committed-box-content h3 {
        text-align: center;
        min-height: 50px;
    }

    .section-5 .container .kr-committed .committed-box-holder .committed-box-content p {
        text-align: center;
    }

    /*===========================================================================*/
    /*! Section-7 ......... */
    /*===========================================================================*/

  .section-7 {

    background: #d90873;
    padding:40px 10px;
  margin:50px 0 30px 0;

}
    
  .section-7 .container .kr-testing {

        flex-direction: column;
        gap: 30px;
    }

    .section-7 .container .kr-testing .kr-testing-left {
        max-width: 100%;
        text-align: center;
      place-items: center;
    }

    .section-7 .container .kr-testing .kr-testing-right {
        max-width: 100%;
    }

    /*===========================================================================*/
    /*! Section-8 ......... */
    /*===========================================================================*/

    .section-8 {

        padding: 50px 10px;
    }

    .section-8 .container .kr-industries .industries-content ul li {

        width: 100%;
    }

    /*===========================================================================*/
    /*! Section-9 ......... */
    /*! Section-10 ......... */
    /*===========================================================================*/

    .section-9,
    .section-10 {
        padding: 50px 10px;
    }

    .section-9.container .kr-certification,
    .section-10 .container .kr-memberships {
        gap: 30px;
    }

    .section-9 .container .kr-certification .heading>p,
    .section-10 .container .kr-memberships .heading>p {

        padding-top: 20px;
    }

    .section-9 .container .kr-certification .content ul,
    .section-10 .container .kr-memberships .content ul {

        flex-wrap: wrap;
    }

    .section-9 .container .kr-certification .content ul li .content-image img,
    .section-10 .container .kr-memberships .content ul li .content-image img {

        max-width: 60%;
        margin: 0 auto;
    }

    /*===========================================================================*/
    /*! Section-Footer ......... */
    /*===========================================================================*/

    .section-footer {

        padding: 30px 10px;
    }

    .section-footer .container .kr-footer .footer-left,
    .section-footer .container .kr-footer .footer-right {

        max-width: 100%;

    }

    .section-footer .container .kr-footer {

        gap: 20px;
    }


}

/* For Tab */
@media (551px <=width <=1024px) {
    /*===========================================================================*/
    /*! Section-1 ......... */
    /*===========================================================================*/

    .section-1 .container .kr-hero .kr-hero-left,
    .section-1 .container .kr-hero .kr-hero-right {

        max-width: 100%;
    }
  .section-1 .container .kr-hero .kr-hero-left {
    
    padding:50px 0 !important;
    display:grid;
    place-items:center;
  }

    .section-1 .container .kr-hero .kr-hero-right {
        padding: 0 0 30px 0;
    }

    /*===========================================================================*/
    /*! Section-3 ......... */
    /*===========================================================================*/

    .section-3 .container .kr-ourkey .content ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;

    }

    .section-3 .container .kr-ourkey .content ul li {

        width: 100%;
    }

    .section-3 .container .kr-ourkey .content ul li .box-image {

        width: 345px;
        display: block;
    }

    .section-3 .container .kr-ourkey .content ul li .box-title h3 {
        min-height: 0;
    }

    /*===========================================================================*/
    /*! Section-4 ......... */
    /*===========================================================================*/
    .section-4 {

        padding: 0px;
    }

    /*===========================================================================*/
    /*! Section-5 ......... */
    /*===========================================================================*/
    .section-5 .container .kr-committed {
        justify-content: center;
        gap: 30px
    }

    .section-5 .container .kr-committed .committed-box-holder {

        width: 47%;
        padding: 30px;
    }

    /*===========================================================================*/
    /*! Section-8 ......... */
    /*===========================================================================*/
    .section-8 {


        padding: 100px 10px 50px 10px;
    }

    .section-8 .container .kr-industries .industries-holder ul li {

        width: 49%;
        min-height: 250px;

    }

    .section-8 .container .kr-industries .industries-holder ul li .service2,
    .section-8 .container .kr-industries .industries-holder ul li .service {

        min-height: 300px;
    }

    .section-8 .container .kr-industries .industries-content ul {

        justify-content: start;
        gap: 14px;
    }

    .section-8 .container .kr-industries .industries-content ul li {

        width: 32%;

    }


    /*===========================================================================*/
    /*! Section-9 ......... */
    /*===========================================================================*/

    .section-9 {
        padding: 50px 10px;
        border-bottom: 2px solid #D90873;
    }

    .section-9 .container .kr-certification .content ul li:nth-child(2) p {

        padding-top: 20px;
    }

    /*===========================================================================*/
    /*! Section-10 ......... */
    /*===========================================================================*/

    .section-10 .container .kr-memberships .content ul {

        flex-wrap: wrap;
        gap: 28px;
    }

    .section-10 .container .kr-memberships .content ul li {

        max-width: 48%;
    }

    /*===========================================================================*/
    /*! Section-Footer ......... */
    /*===========================================================================*/

    .section-footer {

        padding: 30px 10px;
    }

    .section-footer .container .kr-footer .footer-left,
    .section-footer .container .kr-footer .footer-right {

        max-width: 100%;

    }

    .section-footer .container .kr-footer {

        gap: 20px;
        justify-content: center;
    }

}


/* For Widescreen */
@media(width > 1200px) {

    .container {

        max-width: 1160px;
        margin: 0 auto;
        padding: 0 10px;

    }

}

/*===========================================================================*/
/*! Section-13 ......... */
/*===========================================================================*/

.section-13 {

    padding: 70px 0 90px 0;
    background: #4a2885;
}

.section-13 .container .kr-why-choose {

    display: grid;
    gap: 50px;
}

.section-13 .container .kr-why-choose .why-choose-heading h2 {

    color: #fff;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.1988847583643123rem + 1.734820322180917vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
}

.section-13 .container .kr-why-choose .why-choose-content ul {

    display: flex;
    flex-wrap: wrap;
    gap: 40px 20px;
    justify-content: center;


}

.section-13 .container .kr-why-choose .why-choose-content ul li {

    width: 30%;
    display: flex;
    flex-direction: column;
}


.section-13 .container .kr-why-choose .why-choose-content ul li .why-item {

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 15px;
    background: var(--background-color);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    flex-grow: 1;
}



.section-13 .container .kr-why-choose .why-choose-content ul li .why-item .why-top img {

    width: 60px;
    height: 60px;
    object-fit: contain;

}

.section-13 .container .kr-why-choose .why-choose-content ul li .why-item .why-bottom {

    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.section-13 .container .kr-why-choose .why-choose-content ul li .why-item .why-bottom h3 {

    color: var(--text-color);
    font-family: Inter, sans-serif;
    font-size: 1.35rem;
    font-style: normal;
    font-weight: 600;
    text-align: center;


}

.section-13 .container .kr-why-choose .why-choose-content ul li .why-item .why-bottom p {
    color: var(--text-color);
    font-family: Open Sans, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3em;
    text-align: center;
}

.section-13 .container .kr-why-choose .why-choose-content ul li .why-item .why-bottom a {

    background: #4a2885;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    min-width: 75%;
    min-height: 50px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    transition: .2s;
}

.section-13 .container .kr-why-choose .why-choose-content ul li .why-item .why-bottom a:is(:hover, :active) {

    background: #e02672;
}



/* For Mobile */
@media (320px <=width <=550px) {


    /*===========================================================================*/
    /*! Section-13 ......... */
    /*===========================================================================*/

    .section-13 {

        padding: 50px 10px 50px 10px;
    }

    .section-13 .container .kr-why-choose {

        gap: 35px;
    }

    .section-13 .container .kr-why-choose .why-choose-content ul {

        gap: 30px;

    }

    .section-13 .container .kr-why-choose .why-choose-content ul li {

        width: 80%;

    }



}


/* For Tab */
@media (551px <=width <=1024px) {

    /*===========================================================================*/
    /*! Section-13 ......... */
    /*===========================================================================*/
    .section-13 {

        padding: 30px 10px 50px 10px;
    }


    .section-13 .container .kr-why-choose .why-choose-content ul li {

        width: 47%;

    }

}



/*===========================================================================*/
/*! Section-14 ......... */
/*===========================================================================*/

.section-14 {

    padding: 50px 10px 50px 10px;
}

.section-14 .container .ktn-blog-heading h2 {

    font-size: 1.875rem;
    font-size: clamp(1.875rem, 1.2985658409387222rem + 2.346805736636245vw, 3rem);
    
  color:var(--text-color);
    text-align: center;
  margin-bottom:30px;
    
}

.section-14 .container .ktn-blog-heading p {

    font-size: 1.125rem;
    line-height: 1.5em;
    color: #000000;
    text-align: center;
    margin: 5px 0 25px 0;

}

.section-14 .container .ktn-blog-holder {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 45px;
}

.section-14 .container .ktn-blog-holder .ktn-blogs {

    box-shadow: 0 0 10px 0 rgb(100 100 100 / 37%);
    background: var(--background-color);
    border-radius: 20px;
    transition: all 500ms ease-in-out;
    position: relative;
}



.section-14 .container .ktn-blog-holder .ktn-blogs .ktn-blog-img {

    min-height: 225px;
    border-radius: 20px 20px 0 0 ;
    overflow: hidden;

}


.section-14 .container .ktn-blog-holder .ktn-blogs .ktn-blog-img:before {

    content: "";
    position: absolute;
    left: calc(0px - 10px);
    top: 45px;
    height: 150px;
    width: 10px;
    background: rgb(224, 47, 114);
    border-radius: 10px 0px 0px 10px;
    z-index: 2;

}

.section-14 .container .ktn-blog-holder .ktn-blogs .ktn-blog-img img {

    width: 100%;
    height: 225px;
    object-fit: cover;
    object-position: center center;

}

/* if u dont need the hover effect just comment out the below code */

.section-14 .container .ktn-blog-holder:has(:hover)>.ktn-blogs:not(:hover) {

    opacity: .3;

}

.section-14 .container .ktn-blog-holder .ktn-blogs .ktn-blog-details {

    padding: 20px 20px 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.section-14 .container .ktn-blog-holder .ktn-blogs .ktn-blog-details h2 {

    font-size: 1.375rem;
  color:var(--e-global-color-4c564cf ); 
    
    font-weight: 700;
}

.section-14 .container .ktn-blog-holder .ktn-blogs .ktn-blog-details p {

    font-size: 1rem;
  color:var(--text-color);
    
    font-weight: 400;
    line-height: 1.5em;
}

.section-14 .container .ktn-blog-holder .ktn-blogs .ktn-blog-details a.ktn-blog-read {

    font-size: 1rem;
    font-weight: 400;
    color:var(--e-global-color-4c564cf );
}
/* section 14 end */



/* styles for https://go.kryterion.com/build-your-business-case-maximize-the-roi-of-your-certification-program - new ROI section*/ 

.container-roi{
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 100%;
            max-width: 503px;
            padding: 40px;
        }
        .container-roi h1 {
            font-size: 1.8em;
            margin-bottom: 20px;
            color: var(--e-global-color-4c564cf );
        }
        .container-roi form {
            display: flex;
            flex-direction: column;
        }
        .container-roi label {
            margin: 10px 0 5px;
            text-align: left;
            font-weight: bold;
            color: var(--text-color);
        }
        .container-roi input/*, .container-roi .hs-form-field*/ {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
            width: calc(100% - 22px); /* Adjusting width to include padding and border */
        }
        .container-roi button {
            padding: 10px;
            background-color: #E02470;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }
        .container-roi button:hover {
            background-color: #C01E63;
        }
        .container-roi #result {
            margin-top: 20px;
            display: none;
        }
        .container-roi #savings {
            font-weight: bold;
            color: var(--e-global-color-4c564cf );
        }



/* form darkmode fixes */
 

.kry_webinar_form .form-columns-2, .kry_webinar_form .form-columns-1 {
    max-width: 100% !important;
}

.kry_webinar_form .input {
    max-width: 100% !important;
    margin: 7px !important;
    display: flex !important;
}

.kry_webinar_form input, .kry_webinar_form select {
    padding: 12px 10px !important;
    font-size: 14px !important;
    border-radius: 5px !important;
    outline: none !important;
    border: 1px solid rgb(221,221,221) !important;
    width: 100% !important;
	background:var(--background-color);
  color: var(--text-color);
}

.kry_webinar_form input::placeholder {
    color: var(--text-color) !important;
    opacity: 0.5 !important;
}

.kry_webinar_form .no-list, .hs-error-msg {
    margin: 0 0 0 5px !important;
    list-style: none !important;
    font-size: 10px !important;
    color: #ff0000 !important;
}

.kry_webinar_form .inputs-list {
    list-style: none !important;
    padding: 0 0 0 0px !important;
}

.kry_webinar_form .inputs-list .hs-form-booleancheckbox label {
    display: flex !important;
    font-size: 14px !important;
    align-items: start !important;
}

.kry_webinar_form .inputs-list li label > input {
    flex-basis: 7% !important;
}

.kry_webinar_form .inputs-list li label > span {
    margin: 0 0 0 6px !important;
    color: var(--text-color) !important;
}

.kry_webinar_form input[type="submit"] {
    background: #53c076 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 0 #369253 !important;
    color: #fff !important;
    display: inline-block !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin-top: 25px !important;
    padding: 15px !important;
    transition-duration: .3s !important;
    cursor: pointer !important;
    width: 100% !important;
}

.kry_webinar_form input[type="submit"]:is(:hover, :active) {
    box-shadow: inset 500px 0 0 0 #369253 !important;
    color: #fff !important;
}

/* popup form style*/


div.form-pop {
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
}
div.form-pop.active {
    display: block;
}
div.form-pop .form-container {
    margin: 0 auto;
    max-width: 500px;
    position: relative;
}
div.form-pop div.vt_overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}
div.form-pop .form-header {
    color: #fff;
    text-transform: unset;
    font-weight: 400;
    margin-bottom: 0;
    background-color: #4B2F8A;
    padding: 12px 50px;
    text-align: center;
    padding: 15px;
    border-radius: 8px 8px 0 0;
    font-size: 20px;
    line-height: 1.3em;
}
div.form-pop .form-header span.close {
    position: absolute;
    right: 0px;
    padding: 21px 20px 22px 20px;
    top: 0;
    background: #fff;
    cursor: pointer;
}
div.form-pop .hlp_form_con p {
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
    font-size: 16px;
}
div.form-pop .hlp_fdemo_fd {
    border: 0;
    width: calc(100% - 20px);
    height: 35px;
    border-radius: 7px;
    padding-left: 20px;
    margin-top: 13px;
    font-weight: 400;
    color: #282828;
    font-size: 16px;
    outline: 0;
}
div.form-pop input[type="submit"] {
    background-color: #E02672;
    color: #fff;
    border: 0;
    width: 100%;
    margin: 13px 0 0 0;
    border-radius: 12px;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 18px;
    padding: 11px 0;
    cursor: pointer;
}
div.form-pop .form-body {
    background-color: rgba(226, 226, 226, 0.85);
    padding: 13px 25px 28px 25px;
}
div.form-pop .form-body {
    background-color: #ffffff;
  border-radius: 0 0 8px 8px;
}
div.form-pop .form-header {
    padding: 20px;
    border-radius: 8px 8px 0 0;
    font-size: 20px;
}
div.form-pop .form-header span.close {
   background: none;
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
    font-weight: 400;
    padding: 4px;
    right: 8px;
    border: 2px solid grey;
    top: 18px;
   
    transition-duration: .5s;
      width:30px;
    height:30px;
    font-size:16px;
    font-weight:600;
    display:grid;
    place-content:center;
   
}
}
div.form-pop .form-body {
    background: #fff;
    padding: 25px;
    border-radius: 0 0 8px 8px;
}
div.form-pop .form-body table tr,
div.form-pop .form-body table td,
div.form-pop .form-body table {
    border: none;
    padding: 12px;
}
div.form-pop .form-body table tr {
    border-bottom: 1px dashed #e0e0e0;
}
div.form-pop .form-header span.close:hover {
    color: #8f0d03;
}
div.form-pop .form-body table tr td:first-child {
    font-weight: bold;
    background: whitesmoke;
    text-align: right;
    width: 25%;
}
div.form-pop label {
    display: block;
    font-size: 16px;
    color: #000;
}
div.form-pop label span {
    color: red;
}
div.form-pop input[type="text"],
div.form-pop input[type="email"],
div.form-pop select,
div.form-pop textarea {
    width: calc(100% - 20px);
    border-radius: 7px;
    border: 1px solid #cecece;
    padding: 8px 10px;
    font-weight: 400;
    font-size: 15px;
    outline: none;
    
   
    transition-duration: 0.3s;
}
div.form-pop input[type="text"]:focus,
div.form-pop input[type="email"]:focus,
div.form-pop select:focus,
div.form-pop textarea:focus {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #00b8e6;
}
div.form-pop textarea {
    height: 90px;
    resize: none;
    padding: 10px;
}
div.form-pop input[type="checkbox"] {
    margin-right: 8px;
    margin-bottom: 0;
    margin-top: 3px;
    vertical-align: middle;
}

@media(width < 768px) {
  
    div.form-pop .form-container {
    
    max-width: 330px;
  }
}