/* ================= GENERAL ================= */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* -------------------------startup banner  ----------------------*/


/* Overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Popup Box */
.popup-box {
    background: #fff;
    width: 600px;
    max-width: 95%;
    max-height: 90%;
    overflow-y: auto;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

/* Title */
.popup-box h2 {
    color: #B22222;
    margin-top: 0;
    text-align: center;
}

/* Text */
.popup-box p, .popup-box li {
    font-size: 14px;
    line-height: 1.6;
}

/* List */
.popup-box ul {
    padding-left: 20px;
}

/* Links */
.popup-box a {
    color: #0066cc;
    font-weight: bold;
    text-decoration: none;
}

.popup-box a:hover {
    text-decoration: underline;
}

/* Close button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    cursor: pointer;
    color: #888;
}

.close-btn:hover {
    color: #000;
}

/* Button */
.popup-btn {
    display: block;
    margin: 20px auto 0;
    padding: 10px 20px;
    background: #B22222;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.popup-btn:hover {
    background: #8B0000;
}
/*----------------------          ----------------------------*/
a {
    text-decoration: none;
}

/* ================= TOP HEADER ================= */
.top-header {
    background: #ffffff;
    padding: 8px 0;
}

.top-header .container {
    min-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ================= HEADER RESPONSIVE FIX ================= */

/* Desktop default */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

    .header-flex {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .header-left {
        flex-direction: column;
        align-items: center;
    }

    .logo img {
        height: 60px;   /* smaller logo */
    }

    .header-text h5 {
        font-size: 1.1rem;
    }

    .header-text p {
        font-size: 0.85rem;
    }

    /* hide right section fully */
    .header-right {
        display: none;
    }
}






/* Logo */
.logo img {
    height: 100px;
    max-height: 120px;
    width: auto;
    transition: height 0.3s ease;
}

@media (max-width: 767px) {
    .logo img {
        height: 70px;
    }
}


/* Header text */
.header-text h5 {
    margin: 0;
    font-weight: bold;
    font-size: 1.5rem;
}

.header-text p {
    margin: 0;
    font-size: 1rem;
    color: #555555;
}

/* Push social icons away from time */
.header-right {
    gap: 15px; /* controls space between time block & social icons */
	display: none;
}

@media (max-width: 767px) {
    .header-text h5 {
        font-size: 1.2rem;
    }
    .header-text p {
        font-size: 0.9rem;
    }
}

/* ================= TIME & FLAGS ================= */
.time-box {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-right: 35px;
	/* Bring time block slightly towards logo */

    margin-right: 0;     /* remove extra right margin */

}
/* Gap between flag and time (UK & Pakistan) */
.time-box > div {
    display: flex;
    align-items: center;
    gap: 10px;   /* adjust this value if you want more/less space */
}

.time-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #198754;
    white-space: nowrap;
}

.flag-icon {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Social icons */
.social-icon {
    color: #198754;
    font-size: 1.3rem;
    margin-left: 12px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-area {
    margin-left: 40px;   /* extra space AFTER time */
}
.social-icon:hover {
    color: #0f5132;
    transform: scale(1.1);
}

@media (max-width: 991px) {
    .time-box, .social-icon {
        display: none;
    }
}

/* ================= NAVBAR ================= */
.navbar {
    padding: 6px 0;
}

/* Base nav link */
.navbar .nav-link {
    position: relative;
    font-weight: 500;
   /* transition: color 0.3s ease;*/
    color: #ffffff;
    padding: 8px 14px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	padding-left: 18px;
    padding-right: 18px;
}

/* Underline effect */
.navbar .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width 0.3s ease;
}
/* Underline effect */
.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
   bottom: 4px;
    width: 0;
    height: 2px;
   background: #ffffff;
    transition: width 0.3s ease;
    background-color: #ffffff;  /* same as text contrast */
   }
/* Hover */
.navbar .nav-link:hover::after {
    width: 100%;
}

/* Show underline when ACTIVE */
.navbar .nav-link.active::after {
    width: 100%;
}
/* ================= DROPDOWN ================= */


/* Remove bootstrap active bg */
.navbar .dropdown-item.active {
    background: transparent !important;
}

/* Submenu underline */
.navbar .dropdown-item::after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: 6px;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width 0.3s ease;
}

