/* @import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --primary-color: #173e62;
    --secondary-color: #3d96c8;
    --black-color: #3d3737;
    --d-black-color: #000000;
    --black-grey: #505050;
    --blue-grey: #4d5964;
    --white-color: #ffffff;
    --sky-blue: #f2f5f8;
    --red-color: #da231b;
    --orange-color: #ff773c;
}

/* common css start */
* {
    font-family: "Nunito", sans-serif;
}

body {
    font-family: "Nunito", sans-serif;
}

.form-select,
.form-control {
    padding: .438rem 2.25rem .438rem .75rem;
}

.form-select:focus,
.form-control:focus {
    box-shadow: none;
}

.form-select:focus-visible,
.form-control:focus-visible {
    outline: none;
}

.filter-form label {
    margin-bottom: 10px;
    font-weight: 500;
}

.title-area {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
}

.primary-heading {
    color: var(--d-black-color);
    font-size: clamp(28px, 3vw, 42px);
    letter-spacing: 0.01em;
    font-weight: 700;
    margin-bottom: 24px;
}

.small-heading {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--d-black-color);
}

.d-block{
    display: block;
}

.d-none{
    display: none;
}

.color-90cb65{
    color:90cb65;
}

.c-white{
    color:var(--white-color);
}

.f-30{
    font-size:30px;
}

.bg-198754{
    background-color: #198754;
}

.bg-00FFFF{
    background-color: #00FFFF;
}

.bg-dc3545{
    background-color: #dc3545;
}
.c-red{
    color:red;
}
.cursor-p{
    cursor: pointer;
}
.bg-198754{
    background-color: #198754;
}

.bg-white{
    background-color: var(--white-color);
}
.project-detail-thumb{
    width: 100%; height: 400px; object-fit: cover; border-radius: 1rem;
}
.w100-h600{
    width:100%;
    height:600px;
}
.mw100p-hauto{
    max-width:100%;
    height:auto;
}
.project-loader-container{
    text-align: center; padding: 40px;
}
.project-loader-animation{
    border: 4px solid #f3f3f3; border-top: 4px solid #4a90e2; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 20px;
}
.project-image-url{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4rem;opacity:0.7;
}
.mw-420{
    max-width:420px;
}
.restriction-logo{
    width:50%;margin:auto;display:block;
}
.report-custom-row{
    background:var(--blue-grey); color: var(--white-color) !important;font-weight:bold;
}
.home-news-animation{
    transition: none;
    transform: translateX(0px);
    align-self: center;
}
.ml-20{
    margin-left: 20px;
}
.stoa-slider-custom{
    min-width: 310px;height: 340px;margin: 0px auto;position: relative;
}
.view-all {
    color: var(--d-black-color);
    font-size: 15px;
    font-weight: 500;
}

.btn {
    position: relative;
    padding: 7px 16px 7px 16px;
    border: 1px solid var(--black-color);
}

html body .btn-outline-primary:hover {
    color: var(--white-color);
    background-color: var(--blue-grey);
    border-color: var(--blue-grey);
}

.secondary-btn{
    padding: 7px 40px 7px 10px;
}
.secondary-btn:after {
    position: absolute;
    content: '';
    display: block;
    width: 16px;
    height: 9px;
    background-image: url('../images/arrow-right.svg');
    right: 0;
    top: 50%;
    transform: translate(-14px, -5px);
}

.btn:active:after {
    filter: unset !important;
}

.primary-btn {
    background-color: var(--red-color);
    border-color: var(--red-color);
    color: var(--white-color);
}

html body .action-btn {
    background-color: var(--red-color);
    color: var(--white-color);
    display: inline-block;
    min-width: 135px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 14px;
    padding: 3px 10px;
    font-weight: 500;
    transition: ease .3s all;
}

html body .action-btn-primary {
    background-color: var(--red-color);
}

html body .action-btn-primary:hover {
    background-color: var(--blue-grey);
    color: var(--white-color);
}

html body .action-btn-secondary {
    background-color: var(--blue-grey);
}

table ul.dropdown-menu {
    padding-left: 0;
    list-style: none;
}

table .dropdown-menu li a {
    color: var(--d-black-color);
    font-weight: 600;
    font-size: 15px;
    padding: 0.175rem 0.675rem;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #f0f0f0;
    color: var(--d-black-color);
}

.cancel-btn:hover,
.view-btn:hover,
.download-btn:hover,
.secondary-btn:hover {
    background-color: var(--red-color);
    color: var(--white-color);
}

.primary-btn:hover {
    background-color: var(--blue-grey);
    border-color: var(--blue-grey);
    color: var(--white-color);
}

.view-btn:hover:after,
.download-btn:hover:after,
.primary-btn:after,
.primary-btn:hover:after,
.secondary-btn:hover:after {
    filter: brightness(0) invert(1);
}

.download-btn:after {
    position: absolute;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    content: '';
    background-image: url('../images/ic-download.svg');
    background-repeat: no-repeat;
    top: 50%;
    transform: translate(-14px, -9px);
}

.view-btn:after {
    position: absolute;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    content: '';
    background-image: url('../images/read-more.svg');
    background-repeat: no-repeat;
    top: 50%;
    transform: translate(-4px, -9px);
}

.py-70 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.pt-70 {
    padding-top: 40px;
}

.pb-70 {
    padding-bottom: 40px;
}
.highcharts-data-table table {
    width: 100%;
}

.highcharts-data-table {
    background-color: var(--white-color);
    padding: 30px;
}

.highcharts-data-table table > thead > tr {
    background: linear-gradient(190deg, var(--red-color) 20%, var(--blue-grey));
}

.highcharts-data-table table tr > * {
    padding: 6px;
    border: 1px solid #e3e3e3;
}

.highcharts-data-table table > thead tr > * {
    color: var(--white-color);
}
/* common css end */

/* accesibility css start */
.accessibility-button {
    top: 45%;
    right: -180px;
    position: fixed;
    font-size: 16px !important;
    line-height: 1.4;
    z-index: 4;
    -webkit-transition: right 750ms cubic-bezier(.23, 1, .32, 1);
    -moz-transition: right 750ms cubic-bezier(.23, 1, .32, 1);
    -o-transition: right 750ms cubic-bezier(.23, 1, .32, 1);
    transition: right 750ms cubic-bezier(.23, 1, .32, 1);
}

