@import url('https://fonts.googleapis.com/css2?family=Poppins: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');

/* Overall */
#main_index{
    overflow: hidden;
    padding-bottom: 0px !important;
}
a:hover{
    text-decoration: unset;
}
:root{
    --sec-padding: 5rem;
}

/* Btn */
.main-btn{
    color: #fff;
    background: linear-gradient(to right, #0066b2, #0097d6);
    border-style: none;
    padding: 12px 100px 14px;
    font-size: clamp(.95rem, 1.5vw, 1.5vw);
    font-weight: 700;
    transition: all .3s ease;
    
    &:hover{
        transform: scale(1.05);        
        box-shadow: 0 0 5px rgba(0, 102, 178, 0.5), 0 0 15px rgba(0, 150, 213, 0.5);
    }
}

/* Text */
.subtitle-style{
    font-size: clamp(.95rem, 1.05vw, 1.05vw);
    font-weight: 400;
    margin-bottom: 5px;
}
.title-style{
    color: #000;
    font-size: clamp(1.7rem, 2.5vw, 2.5vw);
    font-weight: 700;
    margin: 0;   
}
.content{
    font-size: clamp(.9rem, 1.1vw, 1.1vw);
    line-height: 1.85;
    margin: 0;
}

/*nav*/
#top_spacing{
    height:150px !important;
}

.navbar_type8 {
    position: fixed;
    display: flex;
    background-color: #0065a5;    
    width: 85%;
    height: 92px;
    z-index: 100;
    margin: 0 7.5%;    
    top: 7.5%;
}

.dark_nav{
    background-color: rgb(0, 101, 165, 90%) !important;
}

.navbar_type8 .nav_tab{
  gap: 3.5vw;  
}
.navbar_type8 .nav_tab .nav_item a {
    color: #fff;
    font-weight: 600;
    font-size: clamp(.85rem, 1.25vw, 1.25vw);
    padding: 0;
}

.navbar_type8 .nav_tab .nav_item::before {
    border-bottom: 2px solid #fff;
}

.navbar_type8 .nav_tab .dropdown .dropdown-menu .dropdown-item a{
    color: #fff !important;
    font-weight: 400;
    text-align:left;
}

.navbar_type8 .nav_tab .dropdown .dropdown-menu .dropdown-item a:hover {
    color: #ccc !important;
}
.navbar_type8 .logo img {
    padding: 0px;
    width: 100%;
}
.navbar_type8 .logo{
  flex: 0 1 22%;
}

.navbar_mobile{
    background: #005b88;
}
.navbar_mobile .btn-outline-light{
    color: #fff;
    border-color: #fff;
}
.navbar_mobile .logo_img{
    max-height: 30px;
}
.navbar_mobile .row_1{
  height: 100%;
  margin: 0;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

@media(max-width:1200px){
    .navbar_type8{
        top: 5%;
    }
}

@media all and (max-width: 992px){
    #top_spacing{
        height:80px !important;
    }  
    
    .navbar_type8{
        display:none;
    }    
}

/* Banner */
.slider_banner_bullet{
    margin-bottom: 0 !important;
}
.slider_banner_bullet .banner_content{
    opacity: 1 !important;
}

.b-arrow{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 3%;
    margin: auto;
    animation: slideInDown 1s linear infinite alternate;
}

.slider_banner_bullet .slick-arrow{
    z-index: 1;
}
.slider_banner_bullet .slick-prev{
    width: 50px;
    height: 50px;   
    left: 6%;
    top: 49%;
}
.slider_banner_bullet .slick-next{
    width: 50px;
    height: 50px;    
    right: 6%;
    top: 49%;
}
.slider_banner_bullet .slick-prev::before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: url(https://cdn1.npcdn.net/images/BUTTON_1_fghro7_1774495332.png?md5id=dec8b1ac1258d33ac95d675366558a27&new_width=110&new_height=110&type=4);
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    display: block;
}
.slider_banner_bullet .slick-next::before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: url(https://cdn1.npcdn.net/images/BUTTON_2_4px2sm_1774495332.png?md5id=dec8b1ac1258d33ac95d675366558a27&new_width=110&new_height=110&type=4);
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    display: block;
}

.slider_banner_bullet .slick-dots{
    bottom: unset;
    top: 68%;
    left: 13%;
    width: unset;
}