.navbar .dropdown-item:hover::after,
.navbar .dropdown-item.active::after {
    width: calc(100% - 40px);
}








/* Hover underline */
/*.navbar .nav-link:hover::before {
    width: 100%;
}*/

/* Active underline */
.navbar .nav-link.active::before {
    width: 100%;
}

/* ============ DROPDOWN ITEM ============ */




/* Hover submenu */
.navbar .dropdown-item:hover::before {
    width: calc(100% - 40px);
}

/* Active submenu */
.navbar .dropdown-item.active::before {
    width: calc(100% - 40px);
}



.navbar .nav-item.active .nav-link {
    color: #ffffff;
    font-weight: 600;
   border-bottom: 2px solid #ffffff;
}

/* Dropdown styling */
.dropdown-menu {
    border-radius: 8px;
    border: none;
}

.dropdown-item {
    font-weight: 500;
    padding: 10px 16px;
}

.dropdown-item:hover {
    background-color: rgba(25,135,84,0.1);
    color: #198754;
}



/* Book Appointment button */
.book-btn {
    background-color: #ffffff;
    color: #198754;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 6px;
    border: 2px solid #ffffff;
    transition: all 0.3s ease;
}

.book-btn:hover,
.book-btn:focus {
    background-color: #198754;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

@media (max-width: 991px) {
    .book-btn {
        width: 100%;
        text-align: center;
    }
}

/* ================= HERO BANNER ================= */
.hero-banner {
    position: relative;
    height: 620px;
    background: #000;
}

.banner-slider {
    position: absolute;
    inset: 0;
}

.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1.6s ease-in-out;
}

.banner-slide.active {
    opacity: 1;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.banner-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12));
    display: flex;
    align-items: center;
}

/* Banner controls */
.banner-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0,0,0,0.45);
    color: #ffffff;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.banner-control:hover {
    background: rgba(25,135,84,0.9);
    transform: translateY(-50%) scale(1.08);
}

.banner-control.prev { left: 20px; }
.banner-control.next { right: 20px; }

@media (max-width: 767px) {
    .hero-banner { height: 280px; }
    .banner-control { width: 38px; height: 38px; }
    .banner-control i { font-size: 1.2rem; }
}

/* ================= BANNER + ANNOUNCEMENT ================= */
.banner-announcement-section {
    background: #f8f9fa;  
	margin-top: 5px;   /* reduce space */
    padding-top: 0;
	
}

.banner-right {
    background: #ffffff;
    padding: 22px 18px;
    border-left: 4px solid #198754;
    box-shadow: -3px 0 12px rgba(0,0,0,0.12);
    height: 620px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 90px;
	/*margin-top:5px*/
}

.announcement-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #198754;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e6f4ea;
    text-align: left;
}

.announcement-wrapper {
    flex: 1;
    overflow: hidden;
    margin-top: 8px;
    height: 100%;
}

.announcement-scroll {
    list-style: none;
    padding: 0;
    margin: 0;
   transform: translateY(0);
}

