@charset "UTF-8";
/*
Template Name: ITAL
Version: 5.4.2
Author: CoderThemes
Email: support@coderthemes.com
File: Main Css File
*/

:root {
  --ct-logo-lg-height: 32px;
  --ct-logo-sm-height: 32px;
  --ct-leftbar-width: 190px;
  --ct-leftbar-width-md: 160px;
  --ct-leftbar-width-sm: 70px;
  --ct-leftbar-condensed-height: 2000px;
  --ct-topbar-height: 55px;
  --ct-menu-item-icon-size: 1.2rem;
 --ct-menu-item-font-size: 0.75rem;
  --ct-menu-item-padding-x: 15px;
  --ct-menu-item-padding-y: 15px;
  --ct-menu-condensed-link-bg: #313a46;
  --ct-footer-height: 60px;
  --ct-theme-card-border-width: 0px;
  --ct-body-bg: #edf1f5;
}

:root, [data-bs-theme=light] {
    --ct-font-sans-serif: "Poppins", sans-serif;
}

.btn-primary {
    --ct-btn-color: #fff;
    --ct-btn-bg: #f47738;
    --ct-btn-border-color: #f47738;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #5d5d5d;
    --ct-btn-hover-border-color: #3d3d3d;
    --ct-btn-focus-shadow-rgb: 135, 144, 247;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #f47738;
    --ct-btn-active-border-color: #f47738;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #f47738;
    --ct-btn-disabled-border-color: #f47738;
}

.navbar-custom .topbar-menu li .nav-link.show {
    color: #f47738;
}

.nav-user {
    background-color: transparent;
}

footer.footer {
    background: #FFF;
  border-bottom:0;
}

html[data-bs-theme=dark] footer.footer {
    background: #181b1d;
}


a h4.card-title {
    color: #474747 !important;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
}


.page-title-box .page-title {
    font-size: 16px;
}

html[data-topbar-color=light] {
    --ct-topbar-bg: #ffffff;
    --ct-topbar-item-color: #6c757d;
    --ct-topbar-item-hover-color: #f47738;
    --ct-topbar-search-bg: #f0f3f8;
    --ct-topbar-user-bg: #fafafd;
    --ct-topbar-user-border: #eef2f7;
}
html[data-menu-color=dark] {
    --ct-menu-bg: #313a46;
    --ct-menu-item-color: #ffffff;
    --ct-menu-item-hover-color: #bccee4;
    --ct-menu-item-active-color: #ffffff;
    --ct-help-box-bg: rgba(255, 255, 255, 0.07);
}

li.side-nav-item i {
    color: #f47738;
}

.text-primary {
    --ct-text-opacity: 1;
    color: #f47738 !important;
}

.side-nav .side-nav-link {
    border-bottom: 1px solid #212730;
    border-top: 1px solid #30353a;
}

.btn-outline-primary {
    --ct-btn-color: #313a46;
    --ct-btn-border-color: #313a46;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #313a46;
    --ct-btn-hover-border-color: #313a46;
    --ct-btn-focus-shadow-rgb: 114, 124, 245;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #313a46;
    --ct-btn-active-border-color: #313a46;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #313a46;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #313a46;
    --ct-gradient: none;
}

html[data-bs-theme=dark] .btn-outline-primary {
    --ct-btn-color: #ffffff;
    --ct-btn-border-color: #ffffff;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #ffffff;
    --ct-btn-hover-border-color: #ffffff;
    --ct-btn-focus-shadow-rgb: 114, 124, 245;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #ffffff;
    --ct-btn-active-border-color: #ffffff;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #ffffff;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #ffffff;
    --ct-gradient: none;
}

:root, [data-bs-theme=light] {
    --ct-border-radius: 0.6rem;
}