@media(min-width:991px){
    .slider_banner_bullet{
        margin-top: -150px;      
    }   
}

@media(max-width:991px){
    
    .slider_banner_bullet .slick-prev{        
        width: 40px;
        height: 40px;
        left: 3%;
    }
    .slider_banner_bullet .slick-next{        
        width: 40px;
        height: 40px;
        right: 3%;
    }
    .slider_banner_bullet .slick-dots{
        top: 67%;
        left: 12%;
    }
}

@media(max-width:576px){
    .slider_banner_bullet .slick-prev,
    .slider_banner_bullet .slick-next{
        top: 35%;
    }
    .slider_banner_bullet .slick-dots{
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
    }
}
    
/* About */
.hp_about{
    background: #e8f0f6;
    padding-bottom: calc(var(--sec-padding) * .65);
}
.abt-content .content{
    color: #1a1a1a;
    font-size: clamp(1rem, 1.3vw, 1.3vw);
    line-height: 1.75;
    margin-bottom: 1.75rem;
}
.hp_about .title-box .title-style{
    display: flex;    
    align-items: center;    
    white-space: nowrap;
    gap: 3rem;
    
    &.lineAnim:after{
        width: 100%;
    }
}
.hp_about .title-box .title-style:after{
    display: inline-flex;
    content: "";
    width: 0%;
    height: 1.5px;
    background: #888;
    transition: all .3s linear;
}

.abt-frame{
    animation: floatAround 13s ease-in-out infinite;
}