.start-scroll {
    animation: scrollUp 20s linear infinite;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes announcementUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.announcement-wrapper:hover .announcement-scroll {
    animation-play-state: paused;
}
.announcement-scroll li {
    padding: 12px 5px;
    font-size: 0.95rem;
    border-bottom: 1px solid #e5e5e5;
    background: #ffffff;
    cursor: pointer;
    transition: background 0.25s ease, padding-left 0.25s ease;
}

.announcement-scroll li:hover {
    background: rgba(25,135,84,0.08);
    padding-left: 6px;
}

@media (max-width: 991px) {
    .banner-right {
        height: auto;
        margin-top: 15px;
        border-left: none;
        border-top: 4px solid #198754;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    }
}

/* ================= CONSULAR SERVICES ================= */
.main-content { background: #f8f9fa; }
.main-left { padding-right: 30px; }

.service-card-img {
    display: block;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    height: 140px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-img {
    height: 100%;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.service-card-img:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

.service-title {
    margin-top: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #198754;
}

@media (max-width: 767px) {
    .service-card-img { height: 120px; }
    .service-title { font-size: 0.85rem; }
}

/* ================= FOOTER ================= */
.footer {
    background: #212529;
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
}

.footer p { margin: 4px 0; }


/* ===== Dropdown hover (desktop only) ===== */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}


/* Active submenu item */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #198754;
    color: #ffffff;
    font-weight: 600;
}
/* Highlight parent menu when dropdown item is active */
.nav-item.dropdown .dropdown-item.active {
    position: relative;
}





/* Remove dropdown arrow from navbar */
.navbar .dropdown-toggle::after {
    display: none !important;
}
/* ===== Multi-level dropdown (Our Team) ===== */
.dropdown-submenu {
    position: relative;
}

/* Position second level menu */
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 2px;
    display: none;
    border-radius: 8px;
}

/* Show submenu on hover (desktop) */
@media (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* Optional hover indicator */
.submenu-toggle::after {
    content: "›";
    float: right;
    font-size: 14px;
    margin-top: 2px;
}
/* Increase gap between navbar menu items */
@media (min-width: 992px) {
    .navbar-nav > .nav-item {
        margin-right: 18px;   /* increase/decrease as needed */
    }
}
/* White divider line between submenu items */
.navbar .dropdown-menu .dropdown-item {
    padding-top: 12px;
    padding-bottom: 12px;
	position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.35); /* default thin line */
    transition: background 0.3s ease, color 0.3s ease;
	padding: 10px 20px;
	color: #ffffff;
    font-weight: 500;
	color: #ffffff;  
	}

/* Hover effect */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255,255,255,0.15); /* subtle highlight */
    color: #ffffff;
}
/* Active submenu item */
.navbar .dropdown-menu .dropdown-item.active {
    background-color: #ffffff;
    color: #198754;
    font-weight: 600; 
	background: transparent !important;
    color: #ffffff !important;
}

.dropdown-menu {
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}


/* Remove divider from last item */
.navbar .dropdown-menu li:last-child > .dropdown-item {
    border-bottom: none;
}




/* Animated underline */
.navbar .dropdown-menu .dropdown-item::after {
    content: "";
    position: absolute;
    left: 20px;
    /*left: 0;*/
	bottom: 6px;
	/*bottom: 0;*/
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width 0.3s ease;
}
/* Expand underline on hover */
.navbar .dropdown-menu .dropdown-item:hover::after {
    width: 100%;
}


/* *************************    */
/* Ensure second-level submenu items also get the animated underline */
.dropdown-submenu > .dropdown-menu .dropdown-item {
    position: relative;
}


/*repared*/
.dropdown-submenu > .dropdown-menu .dropdown-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

.dropdown-submenu > .dropdown-menu .dropdown-item:hover::after {
    width: 100%;
}
/*end repaired */

/* Expand underline on hover */
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after,
.navbar .nav-item.active > .nav-link::after {
    width: 100%;
}

/* ================= Start of USEFUL LINKS CARDS ================= */

.useful-link-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px; /* equal height for all cards */
    background-color: #ffffff;
    border-radius: 12px;
   /* box-shadow: 0 4px 12px rgba(0,0,0,0.15);*/
    text-align: center;
    font-weight: 600;
    color: #198754;
    font-size: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
    text-decoration: none; 
	padding: 10px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
   
.useful-link-card:hover {

    color: #ffffff;
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}

/* Bigger image */
.link-img {
    width: 180px;
    height: 110px;
    margin-bottom: 10px;
}


.link-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Title */
.link-title {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 5px;
}


/* Responsive adjustments */
@media (max-width: 991px) {
    .link-img { width: 50px; height: 50px; }
    .link-title { font-size: 0.9rem; }
.useful-link-card { height: 110px; font-size: 0.9rem; }
}
@media (max-width: 767px) {
    .useful-link-card { height: 100px; font-size: 0.85rem; }
     .link-img { width: 45px; height: 45px; }
    .link-title { font-size: 0.85rem; }
	}