html[data-menu-color=dark] {
    --ct-menu-item-hover-color: color(#e4692a);
}

html[data-bs-theme=dark] body {
    background: #0c0d0f;
}

html[data-bs-theme=dark]  a h4.card-title {
    color: #ffffff !important;
    font-size: 18px;
}

#ital-logo{
  width:80px;
  height:30px;
}
#ital-logo .color{fill:#3B4451;stroke:#3B4451;stroke-width:0.7;}

html[data-bs-theme=dark] #ital-logo .color{fill:#ffffff;stroke:#ffffff;stroke-width:0.7;}

[data-bs-theme=dark] .carousel .carousel-caption, [data-bs-theme=dark].carousel .carousel-caption {
    color: #fff;
}

.carousel-caption h4 {
    color: #f47738;
}

.ital-footer{
  padding-left:70px;
}

.page-title-box .page-title {
font-size: 17px;
line-height: 60px;
}
.card.d-block:hover {
    background: #cbcfd2;
}
a p.card-text {
    color: #313a46;
}

.card {
    border-radius: 10px;
}

.card d-block:hover {
    background: #313a46;
    color: #FFF;
}

.card:hover .btn-outline-primary{
    background: #313a46;
    color: #FFF;
    border-color: #fff;
}

.side-nav .menuitem-active>a {
    color: #ffbb39;
    font-weight: 500;
    background-color: #212730;
}

  #map-container {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 600px;
     margin: 0 auto;
     overflow: hidden;
   }
   svg {
     width: 100%;
     height: auto;
     display: block;
     cursor: grab;
     user-select: none;
     transform-origin: center center;
   }
   .tooltip {
 position: absolute;
 width: 60px;
 height: 60px;
 display: none;
 align-items: center;
 justify-content: center;
 font-size: 13px;
 font-weight: bold;
 background: yellow;
 border: 2px solid black;
 color: #000;
 pointer-events: none;
 z-index: 9999;
 top: 0;
 left: 0;

     position: absolute;
     width: 60px;
     height: 60px;
     background: rgba(255,255,255,0.95);
     border-radius: 50%;
     display: none;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     font-weight: bold;
     color: #000;
     pointer-events: none;
     z-index: 10;
     transform: translate(-50%, -120%);
   }
   .station-hover {
     fill: green !important;
     /stroke: #000;
     stroke-width: 2;
     /filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
     filter: invert(48%) sepia(79%) saturate(476%) hue-rotate(16deg) brightness(118%) contrast(119%);

   }
   .zoom-controls {
     position: absolute;
     bottom: 20px;
     left: 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     z-index: 20;
   }
   .zoom-controls button {
     font-size: 18px;
     padding: 6px 10px;
     border: none;
     background: #334;
     color: #fff;
     border-radius: 4px;
     cursor: pointer;
     font-weight: bold;
   }
   .zoom-controls button:hover {
     background: #fb3;
   }
   
  #tooltip {
      opacity: 1;
      display: flex !important;
      z-index: 999 !important;
    }
    
    .card {
        transition: all 0.3s ease-in-out;
    }
    /.card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
.card-bg-1 {
        background-image: url(../images/small/small-1.jpg);
    }
    
    .card-title{
            color:#FFF;
    }
    
   .card .btn-primary {
     -webkit-box-shadow: var(--ct-btn-box-shadow) rgb(73 73 73 / 50%);
         box-shadow: var(--ct-btn-box-shadow) rgb(23 23 23 / 50%);
     }
    
    h5.card-title {
        font-size: 1.25em;
        font-weight: 500;
    }
    
 .controlPane-table.col-sm-3.col-2.dt-buttons span {
        display: none;
    }
    
    
    ul.side-nav-second-level a {
        font-size: 0.66em;
        margin-top: 5px;
        margin-left: 13px;
        padding: 5px 5px 0 5px;
        text-transform: capitalize;
    }


