.btn-primary{background: #0FB0F8; color: #fff!important; border-radius: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; padding: 8px 24px;}
.btn-primary-line{background: #fff; color: #0FB0F8!important; border-radius: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; padding: 7px 24px; border:2px solid #0FB0F8; color: #0FB0F8;}
a{text-decoration: none;}
.btn{border-color: #0FB0F8;}
.m-auto{margin: auto;}
.p100c{padding-bottom: 100px!important;}
.p-5new{padding: 3rem;}
.burger{display: none;}
.img-fluid{width: 100%;}
.modal-xxl{max-width: 70%; margin: 1.75rem auto;}
.logo-mobile{max-width: 250px;height: auto;padding-right: 20px; max-height: 51px}

.menu{font-family: 'Montserrat', sans-serif;box-shadow: 0px 5px 28px rgba(0, 64, 92, 0.08); padding: 12px 0; position: fixed; z-index: 30; background: #fff;}
.menu .style{justify-content: space-between; display: flex; align-items: center;}
.menu ul{list-style: none; margin: 0;}
.menu ul li{display: inline; padding-right: 24px;}
.menu ul li a{color: #0F172A; font-weight: 600; font-size: 20px;}

.burger{cursor: pointer;}
ul#menu {display: none;background: #fff;position: absolute;top: 75px;padding: 0;margin: 0;left: 0;box-shadow: 0px 3px 5px #c3e2fe;z-index: 9;width: 100%;}
ul#menu li {transition: background 0.2s;width: 100%;display: inline-block;text-align: center;padding-bottom: 16px;}

.section-1{background: #DDEFFF; padding: 145px 0 70px 0;}
.section-1 h1{font-family: 'Montserrat', sans-serif; color: #302574; font-weight: 700; font-size: 56px; padding-bottom: 26px;}
.section-1 p{font-family: 'Nunito', sans-serif; font-size: 20px; color: #51559D; padding-bottom: 26px;}
.section-1 .style{display: flex; align-items: center;}
.section-1 .style .feather{width: 18px; height: 18px;}

.section-2{ padding: 70px 0;}
.section-2 h2{font-family: 'Montserrat', sans-serif; color: #000; font-weight: 600; font-size: 56px; padding-bottom: 0; text-align: center;}
.section-2 p{font-family: 'Nunito', sans-serif; font-size: 26px; color: #8a8a8a; padding-bottom: 26px;}
.section-2 .style{display: flex; align-items: center; padding-bottom: 100px;}
.section-2 .style h3{font-family: 'Montserrat', sans-serif; color: #000; font-weight: 600; font-size: 27px;}
.section-2 .style p{font-family: 'Nunito', sans-serif; font-size: 20px; color: #8a8a8a; line-height: 180%;}
.section-2 .style .fig{padding: 0 50px;}
.section-2 .style .icon1{background: url('../images/icon-section2a.png') no-repeat left 70px top; padding: 0 80px 0 160px;}
.section-2 .style .icon2{background: url('../images/icon-section2b.png') no-repeat left 70px top; padding: 0 80px 0 160px;}
.section-2 .style .icon3{background: url('../images/icon-section2c.png') no-repeat left 70px top; padding: 0 80px 0 160px;}

.section-3 {display: flex; align-items: center; padding: 70px 0; background: #f9f9f7;}
.section-3 h2{font-family: 'Montserrat', sans-serif; color: #000; font-weight: 600; font-size: 42px; padding-bottom: 30px;}
.section-3 p{font-family: 'Nunito', sans-serif; font-size: 21px; color: #8a8a8a; padding-bottom: 26px;}
.section-3 .hh-logo{width: 200px;}
.section-3 .left{padding: 0 7rem 0 16rem;}
.section-3 .right{position: relative;}
.section-3 .right .jen{position: absolute; left: -127px; bottom: -15px; width: 200px;}
.section-3 .right .hh-video{border-radius: 24px 0 0 24px;}

.section-4{ padding: 70px 0;}
.section-4 h2{font-family: 'Montserrat', sans-serif; color: #000; font-weight: 600; font-size: 56px; padding-bottom: 0; text-align: center;}
.section-4 p{font-family: 'Nunito', sans-serif; font-size: 26px; color: #8a8a8a; padding-bottom: 26px;}
.section-4 .style{display: flex; flex-wrap: wrap;}
.section-4 .style .box{border-radius: 24px; margin: 0 24px 24px 0; padding: 30px; min-height: 310px;}
.section-4 .style .box.col1{background: #EFFAFF url('../images/icon-section4a.png')no-repeat top 30px left 30px;}
.section-4 .style .box.col2{background: #F2F3FF url('../images/icon-section4b.png')no-repeat top 30px left 30px;;}
.section-4 .style .box.col3{background: #EFFFF4 url('../images/icon-section4c.png')no-repeat top 30px left 30px;;}
.section-4 .style .box.col4{background: #FFFAEB url('../images/icon-section4d.png')no-repeat top 30px left 30px;;}
.section-4 .style .box.col5{background: #FFF8F8 url('../images/icon-section4e.png')no-repeat top 30px left 30px;;}
.section-4 .style .box.col6{background: #EDF4FF url('../images/icon-section4f.png')no-repeat top 30px left 30px;;}
.section-4 .style .box h3{font-family: 'Montserrat', sans-serif; color: #18181B; font-size: 27px; font-weight: 700; padding: 90px 0 0 0;}
.section-4 .style .box p{font-family: 'nunito', sans-serif; color: #52525B; font-size: 16px; padding: 0; margin: 0;}

.section-5{background: #8ADBFF url(../images/icon-quote.png) no-repeat top 60px center; border-radius: 32px; position: relative; padding-bottom: 70px; overflow: hidden;}
.section-5 h2{font-family: 'Montserrat', sans-serif; color: #000; font-weight: 600; font-size: 56px; padding: 150px 0 50px 0; text-align: center;}
.section-5::after{content: ''; position: absolute;width: 354px;height: 241px;left: -165px;top: -110px;opacity: 0.4;border: 8.4px solid #FFFFFF; border-radius: 50%;}
.section-5::before{content: ''; position: absolute;width: 387px;height: 267px;right: -180px;bottom: -130px;border: 8.4px solid #FFFFFF; border-radius: 50%;}
.section-5 .testimoni .btn-testi{background:#E2F6FF; color: #0FB0F8;font-family: 'Montserrat', sans-serif; font-size: 18px; border-radius: 8px; padding: 8px; border: none; font-weight: 700;}
.section-5 .testimoni{background: #fff; border-radius: 24px; padding: 40px 90px 40px 90px;}
.section-5 .inf{display: flex; justify-content: space-between; align-items: center;}
.section-5 .testimoni .text{font-family: 'Nunito', sans-serif; font-size: 28px; color: #475569; font-style: italic; padding-bottom: 20px; text-align: center;}
.section-5 .testimoni .client{display: flex; align-items: center;}
.section-5 .testimoni .client img{padding-right: 12px;}
.section-5 .testimoni .client h5{font-family: 'Nunito', sans-serif; font-size: 20px; font-weight: bold; margin: 0;}
.section-5 .testimoni .client p{font-family: 'Nunito', sans-serif; font-size: 20px; color: #475569; margin: 0;}
.section-5 .testimoni .brand{}
.section-5 .testimoni.diff{display: flex;padding: 40px; justify-content: space-between;}
.section-5 .testimoni.diff .client{flex-direction: column; text-align: center;}
.section-5 .testimoni.diff .text{font-size: 16px;width: 600px;height: 165px;overflow-y: scroll;margin: 0;padding: 0;text-align: left;}
.section-5 .testimoni.diff .client h5{font-size: 16px; }
.section-5 .testimoni.diff .client p{font-size: 16px; }

.section-5a h2{font-family: 'Montserrat', sans-serif; color: #000; font-weight: 600; font-size: 56px; padding: 50px 0 50px 0; text-align: center;}
.section-5a .prestigious{margin-bottom: 90px; position: relative;}
.section-5a .prestigious .owl-nav{position: absolute;top: 0;width: 100%; text-align: left; font-size: 60px;}
.section-5a .prestigious .owl-nav .owl-prev{position: absolute; left: -40px; top: -35px;}
.section-5a .prestigious .owl-nav .owl-prev:hover{background: none; color: #0FB0F8;}
.section-5a .prestigious .owl-nav .owl-next{position: absolute; right: -40px; top: -35px;}
.section-5a .prestigious .owl-nav .owl-next:hover{background: none; color: #0FB0F8;}
.section-5a .prestigious .owl-dots{margin-top: 50px;}
.section-5a .prestigious .owl-dot.active span{background: #0fb0f8!important;}
.section-5a .prestigious .owl-dot span{border-radius: 0!important; width: 15px!important; height: 3px!important; background: rgba(204, 204, 204, 1)!important;}
.section-5a .owl-carousel.owl-drag .owl-item img{width: 75%;}

.section-6{background: #F4FCFF;padding: 70px 0 120px 0;}
.section-6 h2{font-family: 'Montserrat', sans-serif; color: #000; font-weight: 600; font-size: 56px; padding-bottom: 0; text-align: center;}
.section-6 p{font-family: 'Nunito', sans-serif; font-size: 26px; color: #8a8a8a; padding-bottom: 26px;}
.section-6 .more{color: #0FB0F8;font-family: 'Nunito', sans-serif; font-size: 20px;}
.section-6 .style{display: flex;}
.section-6 .style .box{background: #FFFFFF;box-shadow: 0px -5px 32px #E4EAFB;border-radius: 24px; padding: 24px; margin: 0 16px; min-height: 405px;}
.section-6 .style .box img{border-radius: 16px;}
.section-6 .style .box h3{font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 24px; color: #090914; line-height: 24px; padding: 32px 0 0 0;}
.section-6 .style .box h3 a{color: #090914;}
.section-6 .style .box .cat{background: #E2F6FF; border-radius: 8px; padding: 10px; font-family: 'Nunito', sans-serif; font-size: 16px; color: #008AC9;}

.section-7{background: #DDEFFF; padding: 150px 0 70px; position: relative;}
.section-7 .style{display: flex; justify-content: space-between; align-items: center;}
.section-7 .style h5{color: #0B0B0B;font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; padding-bottom: 24px;}
.section-7 .style h6{font-family: 'Nunito', sans-serif; font-size: 16px; line-height: 26px; margin-bottom: 18px;}
.section-7 .style h6 a{color: #0B0B0B;}
.section-7 .style p{color: #0B0B0B; font-family: 'Nunito', sans-serif; font-size: 16px; line-height: 26px; margin-bottom: 6px;} 
.section-7 .style .flag{display: flex; justify-content: space-between;}
.section-7 .style .list{display: flex; justify-content: end; flex-direction: column;}
.section-7 .style .list p img{margin-right: 12px;}
.section-7 .style .list ul{list-style: none; display: flex; margin: 12px 0 0 0; padding: 0;}
.section-7 .style .list ul li{padding-right: 12px};
.section-7 .style .list .link{margin-left: 100px;}
.section-7 .supplement{background: #FFFFFF;display: flex; justify-content: space-between; align-items: center; box-shadow: 0px 6px 25px rgba(0, 84, 121, 0.31);border-radius: 32px; padding: 50px 100px 50px 220px; position: absolute; top: -90px; overflow: hidden;}
.section-7 .supplement div{font-family: 'Montserrat', sans-serif;z-index: 10;  font-weight: 700; font-size: 24px; color: #18181B; width: 730px; margin-right: 30px;}
.section-7 .supplement::after{content: ''; width: 231px; height: 158px; position: absolute; left: -20px; bottom: -40px; background: url('../images/avatar-1.png') no-repeat;}
.section-7 .supplement::before{content: ''; width: 127px; height: 108px; position: absolute; right: -15px; bottom: -25px; background: url('../images/avatar-2.png') no-repeat;}

.footer{background: #0FB0F8;font-family: 'Nunito', sans-serif; font-size: 16px; padding: 24px; color: #fff; margin: 0; text-align: center;}
.footer p{margin: 0;}
.footer a{color: #fff; text-decoration: underline;}

@media (max-width: 1400px) {
    .section-3 .left{padding: 0 7rem 0 7rem;}
    .section-3 h2{font-size: 36px;} 
    .section-3 .hh-logo{width: 190px;}
    .section-3 .right .jen{width: 180px; left: -120px;}
}

@media (max-width: 820px) {
    .section-1 h1{font-size: 36px;}
    .section-1 .btn{margin-bottom: 12px;}
    .section-1 .style{flex-direction: column-reverse;}
    .section-2 {padding: 70px 0 0 0;}
    .section-2 .style{flex-direction: column;}
    .section-2 .style:last-child{padding-bottom: 0;}
    .section-2 .style.diff{flex-direction: column-reverse;}
    .section-2 .style .icon1, .section-2 .style .icon2, .section-2 .style .icon3{margin: 50px 0 0 0;}
    .section-3{display: block;}
    .section-3 .right{padding: 4rem 0 0 7rem;}
    .section-3 .right .jen{left: -7px;}
    .section-5 .inf{flex-direction: column;}
    .section-5 .testimoni{padding: 40px 50px 40px 50px;}
    .section-5 .testimoni .brand{margin: 20px 0 0 0;}
    .section-5 .testimoni .btn-testi{margin-top: 20px;}
    .section-5 .testimoni.diff{flex-direction: column;}
    .section-5 .testimoni.diff .text{width: auto; margin-top: 16px;}
    .section-6 .style{display: block;}
    .section-6 .style .box{margin: 0 0 30px 0;}
    .section-7 .container{position: relative;}
    .section-7 .supplement{padding: 20px 40px 20px 40px; top: -240px;}
    .section-7 .supplement div{width: auto; padding: 0 0 0 120px; font-size: 17px;}
    .section-7 .supplement::after{background-size: 150px; bottom: -80px;}
    .section-7 .supplement::before{right: -55px;bottom: -55px; background-size: 80px;}
    .section-7 .style{flex-direction: column;}
    .section-7 .style .list{justify-content: space-between;}
    .section-7 .style .list .link{margin: 30px 0 0 0;}
}

@media (min-width: 821px) and (max-width:990px) {
  .section-1 .style{display: block;}
  .section-1 .style .img-fluid{margin-top: 50px;}
  .section-2 .style{display: block;}
  .section-2 .style .icon1{margin-top: 26px;}
  .section-2 .style .icon3{margin-top: 26px;}
  .section-3{display: block;}
  .section-3 .right{margin-top: 26px;padding-left: 115px;}
  .section-3 .right .jen{left: 0;}
  .section-6 .style{display: block;}
  .section-6 .style .box{margin-bottom: 26px;}
  .section-7 .style{display: block;}
  .section-7 .supplement{width: 720px;}
  .section-7 .supplement div{font-size: 16px;}
}
@media (max-width: 560px) {
    .padding-m{padding-bottom: 100px;}
    .burger {display: block;}
    .p-5new{padding: 20px;}
    .menu .main{display: none;}
    .menu .login{display: none;}
    .section-1 h1{font-size: 30px; padding: 20px 0;}
    .section-2 h2{font-size: 36px;}
    .section-2 p{font-size: 18px;}
    .p100c{padding-bottom: 50px!important;}
    .section-2 .style{padding-bottom: 20px;}
    .section-2 .style h3{font-size: 24px;}
    .section-2 .style p{font-size: 20px; line-height: 150%;}
    .section-2 .style .icon1{background: url('../images/icon-section2a.png') no-repeat left 20px top 6px; padding: 0 20px 0 80px; background-size: 40px;}
    .section-2 .style .icon2{background: url('../images/icon-section2b.png') no-repeat left 20px top 6px; padding: 0 20px 0 80px; background-size: 40px;}
    .section-2 .style .icon3{background: url('../images/icon-section2c.png') no-repeat left 20px top 6px; padding: 0 20px 0 80px; background-size: 40px;}
    .section-3 .left{padding: 0 2rem 0 2rem;}
    .section-3 h2{font-size: 36px;}
    .section-3 p{font-size: 20px;}
    .section-3 .right .jen{left: 0; width: 80px;}
    .section-3 .right{padding: 3rem 0 0 3rem;}
    .section-4 h2{font-size: 36px;}
    .section-4 p{font-size: 20px; padding: 0 16px 26px 16px;}
    .section-4 .style .box{margin: 0 24px 24px 24px;}
    .section-5 h2{font-size: 36px;}
    .section-5 .testimoni{padding: 20px;}
    .section-5 .testimoni .client{flex-direction: column; text-align: center;}
    .section-5 .testimoni .client h5{padding-top: 12px;}
    .section-5 .testimoni .text{font-size: 21px;}
    .section-5 .testimoni .btn-testi{font-size: 16px;}
    .section-5a .prestigious .owl-dots{display: none;}
    .section-5a h2{font-size: 26px;}
    .section-5a .prestigious .owl-nav .owl-prev {position: absolute;left: 130px;top: 30px;}
    .section-5a .prestigious .owl-nav .owl-next {position: absolute;right: 130px;top: 30px;}
    .section-6 h2{font-size: 36px;}
    .section-6 p{font-size: 20px;}
    .section-7 .supplement{flex-direction: column; margin-right: 1rem; padding: 20px 40px 60px 40px; top: -280px;}
    .section-7 .supplement div{padding: 0 0 20px 0; margin: 0;}
    .section-7 .supplement .btn{z-index: 10;}
    .section-7 .supplement::after{background-size: 100px;bottom: -105px; left: -10px;}
    .section-7 .supplement::before{background-size: 65px;right: -70px;bottom: -65px;}
    .logo-footer{margin-top: 20px;}
}