iframe {
    border-radius: 6px;
}


/* ================= end of USEFUL LINKS CARDS ================= */

/* ================= PASSPORT IMAGE ================= */
.passport-banner .col-md-8 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* align image to left for max width effect */
    text-align: left;
    position: relative;
}

.passport-banner .col-md-8 h2 {
    margin-bottom: 20px; /* space below heading */
}

/* ================= Big Responsive MRP Image ================= */


/* Responsive adjustments for tablets */
@media (max-width: 991px) {
    .passport-banner .col-md-8 .mrp-img {
        height: 220px;       /* keep it big but fit smaller screen */
        width: 100%;
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
    .passport-banner .col-md-8 .mrp-img {
        height: 160px;       /* smaller for mobile */
        width: 100%;
    }
}

/* ========================================= */
/* FINAL CLEAN ACTIVE NAVBAR STYLE */
/* ========================================= */



.navbar .dropdown-menu .dropdown-item:hover::after,
.navbar .dropdown-menu .dropdown-item.active::after {
    width: calc(100% - 40px);
}


/* ================= end of PASSPORT page ================= */




/*==========   horizontal notice bar start  ====*/
/* ================= IMPORTANT NOTICE BAR ================= */

.notice-bar {
    display: flex;
    align-items: center;
    background-color: #FAEBD7;  /* light green background */
    color: #000000;             /* dark green text */
    font-size: 0.8rem;          /* smaller font */
    font-weight: 525;
    overflow: hidden;
    border-top: 1px solid #badbcc;
    border-bottom: 1px solid #badbcc;
    padding: 1px 0;             /* reduce vertical padding */
  margin-bottom: 5px;
}

.notice-label {
    background-color: #198754;  
    color: #ffffff;
    padding: 2px 12px;          /* reduce padding inside label */
    font-weight: 500;
    white-space: nowrap;
}

.notice-marquee {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.notice-track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: scrollLeft 80s linear infinite;
}

/* Animation */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Pause on hover */
.notice-marquee:hover .notice-track {
    animation-play-state: paused;
}

/* Responsive */
@media (max-width: 767px) {
    .notice-bar {
        font-size: 0.85rem;
    }

    .notice-label {
        padding: 8px 12px;
    }
}

/*==========   end og horizontal notice bar start  ====*/


/* ================= PASSPORT FLOATING TIMING BOX ================= */

.passport-banner .floating-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
    position: relative;
    margin-top: 42px; /* same as image spacing */
	top: 20px;
}

@media (max-width: 991px) {
    .passport-banner .floating-box {
        position: relative;
        top: auto;
        margin-top: 20px;
    }
}

/* Hover lift effect */
.passport-banner .floating-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 55px rgba(0,0,0,0.30);
}

/* Mobile Fix */
@media (max-width: 991px) {
    .passport-banner .floating-box {
        position: relative;
        top: auto;
        margin-top: 20px;
    }
}


/* ================= Start FEES TABLE ================= */


.fees-table {
    width: 100%;
    border-collapse: collapse;
    /*margin-top: 5px;*/
}
.fees-table th,
.fees-table td {
    border: 1px solid #0b5d3d;
    padding: 8px;
    text-align: center;
}
.fees-table th {
    background-color: #eaf4ed;
}
/* ================= End FEES TABLE ================= */

/*    Start of passport and NADRA guidlines   */
h2 {
    color: #0b5d3d;
    margin-top: 25px;
    border-bottom: 2px solid #eaf4ed;
    padding-bottom: 5px;
}

ul {
    margin: 10px 0 20px 0;
    padding-left: 20px;
}

li {
    padding: 6px 0;
}

li i {
    margin-right: 8px;
    color: #0b5d3d;
}
/*    end of passport and NADRA guidlines   */

/* DOWNLOAD BUTTON */
.download-btn {
    display: inline-block;
    background: #1d70b8;
    color: #ffffff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
    margin-bottom: 25px;
    font-weight: 600;
}

.download-btn:hover {
    background: #003078;
    color: #ffffff;
}

