.about-banner-section {
       padding-bottom: 100px;
       color: white;
     }

     .about-banner-section .company-box {
       background: #00000000;
       padding-top: 15px;
       border-radius: 8px;
       max-width: 520px;
     }

     .logo-info h6 {
       margin-bottom: 0px;
     }

     .project-img {
       height: 250px;
       width: 250px;
     }

     .about-banner-section .breadcrumb-box a {
       color: #ffffff;
       font-weight: 600;
       text-decoration: none;
     }

     .about-banner-section .breadcrumb-box .active {
       color: #77d2ff;
       text-decoration: none;
     }

     .about-banner-section .breadcrumb-box a:hover {
       text-decoration: underline;
     }


     /*------------------------------------------- About Section -------------------------------------*/
     .about-section {
       padding: 30px 0;
     }

     .about-card {
       background: white;
       border-radius: 20px;
       padding: 25px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
     }

     .about-card img {
       border-radius: 18px;
       width: 100%;
       object-fit: cover;
     }

     .text-justify {
       text-align: justify;
       font-size: 16px;
     }

     /* ------------------------------------portfolio-section ----------------------------------- */
     .text-primary-color {
       color: #003366 !important;
     }

     .portfolio-section {
       background: #E9F0FF;
       padding-top: 30px;
       margin: 0px -10px;
     }

     .portfolio-section p.mt-3.text-start.mb-4 {
       margin-bottom: 0 !important;
     }

     .tab-btn {
       border-radius: 25px;
       padding: 8px 20px;
       color: #009edb;
       border: none;
       background: #ffffff;
       box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 6px;
       cursor: pointer;
     }

     .tab-btn.active {
       background: #009EDB;
       color: white;
     }

     .project-card {
       background: white;
       padding: 20px;
       margin-top: 20px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
       transition: 0.3s;
       text-align: center;
     }

     .tab-content {
       background: white;
       padding: 30px;
       border-radius: 20px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     }

     .project-card:hover {
       transform: translateY(-5px);
     }

     .project-title {
       font-size: 14px;
       font-weight: 500;
       color: #009EDB;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 95%;
     }

     .project-card img {
       border-radius: 6px;
       height: 200px;
       width: 100%;
     }


     /* ------------------------------transmission-section -------------------------------------------- */
     .transmission-section {
       padding: 20px 0;
       padding-bottom: 50px;
     }

     .big-card {
       background: white;
       border-radius: 18px;
       padding: 20px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
     }

     .big-card img {
       width: 100%;
       border-radius: 15px;
     }

     .transmission-box {
       align-content: space-evenly;
     }

     .highlight-card {
       background: white;
       border-radius: 18px;
       padding: 30px;
       border-left: 6px solid #009edd;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
     }

     .highlight-card li {
       margin-bottom: 10px;
       font-size: 16px;
     }

     .highlight-card li i {
       color: #009edd;
       margin-right: 8px;
     }

     /* ---------------------------Subsidiaries ---------------------------------- */
     .Subsidiaries {
       background: #E9F0FF;
       padding: 20px 0;
       padding-bottom: 50px;
     }

     .section-title {
       font-size: 2rem;
       font-weight: 700;
       text-align: center;
       color: #003366;
       margin-bottom: 40px;
     }

     /* Cards */
     .custom-card {
       background: #ffffff;
       border-radius: 16px;
       padding: 30px;
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
       transition: 0.3s ease;
       height: 100%;
       border: none;
       position: relative;
     }

     .custom-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
     }

     .custom-card h5 {
       font-size: 17px;
       font-weight: 500;
       color: #001d3d;
       margin-bottom: 9px;
     }

     .custom-card p {
       font-size: 14px;
       color: #333;
     }

      /* Card content padding adjustment to prevent overlap with absolute icon */
      .custom-card {
        padding-bottom: 50px;
      }


     .Subsidiaries .views-field-name a {
       text-decoration: none !important;
       color: inherit;
       display: inline-flex;
       font-size: 15px !important;
       align-items: center;
       width: fit-content;
     }


     /* --------------------------- section financial-performance  ------------------------------ */
     .financial-performance {
       text-align: center;
       padding: 20px 0px;
       padding-bottom: 50px;
       max-width: 1100px;
       margin: auto;
       font-family: "Inter", sans-serif;
     }

     .financial-performance h2 {
       font-size: 2rem;
       font-weight: 600;
       margin-bottom: 10px;
       color: #003366;
     }


     .performance-cards {
       display: flex;
       gap: 20px;
       justify-content: center;
       flex-wrap: wrap;
       margin-bottom: 30px;
     }

     .box {
       background: #fff;
       border-radius: 12px;
       padding: 25px 40px;
       width: 320px;
       border-top: 6px solid transparent;
       transition: 0.3s ease-in-out;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     }

     .box h3 {
       font-size: 22px;
       font-weight: 700;
       color: #000;
       margin-bottom: 6px;
     }

     .box p {
       font-size: 14px;
       color: #444;
     }

     .highlight-green {
       border-color: #198754;
     }

     .highlight-blue {
       border-color: #009EDB;
     }

     /* .info-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
} */

     .card {
       background: #fff;
       border-radius: 12px;
       padding: 22px;
       width: 420px;
       border: 1px solid #e5e5e5;
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
     }

     .card h4 {
       font-size: 22px;
       font-weight: 600;
       margin-bottom: 8px;
       color: #003366;
     }

     .card p {
       font-size: 14px;
       color: #444;
     }

     /* Responsive */
     @media (max-width: 768px) {

       .box,
       .card {
         width: 100%;
       }
     }



     /*-------------------------icons Accessibility Icons ------------------------------------*/
     .accessibility-icons {
       position: fixed;
       top: 40%;
       right: 6px;
       z-index: 999;
       display: flex;
       flex-direction: column;
       gap: 12px;
       align-items: center;
     }

     .accessibility-icons a {
       width: 42px;
       height: 42px;
       color: #003366;
       border: 1px solid #003366;
       padding: 21px;
       border-radius: 50%;
       font-size: 42px;
       background: #ffffff;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 42px;
       text-decoration: none;
     }

     .aboutsjvn-sec2 {
       color: #2774AC;
     }

     .accessibility-icons a:hover {
       background: #003366;
       color: white;
       border: 2px solid #003366;
     }

     .social-icons {
       position: fixed;
       bottom: 15%;
       background: #f5f5f5;
       border: 1px solid #a7a7a7;
       padding: 10px;
       border-radius: 7px;
       right: -6px;
       z-index: 999;
       display: flex;
       flex-direction: column;
       gap: 10px;
       ;
     }

     .social-icons a {
       width: 40px;
       height: 40px;
       background: white;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
       font-size: 18px;
       color: #444;
       transition: 0.3s;
     }

     .social-icons a:hover {
       transform: translateY(-3px);
     }

     .social-icons a img {
       width: 35px;
     }

     .facebook img {
       object-fit: contain;
       transition: 0.3s;
       filter: brightness(1);
     }

     .facebook:hover img {
       transform: scale(1.1);
       filter: brightness(1.2);
     }

     .instagram img {
       object-fit: contain;
       transition: 0.3s;
       filter: brightness(1);
     }

     .instagram:hover img {
       transform: scale(1.1);
       filter: brightness(1.2);
     }

     .linkdin img {
       object-fit: contain;
       transition: 0.3s;
       filter: brightness(1);
     }

     .linkdin:hover img {
       transform: scale(1.1);
       filter: brightness(1.2);
     }

     .youtube img {
       object-fit: contain;
       transition: 0.3s;
       filter: brightness(1);
     }

     .youtube:hover img {
       transform: scale(1.1);
       filter: brightness(1.2);
     }

     /*---------------------- social media icon --------------------------- */

@media print {
  .accessibility-icons,
  .social-icons,
  .back-to-top,
  #back-to-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}