/* About Section (Fixed Layout) */
#about-section {padding: 250px 0;background-image: linear-gradient(to right, #ffffff, #f3fbff);position: relative;z-index: 3;}
#about-section .container {display: flex;align-items: center;justify-content: flex-end;gap: 80px;}
#about-section .image-col {width: 50%;display: flex;justify-content: center;position: relative;position: absolute;left: 0;}
#about-section .image-col::before { content: ''; position: absolute; width: 90%; height: 90%; background: radial-gradient(circle, rgba(0,168,255,0.08) 0%, transparent 70%); top: 5%; left: 5%; z-index: 0; }
#about-section .image-col img {max-width: 100%;position: relative;z-index: 1;filter: drop-shadow(0 30px 40px rgba(0,86,179,0.1));}
#about-section .text-col { width: 50%; padding-right: 20px; }
#about-section .desc-text { color: #666; font-size: 14px; line-height: 2; margin-bottom: 35px; text-align: justify; }

/* Products Section (Tech Grid & Slick Carousel) */
#products-section {padding: 90px 0 110px;background: linear-gradient(135deg, rgba(162, 203, 227, 0.4) 0%, rgba(94, 153, 196, 0.65) 100%), url('/images/14/indexproduct_bg.jpg') center/cover fixed;position: relative;z-index: 2;overflow: hidden;margin-top: -50px;padding-top: 150px;}
#products-section .watermark {position: absolute;top: 4vw;left: 5%;font-size: 8vw;font-weight: 900;color: rgba(255,255,255,0.25);font-style: italic;z-index: 0;pointer-events: none;letter-spacing: 8px;}
#products-section .container-fluid { max-width: 1450px; margin: 0 auto; position: relative; z-index: 1; padding: 0 40px; }
#products-section .p-header { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 35px; padding-left: 15px; }
#products-section .section-subtitle { color: #0056b3; font-weight: 400; }
#products-section .section-title { color: #003d82; margin-bottom: 0; }
#products-section .product-carousel { margin: 0 -15px; }
#products-section .slick-slide {padding: 20px 15px;outline: none;position: relative;}
#products-section .product-card { background: #fff; height: 300px; padding: 35px 25px; display: flex; flex-direction: column; position: relative; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
#products-section .product-card::before { content: ''; position: absolute; top: 0; left: 0; width: 35px; height: 35px; background: #0056b3; clip-path: polygon(0 0, 100% 0, 0 100%); opacity: 0; transition: opacity 0.3s; }
#products-section .product-card::after {content: '';position: absolute;bottom: 0;right: 0;width: 58px;height: 58px;background: #0056b3;clip-path: polygon(100% 0, 100% 100%, 0 100%);opacity: 0;transition: opacity 0.3s;z-index: 1;}
#products-section .product-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,86,179,0.2); }
#products-section .product-card:hover::before, #products-section .product-card:hover::after { opacity: 1; }
#products-section .p-logo {height: 150px;display: flex;align-items: center;justify-content: center;margin-bottom: 20px;}
#products-section .p-logo .po-img{display:flex;justify-content: center;}
#products-section .p-logo img {max-width: 90%;max-height: 100%;object-fit: contain;}
#products-section .p-desc {font-size: 18px;color: #666;line-height: 1.6;}
#products-section .p-arrow { position: absolute; bottom: 12px; right: 18px; font-size: 15px; color: #0056b3; font-weight: bold; z-index: 2; transition: all 0.3s; }
#products-section .product-card:hover .p-arrow { color: #fff; right: 10px; bottom: 8px; }
#products-section .custom-arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 66px;height: 66px;padding-bottom: 7px;border-radius: 50%;background: linear-gradient(135deg, #00a8ff 0%, #0056b3 100%);color: #fff;display: flex;justify-content: center;align-items: center;font-size: 39px;line-height: 1;cursor: pointer;z-index: 10;border: none;box-shadow: 0 4px 15px rgba(0,0,0,0.3);transition: transform 0.3s, background 0.3s;}
#products-section .custom-arrow:hover { transform: translateY(-50%) scale(1.1); background: linear-gradient(135deg, #0056b3 0%, #00a8ff 100%); }
#products-section .prev-arrow {left: -70px;}
#products-section .next-arrow {right: -70px;}
#products-section .btn-wrap { text-align: center; margin-top: 40px; }

