.text-blue{color: #0076A8;}
.text-c-green{color: #2DCCD3;}
.text-black{color: #173B47!important;}

/* Hero Section Start */
.recHeroSec{position: relative;padding-top: 158px;padding-bottom: 158px;border-radius: 0px 0px 0px 100px;background-color: #071742;}
.recHeroSec .container{max-width: calc(100% - 10%);position: relative;z-index: 99;}
.recHeroSec h1{margin-bottom: 24px; color: #F1F1F1;font-family: 'Poppins', sans-serif;font-size: 65px;font-style: normal;font-weight: 400;line-height: 75px;}
.recHeroSec h1 span{font-weight: 700;}
.recHeroSec p{margin-bottom: 36px; color: #D3D3D3;font-family: 'Inter', sans-serif;font-size: 40px;font-style: normal;font-weight: 400;line-height: 50px;max-width: 744px;}
.recHeroSec svg.leftWmark{position: absolute;left: 0;top: 0;}
.recHeroSec svg.rightWmark{position: absolute;right: 0;top: 0;}
.recHeroSec svg.centerWmark{position: absolute;right: 0;top: 0;bottom: 0;left: 0;margin: auto;}
.recHeroSec .heroRightImg{position: absolute;right: 0;bottom: 0;width: calc(100% - 50%);z-index: 99;}
.recHeroSec .ring-logo{position: absolute;bottom: -26px;left: 0;right: 0;margin: auto;z-index: 99;}
/* Hero Sectio end */

/* Top section start */
.topSec{padding-top: 128px;position: relative;}
.topSec .container{position: relative;z-index: 99;}
.topSec .topSecWmark{position: absolute;right: 0;top: -124px;z-index: -9;}
.topSec h2{text-align: center;max-width: 1045px;margin: auto;}
.topSec p{color: #48606A;text-align: center;font-size: 30px;font-style: normal;font-weight: 400;line-height: 120%;max-width: 1117px;margin: auto;margin-top: 30px;}
.topSec a{margin-top: 34px;}
/* Top Section End */


/* boxes start */
.boxesSec{padding-top: 94px;padding-bottom: 94px;position: relative;}
.boxesSec .container{max-width: 1144px;position: relative;z-index: 9;}
.boxesSec .row-reverse{flex-direction: row-reverse;margin-top: 88px;margin-bottom: 88px;}
.boxesSec h2{color: #212439;text-align: center;font-size: 60px;font-style: normal;font-weight: 600;line-height: 60px;max-width: 855px;margin: auto;padding-bottom: 94px;}
.boxesSec h3 {margin-bottom: 28px;text-align: left;max-width: 434px;}
.boxesSec h3 span{color: #0076A8;}
.boxesSec p{color: #2B2B2E;font-family: 'Inter', sans-serif;font-size: 20px;font-style: normal;font-weight: 400;line-height: 147%;margin-bottom: 28px;max-width: 515px;}
.boxesSec p a{color: #286A9C;}
.boxesSec .trans-w-mark{position: absolute;left: 0;}
.boxesSec .line-vector{position: absolute;left: 0;right: 0;margin: auto;z-index: -9;height: 2736px;bottom: 0;}
.boxesSec .blue-w-mark{position: absolute;z-index: -9;right: -113px;bottom: -82px;}
.boxesSec .green-w-mark{position: absolute;z-index: -9;left: -110px;bottom: -82px;}
/*boxes end */


/* Form section start */
.formSec{background-color: #D9F9EE;padding-top: 77px;position: relative;}
.formSec .container-fluid{max-width: 90%;position: relative;padding-bottom: 98px;z-index: 9;}
.formSec .robot{position: absolute;bottom: 0;right: 0;z-index: 99;}
.formSec .ring{position: absolute;top: -10px;left: 0;right: 0;margin: auto;}
.formSec .rightWmark{position: absolute;right: 0;top: 30%;}
.formSec h2{color: #212439;text-align: center;font-size: 54px;font-style: normal;font-weight: 600;line-height: 54px;margin-bottom: 62px;}
.formSec .formContainer{max-width: 934px;margin: auto;position: relative;}
.formSec .circle{border-radius: 391px;border: 1px dashed #45C2CC;width: max-content;padding: 10px;position: absolute;z-index: 9;}
.formSec .circle .or{position: absolute;right: 20px;top: 82px;}
.formSec .circle .circleInner{border-radius: 369px;background: #FFF;box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);padding: 12px;}
.formSec .circle .circleInnerDark{border-radius: 341px;background: #45C2CC;padding: 55px 36px;}
.formSec .circle .circleInnerDark h3{color: #071742;text-align: center;font-size: 40px;font-style: normal;font-weight: 600;line-height: 50px;margin-bottom: 7px;}
.formSec .circle .circleInnerDark h6{color: #286A9C;text-align: center;font-size: 24px;font-style: normal;font-weight: 600;line-height: 34px;margin-bottom: 7px;}
.formSec .circle .circleInnerDark p{color: #36505A;text-align: center;font-size: 18px;font-style: normal;font-weight: 500;line-height: 24px;max-width: 272px;margin: auto;}
.formSec .formDiv{border-radius: 30px;background: #FFF;padding: 60px 50px 60px 120px;max-width: 620px;margin-left: auto;position: relative;}
.formSec .formDiv h3{color: #48606A;font-size: 35px;font-style: normal;font-weight: 600;line-height: 40px;margin-bottom: 20px;}
.formSec .formDiv h4{color: #286A9C;font-size: 20px;font-style: normal;font-weight: 500;line-height: 30px;margin-bottom: 20px;}
.formSec .formDiv h6{color: #48606A;font-size: 19px;font-style: normal;font-weight: 600;line-height: 25px;margin-bottom: 24px;}
.formSec .formDiv input{border-radius: 5px;background: #F9F7F7;padding: 20px;color: #727C80;font-size: 14px;font-style: normal;font-weight: 400;line-height: 19px;border: 0;max-width: 394px;border: 1px solid #F9F7F7;}
.formSec .formDiv .down-arrow{position: absolute;left: -42px;bottom: 36px;}
.formSec .formBottomSec{border-radius: 150px 0px;background: #173B47;padding-top: 104px;padding-bottom: 93px;position: relative;z-index: 99;}
.formSec .formBottomSec > .row{position: relative;z-index: 99;}
.formSec .formBottomSec h2{color: #FFF;text-align: center;font-size: 46px;font-style: normal;font-weight: 600;line-height: 56px;max-width: 1124px;margin: auto;margin-bottom: 27px;}
.formSec .formBottomSec p{color: #E9E9E9;text-align: center;font-family: 'Inter', sans-serif;font-size: 30px;font-style: normal;font-weight: 400;line-height: 136%;max-width: 1017px;margin: auto;margin-bottom: 54px;}
.formSec .formBottomSec .formBtmVector{position: absolute;bottom: 0;left: 0;}
.formSec .formDiv form {position: relative;z-index: 999;}
.formSec .formDiv form .small { font-size: 12px; }
/* Form Section end */


/* footer top section start*/
.ftTopSec{padding-top: calc(100% - 84%);padding-bottom: 122px;margin-top: -200px;z-index: 9;position: relative;background: #fff;}
/* footer top section end */


/* Footer Start */
footer{background: #212527;padding-top: 75px;padding-bottom: 65px;text-align: center;position: relative;}
.footer .logo-ring{position: absolute;top: -28px;left: 0;right: 0;margin: auto;z-index: 99;}
.footer h2{color: #FFF;text-align: center;font-size: 46px;font-style: normal;font-weight: 500;line-height: 56px;max-width: 758px;margin: auto;margin-bottom: 30px;}
.footer p{color: #B9BABA;text-align: center;font-size: 16px;font-style: normal;font-weight: 400;line-height: 24px;margin-bottom: 30px;}
/* Footer End */


/* SIGN UP PAGE*/

/* Hero Section start */
.signUpHeroSec{padding-top: 97px;padding-bottom: 97px;}
.signUpHeroSec svg.rightWmark{bottom: 100px;top: unset;}
.signUpHeroSec p{color: #D3D3D3;text-align: center;font-family: 'Inter', sans-serif;font-size: 30px;font-style: normal;font-weight: 400;line-height: 40px;max-width: 1017px;margin: auto;}
/* Hero Section End */

/* Footer form section start */
.signUpFormSec{border-radius: 0px 150px 0px 0px;background: #EAEAEA;}
.signUpFormSec .formContainer{max-width: 944px;}
.signUpFormSec .formDiv{max-width: 100%;padding: 76px 63px;}
.signUpFormSec .formDiv input{max-width: 100%;}
.signUpFormSec .container-fluid{max-width: 97%;}
.signUpFormSec .ring{top: -140px;}
.signUpFormSec .form-check-label {display: block;position: relative;padding-left: 28px;cursor: pointer;font-size: 22px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.signUpFormSec .form-check-label input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.signUpFormSec .checkmark {position: absolute;top: 7px;left: 0;height: 20px;width: 20px;background-color: #eee;}
.signUpFormSec .form-check-label:hover input ~ .checkmark {background-color: #ccc;}
.signUpFormSec .form-check-label input:checked ~ .checkmark {background-color: #0076A8;}
.signUpFormSec .checkmark:after {content: "";position: absolute;display: none;}
.signUpFormSec .form-check-label input:checked ~ .checkmark:after {display: block;} 
.signUpFormSec .form-check-label .checkmark:after {left: 8px;top: 5px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}

/* Footer form section end */


/* MEADIA QUERY */
@media only screen and (max-width: 991px){
    .offcanvas{top: 0;left: 0;padding-left: 7px;padding-right: 7px;min-width: 360px;}
    .offcanvas-header{justify-content: end;padding-top: 38px;}
    .offcanvas-body{margin-top: 46px;}
    .d-desktop{display: none;}
    .d-mob{display: block;}
}

@media only screen and (min-width: 1601px) and (max-width: 1800px){
    .formSec .robot{width: 400px;}
}

@media only screen and (min-width: 1401px) and (max-width: 1600px){

    .recHeroSec{padding-top: 90px;padding-bottom: 90px;}
    .recHeroSec h1{font-size: 60px;line-height: 68px;}
    .recHeroSec p{font-size: 34px;line-height: 44px;}

    .formSec .robot{width: 350px;}

    .ftTopSec{padding-top: calc(100% - 78%);}

    .signUpHeroSec{padding-top: 80px;padding-bottom: 80px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1400px){
    .btn-primary, .btn-secondary{font-size: 16px;line-height: 22px;}

    .sub-heading, .missionSec h2{font-size: 38px;line-height: 48.5px;}

    .recHeroSec{padding-top: 90px;padding-bottom: 90px;}
    .recHeroSec h1{font-size: 44px;line-height: 53px;}
    .recHeroSec p{font-size: 28px;line-height: 38px;}

    .formSec .robot{width: 300px;}

    .ftTopSec{padding-top: calc(100% - 74%);}

    .signUpHeroSec{padding-top: 70px;padding-bottom: 70px;}

}

@media only screen and (min-width: 992px) and (max-width: 1199px){
    header .navbar-nav li .nav-link{padding-left: 10px!important;padding-right: 10px!important;}
    .btn-primary, .btn-secondary{font-size: 14px;line-height: 20px;}

    .sub-heading, .missionSec h2{font-size: 32px;line-height: 38.5px;}

    .recHeroSec{padding-top: 120px;padding-bottom: 120px;}
    .recHeroSec h1{font-size: 44px;line-height: 53px;}
    .recHeroSec .w-mark-bottom{display: none;}
    .recHeroSec p{font-size: 24px;}
    .recHeroSec svg.leftWmark, .recHeroSec svg.rightWmark, .recHeroSec svg.centerWmark{width: 200px;height: 200px;}

    .topSec p{font-size: 26px;}

    .boxesSec h2{font-size: 44px;line-height: 54px;}
    .boxesSec p{font-size: 20px;}

    .formSec h2{font-size: 46px;line-height: 56px;}
    .formSec .circle .circleInnerDark{padding: 54px 25px;}
    .formSec .circle .circleInnerDark h3{font-size: 36px;line-height: 46px;}
    .formSec .circle .circleInnerDark h6{font-size: 22px;line-height: 22px;}
    .formSec .robot{width: 211px;}
    .formSec .formBottomSec{border-radius: 50px 0px;padding-top: 74px;padding-bottom: 74px;}
    .formSec .formBottomSec h2{font-size: 34px;line-height: 44px;}
    .formSec .formBottomSec p{font-size: 20px;margin-bottom: 38px;}

    .ftTopSec{padding-bottom: 98px;padding-top: calc(100% - 74%);}

    .footer h2{font-size: 44px;line-height: 54px;}

    .signUpHeroSec{padding-top: 70px;padding-bottom: 70px;}
   
}

@media only screen and (min-width: 768px) and (max-width: 991px)  {
    .sub-heading, .missionSec h2{font-size: 30px;line-height: 36.5px;}
    .btn-primary, .btn-secondary{font-size: 14px;line-height: 20px;}

    .recHeroSec{padding-top: 74px;padding-bottom: 0px;}
    .recHeroSec .container{max-width: unset;}
    .recHeroSec h1{font-size: 40px;line-height: 49px;}
    .recHeroSec .w-mark-bottom{display: none;}
    .recHeroSec p{font-size: 22px;line-height: 32px;}
    .recHeroSec svg.leftWmark, .recHeroSec svg.rightWmark, .recHeroSec svg.centerWmark{width: 200px;height: 200px;}
    .recHeroSec .heroRightImg{position: relative;width: auto;border-radius: 0 0 0 100px;}

    .topSec p{font-size: 24px;}

    .boxesSec h2{font-size: 40px;line-height: 50px;}
    .boxesSec p{font-size: 18px;}
    .boxesSec .line-vector{display: none;}

    .formSec h2{font-size: 42px;line-height: 52px;}
    .formSec .circle{position: relative;margin: auto;margin-bottom: 32px;}
    .formSec .circle .circleInnerDark{padding: 54px 32px;}
    .formSec .circle .circleInnerDark h3{font-size: 26px;line-height: 36px;}
    .formSec .circle .circleInnerDark h6{font-size: 20px;line-height: 30px;}
    .formSec .circle .circleInnerDark p{font-size: 16px;line-height: 26px;}
    .formSec .container-fluid{padding-bottom: 0;}
    .formSec .formDiv{padding: 40px 34px 40px 34px;margin: auto;}
    .formSec .formDiv h3{font-size: 26px;line-height: 36px;}
    .formSec .formDiv h4, .formSec .formDiv h6{font-size: 18px;line-height: 28px;}
    .formSec .robot{position: relative;margin-top: 32px;display: block;margin-left: auto;}
    .formSec .formDiv .down-arrow{display: none;}
    .formSec .formDiv input{max-width: 100%;}
    .formSec .formBottomSec{border-radius: 50px 0px;padding-top: 74px;padding-bottom: 74px;}
    .formSec .formBottomSec h2{font-size: 34px;line-height: 44px;}
    .formSec .formBottomSec p{font-size: 20px;margin-bottom: 38px;}

    .ftTopSec{margin-top: 0;padding-bottom: 98px;padding-top: 78px;}

    .btn-transparent{width: 252px;justify-content: center;}

    .footer h2{font-size: 36px;line-height: 46px;}

    .signUpHeroSec{padding-top: 64px;padding-bottom: 64px;}

}


@media only screen and (max-width: 767px){
    .sub-heading, .missionSec h2{font-size: 26px;line-height: 35.5px;}
    p{font-size: 18px;line-height: 28px;}
    .btn-primary, .btn-secondary{font-size: 14px;line-height: 20px;}

    .recHeroSec{padding-top: 64px;padding-bottom: 0px;border-radius: 0;}
    .recHeroSec .heroRightImg{position: relative;width: auto;}
    .recHeroSec .container{max-width: unset;}
    .recHeroSec h1{font-size: 34px;line-height: 44px;}
    .recHeroSec .w-mark-bottom{display: none;}
    .recHeroSec p{font-size: 20px;line-height: 30px;}
    .recHeroSec svg.leftWmark, .recHeroSec svg.rightWmark, .recHeroSec svg.centerWmark{width: 200px;height: 200px;}

    .topSec{padding-top: 84px;}
    .topSec .topSecWmark{width: 200px;}
    .topSec p{font-size: 22px;}

    .boxesSec{padding-top: 80px;padding-bottom: 80px;}
    .boxesSec .blue-w-mark, .boxesSec .green-w-mark, .boxesSec .line-vector{display: none;}
    .boxesSec h2{font-size: 28px;line-height: 38px;padding-bottom: 48px;}
    .boxesSec .row-reverse{flex-direction: unset;margin-top: 64px;margin-bottom: 64px;}
    .boxesSec .container > .row{flex-direction: column-reverse;}
    .boxesSec .trans-w-mark{width: 200px;}

    .formSec h2{font-size: 28px;line-height: 38px;margin-bottom: 48px;}
    .formSec .circle{position: relative;margin: auto;margin-bottom: 32px;}
    .formSec .circle .circleInnerDark{padding: 26px 28px;}
    .formSec .circle .circleInnerDark h3{font-size: 24px;line-height: 34px;}
    .formSec .circle .circleInnerDark h6{font-size: 18px;line-height: 28px;}
    .formSec .circle .circleInnerDark p{font-size: 14px;line-height: 24px;max-width: 200px;margin: auto;}
    .formSec .circle .or{width: 48px;top: 56px;}
    .formSec .container-fluid{max-width: 100%;padding-bottom: 0;}
    .formSec .formDiv{padding: 40px 34px 40px 34px;margin: auto;}
    .formSec .formDiv h3{font-size: 26px;line-height: 36px;}
    .formSec .formDiv h4, .formSec .formDiv h6{font-size: 18px;line-height: 28px;}
    .formSec .robot{position: relative;margin-top: 32px;display: block;margin-left: auto;}
    .formSec .formDiv .down-arrow{display: none;}
    .formSec .formDiv input{max-width: 100%;}
    .formSec .formBottomSec{border-radius: 50px 0px;padding-top: 74px;padding-bottom: 74px;}
    .formSec .formBottomSec h2{font-size: 30px;line-height: 40px;}
    .formSec .formBottomSec p{font-size: 20px;margin-bottom: 38px;}

    .ftTopSec{margin-top: 0;padding-bottom: 98px;padding-top: 78px;}

    .btn-transparent{width: 252px;justify-content: center;}

    .footer h2{font-size: 30px;line-height: 40px;}

    .signUpHeroSec{padding-top: 54px;padding-bottom: 54px;}
}