@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --primaryColor:#FD580A;
    --textColor:#0B1D2D;
}
html{
    font-size: 62.5%;
}
body{
    font-family: "Barlow", sans-serif;
    font-size: 2.26rem;
    color: var(--textColor);
    line-height: 1.17;
    background: white;
    font-weight: 500;
}
h1,h2,h3,h4,h5,h6{
    font-weight: 700;
}
a, button, img{
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,strong,i,ol,ul,li,form,label,footer,header,menu,nav,section {
    margin: 0;
    padding: 0;
}
img{
    max-width: 100%;
}
h1{
    font-size: 4.7rem;
    line-height: 1.08;
}
h2{
    font-size: 3.6rem;
    line-height: 1.19;
}
h3{
    font-size: 3rem;
    line-height: 1.33;
}
h4{
    font-size: 2.4rem;
}
h1 span,
h2 span,
h3 span{
    color: var(--primaryColor);
}

.button{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: white;
    border-radius: 2rem;
    padding: 3.2rem 5rem;
    border: none;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    background-color: var(--primaryColor);
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
    text-align: left;
}
.button:hover{
    background-color: #f7941d;
}
.button img{
    width: 3.2rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

/* banner */
.banner{
    background-color: #f8f8f8;
    position: relative;
    z-index: 1;
    padding: 7rem 0 5rem;
    background-size: cover;
    background-position: center center;
}
.logo{
    width: 25.4rem;
    margin-bottom: 4rem;
}
.banner-content{
    max-width: 50rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 2rem;
    padding: 4rem 4rem 4.5rem;
}
.banner-content p{
    font-weight: 600;
    margin-top: 2rem;
}
.banner-content.v2 h1{
    font-size: 4.4rem;
}
/*compare area*/
.compare_area{
    padding-top: 4rem;
    position: relative;
    z-index: 1;
}
.compare_area::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 62rem;
    z-index: -1;
    -webkit-box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
            box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
    background-color: #F4F6F9;
}
.compare_box{
    background-color: #fff;
    -webkit-box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
            box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
    padding: 4.5rem 3rem;
    border-radius: 2rem;
    margin-top: 6rem;
    min-height: 41rem;
}
.list_row{
    padding-top: 2rem;
}
.list_row img{
    height: 4rem;
}
.list_row p{
    margin-top: 1.5rem;
    max-width: 32.5rem;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}
.compare_box .feature-row p{
    margin-top: 2rem;
}
.compare_box .feature-row img{
    height: 14rem;
}
.compare_box .feature-row>div:nth-child(2) img,
.compare_box .feature-row>div:nth-child(3) img{
    height: 18rem;
    margin-top: -2rem;
    margin-bottom: -2rem;
}

/* feature */
.feature_area{
    padding: 6rem 0;
    text-align: center;
}
.feature_area h3{
    padding-bottom: 2.5rem;
    margin: 0 auto;
    max-width: 106rem;
}
.feature_area img{
    height: 22rem;
    max-width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    margin-bottom: 2.5rem;
}
.feature_area p{
    max-width: 28.8rem;
    font-size: 2.4rem;
    margin-left: auto;
    margin-right: auto;
}
.feature-row>div:first-child p{
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
}
.feature_area .feature-row.v2>div:nth-child(2) p{
    max-width: 35rem;
    margin-left: auto;
    margin-right: auto;
}

/* grant area */
.grant_area{
    background-color: var(--textColor);
    color: #fff;
    padding: 7rem 0;
    background-size: cover;
    background-position: center center;
}
.grant_area h2{
    max-width: 104rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5rem;
}
.grant_area h3{
    font-weight: 500;
    margin-top: 2rem;
}
.info_row{
    padding-top: 4rem;
}
.info_row img{
    height: 4rem;
}
.info_row p {
    font-size: 2.4rem;
    text-transform: uppercase;
    margin-top: 1.5rem;
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}
.info_row.v2 p{
    max-width: 100%;
}

/*content area*/
.content_area{
    padding: 2rem 0 5rem;
}
.content_area p{
    font-size: 2.4rem;
}
.content_area p span,
.content_area p a{
    color: var(--primaryColor);
}
.content_area p a{
    font-weight: 700;
}
.content_area p a:hover{
    color: var(--textColor);
}

/* cta area */
.cta_area{
    padding: 6rem 0;
    background-color: #F4F6F9;
    -webkit-box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
            box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
}
.cta_area .button{
    margin-bottom: 2rem;
}

/*brand area*/
.brand_area{
    padding: 6rem 0;
}
.logo_wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
    row-gap: 3rem;
    margin: 5rem 0;
}
.logo_wrap img{
    max-width: 16.8rem;
    height: 4.5rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -o-object-fit: contain;
       object-fit: contain;
}