.service-card {
        position: relative; /* Essential for positioning pseudo-elements */
        overflow: hidden;   /* To clip the skewed/blurred image layer if it extends */
    }
    
    /* This pseudo-element will hold the actual background image, allowing us to skew and blur it */
    .service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--card-bg-image); /* Use the CSS variable from inline style */
        background-size: cover;
        background-position: center;
        z-index: 0; /* Sit behind the overlay and content */
    
        /* --- Image Effects --- */

        /* Blur: Adjust pixel value as needed */
        filter: blur(1px); 
    }
    
    /* This pseudo-element will be the black overlay */
    .service-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4); /* Black with 40% opacity */
        z-index: 1; /* Sit on top of the ::before (image) but below the content */
        transition: background-color 0.3s ease; /* Optional: smooth transition for hover */
    }
    
    /* Ensure the card content sits above the overlay */
    .service-card .card-body {
        position: relative; /* Needed to establish stacking context for z-index */
        z-index: 2;         /* Higher z-index than the ::after overlay */
        /* Make sure the card-body itself doesn't have an opaque background */
        background-color: transparent !important; /* Or remove any conflicting background styles */
    }
    
    /* --- Optional: Enhance text legibility and hover effect --- */
    
    /* Make text white or light for better contrast against dark overlay */
    .service-card .card-title,
    .service-card .card-text,
    .service-card .icon-circle i { /* Target the icon itself */
        color: #f8f9fa; /* A light color, adjust as needed */
    }
    .service-card .card-text {
        color: #dee2e6; /* Slightly less bright for description */
    }
    
    
    /* Example: Reduce overlay opacity on hover for a subtle effect */
    .service-card:hover::after {
        background-color: rgba(0, 0, 0, 0.2); /* Lighter overlay on hover */
    }
    
    /* Optional: Slightly un-blur or un-skew image on hover */
    .service-card:hover::before {
        transform: scale(1.05);
        filter: blur(0px);
        transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition for hover */
    }
    .service-card::before { /* Add transition for returning to normal state */
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    
    footer.footer {
        background: #FFF;
        border-bottom: 0;
       / border-top: #ecf0f4 15px solid;
    }
    
    .small, small {
        font-size: .75rem;
        line-height: 1.25em;
    }
    
    .btn-primary {
        -webkit-box-shadow: var(--ct-btn-box-shadow) rgb(0 0 0 / 50%);
        box-shadow: var(--ct-btn-box-shadow) rgb(89 89 89 / 50%);
    }

.sidebar-ital-text {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        margin-bottom: 20px;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 1.6rem;
        color: #fff;
        letter-spacing: 0.01em;
        text-align: center;
        line-height: 1;
        user-select: none;
        padding-right: 20px;
        /* align-content: normal; */
        position: absolute;
        bottom: 0;
    }

.leftside-menu {
  height: 100%;
  min-height: 0;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  /position: relative;
}

    
    .content-page {
        position: relative;
        min-height: calc(70vh - var(--ct-topbar-height) - 2px) !important;
        padding: 0 .75rem var(--ct-footer-height) !important;
        -webkit-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }

.button-toggle-menu {
      display: none !important;
    }


    

      
    html[data-bs-theme=dark] .ital-banner-ticker {
    background: #303840;
    color: #eee;
    }
    
.ital-banner-track {
  display: inline-block;
  white-space: nowrap;
  min-width: 100%;
  animation: ital-banner-scroll 30s linear infinite;
}

@keyframes ital-banner-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Remove margin-top push since banner is now below navbar */
.navbar-custom, .wrapper {
  margin-top: 0 !important;
}


.ital-carousel-caption {
  max-width: 850px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  word-break: break-word;
}

.carousel-caption.ital-carousel-caption {
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.carousel-caption.ital-carousel-caption .container {
  max-width: 850px;
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 767.98px) {
  .carousel-caption.ital-carousel-caption .container {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 767.98px) {
  .ital-carousel-caption {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
        .carousel-caption.ital-carousel-caption .container {
          max-width: 100%;
          padding-left: 58px;
          padding-right: 58px;
      }
  
}


@media (min-width: 1200px) {
    .display-6 {
        font-size: 2.1rem;
    }
}