.accessibility-toolbar-toggle {
    position: absolute;
    right: 180px;
    border-right: 0;
}

.accessibility-toolbar-toggle .access-toolbar-link {
    width: 48px;
    height: 48px;
    background-color: var(--red-color);
    -webkit-box-shadow: 0 -3px 8px 0 rgba(0 0 0 / 20%), -3px 0px 8px 0 rgba(0 0 0 / 20%);
    box-shadow: 0 -3px 8px 0 rgba(0 0 0 / 20%), -3px 0px 8px 0 rgba(0 0 0 / 20%);
    font-size: 200%;
    line-height: 0;
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px 0 0 25px;
}

.fa-sr-only,
.fa-sr-only-focusable:not(:focus),
.sr-only,
.sr-only-focusable:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.access-toolbar-overlay {
    border: 1px solid;
    font-size: 100%;
    width: 180px;
    background-color: var(--white-color);
}

.access-toolbar-overlay .access-toolbar-inner {
    padding: 15px;
}

.access-toolbar-inner .access-toolbar-title {
    font-size: 110%;
    font-weight: 600;
    color: var(--d-black-color);
    margin-bottom: 10px;
}

.access-tools .access-toolbar-item {
    margin-bottom: 5px;
}

#font-magnifier>button {
    display: inline-block;
    padding: 2px 4px;
    border: 1px solid var(--blue-grey);
    line-height: 15px;
    background-color: var(--white-color);
}

.access-toolbar-item .theme-btn {
    border: 0;
    padding: 0;
    background-color: var(--white-color);
}

.accessibility-button.open {
    right: 0px;
}

.access-toolbar-overlay {
    border: 1px solid #e2e2e2;
    font-size: 100%;
    width: 180px;
    background-color: var(--white-color);
    border-radius: 0 25px 25px;
}

/* accessibility css end */
.hero-header {
    position: relative;
}

.header-navigation {
    position: initial;
    z-index: 5;
    right: 0;
    left: 0;
    top: 22px;
}

.top-bar {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
    margin-top: 10px;
}

.navbar-brand .logo-title h1 {
    font-size: 13px;
    font-weight: bold;
    color: var(--red-color);
    text-transform: uppercase;
}
.mr_lang .navbar-brand .logo-title h1 {
    font-size: 13px;
}
.navbar-brand {
    display: flex;
    align-items: center;
}
.logo-title p {
    font-size: 13px;
    font-weight: 700;
}

.mr_lang .logo-title p {
    font-size: 13px;
}

.logo-title {
    padding-left: 10px;
}
.navbar-brand img {
    width: auto;
    max-width: 110px;
    position: relative;
}
.navigation {
    align-items: center;
    padding: 1.5rem;
    background-color: var(--white-color);
    border-radius: 10px;
    border: 1px solid #ededed;
}

.top-bar .form-area {
    margin-left: 10px;
}

.top-bar .language-options {
    padding: 0.16em 0.32em;
    background-color: var(--white-color);
    border-radius: 6px;
    border: 1px solid #7B7B7B;
}

.top-bar .language-options .input-group-text {
    padding: 0px 0px;
    border: 0;
    border-radius: 0;
    background-color: var(--white-color);
}

.top-bar .language-options select {
    border: 0;
    font-size: 14px;
}

.top-bar .navbar-nav .nav-item .search-btn {
    width: 26px;
    height: 26px;
    line-height: 22px;
    background-color: var(--white-color);
    display: inline-block;
    border-radius: 6px;
    border: 1px solid #7B7B7B;
    text-align: center;
}
.top-bar .navbar-nav .nav-item .nav-link {
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.top-bar .navbar-nav .nav-item .nav-link:hover {
    background-color: var(--white-color);
    color: var(--black-color);
}
.top-bar .navbar-nav .nav-item .nav-link:hover img {
    filter: brightness(0);
}
/* 26-09-2025 start */
.top-right {
    display: flex;
}

@media screen and (min-width: 1200px) {
    .navbar-brand {
        position: absolute;
        top: -6px;
        margin-top: -15px;
    }

    .navigation {
        padding: 0rem 0 0 0;
        background-color: initial;
        border: unset;
    }

    .site-header {
        align-items: center;
        padding: 1rem 1rem 0rem 1rem;
        background-color: var(--white-color);
        border: 1px solid #ededed;
    }

    .top-bar {
        position: relative;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        margin-bottom: 0px;
    }

    .top-right {
        align-items: center;
        position: relative;
        z-index: 10;
        top: -15px;
    }

    .top-bar:before {
        content: '';
        height: 48px;
        width: 102.8%;
        position: absolute;
        background: linear-gradient(190deg, var(--red-color) 20%, var(--blue-grey));
        top: -27px;
        right: -16px;
        z-index: -1;
    }

    .top-left {
        position: relative;
        z-index: 10;
    }

    .top-left:before {
        content: '';
        height: 48px;
        width: 108%;
        min-width: 485px;
        position: absolute;
        background: var(--white-color);
        top: -27px;
        left: -17px;
        border-radius: 0px 90px 0px 0;
        z-index: -1;
    }

    .navigation .navbar-nav > .nav-item > .nav-link {
        padding: 10px 3px !important;
        position: relative;
    }

    .navigation .navbar-nav .nav-item > .nav-link:after {
        content: '';
        display: block;
        width: 0;
        height: 3px;
        left: 0;
        background-color: var(--red-color);
        position: absolute;
        bottom: 0;
        transition: ease.3s all;
    }

    .navigation .navbar-nav .nav-item .nav-link:hover:after {
        width: 100%;
    }
}

@media screen and (min-width: 1499.98px){
    .top-left:before{
     min-width: 576px;
    }
    .navbar-brand img{
      max-width: 160px;
    }
    .logo-title{
     margin-top: -20px;
    }
    .lang-logo img{
        max-width: 160px !important;
    }
}

/* 26-09-2025 end */

.top-bar .navbar-nav .nav-item .nav-link {
    color: var(--white-color);
    font-weight: 400 !important;
}

.top-bar .navbar-nav .nav-item .nav-link img {
    filter: brightness(0) invert(1);
}

.user-login-btn #login-btn,
.user-login-btn #logout-btn {
    padding: 0.18em 0.4em;
    background-color: var(--blue-grey);
    border-radius: 6px;
    border: 1px solid var(--blue-grey);
    font-size: 14px;
    color: var(--white-color);
    transition: ease .3s all;
}

