@charset "utf-8";
/* CSS Document */
/*language*/
.langBtn {display: inline-flex;align-items: center;gap: 4px;padding: 4px 8px;margin: 0 4px;border-radius: 4px;cursor: pointer;transition: all 0.2s ease;border: 1px solid transparent;font-size: 14px;}
.langBtn.active {background-color: #0d6efd;color: white;border-color: #0d6efd;}
/*language*/

#back-to-top {display: none;position: fixed;bottom: 40px;right: 18px;background-color: #333;color: #fff;padding: 10px;cursor: pointer;z-index: 99999999;height: 42px;width: 42px;}
#back-to-top img {max-width:100%;}
#back-to-top:hover {background-color: #0d67c8;}
.custom-nav {position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background-color: rgba(255, 255, 255, 0.7);background-image: none;transition: all 0.3s ease;padding: 1rem 0;}
.custom-nav.scrolled {background-color: rgba(255, 255, 255, 1);box-shadow: 0 2px 8px rgba(0,0,0,0.1);padding: 0.8rem 0;}
@media (min-width: 992px) {
.custom-nav.scrolled {background-color: rgba(255, 255, 255, 1);}
}
@media (max-width: 991.98px) {
.custom-nav {padding: 0.5rem 0;background-color: rgba(255,255,255,0.7);}
.custom-nav.scrolled {background-color: #fff;padding: 0.4rem 0;}
.navbar-nav .nav-link {font-size: 0.9rem;padding: 0.5rem 0.8rem;}
}
.navbar-toggler {border: 1px solid rgba(0,0,0,0.1);padding: 0.25rem 0.5rem;}
.navbar-toggler:focus {box-shadow: 0 0 0 0.1rem rgba(13,110,253,0.25);}
.navbar-nav .nav-item {position: relative;margin: 0 0.2rem;transition: all 0.2s ease;padding: 0;box-sizing: border-box;}
.navbar-nav .nav-link {color: #333 !important;padding: 0.5rem 1rem;border-radius: 4px;position: relative;z-index: 1;transition: color 0.4s ease;display: block;width: 100%;height: 100%;box-sizing: border-box;white-space: nowrap;}
.highlight-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #0d6efd;border-radius: 4px;z-index: 0;opacity: 0;transform: scale(0.95);transition: opacity 0.4s ease, transform 0.4s ease;pointer-events: none;box-sizing: border-box;margin: 0;}
.navbar-nav .nav-item.active .highlight-bg {opacity: 1;transform: scale(1);}
.navbar-nav .nav-item.active .nav-link {color: #fff !important;}
.navbar-nav .nav-link:hover {color: #0d6efd !important;background: rgba(13,110,253,0.05);}
body {margin: 0;scroll-behavior: smooth;line-height: 1.8;padding-top: 0;}
/*company*/  
#company-profile {background-image: url('../images/company.jpg');background-repeat: no-repeat;background-position: center top;background-size: cover;width: 100%;position: relative;overflow: hidden;box-sizing: border-box;transition: all 0.3s ease-in-out;margin-top: 0;padding-top: 0;position: relative;}
.content-section:not(#company-profile)::before {content: "";display: block;height: 88px;margin-top: -88px;visibility: hidden;pointer-events: none;}
.navbar-toggler {border-color: rgba(0,0,0,.1) !important;}
.navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
@media (max-width: 991.98px) {
.navbar-toggler {position: fixed !important;top: 18px !important;right: 15px !important;transform: none !important;margin: 0 !important;z-index: 99999 !important;}
.navbar-collapse {margin-top: 10px;text-align: right;padding-right: 15px;}
.navbar-nav {margin-left: auto !important;margin-right: 0 !important;}
.navbar-nav .nav-item {width: fit-content;margin-left: auto;}
#company-profile {margin-top: 0;padding-top: 0;}
.content-section:not(#company-profile)::before {height: 70px;margin-top: -70px;}
}
@media (min-width: 992px) {
.nav-menu {display: flex;align-items: center;justify-content: space-between;}
}
.content-section {margin: 0;padding: 0;opacity: 1;transform: translateY(0);}
.animate-item {opacity: 0;transform: translateY(30px);transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
.animate-item.fade-in {opacity: 1;transform: translateY(0);}
.certItemNoCursor {width: 100%;height: 100%;object-fit: cover;transition: all 0.2s ease;}
.certItemNoCursor:hover {transform: scale(1.02);opacity: 0.95;}
/*banner*/    
.banner {background-image: url('../images/banner.jpg');background-repeat: no-repeat;background-position: center center;background-size: cover;max-width: 1920px;height: 580px;margin: 0 auto;color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 1.5rem;text-align: center;padding: 2rem;overflow: hidden;}
@media (min-width: 1200px) {
.banner {height: 580px;font-size: 2rem;}
}
@media (max-width: 1199.98px) and (min-width: 768px) {
.banner {height: 450px;font-size: 1.5rem;}
}
@media (max-width: 767.98px) {
.banner {height: 300px;font-size: 1.2rem;padding: 1rem;}
}
.banner span {display: block;margin: 0.8rem 0;text-shadow: 0 2px 8px rgba(0,0,0,0.5);font-weight: 600;animation: textLeftRightFloat 5s ease-in-out infinite alternate;}
.banner span:nth-child(1) {animation-delay: 0.2s;}
.banner span:nth-child(2) {animation-delay: 0.6s;}
.banner span:nth-child(3) {animation-delay: 1s;}
@keyframes textLeftRightFloat {
0% {transform: translateX(-25px);opacity: 0.9;}
50% {transform: translateX(0);opacity: 1;}
100% {transform: translateX(25px);opacity: 0.9;}
}
/*banner*/      
/*contact-us*/ 
#contact-us .container {max-width: 1200px;}
.BMapGL_infoWindow .BMapGL_title {background-color: var(--bs-primary-bg-subtle) !important;border-bottom: 1px solid var(--bs-border-color) !important;}
.BMapGL_infoWindow .BMapGL_content {padding: 8px !important;font-size: 14px !important;line-height: 1.6 !important;}
/*contact-us*/ 
/*product*/ 
.content-section {padding-top: 2rem;padding-bottom: 2rem;}
.products {min-height: 600px;display: flex;align-items: center;transition: all 0.3s ease;}
/* dots style */
.products-nav-dots {position: fixed;right: 20px;top: 50%;transform: translateY(-50%);z-index: 1000;display: none;flex-direction: column;gap: 15px;padding: 15px;background-color: rgba(255, 255, 255, 0.9);border-radius: 50px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);backdrop-filter: blur(10px);}
.product-dot {width: 14px;height: 14px;border-radius: 50%;background-color: #dee2e6;cursor: pointer;transition: all 0.3s ease;position: relative;border: 2px solid transparent;}
.product-dot.active {background-color: #2E8B57;transform: scale(1.3);border-color: #fff;box-shadow: 0 0 10px rgba(46, 139, 87, 0.5);}
.product-dot-tooltip {position: absolute;right: 25px;top: 50%;transform: translateY(-50%);background-color: #212529;color: white;padding: 6px 12px;border-radius: 6px;font-size: 0.75rem;white-space: nowrap;opacity: 0;visibility: hidden;transition: all 0.3s ease;z-index: 1001;}
.product-dot:hover .product-dot-tooltip {opacity: 1;visibility: visible;right: 30px;}
.product-content {max-width: 800px;}
@media (max-width: 768px) {
.products {min-height: 400px;padding: 2rem 0;}
.products-nav-dots {right: 10px;padding: 10px;}
.product-dot {width: 12px;height: 12px;}
}
@media (max-width: 767.98px) {
.product-content p {text-align: center;}
}
.tag-item {background-color: rgba(255, 255, 255, 0.8);color: #333;}
.product-img-box-5 {height: 100%;min-height: inherit;}
@media (max-width: 576px) {
.product-img-box, .product-img-box-5 {height: 180px;}
}

@media (min-width: 576px) {
.product-img-box-5 {height: calc(100% - 0.5rem);}
}
/*product*/ 
/*Our Certificate*/   
.cert-wrap {width: 200px;height: 275px;overflow: hidden;flex-shrink: 0;}
.cert-item {width: 100%;height: 100%;object-fit: cover;transition: all 0.2s ease;cursor: zoom-in;}
.cert-item:hover {transform: scale(1.02);opacity: 0.95;}
.certItemNoCursor {width: 100%;height: 100%;object-fit: cover;transition: all 0.2s ease;}
.certItemNoCursor:hover {transform: scale(1.02);opacity: 0.95;}
#lightboxMainImg {cursor: zoom-in;transition: transform 0.1s ease-out;max-width: 95vw;max-height: 80vh;position: relative;touch-action: none;width: auto;height: auto;object-fit: contain;}
#lightboxMainImg.img-zoomed {cursor: zoom-out;}
#lightboxMainImg:active, #lightboxMainImg.img-zoomed:active {cursor: grabbing;}
.lightbox-img-container {width: 95vw;height: 80vh;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;margin: 0 auto;}
#imgLightbox .modal-content {background-color: rgba(0, 0, 0, 0.95);border: none;padding: 0;}
.thumb-item {width: 60px;height: 81px;object-fit: cover;flex-shrink: 0;}
.thumb-item.inactive {filter: brightness(0.6);opacity: 0.5;transition: all 0.2s ease;}
.thumb-item.active {filter: brightness(1);opacity: 1;border: 2px solid #fff!important;}
.modal-title {font-size: 0.9rem;padding: 0.5rem 1rem !important;margin: 0.5rem 0 !important;width: auto !important;display: inline-block;}
.text-muted.small {font-size: 0.7rem;margin-bottom: 0.5rem !important;color: #ffffff !important;}
#thumbContainer {overflow-x: auto;overflow-y: hidden !important;height: auto !important;line-height: 0;min-width: 100%;scroll-behavior: smooth;}
@media (max-width: 767.98px) {
#thumbContainer {display: flex;gap: 0.3rem;padding: 0.3rem 0;scrollbar-width: none;-ms-overflow-style: none;}
#thumbContainer::-webkit-scrollbar {display: none;}
.thumb-item {width: 40px;height: 54px;margin: 0 !important;}
.lightbox-img-container {width: 98vw;max-height: 70vh;}
.modal-title {font-size: 0.8rem;background: transparent !important;padding: 0 !important;margin: 0.3rem 0 !important;}
.content-section h2 {font-size: 1.5rem !important;margin-bottom: 1rem !important;}
.cert-wrap {width: 120px !important;height: 165px !important;}
.overflowHidden {height: 165px !important;}
.cert-wrap.m-2 {margin: 0.5rem !important;}
.btn-arrow {width: 36px !important;height: 36px !important;}
.btn-arrow svg {width: 14px !important;height: 14px !important;}
}
.btn-arrow {width: 46px !important;height: 46px !important;display: flex !important;align-items: center !important;justify-content: center !important;border-radius: 50% !important;background-color: #96c030 !important;border: 0 none !important;color: #ffffff !important;transition: all 0.2s ease !important;box-shadow: none !important;outline: none !important;}
.btn-arrow:hover:not(:disabled) {background-color: #85aa2b !important;transform: scale(1.05);}
.btn-arrow.disabled, .btn-arrow:disabled {background-color: #cccccc !important;color: #ffffff !important;cursor: not-allowed !important;opacity: 1 !important;transform: none !important;}
#imgRow1, #imgRow2 {width: max-content !important;flex-shrink: 0 !important;display: flex !important;align-items: center !important;}
#certificates .animate-item {opacity: 1!important;transform: none!important;}
.cert-wrap {margin: 0 8px!important;}
@media (max-width:767.98px) {
#imgRow1, #imgRow2 {height: 165px!important;}
}
#imgRow1, #imgRow2, #thumbContainer {-ms-overflow-style: none;scrollbar-width: none;}
#imgRow1::-webkit-scrollbar, #imgRow2::-webkit-scrollbar, #thumbContainer::-webkit-scrollbar {display: none;}
/*Our Certificate*/