/* Training Section (Slick Layout) */
#training-section {padding: 100px 0;background: linear-gradient(135deg, rgba(0,168,255,0.8) 0%, rgba(0,86,179,0.9) 100%), url('/images/14/training-section-bg.jpg') center/cover no-repeat;position: relative;overflow: hidden;}
#training-section::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
#training-section .container-fluid { width: 100%; margin: 0 auto; position: relative; z-index: 2; }
#training-section .training-carousel { padding: 40px 0; }
#training-section .slick-slide { padding: 0 15px; opacity: 0.5; transition: all 0.5s ease; transform: scale(0.85); outline: none; }
#training-section .slick-center { opacity: 1; transform: scale(1); }
#training-section .main-card {background: #fff;border-radius: 2px;display: flex;height: 360px;box-shadow: 0 20px 40px rgba(0,0,0,0.2);overflow: hidden;align-items: center;}
#training-section .logo-area { width: 40%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #f0f4f8; padding: 20px; }
#training-section .logo-svg { width: 90px; height: 90px; margin-bottom: 15px; }
#training-section .logo-text { font-size: 32px; font-weight: 900; color: #1a1a1a; letter-spacing: 0.5px; line-height: 1.1; }
#training-section .logo-subtext { font-size: 18px; color: #333; font-weight: 700; margin-top: 5px; }
#training-section .info-area { width: 60%; padding: 40px 50px; display: flex; flex-direction: column; justify-content: space-between; }
#training-section .t-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #dce4ec; padding-bottom: 15px; margin-bottom: 25px; }
#training-section .t-header-left {display: flex;align-items: center;gap: 8px;font-size: 26px;color: #0056b3;font-weight: 700;letter-spacing: 1px;}
#training-section .t-header-right { font-size: 13px; color: #0056b3; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
#training-section .t-body { display: flex; align-items: flex-start; gap: 25px; flex: 1; }
#training-section .t-date-box {display: flex;align-items: center;gap: 6px;flex-direction: column;}
#training-section .t-day {font-size: 15px;font-weight: 900;color: #111;line-height: 1;}
#training-section .t-date-right {display: flex;flex-direction: column;align-items: center;color: #666;font-size: 12px;font-weight: 500;gap: 6px;}
#training-section .t-slash {font-size: 27px;color: #ddd;font-weight: 300;line-height: 0.8;margin-bottom: 5px;transform: rotate(15deg);}
#training-section .t-title {font-size: 25px;color: #333;font-weight: 500;padding-top: 10px;}
#training-section .t-footer { text-align: right; }
#training-section .t-link {color: #1c678f;font-size: 13px;font-weight: 400;cursor: pointer;transition: color 0.3s;background: #f3f3f3;padding: 10px 25px;border-radius: 666px;border: #81c6ff 1px solid;box-shadow: 0 4px 9px rgba(0, 86, 179, 0.15);}
#training-section .t-link:hover { color: #00a8ff; }
#training-section .custom-arrow {position: absolute;top: 50%;transform: translateY(-50%);border-radius: 50%;width: 66px;height: 66px;padding-bottom: 7px;background: linear-gradient(135deg, #00a8ff 0%, #0056b3 100%);color: #fff;display: flex;justify-content: center;align-items: center;font-size: 18px;cursor: pointer;z-index: 10;border: none;box-shadow: 0px 0px 9px rgb(255 255 255 / 30%);transition: transform 0.3s, background 0.3s;border: #82c7ff 2px solid;}
#training-section .custom-arrow:hover { transform: translateY(-50%) scale(1.1); background: linear-gradient(135deg, #0056b3 0%, #00a8ff 100%); }
#training-section .prev-arrow {left: 16%;}
#training-section .next-arrow {right: 16%;}

