@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;    
    font-style: normal;
}

:root{
    --text-blue:rgba(0, 167, 218, 1);
    --box-blue:rgba(0, 186, 242, 1);
    --text-white:rgba(255, 255, 255, 1);
    --text-black:rgba(0, 0, 0, 1)
}

/* font styles */
.font-50-700{
    font-size: 42px;
    font-weight: 700;
    color: var(--text-black);
}
.font-30-600{
    font-weight: 600;
    font-size: 25px;
    color: var(--text-black);
}
.font-24-400{
    color: rgba(71, 71, 71, 1);
    font-weight: 400;
    font-size: 21px;
    line-height: 36px;
}
.font-60-700{
    font-size: 50px;
    font-weight: 700;
    color: var(--text-white);
}
.font-55-700{
    font-size: 55px;
    font-weight: 700;
    color: var(--text-white);
}
.font-24-600{
    font-size: 24px;
    font-weight: 600;
    color: var(--text-white);
}
.font-25-700{
    font-weight: 700;
    font-size: 20px;
    color: var(--text-black);
}
.font-27-700{
    font-size: 19px;
    font-weight: 700;
    color: var(--text-white);
}
.font-19-600{
    font-size: 19px;
    font-weight: 600;
}
.font-17-600{
    font-size: 17px;
    font-weight: 600;
    color: var(--text-white);
}
.font-22-700{
    font-size: 23px;
    font-weight: 700;
    color: var(--text-white);
}
.font-28-700{
    font-size: 24px;
    font-weight: 700;
    color: var(--text-blue);
}
.font-19-700{
    font-size: 23px;
    font-weight: 700;
    color: var(--text-black);
}
.font-15-400{
    font-size: 15px;
    font-weight: 400;
    color: var(--text-black);
}
.font-16-600{
    font-size: 17px;
    font-weight: 600;
    color: var(--text-blue);
}
.font-13-5-400{
    font-weight: 400;
    font-size: 16px;
}
.font-15-600{
    font-weight: 600;
    font-size: 15px;
}
.font-18-700{
    font-weight: 700;
    font-size: 23px;
}
/* font-ends */

.section-one{
    background-image: url('https://cdn.funnel.kryoni.com/best-peer-review-software/kryoni-ad-two-bg.webp');
    background-size: cover;
}
.imgwrapper{
    width: 30%;
    margin-left: -0.5%;
}
.text-wrapper .title .clr-title{
    color: var(--text-blue);
}
.section-one .logo {
  width: 250px;
}
/* crm style */

.crmform {
    width: 100%;
    border-radius: 1.3rem;
    background-color: var(--box-blue);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}
.zcwf_row .zcwf_col_lab{
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
}
#crmWebToEntityForm .zcwf_row .zcwf_col_fld ,#crmWebToEntityForm .zcwf_row .zcwf_col_lab{
    width: 100%;
}
#crmWebToEntityForm .zcwf_row .zcwf_col_fld input[type=text]{
    width: 100%;
    padding: 9px;
    border-radius: 10px;
}
#crmWebToEntityForm .zcwf_row #formsubmit.formsubmit.zcwf_button{
    width: 48%;
    border-radius: 1rem;
    padding:0.5rem;
    max-width: 49%;
    background: rgba(0, 41, 112, 1);
    font-size: 19px;
    font-weight: 600;
    border: none;
}
#crmWebToEntityForm .zcwf_row .zcwf_button[type=reset]{
    width: 48%;
    border-radius: 1rem;
    padding:0.5rem;
    max-width: 49%;
    background: var(--text-white);
    border: 2px solid rgba(0, 41, 112, 1);
    color: rgba(0, 41, 112, 1);
    font-size: 19px;
    font-weight: 600;
}

/* section-two */
.section-two{
    background-image: url('https://cdn.funnel.kryoni.com/best-peer-review-software/kryoni-ad-sectwo-bg.webp');
    background-size: cover;   
    overflow: hidden;
}