.user-login-btn {
    margin-left: 10px;
}

.user-login-btn #login-btn:hover,
.user-login-btn #logout-btn:hover {
    background-color: var(--white-color);
    color: var(--d-black-color);
    border-color: var(--white-color);
}
.navigation .navbar-nav .nav-item .nav-link {
    color: var(--d-black-color);
}
.navigation .navbar-nav .nav-item .nav-link:hover {
    color: var(--red-color);
}
.top-bar .navbar-nav .nav-item .nav-link,
.navigation .navbar-nav .nav-item .nav-link {
    padding: 0px 3px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.navigation .navbar-nav .nav-item .nav-link.active:after {
    content: "";
    display: block;
    width: 75%;
    height: 3px;
    background: var(--red-color);
    margin: 7px auto auto;
}
.parent-menu {
    position: relative;
}
.parent-menu:hover>.submenu,
.parent-menu>.submenu .parent-submenu>.parent-menu:hover>.submenu {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
}
.parent-menu>.submenu {
    z-index: 9999;
    padding-left: 0px;
    box-shadow: 0px 10px 10px rgba(0 0 0 / 10%);
    background-color: #fcfff9;
    height: auto;
    text-align: left;
}
.parent-menu>.submenu .parent-submenu {
    position: relative;
    min-height: 100%;
}
.parent-menu>.submenu>ul,
.parent-menu>.submenu .parent-submenu {
    padding-left: 0px;
}

.parent-menu>.submenu ul li {
    list-style: none;
}

.parent-menu>.submenu ul li a {
    padding: 10px;
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--d-black-color);
    border-bottom: 1px dashed var(--white-color);
    transition: ease 0.3s all;
}

html body .parent-menu>.submenu .parent-submenu>.parent-menu>.submenu {
    left: 100%;
    top: 0;
}

.navigation .navbar-nav .nav-item .submenu .nav-link {
    padding: 10px;
    border-bottom: 1px solid #aebec7;
    transition: ease .3s all;
}

.parent-menu .submenu-arrow {
    float: right;
}

.header-navigation .navbar-nav .nav-item .submenu li>a:hover,
.navigation .navbar-nav .nav-item .submenu .nav-link:hover {
    background-color: var(--blue-grey);
    color: var(--white-color);
}

.navigation .navbar-nav .nav-item .submenu .nav-link:hover .submenu-arrow {
    filter: brightness(0) invert(1);
}
.mr_lang .top-bar .navbar-nav .nav-item .nav-link, 
.mr_lang .navigation .navbar-nav .nav-item .nav-link, 
.mr_lang .parent-menu>.submenu ul li a {
    font-size: 14px;
}
/* hero banner css start */
.carousel-inner {
    background: var(--black-color);
}
/*.heroBanner .carousel-item:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
        linear-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.06) 22.21%),
        linear-gradient(rgba(0, 0, 0, 0.08) 51.22%, rgba(0, 0, 0, 0.6) 92.74%);
}*/

