:root{
    --primary-color:#011533;
    --secondary-color:#F6D21B;
    --blue-color:#022a99;
    --dark-color:#383838;
    
    --sec-padding-y:5rem;
    --sec-padding-x:6%;
}

@media(max-width:991px){
    :root{
        --sec-padding-y: 4rem;
    }
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

#main_index{
    padding-bottom: 0 !important;
}

#main_index .col-12{
    padding: 0;
}

#main_index h1, h2, h3, h4, h5, h6, p{
    margin-bottom: 0;
}

/* Text */
.subtitle-style{
    display:inline-block;
    font-size: clamp(.9rem, 1.12vw, 1.12vw);
    font-weight:400;
    letter-spacing:0px;
    color:var(--blue-color);
    text-transform:uppercase;
}

.title-style{
    font-family:'Montserrat',sans-serif;
    font-size:clamp(1.6rem,2.1vw,2.1vw);
    font-weight:800;
    line-height:1.1;
    color:var(--primary-color);
}

.title-style span{
    display:block;
    color:var(--secondary-color);
}

.content{
    color:#222;
    line-height:1.85;
    font-size: clamp(.85rem, 1vw, 1vw);
}

/* Button */
.main-btn{
    display:inline-flex;
    align-items:center;
    gap:15px;
    padding:8px 18px;
    background: var(--secondary-color);
    border:none;
    border-radius:8px;
    font-size:clamp(.85rem, 1vw, 1vw);
    font-weight:700;
    color:#011533;
    transition:all .3s linear;
    
    &.btn-larger{
        font-size: clamp(.95rem, 1.2vw, 1.2vw);
        padding: 10px 23px;
    }
}

.main-btn:hover{
    color: #fff;
    transform:translateY(-5px);
    background: var(--primary-color);
    text-decoration: unset;       
}
.main-btn:hover .btn-icon{
    filter: invert(1);
}

.btn-icon{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.btn-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

@media(max-width:768px){
    .main-btn{
        padding: 5px 15px;
    }
}

/* Nav */
.navbar_type8{
    height: 120px;
    background: var(--primary-color);
    padding: 0;
}
#main_index .navbar_type8{
    background: transparent;
}
.navbar_type8 .logo{
    margin-left: 6rem;  
    flex: unset;
    min-width: 24%;
}
.navbar_type8 .logo img{
    padding: 0px;
    width: 100%;
}

.navbar_type8 .nav_tab{
    flex: unset;
    width: 100%;
    padding-right: 6rem;
    gap: 3vw;  
}
.navbar_type8 .nav_tab .nav_item:before{
    display: none;
}
.navbar_type8 .nav_tab .nav_item a{
    color: #fff;
    padding: 0;
    font-size: clamp(.85rem, 1vw, 1rem);
    font-weight: 500;    
}
.navbar_type8 .nav_tab .nav_item a:hover{
    color: var(--secondary-color);
}
.navbar_type8 .nav_tab .nav_item:hover:before{
    width: 100%;
}

.dark_nav{
background: rgba(1, 21, 51, 0.9) !important;
}

.navbar_mobile{
    background: var(--primary-color);
}
.navbar_mobile .btn-outline-light{
    color: #fff;
    border-color: #fff;
}

@media(max-width:1300px){
    .navbar_type8 {
        height: 100px;
    }
    .navbar_type8 .logo{
        margin-left: 5%;
        min-width: 20%;
    }
    .navbar_type8 .nav_tab{
        padding-right: 5%;
        gap: 3vw;
    }
}

/* Slider */

.hp_banner{
    position:relative;
    height: 100%;
    display:flex;
    align-items:center;    
    overflow:hidden;
}

.b-content{
    position:relative;
    z-index:2;    
    width:100%;
    padding:0 6rem;
}

.b-content h2{
    font-family:'Montserrat',sans-serif;
    font-size:clamp(2.25rem,3.8vw,3.8vw);
    font-weight:800;
    line-height:1.05;
    color:#fff;
    margin:0 0 25px;
    text-transform:uppercase;
}

.b-content h2 span{
    display:block;
    color: var(--secondary-color);
}

.b-content p{
    font-size:clamp(.85rem,1.05vw,1.05vw);
    line-height:1.9;
    color:#fff;
    margin:0 0 35px;
    font-weight:400;
    width: 40%;
}

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

@media(min-width:1300px){
    .slider_banner{
        margin-top: -120px;
    }
}

@media(max-width:1200px){
    .b-content{
        padding-top: 4rem;
    }
}

@media(max-width:991px){    
    .b-content{
        text-align:left;
        max-width:100%;
        padding:0 70px;
        height: 100%;
        display: grid;
        place-content: center;
    }
    .b-content p{
        margin:0 0 30px;
        width: 50%;
    }
}