.textcover span{
    color: var(--text-blue);
}
.box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    min-height: 150px;
    border: 1px solid rgba(146, 172, 216, 1);
    
}
.box:hover{
    background-color: var(--box-blue);
    cursor: pointer;
    transition: 0.5s ease-in-out;
}
.boxcover{
    background-color: var(--text-white);
    border-radius: 1rem;
    overflow: hidden;
}
.box:hover h3{
    color: var(--text-white);
}
.mob-kryoni{
    color: var(--text-blue);
}
.man-showwhy{
    transform: translate(-68px, 47px);
    min-width: 456px;
    max-width: 460px;
    left: 0%;
    top: 0%;
}

.imgcover{
    width: 60px;
    height: 60px;
    object-fit: contain;
}
/* --------3rd section---------------------- */
.section-three{
    background-image: url('https://cdn.funnel.kryoni.com/best-peer-review-software/threebg.webp');
    background-size: cover;
}
.blue-heading{
    color: var(--text-blue);
}
.inner-heading-h3{
    color: var(--text-black);
}
.kryoni-choose{
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
    border-radius: 1.8rem;
    background: var(--text-white);
    padding: 10px 15px;
    min-width: 409px;
    max-width: 410px;
    min-height: 110px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.kryoni-choose .font-24-600{
    color: var(--text-black);
    font-size: 20px;
}
.choose-1 {
    transform: translate(15%, -53%);
}
.choose-2 {
    transform: translate(9%, -50%);
}
.choose-3 {
    transform: translate(13%, -25%);
}
.choose-4{
    transform: translate(-8%, -52%);
}
.choose-7 {
    transform: translate(15%, 15%);
}
.choose-5{
   transform: translate(-8%,-39%);
}
.choose-6 {
    transform: translate(-7%, -39%);
}
.choose-8{
   transform: translate(-20%,-11%);
}
/* ---------------------section-4---------------------------- */
.section-four{
    background-image: url('https://cdn.funnel.kryoni.com/best-peer-review-software/kryoni-ad-sectwo-bg.webp');
    background-size: cover;
}
.btn-blue, .btn-blue:hover,.btn-blue:active ,.btn-blue:focus{
    background-color: var(--text-blue);
    color: var(--text-white);
    padding: 10px 40px;
    border-radius: 5px;
    border: none;
}


@media (min-width:320px) and (max-width:575.98px) {
    .imgwrapper{
        width: 100%;
    }
    .imgwrapper img{
        min-width: 50%;
        max-width: 51%;
    }
    .section-four .font-60-700{
        font-weight: 700;
        font-size: 18px;
    }
    #crmWebToEntityForm.zcwf_lblLeft{
        padding: 15px !important;
    }
    .section-four .font-19-600{
        font-size: 16px;
    }
}
@media (min-width:320px) and (max-width:767.98px) {
    /* section-two */
    .section-three{
        background-image: none;   
    }
    .section-two{
        background-image: url('https://cdn.funnel.kryoni.com/best-peer-review-software/mob-sect.webp');
    }
    .section-four{
        background-image: url('https://cdn.funnel.kryoni.com/best-peer-review-software/mob-boot.webp');
        background-size: cover;
    }
    .font-60-700 {
        font-size: 24px;
    }
   
}

@media (min-width:768px) and (max-width:991.98px) {
    .man-showwhy{
        display: none;
    }
     .font-50-700{
        font-size: 30px;
    }
    .font-30-600 {
        font-size: 21px;
    }
    .font-24-400{
        font-size: 17px;
    }
    .font-60-700 {
        font-size: 30px;
    }
    
}
@media (min-width:992px) and (max-width:1199.98px) {
    #crmWebToEntityForm .zcwf_row #formsubmit.formsubmit.zcwf_button{
    width: 47%;
}
#crmWebToEntityForm .zcwf_row .zcwf_button[type=reset]{
    width: 47%;
}
.btn-blue, .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
    padding: 10px 30px;
}

.font-60-700 {
    font-size: 49px;
}
}