.heroBanner .carousel-item img {
    -webkit-animation: zoomout 30s ease-in infinite;
    animation: zoomout 30s ease-in infinite;
    transition: all .5s ease-in-out;
}
.heroBanner .carousel-item video{width: 100%; height: 100%; object-fit:fill;}
.heroBanner .carousel-item {
    height: 100vh;
}

 .heroBanner .carousel-item {
    position: relative;
    overflow: hidden;
  }

  .heroBanner .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
  }

  /* 🔹 1. Zoom In-Out */
 .heroBanner .carousel-item:nth-child(1).active img {
    animation: zoomInOut 9s ease-in-out forwards;
  }
  @keyframes zoomInOut {
    0% { opacity: 1; transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* 🔹 2. Smooth Right Slide + Fade + Depth */
 .heroBanner .carousel-item:nth-child(2).active img {
    animation: smoothRightFade 2.5s ease-in-out forwards;
  }
  @keyframes smoothRightFade {
    0% { opacity: 0; transform: translateX(80px) scale(1.05); filter: blur(4px); }
    50% { opacity: 0.7; transform: translateX(20px) scale(1.02); filter: blur(1px); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  }

  /* 🔹 3. Fade Up */
  .heroBanner .carousel-item:nth-child(3).active img {
    animation: fadeRise 2.5s ease-in-out forwards;
  }
  @keyframes fadeRise {
    0% { opacity: 0; transform: translateY(50px) scale(1.02); }
    50% { opacity: 0.7; transform: translateY(20px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* 🔹 4. Slide from Left */
  .heroBanner .carousel-item:nth-child(4).active img {
    animation: smoothLeftFade 2.5s ease-in-out forwards;
  }
  @keyframes smoothLeftFade {
    0% { opacity: 0; transform: translateX(-80px) scale(1.05); filter: blur(4px); }
    50% { opacity: 0.7; transform: translateX(-20px) scale(1.02); filter: blur(1px); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  }

  /* 🔹 5. Pan Up (like camera tilt) */
  .heroBanner .carousel-item:nth-child(5).active img {
    animation: panUp 9s ease-in-out forwards;
  }
  @keyframes panUp {
    0% { opacity: 1; transform: translateY(20px) scale(1.05); }
    50% { transform: translateY(-20px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1.05); }
  }

  /* 🔹 6. Zoom Out */
  .heroBanner .carousel-item:nth-child(6).active img {
    animation: zoomOut 9s ease-in-out forwards;
  }
  @keyframes zoomOut {
    0% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* 🔹 Caption Style */
  .heroBanner .carousel-caption {
    z-index: 2;
    animation: captionRise 1.5s ease-in-out both;
    animation-delay: 0.8s;
  }

  @keyframes captionRise {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }


.heroBanner .carousel-item .carousel-caption {
    padding: 0px;
    max-width: 550px;
    width: max-content;
    text-align: left;
    left: 4%;
    bottom: 60px;
    z-index: 1;
}

.heroBanner .carousel-item .carousel-caption .hero-title {
    color: var(--white-color);
    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 15px;
}

.heroBanner .carousel-item .carousel-caption p {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.heroBanner .carousel-navs .carousel-nav {
    position: static;
}

.heroBanner .carousel-navs {
    position: absolute;
    display: flex;
    gap: 30px;
    bottom: 100px;
    right: 4%;
    z-index: 1;
}

.heroBanner .carousel-navs .carousel-nav>span {
    background: unset;
    width: 40px;
    opacity: 1;
}

.heroBanner .carousel-navs .carousel-nav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 1;
    border: 1px solid var(--white-color);
    transition: ease .3s all;
}

.heroBanner .carousel-navs .carousel-nav:hover {
    background-color: var(--red-color);
}

.heroBanner .carousel-navs .carousel-nav:hover img {
    filter: brightness(0) invert(1);
}

.carousel-control-prev,
.carousel-control-next {
    background-color: var(--white-color);
}

/* latest section css start */
.latest-section {
    padding: 30px 0 30px;
    position: relative;
    z-index: 2;
}

.update-card {
    position: relative;
    padding: 30px;
    background-color: #E7F0EF;
}

#latest-tender {
    padding: 24px;
    background-color: var(--blue-grey);
}

.update-card-items .update-card-item {
    position: relative;
    background-color: var(--white-color);
    padding: 10px;
    min-height: 226px;
}

.update-card-item .date-time {
    position: absolute;
    top: 10px;
    right: 10px;
}

.update-card-items .update-card-item .img-box img {
    width: 30%;
    object-fit: cover;
}

.update-card-item .news-detail h4 {
    font-size: 14px;
    color: var(--d-black-color);
    font-weight: 600;
    text-align: justify;
    margin-top: 10px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#latest-tender .update-card-item {
    height: 190px;
    margin-bottom: 10px;
    overflow-y: auto;
}
/* width */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

/* Track */
.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--white-color); 
}
 
/* Handle */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--black-color); 
}

/* Handle on hover */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.slick-slider .slick-slide {
    margin: 0 10px;
}

.slick-list {
    margin: 0 -10px;
}

.slick-arrow {
    position: absolute;
    z-index: 1;
    top: -55px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    background-color: var(--white-color);
    box-shadow: 0 2px 4px -1px rgba(0 0 0 / 20%);
    transition: ease .3s all;
}

.slick-arrow:hover {
    background-color: var(--red-color);
    border-color: var(--red-color);
}

.slick-arrow:hover img {
    filter: brightness(0) invert(1);
}

.update-card .slick-prev {
    right: 150px;
}

.update-card .slick-next {
    right: 103px;
}

.project-gallery .slick-arrow {
    top: 50%;
    transform: translateY(-50%);
}

.project-gallery .slick-next {
    right: 0;
}

/* news flash css start */
.news-flash-section {
    padding: 0;
    background: linear-gradient(45deg, var(--red-color) 20%, var(--blue-grey));
    color: var(--white-color);
}

.flash-news {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}
.flash-heading {
    padding: 12px 25px;
    background-color: var(--blue-grey);
    border-radius: 0 25px 25px 0;
    flex-shrink: 0;
}
.f-news {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 30px;
    padding-left: 20px;
    padding-top: 8px;
    line-height: 30px;
}
.f-news a {
    color: var(--white-color);
}
.f-news a.active {
    display: block;
    opacity: 1;
}
.flash-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.flash-controls button {
    background: none;
    border: 1px solid var(--white-color);
    color: var(--white-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.flash-controls button:hover {
    background: var(--red-color);
    border-color: var(--red-color);
}

#view-announcements{
    background-color: var(--white-color);
    color: var(--d-black-color);
    border-color: var(--white-color);
    transition: ease .3s all;
}

#view-announcements:hover{
    background-color: var(--red-color);
    border-color: var(--red-color);
    color: var(--white-color);
}
/* news flash css end */
.update-card-item .date-time {
    font-size: 13px;
    font-weight: 600;
    color: #aa6401;
    padding: 0.25em 0.5em 0.05em;
    border-radius: 50rem;
    background: #fff4af;
    border: 1px solid #dfb053;
}

.tender-list {
    list-style-image: url('../images/news-icon.svg');
    list-style-position: inside;
}

.tender-list li {
    padding: 10px;
}

.tender-list li:hover {
    background-color: rgb(220 45 37 / 90%);
}

.tender-list li a {
    color: var(--white-color);
    text-align: justify;
    font-size: 16px;
    font-weight: 600;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* latest section css end */
/* max-capacity section css start */
.max-capacit-container {
    padding: 40px 40px 40px;
    background-color: #4d5964;
}
.graph-slide-item{
    width: 100%;
    height: 100%;
}
.highcharts-credits{display: none;}
.graph-slider{position: relative;}
.graph-slider .slick-arrow {top: -45px;}
.graph-slider .slick-prev {right: 54px;}
.graph-slider .slick-next {right: 0;}
.max-capacity.grid-item{gap: 16px;}
.max-capacity .icon-box {
    width: 58px;
    height: 58px;
}
.max-capacity .content .updated{
    margin-top: 5px; 
    font-size: 12px;
}
.help-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.project-card, .help-card, .max-capacity {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 1rem;
}
.project-card:hover, .help-card:hover, .list-row:hover, .max-capacity:hover {
    transform: translateY(-6px);
    box-shadow: 0 0.8rem 1.6rem rgba(164, 182, 209, 0.322);
}
.max-capacity-section .grid-item {
    border: 1px solid var(--blue-grey);
}

.max-capacity.grid-item .icon-box {
    background: linear-gradient(135deg, var(--red-color), var(--blue-grey));
    border: none;
}

.max-capacity.grid-item .icon-box img {
    filter: brightness(100);
}

.max-capacity.grid-item:hover{
    background: linear-gradient(135deg, var(--red-color), var(--blue-grey));
    color: var(--white-color);
}
.max-capacity.grid-item:hover .icon-box{
    background: var(--red-color);
}
.max-capacity.grid-item:hover .content span{
    color: var(--white-color);
}
/* max-capacity section css end */
/* VMC section css start */
.nav-tabs {
    padding: 5px;
    gap: 5px;
    border: 0;
    width: max-content;
    margin: 0 auto;
    background-color: #FAF9F9;
    border-radius: 50px;
    box-shadow: 0px 4px 6px -1px rgba(0 0 0 / 10%), 0px 2px 4px -1px rgba(0 0 0 / 6%);
    overflow: hidden;
}

.nav-tabs .nav-link {
    border: 0;
    color: var(--d-black-color);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: ease .3s all;
}

.nav-tabs .nav-link.active {
    border-radius: 50px;
    background: linear-gradient(135deg, var(--red-color)0% , var(--blue-grey)70%);
    color: var(--white-color);
    font-weight: 500;
}

.tab-content .left-side {
    padding-right: 30px;
}

 
.tab-content .left-side ul li {
    list-style: none;
    margin-bottom: 1rem;
    border: 1px solid var(--blue-grey);
    padding: 16px;
    border-radius: 10px;
    box-shadow: 3px 2px 0 rgba(0 0 0 / 0.4);
    background-color: #f7f7f7;
    font-weight: 600;
}

.tab-content .left-side ul {
    padding-left: 1.5rem;
}

.vmc-content-area .tab-content {
    padding-top: 80px;
}

.vmc-content-area .content-area p {
    font-size: 16px;
    line-height: 26px;
    color: var(--d-black-color);
}

/* VMC section css end */
/* upcoming project css start */
#upcoming-projects {
    background-color: #f7fbff;
}
.project-card {
    position: relative;
    min-height: 412px;
    padding: 1rem;
    background: var(--white-color);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(44, 90, 160, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.project-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(45deg, #3d96c8, #8ccffd);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-Completed {
    color: #226c40;
    background-color: rgb(148 229 180 / 75%);
    border: 1px solid #69bb8a;
}

.status-Upcoming {
    background: rgb(182 216 234 / 75%);
    color: #266daf;
    border: 1px solid #7db8ef;
}


.project-content {
    padding: 10px 0px;
}

.project-date {
    font-size: 13px;
    font-weight: 600;
    color: #aa6401;
    padding: 0.25em 0.5em;
    border-radius: 50rem;
    background: #fff4af;
    border: 1px solid #dfb053;
}

.project-title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--d-black-color);
}

.project-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.project-content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-gallery .media-item img {
    height: 160px !important;
    object-fit: cover;
}

/* upcoming project css end */
/* gallery section css start */
.gallery-section {
    padding: 50px 0 0;
    position: relative;
    overflow: hidden;
}

.gallery-section .gallery-text .tagline {
    margin-bottom: 16px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.gallery-text .tagline .red-text {
    color: var(--red-color);
}

.gallery-text .tagline .orange-text {
    color: var(--orange-color);
}

.gallery-text .large-heading {
    margin-bottom: 16px;
    color: var(--secondary-color);
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.gallery-item {
    display: block;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    max-height: 300px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-section .slick-center .gallery-item {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.gallery-section .slick-center .gallery-item img {
    transform: scale(1.1);
}

.gallery-section .progress {
    width: 100%;
    height: 10px;
    background: #ececec;
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.gallery-section .progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(to right, var(--red-color), var(--blue-grey));
    /* change color */
    transition: width 1s ease;
}

/* Within Debug mode in Chrome, I found that the arrows were hidden so I adjusted them   */
.gallery-section .gallery-container .slick-track {
    padding: 10px;
}

.gallery-section .gallery-container .slick-next,
.gallery-section .gallery-container .slick-prev,
.help-desk-section .help-desk-slider .slick-next,
.help-desk-section .help-desk-slider .slick-prev {
    font-size: 0;
    line-height: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 2px 4px -1px rgba(0 0 0 / 20%);
    transition: ease .3s all;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    z-index: 3;
}
.gallery-section .gallery-container .slick-next {
    right: 30px;
}
.gallery-section .gallery-container .slick-prev {
    left: 30px;
}
.help-desk-section .help-desk-slider .slick-next:before,
.help-desk-section .help-desk-slider .slick-prev:before,
.gallery-section .gallery-container .slick-next:before,
.gallery-section .gallery-container .slick-prev:before {
    font-family: slick;
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: var(--secondary-color);
}

.gallery-section .gallery-container .slick-dots {
    left: 0;
}

.gallery-section .gallery-container .slick-dots:active {
    color: var(--white-color);
}
/* gallery section css end */

/* page header css start */
.page-header {
    position: relative;
    background: linear-gradient(to right, transparent, transparent), url('../images/page-header.jpg');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 100%;
    height: 173px;
}

.page-title-area {
    position: absolute;
    bottom: 20px;
    width: 100%;
    height: fit-content;
}

.w-100p{
    width:100%;
}
.text-justify{
    text-align: justify !important;
}
.mw-78{
    min-width: 78px;
}
.mw-101{
    min-width: 101px;
}

.page-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--white-color);
}

.breadcrumb {
    margin: 0;
}

.breadcrumb>.breadcrumb-item a,
.breadcrumb>.breadcrumb-item {
    color: var(--white-color);
    font-weight: 500;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--white-color);
}

.page-content-container {
    padding: 50px 0;
    min-height: 380px;
}

.page-sidebar {
    overflow: hidden;
    width: 100%;
    min-width: 300px;
    padding: 16px;
    background: var(--white-color);
    border: 1px solid #e3e3e3;
    border-radius: 0.875rem;
    box-shadow: 2px -1px 10px 1px rgba(99 99 99 / 15%);
}

.page-menu-title {
    padding: 0.625rem 1.5rem;
    background: var(--blue-grey);
    margin-bottom: 10px;
    border-radius: 50px;
}

.page-menu-title h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--white-color);
    margin-bottom: 0;
}

.page-sidebar ul>li>a {
    margin-bottom: 10px;
    padding: 0.625rem 1.5rem;
    display: block;
    color: var(--d-black-color);
    font-size: 16px;
    font-weight: 600;
    /* border-bottom: 1px solid #e3e3e3; */
    border-radius: 50px;
    transition: ease .3s all;
}

.page-sidebar ul>li>a.active,
.page-sidebar ul>li>a:hover {
    background: #dae3ec;
}

.content-area .page-content {
    padding: 0 0 0 1.5rem;
    position: relative;
    overflow-x: auto;
}

.content-area .page-content .dataTables_wrapper .row{
    margin-right: initial;
    margin-left: initial;
}

.page-content {
    color: var(--d-black-grey);
    line-height: 1.6;
    text-align: justify;
}

.page-content p:not(:last-child) {
    margin-bottom: 10px;
}

.page-content p,
li,
a,
span {
    font-size: 16px;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    margin-bottom: 10px;
    font-weight: 600;
}

.page-content h3,
h4 {
    font-size: 22px;
}

.page-content h5 {
    font-size: 18px;
}

.page-content ul,
ol,
dl {
    padding-left: 2rem;
    list-style: initial;
    margin-bottom: 10px;
}

.page-content li::marker {
    color: var(--red-color);
    font-size: 18px;
    font-weight: 600;
}

.page-content ul>ol {
    list-style: upper-alpha;
}

.page-content a {
    color: var(--blue-grey);
    font-weight: 600;
}

.page-content a:hover {
    color: var(--red-color);
}

.page-content thead tr {
    text-align: center;
    background: linear-gradient(190deg, var(--red-color) 20%, var(--blue-grey));
    color: var(--white-color);
}

.page-content table thead tr>th {
    text-align: center;
}

.page-content tbody tr>* {
    border: 1px solid #e3e3e3;
    text-align: center;
    color: var(--black-grey);
}

.page-content tbody tr>td:first-child {
    border-left: 0px
}

.page-content tbody tr>td:last-child {
    border-right: 0px
}

.list-row {
    background-color: #fefefe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(44, 90, 160, 0.1);
    transition: ease .3s all;
}

.list-row .list-content {
    width: 100%;
    max-width: 650px;
}

.list-content .list-title {
    font-size: 18px;
    color: var(--d-black-color);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.publish-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--black-grey);
    display: inline-block;
}
/* page header css end */

/* contact page css start */
.contact-icon {
    padding-left: 10px;
    display: flex;
    align-items: start;
}

.contact-icon:before {
    content: '';
    font-family: 'FontAwesome';
    font-size: 12px;
    margin-right: 10px;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    background: var(--white-color);
    text-align: center;
    border-radius: 50px;
    border: 1px solid var(--red-color);
    color: var(--red-color);
    flex-shrink: 0;
}

.address:before {
    content: '\f1ad';
}

.telephone:before {
    content: '\f095';
}
 
.email:before {
    content: '\f0e0';
}
/* contact page css end */
/* news page css start */
.date-block {
    background: var(--primary-color);
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    color: var(--white-color);
    min-width: 90px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.date-day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
    color: rgba(255 255 255 / 0.6);
}
.date-month {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.95;
}
.date-year {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 2px;
}
.news-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--d-black-color);
    margin-bottom: 12px;
    line-height: 1.3;
}
/* news page css end */