@keyframes floatAround {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5px, -5px);
  }
  50% {
    transform: translate(-5px, 5px);
  }
  75% {
    transform: translate(5px, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@media(min-width:991px){
    .abt-frame{
        margin-left: -18%;    
        width: calc(115% + 18%);
    }

    .abt-content{
        margin-left: 12%;
    }
}

@media(min-width:576px){
    .hp_about .container-fluid{
        width: 83%;        
        padding: 0;
    }
}

@media(max-width:991px){
    .hp_about .row:nth-child(2){
        flex-direction: column-reverse;
    }
    .abt-frame{
        margin-top: 3rem;
    }
}

@media(max-width:768px){
    .hp_about{
        padding-top: var(--sec-padding);
    }
    .hp_about .title-box .title-style{
        gap: 1rem;
    }
}

@media(max-width:576px){
    .hp_about .title-box .title-style{
        white-space: normal;
        
        &:after{
            display: none;
        }
    }
}

/*Services*/
.index_wrapper_4{
    padding: var(--sec-padding) 0;
}
.ex_hpservice_slide{
  background: transparent;
  padding: 0;
  margin: 0;
}
.ex_hpservice_slide .container{
  max-width: 100%;
}

.ex_hpservice_slide .services-content{
    height: auto;
    overflow: visible;
}
.ex_hpservice_slide .services-content .services-image{
    height: 250px;
}
.ex_hpservice_slide .services-text{
    position: unset;
    transform: unset;
    background: #fff;
    border: 2px solid #dce0e3;
    border-top: none;
    padding: 8% 15%;
}
.ex_hpservice_slide .services-text h3.title{
    color: #000;    
    margin-bottom: 0;
    font-size: clamp(1.25rem, 1.5vw, 1.5vw);
    
    &:after{
        display: none;
    }
}
.ex_hpservice_slide .service_btn{
    border-radius: 50px;
    width: 100%;
    font-size: clamp(.85rem, 1.05vw, 1.05vw);
    padding: 6px 0px 8px;
    border: 1.75px solid transparent;
    
    i{
        display: none;
    }
}
.ex_hpservice_slide .services-text p{
    display: none;
}
.ex_hpservice_slide .services-content .overlay{
    display: none;
}

.ex_hpservice_slide .item{
    margin: 0 25px;
}
.ex_hpservice_slide .slick-list{
    margin: 0 -14px 0 -25px;   
    padding-right: calc(7.5%);
}

.ex_hpservice_slide .item:not(.slick-active){
    opacity: .3;
}

.ex_hpservice_slide .item:hover .services-text{
    background: #0061a0;
    
    h3{
        color: #fff;
    }
    
    .service_btn{
        background: linear-gradient(to right, #caddeb, #00609f);
        border: 1.75px solid #fff;
    }
}


.ex_hpservice_slide .controls{
    width: 50px;
    height: 50px;       
    padding: 0;
    
    img{        
        border-radius: 50%;
        filter: brightness(0.5);
    }
    
    &:after{
        position: absolute;
        content: "";
        width: 96%;
        height: 96%;
        top: 2%;
        left: 2%;
        background: #fff;
        border-radius: 50%;
        z-index: -1;
    }
}
.ex_hpservice_slide .controls.right{
    right: 7.5%;
}

@media(min-width:991px) and (max-width:1200px){
    .ex_hpservice_slide .services-text{
        padding: 10% 5%;
    }
}

@media(min-width:576px){
    .hp_services{
        max-width: 85%;
        margin: auto;
    }
    .ex_hpservice_slide{
        max-width: 92.5%;
        margin-left: auto;
    }
}

@media(max-width:1024px){
    .ex_hpservice_slide .item{
        margin: 0 15px;
    }
    .ex_hpservice_slide .slick-list{
    margin: 0 -14px 0 -15px;   
        padding-right: calc(8.5%);
    }
}

@media(max-width:768px){
    .hp_services .title-box{
        text-align: center;
        margin-bottom: 1.5rem;
    }
}

@media(max-width:600px){
    .ex_hpservice_slide{
        max-width: 85%;        
        margin: auto;
    }
    .ex_hpservice_slide .slick-list{
        margin: 0 -25px 0;   
        padding-right: 0;
    }
    .ex_hpservice_slide .controls.left{
        left: -4.25%;
    }
    .ex_hpservice_slide .controls.right{
        right: -4.25%;
    }
}

/* Number */
.hp_number{
    background: #e8f1f6;
    padding: 0 0 var(--sec-padding);
}

.number-wrapper {
  display: flex;
  width: 83%;
  background: #fff;
  justify-content: center;  
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, .15);
  border-radius: 15px;
  padding: 1.5rem 0;
  gap: 12rem;
  margin-top: -10px;
}
.number{
  font-size: clamp(1rem, 1.05vw, 1.05vw); 
  line-height: 1.25;
  
  span{
    font-size: 250%;
    font-weight: 900;
    letter-spacing: 1px;
  }
}
.number-box p{
  font-size: clamp(1rem, 1.05vw, 1.05vw);
  margin: 0;
}
.number-box{
  position: relative;
  
  &:not(:last-child):after{
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    right: -6rem;
    top: 0;
    background: #000;
  }
}

.number-content h2{
    font-weight: 800;
}

.number-frame{
    animation: floatAround 13s linear infinite;
}

@media(min-width:1200px){
    .number-content{
        width: 85%;
    }
    .number-frame{
        width: 108%;
        margin-left: -8%;        
    }
}

@media(min-width:991px){
    .hp_number .container-fluid{
        max-width: 92.5%;
        margin: 0 0 0 auto;
    }
}

@media(min-width:576px) and (max-width:991px){
    .hp_number .container-fluid{
        max-width: 85%;
        margin: auto;
    }
}

@media(max-width:1300px){
    .number-wrapper{
        gap: 12vw;
        margin-top: 2.5rem;
    }
    .number-box:not(:last-child):after{
        right: -6vw;
    }
}

@media(max-width:1200px){
    .hp_number{
        padding-top: var(--sec-padding);
    }
}

@media(max-width:991px){    
    .number-wrapper{
        width: 100%;    
    }
}

@media(max-width:768px){    
    .number-wrapper{
        gap: 0;
        flex-wrap: wrap;
        padding: 1.5rem;
    }
    .number-box{
        flex: 0 1 50%;
        max-width: 50%;
        padding: 1rem 0rem 2rem;
        text-align: center;        
        
        &:after{
            display: none;
        }
    }
    .number-box:nth-child(-1n + 2){
        border-bottom: 1px solid #ccc;
    }
    .number-box:nth-child(odd){
        border-right: 1px solid #ccc;
    }
}

@media(max-width:576px){
    .number-box{
        flex: 0 1 100%;
        max-width: 100%;
    }
    .number-box:not(:last-child){
        border-bottom: 1px solid #ccc;
    }
    .number-box:nth-child(odd){
        border-right:none;
    }
}

/* why */
.hp_why{
    background: linear-gradient(to bottom, #e8f1f6 41%, #fff 41%);
    padding-bottom: var(--sec-padding);
}
.why-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 1rem;
}
.why-box{
    padding: 2rem 3rem;
    background: #0061a0;  
    border-radius: 20px;       
}
.why-box .num{
    color: #fff;
    background: #00609f;
    width: fit-content;
    padding: 1px 22px 3px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.why-title{
    font-size: clamp(1rem, 1.65vw, 1.65vw);
    font-weight: 700;
}
.why-box .content{
    font-size: clamp(.85rem, .92vw, .92vw);
    line-height: 1.5;
    width: 80%;
}
.why-box:hover .num{
    animation: swing .65s linear;
    transform-origin: left;
}

.main-box{
    color: #fff; 
    padding: 2.85rem 3rem;
}
.main-box .num{
    background: #fff;
    color: #000;
}
.main-btn.sp-effect{    
    background: linear-gradient(to right, #caddeb, #00609f);
    border: 1.75px solid #fff;
    border-radius: 50px;
    padding: 3px 4.5rem 5px;
    font-size: clamp(.85rem, 1.15vw, 1.15vw);
    white-space: nowrap;
}

.why-box:not(.main-box){
    background: #e8f1f6;
}
@media(min-width:576px){
    .hp_why .container-fluid{
        max-width: 85%;    
    }   
}

@media(max-width:991px){
    .hp_why{
        background: linear-gradient(to bottom, #e8f1f6 37%, #fff 37%);
    }
    .why-box{
        padding: 2rem 1.5rem;
    }
    .why-box .content{
        width: 100%;
    }
    
    .why-list{
        grid-template-columns: repeat(4, 1fr);
        align-items: stretch;
    }
    
    .why-box{
        grid-column: span 2;
    }
    .main-box{
        grid-column: span 4;
    }
}

@media(max-width:768px){
    .hp_why .title-wrapper .title-box{
        text-align: center;
        margin-bottom: 2rem;
    }
}

@media(max-width:576px){
    .main-btn.sp-effect{
        padding: 5px 3rem;
    }
}

/* google */
.hp_google{
    padding-bottom: var(--sec-padding);
}
@media(min-width:576px){
    .hp_google .container-fluid{
        max-width: 85%;
    }
}

/* Cta */
.hp_cta{
    overflow: hidden;
}
.cta-wrapper{
    background: #e8f1f6;
    border: 10px solid #fff;
    display: flex;
    padding: 3rem 6rem;
    align-items: center;
}
.cta-wrapper:hover .cta-frame{
    animation: swing 1s ease-in-out;
    transform-origin: bottom;
    animation-iteration-count: 2;
}
.cta-frame{
    min-width: 35%;
    margin-right: 10%
}
.cta-content{
    width: 100%;
}
.cta-list{
    display: flex;        
}
.cta-box{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.cta-box:first-child{
    padding-right: 5rem;
    position: relative;
    
    &:after{
        position: absolute;
        content: "";
        width: 1px;
        height: 60%;
        margin: auto;
        background: #000;
        right: 2.5rem;
    }
}
.cta-icon img{
    max-width: 70px;
    aspect-ratio: 1/1;
}
.cta-title{
    font-size: clamp(.85rem, 1.45vw, 1.45vw);    
    font-weight: 800;    
}

.cta-content .top-box{
    margin-bottom: 2rem;
}
.cta-content .top-box .content{
    margin: 1rem 0;
}

@media(min-width:576px){
    .hp_cta .container-fluid{
        max-width: calc(85% + 10px);        
    }
}

@media(max-width:1200px){
    .cta-wrapper{
        padding: 2rem 3rem;
    }
    .cta-frame{
        min-width: 30%;
        margin-right: 5%;
    }
    .cta-box:first-child{
        padding-right: 3rem;
        
        &:after{
            right: 1.5rem;
        }
    }
    .cta-box{
        gap: .75rem;
    }
}  

@media(max-width:800px){
    .cta-wrapper{
        flex-direction: column-reverse;
        padding: 3rem 3rem;
    }    
    .cta-frame{
        margin: 0;
        max-width: 60%;
        margin-top: 2rem;
    }
    .cta-content{
        text-align: center;
    }
    .cta-list{
        justify-content: center;
    }
}

@media(max-width:576px){
    .hp_cta .container-fluid{
        padding: 0;
    }
    .cta-wrapper{
        border-width: 15px;
    }
}

/*Footer*/
.footer_type4{
  background: #2178bf;
    padding-top: calc(3rem + 3rem);
    margin-top: -3rem;
}
.footer_type4 h6{
  font-size: 180% !important;
  font-weight: 700;
}
.footer_type4 .col-md-3:first-child h6{
  font-size: 145% !important;
}
.footer_type4 #subscribeEmail{
  border-radius: 50px;
}
.footer_type4 .btn-primary{
  background: #005b88 !important;
  padding: 5px 20px;
  border-radius: 6px;
}
.footer_type4 .copy_right{
  border-top: 1px solid #fff;
  padding-top: 2rem;
}

@media(min-width:991px){
    .footer_type4 .col-md-3{
      padding: 0 30px;
    }
}

@media(min-width:576px){
    .footer_type4 .container{
        max-width: 85%;
        padding: 0;
    }
}

@media(max-width:768px){    
    .footer_type4 .col-md-3{
        padding-bottom: 2rem;
        margin-bottom: 2rem !important;
    }
    .footer_type4 .social_media{
        display: none;
    }
}

/* English */
html:lang(en){
    /* Overall */
    body{
        font-family: "Poppins", sans-serif;;
    }
    
    /* Text */
    .title-style {      
      font-size: clamp(1.4rem, 2vw, 2vw);
    }
    .content {
        font-size: clamp(.85rem, 1vw, 1vw);
    }
    
    /* Button */
    .main-btn {        
        padding: 12px 60px 12px;
        font-size: clamp(.95rem, 1.15vw, 1.15vw);
    }
    
    /* Banner */
    .b-content h2{
        letter-spacing: 3px;
        text-transform: uppercase;
        font-size: clamp(2rem, 4.6vw, 4.6vw);        
    }
    .b-content h3{
        font-size: clamp(.8rem, 1vw, 1vw);
        margin-bottom: 0;
    }
    .b-content h4{
        font-size: clamp(.75rem, .95vw, .95vw);
    }
    .bannerBtn{
        margin-top: 5%;
    }
    .point-title{
        font-size: clamp(.82rem, 1.2vw, 1.2vw);
    }
    
    /* About */
    .abt-content .content {        
        font-size: clamp(.85rem, 1vw, 1vw);
        line-height: 2;
    }
    
    /* Number */
    .hp_number{
        padding-top: calc(var(--sec-padding) * .6);
    }    
    
    /* Why */
    .why-box .content{
        width: 90%;
    }
    
    /* CTA */
    .cta-title{
        font-size: clamp(.9rem, 1.25vw, 1.25vw);
    }
    .cta-icon img{
        max-width: 55px;
    }
}

@media(min-width:1200px){    
    html:lang(en){
        .number-content {
            width: 100%;
        }
        .number-frame{
            width: 100%;
            margin: 0;
        }
    }    
}

@media(max-width:1200px){
    html:lang(en){
        .number-wrapper{
            padding: 2rem;
            gap: 8rem;
            width: 97%;
        }
        .number-box:not(:last-child):after{
            right: -4rem;
        }   
    }    
}

@media(max-width:991px){
    html:lang(en){            
        .number-wrapper{
            gap: 5rem;
            width: 100%;
        }
        .number-box:not(:last-child):after{
            right: -2.5rem;
        }
        .number-box p{
            font-size: 100%;
        }
        .number{
            font-size: 100%;
        }
        .number span{
            font-size: 225%;
        }
    }
}

@media(max-width:768px){
    html:lang(en){
        .hp_about .title-box .title-style{
            white-space: normal;
        }
        
        /* Number */
        .number-wrapper{
            gap: 0;
        }
    }
}

@media(max-width:576px){
    html:lang(en){
        .point-title{
            text-align: center;            
        }
        .b-point-box{
            flex: 0 1 33%;
            max-width: 33%;
        }
        
        /* CTA */
        .cta-list{
            flex-direction: column;
            align-items: center;
            gap: .75rem;
        }  
        .cta-box:first-child{
            padding-right: 0;
            
            &:after{
                display: none;
            }
        }
    }
}