@media(max-width:767px){
    .slider_banner .item > img{
        min-height: 80vw;
        object-fit: cover;
    }
}

@media(max-width:576px){
    .slider_banner .item > img{
        min-height: 130vw;
        object-fit: cover;
        object-position: 80%;
    }
    .banner_content{
        background: linear-gradient(to top, rgb(1, 21, 51, .2), rgb(1, 21, 51, .75));
    }
    .b-content{
        padding: 0 20px;
        text-align: center;
    }
    .b-content p{
        width: 100%;
    }
}

/*About*/
.hp_about{
    position:relative;
    padding: var(--sec-padding-y) 0;
    background:#fff;
}

.hp_about .title-style:after,
.hp_faq .title-style:after{
    display: block;
    content: "";
    width: 45px;
    height: 1px;
    background: var(--secondary-color);
    margin: 1.25rem 0;
}

.about-wrapper{
    display: flex;
    gap:60px;
    align-items:center;
    padding-left: var(--sec-padding-x);
}

.about-frame{
    position:relative;
    overflow:hidden;
    min-width: 55%;
}

.about-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:all .4s linear;
}

.about-frame:hover img{
    transform:scale(1.05);
}

@media(max-width:991px){
    .about-wrapper{
        flex-direction: column;       
    }
    .about-content{
        padding: 0 var(--sec-padding-x) 0 0;
    }
}

/* USP */

.usp-wrapper{
    margin-top:80px;
}

.usp-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border: 1px solid var(--blue-color);
    border-radius: 8px;
    margin: 0 var(--sec-padding-x);
    padding: 1.5rem 0;
}

.usp-box{
    padding:8px 25px;
    text-align:center;
    border-right:2px solid var(--secondary-color);
    transition:all .3s linear;
}

.usp-box:last-child{
    border-right:none;
}