/* gallery page css start */
.gallery-event-content .ge-item {
    padding: 12px;
    margin-bottom: 24px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
}

.gallery-event-content .ge-item:not(.ge-cat-images) {
    min-height: 297px;
}

.gallery-event-content .ge-item .gallery-caption {
    padding-top: 12px;
}

.gallery-event-content .ge-item p {
    color: var(--d-black-color);
    font-size: 16px;
    font-weight: 500;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-event-content .ge-item .gallery-video,
.gallery-event-content .ge-item .gallery-img {
    overflow: hidden;
    border-radius: 4px;
    max-height: 187px;
}

.gallery-event-content .ge-item .gallery-img img {
    object-fit: cover;
    transition: ease-in-out .8s all;
    height: 200px;
    width: 100%;
}

.ge-item:hover .gallery-img img {
    transform: scale(1.03);
}

.gallery-event-content .ge-item .gallery-video video {
    height: 200px
}

/* gallery page css end */

/* 27/09/2025 start */
.project-card,
.help-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 1rem;
}

.help-card a .card-title {
    text-decoration: none;
}
.project-card:hover,
.help-card:hover,
.list-row:hover {
    transform: translateY(-6px);
    box-shadow: 0 0.8rem 1.6rem rgba(164, 182, 209, 0.322);
}

