:root{
  --brand:#062049;
  --accent:#0ea5a4;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#f8fafc;
  --nav-height:72px;
}
/* 🌙 DARK MODE — PERFECT FIX */
.dark-mode {
  --bg:#0a0f1f;
  --card:#131b2f;
  --text:#ffffff;
  --muted:#d0d4dc;
  --brand:#5ea5ff;
  --accent:#ffffff;

  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ALL TEXT IN DARK MODE = WHITE */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode a,
.dark-mode span,
.dark-mode small,
.dark-mode li {
  color: var(--text) !important;
}

/* CARDS / BOXES BACKGROUND IN DARK MODE */
.dark-mode .section-card,
.dark-mode .news-card,
.dark-mode .service-box,
.dark-mode .info-card,
.dark-mode .govt-card,
.dark-mode .ql-card,
.dark-mode .stat-card,
.dark-mode footer,
.dark-mode .ipa-header {
  background: var(--card) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* HERO BACKGROUND */
.dark-mode .hero {
  background: linear-gradient(180deg, #0e1b34, #0a1426) !important;
}

/* GOVERNMENT BAR KEEP ORIGINAL COLOR */
.dark-mode .govt-bar {
  background:#ff6a00 !important;
}

/* QUOTE TEXT FIX */
.dark-mode .quote-text,
.dark-mode .quote-author,
.dark-mode .quote-role {
  color:#ffffff !important;
}

/* ICON FIX — KEEP ORIGINAL COLORS */
.dark-mode i {
  color: inherit !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* SOCIAL ICONS KEEP STYLES */
.dark-mode .social-icon {
  background: inherit !important;
}

/* 🌙 DARK MODE — CONNECT SECTION */
.dark-mode .connect-section {
    background: #0f172a !important;      /* dark navy */
}

.dark-mode .connect-title,
.dark-mode .connect-sub {
    color: #ffffff !important;
}

/* Social icons – original colors but darker circle */
.dark-mode .social-icon {
    background: rgba(255,255,255,0.08) !important;
}

/* Keep icon colors SAME in dark mode */
.dark-mode .twitter i { color: #1DA1F2 !important; }
.dark-mode .facebook i { color: #1877F2 !important; }
.dark-mode .instagram i { color: #E4405F !important; }
.dark-mode .youtube i { color: #FF0000 !important; }
.dark-mode .linkedin i { color: #0A66C2 !important; }

/* Hover effect in dark mode */
.dark-mode .social-icon:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-6px);
}

body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;margin:0;background:var(--bg);color:#0b203b;    overflow: visible !important;} a{text-decoration:none}


img{max-width:100%;height:auto;display:block}


html {
    font-size: 100%;   /* default */
    transition: font-size 0.2s ease-in-out;
}
 


/* ======================================== */
/* UTILITY BAR */
/* ======================================== */

.utility-bar{
    background:#f5f6f8;
    border-bottom:1px solid #e1e1e1;
}

.utility-bar span, 
.utility-bar i,
.utility-bar a{
   font-size: .90rem;
    font-weight: 600;
    padding:.3rem;
    cursor:pointer;
    
    color:black;
}
.dark-mode .utility-bar span,
.dark-mode .utility-bar i,
.dark-mode .utility-bar a {
    color: #000000 !important;
}


/* ======================================== */
/* GOVERNMENT ORANGE BAR */
/* ======================================== */

.govt-bar{
    background:#ff6d1a;
}
.govt-bar span{
font-size: .90rem;}

.govt-bar a{
    color:#fff;
    text-decoration:none;
    font-size: .90rem;
}

/* ======================================== */
/* MAIN IPA HEADER */
/* ======================================== */

.ipa-header{
    background:#fff;
    border-bottom:1px solid #eaeaea;
    padding: 1.5rem 0;
}

.ipa-title{
    color:#00247d;
    font-weight:700;
    font-size:1.1rem;
    line-height: 1.2;
}

.ipa-sub{
    margin-top:2px;
    color:#6a7a92;
    font-size: 0.85rem;
}

.left-block img {
    flex-shrink: 0;
}

/* NAV LINKS */
.main-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.main-nav .nav-link,
.main-nav a{
    color:#1a1a1a;
    text-decoration:none;
    /*font-size:.90rem;   */ 
    font-size: 15px;
    font-weight: 500;    
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    display: inline-block;
}

.main-nav .nav-link:hover,
.main-nav a:hover{
    color:#0047d6;
}

.main-nav .nav-link.active,
.main-nav a.active {
    color:#0047d6;
}

.main-nav .dropdown {
    position: relative;
}

.main-nav .dropdown-menu {
    min-width: 200px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

.main-nav .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.main-nav .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #0047d6;
}

/* Nested dropdown (submenu) support */
.main-nav .dropdown-submenu {
    position: relative;
}

.main-nav .dropdown-submenu .dropdown-toggle::after {
    content: "\f285";
    font-family: "bootstrap-icons";
    border: none;
    vertical-align: middle;
    float: right;
    margin-top: 0.2em;
}

.main-nav .dropdown-submenu .submenu {
    top: 0;
    left: 100%;
    margin-left: 0.1rem;
    margin-top: -0.5rem;
}

.main-nav .dropdown-submenu:hover > .submenu {
    display: block;
}

/* SEARCH BUTTON */
.search-btn{
    border:1px solid #001489;
    color:#001489;
    border-radius:8px;
    padding:.45rem 1rem;
    font-weight:500;
    font-size: 0.9rem;
}

.search-btn:hover {
    background-color: #001489;
    color: #fff;
}

/* Mobile Menu Button */
.mobile-icon-btn {
    border: none;
    background: transparent;
    padding: 0.25rem;
    color: #001489;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-icon-btn:hover {
    color: #0047d6;
    transform: scale(1.1);
}

.mobile-menu-btn{
    border:none;
    padding:.25rem;
    color:#001489;
}
.mobile-menu-btn:hover{
    background:#f5f6f8;
}

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

    /* Hide desktop nav + search on mobile */
    .main-nav,
    .search-btn{
        display:none !important;
    }

    /* Make header more compact on mobile */
    .ipa-header {
        padding: 1rem 0;
    }

    .ipa-title{
        font-size:0.9rem;
        line-height:1.1;
    }

    .ipa-sub {
        font-size: 0.7rem;
    }

    .left-block img{
        width: 38px !important;
        height: auto !important;
    }

    .left-block {
        gap: 0.75rem !important;
    }

    /* Mobile icons stay visible */
    .mobile-icons{
        display: flex !important;
        gap: 0.5rem;
    }

    .mobile-icon-btn {
        font-size: 1.25rem;
        padding: 0.25rem 0.5rem;
    }

    /* Utility bar — always visible & clean */
    .utility-bar .d-flex{
        gap:.7rem !important;
        flex-wrap:wrap;
        align-items:center;
    }

    .utility-bar a,
    .utility-bar span,
    .utility-bar i{
        font-size:.78rem;
    }

    /* Govt bar */
    .govt-bar{
        font-size:.78rem;
    }
    .govt-bar .d-flex{
        gap:.8rem !important;
        flex-wrap:wrap;
    }
}

/* FORCE SHOW UTILITY BAR ON ALL MOBILE SIZES */
@media(max-width:932px){
    .utility-bar{
        display:flex !important;
        justify-content:space-between;
    }

    .utility-bar .d-flex{
        flex-wrap:wrap;
        gap:.5rem !important;
    }

    .utility-bar span,
    .utility-bar a,
    .utility-bar i{
        font-size:.75rem;
    }
}

/* Override old hidden rule */
@media(max-width:480px){
    .utility-bar{
        display:flex !important;
    }
}

/* Mobile icon buttons (search + menu) */
.mobile-icon-btn{
    width:44px;
    height:44px;
    border:2px solid #00247d;
    border-radius:10px;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.3rem;
    color:#00247d;
}

.mobile-icons i {
    font-size:1.3rem;
}

@media (min-width: 992px) {
    .mobile-icons { display:none !important; }
}

@media (max-width: 992px) {
    .ipa-sub { font-size: .78rem; }
}

/* Dark mode logo swap */
.dark-mode .logo-dark {
    display: none !important;
}

.dark-mode .logo-light {
    display: inline-block !important;
}

/* Light mode (default) */
.logo-light {
    display: none;
}
/* ======================================== */
/* MAKE HEADER FULLY STICKY */
/* ======================================== */

/* Top utility bar stick */
.utility-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* Government orange bar sticks below utility */
.govt-bar {
    position: sticky;
    top: 38px;
    z-index: 9998;
}

/* IPA main header sticks below govt bar */
.ipa-header {
    position: sticky;
    top: 66px;
    z-index: 9997;
    background: #ffffff; /* required when sticking */
}
@media (max-width:1400px){
  .ipa-header .container{
     flex-wrap: wrap;
  }

  .ipa-title{
     font-size: 1.4rem !important;
  }
}
/* Medium screens - adjust menu layout */
@media (max-width:1400px) and (min-width:993px) {
    .main-nav {
        gap: 0.3rem;
    }
    
    .main-nav .nav-link,
    .main-nav a {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
    
    .ipa-title {
        font-size: 1rem;
    }
    
    .ipa-sub {
        font-size: 0.8rem;
    }
}

/* MOBILE: keep logo + title + icons properly aligned */
@media(max-width:992px){

    .ipa-header .row {
        align-items: center;
    }

    /* Prevent wrapping issues */
    .ipa-header .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .ipa-title{
        font-size:0.85rem;
    }

    .left-block img{
        width: 35px !important;
        height: auto !important;
    }

    /* Mobile icons properly aligned */
    .mobile-icons{
        display:flex !important;
        gap:8px;
        justify-content: flex-end;
    }
}

/* ============================= */
/* IPA HEADER PERFECT ALIGNMENT */
/* ============================= */

.ipa-header .container {
    display: flex;
    flex-wrap: nowrap !important;    /* ❗ Prevent any wrapping */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* LEFT block: logo + text */
.left-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 1;   /* allow text to shrink */
    min-width: 0;     /* prevent overflow */
}

/* TITLE — always 2 lines, clean */
.ipa-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: normal !important;   /* ❗ allow 2-line title */
}

.ipa-title br {
    line-height: 0;
}

/* SUBTITLE */
.ipa-sub {
    white-space: nowrap;
    font-size: 0.75rem;
}

/* RIGHT SIDE — search + menu icons */
.mobile-icons {
    flex-shrink: 0;          /* ❗ icons never pushed down */
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ICON styling */
.mobile-icon-btn {
    width: 44px;
    height: 44px;
    border: 2px solid #00247d;
    border-radius: 10px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    color: #00247d;
    padding: 0;
}

/* ===================================== */
/*       RESPONSIVE FIXES               */
/* ===================================== */

/* Medium screens (1200px down) */
@media (max-width: 1200px) {
    .ipa-title {
        font-size: 1.1rem;
    }
}

/* Tablets & mobile */
@media (max-width: 992px) {
    .ipa-sub {
        display: none; /* hide subtitle — like reference */
    }
}

/* Mobile optimization */
@media (max-width: 768px) {
    .ipa-header .container {
        padding: 8px 5px !important;
    }

    .ipa-header img {
        width: 40px;
    }

    .ipa-title {
        font-size: 1rem;
    }
}

/* Small phones */
@media (max-width: 430px) {
    .ipa-title {
        font-size: 0.9rem;
    }

    .mobile-icon-btn {
        width: 40px;
        height: 40px;
    }
  }


/* =============================== */
/* CENTERED CUSTOM OFFCANVAS PANEL */
/* =============================== */

.offcanvas {
    width: 85% !important;          /* width like your screenshot */
    max-width: 420px !important;    /* fixed clean width */
    border-radius: 14px !important;
    margin: auto;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 20px !important;
    bottom: 20px !important;
    height: calc(100% - 40px) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25) !important;
    border: none !important;
    z-index: 13000 !important;
    overflow-y: auto;
}

/* Backdrop behind panel */
.offcanvas-backdrop {
    background: rgba(0,0,0,0.55) !important;
    z-index: 12999 !important;
}

/* Header inside panel */
.offcanvas-header {
    border-bottom: 1px solid #e5e5e5;
    padding: 15px 20px;
}

/* Title styling */
.offcanvas-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #062049;
}

/* Close button */
.btn-close {
    filter: brightness(0) !important;
}

/* Body spacing */
.offcanvas-body {
    padding: 18px 22px;
}

/* Menu links */
.offcanvas-body a {
    font-size: 1rem;
    padding: 10px 0;
    font-weight: 600;
    color: #062049;
    border-bottom: 1px solid #f0f0f0;
}

.offcanvas-body a:last-child {
    border-bottom: none;
}

.offcanvas-body a:hover {
    color: #0ea5a4;
}

.offcanvas-body a.active {
    color: #0ea5a4;
}

/* Quick Links section */
.offcanvas-body hr {
    margin: 1.5rem 0;
}

.offcanvas-body small {
    font-size: 0.85rem;
    font-weight: 700;
    color: #6b7280;
}

/* Switch to mobile mode earlier */
@media (max-width: 1200px) {

    /* Hide desktop navigation */
    .main-nav,
    .search-btn {
        display: none !important;
    }

    /* Show mobile icons */
    .mobile-icons {
        display: flex !important;
    }

    /* Adjust title size + logo */
    .ipa-title {
        font-size: 1rem !important;
        white-space: nowrap;
    }

    .ipa-header img {
        width: 40px !important;
    }
}


.hero{
  position: relative;
  padding: 6rem 2rem;
  background-image: url('public/dist/img/kamarajar_port_logo2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 400px;
  color: #fff;
  overflow: hidden;
  z-index: 1;
}

/* 🔥 Background Color Filter / Overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to right,
      rgba(129, 127, 141, 0.902),
      rgba(37, 69, 129, 0.871)
  );
  /* background-repeat: no-repeat; */
/* background: url('public/dist/img/kamarajar_port_logo2.png') !important; */
  z-index: -1;
}


/* TABLET */
@media (max-width: 992px){
  .hero{
    padding: 5rem 1.5rem;
    min-height: 350px;
    background-position: center top;
  }
}

/* MOBILE */
@media (max-width: 576px){
  .hero{
    padding: 4rem 1rem;
    min-height: 300px;
    background-size: cover;     /* keeps the image responsive */
    background-position: top;
  }
}

.hero-title{
   font-size: 3.5rem;
   font-weight: 1000;
}
#hero.aboutBtn{
   font-size: 1.5rem;
   font-weight: 700;
}
#hero.downloads{
   color: white;
}

.hero-visual{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:40%; /* FIX WIDTH */
  background-position:center;
  opacity:0.06;
}

/* Hide image completely on tablet + mobile */
@media (max-width:1024px){
  .hero-visual{ display:none !important; }
  .circle-wrapper{display: none !important;}
  .logoimg{display: none !important;}
}


.stat-big {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.9rem;
    line-height: 1.2;
}

/* ICON COLORS */
.icon-orange { color: #ff9d33; }
.icon-blue   { color: #53b2ff; }
.icon-green  { color: #27c75d; }

/* MOBILE FIX: ensures all 3 fit without scroll */
@media (max-width: 576px) {
    .hero-stats-fixedrow {
        gap: 8px;
    }

    .hero-stats-fixedrow .hero-stat-card {
        padding: 1rem 0.6rem;
    }

    .hero-stats-fixedrow i {
        font-size: 1.5rem;
    }

    .stat-big {
        font-size: 1.4rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }
}



/* MOBILE FIX */
@media (max-width: 576px) {
    .hero-stats-fixedrow {
        flex-direction: row;
        gap: 12px;
    }

    .hero-stat-card {
        min-height: 120px;
    }
}
.hero-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    height: 110px;  
       /* 🔥 same height always */
}

@media (max-width: 576px) {
    .hero-stat-card {
        height: 95px;  /* 🔥 mobile equal height */
    }
}





/* Quick card */
.quick-card{border-radius:12px;padding:1rem;background:#fff;color:#08152a}
.icon-block{width:64px;height:64px;border-radius:10px;background:linear-gradient(180deg,#fff,#f3f4f6);box-shadow:0 6px 18px rgba(3,12,30,0.06)}

/* stat pills */
.stat-pill{background:rgba(255,255,255,0.08);padding:.45rem .8rem;border-radius:12px;font-weight:600;font-size:.85rem}

/* SECTION TITLES */
.section-title{font-size:2.15rem;font-weight:700;color:rgb(0, 0, 139)}

/* SERVICE CARDS */
.service-card{background:var(--card);border-radius:12px;padding:1rem;border:1px solid #eef2f7;transition:transform .22s ease,box-shadow .22s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(6,22,60,0.08)}
.card-icon{width:52px;height:52px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(6,22,60,0.04)}

/* HORIZONTAL SCROLL for mobile */
.sections-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.6rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sections-scroll .service-card{min-width:220px;flex:0 0 auto;scroll-snap-align:start}

/* STATS SECTION */
.stats-section{background:linear-gradient(90deg,#071a3a,#062a4a);color:#fff;border-radius:12px}
.stats-section h3{margin:0;font-weight:700}

/* NEWS */
.news-card{border-radius:12px;border:1px solid #eef2f7;transition:transform .22s ease,box-shadow .22s ease}
.news-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(6,22,60,0.08)}
.news-card img{height:150px;object-fit:cover;border-radius:8px}

/* FOOTER */
footer{background:#03102e;color:#cfe6ff;padding-top:2.25rem;border-top:4px solid var(--brand)}
footer a{color:inherit}
footer small{color:#9fb7dc}

/* REVEAL */
.reveal-show{opacity:1;transform:none;transition:all .6s cubic-bezier(.2,.8,.2,1)}
.service-card,.news-card,.quick-card,.stats-section{opacity:0;transform:translateY(18px)}

/* RESPONSIVE TWEAKS */
@media (max-width:992px){
  .hero-visual{width:50%}
  .brand-text .brand-title{font-size:.98rem}
  .hero{padding:4rem 0}
  .hero-title{font-size:2.2rem; font-weight:800}
}
@media (max-width:768px){
  .hero{padding:3rem 0}
  .hero-visual{display:none}
  .hero-title{font-size:1.8rem; font-weight:800}
  .quick-card{padding:.9rem}
  .news-card img{height:160px}
  .brand-text .brand-sub{display:none}
  .hero-sub{font-size:.9rem}
  .stat-pill{font-size:.8rem;padding:.4rem .7rem}
}
@media (max-width:576px){
  .hero{padding:2rem 0}
  .hero-title{font-size:1.5rem;line-height:1.2; font-weight:800}
  .hero-subtitle{font-size:.9rem}
  .hero-sub{font-size:.85rem;margin-top:1rem !important}
  .btn-lg{padding:.5rem 1rem;font-size:.95rem}
  .stat-pill{font-size:.75rem;padding:.3rem .5rem}
  .section-title,.stats-title,.info-title,.services-title{font-size:1.3rem}
}
@media (max-width:420px){
  .service-card{min-width:200px;padding:.95rem}
  .stat-pill{font-size:.7rem;padding:.25rem .4rem}
  .brand-logo{width:38px;height:38px}
  .hero-title{font-size:1.3rem; font-weight:800}
}
/* TOPBAR 1 */
.topbar-1 {
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  padding:6px 0;
  font-size:.85rem;
}
.topbar-1 a {
  color:#374151;
}
.topbar-1 a:hover {
  color:var(--brand);
}

/* TOPBAR 2 (Orange contact bar) */
.topbar-2 {
  background:#f65a0c;
  padding:6px 0;
  font-size:.85rem;
}
.topbar-2 i {
  font-size:1rem;
}
/*=========================================*/
/*MAIN SECTIONS START*/
/* ====================================== */
.section-card{
  padding:1.8rem;
  border-radius:14px;
  border:1px solid #e7ecf2;
  min-height:230px;            /* ALL CARDS SAME HEIGHT */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  box-shadow:0 2px 5px rgba(0,0,0,0.05);
  transition:all .25s ease;
}

.section-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(0,0,0,0.12);
}

/* ICON */
.icon-wrap{
  width:45px;
  height:45px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,0.04);
  margin-bottom:.6rem;
  font-size:1.3rem;
}

/* TITLE */
.section-card h6{
  font-size:1rem;
  font-weight:700;
  
  margin-bottom:.3rem;
}

/* DESCRIPTION */
.section-card p{
  font-size:.85rem;
  
  line-height:1.3;
  flex-grow:1;
  margin-bottom:.5rem;
}

/* LINK */
.section-card a{
  font-size:.85rem;
  font-weight:600;
  color:#1d4ed8;
  text-decoration:none;
}
.section-card a:hover{
  text-decoration:underline;
}

/* COLORS (unchanged) */
.bg-1{background:#eef4ff; color:rgb(0, 44, 188) ;}
.bg-2{background:#e8fff1; color:rgb(4, 106, 56) ;}
.bg-3{background:#f4f0ff; color:rgb(126, 34, 206) ;}
.bg-4{background:#fff3ec; color:rgb(255, 103, 31);}
.bg-5{background:#ffeef2; color:rgb(185, 28, 28) ;}
.bg-6{background:#edfaff; color:rgb(67, 56, 202) ;}
.bg-7{background:#fff7e8; color:rgb(190, 24, 93) ;}
.bg-8{background:#f0fffb; color:rgb(161, 98, 7) ;}
.bg-9{background:#e9f4ff; color:rgb(38, 131, 124) ;}
.bg-10{background:#f6f0ff; color:rgb(14, 116, 144) ;}

/* ============================== */
/* RESPONSIVE FIX (1000–1200px)   */
/* ============================== */

@media only screen and (min-width: 1000px) and (max-width: 1300px) {


  /* Reduce card padding */
  .section-card {
    padding: 1.4rem 1.1rem;
    min-height: 190px;
  }

  /* Adjust text sizes */
  .section-card h6 {
    font-size: 0.95rem;
  }

  .section-card p {
    font-size: 0.80rem;
  }
}

@media (max-width: 1100px) {
  .section-card {
    min-height: 200px;
  }
}

@media (max-width: 576px) {
  .col-12.col-md-4.col-lg-2 {
    max-width: 47%;
    flex: 0 0 47%;
  }
  .section-card {
    min-height: 180px;
    padding: 1.2rem;
  }
}

@media (max-width: 400px) {
  .section-card {
    min-height: 160px;
  }
  .section-card h6 {
    font-size: 0.9rem;
  }
  .section-card p {
    font-size: 0.78rem;
  }
}




/*=========================================*/
/*Indian Ports at a Glance*/
/* ====================================== */
.stats-section {
    position: relative;
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    background: rgb(1, 0, 138) !important; 
    min-height: 300px !important;
    z-index: 1 !important;
    border-radius: 0%;
}

/* STAT CARDS */
.stat-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  padding:1.8rem 1rem;
  border-radius:16px;
  text-align:center;
  transition:.25s ease;
  height:100%;
}

.stat-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(0,0,0,0.25);
}

/* ICON */
.stat-icon{
  width:55px;
  height:55px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem auto;
  font-size:1.4rem;
  color:#bcd1ff;
}

/* NUMBER (FIXED SPAN ISSUE) */
.stat-number{
  font-size:1.8rem;
  font-weight:800;
  margin:0;
  color:#ffffff;
  line-height:1.2;               /* FIX: span visibility */
  display:inline-flex;           /* FIX: number + span align */
  align-items:flex-start;        /* FIX: % and + position */
  gap:4px;                       /* Space between number and span */
}

.stat-number span{
  margin-top: 5PX;
  font-size:1.4rem;              /* Make + / % clearly visible */
  font-weight:800;
  line-height:1;
  color:#ff6c2f;
  display:inline-block;          /* FIX: forces rendering */
}

/* LABEL */
.stat-label{
  margin-top:.3rem;
  font-size:.85rem;
  color:#c8d3ff;
}

/* RESPONSIVENESS */
@media(max-width:992px){ /* tablets */
  .stat-card{ padding:1.5rem .9rem; }
  .stat-number{ font-size:1.6rem; }
}

@media(max-width:768px){ /* large mobiles */
  .col-6.col-md-4.col-lg-3{
    flex:0 0 45%;
    max-width:45%;
  }
  .stat-card{ padding:1.4rem .8rem; }
}

@media(max-width:576px){ /* small mobiles */
  .col-6.col-md-4.col-lg-3{
    flex:0 0 48%;
    max-width:48%;
  }
  .stat-card{ padding:1.2rem .7rem; }
  .stat-number{ font-size:1.4rem; }
}

@media(max-width:400px){ /* extra small devices */
  .col-6.col-md-4.col-lg-3{
    flex:0 0 100%;
    max-width:100%;
  }
  .stat-card{ padding:1rem .6rem; }
}
/*=========================================*/
/*Information For*/
/* ====================================== */
.info-title{
  font-size:1.6rem;
  font-weight:700;
  color:rgb(0, 0, 139);
}
.info-sub{
  color:#6b7280;
  font-size:.9rem;
}

/* CARD STYLE */
.info-card{
  background:#fff;
  padding:1.4rem 1rem;
  border-radius:14px;
  border:1px solid #e5e7eb;
  text-align:center;
  height:100%;
  transition:.25s ease;
  box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

.info-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(0,0,0,0.12);
}

/* ICON STYLE */
.info-icon{
  width:55px;
  height:55px;
  border-radius:50%;
  margin:0 auto 1rem auto;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:1.4rem;
}

/* TEXT */
.info-card h6{
  font-size:1rem;
  font-weight:700;
  margin-bottom:.3rem;
  color:#0b2545;
}
.info-card p{
  font-size:.85rem;
  color:#526276;
  margin:0;
}

/* BACKGROUND COLORS */
.bg-info-1{ background:#eef4ff; }
.bg-info-2{ background:#e8fff1; }
.bg-info-3{ background:#fff4e8; }
.bg-info-4{ background:#f4f0ff; }
.bg-info-5{ background:#fff5f5; }
.bg-info-6{ background:#e9f7ff; }

/* ICON COLORS MATCH */
.bg-info-1 .info-icon{ background:#dce8ff; }
.bg-info-2 .info-icon{ background:#d6fbe7; }
.bg-info-3 .info-icon{ background:#ffe7d3; }
.bg-info-4 .info-icon{ background:#ece6ff; }
.bg-info-5 .info-icon{ background:#ffe4e4; }
.bg-info-6 .info-icon{ background:#d9efff; }

/* RESPONSIVE */
@media(max-width:768px){
  .col-6.col-md-4.col-lg-2{
    flex:0 0 45%;
    max-width:45%;
  }
}

@media(max-width:480px){
  .col-6.col-md-4.col-lg-2{
    flex:0 0 48%;
    max-width:48%;
  }
}

@media(max-width:380px){
  .col-6.col-md-4.col-lg-2{
    flex:0 0 100%;
    max-width:100%;
  }
}
/*=========================================*/
/*Our Services*/
/* ====================================== */
.services-title{
  font-size:1.6rem;
  font-weight:700;
  color:rgb(0, 0, 139);
}
.services-sub{
  color:#6b7280;
  font-size:.9rem;
}

/* SERVICE CARD */
.service-box{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:1.6rem;
  height:100%;
  box-shadow:0 4px 15px rgba(0,0,0,0.05);
  transition:.25s ease;
}

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

/* ICON CIRCLE */
.service-icon{
  width:55px;
  height:55px;
  border-radius:50%;
  background:#fff6e8; 
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:1.4rem;
  color:#ff8c3a;
  margin-bottom:1rem;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

/* CONTENT */
.service-box h5{
  font-size:1.05rem;
  font-weight:700;
  color:#0b2545;
}

.service-box p{
  font-size:.88rem;
  color:#526276;
  margin-bottom:1rem;
}

/* LINK */
.service-link{
  font-size:.85rem;
  font-weight:600;
  color:#0d47ff;
  text-decoration:none;
}
.service-link:hover{
  text-decoration:underline;
}

/* RESPONSIVE FIXES */
@media(max-width:576px){
  .service-box{
    padding:1.2rem;
  }
}
/* ============================================= */
/* 📰 Latest News & Updates - CLEAN + RESPONSIVE */
/* ============================================= */

/* Section title */
.news-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0b2560;
}

.news-sub {
  font-size: .92rem;
  color: #6b7280;
  margin: 0;
}

/* View All Button */
.view-all-btn {
  border-radius: 8px;
  padding: .45rem 1rem;
  font-size: .9rem;
}

/* NEWS CARD */
.news-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
  opacity: 1 !important;       /* 🔥 Always visible */
  transform: none !important;  /* 🔥 No hide bug */
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

/* IMAGE */
.news-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

/* BODY */
.news-body {
  padding: 1.3rem;
}

/* DATE */
.news-date {
  color: #6b7280;
  font-size: .8rem;
  display: block;
}

/* HEADING */
.news-heading {
  font-size: 1rem;
  font-weight: 700;
  color: #08152a;
  margin: .4rem 0;
}

/* TEXT */
.news-text {
  font-size: .88rem;
  color: #4b5563;
  margin-bottom: .8rem;
}

/* LINK */
.news-link {
  font-size: .9rem;
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: none;
}

.news-link:hover {
  text-decoration: underline;
}
.view-all-btn {
    border: 1px solid orangered;
    color: orangered;
    transition: 0.3s ease;
}

.view-all-btn:hover {
    background: rgba(226, 163, 139, 0.533);
    color: #000000;
    border-color: orangered;
}


/* ============================================= */
/* RESPONSIVENESS */
/* ============================================= */

/* Medium screens (tablets) */
@media(max-width: 768px) {
  .news-card img {
    height: 170px;
  }
}

/* Mobile screens */
@media(max-width: 576px) {
  .news-card img {
    height: 150px;
  }
  .news-body {
    padding: 1rem;
  }
}

/* Extra small devices */
@media(max-width: 400px) {
  .news-card img {
    height: 140px;
  }
}
/* =============================== */
/* QUICK LINKS SECTION */
/* =============================== */
.ql-title{
  font-size:1.4rem;
  font-weight:700;
  color:#0b2560;
}

.ql-viewall{
  font-size:.9rem;
  font-weight:600;
  color:#000000;
  text-decoration:none;
}
.ql-viewall:hover{
  text-decoration:underline;
}

.ql-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:1rem 1.2rem;
  display:flex;
  gap:1rem;
  align-items:flex-start;
  height:100%;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  transition:.25s ease;
}

.ql-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(0,0,0,0.12);
}

.ql-card h6{
  font-size:1rem;
  font-weight:700;
  color:#0b2545;
  margin-bottom:.2rem;
}

.ql-card p{
  font-size:.85rem;
  color:#6b7280;
  margin:0;
}

/* Icon design */
.ql-icon{
  width:50px;
  height:50px;
  border-radius:50%;
  background:#f5f7ff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:1.3rem;
  color:#3b82f6;
  flex-shrink:0;
}

/* Responsive icons */
@media(max-width:480px){
  .ql-card{ padding:1rem; }
  .ql-icon{ width:45px;height:45px;font-size:1.1rem; }
}

/* =============================== */
/* QUOTE SECTION */
/* =============================== */



.quote-img {
    width: 100%;
    max-width: 320px;
    height: 350px;
    border-radius: 12px;
    margin-left: 50px;
}

.quote-mark {
    font-size: 60px;
    color: #ff6a00;
    line-height: 1;
    margin-bottom: 10px;
}

.quote-text {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #1f2d3d;
    font-style: italic;
    max-width: 700px;
}

.quote-author {
    font-size: 1rem;
    color: #000;
}

.quote-role {
    margin-top: -5px;
    font-size: 0.9rem;
}
@media (max-width: 767px) {
  .quote-text {
    font-size: 1.2rem;
    text-align: center;
  }
  .quote-mark {
    text-align: center;
    font-size: 50px;
  }
  .quote-author, .quote-role {
    text-align: center;
  }
}


/* =============================== */
/* GOVERNMENT INITIATIVES */
/* =============================== */

/* TITLE */
.govt-title{
  font-size:1.7rem;
  font-weight:700;
  color:rgb(0, 0, 139);
}

.govt-sub{
  font-size:.95rem;
  color:#6b7280;
}

/* CARD */
.govt-card{
  background:#ffffff;
  border-radius:14px;
  border:1px solid #e5e7eb;
  overflow:hidden;
  height:360px;              /* FIXED CARD HEIGHT */
  display:flex;
  flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
  transition:.25s ease;
}

.govt-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(0,0,0,0.12);
}

/* IMAGE */
.govt-img{
  width:100%;
  height:160px;              /* FIXED IMAGE HEIGHT */
  object-fit:cover;          /* Clean image fit */
  background:#f7faff;
}

/* BODY */
.govt-body{
  padding:1.3rem;
  flex-grow:1;               /* Fills remaining space */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* TITLE TEXT */
.govt-body h6{
  font-size:1rem;
  font-weight:700;
  color:#08152a;
  margin-bottom:.4rem;
  min-height:40px;           /* FIXED HEIGHT for title */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PARAGRAPH TEXT */
.govt-body p{
  font-size:.85rem;
  color:#526276;
  margin:0;
  min-height:45px;           /* FIXED HEIGHT for description */
  display:flex;
  align-items:center;
  justify-content:center;
}


/* ======================================
   📱 EXTRA SMALL (XS) — Mobile <576px
====================================== */
@media (max-width: 575.98px) {
    .govt-img {
        height: 150px;
    }
    .govt-body {
        padding: 14px;
    }
    .govt-body h6 {
        font-size: 0.95rem;
    }
    .govt-body p {
        font-size: 0.85rem;
    }
}



/* ======================================
   📱 SMALL (SM) — 576px to 767px
====================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    .govt-img {
        height: 160px;
    }
    .govt-body {
        padding: 15px;
    }
}



/* ======================================
   📲 MEDIUM (MD) — Tablets 768px to 991px
====================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .govt-img {
        height: 170px;
    }
}



/* ======================================
   💻 LARGE (LG) — Laptops 992px to 1199px
====================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .govt-img {
        height: 180px;
    }
}



/* ======================================
   🖥️ EXTRA LARGE (XL) — 1200px to 1399px
====================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .govt-img {
        height: 190px;
    }
}



/* ======================================
   🖥️💨 XXL — Ultra-Wide Screens ≥1400px
====================================== */
@media (min-width: 1400px) {
    .govt-img {
        height: 200px;
    }
}

/* =============================== */
/* CONNECT WITH US */
/* =============================== */

.connect-section{
  background:#f8fafc;
  padding:4rem 0;
}

.connect-title{
  font-size:1.7rem;
  font-weight:700;
  color:#081452;
}

.connect-sub{
  font-size:.95rem;
  color:#6b7280;
  margin-bottom:1.5rem;
}

/* SOCIAL ICON WRAPPER */
.social-icon{
  width:70px;
  height:70px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:1.6rem;
  transition:.25s ease;
  text-decoration:none;
}

/* COLORS */
.twitter{ background:#e6f3ff; color:#1DA1F2; }
.facebook{ background:#e8f0ff; color:#1877F2; }
.instagram{ background:#ffe8ef; color:#E4405F; }
.youtube{ background:#ffecec; color:#FF0000; }
.linkedin{ background:#e5f3ff; color:#0A66C2; }

/* HOVER EFFECT */
.social-icon:hover{
  transform:translateY(-6px);
  box-shadow:0px 10px 22px rgba(0,0,0,0.15);
}

/* RESPONSIVE */
@media(max-width:576px){
  .social-icon{
    width:60px;
    height:60px;
    font-size:1.4rem;
  }
  .connect-title{
    font-size:1.4rem;
  }
}

/* =============================== */
/* MAIN FOOTER */
/* =============================== */

.main-footer{
    background:#020a80; /* deep blue */
    color:#ffffff;
}

.footer-title{
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:.8rem;
}

.footer-text{
    font-size:.9rem;
    color:#d7dbff;
}

.footer-list{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-list li{
    margin-bottom:.45rem;
    font-size:.9rem;
    color:#d7dbff;
}

.footer-list li a{
    color:#ffffff;
    text-decoration:none;
}

.footer-list li a:hover{
    text-decoration:underline;
}

/* DIVIDER */
.footer-divider{
    border-color:rgba(255,255,255,0.15);
    margin-top:2rem;
}

/* COPYRIGHT */
.footer-copyright{
    color:#d7dbff;
    font-size:.85rem;
}

.footer-note{
    color:#bdc9ff;
    line-height:1.4;
}

/* ICONS */
.footer-list i{
    margin-right:6px;
    color:#aad1ff;
}

/* =============================== */
/* RESPONSIVE */
/* =============================== */

@media(max-width:768px){
    .footer-title{
        margin-top:1.5rem;
    }
}

@media(max-width:576px){
    .footer-note{
        font-size:.78rem;
    }
    
    .main-footer .col-md-4,
    .main-footer .col-md-2,
    .main-footer .col-md-3{
        margin-bottom:1.5rem;
    }
    
    .footer-title{
        margin-top:0;
    }
}

/* Additional Mobile Optimizations */
@media(max-width:480px){
    .container{
        padding-left:1rem;
        padding-right:1rem;
    }
    
    .utility-bar{
        display:none;
    }
    
    .govt-bar .container{
        font-size:.7rem;
    }
    
    .ipa-header img{
        width:40px;
    }
}
/* ============================
   ABOUT PAGE BANNER
============================ */
.about-banner {
    background: #062049;
    
}
.dark-mode .about-banner {
    background: #0d2342;
    
}

/* =============================== */
/* ABOUT PAGE — SIDEBAR & CONTENT */
/* =============================== */

/* Sidebar container */
.about-sidebar {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
}

/* Sidebar title */
.about-sidebar p {
    font-size: .9rem;
    color: #1f2d3d;
}

/* Sidebar menu */
.about-menu li {
    margin-bottom: 6px;
}

.about-menu li a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .9rem;
    color: #1a3a5a;
    font-weight: 500;
    background: transparent;
}

.about-menu li.active a {
    background: #e8f0ff;
    color: #002f82;
    font-weight: 600;
}

.about-menu li a:hover {
    background: #f3f6fa;
}

/* Sidebar chevron icon style */
.about-menu li a::before {
    
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .7rem;
    margin-right: 6px;
    opacity: .7;
}

/* Related Links box */
.related-links {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
}

.related-links h6 {
    font-size: .95rem;
}

.related-menu li a {
    font-size: .9rem;
    display: block;
    padding: 4px 0;
    color: #0b3a6f;
}

.related-menu li a:hover {
    text-decoration: underline;
}

/* RIGHT SIDE CONTENT */
.about-section p {
    font-size: .95rem;
    line-height: 1.6;
    color: #2c3e50;
}

/* IMAGE STYLE */
.about-section img {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Milestones box */
.milestones-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.milestones-list {
    font-size: .9rem;
    color: #334155;
    margin-left: 20px;
}

.milestones-list li {
    margin-bottom: 6px;
}

/* =============================== */
/* SPACING + LAYOUT */
/* =============================== */

.about-section h4 {
    color: #0b1d42;
    font-weight: 700;
}

/* Fix alignment spacing */
.about-section .row {
    align-items: flex-start;
}

.about-section .col-md-7 p {
    padding-right: 20px;
}

/* =============================== */
/* DARK MODE SUPPORT */
/* =============================== */

.dark-mode .about-sidebar,
.dark-mode .related-links,
.dark-mode .milestones-box {
    background: #131b2f;
    border-color: rgba(255,255,255,0.12);
}

.dark-mode .about-sidebar p,
.dark-mode .about-menu li a,
.dark-mode .related-links h6,
.dark-mode .related-menu li a,
.dark-mode .about-section p,
.dark-mode .milestones-list li {
    color: #d8e2ff !important;
}

.dark-mode .about-menu li.active a {
    background: rgba(255,255,255,0.1);
    color: #fff !important;
}

.dark-mode .about-menu li a:hover {
    background: rgba(255,255,255,0.05);
}

.dark-mode .milestones-box {
    background: #0f172a;
}

.dark-mode .about-section img {
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}

/* ========================================= */
/* LOCATION SECTION */
/* ========================================= */
.location-section p {
    font-size: .96rem;
    color: #526276;
}

.location-map-box iframe {
    border-radius: 12px;
}

/* Info boxes */
.loc-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}
.dark-mode .loc-box {
    background: #131b2f;
    border-color: rgba(255,255,255,0.15);
}

.loc-box h6 {
    color: #0b2545;
}
.dark-mode .loc-box h6 {
    color: #ffffff;
}

.loc-box p,
.loc-box li {
    color: #526276;
}
.dark-mode .loc-box p,
.dark-mode .loc-box li {
    color: #d7e1ff;
}

.loc-box a {
    font-size: .9rem;
}

/* Mobile spacing */
@media(max-width:768px){
    .location-map-box iframe {
        height: 300px;
    }
}
/* ============================= */
/* KEY OFFICIALS */
/* ============================= */

.official-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: .25s ease;
}

.official-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

/* Circle initials */
.official-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #062049;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Role styling */
.official-role {
    color: #6b7280;
    font-size: .9rem;
    margin-bottom: .5rem;
}

.official-text {
    font-size: .88rem;
    color: #4b5563;
}

/* DARK MODE */
.dark-mode .official-card {
    background: #131b2f;
    border-color: rgba(255,255,255,0.15);
}

.dark-mode .official-role {
    color: #d0d4dc;
}

.dark-mode .official-text {
    color: #cdd6ff;
}

.dark-mode .official-avatar {
    background: #5ea5ff;
    color: #000;
}
/* ============================= */
/* VISION & MISSION */
/* ============================= */

.vision-box {
    background: #eaf1ff;
    border: 1px solid #d7e3ff;
}

.mission-card {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
}

.mission-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #062049;
    color: #fff;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.mission-text {
    font-size: .9rem;
    margin: 0;
}

/* Core Values Box */
.values-box {
    background: #f8fafc;
    border: 1px solid #e6ecf5;
}

.value-card {
    background: #ffffff;
    border: 1px solid #e6e6e6;
}

.value-text {
    font-size: .85rem;
    color: #6b7280;
}

/* ============================= */
/* DARK MODE */
/* ============================= */

.dark-mode .vision-box {
    background: #1c2945;
    border-color: rgba(255,255,255,0.15);
    color: #fff;
}

.dark-mode .mission-card {
    background: #131b2f;
    border-color: rgba(255,255,255,0.12);
}

.dark-mode .mission-number {
    background: #5ea5ff;
    color: #000;
}

.dark-mode .mission-text {
    color: #dce4ff;
}

.dark-mode .values-box {
    background: #0f172a;
    border-color: rgba(255,255,255,0.12);
}

.dark-mode .value-card {
    background: #131b2f;
    border-color: rgba(255,255,255,0.10);
}

.dark-mode .value-text {
    color: #cbd5e1;
}
/* Make all sections after About shift right (not under sidebar) */
.location-section,
.officials-section,
.vision-mission-section {
    padding-left: 30%;   /* same width as sidebar */
}

/* RESPONSIVE FIX — on mobile remove left padding */
@media (max-width: 991px) {
    .location-section,
    .officials-section,
    .vision-mission-section {
        padding-left: 0 !important;
    }
}
/* Sticky Sidebar */
.about-sidebar,
.related-links {
    position: sticky;
    top: 130px;   /* Adjust based on your header height */
    z-index: 10;
}

/* Keep both boxes combined as one tall sticky section */
.col-lg-3 {
    height: max-content;
}

/* Mobile: disable sticky */
@media (max-width: 991px) {
    .about-sidebar,
    .related-links {
        position: static !important;
        top: auto !important;
    }
}
/* =============================== */
/* ports page */
/* =============================== */
.major-ports-section .section-title {
  font-size: 1.8rem;
}

.major-ports-section .section-sub {
  color: #6b7280;
  margin-bottom: 30px;
  font-size: 1rem;
}

/* ============================================= */
/* PORT CARD STYLE (Exact screenshot)            */
/* ============================================= */

.port-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.port-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.port-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.port-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.port-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.port-state {
  font-size: .85rem;
  color: #6b7280;
  margin-bottom: 8px;
}

.port-desc {
  font-size: .85rem;
  color: #374151;
  flex: 1;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* BUTTON EXACTLY LIKE SCREENSHOT */
.view-btn {

 max-width: fit-content;
  font-size: .85rem;
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #1e3a8a;
  font-weight: 600;
  background: white;
  text-decoration: none;
}

.view-btn:hover {
  
  background: #eef2ff;
  border-color: #1e3a8a;
}

/* ============================================= */
/* PORT STATISTICS BOXES                         */
/* ============================================= */

.stats-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  text-align: left;
}

.stats-number {
  font-size: 2rem;
  font-weight: 700;
  color: #0a2a8a;
}

.stats-label {
  margin: 0;
  font-size: .9rem;
  color: #6b7280;
}

/* Responsive Stats Text */
@media(max-width:768px){
  .stats-number { font-size: 1.6rem; }
}

/* Responsive */
@media(max-width: 768px) {
  .port-img {
    height: 160px;
  }
}

/* DARK MODE */
.dark-mode .port-card {
  background: #0f172a;
  border-color: #1e293b;
}

.dark-mode .port-title {
  color: #93c5fd;
}

.dark-mode .port-state {
  color: #60a5fa;
}

.dark-mode .port-desc {
  color: #cbd5e1;
}

.dark-mode .port-btn {
  border-color: #60a5fa;
  color: #60a5fa;
}

.dark-mode .port-btn:hover {
  background: #60a5fa;
  color: #0f172a;
}

.dark-mode .section-sub {
  color: #cbd5e1;
}

/* ===========================
   LEGEND
=========================== */
.legend li {
    list-style: none;
    font-size: 14px;
    margin-bottom: 4px;
}

.legend .dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 50%;
}

.dot.blue { background: #3b82f6; }
.dot.orange { background: #f97316; }
.dot.yellow { background: #facc15; }
.dot.red { background: #ef4444; }


/* ===========================
   TABLE
=========================== */
.cargo-table th {
    background: #f8fafc;
    font-size: 14px;
    white-space: nowrap;
}

.cargo-table td {
    vertical-align: middle;
    font-size: 14px;
}


/* ===========================
   DARK MODE
=========================== */
body.dark-mode {
    background: #0f172a;
    color: #e2e8f0;
}

body.dark-mode .cargo-sidebar,
body.dark-mode .stat-main-box,
body.dark-mode .stat-card,
body.dark-mode .highlight-box {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .cargo-menu li a,
body.dark-mode .report-menu li a {
    color: #e2e8f0;
}

body.dark-mode .cargo-menu li a:hover,
body.dark-mode .report-menu li a:hover {
    background: #334155;
}

body.dark-mode .active a {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

body.dark-mode .chart-placeholder {
    background: #1e293b;
    color: #94a3b8;
}

body.dark-mode .cargo-table th {
    background: #1e293b;
    color: #e2e8f0;
}

body.dark-mode .cargo-table td {
    color: #e2e8f0;
}

body.dark-mode .small-box {
    background: #1e293b !important;
}

body.dark-mode .bg-light-green {
    background: #0f3b14 !important;
}




/* Custom CSS for Sticky Sidebar */
.sidebar-sticky {
    /* Essential for sticky behavior */
    position: -webkit-sticky; /* Safari compatibility */
    position: sticky;
    
    /* The distance from the top of the viewport where it sticks */
    /* Adjust this value if you have a fixed navigation bar (e.g., 80px) */
    top: 20px; 
    
    /* Optional: Adds a z-index to ensure it slides over other content if needed */
    z-index: 100;
}

/* Mobile Optimization: Disable sticky on small screens */
@media (max-width: 991.98px) {
    .sidebar-sticky {
        position: relative;
        top: 0;
    }
}


.vision-box {
    background:#f0f5fa;               /* soft light blue */
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #dbe7ff;
}

.vision-mission-section h6{
 color: #1a2c50;
    font-weight: 900;
    font-size: larger;
    line-height: 2.5;
}


.vision-mission-section h4 {
    color: #1a2c50;
    font-weight: 900;
}

.mission-card {
    max-width: 490px;         /* smaller width */
    margin: 0 auto;           /* center the cards */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;   /* stack number + text */
    align-items: flex-start;
    gap: 12px;
}


.mission-number {
    width: 40px;
    height: 40px;
    background: #f0f5fa;
    color: #1f3a71;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
}

.mission-text {
    margin: 0;
    color: #2c3e50;
    font-size: 1rem;
    line-height: 1.4;
}
.mission-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 30px;
}


@media (max-width: 576px) {
    .mission-card {
        flex-direction: row;
        align-items: flex-start;
    }
}

.value-card{
  background: #f9fafb;
}

/* Footer background */
.ipa-footer {
  background-color: #00008B;
  color: #fff;
}

/* Wrapper */
.footer-logo-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Row: Logo + Heading */
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo */
.footer-emblem {
  width: 48px;
  height: auto;
  background: #ffffff;
  padding: 4px;

}

/* Title exactly like screenshot */
.footer-title-text {
  margin: 0;
  color: #ffffff;
  font-size: 1.2rem;
}

/* Description exactly below the heading */
.footer-description {
  margin: 0;
  margin-left: 2px; /* align text under title, not under image */
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 310px;
}


/* Standard footer text */
.footer-text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

/* List styling */
.footer-list {
  list-style: none;
  padding: 0;
}
.footer-list li {
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.footer-list a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}
.footer-list a:hover {
  color: #cbd9ff;
}



/* Icons */
.icon {
  color: #c9d8ff;
}

/* Divider */
.footer-divider {
  border-color: rgba(255,255,255,0.15);
  margin-top: 30px;
  margin-bottom: 20px;
}

/* Copyright */
.footer-bottom-row {
  margin-top: 10px;
}

.footer-copy {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}

.footer-bottom-links a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-bottom-links a:hover {
  text-decoration: underline;
}



/* Badge rectangles */
.badge-row {
  display: flex;
  justify-content: center;
  gap: 0px;
  margin-top: 20px;
}

.badge-img {
  height: 40px;      
  width: auto;
  object-fit: contain;
  padding: 4px 10px;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}


/* Last updated */
.footer-last {
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Responsive spacing */
@media (max-width: 768px) {
  .badge-row {
    flex-direction: column;
    gap: 10px;
  }
}
/* Quote Section */
.quote-section {
  background: #ffffff;
}

.quote-img {
  width: 100%;
  max-width: 330px;
  border-radius: 12px;
  object-fit: cover;
}

.quote-right {
  padding-left: 0 !important;
}

/* Quote mark styling */
.quote-mark {
  font-size: 60px;
  line-height: 1;
  color: #ff6b1a;
  font-weight: 900;
  margin-bottom: 5px;
  text-align: left; /* ensure left aligned always */
}

/* Quote text */
.quote-text {
  font-size: 1.85rem;
  font-style: italic;
  color: #2a3a4a;
  line-height: 1.5;
}

/* Author & Role */
.quote-author {
  font-size: 1.1rem;
  color: #000;
}

.quote-role {
  font-size: 0.95rem;
}

/* ========================= */
/* 📱 MOBILE RESPONSIVE FIXES */
/* ========================= */
@media (max-width: 768px) {

  /* Center IMAGE */
  .quote-img {
    max-width: 250px;
    margin: 0 auto;
    display: block;
  }

  /* Two-column becomes stacked */
  .quote-section .row {
    text-align: center;
  }

  /* Quote TEXT centered */
  .quote-right {
    text-align: center !important;
    padding: 0 !important;
  }

  /* BUT quote mark stays aligned left */
  .quote-mark {
    text-align: left !important;
    width: fit-content;
    margin: 15px auto 5px auto;  /* centers block but keeps icon left */
  }

  .quote-text {
    font-size: 1.45rem;
  }
}

/* ========================= */
/* STATISTICS SECTION */
/* ========================= */


/* FULL WIDTH TOP BAR */
.stats-header {
    background: #13294B;   /* exact navy blue background */
    width: 100%;
}

/* TITLE */
.stats-title {
    color: #ffffff;
    font-size: 2.1rem;
    font-weight: 700;
    margin: 0;
}

/* SUBTITLE */
.stats-subtitle {
    margin: 0;
    margin-top: 6px;
    font-size: 1rem;
    color: #d0d7e3;  /* light gray-blue, exact from screenshot */
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .stats-title {
        font-size: 1.7rem;
    }
    .stats-subtitle {
        font-size: .95rem;
    }
}
.cargo-sidebar {
    background: #ffffff;
    border: 1px solid #e5e9f2;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
}

.cargo-menu li {
    margin-bottom: 6px;
}

.cargo-menu li a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1f2d42;
    text-decoration: none;
}

.cargo-menu li.active a {
    background: #e8f0fb;
    font-weight: 600;
    color: #122c53;
}

.cargo-menu li a:hover {
    background: #f0f4fa;
}

.report-menu li a {
    font-size: 0.9rem;
    text-decoration: none;
    color: #124a9b;
}

.report-menu li a:hover {
    text-decoration: underline;
}
.stat-main-box {
    background: #ffffff;
    border: 1px solid #e5e9f2;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}

.chart-placeholder {
    height: 260px;
    background: #f4f6f9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c7a8c;
    font-size: 0.95rem;
}
.small-box {
    background: #f7f9fc;
    border: 1px solid #e5e9f2;
    border-radius: 10px;
}

.bg-light-green {
    background: #e8f7ef !important;
}
/* MAIN CARD */
.stat-card-full {
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
    max-height: 550px;
}

/* CHART TITLE */
.chart-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2b4c;
}

.chart-icon {
    color: #4a657f;
    font-size: 1.1rem;
}

/* CHART BOX */
.chart-box {
    height: 250px;
    background: #f4f6fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #778197;
    font-size: 0.95rem;
}

/* ========================== */
/*   PIE CHART LEGEND LIST    */
/* ========================== */

.legend-list {}

.legend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 2px;
    font-size: 0.95rem;
    border-bottom: 1px solid #f3f5f8;
}

.legend-row:last-child {
    border-bottom: none;
}

.legend-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-value {
    font-weight: 700;
    color: #1a2b4c;
}

/* DOT COLORS */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dot.blue  { background: #0d6efd; }
.dot.green { background: #31c48d; }
.dot.yellow { background: #facc15; }
.dot.red   { background: #f43f5e; }

/* ========================== */
/*     YOY GROWTH LIST        */
/* ========================== */

.growth-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 2px;
    font-size: 0.95rem;
    border-bottom: 1px solid #f3f5f8;
}

.growth-row:last-child {
    border-bottom: none;
}

.growth-value {
    font-weight: 700;
    color: #1a2b4c;
}

/* Performance Row */
.performance-row {
    margin-top: 10px;
}

.highlight-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
    border: #e5e7eb 1px solid; /* SAME HEIGHT ALWAYS */
}

.highlight-box h3 {
    font-size: 2rem;
    color: rgb(38, 72, 111);
}

.highlight-box p {
    line-height: 1.3;
}




.cargo-table {
    border: 1px solid #e5e9f2;
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.92rem;
}

.cargo-table thead {
    background: #f1f4f9;
    font-weight: 600;
}

.cargo-table th,
.cargo-table td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #e7ebf2;
}

.cargo-table tbody tr:hover {
    background: #f9fbff;
}
.btn-outline {
  border: 1px solid rgb(38, 72, 111);
  color: rgb(38, 72, 111);
    border-radius: 6px;
    font-size: 0.9rem;
    padding: 8px 20px;
}
.btn-outline:hover {
   border: 1px solid rgb(38, 72, 111);
    background: rgb(237, 238, 238);
    color: rgb(14, 33, 54);
}
.port-wise{
  font-size: 1.2rem;
  font-weight: 600;

}






.stats-box {
    background: #ffffff;
    border: 1px solid #ffffff;
    height: 90px; /* 🔥 FIXED equal height */
    border-radius: 10px;
    transition: 0.2s ease;
}

.stats-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.stats-icon {
    font-size: 26px;
    color: #0c3b7b;
    opacity: 0.9;
    margin-top: 4px;
}

.stats-title {
    font-size: 14px;
    margin-bottom: 4px;
    color: #6b7280;
}

.stats-value {
    font-size: 20px;
    font-weight: 700;
    color: #0c2d56;
}

/* ----------------------------- */
/* CONTACT PAGE */
/* ----------------------------- */

/* CONTACT PAGE EXACT DESIGN */
.ipa-contact-section {
  background: #ffffff;
}

.contact-info-block {
  position: relative;
  padding-left: 55px;
}

.icon-circle {
  width: 30px;
  height: 30px;
  background: #eaf1ff;
  border-radius: 50%;
  color: #3b5998;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 1rem;
}

.contact-input {
  border: 1px solid #ccd2da !important;
  font-size: 0.9rem;
}

.contact-input:focus {
  border-color: #3a66c3 !important;
  box-shadow: 0 0 0 2px rgba(58, 102, 195, 0.15);
}

.contact-form-box {
  border: 1px solid #e1e4e9;
}

.dept-box {
  background: #F9FAFB;
  border: 1px solid #e1e4e9;
}

.dept-item {
  margin-bottom: 15px;
  font-size: 0.95rem;
  color: #526276;
}
.send-btn {
  background-color: #26486F !important;
  border-color: #26486F !important;
  color: #fff !important;
  font-weight: 600;
}

.send-btn:hover {
  background-color: #1f3a59 !important;
  border-color: #1f3a59 !important;
}

.icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #d9e5f1;          /* Light blue background */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.icon-circle i {
  font-size: 20px;              /* Bigger icon */
  color: #26486F;               /* Brand color */
}



/* ============================
   RESPONSIVE — CONTACT PAGE
   ============================ */

/* Tablets */
@media (max-width: 992px) {
  .ipa-contact-section .row {
    flex-direction: column;
  }

  .contact-form-box {
    margin-top: 10px;
  }

  .dept-box {
    margin-top: 20px;
  }
}

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

  /* Reduce spacing */
  .ipa-contact-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .contact-info-block {
    margin-bottom: 25px;
  }

  .contact-info-block h6 {
    font-size: 1rem;
  }

  .contact-info-block p {
    font-size: 0.9rem;
  }

  /* Icon size adjustments */
  .icon-circle {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    top: 2px;
  }

  /* Form input spacing */
  .contact-input {
    font-size: 0.85rem;
    padding: 7px 10px;
  }

  .contact-form-box {
    padding: 20px;
  }

 

  .contact-form-box h6 {
    font-size: 1rem;
  }

  /* Department Box */
  .dept-box {
    padding: 18px;
  }

  .dept-item {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }

  /* Button smaller */
  .contact-form-box button {
    font-size: 0.9rem;
    padding: 10px;
  }
}

/* Very small screens (330px–400px) */
@media (max-width: 400px) {
  .icon-circle {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
  }

  h3.fw-bold {
    font-size: 1.2rem;
  }

  .contact-form-box {
    padding: 16px;
  }

  .contact-input {
    font-size: 0.8rem;
  }

  .dept-item {
    font-size: 0.82rem;
  }
}

/* ============================= */
/* CONTACT PAGE — MAP SECTION    */
/* ============================= */

.contact-map-section h4 {
  font-size: 1.8rem;
  font-weight: 700;
}

.map-container {
  width: 100%;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================= */
/* RESPONSIVE BREAKPOINTS       */
/* ============================= */

@media (max-width: 992px) {
  .map-container {
    height: 360px;
  }
}

@media (max-width: 768px) {
  .contact-map-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .map-container {
    height: 300px;
  }

  .contact-map-section h4 {
    font-size: 1.5rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .map-container {
    height: 260px;
  }
}

.contact-map-section{
  background: #F9FAFB;
}



/* RTI Section */
.rti-section {
  background: #ffffff;
}

/* RTI Content Box */
.rti-box {
  background: #f3f7fb; /* very light blue */
  border-radius: 10px;
}

/* RTI Icon */
.rti-icon {
  width: 55px;
  height: 55px;
  background: #d9e5f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #26486F;
  flex-shrink: 0;
}

/* RTI Officers Section */
.rti-officers-section {
  background: #ffffff;
}

/* Card wrapper */
.rti-officer-card {
  background: #ffffff;
  border: 1px solid #e6ecf2;
  border-radius: 10px;
  transition: 0.2s ease-in-out;

  /* IMPORTANT: equal height behavior */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rti-officer-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
}

/* Ensures text never overflows */
.rti-officer-card p,
.rti-officer-card a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.rti-link {
  color: #1a4f8b;
  text-decoration: none;
}

.rti-link:hover {
  text-decoration: underline;
}

/* Typography */
.rti-officer-card p {
  font-size: 0.95rem;
}
.rti-officer-card strong {
  font-weight: 500;
}
.rti-officer-card h5 {
  font-size: 1.1rem;
  min-height: 48px; /* keeps headings consistent */
}

/* RESPONSIVE FIXES */
@media (max-width: 992px) {
  .rti-officer-card {
    height: auto;               /* prevents weird stretching */
    padding: 20px !important;
  }
}

@media (max-width: 768px) {
  .rti-officers-section h3 {
    text-align: left;
  }
}

@media (max-width: 576px) {
  .rti-officer-card p,
  .rti-officer-card strong {
    font-size: 0.92rem;
  }
}


/* ========================================================= */
/* OUTER BIG BOX */
/* ========================================================= */
.proactive-box {
  background: #ffffff;
  border: 1px solid #e3e9ef;
  border-radius: 12px;
  padding: 24px;
}

/* ========================================================= */
/* CATEGORY HEADER ICON */
/* ========================================================= */
.category-icon {
  width: 50px;
  height: 50px;
  background: #d9e5f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon i {
  font-size: 24px;
  color: #26486F;
}

/* ========================================================= */
/* INNER DOCUMENT CARD */
/* ========================================================= */
.rti-inner-card {
  background: #F9FAFB;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  transition: 0.2s ease-in-out;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 20px;
  width: 100%;
}



/* Left side */
.rti-inner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* Right side */
.rti-inner-right {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

/* ========================================================= */
/* ICON */
/* ========================================================= */
.rti-doc-icon {
  width: 42px;
  height: 42px;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rti-doc-icon i {
  color: #26486F;
  font-size: 20px;
}

/* ========================================================= */
/* TEXT */
/* ========================================================= */
.rti-doc-title {
  font-size: 1rem;
  font-weight: 600;
  color: #336294;
  line-height: 1.3;
}

.file-size-text {
  font-size: 0.9rem;
  color: #6b7b8b;
}

/* ========================================================= */
/* DOWNLOAD BUTTON */
/* ========================================================= */
.download-btn {

  background: none;
  border: none;
  color: #1a2f4a;
  padding: 6px 10px 6px 25px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.download-btn:hover {
  background: #f0f5fa;
}

.download-btn i {
  font-size: 18px;
}

/* ========================================================= */
/* RESPONSIVE FIX — KEEP ROW LAYOUT ALWAYS */
/* ========================================================= */
@media (max-width: 768px) {

  .rti-inner-card {
    flex-direction: row;
    align-items: flex-start;
  }

  .rti-inner-left {
    flex: 1;
  }

  .rti-inner-right {
    flex-shrink: 0;
  }

  .rti-doc-title {
    font-size: 0.95rem;
  }
}

/* ========================================================= */
/* EXTRA SMALL DEVICES */
/* ========================================================= */
@media (max-width: 480px) {

  /* Smaller text and icons */
  .rti-doc-title {
    font-size: 0.78rem;
  }

  .file-size-text {
    font-size: 0.72rem;    /* Smaller MB text */
  }

  /* Smaller rounded file icon */
  .rti-doc-icon {
    width: 32px;
    height: 32px;
  }

  .rti-doc-icon i {
    font-size: 16px;
  }

  /* Smaller download button */
  .download-btn {
    padding: 2px 6px;
    border-radius: 4px;
  }

  .download-btn i {
    font-size: 14px;    /* Smaller download icon */
  }
}
/* ---------------------------- */
/* Annual Reports Card          */
/* ---------------------------- */

.annual-card {
  background: #ffffff;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  transition: 0.2s;
  height: 100%;               /* <-- Ensures equal heights */
  display: flex;
  flex-direction: column;     /* Keeps button at bottom */
}

.annual-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}

.annual-card h5 {
  font-size: 1.1rem;
  color: #1a2f4a;
}

.annual-card p {
  font-size: 0.95rem;
  line-height: 1.45;
  flex-grow: 1;               /* <-- Makes text area flexible */
}

/* BUTTON */
.annual-btn {
  background: #26486F;
  border: none;
  color: #ffffff;
  padding: 12px 0;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.2s ease-in-out;
}

.annual-btn:hover {
  background: #1c3250;
}

/* ---------------------------- */
/* RESPONSIVE DESIGN */
/* ---------------------------- */

@media (max-width: 768px) {

  .annual-card {
    padding: 20px;
  }

  .annual-card h5 {
    font-size: 1rem;
  }

  .annual-card p {
    font-size: 0.9rem;
  }

  .annual-btn {
    padding: 10px 0;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {

  .annual-card {
    padding: 18px;
  }

  .annual-card h5 {
    font-size: 0.95rem;
  }

  .annual-btn {
    padding: 9px 0;
    font-size: 0.9rem;
  }
}


/* ========================================================= */
/* Tariff Box */
/* ========================================================= */
.tariff-box {
  background: #F9FAFB;
  border: 1px solid #e0e6ef;
  border-radius: 12px;
  padding: 24px;
}

/* ========================================================= */
/* HEADER — ICON + HEADING IN ONE LINE ALWAYS */
/* ========================================================= */
.tariff-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;           /* 🔥 Prevents icon or heading from breaking to next line */
  min-width: 0;
}

/* Icon */
.tariff-icon {
  width: 60px;
  height: 60px;
  background: #d9e5f1;
  border-radius: 50%;
  flex-shrink: 0;              /* 🔥 Prevent shrinking */
  display: flex;
  align-items: center;
  justify-content: center;
}

.tariff-icon i {
  font-size: 28px;
  color: #26486F;
}

/* Heading (to stay on same line) */
.tariff-heading {
  font-size: 1.55rem;
  font-weight: 700;
  color: #1a2f4a;
  margin: 0;
  white-space: nowrap;         /* 🔥 Forbidden to break into 2 lines */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================================= */
/* TEXT BLOCK */
/* ========================================================= */
.tariff-text-block {
  flex: 1;
}

.tariff-desc {
  font-size: 0.97rem;
  line-height: 1.42;          /* 🔥 Reduced spacing between lines */
  color: #43536a;
  margin-top: 6px;
}

/* ========================================================= */
/* BUTTON */
/* ========================================================= */
.tariff-btn {
  background: #26486F;
  border: none;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tariff-btn:hover {
  background: #1c3250;
}

/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

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

  .tariff-icon {
    width: 50px;
    height: 50px;
  }

  .tariff-icon i {
    font-size: 22px;
  }

  .tariff-heading {
    font-size: 1.25rem;     /* 🔥 Keep in one line */
  }
}

/* MOBILE VIEW */
@media (max-width: 480px) {

  .tariff-icon {
    width: 42px;
    height: 42px;
  }

  .tariff-icon i {
    font-size: 18px;
  }

  .tariff-heading {
    font-size: 1.05rem;     /* 🔥 Never wraps */
    white-space: nowrap;
  }

  .tariff-desc {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .tariff-btn {
    width: 100%;
    justify-content: center;
  }
}





/* Outer Card */
.vessel-box {
  background: #ffffff;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
}

/* Header Icon */
.category-icon {
  width: 48px;
  height: 48px;
  background: #d9e5f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-icon i {
  font-size: 22px;
  color: #26486F;
}

/* Each Row */
.vessel-item {
  background: #f7f9fc;
  padding: 20px 18px;
  border-radius: 8px;
  margin-bottom: 12px;
  transition: 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Titles */
.vessel-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a2f4a;
  margin-bottom: 4px;
}

.vessel-desc {
  font-size: 0.95rem;
  color: #5b6b7b;
  margin: 0;
  line-height: 1.35;
}

/* PDF Info */
.vessel-meta {
  font-size: 0.85rem;
  color: #778395;
}

/* Download Button */
.vessel-download-btn {
  background: #ffffff;
  border: 1px solid #d6dce5;
  color: #1a2f4a;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 500;
  white-space: nowrap;
  transition: 0.2s;
}

.vessel-download-btn:hover {
  background: #f2f6fa;
  border-color: #c3ccd8;
}

.vessel-download-btn i {
  margin-right: 6px;
}

/* --------------------------- */
/* RESPONSIVE FIXED VERSION    */
/* --------------------------- */

/* Tablets (KEEP BUTTON RIGHT) */
@media (max-width: 768px) {

  .vessel-item {
    flex-direction: row;      /* ❗ Keep row layout */
    align-items: flex-start;
    gap: 10px;
  }

  .vessel-item > div {
    flex: 1;                 /* content takes left space */
  }

  .vessel-download-btn {
    align-self: center;      /* ❗ stays aligned, not dropping */
  }
}

/* Phones BELOW 480px (Stack layout) */
@media (max-width: 480px) {

  .vessel-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .vessel-download-btn {
    width: 100%;
    justify-content: center;
  }

  .vessel-desc {
    font-size: 0.88rem;
  }
}


/* ========================================================= */
/* TARIFF CALCULATOR BOX                                     */
/* ========================================================= */
.tariff-calc-section{
  background: #F9FAFB;
}

.tariff-calc-box {
  background: #ffffff;
  border: 1px solid #e0e6ef;
  border-radius: 12px;
}

.tariff-calc-text {
  font-size: 0.85rem;
  color: #1c2b45;
  margin-bottom: 20px;
}

/* Button */
.tariff-calc-btn {
  display: inline-block;
  background: #1f3b63;
  color: #fff;
  padding: 10px 26px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}

.tariff-calc-btn:hover {
  background: #152945;
}

/* ========================================================= */
/* RESPONSIVE                                                */
/* ========================================================= */

@media (max-width: 768px) {
  .tariff-calc-text {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .tariff-calc-btn {
    width: 100%;
    text-align: center;
    padding: 12px;
  }
}



/* =============================== */
/* PAYMENT INFORMATION SECTION     */
/* =============================== */

.payment-box {
  background: #ffffff;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  min-height: 230px;
}

.payment-box h5 {
  font-size: 1.15rem;
  color: #1a2f4a;
  font-weight: 600;
}

.payment-list {
  padding-left: 18px;
  margin-top: 10px;
}

.payment-list li {
  font-size: 0.95rem;
  color: #2c3a4e;
  margin-bottom: 12px;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .payment-box {
    padding: 18px !important;
  }

  .payment-list li {
    font-size: 0.88rem;
    margin-bottom: 10px;
  }
}











/* TENDER HERO SECTION */
.tender-hero {
  background: #ffffff;
}

.tender-title {
  font-size: 2rem;
  color: #102a43;       /* Deep navy blue (same style as your other headings) */
  margin-bottom: 6px;
}

.tender-subtitle {
  font-size: 1rem;
  color: #5b6b7c;       /* Muted gray-blue text */
  max-width: 650px;
  line-height: 1.5;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .tender-title {
    font-size: 1.6rem;
  }
  .tender-subtitle {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .tender-title {
    font-size: 1.5rem;
  }
  .tender-subtitle {
    font-size: 0.9rem;
  }
}



/* FILTER BUTTONS */
.tender-filters {
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 4px;
}

.filter-btn {
  background: #f0f4fa;
  border: 1px solid #d4dde8;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  color: #1c2b45;
  transition: 0.2s;
  flex-shrink: 0;
}

.filter-btn:hover {
  background: #e3ecf6;
}

.filter-btn.active {
  background: #26486F;
  color: #fff;
  border-color: #26486F;
}


/* Tender Card */
.tender-card {
  background: #ffffff;
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  padding: 20px;
}

.tender-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1c2b45;
}

.tender-id {
  font-size: 0.9rem;
  color: #336294;
}

/* Status Badge */
.status-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.open {
  background: #e5f8ea;
  color: #1e8b42;
}

/* Meta details */
.meta-label {
  color: #6c7a8b;
  font-size: 0.85rem;
  margin-bottom: 0;
  line-height: 1.1;
}

.meta-value {
  font-size: 1rem;
  font-weight: 600;
  color: #1c2b45;
  margin-top: 2px;
}

/* Documents */
.doc-heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.doc-box {
  background: #F9FAFB;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #eef2f6;
  margin-bottom: 10px;
}

.doc-box i {
  font-size: 1.1rem;
  color: #1c2b45;
}

.doc-size {
  font-size: 0.8rem;
  color: #6c7a8b;
}

/* Download Button */
.download-btn {
  background: none;
  padding: 6px 10px 6px 25px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
  border: none;
}

.download-btn:hover {
  background: #eef3f8;
}

/* View Details Button */
.view-btn {
  background: none;
  color: #26486F;
  border: 1px solid #26486F;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 500;
  transition: 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.view-btn i {
  transition: transform 0.2s ease;
  font-size: 1.2rem;
}

.view-btn:hover {
  background: #F9FAFB;
  color: #1c3250;
  border-color: #1c3250;
}

.view-btn:hover i {
  transform: translateX(3px);
}


/* =============== RESPONSIVE =============== */
@media (max-width: 992px) {
  .tender-title {
    font-size: 1.05rem;
  }

  .meta-label,
  .meta-value {
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {

  .tender-card {
    padding: 16px;
  }

  .row > div {
    margin-bottom: 10px;
  }

  .view-btn {
    width: 100%;
    justify-content: center;
  }

  .tender-title {
    font-size: 1.05rem;
  }
}

@media (max-width: 576px) {

  .tender-title {
    font-size: 1rem;
  }

  .tender-id {
    font-size: 0.8rem;
  }

  .status-badge {
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  .doc-box {
    padding: 10px 12px;
  }

  .doc-box span {
    font-size: 0.9rem;
  }
}



/* Back Button — Link Style */
.back-btn {
  background: none;
  border: none;                  /* ❗ Remove border */
  padding: 0;                    /* ❗ Remove padding */
  font-size: 0.85rem;
  font-weight: 400;
  color: #2563EB;                /* Google blue / link blue */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;    /* Looks like the screenshot */
}

.back-btn i {
  font-size: 0.75rem;
  color: #1a73e8;
}

/* Hover effect — darker blue */
.back-btn:hover {
  color: #0b57d0;
}

.back-btn:hover i {
  color: #0b57d0;
}


/* Wrapper Card */
.details-card {
  background: #ffffff;
  border: 1px solid #dfe6ee;
  border-radius: 12px;
}

/* ============================ */
/* TENDER DETAILS HEADER */
/* ============================ */

.tender-detail-header {
  margin-bottom: 1.5rem;
}

.tender-detail-title {
  font-size: 1.5rem;      /* Large like the original site */
  font-weight: 700;
  color: #0c1b33;
  margin-bottom: 10px;
}

.tender-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 14px;
  border-radius: 20px;

  font-size: 0.9rem;
  font-weight: 600;
}

/* Open status */
.tender-detail-status.open {
  background: #e8faef;
  color: #1e8b42;
}

/* Closed status */
.tender-detail-status.closed {
  background: #f6f6f6;
  color: #666;
}

.tender-detail-status i {
  font-size: 1rem;
}


/* Meta Info Boxes */
/* Meta Info Box */
.meta-box {
  background: #f9fbfd;
  border: 1px solid #e5e9f2;
  border-radius: 10px;
  height: 70px;

  /* PERFECT CENTERING */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* vertically center BOTH lines */
  align-items: flex-start;      /* keep left aligned */
  padding: 10px 16px;           /* indent exactly like design */
}

/* Text Styles */
.meta-label {
  font-size: 0.75rem;
  color: #6a778a;
  margin: 0;
}

.meta-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1b2a42;
  margin: 2px 0 0 0;           /* smaller gap */
  line-height: 1.2;
}



/* Dates */
.tender-dates i {
  font-size: 1rem;
}

.date-label {
  font-size: 0.85rem;
  color: #6a778a;
  margin-bottom: 0;
}

.date-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1b2a42;
}


/* Description Section */
/* Section title */
.section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1c2b45;
}

/* Description text */
.desc-box p {
  font-size: 0.83rem;     /* Smaller text (exact gov style) */
  line-height: 1.5;      /* Slightly tight, matches screenshot */
  color: #000;
  margin-bottom: 8px;     /* Reduced spacing */
}


/* Eligibility Items */
.eligibility-list .elig-item {
  font-size: 0.95rem;        /* same as description */
  line-height: 1.55;
  margin-bottom: 10px;       /* perfect spacing */
  color: #000;
  display: flex;
  align-items: center;
  gap: 8px;
}

.eligibility-list i {
  font-size: 1.1rem;         /* same green icon size as screenshot */
}


/* Document Rows */
.doc-item {
  background: #F5F8FC;   /* Light grey-blue row */
  padding: 18px 20px;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #e4e9f1;
}

/* Document Titles */
.doc-title {
  font-size: 0.85rem;
  color: #1c2b45;
  font-weight: 600;
}

/* File size + Type */
.doc-meta {
  font-size: 0.75rem;
  color: #6c7a8b;
}

/* File Icon */
.doc-item i {
  font-size: 1.3rem;
}

/* Download Button */
.doc-download-btn {
  background: #fff;
  border: 1px solid #d6dce5;
  padding: 8px 16px;
  font-size: 0.7rem;
  border-radius: 6px;
  color: #1c2b45;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.2s ease;
}

.doc-download-btn i {
  font-size: 0.7rem;
}

.doc-download-btn:hover {
  background: #e9eef5;
  border-color: #c7d2e2;
}

/* Responsive */
@media (max-width: 768px) {
  .doc-download-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
  }
  .doc-item {
    padding: 15px;
  }
}


/* Contact Section Box */
.contact-box {
  background: #f7f9fc;     /* very light grey-blue */
  border: 1px solid #e6ecf3;
  border-radius: 10px;
}

/* Contact Text */
.contact-box p {
  font-size: 0.85rem;
  color: #1c2b45;
  margin-bottom: 10px;
}

/* Section Title */
.section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1c2b45;
}

/* Contact Note */
.contact-note {
  font-size: 0.85rem;
  color: #d57a00;        /* orange text */
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 15px;
}

.contact-note i {
  font-size: 1.1rem;
}

/* ================================================
   GLOBAL MOBILE RESPONSIVE (≤ 768px)
================================================ */
@media (max-width: 768px) {

  /* CONTAINER PADDING FIX */
  .tender-details-section .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* BACK BUTTON */
  .back-btn {
    font-size: 0.85rem;
    padding: 6px 10px;
    gap: 5px;
  }

  /* MAIN CARD */
  .details-card {
    padding: 16px !important;
  }

  /* TENDER TITLE */
  .tender-detail-title {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  /* STATUS BADGE */
  .tender-detail-status {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 14px;
  }

  /* META GRID — STACK TO FULL WIDTH */
  .tender-meta .col-md-4 {
    width: 100%;
  }

  /* META BOX */
  .meta-box {
    height: auto;
    padding: 12px 14px;
  }

  .meta-label {
    font-size: 0.7rem;
  }

  .meta-value {
    font-size: 0.85rem;
  }

  /* DATE ITEMS (Published / Closing / Opening) */
  .tender-dates {
    flex-direction: column;
    gap: 14px;
    padding-left: 0 !important;
  }

  .tender-dates i {
    font-size: 0.9rem;
  }

  .date-label {
    font-size: 0.75rem;
  }

  .date-value {
    font-size: 0.85rem;
  }



  /* DESCRIPTION SECTION */
  .section-title {
    font-size: 1.1rem;
  }

  .desc-box p {
    font-size: 0.78rem;
    line-height: 1.45;
    margin-bottom: 6px;
  }



  /* ELIGIBILITY SECTION */
  .elig-item {
    font-size: 0.8rem;
    margin-bottom: 8px;
    align-items: flex-start;
  }

  .elig-item i {
    font-size: 1rem;
    margin-top: 2px;
  }



  /* DOCUMENT ROWS */
  .doc-item {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  .doc-title {
    font-size: 0.8rem;
  }

  .doc-meta {
    font-size: 0.7rem;
  }

  .doc-download-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  .doc-download-btn i {
    font-size: 0.8rem;
  }



  /* CONTACT BOX */
  .contact-box {
    padding: 14px !important;
  }

  .contact-box p {
    font-size: 0.8rem;
    margin-bottom: 8px;
  }

  .contact-note {
    font-size: 0.75rem;
  }

  .contact-note i {
    font-size: 1rem;
  }
}


/* ================================================
   EXTRA SMALL MOBILES (≤ 480px)
================================================ */
@media (max-width: 480px) {

  .tender-detail-title {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1rem;
  }

  .meta-box {
    padding: 10px 12px;
  }

  .meta-value {
    font-size: 0.8rem;
  }

  .doc-download-btn {
    font-size: 0.7rem;
  }

  .doc-item {
    padding: 10px;
  }
}
/* ================================= */
/* HEADER BANNER */
/* ================================= */
.services-banner {
    background: #152b49; /* exact dark navy blue */
}

.banner-subtitle {
    font-size: 1.15rem;
    color: #d8e0ee; /* light blue-grey */
    max-width: 650px;
}

/* ================================= */
/* PORT FILTER BUTTONS */
/* ================================= */
.port-btn {
    background: #ffffff;
    color: #1b2d47;
    border: 1px solid #d5e1f2;
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: 0.2s ease;
}

.port-btn:hover {
    background: #eaf1ff;
    border-color: #b7c8e6;
}

.port-btn.active {
    background: #1b365d; /* dark blue */
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.12);
}

/* ================================= */
/* INFO BAR */
/* ================================= */
.info-bar {
    background: #f1f7ff;
    padding: 16px 22px;
    border-radius: 12px;
    color: #1b2d47;
    font-size: 1rem;
}
/* ========================== */
/* SERVICE BOX */
/* ========================== */
.service-box2 {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
}

/* ========================== */
/* SERVICE CARD */
/* ========================== */
.service-card2 {
    background: #f9fbff !important;
    border: 1px solid #e8eef5;
    border-radius: 12px;
    padding: 18px;
    min-height: 90px;
    display: block !important;
    width: 100% !important;
    color: #1b2d47 !important;
}

/* TEXT FIX */
.service-card2 h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #1b2d47 !important;
}

.service-card2 p {
    font-size: 0.9rem;
    color: #6b6f7a !important;
    margin-top: 6px;
}

/* Hover */
.service-card2:hover {
    background: #eef5ff !important;
    border-color: #d2e3ff !important;
}

/* ICON FIX */
.service-icon2 {
    width: 48px;
    height: 48px;
    background: #eaf2ff;
    color: #0a2a8a;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}

/* BUTTON FIX */
.btn-primary2 {
    background: #133b77 !important;
    border: none;
    color: #ffff;
    padding: 10px 20px;
    border-radius: 8px;
}

/* ============================ */
/* Additional Services Cards */
/* ============================ */
.extra-card {
    background: #ffffff;
    transition: 0.25s ease;
}

.extra-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Icon Circle */
.extra-icon {
    width: 70px;
    height: 70px;
    background: rgb(217, 229, 241);
    border-radius: 50%;
    padding: 10px;
  
  
    font-size: 22px;
    color: #0043a8;
}

/* ============================ */
/* Service Request Blue Box */
/* ============================ */
.service-req-box1 {
    background: #f1f7ff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.req-primary {
    background: #0d2a55;
    color: white;
    padding: 10px 22px;
    font-weight: 600;
    border-radius: 8px;
}



.req-outline {
    border: 1.5px solid #0d2a55;
    padding: 10px 22px;
    font-weight: 600;
    border-radius: 8px;
    color: #0d2a55;
}

/* LIST ICONS */
.feature-list li {
    list-style: none;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.feature-list i {
    color: #1a8b2d;
    margin-right: 6px;
}

/* RELATED SERVICE CARDS */
.related-card {
    background: #ffffff;
    border: 1px solid #e7e7e7;
    transition: 0.25s;
}

.related-card:hover {
    transform: translateY(-4px);
    border-color: #d3e5ff;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.08);
}

/* BANNER IMAGE */
.service-banner img {
    height: 420px;
    object-fit: cover;
    border-radius: 12px;
}

/* LIST ICONS */
.feature-list li {
    list-style: none;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.feature-list i {
    color: #1a8b2d;
    margin-right: 6px;
}

/* RELATED SERVICE CARDS */
.related-card {
    background: #ffffff;
    border: 1px solid #e7e7e7;
    transition: 0.25s;
}

.related-card:hover {
    transform: translateY(-4px);
    border-color: #d3e5ff;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.08);
}

/* BANNER IMAGE */
.service-banner img {
    height: 240px;
    object-fit: cover;
    border-radius: 12px;
}
/* --------------------------------------------- */
/* PROJECTS — HEADING SECTION (Matches PDF)      */
/* --------------------------------------------- */

.projects-title {
  font-size: 1.75rem;     /* Same size as PDF heading */
  font-weight: 700;
  color: #1a2f4a;
  margin-bottom: 4px;
}

.projects-subtitle {
  font-size: 0.98rem;
  color: #5a6b7c;
  max-width: 650px;       /* Keeps it clean on large screens */
  line-height: 1.45;
}

/* ----------------------------- */
/* Mobile Responsive             */
/* ----------------------------- */

@media (max-width: 768px) {
  .projects-title {
    font-size: 1.45rem;
  }

  .projects-subtitle {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .projects-title {
    font-size: 1.3rem;
  }

  .projects-subtitle {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}


/* FILTER BUTTONS */
.project-filter-btn {
  background: #F0F4FA;
  border: 1px solid #d4dde8;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  color: #1c2b45;
  transition: 0.2s;
  font-size: 0.85rem;
}

.project-filter-btn:hover { background: #e3ecf6; }
.project-filter-btn.active {
  background:#26486F;
  color:#fff;
  border-color:#26486F;
}

/* PROJECT CARD */
.project-card {
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: 0.2s;
}

.project-card:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.09);
}

/* IMAGE SECTION */
.project-img-wrapper {
  position: relative;
}

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

/* STATUS BADGE */
.project-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #e8f5ff;
  color: #065187;
  padding: 5px 12px;
  font-size: 0.78rem;
  border-radius: 20px;
  font-weight: 600;
}

/* CARD BODY */
.project-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* TITLE */
.project-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #1a2f4a;
  margin-bottom: 8px;
}

/* META ROW — SAME LINE ALWAYS */
.project-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  min-height: 35px;
}

.project-meta span {
  font-size: 0.8rem;
  color: #6d7785;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* DESCRIPTION — FIXED HEIGHT TO KEEP CARDS SAME SIZE */
.project-desc {
  font-size: 0.85rem;
  color: #3b4654;
  line-height: 1.4;
  min-height: 50px;        /* ★ MAKES ALL DESCRIPTIONS SAME HEIGHT */
  margin-bottom: 14px;
}

/* PROGRESS */
.progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #6d7785;
}

.project-progress-bar {
  width: 100%;
  height: 6px;
  background: #eaeef3;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

.project-progress-bar span {
  height: 100%;
  display: block;
  background: #336294;
}

/* FOOTER → Budget + Button always same line */
.project-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-budget {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
  color: #1c2b45;
}

/* VIEW BUTTON */
.project-view-btn {
  background: #fff;
  border: 1px solid #1a2f4a;
  color: #1a2f4a;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.25s ease;
  cursor: pointer;
}

.project-view-btn:hover {
  background: #f3f6fb;
  border-color: #26486F;
  color: #26486F;
}

/* Arrow slide animation */
.project-view-btn i {
  transition: transform 0.25s ease;
}

.project-view-btn:hover i {
  transform: translateX(4px);
}

.project-budget-block {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.budget-label {
  font-size: 0.78rem;
  color: #6d7785;
  margin-bottom: 2px;
}

.project-budget {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1c2b45;
  margin: 0;
}

/* STATUS COLORS */
.project-status-badge.inprogress {
  background: #E0EEFE;
  color: #065187;
}

.project-status-badge.completed {
  background: #DCFCE7;
  color: #166534;
}

.project-status-badge.planned {
  background: #FEF9C3;
  color: #854D0E;
}

/* ---------------------------------------------------- */
/* RESPONSIVE FIX — PERFECT CARD ALIGNMENT              */
/* Applies across Desktop, Tablet, and Mobile           */
/* ---------------------------------------------------- */

/* ======================================================= */
/* DESKTOP + TABLET (≥576px → full alignment)              */
/* ======================================================= */
@media (min-width: 576px) {

  /* Title equal height */
  .project-title {
    min-height: 48px;
  }

  /* Meta row equal height */
  .project-meta {
    min-height: 40px;
  }

  /* Description equal height */
  .project-desc {
    min-height: 80px;
  }

  /* Progress label + percentage same height */
  .progress-row {
    min-height: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Progress bar matched alignment */
  .project-progress-bar {
    min-height: 10px;
    margin-bottom: 12px;
  }

  /* Footer perfectly aligned at bottom */
  .project-footer {
    margin-top: auto;
  }
}

/* ======================================================= */
/* MEDIUM SCREENS (576px → 1024px) — special tuning        */
/* ======================================================= */
@media (min-width: 576px) and (max-width: 1024px) {

  /* Adjust description so all progress bars align */
  .project-desc {
    min-height: 95px;
  }

  /* Progress bar stays aligned */
  .project-progress-bar {
    min-height: 10px;
  }
}

/* ======================================================= */
/* MOBILE (<576px) — natural height + clean spacing        */
/* ======================================================= */
@media (max-width: 575.98px) {

  /* Remove all fixed heights */
  .project-title,
  .project-meta,
  .project-desc {
    min-height: auto !important;
  }

  /* Tighter spacing */
  .project-meta {
    margin-bottom: 8px;
  }

  .project-desc {
    margin-bottom: 12px;
  }

  /* Maintain clean spacing */
  .project-progress-bar {
    margin-bottom: 12px;
  }

  /* Footer stays at bottom of each card */
  .project-footer {
    margin-top: auto;
  }
}

/* ======================================================= */
/* SMALL MOBILE (≤480px) — extra breathing room            */
/* ======================================================= */
@media (max-width: 480px) {

  .project-title {
    min-height: 54px; /* allow 2–3 lines */
  }

  .project-meta {
    min-height: 48px;
  }

  .project-desc {
    min-height: 90px;
  }
}

/* ======================================================= */
/* TABLET PORTRAIT (≤768px) — improving readability        */
/* ======================================================= */
@media (max-width: 768px) {

  /* Allow natural height for these items */
  .project-title,
  .project-meta,
  .project-desc {
    min-height: auto !important;
  }

  .project-meta {
    margin-bottom: 8px;
  }

  .project-desc {
    margin-bottom: 12px;
  }

  .project-progress-bar {
    margin-bottom: 12px;
  }

  .project-footer {
    margin-top: auto;
  }
}





/* BACK BUTTON */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: #1a73e8;
  font-weight: 500;
  text-decoration: none;
}
.back-btn:hover i { transform: translateX(-3px); }
.back-btn:hover { color: #1558c0; }


/* MAIN CARD */
.details-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e4e9ef;
  overflow: hidden;          /* ensures banner touches edges */
}

/* FULL-WIDTH IMAGE */
.project-banner-wrapper {
  width: 100%;
  height: 320px;
}
.project-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HEADER TITLE */
.project-detail-title {
  font-size: 1.65rem;
  font-weight: 700;
  color: #1a2f4a;
}

/* STATUS CHIP */
.project-detail-status {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
}

.project-detail-status.inprogress {
  background: #E0EEFE;
  color: #065187;
}

/* META ROW */
.project-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;                /* Same spacing as reference */
  margin-top: 15px;
}

.meta-item {
  display: flex;
  align-items: flex-start;   /* icon + text block align perfectly */
  gap: 5px;
}

.meta-item i {
  color: #1a73e8;
  font-size: 1.1rem;
  margin-top: 3px;          /* aligns icons vertically with text */
}

/* text inside each meta item */
.meta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.meta-label {
  font-size: 0.80rem;
  color: #6d7785;
  margin-bottom: 1px;
}

.meta-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1a2f4a;
}

/* Responsive */
@media (max-width: 768px) {
  .project-meta-list {
    gap: 20px;
    flex-direction: column;
  }
}


/* PROGRESS BAR */
.project-detail-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 6px;
  background: #eaeef3;
  overflow: hidden;
}
.project-detail-progress-bar span {
  display: block;
  height: 100%;
  background: #2a7be4;
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .project-banner-wrapper { height: 240px; }
  .project-detail-title { font-size: 1.4rem; }

  .project-meta-list {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .project-banner-wrapper { height: 190px; }
  .project-detail-title { font-size: 1.25rem; }
}

/* =========================== */
/* PROJECT OVERVIEW            */
/* =========================== */

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a2f4a;
}

.overview-text p {
  font-size: 0.83rem;
  color: #3b4654;
  line-height: 1.5;     /* 🔹 reduces vertical line spacing */
  margin-bottom: 6px;   /* 🔹 reduces space between paragraphs */
}

/* Responsive */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.2rem;
  }
  .overview-text p {
    font-size: 0.82rem;
    line-height: 1.35;
    margin-bottom: 6px;
  }
}

/* =========================== */
/* PROJECT OBJECTIVES SECTION  */
/* =========================== */

.project-objectives {
  margin-top: 24px;
}

.objectives-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Reduce spacing between lines */
}

.objective-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: #1a2f4a;
  line-height: 1.3;
}

.objective-item i {
  margin-top: 2px; /* perfect vertical alignment */
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .objective-item {
    font-size: 0.88rem;
  }
}



/* COMPACT CARD STYLE */
.component-card {
  background: #f7fbff;
  border: 1px solid #e4e9ef;
  border-radius: 8px;
  padding: 16px !important;   /* reduced from 24px */
  min-height: 90px;          /* smaller height */
}

/* Title smaller */
.component-title {
  font-size: 0.9rem;          /* reduced */
  font-weight: 600;
  color: #1a2f4a;
  margin-bottom: 4px;         /* tighter */
}

/* Description compact */
.component-desc {
  font-size: 0.78rem;         /* reduced */
  line-height: 1.3;           /* reduced line height */
  color: #3b4654;
  margin: 0;                  /* remove extra spacing */
}

/* Row spacing smaller */
.key-components .row {
  row-gap: 2px ;   /* reduced space between cards */
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .component-card {
    padding: 14px !important;
  }
  .component-title {
    font-size: 0.88rem;
  }
  .component-desc {
    font-size: 0.78rem;
  }
}



.timeline-wrapper {
  position: relative;
  padding-left: 50px; /* your layout spacing */
}

/* Vertical Line */
.timeline-wrapper::before {
  content: "";
  position: absolute;
  left: 25px; /* your line position */
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e1e5ea;
}

/* Icon centered on line */
.timeline-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #16a34a;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  left: -38px;  /* PERFECT FOR YOUR LAYOUT */
  top: 0;

  z-index: 3;
  font-size: 1rem;
}

.timeline-icon.pending-icon {
  background: #f2f4f6;
  color: #9ca3af;
}

.timeline-content {
  margin-left: 5px;
}


.timeline-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a2f4a;
  margin-bottom: 2px;
}

.timeline-date {
  font-size: 0.88rem;
  color: #6d7785;
}
/* Each timeline item */
.timeline-item {
  position: relative;
  padding-left: 0;
  margin-bottom: 5px;
  display: flex;
  align-items: flex-start;
}

/* ---------------------- */
/* PROJECT DOCUMENTS      */
/* ---------------------- */

.project-documents {
  margin-top: 40px;
}

.doc-row {
  background: #f3f7fc;                     /* light blue like screenshot */
  border: 1px solid #e4e9ef;
  border-radius: 10px;
  padding: 18px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 16px;
}

/* Left side text + icon */
.doc-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-info i {
  font-size: 1.4rem;
  color: #4a72c1;                         /* accurate doc icon color */
}

/* Titles */
.doc-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a2f4a;
}

.doc-meta {
  margin: 0;
  font-size: 0.82rem;
  color: #6d7785;
}

/* Download Button */
.doc-download-btn {
  background: #fff;
  border: 1px solid #d6dce5;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #1a2f4a;

  display: flex;
  align-items: center;
  gap: 6px;

  transition: 0.2s;
  cursor: pointer;
}

.doc-download-btn:hover {
  background: #eef2f7;
  color: #274f81;
}


/* --------------------------- */
/* PROJECT GALLERY SECTION     */
/* --------------------------- */

.project-gallery {
  margin-top: 40px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.gallery-item img {
  width: 100%;
  height: 220px;            /* Increased height */
  object-fit: cover;
  border-radius: 8px;
}

/* Tablet */
@media (max-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item img {
    height: 200px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item img {
    height: 180px;
  }
}

/* ============================ */
/* CONTACT INFORMATION SECTION  */
/* ============================ */

.contact-box {
  background: #f7fafd;              /* soft grey background */
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  padding: 25px;
  margin-top: 30px;
}

/* Contact Heading inside card */
.contact-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #1a2f4a;
}

/* Text inside */
.contact-box p {
  margin: 6px 0;
  font-size: 0.95rem;
  color: #1a2f4a;
}

.contact-box a {
  color: #1a73e8;
  text-decoration: none;
}

.contact-box a:hover {
  text-decoration: underline;
}


/* ----------------------------- */
/* RELATED PROJECTS SECTION      */
/* ----------------------------- */

.related-projects {
  margin-top: 40px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.related-card {
  
  border: 1px solid #e4e9ef;
  border-radius: 10px;
  padding: 18px 20px;
  transition: 0.25s ease;
}

.related-card:hover {
  background: #F9FAFB;
  border-color: #d4e3ff;
}

.related-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a2f4a;
  margin-bottom: 10px;
}

.related-link {
  font-size: 0.9rem;
  color: #1a73e8;
  text-decoration: none;
  font-weight: 500;
}

.related-link i {
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.related-link:hover i {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 992px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================ */
/* media section  */
/* ============================ */
.media-card,
.video-card {
    position: relative;
    cursor: pointer;
}

.media-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.media-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    border-radius: 0 0 8px 8px;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

.play-btn {
    font-size: 48px;
    color: white;
    opacity: 0.85;
}

.video-time {
    position: absolute;
    bottom: 8px;
    right: 12px;
    background: rgba(0,0,0,0.75);
    padding: 2px 8px;
    font-size: 12px;
    color: white;
    border-radius: 6px;
}

/* NEWS CARD STYLE */
.news-card {
    background: #ffffff;
    border: 1px solid #edf0f5;
    transition: 0.2s ease-in-out;
}

.news-card:hover {
    background: #f9fbff;
    border-color: #d6e4ff;
}

/* Read Article Link */
.news-link {
    font-weight: 600;
    color: #0b57d0;
    text-decoration: none;
}

.news-link:hover {
    text-decoration: underline;
}
   
/* GALLERY CARD */
.photo-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    transition: .25s ease;
}

.photo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 6px 18px rgba(0,0,0,0.08);
}

/* Image */
.photo-img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

/* Photo Count Tag */
.photo-count {
    position: absolute;
    margin-top: -40px;
    margin-left: 15px;
    background: rgba(0,0,0,0.65);
    color: white;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 6px;
}

/* Body */
.photo-body {
    padding: 18px;
}

.photo-body p {
    height: 48px;
    overflow: hidden;
}

/* Buttons */
.btn-outline-primary {
    border-radius: 6px;
    font-size: 13px;
    padding: 6px 14px;
}
 

/* MAIN VIDEO CARD */
.video-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    transition: 0.2s;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* FIXED THUMBNAIL */
.video-thumb {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* PLAY ICON */
.play-icon {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #00306b;
}

/* TOP-RIGHT VIDEO COUNT */
.video-count {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #111827;
    color: #fff;
    padding: 4px 12px;
    font-size: 0.75rem;
    border-radius: 50px;
}

/* MAKE BODY SAME HEIGHT */
.video-card .p-3 {
    flex-grow: 1;
}