/* News Section with Video Background and Line Design */
#news-section {padding: 120px 0 300px;background: #fdfdfd;position: relative;overflow: hidden;}
.news-bg-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 0;opacity: 0.6;pointer-events: none;}
#news-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(#d1d5db 1px, transparent 1px); background-size: 25px 25px; opacity: 0.4; z-index: 1; pointer-events: none; }
#news-section .container {position: relative;z-index: 2;display: flex;gap: 10%;width: min(1480px , 90%);max-width: unset;}
#news-section .news-header {width: 30%;padding-top: 20px;}
#news-section .news-header .pageh1{font-size:1.25rem;color: #5c5c5c;font-weight: 400;margin: 45px 0;}
#news-section .news-list {width: 70%;display: flex;flex-direction: column;}
#news-section .news-item {display: flex;align-items: center;padding: 30px 0;border-bottom: 1px solid #777;transition: border-bottom-color 0.3s ease;cursor: pointer;position: relative;background: transparent;}
#news-section .news-item:hover, #news-section .news-item.active { border-bottom-color: #0056b3; }
#news-section .news-item .n-date { font-size: 15px; color: #333; width: 120px; font-family: 'Arial', sans-serif; font-weight: bold; }
#news-section .news-item .n-tag {padding: 4px 15px;background: linear-gradient(135deg, #00a8ff 0%, #0056b3 100%);color: #fff;font-size: 13px;border-radius: 2px;margin-right: 25px;white-space: nowrap;font-weight: normal;transition: background 0.3s;z-index: 555666;}
#news-section .news-item:hover .n-tag, #news-section .news-item.active .n-tag {}
#news-section .news-item .n-title {flex: 1;font-size: 20px;color: #333;font-weight: 500;transition: color 0.3s;overflow: hidden;margin: 0;height: 30px;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#news-section .news-item:hover .n-title, #news-section .news-item.active .n-title { color: #0056b3; }
#news-section .news-item .n-arrow { width: 35px; height: 35px; border: 1px solid #888; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #888; transition: all 0.3s; font-size: 16px; }
#news-section .news-item:hover .n-arrow, #news-section .news-item.active .n-arrow { background: linear-gradient(135deg, #0056b3, #00a8ff); color: #fff; border-color: transparent; }

/* Wrapper for smooth scroll targeting */
html { scroll-behavior: smooth; }
#wrap {scroll-margin-top: 80px;}

/* Clients Section (Tech Gradient Style with Overlap) */
#clients-section {padding: 70px 0 0;position: absolute;color: #fff;z-index: 2;margin-top: -200px;padding-left: 4vw;width: 83vw;}
#clients-section .container {display: flex;flex-direction: column;align-items: flex-start;position: relative;z-index: 2;width: 100%;overflow: hidden;}
#clients-section .section-subtitle { font-size: 13px; color: #003d82; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; font-weight: bold; }
#clients-section .section-subtitle::before { display: none; }
#clients-section .section-title {font-size: 34px;font-weight: 500;color: #282827;margin-bottom: 0;letter-spacing: 1.5px;}
#clients-section .client-grid {display: flex;gap: 15px;width: 100%;flex-wrap: nowrap;overflow-x: auto;scrollbar-width: none;position: relative;z-index: 10;justify-content: flex-start;margin-top: 40px;padding: 15px 5px;}
#clients-section .client-grid::-webkit-scrollbar { display: none; }
#clients-section .client-logo {background: #fff;padding: 25px 35px;border-radius: 4px;box-shadow: 0 0px 20px rgba(0, 0, 0, 0.15);display: flex;justify-content: center;align-items: center;min-width: 170px;font-weight: 900;font-size: 24px;color: #4a0b66;transition: transform 0.3s;cursor: pointer;flex-shrink: 0;margin: 10px 10px;}
#clients-section .client-logo:hover {transform: translateY(-3px);}
#clients-section:before{content:"";position: absolute;background:url(/images/14/clients-section_bg.png);width: 86vw;height: 464px;background-size: cover;top: 0;left: 0;}