.usp-icon{
    width:80px;
    height:80px;
    margin:0 auto 10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.usp-icon img{
    max-width:75px;
    transition:all .3s linear;
}

.usp-box:hover .usp-icon img{
    transform:translateY(-5px);
}

.usp-info .text-small{
    font-size:clamp(.9rem, 1.05vw, 1.05vw);
    font-weight:800;
    color:var(--primary-color);
    margin:0;
}

@media(max-width:991px){

    .about-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .about-content{
        max-width:100%;
    }

    .usp-wrapper{
        margin-top: 50px;
    }
    .usp-list{
        grid-template-columns:repeat(2,1fr);
        padding: 2rem;
    }       
    
    .usp-box{
        padding: 1rem;
    }
    .usp-box:nth-child(-n + 2){
        border-bottom: 2px solid var(--secondary-color);
    }
    .usp-box:nth-child(2){
        border-right:none;
    }

}

@media(max-width:767px){

    .usp-list{
        grid-template-columns:1fr;
        padding: 0 2rem;
    }

    .usp-box{
        padding: 2rem;
        border-right:none;
        border-bottom: 2px solid var(--secondary-color);
    }

    .usp-box:last-child{
        border-bottom:none;
    }
    
    .usp-info .text-small{
        font-size: 16px;
        font-weight:700;        
    }
    
    .usp-icon img{
        width: 60px;
    }
    
}

/* Product */

.index_wrapper_4{
    padding:var(--sec-padding-y) var(--sec-padding-x);
    background: linear-gradient(to left, var(--primary-color) 18%, #fff 0%);
    overflow:hidden;
}

.hp_product .title-wrapper{
    gap:20px;
    margin-bottom: 1.5rem;
}
.hp_product .main-btn{
    margin-right: -20px;
    
    &:hover{
        color: var(--primary-color);
        background: #fff;                
    }
}
.hp_product .main-btn:hover .btn-icon{
    filter: unset;
}


.product_box .content{
    display: none;
}

.productSlider-1 .product_img .slick-prev,
.productSlider-1 .product_img .slick-next{
    display: none !important;
}

.productSlider-1 .slick-track .slick-slide{
    border-radius: 50%;
    background: var(--blue-color);
    margin: 25px;
    
    &:nth-child(even){
        background: var(--secondary-color);
    }
}

.productSlider-1{
    margin: 0 -25px;    
}
 
.productSlider-1 .product_img .product_box{
    background: transparent;
}

.productSlider-1 .product_img .product_box .product_img_frame{
    transition: all .3s linear;
}
.productSlider-1 .product_img .product_box .product_img_frame img{    
    padding: 1rem;
}
    
.productSlider-1 .product_img .product_box .product_img_frame:hover{    
        transform: scale(1.1);
}

@media(max-width:1200px){
    .index_wrapper_4{        
        background: linear-gradient(to left, var(--primary-color) 21%, #fff 0%);        
    }
    .productSlider-1 .slick-track .slick-slide{        
        margin:10px;        
    }

    .productSlider-1{
        margin: 0 -10px;    
    }

}

@media(max-width:991px){      
    .index_wrapper_4{        
        background: linear-gradient(to left, var(--primary-color) 25%, #fff 0%);        
    }
    .productSlider-1 .slick-list{
        padding: 0 !important;
    }
}

@media(max-width:768px){
    .index_wrapper_4{
        background: unset;
        padding-top: 0;
    }
    .hp_product .title-wrapper{
        text-align: center;
        margin-bottom: 3rem;
    }
    .hp_product .title-style br{
        display: none;
    }
}

/* Service */
.index_wrapper_5{
    padding: var(--sec-padding-y) var(--sec-padding-x) var(--sec-padding-y);
}
.service_3{
    max-width: 100%;
}
.service_3 .row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.service_3 .service_box{
    flex: 0 1 100%;
    max-width: 100%;
}
.service_3 .service_box:hover img{
    transform: unset;
}
.service_3 .service_box img{
    height: 320px;
}

.service_3 .service_box .content{
    background: linear-gradient(to top, rgba(1, 21, 51, 0.95) 0%, rgba(1, 21, 51, 0) 70%);
    opacity: 1;
}
.service_3 .service_box .content h3{
    all: unset;
    color: #fff;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: clamp(1rem, 1.35vw, 1.35vw);    
    font-weight: 800;
    font-family: 'montserrat', sans-serif;
    transition: all .3s linear;
}

.service_3 .service_box:hover .content{
    background: rgb(1, 21, 51, .75);
}

.service_3 .service_box:hover .content h3{
    bottom: 50%;
    transform: translateY(50%);
}

@media(max-width:991px){
    .service_3 .row{        
        grid-template-columns: repeat(2, 1fr);        
    }
    .service_3 .service_box img{
        height: 250px;
    }   
}

@media(max-width:768px){
    .index_wrapper_5{
        padding-top: 0;
    }
    .hp_service .title-box{
        text-align: center;
    }
}

@media(max-width:576px){
    .service_3 .row{
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Client */
.hp_client{
    padding: 0 var(--sec-padding-x) var(--sec-padding-y) ;
}
.client-list{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3rem;
}

.client-box{
    transition: all .3s linear;
}
.client-box:hover{
    transform: scale(1.1);
}

@media(max-width:991px){
    .client-list{
        grid-template-columns: repeat(5, 1fr);
        gap: 2rem;
    }
}

@media(max-width:768px){
    .hp_client .title-box{
        text-align: center;
    }
}

@media(max-width:576px){
    .client-list{
        grid-template-columns: repeat(3, 1fr);
    }
}

/*Award*/
.award-list{
  width: 75%;
  margin: auto;  
}
.award-list .slick-list{
  margin: 0 -4rem;
}
.award-box{
  padding: 0 4rem;
}

.award-list .slick-prev{
    left: -100px;
    
    &:before{
        color: var(--blue-color);
        text-shadow: unset;
    }
}

.award-list .slick-next{
    right: -100px;
    
    &:before{
        color: var(--blue-color);
        text-shadow: unset;
    }
}

@media(max-width:1200px){
    .award-list .slick-list{
        margin: 0 -2rem;
    }
    .award-box{
        padding: 0 2rem;
    }
}

@media(max-width:576px){
    .award-list .slick-arrow{
        display: none !important;
    }
    .award-list{
        width: 100%;
    }
    .award-box{
        padding: 0 1.5rem;
    }
}

/*faq*/
.hp_faq{
    padding:var(--sec-padding-y) 0;
    background: url(https://cdn1.npcdn.net/images/F_Background_vx6qwu_1781678573.jpg?md5id=4c86f3bbcab249f879058d1825887571&new_width=3600&new_height=1780&type=4);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.hp_faq .subtitle-style{
    color: var(--secondary-color);
}
.hp_faq .title-style{
    color: #fff;
    width: fit-content
}
.hp_faq .big-text{
    color: #fff;
    font-size: clamp(1rem, 1.3vw, 1.3vw);
    font-weight: 400;
}

.faq-wrapper{
    padding:0 var(--sec-padding-x);
    width: 65%;
}

.hp_faq .title-wrapper{
    margin-bottom:2.5rem;
}

.hp_faq .title-style:after{
    margin:1.25rem 0;
}

.faq-list{

}

.faq-box{
    margin-bottom:15px;
    border-radius:10px;
    overflow:hidden;
    background: transparent;    
}

.faq-question{
    width:100%;
    border:none;
    background:rgba(255, 255, 255, .1);
    padding:12px 20px;

    display:flex;
    justify-content:start;
    align-items:center;

    font-size:clamp(.95rem,1.05vw,1.05vw);
    font-weight:600;
    color:#fff;

    text-align:left;
    cursor:pointer;

    transition:.3s;
    position: relative;
}

.faq-question:hover{
    background: var(--blue-color);
}

.faq-question i{
    color:#fff;
    transition:.3s;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}

.faq-num{
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    display: grid;
    place-content: center;
    background: var(--primary-color);
    border-radius: 50%;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.faq-question span{
    margin-left: 2rem;
}

.faq-answer{
    padding:calc(.85rem + 10px) 80px .85rem;
    color:#fff;
    line-height:1.5;
    font-size:clamp(.85rem,.95vw,.95vw);
    border:1px solid #017aa5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: -10px;    
    border-top: unset;
}

.faq-question[aria-expanded="true"]{
    color: #000;
    background: var(--secondary-color);
    border-radius: 10px;    
}

.faq-question[aria-expanded="true"] .faq-num{
    color: var(--secondary-color);
}

.faq-question[aria-expanded="true"] i{
    color:#000;
}

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

@media(max-width:767px){
    .hp_faq{
        background-position: 87%;        
        position: relative;
        
        &:before{
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: var(--primary-color);
            top: 0;
            left:0;
            opacity: .5;                
        }
    }
    .faq-wrapper{
        width: 100%;
    }

}

@media(max-width:768px){
    .faq-question span{
        margin-left: 1rem;
        width: 75%;
    }
    .faq-answer{
        padding-left: 30px;
        padding-right: 30px;
    }
}

/*News*/
.index_wrapper_9{
  padding: var(--sec-padding-y) calc(var(--sec-padding-x) * 2.5) 0;
}

.title-row{
  position: relative;
  padding-top: 3rem;
}
.title-row .news-frame{
  position: absolute;
  top: -95%;
  right: -8%;
  width: 58%;
}

#main_index .news-box{
  margin-top: 3rem;
}

#main_index .hp_latest_new .news_box .img_frame{
  display: none;
}
#main_index .hp_latest_new .col-lg-4{
  flex: 0 1 0%;
  max-width: 0%;
}
#main_index .hp_latest_new .col-lg-8{
  flex: 0 1 100%;
  max-width: 100%;
  margin-left: 12rem;
}
#main_index .hp_latest_new .news_box .read_more{
  display: none;
}

#main_index .hp_latest_new .news_box .title{
  font-size: clamp(1.2rem, 1.65vw, 1.65vw);
}

@media(max-width:1200px){
  .index_wrapper_9{
    padding-left: var(--sec-padding-x);
    padding-right: var(--sec-padding-x);    
  }
  #main_index .hp_latest_new .col-lg-8{
    margin-left: 6rem;
  }
}

@media(max-width:991px){
  .title-row .news-frame{
    top: -60%;
  }
}

@media(max-width:768px){
  .title-row .news-frame{
    display: none;    
  }
  .title-row{
    padding: 0;
    padding-bottom: 1rem;
  }
  #main_index .news-box{
    margin-top: 0;
    margin-bottom: 3rem;
  }
  #main_index .hp_latest_new .col-lg-8{
    margin-left: 15px;
  }
}