/*suitable area*/
.suitable_area {
    padding: 3rem 0 6rem;
    background-color: #F4F6F9;
    -webkit-box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
            box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
}
.suitable_area ul{
    list-style: none;
    padding-top: 1rem;
}
.suitable_area ul li{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-column-gap: 1.2rem;
       -moz-column-gap: 1.2rem;
            column-gap: 1.2rem;
    margin-top: 2rem;
}
.suitable_area ul li::before{
    content: '';
    width: 3.9rem;
    aspect-ratio: 1/1;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    background-image: url(../img/circle-check.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -0.5rem;
    display: block;
}
.suitable_area .not-suitable ul li::before{
    background-image: url(../img/close-circle.svg);
}

/*contact area*/
.form_banner{
    padding: 3rem 0;
    background-position: top center;
}
.form_banner .logo{
    margin-bottom: 2rem;
}
.form_content_area{
    padding: 5.5rem;
}
.form_content_area p{
    margin-top: 2rem;
}
.contact_area{
    padding: 3rem 0 9rem;
    background-color: #F4F6F9;
    -webkit-box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
            box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
}
.contact_area h2{
    padding-bottom: 3rem;
}
.contact_area h4{
    margin-top: 7rem;
}
.input_group{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 2.5rem;
    row-gap: 0.5rem;
}
.input_group label {
    font-weight: 500;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    min-width: 9rem;
    text-align: right;
}
.input_group label small{
    font-size: 1.4rem;
    display: block;
}
.input_group input{
    width: 100%;
    border-radius: 0.5rem;
    height: 6rem;
    border: 0.2rem solid #D7D8DB;
    background-color: #fff;
    outline: none;
    font-size: 2rem;
    padding: 0 1.5rem;
}
.contact_form{
    margin: 0 auto ;
    max-width: 72rem;
    padding-top: 1.5rem;
}
.submit_button_wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
    row-gap: 2rem;
    margin-top: 5rem;
    margin-bottom: 5.5rem;
    max-width: 65rem;
    margin-left: auto;
}
.submit_button_wrap p{
    font-size: 1.6rem;
}
.submit_button_wrap p a{
    color: var(--primaryColor);
}
.submit_button_wrap .button{
    min-width: 17.4rem;
    padding: 1.2rem 3rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    border-radius: 0.7rem;
    font-weight: 500;
}
#response {
    font-weight: 700;
    padding-top: 1rem;
    font-size: 2.2rem;
    padding-bottom: 2rem;
}
#response img{
    height: 10rem;
    margin-bottom: 1.5rem;
    display: none;
    margin-left: auto;
    margin-right: auto;
}
#response.success {
    color: #32c671;
}
#response.error{
    color: #ec3925;
}
#response.success .forSuccess{
    display: block;
}
#response.error .forError{
    display: block;
}
button.btn-close {
    padding: 0;
    position: absolute;
    right: 1.5rem;
    top: 1rem;
}
button.btn-close:focus{
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}

.check_box{
    background-color: #fff;
    padding: 3.5rem 5rem 4.5rem;
    border-radius: 2rem;
    margin-bottom: 3rem;
    -webkit-box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
            box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
}
.check_box h3{
    padding-bottom: 1rem;
}
.form-check{
    font-size: 2.2rem;
    padding-left: 4.5rem;
    margin-bottom: 0;
    margin-top: 2rem;
}
.form-check .form-check-input{
    height: 3rem;
    width: 3rem;
    border-radius: 0.5rem;
    margin-top: -0.2rem;
    margin-left: -4.5rem;
    border-color: #D7D8DB;
}
.form-check-input:checked {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}
.form-check-input:focus{
    -webkit-box-shadow: none;
            box-shadow: none;
}


/* footer */
footer{
    padding: 6rem 0;
    background-color: #F4F6F9;
    font-size: 1.8rem;
    line-height: 1.6;
    -webkit-box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
            box-shadow: 0 0.3rem 3.2rem rgba(0, 0, 0, 0.14);
}
.footer-content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.footer-content>div:last-child{
    text-align: right;
}
.footer-content a{
    color: inherit;
}
.footer-content a:hover{
    color: var(--primaryColor);
}
.footer-link{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
}


@media (min-width:1200px){
    .container{
        max-width: 1140px;
    }
}
@media (min-width:992px) and (max-width: 1199.98px) {
    html{
        font-size: 52%;
    }
}
@media (max-width: 991.98px) {
    html{
        font-size: 54%;
    }
    .content_area p br{
        display: none;
    }
    .button {
        padding: 3.2rem 4rem;
        font-size: 2.5rem;
    }
    .compare_area.v3 br{
        display: none;
    }
    .compare_area.v3::before {
        height: 90rem;
    }
}
@media (max-width: 767.98px) {
    html{
        font-size: 40%;
    }
}
@media (max-width: 575.98px) {
    html{
        font-size: 1.8vw;
    }
    body{
        font-size: 2.2rem;
        line-height: 1.3;
    }
    .container{
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .feature-row>div{
        padding-bottom: 2rem;
    }
    h2 {
        font-size: 3.2rem;
    }
    .footer-content{
        display: block;
    }
    footer{
        font-size: 2.26rem;
    }
    .footer-link{
        margin-top: 2rem;
    }
    .footer-content a{
        display: inline-block;
    }
    .compare_area::before {
        height: 90rem;
    }
    .banner {
        padding: 4rem 0 5rem;
    }
    .logo {
        width: 35rem;
    }
    .button {
        padding: 2.2rem 4rem;
    }
    .logo_wrap{
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .check_box {
        padding: 2.5rem 3rem 3.5rem;
    }
}