#footer-section{padding-top: 315px;}

@media (max-width: 1024px) {

  #about-section { padding: 80px 0 120px; }
  #about-section .container {flex-direction: column;text-align: center;gap: 40px;}
  #about-section .image-col, #about-section .text-col {width: 100%;padding: 0;position: relative;}
  #about-section .image-col img{width:min(500px , 100%)}
  #about-section .section-subtitle { justify-content: center; }
  #products-section .watermark { font-size: 20vw; top: 80px; }
  #products-section .prev-arrow{left: 0;width: 50px;height: 50px;}
  #products-section .next-arrow{right: 0;width: 50px;height: 50px;}
  #products-section .slick-list{
    width: 95%;
    margin: 0 auto;
}
  #news-section .container { flex-direction: column; gap: 30px; }
  #news-section .news-header, #news-section .news-list { width: 100%; }
  #training-section .main-card {flex-direction: column;height: auto;}
  #training-section .logo-area, #training-section .info-area { width: 100%; border-right: none; padding: 30px; }
  #training-section .logo-area { border-bottom: 1px solid #eee; }
  #training-section .logo-area img{width:min(200px , 100%);margin: 0 auto;}
  #training-section .prev-arrow {left: 15%;width: 50px;height: 50px;}
  #training-section .next-arrow {right: 15%;width: 50px;height: 50px;}
  #clients-section{
    margin-top: 0;
    padding: 60px 0;
    position: relative;
}
  #clients-section:before{display:none;}
  #clients-section .section-title{
    color: #2e5d91;
}
  #clients-section .container{width:90%;}
  #footer-section{
    padding-top: 50px;
}
}

@media (max-width: 768px) {

  #about-section { padding: 60px 0; clip-path: none; margin-top: 0; }
  #about-section .section-title { font-size: 28px; }
  #about-section .desc-text { font-size: 15px; text-align: center; }
  #about-section .container{padding:0;}
  #about-section .text-col {display: flex;flex-direction: column;align-items: center;width: 90%;}

  #products-section {padding-top: 60px;padding-bottom: 80px;margin-top: 0;}
  #products-section .watermark {font-size: 15vw;top: 62px;left: 6%;}
  #products-section .p-header { align-items: center; padding-left: 0; }
  #products-section .section-title { font-size: 28px; }
  #products-section .product-carousel { margin: 0; }
  #products-section .prev-arrow { left: 0px; z-index: 20; }
  #products-section .next-arrow { right: 0px; z-index: 20; }
  #products-section .btn-wrap { margin-top: 30px; }

  #training-section { padding: 60px 0; }
  #training-section .logo-svg { width: 70px; height: 70px; }
  #training-section .logo-text { font-size: 26px; }
  #training-section .t-day { font-size: 40px; }
  #training-section .t-slash { font-size: 20px; }
  #training-section .t-title { font-size: 15px; }

  #news-section { padding: 60px 0; }
  #news-section .news-header { text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 20px; }
  #news-section .section-title { font-size: 28px; }
  #news-section .news-item { flex-wrap: wrap; padding: 20px 0; justify-content: flex-start; }
  #news-section .news-item .n-date {width: auto;margin-right: 15px;margin-bottom: 0;font-size: 14px;}
  #news-section .news-item .n-tag {margin-bottom: 10px;display: none;}
  #news-section .news-item .n-title {width: 100%;font-size: 16px;line-height: 1.5;padding-right: 40px;height: 27px;}
  #news-section .news-item .n-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

  #clients-section {padding: 60px 0;}
  #clients-section .container {align-items: center;padding: 0;}
  #clients-section .section-subtitle { justify-content: center; width: 100%; }
  #clients-section .section-title { font-size: 26px; text-align: center; width: 100%; }
  #clients-section .client-grid {justify-content: flex-start;padding: 15px 0px;margin-top: 20px;margin-bottom: 10px;}
  #clients-section .client-logo {min-width: auto;font-size: 20px;padding: 20px;box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);}

}