/*Footer*/
.footer_type12{
  background: var(--primary-color);
}
.subscribe_row {
  background: #fff;
  padding: 1.5rem;
  border-radius: 1rem;
}
.footer_type12 .input-container input{
  border-color : #555;
}
.footer_type12 .input-container input::placeholder{
  color: #888;
}
.footer_type12 .input-container .submit{
  border-color: #555;
  background: var(--secondary-color);
  color: #000;
}

.footer_type12 .title h6{  
  color: var(--secondary-color);
  text-transform: uppercase;
  font-size: clamp(.85rem, 1.05vw, 1.05vw) !important;
}

.footer_type12 .subscribe_row .title{
  color: var(--dark-color);
  margin: 0;
  text-transform: uppercase;  
}
.footer_type12 .subscribe_row .title h6{
  font-family: 'montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 2.55vw, 2.55vw) !important;
  color: var(--dark-color);  
  line-height: .8;
}

.footer_type12{
  color: #f1f1f1;
  padding: 5rem 0 !important;
}
.footer_type12 a{
  color: #f1f1f1;
}

.footer_type12 .line{
  background: #fff;
  margin: 3rem 0 1.5rem;
}

@media(max-width:991px){
  .footer_type12 .title{
    justify-content: start;
  }
}

@media(max-width:768px){
  .footer_type12 .title{
    justify-content: center;
  }
  .footer_type12 .subscribe_row .title{
    margin-bottom: 2rem;
  }
}

@media(max-width:576px){
  .footer_type12 .subscribe_row{
    width: 99%;
    margin: auto;
  }
  .footer_type12 .input-container input::placeholder{
    font-size: 10px;
  }
  .footer_type12 .subscribe_row .title{
    text-align: center;
    
    h6{
      line-height: 1.15;
    }
    }
}

#v-pills-hq h5 {
  font-size: 16px;
}