@charset "utf-8";
/* CSS Document */
.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: #fff url('../images/Pic_01.jpg') center / cover no-repeat;}}
@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;}
/*about*/    
.content-section:not(#about)::before {content: "";display: block;height: 88px;margin-top: -88px;visibility: hidden;pointer-events: none;}
#about {margin-top: 0;padding-top: 0;position: relative;}
.img-lazy-placeholder {background: #f5f5f5;min-height: 200px;opacity: 0.7;}
.img-lazy-auto {background: #f5f5f5;min-height: 200px;opacity: 0.7;}
#about {background-image: url('../images/Pic_02.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;}
.about-bg-layer {max-width: 100%;width: 100%;height: auto;display: block;}
.about-bg-layer > span {background-image: url(../images/Pic_03.jpg);display: block;position: relative;background-repeat: no-repeat;background-position: center center;background-size: cover;width: 100%;min-height: 46.875vw;max-height: 750px;transition: all 0.3s ease-in-out;}
@media screen and (min-width: 1300px) {.about-bg-layer > span {min-height: 750px;}}
@media screen and (min-width: 1024px) and (max-width: 1299px) {.about-bg-layer > span {min-height: 45vw;background-size: auto 45vw;}}
@media screen and (min-width: 768px) and (max-width: 1023px) {.about-bg-layer > span {min-height: 48vw;background-size: auto 48vw;   }}
@media screen and (max-width: 767px) {
.about-bg-layer > span {min-height: 42vw;max-height: 320px;background-size: auto 42vw; margin-top:50px;}
.about-bg-layer  {padding-top:20px;}
}
.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; }
#about {margin-top: 0;padding-top: 0;}
.content-section:not(#about)::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);}
/*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;}
#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;}
.overflow-hidden {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;}}
.content-section h2 {text-align: center;font-weight: 700;color: #212529;letter-spacing: 0.5px;margin: 0 auto 2.5rem auto;padding-bottom: 0.75rem;position: relative;width: fit-content;font-size: 1.8rem;}
.content-section h2::after {content: '';position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 80px;height: 3px;background: linear-gradient(90deg, #6c757d, #343a40);border-radius: 2px;}
.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*/ 
/*Development Journey*/
.timeline-wrap { flex: 1; overflow-x: auto; overflow-y: hidden; }
.timeline-wrap::-webkit-scrollbar { display: none; }
.timeline-wrap { -ms-overflow-style: none; scrollbar-width: none; }
.timeline { position: relative; display: flex; flex-wrap: nowrap; gap: 1rem; min-width: max-content; padding: 0; margin: 0; touch-action: pan-x; }
.timeline::after { content: ''; position: absolute; height: 4px; background-color: #96c030; width: 100%; left: 0; top: 50px; z-index: 1; }
.timeline-item { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; align-items:center; margin: 0; }
.timeline-triangle { width: 0; height: 0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:16px solid #96c030; margin:-4px 0 8px 0 !important; }
.btn-timeline-arrow { width:46px !important; height:46px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:#96c030 !important; border:0 none !important; color:#fff !important; transition:all .2s ease !important; box-shadow:none !important; outline:none !important; }
.btn-timeline-arrow:hover:not(:disabled) { background:#85aa2b !important; transform:scale(1.05); }
.btn-timeline-arrow:disabled { background:#cccccc !important; color:#ffffff !important; cursor:not-allowed !important; opacity:1 !important; transform:none !important; pointer-events:none !important; }
.timeline-item .card { border:1px solid #96c030 !important; border-radius:6px !important; box-shadow:0 2px 8px rgba(150,192,48,0.1) !important; }
.timeline-item .card-title { color:#96c030 !important; }
.timeline-wrap *, .timeline *, .timeline-item * {opacity: 1 !important;visibility: visible !important;transform: none !important;pointer-events: auto !important;}
/*Development Journey*/   
/*BISINESS SCOPE*/    
#services {background-image: url("../images/Services_bg.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;}
 /*BISINESS SCOPE*/   
/*Product Display*/    
.img-item {display: flex;align-items: center;flex-direction: column;}
.img-item ul {width: 100%;margin: 0;padding: 0;}
.img-item li {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;text-align: center;list-style: none;margin: 0;padding: 0;}
img {transition: all 0.3s ease;}
#products{background-image: url("../images/ProductDisplay_bg.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; }
.col-6 { padding: 0 8px; }
/*Product Display*/   
/*Brand Battery*/    
#brandbattery {background-image: url("../images/Services_bg.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; }
 /*Brand Battery*/
/*Contact Us*/    
#contact {background-image: url("../images/Contact_bg.jpg");background-repeat: no-repeat;background-position: center bottom;background-size: cover; width: 100%;position: relative;overflow: hidden;box-sizing: border-box;transition: all 0.3s ease-in-out; } 
/*Contact Us*/