.help-card .icon-box {
    width: 50px;
    height: 50px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: 1.2rem;
}

.gradient-red {
    background: linear-gradient(135deg, #e1504a, #4d5964)
}

.gradient-blue {
    background: linear-gradient(135deg, #3d96c8, #3669b1);
}

.gradient-green {
    background: linear-gradient(135deg, #22c55e, #15803d);
}

.gradient-yellow {
    background: linear-gradient(135deg, #facc15, #ca8a04);
}

.gradient-pink {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.gradient-indigo {
    background: linear-gradient(135deg, #6366f1, #4338ca);
}

.gradient-cyan {
    background: linear-gradient(135deg, #06b6d4, #0e7490);
}

.gradient-orange {
    background: linear-gradient(135deg, #f97316, #c2410c);
}

.help-card .card-title {
    color: var(--d-black-color);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.01em;
}

.card-title {
    text-decoration: underline;
}

.grid-card-section {
    padding: 30px 0px 30px;
    position: relative;
    z-index: 1;
}

.grid-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #deedf2;
    padding: 60px 20px 20px;
    position: relative;
}

.grid-item {
    position: relative;
    padding: 10px;
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
    flex-basis: calc(33.3366666% - 20px);
    gap: 6px;
    border: 1px solid #ededed;
    background-color: var(--white-color);
    border-radius: 10px;
}
.update-col {font-size: 13px;}
.grid-items .updates-row {
    display: flex;
    gap: 30px;
}
.grid-items .updated {
    position: absolute;
    right: 20px;
    top: 20px;
    width: auto;
    font-size: 13px;
    font-weight: 600;
    color: #aa6401;
    padding: 0.25em 0.5em;
    border-radius: 50rem;
    background: #fff4af;
    border: 1px solid #dfb053;
}

.icon-box {
    background-color: var(--white-color);
    border: 1px solid #c7c7c7;
    border-radius: 10px;
    overflow: hidden;
    padding: 4px;
    flex-shrink: 0;
}

.content span {
    font-size: 15px;
    font-weight: 800;
    color: var(--d-black-color);
}
.max-capacity-section .grid-item .content p{
    font-size: 15px;
}
.rnr-card-box {
    width: 100%;
    max-width: 120px;
    padding: 4px;
    border-radius: 13px;
}

.rnr-card span {
    font-size: 14px;
    font-weight: 700;
}

.rnr-card p {
    font-size: 14px;
    line-height: 14px;
}

#renewable {
    padding-bottom: 6px;
}

.help-desk-box {
    padding: 20px 40px 20px;
    background-color: #778899;
}

.help-desk-section .slick-slider .slick-slide{
    padding: 10px;
    margin: 0px;
}

.help-desk-section .slick-slider .slick-arrow{
    background-color: var(--red-color);
}
.help-desk-section .slick-slider .slick-arrow img{
    filter: brightness(0) invert(1);
}
.help-desk-section .help-desk-slider .slick-next{
    right: -30px;
}
.help-desk-section .help-desk-slider .slick-prev{
    left: -30px;
}
.help-desk-col {
    text-align: center;
    border: 1px solid #ededed;
    padding: 10px;
    border-radius: 10px;
    min-height: 128px;
    box-shadow: 1px 1px 6px 2px rgba(0 0 0 / 4%);
    transition: ease .3s all;
}

.help-desk-section .row:nth-child(2)>[class^="col"]:nth-child(even) .help-desk-col {
    background-color: var(--primary-color);
}

.help-desk-section .row:nth-child(2)>[class^="col"]:nth-child(even) .help-desk-col .icon img {
    filter: brightness(50);
}

.help-desk-section .row:nth-child(2)>[class^="col"]:nth-child(even) .help-desk-col span {
    color: var(--white-color);
}

.help-desk-col .icon {
    margin-bottom: 10px;
}

.help-desk-col span {
    font-weight: 600;
    color: var(--d-black-color);
    letter-spacing: 0.02em;
}

.help-desk-col:hover {
    background-color: var(--primary-color);
}

.help-desk-col:hover span {
    color: var(--white-color);
}

.help-desk-col:hover .icon img {
    filter: brightness(100);
}

.page-content .on-hover tr:hover {
    background: linear-gradient(190deg, var(--red-color) 20%, var(--blue-grey)) !important;
}
.page-content .on-hover tr > td > a{
	display: block;
	color: var(--d-black-color);
}
.page-content .on-hover tr:hover > td > a {
    color: var(--white-color);
}

.page-content .on-hover tr {
	background: transparent;
    transition: ease .3s all;
}
.page-content table.on-hover tbody > tr > td {
    border-right: 1px solid #979797;
    border-left: 1px solid #979797;
    border-color: #979797;
}
/* 27/09/2025 end */
/* board of directors css start */
.RightInnerText #mymaincontent,
.RightInnerText .Heading3,
.RightInnerText .breadcrumb{display: none;}
.InnerMember {
	background-color: #fafafa;
	float: left;
	margin-bottom: 15px;
	min-height: 270px;
	padding: 10px;
	width: 100%;
    border: 1px solid #ebebeb;
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.InnerMember img {
	height: 155px;
	max-width: 70%;
}

.DetailsMember {
	color: var(--red-color);
	float: left;
	width: 100%;
}

.DetailsMember h4 {
	font-size: 1.143em;
	font-weight: 600;
    margin-top: 10px;
	margin-bottom: 5px;
}

.DetailsMember>p {
	color: #676767;
	margin-bottom: 2px;
	margin-top: -3px;
}

.DetailsMember h4 > a{
    color: var(--red-color);
}

.Heading3>a {
	color: var(--white-color);
}

/* board of directors css end */

/* footer css start */
.site-footer {
    padding: 40px 0px 20px;
    background: #ebedf1;
}
.lang-logo {
    display: flex;
    align-items: center;
}
.lang-logo img {flex-shrink: 0;max-width: 110px;object-fit: contain;}
.footer-logo .english h5 {
    font-size: 13px;
    color: var(--red-color);
    font-weight: bold;
    text-transform: uppercase;
}
.footer-logo .logo-title p {
    font-size: 13px;
}
.social-links .social-icons {
    display: flex;
    gap: 10px;
}
.social-links .social-icons li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--white-color);
    border-radius: 50%;
    color: var(--white-color);
    transition: ease .3s all;
}

.social-links .social-icons li a:hover {
    opacity: 0.8;
    color: var(--white-color);
}
.social-links #facebook{background-color: #1877F2;}
.social-links #xPlatform{background-color: #000000;}
.social-links #instagram{background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);;}
.social-links #likedIn{background-color: #0077B5;}
.social-links #youtube{background-color: #FF0000;}
.footer-links ul {
    padding-left: 2rem;
}
.footer-links ul li {
    position: relative;
}
.footer-links ul li>a {
    color: var(--d-black-color);
    transition: ease .3s all;
}
.footer-links ul li>a:hover {
    color: var(--red-color);
}
.common-links li:before {
    content: '';
    list-style: initial;
    box-sizing: content-box;
    background: url('../images/logo-strips.png') no-repeat;
    list-style-position: outside;
    list-style-type: none;
    width: 24px;
    height: 10px;
    display: block;
    position: absolute;
    left: -30px;
    background-size: contain;
    top: 10px;
}
.common-links #address:before {
    background: url(../images/location.png) no-repeat;
    height: 24px;
    top: 0px;
}
.common-links #phone:before {
    background: url(../images/phone.png) no-repeat;
    height: 24px;
    top: 0px;
}
.site-footer .quick-links { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.site-footer .quick-links li { flex-basis: auto; flex-shrink: 0px; }
.site-footer .quick-links li:not(:last-child){
	margin-right: 30px;
}
.site-footer hr {
    border-color: var(--d-black-color);
    opacity: 0.5;
    margin: 1.5rem 0 1.5rem;
}

.copyright {
    background-color: #414d59;
    color: var(--white-color);
	line-height: 26px;
}

.copyright a {
    color: var(--red-color);
    font-weight: 600;
}
/* footer css end */

/* Reports Page CSS Start by Abhishek Singh */
.filter-input {
    display: inline-block;
    position: relative;
}

.filter-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #888;
    transition: color 0.3s ease;
    pointer-events: none;
}

.pill-select {
    border-radius: 50px !important;
    border: 1px solid #ccc;
    min-width: 140px;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    padding-right: 30px;
    outline: none !important;
    /* Remove default blue outline */
    box-shadow: none !important;
    /* Remove browser's default shadow */
}

/* Hover + Focus Effects */
.pill-select:hover,
.pill-select:focus {
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

/* Active selection - change icon color */
.pill-select:not([value=""]):not(:focus)+.filter-icon,
.pill-select:focus+.filter-icon {
    color: #007bff;
}

/* Reports Page CSS End */
.demo-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.modal-header {
    color: var(--white-color);
    border-bottom: none;
    padding: 1rem;
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-color), var(--blue-grey));
}

.modal-title {
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0;
}

.modal-subtitle {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
}

.modal-body {
    padding: 1.5rem;
    background: #ffffff;
}

.login-info {
    background: #ffcfcf;
    border: 1px solid #f8bebe;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.login-info-header {
    font-weight: 600;
    color: #b90303;
    font-size: 0.9rem;
}

.login-info-text {
    color: #4a5568;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.4;
}

.form-label {
    font-weight: 500;
    color: #2d3748;
    font-size: 0.9rem;
}

.form-control {
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--white-color);
}

.form-control:focus {
    border-color: var(--blue-grey);
    box-shadow: none;
    outline: none;
}

#captchaText {
    background-color: var(--blue-grey);
    padding: 0.375rem .75rem;
    border-radius: 20px;
    color: var(--white-color);
}