/* TWO COLUMN LAYOUT */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .two-column {
        grid-template-columns: 1fr;
    }
}



/*       navbar and passport page  */
/* ================= CLEAN NAVBAR ================= */

.navbar-dark .navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    padding: 8px 16px;
}

/* Remove any background or bold from active */
.navbar .nav-link.active {
    background: transparent !important;
    font-weight: normal !important;
	font-weight: 600;
    color: #ffffff !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    background-color: rgba(255,255,255,0.2);
    border-radius: 4px;
}



.navbar .dropdown-menu {
    background-color: #198754;
    border: none;
    border-radius: 8px;
}


.navbar .dropdown-item {
    color: #ffffff !important;
    padding: 10px 20px;
}


.navbar .dropdown-item:hover {
    background-color: rgba(255,255,255,0.15);
}

/* ================= PASSPORT PAGE ================= */

.passport-banner .mrp-img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    transition: transform 0.3s ease;
}

.passport-banner .mrp-img:hover {
    transform: scale(1.02);
}





.floating-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    position: sticky;
    top: 120px;
}


/* Mobile fix */
@media (max-width: 991px) {
    .floating-box {
        position: relative;
        top: auto;
        margin-top: 20px;
    }
}



/* NOTE BOX */
.note {
    background-color: #d1e7dd;
    color: #0f5132;
    padding: 12px 15px;
    border-left: 5px solid #07752c;
    border-radius: 6px;
    margin-bottom: 20px;
   /* font-family:'Times New Roman', Times, serif;*/
    text-align: justify;
  
  

}

.card-body {
    /*padding: 12px 15px;*/
    border-left: 5px solid #07752c;
        font-family: Arial, sans-serif;
    padding: 15px;
    font-weight: 500;
    padding-top: 15px;   /* reduce if too much space */
    padding-bottom: 15px;

}
.card-body ul {
    margin-top: 0;       /* removes top gap */
    margin-bottom: 0;    /* removes bottom gap */
    padding-left: 18px;  /* clean alignment */
}

.card-body p {
    margin-bottom: 0;    /* removes space after last paragraph */
}

.card-body1 {
    /*padding: 12px 15px;*/
   /* border-left: 5px solid #07752c;*/
        font-family: Arial, sans-serif;
    padding: 15px;
    font-weight: 500;
    padding-top: 15px;   /* reduce if too much space */
    padding-bottom: 15px;

}
.card-body1 ul {
    margin-top: 0;       /* removes top gap */
    margin-bottom: 0;    /* removes bottom gap */
    padding-left: 18px;  /* clean alignment */
}

.card-body1 p {
    margin-bottom: 0;    /* removes space after last paragraph */
}
/* end of navbar and passport page  */
/* ================= SIDEBAR BORDER ================= */
.sidebar-box {
    border: 1px solid #dcdcdc;   /* light grey border */
    padding: 15px;               /* space inside box */
    border-radius: 6px;          /* smooth corners */
    background-color: #ffffff;   /* clean background */
}



/* ================= DEVELOPMENT FLASH NOTICE ================= */

/* Fix right header alignment */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Development notice */
.development-notice {
    font-size: 0.75rem;
    color: #dc3545;
    animation: flashText 1.5s infinite;
    white-space: nowrap;
}

/* Flash animation */
@keyframes flashText {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Hide notice on small screens */
@media (max-width: 1200px) {
    .development-notice {
        display: none;
    }
}


/* start of announcement */
/* ================= GOVERNMENT NEWS STYLE ================= */
.gov-news-body::before,
.gov-news-body::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 2;
    pointer-events: none;
}

.gov-news-body::before {
    top: 0;
    background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0));
}

