/* default orange color : #f7992b */

body { font-family: arial; }
header { position: fixed; left: 0px; top: 0px; width: 100%; background: #3b3d42; height: 65px; z-index: 4; }
.container-fluid { padding: 0px !important; }
.header_box { display: flex; justify-content: space-between; align-items: center; height: 65px; }
.header_logo { height: 65px; cursor: pointer; }
.header_logo img { height: 100%; }
.header_title { font-size: 20px; color: #fff; }
.header_title h3 { margin: 0px; }
.header_nav ul { list-style: none; padding: 0px; margin: 0px; }
.header_nav ul li { display: inline-block; }
.header_nav ul li a { text-decoration: none; color: #fff; margin-left: 10px; padding: 3px 3px 2px 3px; font-weight: bold; transition: color 300ms linear; }
.header_nav ul li a.active, .header_nav ul li a:hover { color: #f7992b! important; }

.homepage_banner { background: url("../images/share/share18.jpg"); background-position: center center; background-size: cover; }
.banner_box { position: relative; height: calc(100vh - 65px); width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.banner_grey_out { position: absolute; width: 100%; height: calc(100vh - 65px); background: #000; opacity: 0.5; overflow: hidden; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; }
.banner_box h2 { font-size: 80px; font-weight: bold; text-transform: uppercase; color: #fff; text-align: center; }
.banner_box h3 { font-size: 40px; color: #fff; }
.theme_btn { font-size: 14px; font-weight: bold; text-transform: uppercase; line-height: 1.714em; letter-spacing: 8.4px; color: #ffffff; background-color: #f7992b; border-radius: 0px 0px 0px 0px; padding: 18px 38px 18px 47px; border: 1px solid transparent; margin-top: 30px; }
.theme_btn:hover { color: #f7992b; background: transparent; transition: all 200ms linear; border: 1px solid #f7992b; }
.theme_btn.transparent { background: transparent; color: #f7992b; border: 1px solid #f7992b; }
.theme_btn.transparent:hover { background: #f7992b; color: #fff; }

.homepage_container { padding: 37px 0px 49px 0px; display: flex; border-top: 1px solid #ccc; margin-top: 30px; }
.homepage_about_us { padding: 0px 15px 0px 45px; }
label.homepage { font-size: 14px; text-transform: uppercase; line-height: 1.285em; letter-spacing: 1.4px; color: #000; margin-left: 0px; opacity: 1; white-space: nowrap; width: 100%; transition: all 1.25s ease-out 200ms; }
label.homepage.white { color: #fff; }
label.homepage.on_hold { margin-left: 100%; opacity: 0; }
h2.homepage { font-size: 48px; font-weight: 700; text-transform: uppercase; line-height: 1.125em; padding: 20px 0; width: 100%; transition: all 1.25s ease-out 500ms; }
h2.homepage.on_hold { margin-left: -100%; opacity: 0; }
.divider { height: 4px; width: 70px; background: #f7992b; transition: all 1.25s ease-out 500ms; }
.divider.white { background: #fff; }
.divider.on_hold { margin-left: 100%; opacity: 0; }
.left_panel { width: 35%; max-width: 500px; }
.right_panel { flex: 1; padding: 47px 15px 0px 27px; }

.homepage_services { padding: 30px 0; z-index: 3; position: relative; }
.homepage_services_box { display: block; text-align: center; position: relative; }
.homepage_services_box .services_card { width: 33.33%; display: inline-block; margin-right: 30px; height: 30vw; min-height: 300px; vertical-align: top; position: relative; margin-bottom: 20px; }
.homepage_services_box .services_card:nth-child(even) { margin-right: 0px; }
.homepage_services_box .services_card div { background-position: center center !important; background-size: cover !important; position: absolute; transition: all 800ms ease-out; height: 100%; width: 100%; left: 0px; top: 0px; opacity: 1; box-shadow: 0px 1px 5px 2px #666; transition: all 0.8s ease; }
.homepage_services_box .services_card p { position: absolute; bottom: 20%; width: 100%; text-align: center; color: #fff; font-size: 20px; padding: 20px 0; font-weight: bold; transition: all 500ms linear; text-decoration: none; left: 0px; background: rgba(0,0,0,0.5); margin: 0px; }

.homepage_services_box .services_card:hover div { box-shadow: 0px 3px 10px 3px #666; }
.homepage_services_box .services_card:hover p { color: #f7992b; }

.homepage_services_box .services_card div.left { left: -300px; opacity: 0; }
.homepage_services_box .services_card div.top { top: -300px; opacity: 0; }
.homepage_services_box .services_card div.right { left: 300px; opacity: 0; }

.homepage_testimonial { width: 100%; display: inline-block; position: relative; }
.testimonial_container { float: right; background: url("../images/home-testimonials-bg.jpg"); background-position: center center; background-size: cover; margin: -300px 0px 187px 0px; width: 50%; }
.testimonial_box { padding: 400px 15px 148px 60px; background: #f7992b; opacity: 0.9; width: 100%; height: 100%; }
.testimonial_box .testimonial_icon { font-size: 105px; color: rgba(255,255,255,0.35); position: absolute; margin-top: -50px; margin-left: -30px; }
.testimonial_label { color: #fff; font-size: 14px; font-weight: bold; }
.testimonial_box h3 { padding: 20px 0; font-size: 36px; font-weight: bold; color: #fff; }
.testimonial_content { padding: 30px 30px 30px 0; position: relative; width: 100%; height: 250px; }
.slider { position: relative; display: inline-block; width: 100%; height: 100%; overflow: hidden; padding: 0 80px; }
.slider .slider-item { position: absolute; left: 0%; height: 100%; width: calc(100% - 160px); margin-left: 80px; margin-right: 80px; }
.slider .slider-icon { position: absolute;  top: 0px; font-size: 50px; color: #fff; padding: 20px; cursor: pointer; height: 100%; display: flex; align-items: center; }
.slider .slider-icon.disabled { color: #ccc; cursor: not-allowed; }
.slider .slider-icon.next { right: 0px; }
.slider .slider-icon.prev { left: 0px; }
.slider .slider-icon:not(.disabled):hover { color: #333; }
.flex-top-down { display: flex; flex-direction: column; justify-content: space-between; }
.testimonial_msg { color: #fff; text-align: left; font-size: 18px; display: -webkit-box; width: 100%; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.testimonial_author { color: #fff; font-size: 18px; }

.homepage_advantange { padding: 113px 25% 100px 15%; background: #000; color: #fff; margin-top: 200px; width: 70%; }
.homepage_advantange.full { padding: 113px 0 100px 0; width: 100%; margin-top: 0px; }
.homepage_header_content { margin-top: 30px; }
.homepage_header_content p { margin: 0px; }
.partner_img_box img { width: 100%; max-width: 150px; }
.partner_img_box { padding: 10px; }
.text_orange { color: #f7992b; }
.submit_form_btn { font-size: 11px; line-height: 1; letter-spacing: 1px; color: #ffffff; background-color: #f7992b; padding: 12px 20px; text-align: center; white-space: nowrap; border: none; border-radius: 4px; transition: all .3s ease; }
.submit_form_btn:hover { background-color: rgb(255,191,81); }

footer { width: 100%; background: #333; display: block; overflow-x: hidden; }
footer .copyright { color: #ccc; margin: 0px; font-size: 14px; padding: 5px 10vw; }
footer .copyright a { color: #ccc; }

.breadcrumb { margin: 20px 0; text-align: right; display: inline-block; width: 100%; }
.breadcrumb a { text-decoration: none; color: #a1a2a4; font-weight: bold; }
.breadcrumb a:hover, .breadcrumb a.active { color: #f7992b; }
.breadcrumb span { padding: 0 10px; }

.content { min-height: calc(100vh - 65px - 64px - 38px); display: inline-block; width: 100%; }
.right_panel_img { text-align: center; }
.right_panel_img img { max-width: 100%; max-height: 400px; object-fit: contain; }
.mission_container { display: inline-block; width: 100%; }
.left_box { display: inline-block; width: 50%; position: relative; padding: 10% 5% 10% 2%; float: left; }
.left_box .overlay_background { position: absolute; left: 0px; top: 0px; width: 130%; height: 100%; background: #000; z-index: -1; }
.white_text p, .white_text h2, .white_text label { color: #fff !important; }
.white_text h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.left_box .left_box_text { margin-top: 30px; min-height: 300px; }
.left_box .left_box_text p { color: #fff; }
.expand_box .left_box_title { font-size: 20px; color: #fff; font-weight: bold; cursor: pointer; }
.expand_box .left_box_title.active { color: #f7992b; }
.expand_box p { font-size: 14px; }
.expand_box .left_box_title i { margin-right: 10px; }
.expand_box ul { color: #fff; padding-left: 1em; font-size: 14px; }
.expand_box .expand_content { display: none; }
.expand_box .expand_content.active { display: block; }
.right_box { width: 50%; display: inline-block; background: url("../images/about_2.jpg"); background-position: center center; background-size: cover; float: right; margin-top: 200px; position: relative; }
.right_box .overlay_background { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #f7992b; opacity: 0.5; }
.milestone_container { padding: 200px 30px; z-index: 2; position: relative; }
.milestone_statistic { margin: 30px 0; }
.milestone_statistic h2, .milestone_statistic p { color: #fff; text-align: center; }
.milestone_statistic h2 { font-weight: bold; font-size: 50px; }

.service_img { width: 25vw; min-width: 100px; max-width: 300px; padding-right: 30px; }
.service_img img { width: 100%; }
h2.content_title { color: #000; font-weight: bold; font-size: 24px; transition: all .3s ease; cursor: pointer; }
h2.content_title:hover { color: #f7992b; }

.blog_container { padding: 73px 0px 49px 0px; }
.blog_container a { text-decoration: none; color: #000; }
.blog { border: 1px solid #ccc; margin: 0 10px 10px 0; border-radius: 3px; transition: all 0.3s ease; }
.blog:hover { box-shadow: 0px 1px 5px 3px #ccc; }
.blog:hover .blog_content h2 { color: #f7992b; }
.blog .thumbnail { width: 100%; height: 200px; overflow: hidden; }
.blog .thumbnail img { width: 100%; max-height: 100%; object-fit: cover; object-position: center; }
.blog_content { padding: 10px; }
.blog_content h2 { font-size: 24px; color: #000; font-weight: bold; cursor: pointer; transition: all .3s ease; }
.blog_content .blog_info { margin-top: 20px; }
.blog_content .blog_info label { font-size: 14px; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.blog_content .blog_info label span { font-size: 14px; font-weight: bold; color: #f7992b; }

.submenu { position: relative; }
.submenu:hover .submenu-list { display: block; font-size: 12px; }
.submenu:hover a { color: #f7992b! important; }
.submenu:active .submenu-list { display: block; font-size: 12px; }
.submenu-list { position: absolute; display: none; top: 0px; left: -5px; padding: 44px 15px 30px 15px; width: calc(100% + 30px); }
.submenu-list ul { display: flex; flex-direction: column; }
.submenu-list ul li { border: 1px solid #ccc; cursor: pointer; background: #fff;  }
.submenu-list ul li:hover { background: #eee; }
.submenu-list ul li a { padding: 0px; display: inline-block; margin: 0px; width: 100%; }
.submenu-list ul li a div { padding: 10px; color: #000; }
.submenu-list ul li a div:hover { color: #000 !important; }

.filter { width: 100%; padding: 10px 0; }
.filter .filter_option { margin-top: 10px; }
.filter .filter_option div { margin-right: 10px; cursor: pointer; background: #ccc; color: #000; padding: 10px; border-radius: 10px; display: inline-block; }
.filter .filter_option div:hover { background: #f7992b; color: #fff; }
.filter .filter_option div.active { background: #f7992b; color: #fff; }

.project { background: #fff; box-shadow: 1px 0 5px 2px #ccc; cursor: pointer; transition: all 0.3s ease; margin-bottom: 10px; overflow: hidden; }
.project:hover { box-shadow: 3px 0 10px 3px #ccc; }
.project:hover label { background: #eee; }
.project:hover img { transform: scale(1.1); } 
.project img { width: 100%; height: 30vw; object-fit: cover; object-position: center; max-height: 300px; transition: all 0.3s linear; }
.project label { font-size: 16px; font-weight: bold; height: 100px; align-items: center; justify-content: center; display: flex; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; cursor: pointer; color: #000; padding: 0 10px; }
.project:hover label { color: #f7992b; }

.lcl_fade_oc.lcl_pre_show #lcl_overlay,
.lcl_fade_oc.lcl_pre_show #lcl_window,
.lcl_fade_oc.lcl_is_closing #lcl_overlay,
.lcl_fade_oc.lcl_is_closing #lcl_window { opacity: 0 !important; }
.lcl_fade_oc.lcl_is_closing #lcl_overlay { -webkit-transition-delay: .15s !important;  transition-delay: .15s !important; }

.elem, .elem * { box-sizing: border-box; }
.elem { display: inline-block; border: 5px solid #ccc; margin: 10px; border-radius: 10px; box-shadow: 0px 7px 10px 1px #999; font-size: 0; width: calc(33% - 20px); background: #fff; height: 30vw; background-clip: padding-box; overflow: hidden; transition: all 0.3s ease; }
.elem:nth-child(odd) { clear: both; }
.elem > span { display: block; cursor: pointer; height: 0; height: 100%; background-size: cover;  background-position: center center; transition: all 0.3s linear; }
.elem > span:hover { transform: scale(1.1); }
.elem:hover { box-shadow: 0px 1px 3px 0px #666; margin: 13px 10px 7px 10px; }

.service_box { display: flex; border-left: 3px solid #f7992b; width: 100%; margin-bottom: 20px; overflow: hidden; }
.service_box a { text-decoration: none; width: 100%; height: 100%; padding: 10px 30px; }
.service_box img { width: 100%; max-height: 400px; object-fit: cover; text-align: center; transition: all 0.3s linear; }
.service_title { display: flex; align-items: center; }
.service_box p { padding: 20px 0; flex: 1; text-decoration: none; color: #333; transition: all 0.3s ease; font-size: 24px; margin: 0px; }
.service_box i { font-size: 24px; color: #f7992b; margin-right: 30px; transition: all 0.3s ease; }
.service_box:hover a { background: #eee; }
.service_box:hover p { color: #f7992b; }
.service_box:hover i { margin-right: 0px; }
.service_box:hover img { transform: scale(1.1); }

.services_banner { width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.services_banner h2 { padding: 150px 0 150px 200px; color: #fff; background: rgba(0,0,0,0.5); font-size: 40px; }
.content_box { margin: 20px 20px 50px 20px; padding: 20px; background: #eee; border-left: 5px solid #f7992b; box-shadow: 0px 1px 5px 1px #ccc; }

.review_star { font-size: 14px; }
.review_star .star { display: inline-block; }
.review_star .star.active { color: rgb(250, 187, 5); }
.review_star .star.active.green { color: #28a745; }

.footer { padding: 0 10vw; color: #fff; }
.footer .footer_logo { width: 100%; max-height: 150px; object-fit: contain; padding-right: 20px; }
.footer .title { height: 150px; display: flex; align-items: center; }
.footer .title h3 { font-weight: bold; }
.footer .footer_content { display: inline-block; }
.footer .footer_content p { font-size: 14px; }
.footer .footer_content a { font-size: 14px; color: #fff; text-decoration: none; transition: all 0.3s ease; display: block; }
.footer .footer_content a:hover { color: #f7992b; }

.whatsapp { position: fixed; right: 5px; top: 65px; width: 50px; height: 50px; }
.whatsapp img { width: 100%; }
.whatsapp_close { position: absolute; top: 0px; right: 0px; border-radius: 50%; background: red; color: #fff; width: 18px; height: 18px; font-size: 12px; text-align: center; line-height: 20px; cursor: pointer; }
.whatsapp_close:hover { background: #9d2f2f; }

#header { display: block; }
#header_m { display: none; }

.services_v2_box { display: inline-block; width: 55%; height: 70vh; cursor: pointer; }
.services_v2_box.left { position: absolute; left: 0px; top: 0px; -webkit-clip-path:polygon(0% 0%, 100% 0%,80% 100%,0% 100%); clip-path:polygon(0% 0%, 100% 0%,80% 100%,0% 100%); }
.services_v2_box.right { position: absolute; right: 0px; top: 0px; -webkit-clip-path:polygon(0% 100%, 100% 100%, 100% 0%, 20% 0%); clip-path:polygon(0% 100%, 100% 100%, 100% 0%, 20% 0%); }
.services_v2_box .services_v2_img { width: 100%; height: 100%; background-position: center; background-size: cover; transition: all 400ms linear; }
.services_v2_box:hover .services_v2_img { transform: scale(1.2); }
.services_v2_box:hover .services_v2_title { color: #f7992b; }
.services_v2_box .services_v2_title { position: absolute; bottom: 30%; font-size: 35px; color: #fff; width: 100%; padding: 5px 20px; text-align: center; background: rgba(0,0,0,0.5); }
.services_v2_box.left .services_v2_title { padding-right: 150px; }
.services_v2_box.right .services_v2_title { padding-left: 150px; }


@media only screen and (max-width: 991px) {
  .banner_box h2 { font-size: 50px; }
  .homepage_container { flex-direction: column; }
  .left_panel { width: 100%; max-width: none; }
  .homepage_about_us { padding: 0px 15px 0px 0px; }
  .right_panel { padding: 47px 15px 0px 0px; }
  .homepage_services_box .services_card { width: 40%; margin-right: 0px;}
  .homepage_services_box { display: flex; justify-content: space-around; }
  .testimonial_container { width: 100%; margin: 0px; }
  .testimonial_box { padding: 60px 15px 20px 60px; }
  .homepage_advantange { padding: 30px 20px 30px 20px; width: 100%; display: inline-block; margin-top: 0px; }
  .elem { float: left; width: calc(50% - 20px); }
  footer .copyright { margin-bottom: 60px; }
  .left_box { width: 100%; padding: 30px 15px; }
  .left_box .overlay_background { width: 100%; }
  .right_box { width: 100%; margin-top: 0px; }
  .milestone_container { padding: 30px 15px; }
  .service_box img { max-height: 250px; }
}

@media only screen and (max-width: 767px) {
  .footer .footer_logo { width: auto; height: 150px; padding: 0px; }
  .footer .title { height: auto; display: block; margin-bottom: 30px; }
  .footer .footer_content { margin-bottom: 30px; }
  .services_banner h2 { padding : 150px 0; text-align: center; }

  #header { display: none; }
  #header_m { display: block; }

  .header_m { line-height: 65px; }
  .header_m_icon { font-size: 30px; color: #fff; text-align: right; padding: 0 15px; line-height: 65px; display: inline-block; float: right; cursor: pointer; }
  .header_m_logo { height: 65px; width: auto; display: inline-block; padding: 0 15px; }
  .header_m_logo img { height: 100%; padding: 3px 0; object-fit: contain; }

  .header_m_menu { background: #3b3d42; display: none; }
  .header_m_menu .m_menu { font-size: 24px; cursor: pointer; }
  .header_m_menu .m_menu a { display: block; text-decoration: none; color: #fff; width: 100%; text-align: center; }
  .m_menu_title { width: 100%; text-align: center; position: relative; color: #fff; }
  .m_menu_title label { cursor: pointer; }
  .header_m_menu .m_menu a:hover, .header_m_menu .m_menu .m_menu_title:hover{ color: #ccc; }
  .m_menu_expand { display: grid; position: absolute; right: 40px; top: 0px; height: 100%; font-size: 30px; }
  .m_sublist .m_submenu { display: none; background: #ccc; }
  .m_submenu a { color: #333 !important; font-size: 16px; border-bottom: 1px solid #999; padding: 5px; }

  .services_v2_box { position: relative !important; clip-path: none !important; -webkit-clip-path: none !important; width: 100% !important; }
  .services_v2_box:hover .services_v2_img { transform: scale(1); }
  .services_v2_box .services_v2_title { padding: 5px 20px !important; }

}