.input-group-text {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-right: none;
    color: #718096;
    font-size: 0.9rem;
}

.input-group .form-control {
    border-left: none;
}

.input-group:focus-within .input-group-text {
    border-color: var(--blue-grey);
    background: #ebf8ff;
    color: var(--d-black-color);
}

.btn-login {
    background: transparent;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    padding: 7px 40px 7px 10px;
    border: 1px solid var(--black-color);
}

.btn-login:hover {
    background: var(--red-color);
    border-color: var(--red-color);
    color: var(--white-color);
}

.btn-login:focus {
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.2);
}

.close-btn {
    background: none;
    border: none;
    color: var(--white-color);
    opacity: 0.8;
    font-size: 1.25rem;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.company-icon {
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.required {
    color: var(--red-color);
}

.page-content table {
    width: 100%;
}

.page-content table:not(.dataTable) tbody>tr:first-child {
    background: linear-gradient(190deg, var(--red-color) 20%, var(--blue-grey));
    color: var(--white-color);
}

.page-content table tbody>tr>* {
    vertical-align: middle;
    color: var(--d-black-color);
    font-size: 15px;
    padding: 6px;
}

.page-content table:not(.dataTable) tbody>tr:first-child>td {
    color: var(--white-color);
    padding: 6px;
}

.page-content table:is(.dataTable) tbody>tr:nth-child(odd),
.page-content table tbody>tr:nth-child(odd):not(:first-child) {
    background-color: #e9eff5;
}

.pagination li {
    list-style: none;
}

.pagination li:not(disabled) a {
    font-weight: 600;
    font-size: 15px;
}

.pagination {
    gap: 8px;
}

.pagination li a {
    padding: 4px 7px;
}

.page-item:is(disabled):first-child .page-link,
.page-item:is(disabled):last-child .page-link {
    color: var(--white-color);
    background-color: var(--red-color);
    border-color: var(--red-color);
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 6px;
}

.page-item:is(.active) .page-link {
    background-color: var(--blue-grey);
    border-color: var(--blue-grey);
}

.page-item .page-link {
    border-radius: 6px;
    padding: 0.25rem 0.856rem;
}

.dark-mode::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.01);
    pointer-events: none;
    backdrop-filter: grayscale(100%);
    z-index: 5;
}
#example_filter input[type="search"] {display: none;}
.page-content [data-bs-toggle]:hover {
    background: linear-gradient(190deg, var(--red-color) 20%, var(--blue-grey));
    color: var(--white-color);
    transition: ease .3s all;
}
.page-content .card-link a {
    color: var(--black-color);
    font-size: 18px;
}