.gov-news-body::after {
    bottom: 0;
    background: linear-gradient(to top, #ffffff, rgba(255,255,255,0));
}

/* start of clickable block  */
.gov-news-item a {
    display: block;           /* make the whole item clickable */
    color: inherit;           /* keep text color */
    text-decoration: none;    /* remove underline */
    padding: 5px 0;           /* optional spacing */
    transition: background 0.3s;
}

.gov-news-item a:hover {
    background: #f0f0f0;      /* subtle hover effect */
    cursor: pointer;
}
/* End of clickable block  */

/* ================= AUTO SCROLL TICKER ================= */
.gov-news-box {
    background: #c5eec4;
    border: 1px solid #424447;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
	 width: 100%;
}

.gov-news-header {
    background: #198754;
    color: #fff;
    padding: 12px 15px;
    font-weight: 600;
	margin-top: -10px; /* move the header up slightly */
}
.gov-news-body {
    height: 550px;
    overflow: hidden;
    position: relative;
}

.gov-news-scroll {
    display: flex;
    flex-direction: column;
    animation: scrollNews 25s linear infinite;
    
}
/* News Item */

.gov-news-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    transition: background 0.1s ease;
    cursor: pointer;
}
.gov-news-item:hover {
    background: #f5f9ff;
    
}

/* Auto Vertical Scroll Animation */
@keyframes scrollNews {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}
/* pause on hover  */
.gov-news-body:hover .gov-news-scroll {
    animation-play-state: paused;
}
/* ================= MODAL STYLE ================= */


.news-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    background: rgba(0, 0, 0, 0.7); /* dark overlay */
}

#flyerImage {
    transition: transform 0.3s ease;
}
#flyerImage:hover {
    transform: scale(1.05);
}

.news-modal-content {
    position: relative;
    margin: 3% auto;
    padding: 20px;
    width: 90%;
    height: 90%;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
        animation: popupFade 0.3s ease;

}
@keyframes popupFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*
.news-close {
    float: right;
    font-size: 22px;
    cursor: pointer;
}*/
.news-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}
/* end of announcements  */
.gov-news-title {
    font-size: 14px;
    color: #333;
}



/*start of CA-card section */
.notes-box {
    background: #f8f9fa;
    border-left: 4px solid #0b3d91;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.notes-list {
    padding-left: 18px;
    margin: 0;
}

.notes-list li {
    margin-bottom: 10px;
    font-size: 14px;
}
/*End of CA-card section */

/* start of important note label flashing */
/* ===== FLASHING IMPORTANT NOTICE LABEL ===== */

/* ===== FLASHING IMPORTANT NOTICE LABEL ===== */

.notice-label {
    animation: flashNotice 1.2s infinite;
    font-weight: 700;
}

/* Professional flashing effect */
@keyframes flashNotice {
    0% {
        background-color: #198754;   /* normal green */
        color: #ffffff;
    }
    50% {
        background-color: #ed9529;   /* alert red */
        color: #ffffff;
    }
    100% {
        background-color: #198754;
        color: #ffffff;
    }
    /*150% {
        background-color: #fafa1a;
        color: #ffffff;
    }*/
}
/* ===== FLASH ENTIRE NOTICE BAR (Professional Pulse) ===== */

.notice-bar {
    animation: noticePulse 1.8s infinite;
}

@keyframes noticePulse {
    0% {
        box-shadow: 0 0 0px rgba(220, 53, 69, 0);
    }
    50% {
        box-shadow: 0 0 18px rgba(220, 53, 69, 0.9);
    }
    100% {
        box-shadow: 0 0 0px rgba(220, 53, 69, 0);
    }
}
/* end of Flashing important notice */

/* passport guide page css  */
/* ===== PASSPORT PAGE STYLING ===== */

.passport-section {
    background-color: #f4f6f9;
}

.passport-title {
    font-weight: 600;
    color: #0b3d2e;
}

.accordion-button {
    font-weight: 600;
    font-size: 16px;
}

.accordion-button:not(.collapsed) {
    background-color: #0b5e3c;
    color: #fff;
}

.accordion-body {
    background: #ffffff;
    font-size: 15px;
}

.passport-process ol li {
    margin-bottom: 8px;
}

.table thead {
    background-color: #0b5e3c;
    color: white;
}

.notice-box {
    background: #fff3cd;
    border-left: 5px solid #ffc107;
    padding: 15px;
    font-weight: 600;
    text-align: justify;
}

