@import "mixins.scss";
@import "globalvar.scss";
@import "header.scss";

*{   
    margin: 0;padding: 0;    
}
a{     
    text-decoration: none; //@include transition(0.3s); 
    &:hover{text-decoration: none; color: #417F9D; //@include transition(0.3s);
    }   
} 
button{outline: none!important;}
.btn-check:focus+.btn, .btn:focus{box-shadow: none!important;}
ul {list-style: none; padding-left: 0; margin-bottom: 0px;}     
body { background: #ffffff;//background: #EBEBEB;
    font-family: $fontfamily; font-size: 18px; color: #000; font-weight: 400;  overflow-x: hidden; 
    &.overflowhidden{overflow-y: hidden;}
    @include desktop1600{font-size: 17px;}   
    @include desktop1440{font-size: 16px;} 
    @include desktop1366{font-size: 15px;} 
} 
p {margin:0px; padding:0px 0px 24px 0px; line-height:26px;
    &.fnt25{font-size: $fnt25; line-height: $fnt25Linehieght;}
    &.fnt22{font-size: 22px; line-height: 36px;}
    &.paddbtmUl-5{padding-bottom: 5px;}
    @include desktop1366{line-height:24px;
        &.fnt22{font-size: 20px; line-height: 34px;}
    }
    @include phone{
        &.fnt25{font-size: $fnt25mobile; line-height: $fnt25Linehieghtmobile;}
        &.fnt22{font-size: 18px; line-height: 30px;}
    }
}
@media (min-width: 1600px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1474px;
    }
}
.textCenter{text-align: center;}
.textLeft{text-align: left;} 
.textRight{text-align: right;}

.pd0{padding-bottom: 0px !important;}
  
.defaultButton{
    background: $blackColor; padding: 10px 15px; color: $whiteColor; display: inline-block; 
    //@include transition(0.5s); 
    font-size: 16px;
    &:hover, &:focus{
        background: $primaryColor; color: $whiteColor; 
    } 
}

h1,h2,h3,h5{font-family: $fontfamilyPoppins; margin: 0px; padding: 0px;} 
h2,.hdfnt28{font-size: 20px; font-weight: 600; line-height: 34px; color: $fntColor444444; position: relative; padding-bottom: 17px;
    span{font-weight: 300; font-size: 16px;line-height: 16px; display: block; padding-bottom: 5px;}
    //&::before{content: ''; position: absolute; left: 0px; top: 0px; background-color: #46A0EC; width: 5px; height: 100%;}
    &.colorblack{color: $blackColor;}
    &.paddbtm48set60{padding-bottom: 48px;}
}
.hdfnt20{font-size: 20px; font-weight: 500; line-height: 24px; color: $fntColor444444; position: relative; padding-bottom: 0px;}
.hd1{font-size: 45px; font-weight: 600; line-height: 45px; padding: 0px; margin: 0px 0px 40px 0px; color: #000;
    &.marginbtm0{margin-bottom: 0px;}
    @include desktop1680{font-size: 42px; line-height: 42px; margin-bottom: 32px;}
    @include desktop1440{font-size: 38px; line-height: 38px; margin-bottom: 28px;}
    @include desktop1366{font-size: 36px; line-height: 36px; margin-bottom: 26px;}
    @include tab1024{font-size: 32px; line-height: 32px; margin-bottom: 20px;}
    @include phone{font-size: 28px; line-height: 30px; margin-bottom: 16px;}    
}
.hd2{font-size: 36px; font-weight: 600; line-height: 36px; padding: 0px; margin: 0px 0px 36px 0px; color: #000;
    &.marginbtm0{margin-bottom: 0px!important;}
    @include desktop1440{font-size: 30px; line-height: 30px; margin-bottom: 28px;}
    @include tab1024{font-size: 23px; line-height: 26px;margin-bottom: 22px}
    @include phone{font-size: 20px; line-height: 24px;margin-bottom: 20px}
}
.hd3{font-size: 22px;line-height: 36px;font-weight: 500; color: #000; padding-bottom: 20px;
    &.paddbtmnone{padding-bottom: 0px;}
    @include desktop1366{font-size: 20px; line-height: 26px; padding-bottom: 22px;}
    @include phone400{font-size: 18px;}
    @include phone400{font-size: 17px;}
}
.hd6{font-size: 22px; font-weight: 600; line-height: 28px; padding: 0px; margin: 0px 0px 7px 0px; color: #000;
    &.marginbtm0{margin-bottom: 0px;}
    @include desktop1680{font-size: 20px; line-height: 26px; margin-bottom: 5px;}
    @include desktop1440{font-size: 18px; line-height: 24px;}
    @include desktop1366{font-size: 17px; line-height: 22px;}
    @include phone{font-size: 16px; line-height: 22px;}
}
.hdfont30{font-size: 30px; font-weight: 500; line-height: 36px; padding: 0px; margin: 0px 0px 20px 0px; color: $fntColor444444;
    &.marginbtm44{margin-bottom: 44px;}
}
.titla18{font-size: 18px; font-weight: 600; margin-bottom: 14px;
    @include tab1024{font-size: 17px; margin-bottom: 10px; }
}