.page-content .card-link:hover {
    transition: ease .3s all;
    background: linear-gradient(190deg, var(--red-color) 20%, var(--blue-grey));
	border-radius: inherit;
}

.page-content .card-link:hover a {
    color: var(--white-color);
}

.page-content .address-title > *{
	margin-bottom: 0px;
	background: linear-gradient(190deg, var(--red-color) 20%, var(--blue-grey));
    display: inline-block;
    padding: 6px 30px;
    color: #ffffff;
    border-radius: 50px;
}
/* Search box css start */
#searchModal .modal-content {border-radius: 20px;}
#searchModal .modal-body {padding: 40px 30px;}
#searchModal .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 10px;
    width: 24px;
    height: 24px;
    background-color: var(--secondary-color);
    opacity: 1;
    border-radius: 50%;
    filter: brightness(2) invert(1);
}
#searchModal {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
#searchModal .input-group {
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid #c7c7c7;
}
#searchModal .input-group-text {padding: .75rem 0 .75rem .75rem;}
#searchModal .input-group-text,
#searchModal .form-control {
    background: transparent;
    border: none;
}
#searchModal .popup-title span {font-size: 1.75rem;}
#searchModal .input-group:focus-within {border-color: var(--blue-grey);}
#searchModal .input-group:focus-within .input-group-text {border: none;background: none;}
#searchModal .form-control:focus {
    border-color: unset;
    box-shadow: none;
    outline: none;
}
.copyright p {font-size: 13px;}
/* External Link Modal CSS 30-10-2025 */
.custom-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Modal Box */
.custom-modal-box {
    background: var(--white-color);
    padding: 30px 40px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
}

.custom-modal-box1 {
    background: var(--white-color);
    padding: 30px;
    position: relative;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
}

/* Buttons */
.custom-modal-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.custom-modal-buttons .btn-grey {
    background-color: #ccc;
    color: #333;
    padding: 8px 20px;
    border: none;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

/* Custom Report Viewer CSS Start */
   #report_viewer header {
    background: linear-gradient(190deg, #da231b 20%, #4d5964);
    color: white;
    padding: 2rem 1rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  #report_viewer .report-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    margin: 2rem auto;
  }

  #report_viewer .report-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease;
  }

  #report_viewer .report-image:hover {
    transform: scale(1.02);
  }

  #report_viewer .legend-section {
    background: #ffffff;
    border-top: 3px solid #e0e0e0;
    padding: 1.5rem 1rem;
    margin-top: auto;
  }

  #report_viewer .legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0.5rem 1rem;
    font-size: 0.95rem;
  }

  #report_viewer .color-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: transform 0.2s ease;
  }

  #report_viewer .color-box:hover {
    transform: scale(1.15);
  }

  #report_viewer footer {
    text-align: center;
    background-color: #414d59;
    color: white;
    padding: 1rem 0.5rem;
    font-size: 0.9rem;
    margin-top: auto;
  }