@media (max-width: 768px) {
    .accordion-button {
        font-size: 14px;
    }
}

.warning { background: #ffe0e0; border: 1px solid #ff9b9b; }
/* end of passport guide page css  */



/* ================= NAdra page FLOATING TIMING BOX ================= */

.nadra-banner .floating-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
    position: relative;
    margin-top: 42px; /* same as image spacing */
	top: 20px;
}

@media (max-width: 991px) {
    .nadra-banner .floating-box {
        position: relative;
        top: auto;
        margin-top: 20px;
    }
}

/* Hover lift effect */
.nadra-banner .floating-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 55px rgba(0,0,0,0.30);
}

/* Mobile Fix */
@media (max-width: 991px) {
    .nadra-banner .floating-box {
        position: relative;
        top: auto;
        margin-top: 20px;
    }
}


/* ================= FEES TABLE ================= */


/*    for nadra guidlines   */


/* DOWNLOAD BUTTON */
.download-btn {
    display: inline-block;
    background: #1d70b8;
    color: #ffffff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
    margin-bottom: 25px;
    font-weight: 600;
}

.download-btn:hover {
    background: #003078;
    color: #ffffff;
}

/* TWO COLUMN LAYOUT */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .two-column {
        grid-template-columns: 1fr;
    }
}



/*       navbar and Nadra page  */

/*   start of List of CG page   */

/* ================= EX CONSUL GENERAL TABLE ================= */

#cgTable th {
    font-weight: 600;
    text-align: center;
	cursor: pointer;
    user-select: none;
}

#cgTable td {
    text-align: center;
}

#cgTable tbody tr:hover {
    background-color: #e9f7ef;
}



#cgTable th:hover {
    background-color: #198754;
    color: white;
}
/* ================= CG TABLE PROFESSIONAL STYLE ================= */

.cg-table-container{
    max-height:600px;
   /* overflow-y:auto;*/
}

/* Sticky header */

#cgTable thead th{
    position: sticky;
    top: 0;
    background:#198754;
    color:#ffffff;
    z-index:2;
}

/* pointer cursor */

#cgTable th{
    cursor:pointer;
    user-select:none;
}

/* hover highlight */

#cgTable tbody tr:hover{
    background:#e9f7ef;
}


/* End of list of ex CGs  page  */


/* Start of flyer popup block on loading index page*/
/* ================= URGENT POPUP ================= */

.urgent-popup{
    position: fixed;
	inset: 0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.6);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
	padding: 10px;
	overflow-y: auto;
}

.urgent-box{
    background:#ffffff;
    padding:20px;
    width:700px;
    max-width:100%;
	max-height: 90vh;
	overflow-y: auto;
    border-radius:8px;
	
    text-align:LEFT;
    box-shadow:0 15px 40px rgba(0,0,0,0.4);
    animation: popupFade 0.4s ease;
	 position: relative;   /* ADD THIS */
}

.urgent-box h4{
    color:#198754;
    margin-bottom:15px;
}

.urgent-close{
    position:sticky;
    right:15px;
    top: 0;
	float: RIGHT;
    font-size:26px;
    cursor:pointer;
	background: #fff;
	padding: 5px 10px;
	z-index: 10px;
	
  //*  font-weight:bold;*/
}

