@import url("headerfooter.css");
.pl-0 { padding-left: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.mt-5 { margin-top: 30px !important; } 
.mb-4 { margin-bottom: 20px !important; }
.mb-0 { margin-bottom: 0 !important; }
.pt-3 { padding-top: 15px !important; }
header { padding: 10px 0 2px 0; position: fixed; background: #ffffff; width: 100%; z-index: 99999; top: 0; left: 0; }

header nav { position: relative; width: auto; height: auto; left: auto; right: auto; top: auto; bottom: auto; margin: 0; padding: 0;
        display: block; background-color: #ffffff; transform: translateX(0); opacity: 1; margin-bottom: 0; }
header nav.navbar{ margin-bottom: 0; overflow: visible; flex-wrap: nowrap; padding-bottom: 5px; padding-top: 0; }
header .navbar-brand { height: auto; padding: 0; width: 160px; padding-bottom: 7px; display: inline-block; }
header .navbar-brand img { width: auto; }
header .navbar-nav { flex-direction: row; }
header .navbar-nav .nav-item { margin: 0 15px; padding: 0 15px; position: relative; }
header .navbar-nav .nav-item .nav-link { position: relative; color: #737373; font-size: 16px; font-weight: 600; text-decoration: none; }
header .navbar-nav .nav-item .nav-link::before {content: '';  width: 0; transition: all .5s; }
header .navbar-nav .nav-item .nav-link:hover::before,
header .navbar-nav .nav-item.active .nav-link::before { content: ''; position: absolute; left: 0; bottom: -7px; width: 100%; height: 4px; background: #F97928; transition: all .5s; }
header .navbar-nav .nav-item.selected .nav-link::before { content: ''; position: absolute; left: 0; bottom: -7px; width: 100%; height: 4px; background: #F97928; }
header .navbar-nav .nav-item .nav-link.toggleSubMenu::after{ content: ''; position: absolute; right: -18px; top: 54%; transform: translateY(-50%); background: url(../images/navArrow.svg); width: 11px; height: 7px; opacity: .7; }
header .navbar-nav .nav-item.active .nav-link.toggleSubMenu::after{ content: ''; transform: rotate(180deg); top: 23px; }
header .navbar-nav .nav-item .toggleSub-menu { position: fixed; top: 60px; left: 0; width: 100%; padding: 0; border-radius: 10px; background: #FFF; overflow: hidden; }
header .navbar-nav .nav-item .toggleSub-menu.aboutToggle { width: 800px; left: auto; right: 0; }
header .navbar-collapse,
header .navbar-collapse.collapse { float: right; display: flex !important; align-items: center; justify-content: end; }
.button { display: inline-flex; color: #FFF; font-size: 16px; font-weight: 600;  padding: 8px 30px; justify-content: center; align-items: center; gap: 10px; flex-shrink: 0; border-radius: 50px; background: linear-gradient(90deg, #F87023 0%, #FFC554 100%) ;}
.navSubBar { display: block; position: relative; }
.navSubBar::before { content: ''; position: absolute; top: 30px; left: 34%; background: #DBDBDB; width: 1px; height: calc(100% - 60px); }
.navSubBar::after { content: ''; position: absolute; top: 30px; right: 36%; background: #DBDBDB; width: 1px; height: calc(100% - 60px); }
.aboutToggle .navSubBar::before { content: ''; position: absolute; top: 30px; left: 50%; background: #DBDBDB; width: 1px; height: calc(100% - 60px); }
.aboutToggle .navSubBar::after { display: none; }
.linTooBig{ min-height: 350px; }
.navSubBar .navSubLeft { width: 268px; flex-shrink: 0; background: #F9F9F9; padding: 40px; }
.navSubBar .navSubLeft p { font-size: 14px; opacity: 0.8; }
.navSubBar .navSubMiddle { width: calc(100% - 403px); padding: 25px 30px; display: inline-block; vertical-align: top; }
.navSubBar .navSubMiddle .urlOnlyWrap { position: relative; }

.navSubBar .navSubMiddle .urlOnlyWrap ul { display: block; flex-wrap: wrap; }
.navSubBar .navSubMiddle .urlOnlyWrap ul li { width: 50%; padding: 15px 0; }
.navSubBar .navSubMiddle .urlOnlyWrap ul li .urlList { position: relative; padding-left: 54px; display: block; cursor: pointer; }
.navSubBar .navSubMiddle .urlOnlyWrap ul li .urlList i { width: 38px; height: 38px; border-radius: 5px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);  background: #F9F9F9;}
.navSubBar .navSubMiddle .urlOnlyWrap ul li .urlList span { color: #373737; font-size: 16px; font-weight: 600; line-height: 1.5; }
.navSubBar .navSubMiddle .urlOnlyWrap ul li .urlList span b { display: inline-block; width: 7px; height: 11px; background: url(../images/nav-arrow.svg) no-repeat center center; background-size: cover; margin-left: 5px; vertical-align: middle; }
.navSubBar .navSubMiddle .urlOnlyWrap ul li .urlList p { color: #373737; font-size: 14px; font-weight: 400; opacity: 0.8; line-height: 1.5; margin-bottom: 0;     max-width: 290px; }

.navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap { position: relative; width: 670px; }
.navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li.active .subSubNav { display: block; }
.navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li .urlList p { position: relative;}
.navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li .urlList p::before { content: ''; width: 0; transition: all .5s; }
.navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li.active .urlList p::before { content: ''; position: absolute; left: 0; bottom: -7px;  height: 4px; background: #F97928; width: 80px; }
.navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li:hover .urlList p::before{ content: ''; position: absolute; left: 0; bottom: -7px;  height: 4px; background: #F97928; width: 80px; }

.navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li .subSubNav { position: absolute; right: 0; top: 15px; width: 45%; display: none; }
.navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li { width: 56%; }
.navSubBar .navSubRight { padding: 37px; display: inline-block; position: relative; z-index: 1; }
.navSubBar .navSubRight b { color: #373737; font-size: 14px; font-weight: 700; text-transform: uppercase; opacity: 0.4;}
.navSubBar .navSubRight a { display: block; margin-top: 20px; max-width: 315px; }

.subSubNav { }
.subSubNav .subSubNavList { margin-bottom: 25px; }
.subSubNav .subSubNavList a { }
.subSubNav .subSubNavList a span { color: #373737; font-size: 16px; font-weight: 600; line-height: 1.5; }
.subSubNav .subSubNavList a span.colorYellow { font-size: 16px; font-weight: 700; line-height: normal; background: linear-gradient(42deg, #F87023 6.78%, #FFC554 80.87%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.subSubNav .subSubNavList a p { display: block; color: #373737; font-size: 14px; font-weight: 400; opacity: 0.8; line-height: 1.5; margin-bottom: 0;}
.backService { display: none; }


.fadeWrap { position: fixed; display: none; left: 0; top: 0; opacity: .6; background: #000000; width: 100%; height: 100vh; z-index: 9; }
.fadeWrap.active { display: block; }
.toggleSub-menu { display: none;}
.nav-item.active .toggleSub-menu { display: block;}

footer { height: auto; padding-bottom: 100px; padding-top: 50px; position: relative;  }


footer .footer-bottom { padding: 20px 0; background: #f3f4f4; color: #ccc; position: absolute; bottom: 0; width: 100%; text-align: center; }
    
footer .footer-bottom a,
footer .footer-bottom small { color: #848282; margin: 0 15px; font-size: 11px; }
footer .conInfoWrap { display: block; }
footer .centerFooter .footLogo { max-width: 308px; }
footer .conInfoWrap .conInfoList { display: flex; margin-top: 15px; }
footer .conInfoWrap .conInfoList i { display: inline-block; vertical-align: middle; }
footer .conInfoWrap .conInfoList b { display: inline-block; vertical-align: middle; padding-left: 10px; color: #373737; }
footer .footer-link h3 { color: #373737; font-size: 16px; font-weight: 700; text-transform: uppercase; opacity: 0.5; }
footer .companyDis { max-width: 365px; color: #373737; font-size: 12px; font-weight: 400; opacity: 0.6; margin-top: 18px; }
footer .footer-bottom .containerbox { display: flex; justify-content: space-between; align-items: center; }
footer .footer-bottom .containerbox a, 
footer .footer-bottom .containerbox small { margin: 0; }
footer .footer-bottom .containerbox .contAddress { margin-right: 45px; display: flex; flex-wrap: wrap; align-items: center; }
footer .footer-bottom .containerbox .contAddress i {}
footer .footer-bottom .containerbox .contAddress b { color: #373737; font-size: 12px; font-weight: 600; padding-left: 8px; max-width: 220px; text-align: left; }
.backSubService,
.mobileNav { display: none; }
.navbar-navDSK { display: flex; }
.navbar-navMOB { display: none; }
.modal-backdrop { background: rgba(0,0,0,.5) !important;}
.modal.fade{ opacity: 1 !important;}
.modal.fade .modal-dialog { background: transparent !important; -webkit-transform: translate(0, 0%); -ms-transform: translate(0, 0%); -o-transform: translate(0, 0%);
        transform: translate(0, 0%); }


@media (max-width:1200px) {
        header .navbar-nav .nav-item { margin: 0 5px; }
}

@media (max-width:1000px) {
        .navbar-navDSK { display: none; }
        .navbar-navMOB { display: block; }
        header nav.navbar { flex-wrap: wrap; display: block;  }
        header.active::before{ content: ''; position: absolute; top: 58px; left: 0; width: 100%; height: 1px; background: #DBDBDB; z-index: 1; }
        header .navbar-nav { flex-direction: column; margin-bottom: 25px;  }
        .navbar-toggler.collapsed {  background: url(../images/icon_menu.svg); background-repeat: no-repeat; background-position: center; }
        .navbar-toggler { width: 30px; height: 30px; background: url(../images/close_menu.svg); background-repeat: no-repeat; background-position: center; display: inline-block; position: absolute; right: 0; top: 8px; } 
        
        header .navbar-collapse, header .navbar-collapse.collapse { padding: 0; display: none !important; }
        header .navbar-collapse, header .navbar-collapse.in,
        header .navbar-collapse, header .navbar-collapse.show{ display: block !important; width: 100%; height: 92vh; }
  
        header .navbar-nav .nav-item .nav-link { display: block; width: 93%; color: #373737; }
        header .navbar-nav .nav-item .nav-link:hover::before, header .navbar-nav .nav-item.active .nav-link::before { display: none;}
        header .navbar-nav .nav-item .nav-link span { position: relative; }
        header .navbar-nav .nav-item.active .nav-link span::before { content: '';  position: absolute; left: 0; bottom: -6px; width: 100%; height: 4px; background: #F97928; }
        .navSubBar { overflow: auto; height: 90vh; }
        .navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li.active .subSubNav { position: relative; width: 100%; left: 52px; }
        .navSubBar .navSubMiddle { width: 100%; padding: 20px; height: 54vh; }
        .subSubNav .subSubNavList:last-child { margin-bottom: 0; }
        header .navbar-nav .nav-item { margin: 0 5px; float: none; padding: 12px 0; } 
        .navSubBar .navSubRight { width: 100%; padding-top: 15px; }
        .navSubBar .navSubRight b { position: relative; }
        .navSubBar .navSubRight b::before { content: ''; position: absolute; left: 89px; width: 71%; background: #373737; opacity: 0.4; height: 2px; display: block; top: 11px; }
        .navSubBar::before,
        .navSubBar::after { display: none; }
        .fadeWrap.active { display: none; }
        .navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap,
        .navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li { width: 100%; }
        /* .navSubBar .navSubMiddle .urlOnlyWrap { position: fixed; left: 120%; top: 50px; width: 100%; transition: all .5s; height: 60vh; } */
        /* .toggleSub-menu { display: block; } */
         
        /* header .navbar-nav .nav-item.active .urlOnlyWrap { left: 0; } */
        .backService { display: flex; color: #373737; font-size: 18px; font-weight: 800; text-transform: capitalize; margin-bottom: 50px; }
        .backService i { vertical-align: middle; margin-right: 10px; }
        .backSubService { display: flex; color: #373737; font-size: 18px; font-weight: 800; text-transform: capitalize; margin-bottom: 50px; }
        .backSubService i { vertical-align: middle; margin-right: 10px; }
        .navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li .subSubNav { display: none; }
        .navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li.active .subSubNav { opacity: 0; position: fixed; left: 140%; top: 50px; transition: all .5s; height: calc(100vh - 50px); background: #ffffff; z-index: 1; padding-top: 50px; }
        .navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li.active .subSubNav.active,
        .navSubBar .navSubMiddle .urlOnlyWrap ul.subLinkUrlWrap li .subSubNav.active { left: 0; opacity: 1; transition: all .5s; }

        .mobileNav{ position: fixed; top: 60px; left: 0; background: #ffffff; display: block;  z-index: 99999; left: 140%; width: 100%; transition: all .5s; padding: 40px 25px 25px; height: calc(100vh - 50px);}
        .mobileNav.active{  left: 0; transition: all .5s; z-index: 99999; display: block; }

        .mobileNav .subSubNav{ position: fixed; top: 60px; left: 0; background: #ffffff; display: block; left: 140%; height: 54vh; width: 100%; transition: all .5s; padding: 40px 25px 25px; overflow: auto; }
        .mobileNav .subSubNav.active{ opacity: 1; left: 0; transition: all .5s; z-index: 1; }
        /* .mobileUrlOnlyWrap{     height: calc(100vh - 52px); overflow: auto;} */
        .mobilesubLinkUrlWrap { }
        .mobilesubLinkUrlWrap li { width: 100%; margin-bottom: 40px;}
        .mobilesubLinkUrlWrap li .urlList  {position: relative;  padding-left: 54px; display: block; }
        .mobilesubLinkUrlWrap li .urlList i { width: 38px; height: 38px;  border-radius: 5px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);       background: #F9F9F9;}
        .mobilesubLinkUrlWrap li .urlList span { color: #373737; font-size: 16px; font-weight: 600; line-height: 1.5; position: relative; display: block;}
        .mobilesubLinkUrlWrap li .urlList span b {display: inline-block; width: 7px; height: 11px; background: url(../images/nav-arrow.svg) no-repeat center center; background-size: cover; margin-left: 5px; vertical-align: middle; position: absolute; right: -9px; top: 20px;}
        .mobilesubLinkUrlWrap li .urlList p { color: #373737; font-size: 14px; font-weight: 400; opacity: 0.8; line-height: 1.5; margin-bottom: 0; position: relative;}
        .mobileNavSubRight { position: absolute; bottom: 20px; z-index: 2; }
        .mobileNavSubRight b { display: block; position: relative; color: #373737; font-size: 14px; font-weight: 700; text-transform: uppercase; position: relative; margin-bottom: 20px; }
        .mobileNavSubRight b::before{ content: ''; background: rgba(219, 219, 219, 0.87); height: 1px; width: calc(100% - 98px); position: absolute; right: 0; top: 13px; }
        .subSubNav .subSubNavList { margin-bottom: 30px; }
        .homepage header .navbar-nav .nav-item .nav-link { left: 15px; }
        .subLinkArea {position: relative; }
        .subLinkArea::before { content: ''; display: inline-block; width: 7px !important; height: 11px; background: url(../images/nav-arrow.svg) no-repeat center center; background-size: cover; margin-left: 5px; vertical-align: middle; position: absolute; right: 0; top: 15px; }
        footer .companyDis { margin-top: 6px; }

}
@media (max-width:768px) {
        footer .footer-bottom a,
        footer .footer-bottom small { margin: 0 10px; }
}
@media (max-width:767px) {
        footer .footer-bottom .containerbox { flex-wrap: wrap; }
        footer .centerFooter .col-6 { width: 50%; }
        footer .centerFooter .footer-link{ padding: 0 20px;}
        footer .centerFooter .footLogo { width: 157px; }
        footer .footer-bottom { padding: 20px; }
        .hameNav .navbar-navMOB + .form-inline { left: 0; }
        .navbar-navMOB + .form-inline { left: -3%; }
}
@media (max-width:540px) {
        footer .footer-bottom .containerbox small { margin-top: 15px; }
        footer { padding-bottom: 120px; }
}