h1{@include h1_text();} 
.social_link{
	@include solical_link();
	ul{margin-top: 0px;
		li{font-size: 14px; padding-right: 10px;
			a{width: 30px; height: 30px;@include dispflex(flex,center,center); flex-direction: column; border: $whiteColor solid 1px; border-radius: 100%;}
		}
	}
}
//.fntnumber{font-family: $fontfamilynumber; font-weight: 300;}
/* ------- Banner Area Strat ------- */
.banner_area{ position: relative; z-index: 1;  color: #000; overflow: hidden;margin-left: auto; margin-right: auto;
    .hd_h1{font-family: $fonthd; padding-bottom: 26px; font-size: 60px; line-height: 60px; font-weight: 500; color: #fff;  text-align: left;
        span{ font-weight: 300; }
    }
	.hm_banner{ position: relative; z-index: 1;overflow: hidden; margin: 0px auto;
        .banner_box{position: relative;}        
		.banner_img{ position: relative; z-index: 1;
            &::before{content: ''; position: absolute; z-index: 2; left: 0px; top: 0px; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(100, 170, 204, 0) 27.9%, #417F9D 94.59%); }		    
			img{position: relative; z-index: 1; max-width: 100%; width: 100%;}
		}
		.temp{ position: absolute; z-index: 2; left: 0px; bottom: 55px; width: 100%;
			.container{ position: relative; z-index: 1;
                .bg_bule{max-width: 1256px;}
            }
		}       
		
        p{font-size: 36px; line-height: 50px; font-weight: 400; margin: 0px; padding: 0px; color: #fff;}	
        .btn_banner{padding: 30px 0px 0px 0px;}
		.slick-slide {
			.temp{
				.hd_h1{transition: all ease-in-out 0.8s; left: -100%;opacity: 0; position: relative;}
                p{transition: all ease-in-out 1s; left: -100%;opacity: 0; position: relative;}
                .btn_banner{transition: all ease-in-out 1.2s; left: -100%;opacity: 0; position: relative;}
			}
			&.slick-current .temp{
				.hd_h1{transition: all ease-in-out 0.8s; left: 0px;opacity: 1;}
                p{transition: all ease-in-out 1s; left: 0px;opacity: 1;}
                .btn_banner{transition: all ease-in-out 1.2s; left: 0;opacity: 1;}
			}
		}
	}
    .slider{
        .slick-arrow {
            border: #fff solid 1px; border-radius: 100%; font-size: 0px; height: 48px; width: 48px; position: absolute; z-index: 1; top: auto; left: auto; right: 55px;
            &:hover { border-color: #fff;}
            &::before { display: none;}
            &.slick-prev {
            background: url(http://template.weblivelink.com/uiproject/design_images/slider_arrow_left.png) center center no-repeat; bottom: 80px;
            &:hover {
                background-image: url(http://template.weblivelink.com/uiproject/design_images/slider_arrow_left.png); background-color: #cb964a;
            }
            }
            &.slick-next {
            background: url(http://template.weblivelink.com/uiproject/design_images/slider_arrow_right.png) center center no-repeat; bottom: 140px;
            &:hover {
                background-image: url(http://template.weblivelink.com/uiproject/design_images/slider_arrow_right.png); background-color: #cb964a;
            }
            }
        }
        @include tab1024 {
            .slick-arrow { right: 43px;}
        }
        @include tab {
            .slick-arrow { height: 36px; width: 36px; right: 10px; 
            &.slick-prev, &.slick-next { background-size: 10px;}
            &.slick-next {  bottom: 29px;}
            }
        }
        @include phone {
            .slick-arrow { display: none !important;}
        }
        @include phone-xs {
            .slick-arrow { height: 25px; width: 25px; border-radius: 5px; 
            &.slick-prev, &.slick-next { background-size: 7px;}
            &.slick-prev { left: 10px;}
            &.slick-next { right: 10px;}
            }
        }
    }
      
    .slick-dots{ margin-top: 0px; width: 100%; height: 20px; text-align: center; position: absolute; bottom: 28px; line-height: 0px;
        li{width: 20px; height: 20px; margin: 0px 5px;
            button{width: 20px; height: 20px; font-size: 0px;  background-color: #CBCBCB; padding: 0px; border-radius: 100%;
            &:before{display: none;}
            }
            &.slick-active{
                button{ background: #429452;}
            }
        }
    }
    .inner_banner{ 
        position: relative;
        .hd_h1{padding: 0px; line-height: normal;}
        .banner_img{ position: relative; z-index: 1;
            &::before{content: ''; position: absolute; z-index: 2; left: 0px; top: 0px; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(100, 170, 204, 0) 27.9%, #417F9D 94.59%); }		    
            img{position: relative; z-index: 1; max-width: 100%; width: 100%;}
        }
        .banner_text{position: absolute; z-index: 2; left: 0px; bottom: 55px; width: 100%;
            //h1{font-size: 50px; line-height: 55px; font-weight: 600; color: #fff; text-transform: uppercase; text-align: left; }
        }
    }
    @include desktop1600{
        .hm_banner{
            .hd_h1{font-size: 54px; line-height: 54px; padding-bottom: 22px;}
            p{ font-size: 31px; line-height: 42px;}
            .btn_common{ min-width: 300px; font-size: 18px;}
        }
        .slick-dots li{ width: 16px; height: 16px; margin: 0px 4px;
            button{width: 16px; height: 16px;}
        }
    }
    @include desktop1440{
        .hm_banner{
            .hd_h1{font-size: 50px; line-height: 50px; padding-bottom: 20px;}
            p{ font-size: 28px; line-height: 36px;}
            .btn_common{ min-width: 250px; font-size: 18px;}
        }
        .slick-dots li{ width: 16px; height: 16px; margin: 0px 4px;
            button{width: 16px; height: 16px;}
        }
    }
    @include tab1024{
        .hm_banner{
            .temp .container .bg_bule{max-width: 766px;}        
            .hd_h1{font-size: 35px; line-height: 35px; padding-bottom: 12px;}
            p{ font-size: 18px; line-height: 31px;}
            .btn_banner{ padding-top: 25px;}
            .btn_common{ min-width: 250px; font-size: 16px;}
        }
        .slick-dots li{ width: 14px; height: 14px; margin: 0px 3px;
            button{width: 14px; height: 14px;}
        }
        .inner_banner{
            .banner_text{
                .hd_h1{font-size: 35px; line-height: 35px; padding-bottom: 0px;}
            }
        }
    }
    @include tab{ 
        .hm_banner{
            .temp .container .bg_bule{max-width: 766px;}        
            .hd_h1{font-size: 26px; line-height: 26px; padding-bottom: 8px;}
            p{ font-size: 16px; line-height: 24px;}
            .btn_banner{ padding-top: 18px;}
            .btn_common{ min-width: 200px; font-size: 14px;}
        }
        .inner_banner{
            .banner_text{ bottom: 40px;}
        }
    }
    @include phone{
        .hm_banner{ text-align: center;
            .hd_h1{ font-size: 26px; line-height: 26px; text-align: center;}
            p{font-size: 15px; line-height: 24px;}
            .temp{ bottom: 40px;
                .container{
                    .bg_bule{ display: inline-block;}                
                }
            } 
            .btn_common{padding: 8px 15px; min-width: 148px;
                &::after{top: 15px;}
            }
            .banner_img{
                &::before{background: linear-gradient(180deg, rgba(100, 170, 204,25%) 30.9%, #417F9D 94.59%);}
            }		 
        }
        .slick-dots{ right: 0px; left: 0px; text-align: center; width: 100%; bottom: 13px;
            li{ width: 12px; height: 12px;
                button{width: 12px; height: 12px;}
            }
        }
        
        .inner_banner{ margin-top: 2px;
            .banner_img{
                img{ min-height: 150px; object-fit: cover;}
            }
            .banner_text{ text-align: center; @include dispflex(flex,center,center); flex-direction: column; height: 100%; bottom: 0px;
                .hd_h1{ font-size: 26px; line-height: 26px; text-align: center;}
            }
        }
    }
    @include phone-xs{
        .hm_banner{
            .hd_h1 { font-size: 32px; line-height: 32px;} 
            .temp{ bottom: 20px;
                .container{
                    .bg_bule{ padding: 15px 15px 15px 15px;}
                }
            }
            .banner_img img{min-height: 300px; object-fit: cover; object-position: center top;}
        }
        .inner_banner{		
            .banner_text{
                .hd_h1{ font-size: 32px; line-height: 32px;} 
            }
        }
    }
    @include phone480{
        .hm_banner{
            .banner_img img{min-height: 300px; object-fit: cover; object-position: center top;}
            .temp{
                .container{
                    .bg_bule{ padding: 10px 10px 10px 10px; border-radius: 10px;}
                }
            }
            .hd_h1{ font-size: 24px; line-height: 26px;}
            p{font-size: 14px; line-height: 18px;}
            .btn_banner{padding-top: 12px;}
            .btn_common{padding: 5px 15px; min-width: 148px; font-size: 12px; font-weight: 500;
                &::after{top: 11px;}
            }
        }
        .slick-dots{ bottom: 7px;
            li{width: 10px; height: 10px; margin: 0px 3px;
                button{width: 10px; height: 10px;}
            }
        } 
        .inner_banner{		
            .banner_text{
                h1{padding-bottom: 32px;}
            }
        } 
    }
    @include phone380{
        .hm_banner{
            .hd_h1{ font-size: 20px; line-height: 22px;}         
        }
        .inner_banner{		
            .banner_text{
                .hd_h1{ font-size: 22px; line-height: 22px;} 
            }
        }
    }
}
/* ------- Banner Area End ------- */ 

/* ------- Mani Area Start ------- */
.row{
    &.rowTop{align-items: flex-start;}
}
.btn_common{ border: #86C8E2 solid 0px; padding: 18px 30px 18px 30px; border-radius: 0px; font-size: 20px;line-height: 24px; letter-spacing: 1.1px; font-weight: 300; position: relative; overflow: hidden; text-align: left; display: inline-block; min-width: 338px;
    &::after{ content: ''; background: url(../images/btn_arrow_black.png) no-repeat left top; width: 16px; height: 13px; position: absolute; z-index: 2; right: 30px; top: 23px;}
    &:hover{ background: $bgColorGreen;
        &::after{background-image: url(../images/btn_arrow_white.png);}
    }
    @include desktop1600{padding: 16px 30px 16px 30px; min-width: 300px;
        &::after{top: 22px;}
    }
    @include desktop1440{padding: 15px 30px 15px 30px; min-width: 290px;
        &::after{top: 20px;}
    }
    @include desktop1400{padding: 13px 25px 13px 25px; min-width: 260px; font-size: 18px;
        &::after{top: 19px; right: 25px; background-size: 14px; width: 14px; height: 11px;}
    }
    @include desktop1400{padding: 11px 25px 11px 25px; min-width: 240px; font-size: 16px;
        &::after{top: 17px; right: 25px; background-size: 14px; width: 14px; height: 11px;}
    }
    @include tab1024{min-width: 236px;}
    @include tab{font-size: 16px;min-width: 205px; padding: 10px 20px;
        &::after{right: 15px; top: 16px;}
    }
    @include phone{font-size: 15px;}
}
.btn_primary{background: #fff; color: #232323!important;
    &:hover, &:focus{ background: #0d4058; color: $whiteColor!important;} 
}
.btn_blck{background: #232323; color: #fff!important;
    &::after{background-image: url(../images/btn_arrow_white.png);}
    &:hover, &:focus{ background: #0d4058; color: $whiteColor!important;
        &::after{background-image: url(../images/btn_arrow_white.png);}
    } 
}
.bullet{
    li{font-weight: 400; position: relative; padding: 0px 0px 25px 20px; line-height:26px;
        &::before{content: ''; position: absolute; left: 0px; top: 13px; width: 10px; height: 2px; background: #000;}
        &:last-child{padding-bottom: 0px;}
    }
    &.lipaddbtm5{
        li{padding-bottom: 3px;
            &::before{top: 12px;}
        }
    }
    &.lastLiSp{
        padding-bottom: 20px;
    }
    @include desktop1366{
        li{ padding-bottom: 15px; line-height: 24px;
            &::before{ top: 11px;}
        }
        &.lipaddbtm5{
            li{
                &::before{top: 11px;}
            }
        }
    }
    @include phone400{
        li{ padding: 0px 0px 25px 16px;
            &::before{ top: 11px; width: 8px;}
        }
    }
}
.bgWhite{ background: $bgColorWhite;}
.bgBlue{ background: #45829F;
    *{color: #fff;}
}
.bgdarkBlue{ background: #235E7A;
    *{color: #fff;}
}
.bggrey1{ background: #EAEAEA;}
//.bggrey2{ background: #EAEAEA;}
.bggrey3{background: $bg313D4F; color: $fntColorWhite;
    p,h2{color: $fntColorWhite;}
}
.bgDBE4E8{ background: #DBE4E8;}
.partbg50{position: relative;
    &::after{ content: ''; position: absolute; z-index: 1; right: 0px; top: 0px; background: #D9D9D9; width: 50%; height: 100%;}
    .container{position: relative; z-index: 2;}
    @include tab{
        &::after{ width: 100%; height: 50%;}
    }
}


.section_padding{padding: 100px 0px; 
    &.paddtop0{padding-top: 0px;}   
    @include tab1024{padding: 80px 0px;}
    @include tab{padding: 70px 0px;}
    @include phone{padding: 40px 0px;}
}
.slick-slider{margin-bottom: 0px!important;}
.comman_slider{
    .slider{
        .slick-arrow{border: $whiteColor solid 0px; border-radius: 100%; font-size: 0px; height:21px; width:27px;position: absolute;z-index: 1; top: 50%;  left: auto; right:auto;
            &:hover{border-color: $whiteColor;}
            &::before{display: none;}
            &.slick-prev{background:url(../images/slider_arrow_left.png) center center no-repeat;left:-50px;
                &:hover{ background-image: url(../images/slider_arrow_left_blue.png);}
            }
            &.slick-next{background:url(../images/slider_arrow_right.png) center center no-repeat; right:-50px; 
                &:hover{ background-image: url(../images/slider_arrow_right_blue.png);}
            }            
        }
        @include tab1024{
            .slick-arrow{
                &.slick-prev{left: -45px;}
                &.slick-next{right: -45px;}
            }
        }
    }
    .slick-dots{ margin-top: 30px; width: 100%; height: 16px; text-align: center; position: relative; bottom: 0px; line-height: 0px;
        li{width: 16px; height: 16px; margin: 0px 7px;
            button{width: 16px; height: 16px; font-size: 0px;  background-color: $color87; padding: 0px; border-radius: 100%;
            &:before{display: none;}
        }
            &.slick-active{
                button{ background: $colorCB;}
            }
        }
    }
    &.sliderArrow1{
        .slider{
            .slick-arrow{border: #fff solid 0px; border-radius: 100%; font-size: 0px; height:21px; width:27px;position: absolute;z-index: 1; top: auto;  left: auto!important; right:-55px!important;
                &:hover{border-color: #fff;}
                &::before{display: none;}
                 &.slick-prev{background:url(../images/slider_arrow_left_blue.png) center center no-repeat; bottom: 43%;
                    &:hover{ background-image: url(../images/slider_arrow_left_black.png);}
                }
                 &.slick-next{background:url(../images/slider_arrow_right_blue.png) center center no-repeat; top: 43%;  bottom: auto;
                    &:hover{ background-image: url(../images/slider_arrow_right_black.png);}
                }
                
            }
        }
    }
    @include desktop1600{
        .slider{
            .slick-arrow{
                &.slick-prev,&.slick-next{background-size: 22px !important;}    
                &.slick-prev{left: -40px;} 
                &.slick-next{right: -40px;}           
            }
        } 
        &.sliderArrow1{
            .slider{
                .slick-arrow{right: -45px!important;
                    &.slick-prev,&.slick-next{background-size: 22px !important;}  
                }                     
            }
        }       
    }
    @include desktop1440{
        .slider{
            .slick-arrow{
                &.slick-prev,&.slick-next{background-size: 20px !important;}    
                &.slick-prev{left: -30px;} 
                &.slick-next{right: -30px;}           
            }
        }
        &.sliderArrow1{
            .slider{
                .slick-arrow{ right: -38px!important; 
                    &.slick-prev,&.slick-next{background-size: 20px !important;}
                }
            }
        }
    }
    @include desktop1400{
        .slider{
            .slick-arrow{
                &.slick-prev,&.slick-next{background-size: 20px !important;}  
                &.slick-prev{left: -20px;} 
                &.slick-next{right: -20px;}               
            }
        }
        &.sliderArrow1{
            .slider{
                .slick-arrow{ right: -29px!important;
                    &.slick-prev,&.slick-next{background-size: 22px!important;}
                }
            }
        }
    }
    @include desktop1366{
        .slider{
            .slick-arrow{
                &.slick-prev,&.slick-next{background-size: 20px !important;}  
                &.slick-prev{left: -35px;} 
                &.slick-next{right: -35px;}               
            }
        }
        &.sliderArrow1{
            .slider{
                .slick-arrow{ right: -39px!important;
                    &.slick-prev{ bottom: 42%!important;}
                    &.slick-next{ top: 42%!important;}
                }
            }
        }
    }
    @include tab1024{
        .slider{
            .slick-arrow{
                &.slick-prev,&.slick-next{background-size: 18px !important;}  
                &.slick-prev{left: -30px;} 
                &.slick-next{right: -30px;}               
            }
        }
        &.sliderArrow1{
            .slider{
                .slick-arrow{ right: -35px!important;
                    &.slick-prev,&.slick-next{background-size: 18px!important;}
                    &.slick-prev{ bottom: 42%!important;}
                    &.slick-next{ top: 42%!important;}
                }
            }
        }
    }
    @include tab{
        .slider{
            .slick-arrow{ 
                &.slick-prev{left: -26px;} 
                &.slick-next{right: -26px;}               
            }
        }
        &.sliderArrow1{
            .slider{
                .slick-arrow{ right: -26px!important;
                    &.slick-prev{ top: 45%!important; bottom: auto!important; right: auto!important; left: -26px!important;}
                    &.slick-next{ top: 45%!important;}
                }
            }
        }
    }
    @include phone{
        &.sliderArrow1{
            .slider{
                .slick-arrow{ right: -30px!important;
                    &.slick-prev{left: -30px!important;}
                }
            }
        }
    }
    @include phone380{
        .slider{
            .slick-arrow{
                &.slick-prev,&.slick-next{background-size: 18px !important;}                
            }
        }
        &.sliderArrow1{
            .slider{
                .slick-arrow{ right: -24px!important;
                    &.slick-prev{left: -24px!important;}
                    &.slick-prev,&.slick-next{background-size: 18px;}
                }
            }
        }
    }
}
.margintop-9{margin-top: -9px;}
.margintop5{margin-top: 5px;}
@mixin bgBox{
    background: #417D9A; position: relative; padding: 40px; max-width: 500px; margin-bottom: 30px;
        &:last-child{margin-bottom: 0px;}
        *{color: #fff;}
        .number{position: absolute; z-index: 1; right: 15px; top: 0px; font-size: 100px;line-height: 1.1; font-weight: 600; color: #fff; opacity: 10%;}
        ul{
            li{font-weight: 400; position: relative; padding: 0px 0px 5px 20px; line-height: 26px;
                &::before{content: ''; position: absolute; left: 0px; top: 13px; width: 10px; height: 2px; background: #fff;}
                &:last-child{padding-bottom: 0px;}
            }
        }
}
.mp_contenier{//min-height: 500px;    
    a{ color: $blackColor;
        &:hover{color: #417F9D;}   
    }
}
.commanh1toh6{
    .hd6{padding-top: 7px;
        &.firsthd{padding-top: 0px;}
    }
}
.maxWidth515{max-width: 515px;}
.maxWidth580{max-width: 580px;}
.maxWidth1100{max-width: 1105px; margin-left: auto; margin-right: auto;}
.maxWidth1122{max-width: 1122px; margin-left: auto; margin-right: auto;}
.maxWidth830{max-width: 830px;}
.maxwidth760{max-width: 760px;}
.maxWidth850{max-width: 850px;}
.lastP{
    p{
        &:last-child{padding-bottom: 0px;}
    }
}
.row.rowMiddal{align-items: center;}
.maxWidth1920{max-width: 1920px; margin: 0px auto;}
.welcomeSection{
    .company_pogrss{
        ul{ @include dispflex(flex,flex-start,flex-start);
            li{ background: url(../images/bg_withe_show.png) no-repeat left top; width: 320px; height: 280px; margin-left: -45px;
                .boxcompany{ position: relative; margin-left: 99px; margin-top: 70px;
                    div{background: url(../images/bg_special.png) no-repeat left top; width: 188px; height: 71px; @include dispflex(flex,center,flex-start); flex-direction: column; flex-direction: row; align-items: center;justify-content: flex-start; font-size: 48px; color: #fff; font-weight: 500; padding-left: 20px; margin-bottom: 44px;}
                    p{padding: 0px 0px 0px 20px; margin: 0px; color: #666;}
                }
            }
        }
    } 
    @include desktop1680{
        .company_pogrss{
            ul{position: relative; left: -90px;
                li{
                   .boxcompany{
                    div{font-size: 42px;}
                   } 
                }
            }
        }
    } 
    @include desktop1600{
        .company_pogrss{
            ul{left: -100px;
                li{height: 260px;background-size: auto 260px;
                   .boxcompany{
                    margin-left: 92px;
                    div{font-size: 36px; margin-bottom: 36px;}
                    p{padding-left: 17px;}
                   } 
                }
            }
        }
    }
    @include desktop1366{
        .company_pogrss{
            ul{left: -70px;
                li{ width: 270px; height: 245px;background-size: auto 245px;
                   .boxcompany{
                    margin-left: 87px;
                    div{font-size: 30px; background-size: auto 60px; height: 60px; padding-left: 15px; margin-bottom: 30px;}
                    p{padding-left: 15px;}
                   } 
                }
            }
        }
    } 
    @include tab1024{
        .company_pogrss{
            ul{left: -20px;
                li{ width: 207px; height: 165px; background-size: auto 165px;
                   .boxcompany{
                    margin-left: 58px; margin-top: 50px;
                    div{font-size: 27px;  background-size: auto 45px; height: 45px; padding-left: 15px; margin-bottom: 26px;}
                    p{padding-left: 15px;}
                   } 
                }
            }
        }
    }
    @include tab{
        .maxWidth515{max-width: 100%;}
    }
    @include phone_tab_min{ 
        .company_pogrss{ margin-top: 30px;
            ul{left: -40px;
                li{ width: 270px; height: 245px;background-size: auto 245px;
                   .boxcompany{
                    margin-left: 87px; margin-top: 60px;
                    div{font-size: 30px; background-size: auto 60px; height: 60px; padding-left: 15px; margin-bottom: 30px;}
                    p{padding-left: 15px;}
                   } 
                }
            }
        }
    } 
    @include phone{  text-align: center;
        .hd1{text-align: center;}
        .company_pogrss{ margin-top: 30px; overflow-x: hidden;
            ul{left: 15px; justify-content: center;
                li{ width: 207px; height: 165px; background-size: auto 165px;
                   .boxcompany{
                    margin-left: 58px; margin-top: 30px;
                    div{font-size: 27px;  background-size: auto 45px; height: 45px; padding-left: 15px; margin-bottom: 26px;}
                    p{padding-left: 15px; text-align: left;}
                   } 
                }
            }
        }
    }
    // @include phone450{
    //     .company_pogrss{
    //         ul{
    //             li{width: 197px;}
    //         }
    //     }
    // }
    // @include phone420{
    //     .company_pogrss{
    //         ul{
    //             li{width: 180px;
    //                 .boxcompany{
    //                     margin-left: 58px; margin-top: 30px;
    //                     div{font-size: 24px; background-size: auto 38px; height: 38px; padding-left: 15px; margin-bottom: 23px;}
    //                     p{padding-left: 13px; text-align: left;}
    //                    }
    //                 }
    //         }
    //     }
    // }
    @include phone480{
        .company_pogrss{ margin-top: 30px;
            ul{ 
                left: 0; right: 0px; flex-direction: column; justify-content: center; align-items: center;
                li{ width: 197px; height: 130px;background-size: auto 130px; margin-left: -57px; margin-bottom: 15px;
                    &:last-child{margin-bottom: 0px;}
                    .boxcompany{
                     margin-left: 45px; margin-top: 0px;
                     div{font-size: 28px; background-size: auto 55px; height: 55px; padding-left: 15px; margin-bottom: 15px;}
                     p{padding-left: 15px;}
                    } 
                 }
             }
            }
        }
        
}
.hmSolutionsSection{ margin-top: 8px;
    .solutionsList{margin: -7px -15px -15px -15px;}
    @include phone{
        .hd1{text-align: center;}
        .solutionsList{max-width: 90%; margin-left: auto; margin-right: auto;}
    }
}
.boxComman1{ background: #216B8E; position: relative; padding: 40px 20px; margin: 15px; @include transition(0.3s); overflow: hidden;
    &::after{content: ''; position: absolute; left: 50%; top: 50%; width: 0px; height: 0px;background-color: transparent; z-index: 1;@include transition(0.3s);}
    &:hover{
        @include transition(0.3s);
        &::after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; @include transition(0.3s); background-color: rgba($color: #255974, $alpha: 95%);}
    }
    .imgBox{display: block; margin-bottom: 31px; position: relative; z-index: 2;}
    p{font-size: 22px; line-height: 24px; font-weight: 300; padding: 0px; margin: 0px; position: relative; z-index: 2;}
    .linkWidtharrow{ position: relative; margin-top: 18px; position: relative; z-index: 2;
        a{ display: inline-block; position: relative; background: url(../images/btn_arrow_white.png) no-repeat right center; background-size: 12px; padding-right: 22px; font-size: 16px; color: #fff;
            &:hover{color: #82c5e4;}
        }
    }
    @include desktop1600{
        .imgBox{ margin-bottom: 24px;
            img{max-height: 48px;}          
        }
        p{font-size: 20px; line-height: 22px;}
            .linkWidtharrow{
                a{font-size: 15px;}
            }
    }
    @include desktop1366{
        padding: 30px 15px;
        .imgBox{ margin-bottom: 18px;
            img{max-height: 43px;}          
        }
        p{font-size: 17px; line-height: 20px;}
            .linkWidtharrow{
                a{font-size: 13px;}
            }
    }
    @include phone{
        padding: 20px 15px;
        .imgBox{ margin-bottom: 18px;          
        }
        p{font-size: 16px; line-height: 18px;}
            .linkWidtharrow{ margin-top: 13px;
                a{font-size: 13px;}
            }
    }
    @include phone-xs{
        padding: 20px 15px;
        .imgBox{ margin-bottom: 18px;          
        }
        p{font-size: 16px; line-height: 18px; min-height:36px;}
            .linkWidtharrow{ margin-top: 13px;
                a{font-size: 13px;}
            }
    }
    @include phone480{
        padding: 30px 20px; max-width: 320px; margin-left: auto; margin-right: auto; text-align: center;
        .imgBox{ margin-bottom: 18px; 
            img{display: block; margin: 0px auto;}         
        }
        p{font-size: 16px; line-height: 18px; min-height:1px;}
            .linkWidtharrow{ margin-top: 13px;
                a{font-size: 13px;}
            }
    }
    @include phone330{max-width: 240px;}
}
.boxComman2{position: relative; margin: 0px 15px;
    .imgBox{ margin-bottom: 16px; display: block; overflow: hidden;
        img{@include transition(0.3s);}
    }
    strong{display: block; font-weight: 400;}
    &:hover{
        .imgBox{
            img{transform: scale(1.1); @include transition(0.3s);}
        }
    }
    @include desktop1366{
        .imgBox{margin-bottom: 10px;}
    }
}
.industriesSection{
    @include desktop1400{
        .solutionsList{margin-left: -26px;}
    }
    @include tab{
        .solutionsList{margin-left: -15px; margin-right: -15px;}
    }
    @include phone{
        .solutionsList{margin-left: auto; margin-right: auto; max-width: 90%;}
    }
}
.getInTouchSection{ position: relative; max-width: 1920px; margin: 0px auto;
    &::after{content: ''; position: absolute; z-index: 1; left: 0px; top: 0px; max-width: 530px; width: 50%; background: #45829F; height: 334px;}
    .container{position: relative; z-index: 2;}
    @include tab1024{
        &::after{max-width: 30%; width: 50%; height: 244px;}
    }
    @include tab{
        &::after{max-width: 45%; width: 50%; height: 32.7%; top: auto; bottom: 21.4%;}
        .container{
            .rowReverse{flex-direction: column-reverse;}
        }
        .contactImgbox{margin-top: 60px;}
        .hmForm .hd6{text-align: center;}
    }
    @include phone{
        &::after{ max-width: 100%; width: 100%; height: 32.7%; top: auto; bottom: 0;}
    }
    @include phone480{
        &::after{height: 25%;}
    }
    @include phone360{
        &::after{height: 20%;}
    }
}
.hmForm{margin-top: -5px;}
.aboutSection2{
    &.section_padding{padding-top: 60px; padding-bottom: 60px;}
    .listBoxBlue{ padding: 0px 127px;}
    .BlueBox1{ @include bgBox;}
    @include desktop1440{
        .listBoxBlue{padding: 0px 50px;}
    }
    @include desktop1366{
        .BlueBox1{
            ul{
                li{line-height: 24px;}
            }
        }
    }
    @include tab1024{
        .listBoxBlue{padding: 0px 0px 0px 20px;}
        .BlueBox1{ padding: 20px;}
    }
    @include tab{
        .listBoxBlue{padding: 90px 0px 0px 0px;}
        .BlueBox1{ padding: 20px; margin-left: auto; margin-right: auto;}
        &.partbg50{
            &::after{width: 100%; height: 28%;}
        }
    }
    @include phone{
        &.section_padding{padding-top: 40px; padding-bottom: 40px;}
        .listBoxBlue{ padding-top: 40px;}
        &.partbg50{
            &::after{height: 29%;}
        }
    }
}
.aboutSection3{position: relative;
    .maxWidth1920{position: relative;}
    .imgRightPostion{ position: absolute; right: 0px; top: 0px;}
    .listDechnologies{ @include dispflex(flex,flex-start,flex-start); flex-wrap: wrap; margin-bottom: -30px;
        li{@include dispflex(flex,flex-start,center); width: 50%; padding-bottom: 30px;
            &:first-child{width: 100%;
                p{max-width: 571px;}
            }
            div{ width: 70px; height: 70px;@include dispflex(flex,center,center); flex-direction: column; background: #417D9A;}
            p{padding: 0px 0px 0px 20px; margin: 0px; width: calc(100% - 90px);}
        }
    }
    @include desktop1440{
        .imgRightPostion{width: 100%; max-width: 35%;}
    }
    @include tab{
        .imgRightPostion{position: relative; max-width: 100%; margin: 30px 0px 0px 0px;}
    }
    @include phone{ text-align: center;
        .listDechnologies{
            li{ /*width: 100%;*/ flex-direction: column;
                div{margin: 0px auto 10px auto;}
                p{width: 100%; padding: 0px;}
            }
        }
    }
    @include phone400{
        .listDechnologies{
            li{ width: 100%;}
        }
    }
}
.missionAndValuesSection{position: relative;
    .imgBoxMission{ text-align: center;
        img{display: block; margin: 0px auto;}
    }
    @include tab{
        .imgBoxMission{margin: 30px 0px 0px 0px;}
    }
}
.conactSection{
    .blueBox1{
        background: linear-gradient(90deg, #417F9D 0%, #77BADA 100%); padding: 28px 40px 34px 40px; height: 100%;
        *{color: #fff;}
        a{color: #fff;
            &:hover{ color: #d5f2ff;}
        }
        .hd3{border-bottom: rgba($color: #ffffff, $alpha: 30%) solid 1px; padding: 0px 0px 6px 0px; margin: 0px 0px 14px 0px;}
        p{padding: 0px; margin: 0px;}
    }
    @include desktop1440{ 
        .blueBox1{padding: 25px 30px 31px 30px;}
    }
    @include desktop1366{ 
        .blueBox1{ padding: 20px 24px 26px 24px;
            .hd3{line-height: 26px;}   
        }     
    }
    @include tab1024{ 
        .blueBox1{ padding: 15px 15px 21px 15px;
            .hd3{line-height: 26px;}   
            p{
                br{display: none;}
            }
        }     
    }
    @include tab{ 
        .row{
            .col-lg-4{
                &:last-child{
                    .blueBox1{ margin-bottom: 0px;}
                }
            }
        }
        .blueBox1{ padding: 20px 20px 26px 20px; max-width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 30px; height: auto;
            .hd3{line-height: 26px;}   
            p{
                br{display: none;}
            }
        }     
    }    
}

.mapareaSection{
    .maparea{ margin-bottom: -9px; overflow-y: hidden;
        iframe{border: none; width: 100%; height: 600px;}
    }
    @include tab1024{
        .maparea{
            iframe{ height: 400px;}
        }
    }
    @include phone480{
        .maparea{
            iframe{ height: 350px;}
        }
    }
}
.productSubSection{position: relative;
    .listSub{
        ul{ @include dispflex(flex,flex-start,flex-start); flex-wrap: wrap; margin-bottom: -30px;
            li{ font-size: 22px; margin: 0px 30px 30px 0px;
                a{@include dispflex(flex,center,center); padding: 20px 48px; background: #232323; color: #fff;
                    i{@include dispflex(flex,center,center); flex-direction: column; text-align: center; width: 51px; height: 51px; margin-right: 15px;}
                    span{width: calc(100% - 66px);}
                    &:hover{ background: #107187; color: #fff;}
                }
            }
        }
    }
    .imgBox{
        img{max-width: 100%;}
    }
    @include desktop1680{
        .listSub{
            ul{
                li{ font-size: 20px;
                    a{ padding: 18px 47px;
                        i{ width: 46px; height: 46px; margin-right: 12px;}
                    }
                }
            }
        }
    }
    @include desktop1680{
        .listSub{
            ul{
                li{ font-size: 18px;
                    a{ padding: 15px 45px;
                        span{width: calc(100% - 58px);}
                    }
                }
            }
        }
    }
    @include desktop1366{
        .listSub{
            ul{ margin-bottom: -20px;
                li{ font-size: 16px; margin: 0px 20px 20px 0px;
                    a{ padding: 12px 30px;
                        i{ width: 40px; height: 40px; margin-right: 8px;
                            img{max-width: 30px; max-height:none!important;}
                        }
                        span{width: calc(100% - 0px);}
                    }
                }
            }
        }
    }
    @include tab1024{
        .listSub{
            ul{
                li{ font-size: 14px;
                    a{ padding: 10px 25px;
                        i{ width: 35px; height: 35px; margin-right: 8px;
                            img{max-width: 28px;}
                        }                        
                    }
                }
            }
        }
    }
    @include phone_tab_min{
        .listSub{
            ul{ margin-bottom: -15px;
                li{ font-size: 14px;margin: 0px 15px 15px 0px;
                    a{ padding: 8px 25px;
                        i{ width: 30px; height: 30px; margin-right: 8px;
                            img{max-width: 25px;}
                        }                        
                    }
                }
            }
        }
    }
    @include phone{
        .listSub{ margin-bottom: 30px;
            ul{ justify-content: center; margin: 0px;
                li{ font-size: 14px; margin: 0px 10px 20px 10px;
                    a{ padding: 7px 25px;
                        i{ width: 30px; height: 30px; margin-right: 8px;
                            img{max-width: 25px;}
                        }                        
                    }
                }
            }
        }
    }
    @include phone380{
        .listSub{
            ul{ justify-content: center; margin-top: -5px;
                li{ font-size: 14px; margin: 7px 0px; width: 100%;
                    a{
                        span{max-width: 90px;}                        
                    }
                }
            }
        }
    }
}
#sticky{ position: sticky; top: 0px;}
.productDetailPage{   
    .left_side{background: #F8F8F8; border: #DCD9D9 solid 1px; padding: 10px 8px;
        ul{
            li{ border-bottom: #D9D9D9 solid 2px; font-size: 18px;
                &:last-child{border-bottom: 0px; padding-bottom: 0px;}
                a{padding: 11px 17px; color: #000; display: block;}
                &:hover,&.active{
                    a{color: #417D9A;}
                }
            }
        }
    }
    .productDetailSection{ 
        .productContent{display: inline-block; width: 100%;}
        .ImgboxRight{float: right; width: 43%; max-width: 454px; margin: 0px 0px 30px 30px;}
    }
    .imgBoxCenter{text-align: center;@include dispflex(flex,flex-start,center); flex-direction: column;}
    .listDetailBlue{ margin-bottom: -30px;
        .col-lg-4{margin-bottom: 30px;
            &:last-child{
                .BlueBox1{margin-bottom: 0px;}
            }
        }
        .BlueBox1{ @include bgBox; height: 100%;
            p{padding-bottom: 0px; margin-bottom: 0px;}
        }
    }
    .format_list{ padding-top: 55px;
        ul{@include dispflex(flex,flex-start,flex-start); margin: -5px; flex-wrap: wrap;
            li{ margin: 5px;background: #EAEAEA;
                a{display: block;  color: #000; padding: 11px 16px; cursor: default;}
            }
        }
    }
    .divmargin-5{margin: -5px}
    .ulGeaybox{@include dispflex(flex,flex-start,stretch); flex-wrap: wrap; margin: 0px 0px 28px 0px;
        li{width: calc(33.33% - 10px); margin: 5px;background: #EAEAEA; padding: 5px; text-align: center;@include dispflex(flex,center,center); flex-direction: column;
        }
    }
    .specialTital{ font-size: 45px; line-height: 50px; color: #555555;
        span{ font-size: 160px; line-height: 160px; color: #417F9D; display: block; padding-bottom: 20px;}
    }
    .listLiSpecial{@include dispflex(flex,flex-start,flex-start); flex-wrap: wrap; margin-bottom: -7px;
        li{ width: 32%; padding-bottom: 7px; margin-right: 50px;
            &:nth-child(2n+2){width: 58%;}
        }
    }
    .listUl{
        @include dispflex(flex,flex-start,flex-start); flex-wrap: wrap;
        .bullet{ margin-bottom: 0px;
            li{padding-bottom: 5px;
                &:last-child{padding-bottom: 0px;}
            }
        }
        .ulWidth30{width: 32%; margin-right: 50px;}
        .ulWidth60{width: 60%;}
    }
    @include mintab{
        .ulGeaybox{
            li{
                br{display: none;}
            }
        }
    }
    @include desktop1600{
        .left_side{
            ul{
                li{font-size: 17px;}
            }
        }
    }
    @include desktop1440{
        .left_side{
            ul{
                li{font-size: 16px;}
            }
        }
        .specialTital{ font-size: 40px; line-height: 45px;
            span{ font-size: 120px; line-height: 120px; padding-bottom: 15px;}
        }
        .listLiSpecial{
            li{ width: 31%;  margin-right: 40px;
                &:nth-child(2n+2){width: 60%;}
            }
        }
        .listUl{
            .ulWidth30{width: 31%; margin-right: 50px;}
            .ulWidth60{width: 59%;}
        }
    }
    @include desktop1400{
        .listDetailBlue .BlueBox1{padding: 20px;}
    }
    @include desktop1366{
        .left_side{
            ul{
                li{font-size: 14px;
                    a{padding: 10px;}
                }
            }
        }
        .specialTital{ font-size: 35px; line-height: 30px;
            span{ font-size: 100px; line-height: 100px; padding: 16px 0px;}
        }
        .listLiSpecial{ align-items: normal;
            li{ width: 33%;  margin-right: 30px;
                &:nth-child(2n+2){width: 57%;}
            }
            .listUl{
                .ulWidth30{width: 34%; margin-right: 30px;}
                .ulWidth60{width: 56%;}
            }
        }
    }
    @include tab1024{
        .productDetailSection{
            .ImgboxRight{width: 37%;margin: 0px 0px 20px 20px;}
        }
        .specialTital{ font-size: 30px; line-height: 28px;
            span{ font-size: 80px; line-height: 80px; padding: 16px 0px;}
        }
        .listUl{
            .ulWidth30{width: 40%; margin-right: 20px;}
            .ulWidth60{width: calc(60% - 20px);}
        }
    }
    @include tab{
        #sticky{position: relative;}
        .left_side{
            ul{
                li{font-weight: 400;}
            }
        }
        .listDetailBlue .BlueBox1{max-width: 100%; padding: 25px;}
        .specialTital{text-align: center;}
        .listUl{ flex-direction: column;
            .ulWidth30{width: 100%; margin-right: 0px;}
            .ulWidth60{width: 100%;}
        }
    }    
    @include phone{
        .productDetailSection{
            .ImgboxRight{float: none; width: 100%; margin: 0px auto 20px auto;}
            .productContent{text-align: center;}            
        }
        .imgBoxCenter{max-width: 370px; margin: 0px auto;}
        .listDetailBlue{
            .col-lg-4{margin-bottom: 20px;}
            .BlueBox1{text-align: center;}
        }
        .format_list ul{ align-items: stretch;
            li{width: calc(50% - 10px); @include dispflex(flex,center,center); flex-direction: column;
                a{display: block;}
            }
        }
        .bullet{text-align: left;}
        .ulGeaybox{
            li{width: 100%; margin-left: 0px; margin-right: 0px; padding: 10px;}
        }
        .specialTital{ font-size: 28px; line-height: 26px;
            span{ font-size: 70px; line-height: 70px; padding: 20px 0px;}
        }
    }
    @include phone480{
        .format_list ul{ align-items: stretch;
            li{width: 100%; height: auto;}
        }
        .specialTital{ font-size: 20px; line-height: 22px;
            span{ font-size: 50px; line-height: 50px; padding: 10px 0px;}
        }
    }
    .productdetailSection1{    
        .maxWidth850{margin: 23px 0px 23px 0px;}
        .listSection1{
            .row{border-bottom: #fff solid 1px; padding-top: 26px; padding-bottom: 26px;
                &:first-child{padding-top: 0px;}
                &:last-child{ border-bottom: none; padding-bottom: 0px;}
            }
            .hd3{font-weight: 400;}
            .hd3,p{padding: 0px; margin: 0px;}        
        }
        @include desktop1366{
            .maxWidth850{margin: 13px 0px 36px 0px;}
           .listSection1{
            .row{padding-top: 20px;padding-bottom: 20px;}
            .hd3{font-size: 17px;}
           } 
        }
        @include tab1024{
            .maxWidth850{margin: 3px 0px 26px 0px;}
           .listSection1{
            .row{padding-top: 20px;padding-bottom: 20px;
                
            }
            .hd3{font-size: 17px;}
           } 
        }
        @include phone480{
            .maxWidth850{margin: 3px 7px 20px 7px;
                .col-6{padding-left: 7px; padding-right: 7px;}
            }
           .listSection1{
            .row{padding-top: 15px;padding-bottom: 15px;}
           } 
        }        
    }
}
.btn_side{ border: none; background: #216B8E; color: #fff;}
.bgImgSection1{ position: relative; max-width: 1920px; margin: 0px auto;
    &::after{content: ''; position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(35, 35, 35, 0) 0%, #232323 100%);}
    *{color: #fff;}
    .imgBg{position: relative; z-index: 1; min-height: 280px;
        img{width: 100%; object-fit: cover; min-height: 280px;}
    }
    .textsection{position: absolute; left: 0px; right: 0px; bottom: 0px; width: 100%; z-index: 3;
        .container{margin-left: auto; margin-right: auto;
            p{
                &:last-child{padding-bottom: 0px;}
            }
        }
    }
    .line-hieght42{line-height: 42px;}
    @include tab1024{
        .textsection{
            .hd3{font-size: 17px;}
        }
        .maxwidth760 { max-width: 630px;}
        .line-hieght42{line-height: 33px;}
    }
    @include phone{
        @include dispflex(flex,center,center); flex-direction: column;
        .textsection{ top: auto; bottom: auto;}
        .line-hieght42{line-height: 30px;}
    }
    @include phone-xs{
        .imgBg{min-height: 297px;
            img{min-height: 297px;}
        }
    }
    @include phone420{
        .imgBg.mobile400{min-height: 202px;
            img{min-height: 202px;}
        }
        .line-hieght42{line-height: 25px;}
    }
    @include phone380{
        .imgBg{min-height: 372px;
            img{min-height: 372px;}
        }
        .textsection{
            .hd3{line-height: 22px; padding-bottom: 18px;}
        }
    }
}

/* ------- Mani Area End ------- */
/* ------- Footer Area Start ------- */
.fotter_area{font-size: 20px; font-weight: 300; background: url(../images/bg_footer.jpg) no-repeat left top; padding: 113px 0px 0px 0px;color: #ffffff; position: relative;
    &::after{content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba($color: #255E7A, $alpha: 95%); z-index: 1;} 
    .container,.bottom_area{position: relative; z-index: 2;}
    h6{font-size: 30px; color: #2C2C2C; font-weight: 700; text-transform: uppercase; padding-bottom: 15px;}
        a{color: #fff;
            &:hover{color:$primaryColor;}
        }
        .paddleft0{padding-left: 0px;}
        .footer_link{@include dispflex(flex,space-between,flex-start); padding-bottom: 60px; margin-left: -15px; margin-right: -15px;}
        .comman_footer{  width: 33.33%; padding: 0px 15px;
            .contact_footer{
                p{font-size: 45px; line-height: 55px; padding: 0px 0px 30px 0px; margin: 0px;}
            }
            .address_area{   padding-top: 10px;
                &.maxwidth198{max-width: 408px;}           		
                table{border: 0px; width: 100%; border-collapse: collapse;
                    &:last-child{margin-bottom: 0px;}
                    tr{
                        td{ padding-bottom: 26px;
                            &:first-child{width: 40px; text-align: left;
                                img{max-width: 21px;}
                            }
                            p{line-height: 30px; margin: 0px; padding: 0px;}
                        }
                        &.top_td{
                            td{vertical-align: top;
                                &:first-child{padding-top: 0px;}
                            }
                        }
                        &:last-child{
                            td{padding-bottom: 0px;}
                        }
                    }
                }
            }    
        } 
        .addres_div{
            &.flex_end{display: flex; flex-direction: column; align-items: flex-end;}
        }
        .footer_navi{	 margin-left: 20px;	
            ul{
                li{padding: 0px; margin: 10px 0px;
                    &:last-child{margin-bottom: 0px;}
                    a{ color: #fff;  display: block;
                        &:hover{color:$primaryColor;}
                    }
                    &.active{
                        a{color:$primaryColor;}
                    }
                }
            }
        }
        		
        .bottom_area{font-size: 17px; font-weight: 300; padding: 14px 0px 12px 0px; color: #fff; border-top: rgba($color: #fff, $alpha: 50%) solid 1px;
            .copyright{@include dispflex(flex,flex-start,center);
                img{margin-right: 5px;}
            }
            .website_by{text-align: right;@include dispflex(flex,flex-end,center);
                img{max-width: 26px;}
                a{margin-left: 5px;}
            }
        }
        @include desktop1680{
            font-size: 18px; padding-top: 80px;
            .h5_tital{font-size: 100px;
                img{max-width: 60px;}
            }
            h6{font-size: 26px;}
            .footer_link{padding-bottom: 50px;}
            .footer_navi{
                ul{
                    li{font-size: 18px;}
                }
            }
            .bottom_area{font-size: 15px; padding: 20px 0px 16px 0px;}
        }
        @include desktop1440{
            font-size: 16px;
            .h5_tital{font-size: 80px;
                img{max-width: 40px;}
            }
            h6{font-size: 22px; margin-bottom: 0px;}
            .comman_footer{
                .contact_footer{
                    p{font-size: 40px; line-height: 53px;}
                }
                .address_area{
                    &.maxwidth198{max-width: 328px;}
                    table{
                        tr{
                            td{
                                &:first-child{width: 35px;}
                            }
                            &:first-child{
                                td{
                                    p{margin-top: -4px;}
                                }
                            }
                        }
                    }
                }
            } 
            .footer_navi{
                ul{
                    li{font-size: 16px;}
                }
            }
            .bottom_area{font-size: 14px; padding: 17px 0px 13px 0px;
                .copyright{
                    img{max-width: 17px;}
                }
            }
        }
        @include desktop1400{
            font-size: 14px;
            .h5_tital{font-size: 65px;
                img{max-width: 40px;}
            }
            h6{font-size: 20px;}
            .footer_link{padding: 0px 0px 30px 0px;}
            .footer_navi{
                ul{
                    li{font-size: 14px;margin-bottom: 16px;}
                }
            }
            .comman_footer{ 
                .address_area{		
                    table{
                        tr{
                            &:first-child td p{margin-top: -1px;}
                            td{ padding-bottom: 10px;
                                &:first-child{width: 33px;
                                    img{max-width: 17px;}
                                }
                                p{line-height: 24px;}
                            }
                            &.top_td{
                                td{vertical-align: top;
                                    &:first-child{padding-top: 3px;}
                                }
                            }
                        }
                    }
                }
                .contact_footer p{ font-size: 32px; line-height: 42px;}
            }
            .bottom_area{font-size: 13px; padding: 14px 0px 10px 0px;
                .copyright{ line-height: normal;
                    img{max-width: 15px;}
                }
            }
        }
        @include mini-desktop{ 
            font-size: 16px; padding-top: 40px;
            .h5_tital{font-size: 50px;
                img{max-width: 32px;}
            }
            h6{font-size: 20px;}             
        }
        @include tab1024{
            .comman_footer{
                .contact_footer{
                    p{font-size: 28px; line-height: 38px; padding-bottom: 20px;}
                }
                .address_area table tr:first-child td p{
                    br{display: none;}
                }
            }
        }
        @include tab { 
            padding-top: 50px;  font-size: 13px;  
            .h5_tital{font-size: 44px; line-height: normal; padding-bottom: 18px;
                img{max-width: 26px;}
            } 
            h6{font-size: 19px;}      
            .footer_link{ //flex-direction: column; text-align: center; align-items: center;
                .footer_navi{ padding: 0px 0px 0px 0px; margin-left: 10px;
                    ul{max-width: 100%;}
                }
                .social_link{margin: 15px 0px 0px 0px;}			
            }
            .comman_footer{ 
                .contact_footer{
                    p{font-size: 21px; line-height: 33px; padding-bottom: 16px;}
                }
                .address_area{		
                    table{
                        tr{
                            td{ padding-bottom: 7px;
                                &:first-child{width: 27px;
                                    img{max-width: 15px;}
                                }
                                p{line-height: 20px;}
                            }
                            &.top_td{
                                td{vertical-align: top;
                                    &:first-child{padding-top: 0px;}
                                }
                            }
                        }
                    }
                }
            }
            
        }
        // @media (min-width: 768px) and  (max-width: 1000px){
        //     .navi_footer{margin-left: -42px;}
        //     .comman_footer{
        //         .address_area.maxwidth211{max-width: 181px;}
        //     }
        // }
       
        @include phone { padding-top: 0px; background-size: cover;
            .h5_tital{justify-content: center;}
            h6{text-align: center; padding-bottom: 0px; margin-bottom: 12px; font-size: 18px;}
            .navi_footer{flex-direction: column;}
            .comman_footer{padding: 30px 10px; width: 100%; text-align: center; border-bottom: solid 1px rgba($color: #fff, $alpha: 20%);                
                &:last-child{border: 0px;}
                .address_area{padding: 0px;}
                .contact_footer{
                    div{text-align: center;}
                    p{max-width: 340px; text-align: center; margin-left: auto; margin-right: auto;}
                }
                &:last-child{padding-bottom: 0px;}
                .address_area{                    
                    table{
                        tr{
                            td{text-align: left; padding-bottom: 12px;
                                &:first-child{
                                    img{width: 100%; max-width: 16px;}
                                }
                                strong{display: block;} 
                                p{
                                    br{display: none;}
                                }
                            }
                            &:last-child{
                                td{padding-bottom: 0px;}
                            }
                        }
                    }
                }
                &.addres_div{max-width: 100%; //padding-bottom: 35px;
                    &:last-child{padding-bottom: 10px;}
                    .address_area{ max-width: 345px; margin: 0px auto;
                        &.addres1{
                            table{ @include dispflex(flex,center,center); flex-direction: column;
                                tr{@include dispflex(flex,center,center);
                                    &.top_td{ flex-direction: column;
                                        td{display: block; text-align: center;
                                            &:first-child{width: 100%; padding-bottom: 5px;
                                                img{width: 100%; max-width: 18px;}
                                            }
                                        }
                                    } 
                                    td{ 
                                        p{max-width: 100%;}
                                    }
                                }
                            }
                        }					
                    }
                    }
                }
                .footer_link{ flex-direction: column; padding: 0px 0px 20px 0px;
                    .footer_navi{margin: -7px 0px;
                        ul{
                            li{margin: 0px;}
                        }
                    }
                    .navi_footer{ margin: 0px;}                    
                }
                .bottom_area{text-align: center; padding: 10px 0px;
                    .copyright{justify-content: center;padding-bottom: 3px;}
                    .website_by{text-align: center; justify-content: center; font-weight: 300;
                        img{ opacity: 0.60;}
                    }
                }
                .footer_navi{ padding: 10px 0px;  margin: 0px auto; width: 100%; flex-direction: column;
                    ul{ justify-content: center; flex-direction: column; width: 100%;
                        li{padding: 0px; width: 100%; text-align: center; font-size:16px; 
                            //&:last-child{border: none;}
                            a{display: block; padding: 7px 0px;}
                        }
                    }
                }
            }
        @include phone480{
            .h5_tital{ font-size: 34px;
                img{max-width: 22px;margin-left: 15px;}
            }
        }
            // @include phone360{
            //     .comman_footer.addres_div .address_area{
            //         p{
            //             br{display: block;}
            //         }
            //     }
            // }	
}
/* ------- Footer Area End ------- */
#toTop {@include dispflex(flex,flex-end,center); flex-direction: column; width:40px; height: 40px; border-radius: 100%; background:#429452; color: $blackColor; text-align:center; padding:5px; position:fixed; /* this is the magic */ bottom:16px; /* together with this to put the div at the bottom*/ right:10px; cursor:pointer; display:none; font-size:26px; line-height: 26px; z-index: 9;
    &:hover{
        background: #216B8E; color: $whiteColor!important;
    }
}      
/* ====== Respensive css strat ====== */
.container{padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto;
    .row{margin-left: -15px; margin-right: -15px;
        .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{padding-left: 15px; padding-right: 15px;}
    }
    .row{ 
        &.row25{
            margin: 0px -25px;
            .col-md-4{padding-left: 25px; padding-right: 25px;}
            @include tab1024{
                margin: 0px -20px;
            .col-md-4{padding-left: 20px; padding-right: 20px;}
            }            
        }
    }
    @include phone_tab1024{
        padding-left: 25px; padding-right: 25px;
    }
}
@include tab1024 {
    h2,.hdfnt28{ padding-bottom: 23px; line-height: 24px;} 
    .hdfont35{margin-bottom: 27px;} 
    .hdfont30{ margin-bottom: 26px;
        &.marginbtm44{margin-bottom: 32px;}
    }
    h2.paddbtm48set60, .hdfnt28.paddbtm48set60{ padding-bottom: 38px;}
    .tabStructure{
        .card{
            .accordion-body{padding: 44px 39px 50px 39px;}
        }
    }
}
@include phone_tab_min{
    body{font-size: 16px;}
    p{line-height: 23px;}
    // h2,.hdfnt28{ font-size: 24px; line-height: 28px; padding-bottom: 19px;}
}
@include tab{
    body{font-weight: 300;}
    .hdfont35{font-size:32px; line-height: 39px;}
    .hdfont30{font-size: 26px; line-height: 30px;}
}
@media screen and (min-width : 768px) and (max-width : 1020px) {}
@include phone {
    .container{padding-left: 20px; padding-right: 20px;
        .row{margin-left: -20px; margin-right: -20px;
            .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{padding-left: 20px; padding-right: 20px;}
        }               
    }
    .mobileTextCenter{text-align: center;}
    h3, .mainTitle{padding-bottom: 44px;}
    .hdfont35 { font-size: 30px; line-height: 37px; margin-bottom: 28px;}
    .hdfont30{font-size: 28px; line-height: 36px; margin-bottom: 27px;}
    .hdfnt28.paddbtm48set60 {
        padding-bottom: 36px;
    }
}
@include phone480 {
    // .container{padding-left: 19px; padding-right: 19px;
    //     .row{margin-left: -19px; margin-right: -19px;
    //         .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{padding-left: 19px; padding-right: 19px;}
    //     }
    // }
}
@include phone330 {
    .container{padding-left: 15px; padding-right: 15px;
        .row{margin-left: -15px; margin-right: -15px;
            .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{padding-left: 15px; padding-right: 15px;}
        }
    }
}