@keyframes popupFade{
    from{
        transform:scale(0.9);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

@media (max-width: 767px) {

    .urgent-box {
        padding: 15px;
        max-height: 85vh;
    }

    .urgent-box h2 {
        font-size: 1.2rem;
    }

    .urgent-box p,
    .urgent-box li {
        font-size: 0.9rem;
    }

    .popup-btn {
        width: 100%;   /* full-width button */
    }
}
/* End of flyer popup on block loading index page*/


/* Start of image-flyer popup    */
/* ================= FLYER POPUP ================= */

.img-flyer-popup{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.7);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.img-flyer-container{
    position:relative;
    max-width:700px;
    width:90%;
    animation: popupZoom 0.4s ease;
}

.flyer-img{
    width:100%;
    border-radius:6px;
    box-shadow:0 15px 40px rgba(0,0,0,0.5);
}

.img-flyer-close{
    position:absolute;
    top:-15px;
    right:-15px;
    background:#ffffff;
    color:#000;
    font-size:26px;
    width:36px;
    height:36px;
    text-align:center;
    line-height:36px;
    border-radius:50%;
    cursor:pointer;
    font-weight:bold;
}

.img-flyer-close:hover{
    background:#dc3545;
    color:#ffffff;
}

@keyframes popupZoom{
    from{
        transform:scale(0.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}
/*End of image flyer popup  */
5;
	}
/*Start of Attestation page  */
/*End of attestation page  */




/*          start of important cards links at teh reight column     */
/* ================= IMPORTANT LINKS BOX (RIGHT COLUMN) ================= */
/* ================= RIGHT COLUMN INFO CARDS ================= */

.info-cards-box{
display:flex;
flex-direction:column;
gap:10px;



}
.news-cards-body1 .useful-link-card {
  margin-bottom: 15px; /* adds gap between cards */
}
.info-cards-box{
    position: sticky;
    top: 90px;
    width: 100%;
}

.row{
    margin-left:0;
    margin-right:0;
}
/* card box */

.info-card{
background:#ffffff;
border:2px solid #198754;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,0.15);
overflow:hidden;

margin-bottom:20px;

 /*height: 220px;
    display: flex;*/
   /* flex-direction: column;
    /*justify-content: space-between;*/
}

.info-card + .info-card {
  margin-top: 20px;
}
/* image */

.info-card-img{

 width: 100%;
   height: 140px;           /* 👈 controls card size */
  /*  object-fit: contain;     /* 👈 keeps full image visible (important for maps) */
    display: block;
    transition: transform 0.3s ease;
    background: #f8f9fa;     /* optional: clean background */
   /* padding: 5px;            /* optional spacing */
}

.info-card-img:hover{
transform:scale(1.05);
}

/* title */

.info-card-title{
text-align:center;
font-weight:600;
padding:10px;
/*color:#ffffffff;
background:#198754;*/
color:#198754;
background:#ffffffff;
}



.right-sidebar{
    padding-left: 0;
}


/* video title */

.video-title{
color:#198754;
background:#ffffffff;
padding:10px;
font-weight:600;
text-align:center;
}

/* responsive video */

.video-wrapper{
position:relative;
padding-bottom:56.25%;
height:10;
overflow:hidden;
}

.video-wrapper iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}
/* Video card (clickable thumbnail) */
.video-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-bottom: 15px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

.video-card .video-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.video-card .video-thumbnail {
  position: relative;
  width: 100%;
  height: 180px; /* adjust as needed */
  overflow: hidden;
  border-radius: 10px;
}

.video-card .video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.video-card .video-thumbnail:hover img {
  transform: scale(1.05);
}

.video-card .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: rgba(255,0,0,0.8);
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  pointer-events: none;
}

.video-card .video-title {
  font-weight: 600;
  color: #198754;
  font-size: 0.95rem;
  padding: 8px 0;
}
/*          end  of important cards links at teh reight column     */

/* start of announcemnt   */
/* Example for your Announcements column */
.announcements {
    position: sticky;
    top: 20px; /* distance from top when scrolling */
    max-height: calc(100vh - 40px); /* optional: keeps it within viewport */
    overflow-y: auto; /* allows scrolling inside if content is tall */
}
/*end of announcemnt   */


.service-card {
    background-color: #fff;
    border-radius: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}


/*  start of Download page  */
.download-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 15px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transition: all 0.3s ease;
}

.download-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}




.download-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 15px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* space between left & right */
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transition: all 0.3s ease;
}

/* LEFT SIDE (TEXT AREA) */
.download-card .form-info {
    flex: 1;              /* take maximum space */
    min-width: 0;         /* IMPORTANT: prevents overflow issues */
}

/* HEADING FIX */
.download-card h6 {
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;      /* prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis;  /* show ... if too long */
}

/* RIGHT SIDE (BUTTONS) */
.download-card .form-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0; /* prevent shrinking */
}
/*   End of downlaod page */