@charset "utf-8";

:root {

	/* Premium Banking Blue */
	--color-primary: #1565C0;
	--color-primary-light: #E3F2FD;
	--color-primary-dark: #0D47A1;
	--color-accent: #1E88E5;

	/* Text */
	--color-text: #1F2937;
	--color-text-light: #5B6778;
	--color-sharp:white;

	/* Backgrounds */
	--color-bg: #EEF4F9;
	--color-bg-alt: #DCEAF5;
	--color-white: #FFFFFF;
	--color-surface: #F9FCFE;

	/* Borders */
	--color-border: #C9D9E8;

	/* Shadows */
	--shadow-sm: 0 4px 12px rgba(13,71,161,.08);
	--shadow-md: 0 10px 28px rgba(13,71,161,.12);
	--shadow-lg: 0 18px 45px rgba(13,71,161,.18);

	/* Typography */
	--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-heading: "Georgia", "Times New Roman", serif;

	/* Spacing */
	--space-xs: .5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	/* Layout */
	--max-width: 1150px;
	--border-radius: 14px;
}


/* ===========================================
           Reset & Base Styles
=========================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-main);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text);
	background-color: var(--color-bg);
}

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

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-primary-dark);
}

/* ===========================================
           Typography
           =========================================== */
h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-text);

}

h1 {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin-bottom: var(--space-md);
}

h3 {
	font-size: 1.25rem; 
	margin-bottom: var(--space-sm);
}

p {
	margin-bottom: var(--space-sm);
	text-align: justify;
}

/* ===========================================
           Layout Components
           =========================================== */
.container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--space-md);
}

section {
	padding: var(--space-xl) 0;
}

.section-label {
	font-family: var(--font-main);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-xs);
}

/* ===========================================
           Buttons
=========================================== */
.btn {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	font-family: var(--font-main);
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: center;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all 0.2s ease;
}

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

.btn-primary:hover {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

.btn-secondary {
	background-color: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

.btn-secondary:hover {
	background-color: var(--color-bg-alt);
	border-color: var(--color-text-light);
	color: var(--color-text);
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* =========================================================
   HEADER
========================================================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background: #0B3D91;

    border-bottom: 1px solid rgba(255,255,255,0.12);

    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}


.header-inner {
    min-height: 72px;

    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/* =========================================================
   LOGO
========================================================= */

.logo1 {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #ffffff;

    text-decoration: none;

    flex-shrink: 0;
}


.logo1-image {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.logo1-image img {
    width: 50px;
    height: 50px;

    object-fit: contain;

    display: block;
}


.logo1 p {
    margin: 0;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.4;

    font-weight: 600;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {
    margin-left: auto;
}


.nav-list {
    display: flex;
    align-items: center;

    gap: 5px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.nav-list > li {
    position: relative;

    margin: 0;
    padding: 0;
}


.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 8px 13px;

    border-radius: 22px;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;

    transition:
        background-color .25s ease,
        color .25s ease;
}


.nav-link:hover {
    background: #ffffff;

    color: #0B3D91;
}


/* =========================================================
   SUBMENU ARROW
========================================================= */

.has-submenu > .submenu-parent::after {
    content: "▾";

    margin-left: 7px;

    font-size: 10px;

    transition: transform .2s ease;
}


.has-submenu:hover > .submenu-parent::after {
    transform: rotate(180deg);
}


/* =========================================================
   DESKTOP SUBMENU
========================================================= */

.submenu {
    position: absolute;

    top: 100%;
    left: 0;

    width: 240px;

    padding: 7px;

    margin: 0;

    background: #ffffff;

    border-top: 3px solid var(--color-primary);

    border-radius: 0 0 8px 8px;

    box-shadow: 0 12px 30px rgba(0,0,0,.16);

    visibility: hidden;

    opacity: 0;

    transform: translateY(7px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 10000;
}


.has-submenu:hover > .submenu {
    visibility: visible;

    opacity: 1;

    transform: translateY(0);
}


.submenu a {
    display: flex;
    align-items: center;

    width: 100%;

    min-height: 38px;

    padding: 8px 12px;

    box-sizing: border-box;

    color: #0B3D91;

    text-decoration: none;

    font-size: 13px;

    line-height: 1.35;

    border-radius: 5px;

    white-space: normal;

    transition:
        background-color .2s ease,
        color .2s ease,
        padding-left .2s ease;
}


.submenu a:hover {
    background: var(--color-primary);

    color: #ffffff;

    padding-left: 16px;
}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    margin-left: auto;

    padding: 7px;

    border: 1px solid rgba(255,255,255,.3);

    border-radius: 7px;

    background: transparent;

    cursor: pointer;
}


.nav-toggle span {
    display: block;

    width: 24px;
    height: 2px;

    margin: 5px auto;

    background: #ffffff;

    border-radius: 2px;

    transition: all .25s ease;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .header-inner {
        min-height: 68px;
    }


    /* HAMBURGER */

    .nav-toggle {
        display: block;
    }


    /* MOBILE NAV */

    .nav {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        max-height: calc(100vh - 68px);

        overflow-x: hidden;
        overflow-y: auto;

        margin: 0;

        padding: 0;

        background: #0B3D91;

        border-top: 1px solid rgba(255,255,255,.12);

        box-shadow: 0 12px 25px rgba(0,0,0,.18);

        display: none;
    }


    /* OPEN MENU */

    .nav.open {
        display: block;
    }


    /* MENU */

    .nav-list {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 0;

        padding: 8px 12px 15px;

        box-sizing: border-box;
    }


    .nav-list > li {
        width: 100%;

        border-bottom: 1px solid rgba(255,255,255,.10);
    }


    .nav-list > li:last-child {
        border-bottom: none;
    }


    /* MENU LINK */

    .nav-list > li > .nav-link {
        width: 100%;

        min-height: 46px;

        padding: 11px 12px;

        box-sizing: border-box;

        justify-content: space-between;

        border-radius: 5px;

        color: #ffffff;

        font-size: 14px;

        white-space: normal;

        text-align: left;
    }


    .nav-list > li > .nav-link:hover {
        background: #ffffff;

        color: #0B3D91;
    }


    /* =====================================================
       MOBILE SUBMENU

       IMPORTANT:
       STATIC POSITION = NEVER GOES OFF SCREEN
    ===================================================== */

    .submenu {
        position: static;

        width: 100%;

        min-width: 0;

        max-width: none;

        box-sizing: border-box;

        margin: 0 0 6px;

        padding: 5px 0 5px 10px;

        background: rgba(255,255,255,.07);

        border: 0;

        border-left: 3px solid var(--color-primary);

        border-radius: 0 6px 6px 0;

        box-shadow: none;

        visibility: visible;

        opacity: 1;

        transform: none;

        display: none;
    }


    /* OPEN SUBMENU */

    .has-submenu.open > .submenu {
        display: block;
    }


    /* MOBILE ARROW */

    .has-submenu.open > .submenu-parent::after {
        transform: rotate(180deg);
    }


    /* SUBMENU LINKS */

    .submenu a {
        width: 100%;

        min-height: 42px;

        padding: 9px 12px;

        box-sizing: border-box;

        color: #ffffff;

        font-size: 13px;

        white-space: normal;
    }


    .submenu a:hover {
        background: #ffffff;

        color: #0B3D91;

        padding-left: 16px;
    }


    /* RAISE ISSUE */

    .main-blue-button-hover {
        width: 100%;

        padding: 8px 0;
    }


    .main-blue-button-hover a {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;

        box-sizing: border-box;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .header-inner {
        min-height: 62px;

        padding-left: 10px;
        padding-right: 10px;
    }


    .logo1 {
        gap: 7px;
    }


    .logo1-image img {
        width: 42px;
        height: 42px;
    }


    .logo1 p {
        font-size: 11px;

        line-height: 1.3;
    }


    .nav-toggle {
        width: 40px;
        height: 40px;
    }


    .nav-toggle span {
        width: 22px;
    }


    .nav {
        max-height: calc(100vh - 62px);
    }

}

/* Existing button classes retained */
.main-blue-button a{
    display:inline-block;
    background:var(--color-primary);
    font-size:14px;
    font-weight:500;
    color:#fff;
    text-transform:capitalize;
    padding:10px 20px;
    border-radius:23px;
    letter-spacing:.25px;
    transition:all .25s ease;
}

.main-blue-button a:hover{
    background:var(--color-primary-dark);
    color:#fff;
}

.main-blue-button-hover a{
    display:inline-block;
    background:var(--color-primary-light);
    font-size:14px;
    font-weight:500;
    color:var(--color-primary-dark);
    text-transform:capitalize;
    padding:7px 12px;
    border-radius:23px;
    letter-spacing:.25px;
    transition:all .25s ease;
}

.main-blue-button-hover a:hover{
    background:var(--color-primary);
    color:#fff;
}

/* Prevent fixed header from covering page content */
body{
    padding-top:var(--header-height);
}

/* ===========================================
           Hero Section
=========================================== */


.hero{
	left: 0;
	right: 0;
    position:relative;
    padding:20px 0 20px;
    background:linear-gradient(135deg,#0D47A1,#1976D2,#42A5F5);
    overflow:hidden;
    border-radius:10px;
    margin-top: 85px;
    font-family: var(--font-heading);
    width: 100%;
}

.hero-overlay{

    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right,    rgba(255,255,255,.15),   transparent 40%);

}

.hero-wrapper{

    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    align-items:center;
}

.hero-content{
    color:#fff;
    z-index:2;
}

.hero-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:30px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    margin-bottom:20px;
}

.hero h2{
    font-size:40px;
    color:#fff;
    line-height:1.2;
    margin-bottom:25px;
    font-family: var(--font-main);
    font-weight: 650;
}

.hero-description{
    font-size:15px;
    line-height:1.9;
    max-width:800px;
    opacity:.95;
    font-weight: 400;
    font-family: var(--font-main);
}

.hero-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
}

.hero-card{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    border-radius:25px;
    padding:40px;
    text-align:center;
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 25px 60px rgba(0,0,0,.15);
    font-family: var(--font-main);
}

.hero-card img{
    width:220px;
    margin:auto;
}

.hero-card h3{
    color:#fff;
    margin-top:20px;
    font-family: var(--font-main);
}

.hero-stats{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.stat-card{
    background:#fff;
    border-radius:18px;
    padding:25px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.stat-card h2{
    color:#1565C0;
    font-size:36px;
    margin-bottom:8px;
}

.stat-card span{
    color:#666;
}

/* ===========================================
           Audio Player
 =========================================== */
.audio-player {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	margin-bottom: var(--space-md);
	max-width: 420px;
	user-select: none;
}

.audio-play-btn {
	width: 44px;
	height: 44px;
	min-width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary);
	color: var(--color-white);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.audio-play-btn:hover {
	background-color: var(--color-primary-dark);
}

.audio-play-btn:active {
	transform: scale(0.95);
}

.audio-info {
	flex: 1;
	min-width: 0;
}

.audio-track-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: 8px;
}

.audio-track-info {
	display: flex;
	flex-direction: column;
}

.audio-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audio-artist {
	font-size: 0.75rem;
	color: var(--color-text-light);
}

.audio-progress-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.audio-progress-bar {
	position: relative;
	height: 6px;
	cursor: pointer;
	padding: 8px 0;
	margin: -8px 0;
}

.audio-progress-bg {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 6px;
	transform: translateY(-50%);
	background-color: var(--color-bg-alt);
	border-radius: 3px;
}

.audio-progress {
	position: absolute;
	top: 50%;
	left: 0;
	height: 6px;
	width: 0%;
	transform: translateY(-50%);
	background-color: var(--color-primary);
	border-radius: 3px;
	pointer-events: none;
}

.audio-progress-handle {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 16px;
	height: 16px;
	background-color: var(--color-primary);
	border: 2px solid var(--color-white);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	cursor: grab;
	transition: transform 0.1s ease;
}

.audio-progress-handle:hover,
.audio-progress-handle.dragging {
	transform: translate(-50%, -50%) scale(1.2);
}

.audio-progress-handle.dragging {
	cursor: grabbing;
}

.audio-time {
	display: flex;
	justify-content: space-between;
	font-size: 0.6875rem;
	color: var(--color-text-light);
	font-variant-numeric: tabular-nums;
}

/* Volume Control */
.volume-control {
	display: none;
	align-items: center;
	gap: 6px;
}

.volume-icon {
	color: var(--color-text-light);
	flex-shrink: 0;
}

.volume-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 50px;
	height: 3px;
	background: var(--color-bg-alt);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	background: var(--color-primary);
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.1s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
	transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
	width: 10px;
	height: 10px;
	background: var(--color-primary);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

@media (min-width: 400px) {
	.volume-control {
		display: flex;
	}
}

/* ===========================================
           About Section
 =========================================== 
.about {
	background-color: var(--color-bg-alt);
}


.about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
}

.about-image {
	aspect-ratio: 4 / 5;
	background-color: var(--color-border);
	border-radius: var(--border-radius);
	overflow: hidden;
	max-width: 280px;
}

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

@media (min-width: 768px) {
	.about-image {
		max-width: none;
	}
}

.about-text p {
	color: var(--color-text-light);
	font-size: 1.0625rem;
}

.about-text p:last-child {
	margin-bottom: 0;
}

.about-text p.about-note {
	font-size: 0.875rem;
	color: var(--color-text-light);
	margin-top: var(--space-md);
	padding: var(--space-sm);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	width: 94%;
}   */

/* ===========================================
           Services Section
=========================================== */
.services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.service-card {
	padding: var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	transition: border-color 0.2s ease;
}

.service-card:hover {
	border-color: var(--color-primary);
}

.service-icon {
	width: 250px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary-light);
	border-radius: var(--border-radius);
	margin-bottom: var(--space-sm);
	color: var(--color-primary);
}

.service-icon svg {
	width: 32px;
	height: 32px;
}

.service-card p, table {
	color: var(--color-text-light);
	margin-bottom: var(--space-sm);
}

.btn-small {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-primary);
	background-color: transparent;
	border: 1px solid var(--color-primary);
	border-radius: var(--border-radius);
	transition: all 0.2s ease;
}

.btn-small:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
}

/* ===========================================
           Featured Work Section
           =========================================== */
.work {
	background-color: var(--color-bg-alt);
}

.work-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.work-card {
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.work-image {
	aspect-ratio: 16 / 10;
	background-color: var(--color-border);
	overflow: hidden;
}

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

.work-info {
	padding: var(--space-sm) var(--space-md) var(--space-md);
}

.work-category {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-xs);
}

.work-info h3 {
	margin-bottom: var(--space-xs);
}

.work-info p {
	color: var(--color-text-light);
	font-size: 0.9375rem;
	margin-bottom: 0;
}

/* ===========================================
           Testimonials Section
           =========================================== */
.testimonials-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.testimonial-card {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--space-md);
	padding: var(--space-md);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	align-items: center;
}

.testimonial-author {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
	width: 120px;
}

.testimonial-avatar {
	width: 60px;
	height: 60px;
	background-color: var(--color-primary-light);
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	margin-bottom: 6px;
}

.testimonial-name {
	font-weight: 600;
	color: var(--color-text);
	font-size: 0.9375rem;
	margin: 0;
}

.testimonial-role {
	font-size: 0.6875rem;
	color: var(--color-text-light);
	margin: 0;
}

.testimonial-text {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--color-text);
	margin-bottom: 0;
	line-height: 1.5;
}

.testimonial-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-name {
	font-weight: 600;
	color: var(--color-text);
}

.testimonial-role {
	font-size: 0.8rem;
	color: var(--color-text-light);
}

/* ===========================================
           Contact Section
=========================================== */
.contact-header{
    text-align:center;
    margin-bottom:35px;
}

.contact-header h2{
    font-size:34px;
    color:#0b4f9c;
    margin-bottom:8px;
}

.contact-header p{
    color:#666;
}

.contact-wrapper{

    display:grid;
    grid-template-columns:420px 1fr;
    gap:30px;

}

.contact-info{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.info-card{

    display:flex;
    align-items:flex-start;

    gap:18px;

    background:#fff;

    padding:20px;

    border-radius:14px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.3s;

    border-left:4px solid #0b4f9c;

}

.info-card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.info-card i{

    width:55px;
    height:55px;

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

    border-radius:50%;

    background:#edf5ff;

    color:#0b4f9c;

    font-size:22px;

}

.info-card h4{

    margin:0 0 8px;
    color:#0b4f9c;

}

.info-card p{

    margin:0;
    color:#666;
    line-height:1.7;

}

.map-card{

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.map-card iframe{

    width:100%;
    height:100%;
    min-height:410px;

    border:none;

}

@media(max-width:900px){

.contact-wrapper{

grid-template-columns:1fr;

}

.map-card iframe{

min-height:300px;

}

}


/* ===========================================
           Newsletter Section
           =========================================== */
.newsletter {
	background-color: var(--color-bg);
	padding: var(--space-lg) 0;
	border-top: 1px solid var(--color-border);
}

.newsletter-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	align-items: center;
}

.newsletter-content {
	text-align: center;
}

.newsletter-content h3 {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin-bottom: var(--space-xs);
}

.newsletter-content p {
	color: var(--color-text-light);
	font-size: 0.9375rem;
	margin-bottom: var(--space-md);
}

.newsletter-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 360px;
	margin: 0 auto;
}

.newsletter-map {
	height: 200px;
	border-radius: var(--border-radius);
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

@media (min-width: 480px) {
	.newsletter-form {
		flex-direction: row;
		max-width: 400px;
	}

	.newsletter-form .form-input {
		flex: 1;
	}

	.newsletter-form .btn {
		flex-shrink: 0;
	}
}

@media (min-width: 768px) {
	.newsletter-grid {
		grid-template-columns: 1fr 2fr;
		gap: var(--space-lg);
	}

	.newsletter-map {
		height: 100%;
		min-height: 180px;
	}
}


/*==============================
        Footer
===============================*/
/*=========================================================
                    FOOTER
==========================================================*/

.footer{
	position:relative;

    width:100vw;
    background-color: #0B3D91;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-top: 80px;

    overflow:cover;

}

/*=========================================================
                    TOP SECTION
==========================================================*/

.footer-top{

    max-width:1400px;

    margin:auto;

    padding:30px 25px 45px;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr 1.3fr;

    gap:40px;

}

/*=========================================================
                    LOGO
==========================================================*/

.footer-logo{

    width:75px;

    margin-bottom:18px;

}

.footer-about p{

    color:#d7e4ff;

    line-height:1.5;

    margin-bottom:15px;

    text-align:left;

}

/*=========================================================
                    HEADINGS
==========================================================*/

.footer-column h3{

    color:#fff;

    font-size:24px;

    margin-bottom:18px;

}

.footer-column h4{

    color:#fff;

    font-size:18px;

    margin-bottom:25px;

    position:relative;

}

.footer-column h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:45px;

    height:3px;

    background:#FFD54F;

    border-radius:50px;

}

/*=========================================================
                    LISTS
==========================================================*/

.footer-column ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-column ul li{

    margin-bottom:13px;

}

.footer-column ul li a{

    color:#d7e4ff;

    text-decoration:none;

    transition:.3s;

    display:inline-block;

}

.footer-column ul li a:hover{

    color:#FFD54F;

    transform:translateX(5px);

}

/*=========================================================
                CONTACT LIST
==========================================================*/

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:18px;

    color:#d7e4ff;

}

.footer-contact i{

    width:20px;

    color:#FFD54F;

    margin-top:2px;

    font-size:16px;

}

.footer-contact span{

    line-height:1.7;

}

/*=========================================================
                    SOCIAL
==========================================================*/

.social-links{

    display:flex;

    gap:12px;

    margin-top:25px;

}

.social-links a{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.social-links a:hover{

    background:#FFD54F;

    color:#0B3D91;

    transform:translateY(-4px);

}

/*=========================================================
                REGULATORY LINKS
==========================================================*/

.footer-links{

    max-width:1400px;

    margin:auto;

    padding:18px 25px;

    border-top:1px solid rgba(255,255,255,.12);

    border-bottom:1px solid rgba(255,255,255,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}

.footer-links span{

    color:rgba(255,255,255,.35);

}

.footer-links a{

    color:#fff;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}

.footer-links a:hover{

    color:#FFD54F;

}

/*=========================================================
                BOTTOM
==========================================================*/

.footer-bottom{

    max-width:1400px;

    margin:auto;

    padding:20px 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    color:#d7e4ff;

    font-size:14px;

}

.footer-left{

    flex:1;

}

.footer-center{

    text-align:center;

    flex:1;

}

.footer-right{

    text-align:right;

    flex:1;

}

.footer-right strong{

    color:#FFD54F;

}

/*=========================================================
                HOVER EFFECT
==========================================================*/

.footer-column{

    transition:.3s;

}

.footer-column:hover{

    transform:translateY(-3px);

}

/*=========================================================
                SCROLL TO TOP
==========================================================*/

.footer a{

    outline:none;

}

/*=========================================================
                TABLET
==========================================================*/

@media(max-width:1200px){

.footer-top{

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.footer-bottom{

flex-wrap:wrap;

}

}

/*=========================================================
                MOBILE
==========================================================*/

@media(max-width:900px){

.footer-top{

grid-template-columns:repeat(2,1fr);

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-left,
.footer-center,
.footer-right{

text-align:center;

}

}

@media(max-width:600px){

.footer-top{

grid-template-columns:1fr;

padding:45px 20px;

}

.footer-column{

text-align:center;

}

.footer-column h4::after{

left:50%;

transform:translateX(-50%);

}

.footer-contact li{

justify-content:center;

text-align:left;

}

.social-links{

justify-content:center;

}

.footer-links{

gap:8px;

font-size:13px;

}

.footer-bottom{

font-size:13px;

}

}
/* ===========================================
           RESPONSIVE GRID RULES
=========================================== */

@media (min-width:640px){
    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .work-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (min-width:768px){
    .about-grid{
        grid-template-columns:1fr 1.5fr;
    }

    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .work-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .testimonials-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* ===========================================
           MOBILE NAVIGATION
=========================================== */

@media (max-width:991px){

    :root{
        --header-height:68px;
    }

    .header{
        min-height:var(--header-height);
    }

    .header-inner{
        min-height:var(--header-height);
        padding:0 15px;
    }

    .nav-toggle{
        display:block;
    }

    .nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        width:100%;
        max-height:calc(100vh - var(--header-height));
        max-height:calc(100dvh - var(--header-height));
        overflow-x:hidden;
        overflow-y:auto;
        margin:0;
        padding:0;
        background:#0B3D91;
        border-top:1px solid rgba(255,255,255,.12);
        box-shadow:0 12px 25px rgba(0,0,0,.18);

        visibility:hidden;
        opacity:0;
        transform:translateY(-8px);
        pointer-events:none;
        transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
    }

    /* Supports the common JS/class approach */
    .nav.active{
        visibility:visible;
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

    /* Supports checkbox-only navigation if HTML uses:
       <input type="checkbox" id="nav-toggle">
       ... <nav class="nav"> ... */
    #nav-toggle:checked ~ .nav,
    #menu-toggle:checked ~ .nav{
        visibility:visible;
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

    .nav-list{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
        padding:8px 12px 14px;
    }

    .nav-list > li{
        width:100%;
        position:relative;
        border-bottom:1px solid rgba(255,255,255,.10);
    }

    .nav-list > li:last-child{
        border-bottom:none;
    }

    .nav-link{
        width:100%;
        min-height:46px;
        justify-content:space-between;
        padding:11px 12px;
        border-radius:6px;
        color:#fff;
        font-size:.9rem;
        white-space:normal;
        text-align:left;
    }

    .nav-link:hover,
    .nav-link:focus-visible{
        color:#0B3D91;
        background:#fff;
    }

    .nav-list > li.has-submenu > .nav-link::after{
        margin-left:auto;
        font-size:10px;
    }

    /* Critical mobile fix:
       submenu stays inside the menu instead of being centered
       relative to the viewport or pushed off-screen. */
    .submenu{
        position:static;
        width:100%;
        min-width:0;
        max-width:none;
        margin:0 0 6px;
        padding:4px 0 4px 10px;
        display:none;
        visibility:visible;
        opacity:1;
        transform:none;
        background:rgba(255,255,255,.07);
        border-top:0;
        border-left:3px solid var(--color-primary);
        border-radius:0 7px 7px 0;
        box-shadow:none;
    }

    .has-submenu:hover > .submenu{
        display:none;
        visibility:visible;
        opacity:1;
        transform:none;
    }

    /* Submenu opens when JS adds .open */
    .has-submenu.open > .submenu{
        display:block;
    }

    /* Also works when the parent link receives focus */
    .has-submenu:focus-within > .submenu{
        display:block;
    }

    .submenu li{
        width:100%;
        border:0;
    }

    .submenu a{
        min-height:42px;
        width:100%;
        padding:9px 12px;
        color:#fff;
        border-radius:5px;
        font-size:.84rem;
        white-space:normal;
    }

    .submenu a:hover,
    .submenu a:focus-visible{
        color:#0B3D91;
        background:#fff;
        padding-left:16px;
    }

    .logo img{
        max-width:48px;
        max-height:48px;
    }

    .logo1 img{
        width:48px;
        height:48px;
    }
}

@media (max-width:600px){

    :root{
        --header-height:62px;
    }

    .header-inner{
        min-height:var(--header-height);
        padding:0 12px;
    }

    .logo1{
        font-size:.85rem;
        gap:7px;
    }

    .logo1 img{
        width:42px;
        height:42px;
    }

    .logo img{
        max-width:42px;
        max-height:42px;
    }

    .nav-toggle{
        width:40px;
        height:40px;
        padding:6px;
    }

    .nav-toggle span{
        width:22px;
    }

    .nav-list{
        padding-left:10px;
        padding-right:10px;
    }
}

/* ===========================================
           PRODUCTS cARDS
 =========================================== */
.products{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    padding:20px 5%;
    background:var(--color-bg-alt);
    border-radius: 10px;
}

.product-card{
    background:#fff;
    border-radius:18px;
    padding:25px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.product-card img{
    display:block;
    width:80px;
    height:80px;
    object-fit:contain;
    margin:0 auto 20px;
}

.product-card h3{
    margin-bottom:12px;
    color:var(--color-primary-dark);
}

.product-card p{
    color:var(--color-text-light);
    line-height:1.6;
    margin-bottom:20px;
}

.product-card a{
    text-decoration:none;
    color:var(--color-primary);
    font-weight:600;
}

.product-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}


/**--Logo1---*/
.logo1{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--color-text);
    font-weight:700;
    font-size:1rem;
}

.logo1 img{
    width:60px;
    height:60px;
    object-fit:contain;
}

.logo-card{
	background:var(--color-bg-alt);
    border-radius:18px;
    padding:4px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;	
}


/* ===========================
   Board of Directors
=========================== */

.directors-section{
    width:100%;
    padding:0;
    background:transparent;
}

.section-title{
    text-align:center;
    margin-bottom:35px;
}

.section-title h2{
    margin:0;
    font-size:34px;
    color:var(--color-primary-dark);
    font-weight:700;
}

.section-title p{
    margin-top:10px;
    color:var(--color-text-light);
    font-size:16px;
}

/* Director Grid */

.directors-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:25px;
}

/* Director Card */

.director-card{
    background:#fff;
    border:1px solid #e9ecef;
    border-radius:16px;
    padding:25px 20px;
    text-align:center;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
    transition:.3s ease;
}

.director-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 25px rgba(0,0,0,.12);
    border-color:var(--color-primary-dark);
}

.director-card img{
    display:block;
    width:180px;
    height:220px;
    margin:0 auto 20px;
    object-fit:cover;
    border-radius:10px;
    border:3px solid var(--color-primary-dark);
}

.director-card h3{
    margin:0 0 8px;
    color:var(--color-primary-dark);
    font-size:16px;
    font-weight:600;
}

.director-card span{
    display:inline-block;
    padding:7px 18px;
    background:var(--color-primary-dark);
    color:#fff;
    border-radius:20px;
    font-size:14px;
    font-weight:500;
}

.director-card p{
    margin-top:15px;
    color:var(--color-text-light);
    line-height:1.6;
    font-size:14px;
}

/* Responsive */

@media (max-width:768px){

    .section-title h2{
        font-size:28px;
    }

    .directors-grid{
        grid-template-columns:1fr;
    }

    .director-card img{
        width:160px;
        height:200px;
    }

}

/*==============================
        About Us Layout
===============================*/

/*=========================================================
                    ABOUT US
==========================================================*/

.about-page{

    max-width:1400px;

    margin:80px auto;

    padding:0 20px;

}


/*=========================================================
                    HERO SECTION
==========================================================*/

.about-hero{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:60px;

    align-items:center;

    margin-bottom:80px;

}

.about-text{

    animation:fadeUp .8s ease;

}

.section-tag{

    display:inline-block;

    background:#EAF2FF;

    color:#0B3D91;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:20px;

}

.about-text h1{

    font-size:52px;

    color:#0B3D91;

    line-height:1.2;

    margin-bottom:25px;

}

.about-text p{

    color:#555;

    line-height:1.9;

    font-size:17px;

    text-align:justify;

    margin-bottom:35px;

}

.about-btn{

    display:inline-block;

    background:#0B3D91;

    color:#fff;

    padding:14px 32px;

    border-radius:35px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.about-btn:hover{

    background:#FFD54F;

    color:#0B3D91;

}


/*=========================================================
                    IMAGE
==========================================================*/

.about-image img{

    width:100%;

    border-radius:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.12);

}


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

.about-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-bottom:80px;

}

.stat{

    background:#fff;

    text-align:center;

    padding:35px 20px;

    border-radius:15px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.3s;

}

.stat:hover{

    transform:translateY(-8px);

}

.stat h2{

    color:#0B3D91;

    font-size:42px;

    margin-bottom:12px;

}

.stat span{

    color:#666;

    font-size:16px;

}


/*=========================================================
                VISION & MISSION
==========================================================*/

.vision-mission{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

    margin-bottom:80px;

}

.card{

    background:#fff;

    padding:40px;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

    border-top:5px solid #FFD54F;

}

.card:hover{

    transform:translateY(-6px);

}

.card h2{

    color:#0B3D91;

    margin-bottom:18px;

}

.card p{

    line-height:1.9;

    color:#555;

}


/*=========================================================
                CORE VALUES
==========================================================*/

.values{

    margin-bottom:70px;

}

.values h2{

    text-align:center;

    color:#0B3D91;

    font-size:36px;

    margin-bottom:45px;

}

.value-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:25px;

}

.value-card{

    background:#fff;

    text-align:center;

    padding:35px 20px;

    border-radius:18px;

    box-shadow:0 8px 22px rgba(0,0,0,.08);

    transition:.3s;

}

.value-card:hover{

    transform:translateY(-8px);

    background:#0B3D91;

}

.value-card i{

    font-size:42px;

    color:#FFD54F;

    margin-bottom:20px;

}

.value-card h3{

    color:#0B3D91;

    transition:.3s;

}

.value-card:hover h3{

    color:#fff;

}


/*=========================================================
                ANIMATION
==========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:1200px){

.about-hero{

grid-template-columns:1fr;

}

.about-stats{

grid-template-columns:repeat(2,1fr);

}

.value-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:768px){

.about-text h1{

font-size:36px;

}

.vision-mission{

grid-template-columns:1fr;

}

.value-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.about-page{

padding:0 15px;

}

.about-stats{

grid-template-columns:1fr;

}

.value-grid{

grid-template-columns:1fr;

}

.about-text h1{

font-size:30px;

}

.about-text p{

font-size:15px;

}

}

/*=========================
        Staff Grid
=========================*/

.staff-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
}

.staff-card{
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:15px;
    padding:10px;
    text-align:center;
    transition:.3s;

}

.staff-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.staff-card img{
    width:160px;
    height:190px;
    object-fit:cover;
    border-radius:10px;
    border:3px solid var(--color-primary-dark);
    margin:0 auto 15px;
    display:block;
}

.staff-card h3{
    margin:0;
    font-size:14px;
    color:var(--color-primary-dark);
    font-weight:550;
    width:auto;
}

.staff-card span{
    display:block;
    margin-top:8px;
    color:var(--color-text-light);
    font-size:14px;
    font-weight:400;
    width:auto;
}

@media(max-width:768px){

    .staff-grid{
        grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    }

    .staff-card img{
        width:140px;
        height:170px;
    }

}

/*====================================
        SERVICE CHARGES
====================================*/

.service-charges{
    width:100%;
}

.service-charges .section-title{
    text-align:center;
    margin-bottom:30px;
}

.service-charges .section-title h2{
	font-family: var(--font-heading);
    margin:0;
    color:var(--color-primary-dark);
    font-size:34px;
    font-weight:700;
}

.service-charges .section-title p{
    margin-top:10px;
    color:var(--color-text-light);
    font-size:15px;
}

/* Table */

.table-wrapper{
    border:1px solid var(--color-border);
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.charges-table{
    width:100%;
    border-collapse:collapse;
    font-size:15px;
}

.charges-table thead th{
    background:var(--color-primary-dark);
    color:#fff;
    padding:14px;
    border:1px solid var(--color-primary-dark);
    text-align:center;
    font-weight:600;
}

.charges-table tbody td{
    border:1px solid var(--color-border);
    padding:12px 14px;
    vertical-align:middle;
    color:var(--color-text);
}

/* Alternate rows */

.charges-table tbody tr:nth-child(even){
    background:#F6FBFE;
}

.charges-table tbody tr:hover{
    background:#EAF7FD;
    transition:.3s;

}

/* Column Alignment */

.charges-table td:first-child{
    text-align:left;
    font-weight:600;
    width:70px;
}

.charges-table td:nth-child(2){
    font-weight:600;
}

.charges-table td:nth-child(3){
    font-weight:400;
}

.charge{
    text-align:right;
    font-weight:600;
    white-space:nowrap;
}

/* Note */

.charges-note{
    margin-top:20px;
    padding:18px;
    background:#F6FBFE;
    border-left:5px solid var(--color-primary-dark);
    border-radius:8px;
    color:var(--color-text-light);
    line-height:1.7;
}

/* Mobile */

@media(max-width:768px){

    .table-wrapper{
        overflow-x:auto;
    }

    .charges-table{
        min-width:700px;
    }

}


/*==================================
        Notice Banner
==================================*/

.notice-banner{
    width:100%;
    padding:40px 5%;
    background:var(--color-bg-alt);
}

.notice-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.notice-header h2{
    margin:0;
    color:var(--color-primary-dark);
    font-size:30px;
}

.notice-header a{
    text-decoration:none;
    color:var(--color-primary-dark);
    font-weight:600;
}

.notice-card{
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.notice-card:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.notice-card img{
    display:block;
    width:100%;
    height:auto;
}

/* Mobile */

@media(max-width:768px){

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

}

/*====================================
        DICGC Banner
====================================*/

.dicgc-banner{
    width:100%;
    max-width:var(--max-width);
    margin:30px auto;
    padding:0 var(--space-md);
}

.dicgc-banner a{
    display:block;
    text-decoration:none;
}

.dicgc-banner img{
    width:100%;
    height:auto;
    display:block;

    border:1px solid var(--color-border);
    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s ease;
}

.dicgc-banner img:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}


/*=====================================
        Notice Marquee
======================================*/

.notice-bar{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
    width:100%;
    height:48px;
    background:#ffffff;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-top:1px solid #e6e6e6;
    border-bottom:1px solid #e6e6e6;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
    margin-top: 60px;
}

.notice-label{
    flex-shrink:0;
    background:#0B3D91;
    color:#fff;
    font-weight:600;
    padding:0 22px;
    height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    letter-spacing:.5px;
}

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

.notice-track{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    animation:scrollNotice 35s linear infinite;
}

.notice-wrapper:hover .notice-track{
    animation-play-state:paused;
}

.notice-track a{
    color:#0B3D91;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    padding:0 18px;
}

.notice-track a:hover{
    color:#d32f2f;
}

.divider{
    color:#0B3D91;
    font-size:14px;
}

@keyframes scrollNotice{

    from{
        transform:translateX(60%);
    }

    to{
        transform:translateX(-60%);
    }

}

@media(max-width:768px){
.notice-label{
    padding:0 15px;
    font-size:14px;
}

.notice-track a{
    font-size:14px;
}

}


/*=========================================
	Hero Image Slider
==========================================
.hero-slider{
    position:relative;

    width:100vw;
    height:480px;

    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-top: 108px;

    overflow:contain;
}


.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .8s;
}

.slide.active{
    opacity:1;
}

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

.slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,20,40,.55),
        rgba(0,20,40,.10)
    );

}

.slide-overlay{
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    color:#fff;
    max-width:550px;
}

.slide-overlay h1{
    font-size:52px;
    line-height:1.2;
    margin-bottom:20px;
}

.slide-overlay p{
    font-size:18px;
    line-height:1.8;
    margin-bottom:30px;
}

.slider-buttons{
    display:flex;
    gap:15px;
}

.btn-primary{
    background:#fff;
    color:#0B5ED7;
    padding:14px 28px;
    border-radius:40px;
    text-decoration:none;
    font-weight:600;
}

.btn-secondary{
    border:2px solid #fff;
    color:#fff;
    padding:14px 28px;
    border-radius:40px;
    text-decoration:none;
}


*/


/*==========================================================================================
			Universal For all pages except the Home page/ Front page
==========================================================================================*/


/*=========================================================
            UNIVERSAL CONTENT PAGE CSS
            PART - 1
            Layout • Hero • Typography • Buttons
==========================================================*/


/*=========================================================
                    CONTENT PAGE
==========================================================*/

.content-page{

    width:100%;

    padding:70px 0;

    background:#F8FAFD;

}

.container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 20px;

}


/*=========================================================
                    HERO SECTION
==========================================================*/

.page-hero{

    display:grid;

    grid-template-columns:1.15fr 1fr;

    gap:60px;

    align-items:center;

    margin-bottom:70px;

}

.page-text{

    animation:fadeUp .8s ease;

}

.page-image{

    width:100%;

}

.page-image img{

    width:100%;

    border-radius:18px;

    display:block;

    box-shadow:0 15px 40px rgba(0,0,0,.10);

}


/*=========================================================
                    PAGE TAG
==========================================================*/

.page-tag{

    display:inline-block;

    padding:8px 18px;

    background:#E9F2FF;

    color:#0B3D91;

    font-size:13px;

    font-weight:700;

    border-radius:30px;

    text-transform:uppercase;

    letter-spacing:.8px;

    margin-bottom:18px;

}


/*=========================================================
                    PAGE TITLE
==========================================================*/

.page-title{

    color:#0B3D91;

    font-size:52px;

    line-height:1.2;

    font-weight:700;

    margin-bottom:25px;

}


/*=========================================================
                    PAGE SUBTITLE
==========================================================*/

.page-subtitle{

    font-size:19px;

    color:#555;

    line-height:1.8;

    margin-bottom:30px;

}


/*=========================================================
                    PARAGRAPH
==========================================================*/

.page-text p{

    color:#555;

    font-size:17px;

    line-height:1.9;

    margin-bottom:20px;

    text-align:justify;

}


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

.section{

    margin-bottom:65px;

}


/*=========================================================
                SECTION TITLE
==========================================================*/

.section-title{

    color:#0B3D91;

    font-size:36px;

    font-weight:700;

    margin-bottom:25px;

    position:relative;

    padding-bottom:12px;

}

.section-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:70px;

    height:4px;

    background:#FFD54F;

    border-radius:50px;

}


/*=========================================================
                SMALL TITLE
==========================================================*/

.section-subtitle{

    color:#666;

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}


/*=========================================================
                TEXT
==========================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-justify{

    text-align:justify;

}


/*=========================================================
                    LINKS
==========================================================*/

.page-text a{

    color:#0B3D91;

    text-decoration:none;

    font-weight:600;

}

.page-text a:hover{

    color:#FFB300;

}


/*=========================================================
                    BUTTONS
==========================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 30px;

    border-radius:40px;

    text-decoration:none;

    cursor:pointer;

    transition:.35s;

    font-weight:600;

    font-size:15px;

}


/* Primary */

.btn-primary{

    background:#0B3D91;

    color:#fff;

}

.btn-primary:hover{

    background:#082E6D;

}


/* Gold */

.btn-gold{

    background:#FFD54F;

    color:#0B3D91;

}

.btn-gold:hover{

    background:#FFC107;

}


/* Outline */

.btn-outline{

    border:2px solid #0B3D91;

    color:#0B3D91;

    background:#fff;

}

.btn-outline:hover{

    background:#0B3D91;

    color:#fff;

}


/*=========================================================
                IMAGE CARD
==========================================================*/

.image-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.image-card img{

    width:100%;

    display:block;

}


/*=========================================================
                DIVIDER
==========================================================*/

.divider{

    width:100%;

    height:1px;

    background:#E5E5E5;

    margin:50px 0;

}


/*=========================================================
                ANIMATION
==========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:1200px){

.page-title{

font-size:42px;

}

.page-hero{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.content-page{

padding:50px 0;

}

.page-title{

font-size:34px;

}

.page-subtitle{

font-size:17px;

}

.page-text p{

font-size:16px;

}

.section-title{

font-size:30px;

}

.container{

padding:0 15px;

}

}

@media(max-width:576px){

.page-title{

font-size:28px;

line-height:1.3;

}

.section-title{

font-size:26px;

}

.page-tag{

font-size:12px;

}

.btn{

width:100%;

}

}


/*=========================================================
        UNIVERSAL CONTENT CSS
        PART - 2
        Cards • Grids • Features • Statistics • Tables
==========================================================*/


/*=========================================================
                    CARD
==========================================================*/

.card{

    background:#fff;

    padding:35px;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

    border-top:5px solid #FFD54F;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.10);

}

.card h2{

    color:#0B3D91;

    margin-bottom:18px;

    font-size:28px;

}

.card h3{

    color:#0B3D91;

    margin-bottom:12px;

}

.card p{

    color:#555;

    line-height:1.9;

}


/*=========================================================
                GRID SYSTEM
==========================================================*/

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-bottom:40px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-bottom:40px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-bottom:40px;

}


/*=========================================================
                FEATURE CARD
==========================================================*/

.feature-card{

    background:#fff;

    padding:35px 25px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 8px 22px rgba(0,0,0,.08);

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

    background:#0B3D91;

}

.feature-card i{

    font-size:46px;

    color:#FFD54F;

    margin-bottom:20px;

}

.feature-card h3{

    color:#0B3D91;

    margin-bottom:12px;

}

.feature-card p{

    color:#666;

    font-size:15px;

    line-height:1.8;

}

.feature-card:hover h3,

.feature-card:hover p{

    color:#fff;

}


/*=========================================================
                ICON BOX
==========================================================*/

.icon-box{

    display:flex;

    align-items:flex-start;

    gap:18px;

    background:#fff;

    padding:28px;

    border-radius:16px;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

    transition:.3s;

}

.icon-box:hover{

    transform:translateY(-5px);

}

.icon-box i{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#0B3D91;

    color:#FFD54F;

    font-size:24px;

}

.icon-box h3{

    color:#0B3D91;

    margin-bottom:8px;

}

.icon-box p{

    color:#666;

    line-height:1.8;

}


/*=========================================================
                    STATS
==========================================================*/

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin:40px 0;

}

.stat-card{

    background:#fff;

    padding:35px 20px;

    text-align:center;

    border-radius:18px;

    box-shadow:0 8px 22px rgba(0,0,0,.08);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-8px);

}

.stat-card h2{

    color:#0B3D91;

    font-size:42px;

    margin-bottom:10px;

}

.stat-card span{

    color:#666;

}


/*=========================================================
                INFO LIST
==========================================================*/

.info-list{

    list-style:none;

    padding:0;

    margin:0;

}

.info-list li{

    position:relative;

    padding-left:28px;

    margin-bottom:14px;

    line-height:1.8;

    color:#555;

}

.info-list li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#0B3D91;

    font-weight:bold;

}


/*=========================================================
                NOTICE BOX
==========================================================*/

.notice-box{

    background:#FFF8E1;

    border-left:5px solid #FFD54F;

    padding:22px 25px;

    border-radius:10px;

    margin:30px 0;

}

.notice-box h3{

    color:#0B3D91;

    margin-bottom:12px;

}

.notice-box p{

    color:#555;

    margin:0;

}


/*=========================================================
                ALERT BOX
==========================================================*/

.alert-box{

    background:#FDECEC;

    border-left:5px solid #D32F2F;

    padding:22px;

    border-radius:10px;

}

.alert-box h3{

    color:#B71C1C;

}

.alert-box p{

    color:#555;

}


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

.table-responsive{

    overflow-x:auto;

    margin:35px 0;

}

.table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.table thead{

    background:#0B3D91;

    color:#fff;

}

.table th{

    padding:16px;

    text-align:left;

    font-weight:600;

}

.table td{

    padding:15px;

    border-bottom:1px solid #eee;

    color:#555;

}

.table tbody tr:hover{

    background:#F8FAFD;

}


/*=========================================================
                FEATURE GRID
==========================================================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:25px;

}


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

@media(max-width:992px){

.grid-4{

grid-template-columns:repeat(2,1fr);

}

.grid-3{

grid-template-columns:repeat(2,1fr);

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.grid-2,

.grid-3,

.grid-4{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.icon-box{

flex-direction:column;

text-align:center;

align-items:center;

}

.card{

padding:25px;

}

}


/*=========================================================
        UNIVERSAL CONTENT CSS
        PART - 3
        Timeline • CTA • Utilities • Animations • Responsive
==========================================================*/


/*=========================================================
                    TIMELINE
==========================================================*/

.timeline{

    position:relative;

    margin:50px 0;

    padding-left:40px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:12px;

    top:0;

    width:4px;

    height:100%;

    background:#0B3D91;

    border-radius:20px;

}

.timeline-item{

    position:relative;

    margin-bottom:35px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-dot{

    position:absolute;

    left:-38px;

    top:8px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#FFD54F;

    border:4px solid #0B3D91;

}

.timeline-content{

    background:#fff;

    padding:25px 30px;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.timeline-content h3{

    color:#0B3D91;

    margin-bottom:10px;

}

.timeline-date{

    display:inline-block;

    background:#EAF2FF;

    color:#0B3D91;

    padding:5px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:12px;

}

.timeline-content p{

    color:#555;

    line-height:1.8;

}


/*=========================================================
                CTA SECTION
==========================================================*/

.cta-section{

    background:linear-gradient(135deg,#0B3D91,#164E9B);

    color:#fff;

    border-radius:20px;

    padding:60px;

    margin:70px 0;

    text-align:center;

}

.cta-section h2{

    font-size:38px;

    margin-bottom:20px;

}

.cta-section p{

    font-size:18px;

    color:#E8F0FF;

    max-width:800px;

    margin:auto auto 30px;

    line-height:1.8;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}


/*=========================================================
                DOWNLOAD CARD
==========================================================*/

.download-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fff;

    padding:25px;

    border-radius:16px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    margin-bottom:20px;

}

.download-info h3{

    color:#0B3D91;

    margin-bottom:8px;

}

.download-info p{

    color:#666;

}


/*=========================================================
                GALLERY
==========================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.gallery-grid img{

    width:100%;

    border-radius:16px;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.gallery-grid img:hover{

    transform:scale(1.04);

}


/*=========================================================
                TEAM CARD
==========================================================*/

.team-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.team-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    text-align:center;

    transition:.3s;

}

.team-card:hover{

    transform:translateY(-8px);

}

.team-card img{

    width:100%;

    height:280px;

    object-fit:cover;

}

.team-card h3{

    color:#0B3D91;

    margin-top:20px;

}

.team-card p{

    color:#666;

    padding-bottom:20px;

}


/*=========================================================
                UTILITIES
==========================================================*/

.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.pt-40{padding-top:40px;}
.pb-40{padding-bottom:40px;}

.p-20{padding:20px;}
.p-30{padding:30px;}

.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-justify{text-align:justify;}

.rounded{border-radius:18px;}

.shadow{

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.bg-white{

    background:#fff;

}

.bg-light{

    background:#F8FAFD;

}

.text-primary{

    color:#0B3D91;

}

.text-muted{

    color:#666;

}


/*=========================================================
                ANIMATIONS
==========================================================*/

.fade-up{

    animation:fadeUp .8s ease;

}

.fade-in{

    animation:fadeIn 1s ease;

}

.zoom-in{

    animation:zoomIn .7s ease;

}

.slide-left{

    animation:slideLeft .8s ease;

}

.slide-right{

    animation:slideRight .8s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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

@media(max-width:1200px){

.team-grid{
grid-template-columns:repeat(2,1fr);
}

.gallery-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:992px){

.download-card{
flex-direction:column;
align-items:flex-start;
gap:20px;
}

.cta-section{
padding:40px 30px;
}

.timeline{
padding-left:30px;
}

.timeline-dot{
left:-28px;
}

}

@media(max-width:768px){

.team-grid,

.gallery-grid{
grid-template-columns:1fr;
}

.cta-section h2{
font-size:30px;
}

.cta-section p{
font-size:16px;
}

.timeline-content{
padding:20px;
}

}

@media(max-width:576px){

.cta-buttons{
flex-direction:column;
}

.cta-buttons .btn{
width:100%;
}

.timeline{
padding-left:25px;
}

.timeline-dot{
width:18px;
height:18px;
left:-22px;
}

}


.profile-photo{
    width:160px;
    height:160px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    margin:0 auto 20px;
    border:5px solid #F4F7FB;
    box-shadow:0 8px 20px rgba(0,0,0,.10);
}


.profile-photo:hover{
    width:200px;
    height:200px;
    border-radius:10%;
    object-fit:cover;
    display:block;
    margin:0 auto 20px;
    border:5px solid #F4F7FB;
    box-shadow:0 8px 20px rgba(0,0,0,.10);
}


/*=========================================
            BRANCH CARD
=========================================*/

.branch-card{
    padding:22px;
}

.branch-card h3{
    font-size:22px;
    margin-bottom:12px;
    color:#0B3D91;
}

.branch-card p{
    font-size:14px;
    line-height:1.6;
    margin-bottom:12px;
}

.branch-card .btn{
    width:100%;
    margin-top:10px;
    padding:10px;
    font-size:14px;
}


/*=================================
			ROI List
================================*/
.interest-list{
    margin-top:5px;
}

.interest-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px dashed #dcdcdc;
}

.interest-item:last-child{
    border-bottom:none;
}

.interest-item span{
    color:#444;
    font-size:16px;
}

.interest-item strong{
    color:#0B3D91;
    font-size:16px;
    font-weight:700;
}

.highlight-rate{
    background:#F7FBFF;
    padding:16px 20px;
    border-radius:10px;
}


/*============================================
			Service Charges Related
============================================*/


.tariff-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-top:40px;
    margin-bottom:40px;
}

.tariff-card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    overflow:hidden;
}

.tariff-card h3{
    background:#0B3D91;
    color:#fff;
    padding:12px 18px;
    font-size:18px;
    margin:0;
}

.tariff-table{
    width:100%;
    border-collapse:collapse;
}

.tariff-table td{
    padding:8px 15px;
    font-size:14px;
    border-bottom:1px solid #ECECEC;
}

.tariff-table tr:last-child td{
    border-bottom:none;
}

.tariff-table td:last-child{
    text-align:right;
    color:#0B3D91;
    font-weight:600;
    white-space:nowrap;
}

.tariff-table tr:nth-child(even){
    background:#FAFBFD;
}

.tariff-table tr:hover{
    background:#F4F8FF;
}

@media(max-width:768px){

.tariff-grid{
grid-template-columns:1fr;
}

}


/*==========================================
		PDF Viwer
===========================================*/

.pdf-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    flex-wrap:wrap;
    gap:15px;
}

.pdf-viewer{
    width:100%;
    height:900px;
    border:1px solid #d9e3f0;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}

.pdf-viewer iframe{
    width:100%;
    height:100%;
    border:none;
}

@media(max-width:768px){

.pdf-viewer{
height:600px;
}

.pdf-header{
flex-direction:column;
align-items:flex-start;
}

}


/*========================================
		Image Banner Universal
========================================*/


.hero-banner{
    position:relative;
    width:100%;
    max-width:1920px;
    height:700px;
    margin-top:15px;
    overflow:hidden;
}

.slides{
    position:relative;
    width:100%;
    height:100%;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .8s ease;
}

.slide.active{
    opacity:1;
    z-index:1;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:fit;
    display:block;
}

/*========================================
        PREVIOUS / NEXT
========================================*/

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    color:#0B3D91;
    font-size:28px;
    cursor:pointer;
    transition:.3s;
    z-index:10;
}

.slider-btn:hover{
    background:#0B3D91;
    color:#fff;
}

.prev{
    left:25px;
}

.next{
    right:25px;
}

/*========================================
        MOBILE
========================================*/

@media(max-width:992px){
.hero-banner{
height:420px;
}

.slider-btn{
width:42px;
height:42px;
font-size:22px;
}
}

@media(max-width:576px){
.hero-banner{
height:260px;
}

.slider-btn{
width:36px;
height:36px;
font-size:18px;
left:10px;
}

.next{
right:10px;
}

}


/*=========================================
        FRONT PAGE HIGHLIGHTS
=========================================*/

.highlights-section{

    padding:80px 0;

}

.highlights-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:50px;

    align-items:center;

}

.highlights-cards{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.feature-card{

    background:#fff;

    border-radius:16px;

    padding:25px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.3s;

    border-top:4px solid #0B3D91;

}

.feature-card:hover{

    transform:translateY(-6px);

}

.feature-icon{

    font-size:34px;

    margin-bottom:15px;

}

.feature-card h3{

    color:#0B3D91;

    font-size:20px;

    margin-bottom:10px;

}

.feature-card p{

    color:#666;

    line-height:1.7;

    font-size:15px;

}

@media(max-width:992px){

.highlights-grid{

grid-template-columns:1fr;

}

.highlights-cards{

grid-template-columns:1fr;

}

}

/*=========================================
        ACCESSIBILITY WIDGET
==========================================*/

.accessibility-widget{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:99999;
}

.accessibility-btn{
    width:56px;
    height:56px;
    border:none;
    border-radius:50%;
    background:#0B3D91;
    color:#fff;
    font-size:28px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.accessibility-panel{
    position:absolute;
    right:0;
    bottom:70px;
    width:240px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.20);
    padding:15px;
    display:none;
}

.accessibility-panel.show{
    display:block;
}

.accessibility-panel h3{
    margin:0 0 10px;
    color:#0B3D91;
    font-size:18px;
}

.accessibility-panel button{
    width:100%;
    margin-bottom:8px;
    padding:10px;
    border:1px solid #ddd;
    background:#f7f7f7;
    cursor:pointer;
    border-radius:5px;
    transition:.3s;
}

.accessibility-panel button:hover{
    background:#0B3D91;
    color:#fff;
}

.high-contrast{
    background:#000 !important;
    color:#fff !important;
}

.high-contrast *{
    background:#000 !important;
    color:#fff !important;
    border-color:#FFD700 !important;
}


/*=======================================================
				FAQs Related
=========================================================*/
/*=========================================
            FAQ SECTION
=========================================*/

.faq-item{

    margin-bottom:15px;

    border:1px solid #e5e5e5;

    border-radius:8px;

    overflow:hidden;

    background:#fff;

}

.faq-item summary{

    padding:18px 20px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    color:#0B3D91;

    list-style:none;

    position:relative;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:20px;

    font-size:24px;

    color:#D4AF37;

}

.faq-item[open] summary::after{

    content:"−";

}

.faq-item p{

    padding:0 20px 20px;

    line-height:1.8;

    color:#555;

}


/* ===========================================
   FINAL MOBILE SAFETY / OVERFLOW CONTROL
=========================================== */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

@media (max-width:991px){

    .container{
        padding-left:15px;
        padding-right:15px;
    }

    section{
        padding:50px 0;
    }

    .hero{
        margin-top:15px;
        border-radius:8px;
    }

    .hero-wrapper{
        grid-template-columns:1fr;
        gap:30px;
    }

    .hero h2{
        font-size:32px;
    }

    .hero-buttons{
        flex-wrap:wrap;
        gap:10px;
    }

    .hero-stats{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
        margin-top:35px;
    }

    .contact-wrapper{
        grid-template-columns:1fr;
    }

    .about-hero{
        grid-template-columns:1fr;
        gap:35px;
    }

    .about-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .vision-mission{
        grid-template-columns:1fr;
    }

    .value-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:600px){

    .container{
        padding-left:12px;
        padding-right:12px;
    }

    section{
        padding:40px 0;
    }

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.65rem;
    }

    .hero h2{
        font-size:28px;
    }

    .hero-description{
        font-size:14px;
        line-height:1.7;
    }

    .hero-stats,
    .about-stats,
    .value-grid{
        grid-template-columns:1fr;
    }

    .highlights-grid,
    .highlights-cards{
        grid-template-columns:1fr;
    }

    .testimonial-card{
        grid-template-columns:1fr;
        text-align:center;
    }

    .testimonial-author{
        width:100%;
    }

    .contact-wrapper{
        gap:20px;
    }

    .about-page{
        margin:40px auto;
        padding:0 12px;
    }

    .about-text h1{
        font-size:30px;
    }

    .about-text p{
        font-size:15px;
    }

    .footer-top{
        grid-template-columns:1fr;
        padding:40px 15px;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

    .footer-left,
    .footer-center,
    .footer-right{
        text-align:center;
    }

    .table-wrapper{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}





/* =========================================================
   BILAGI BANK
   MOBILE NAVIGATION - FINAL OVERRIDE
   ========================================================= */

@media screen and (max-width: 991px) {

    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        z-index: 99999 !important;
    }


    /* -----------------------------------------------------
       HEADER INNER
       ----------------------------------------------------- */

    .header-inner {
        position: relative !important;

        width: 100% !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       HAMBURGER
       ----------------------------------------------------- */

    .nav-toggle {
        display: flex !important;

        position: relative !important;

        z-index: 100001 !important;

        width: 45px !important;
        height: 45px !important;

        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;

        cursor: pointer !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    .nav-toggle span {
        display: block !important;

        width: 24px !important;
        height: 2px !important;

        margin: 3px 0 !important;

        opacity: 1 !important;
    }


    /* -----------------------------------------------------
       NAVIGATION CLOSED
       ----------------------------------------------------- */

    .header .nav {
        display: none !important;

        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: auto !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        max-height: calc(100vh - 75px) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;

        z-index: 100000 !important;

        transform: none !important;
    }


    /* -----------------------------------------------------
       NAVIGATION OPEN
       ----------------------------------------------------- */

    .header .nav.mobile-open {
        display: block !important;

        position: absolute !important;

        top: 100% !important;
        left: 0 !important;

        width: 100% !important;

        max-width: 100% !important;

        transform: none !important;

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;
    }


    /* -----------------------------------------------------
       NAV LIST
       ----------------------------------------------------- */

    .header .nav .nav-list {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        box-sizing: border-box !important;
    }


    .header .nav .nav-list > li {

        display: block !important;

        position: relative !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       MAIN LINKS
       ----------------------------------------------------- */

    .header .nav .nav-list > li > .nav-link {

        display: flex !important;

        width: 100% !important;

        min-height: 50px !important;

        align-items: center !important;

        box-sizing: border-box !important;

        padding: 14px 20px !important;

        white-space: normal !important;
    }


    /* -----------------------------------------------------
       SUBMENU
       ----------------------------------------------------- */

    .header .nav .has-submenu > .submenu {

        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: none !important;

        float: none !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        transform: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    /* -----------------------------------------------------
       OPEN SUBMENU
       ----------------------------------------------------- */

    .header .nav
    .has-submenu.submenu-open
    > .submenu {

        display: block !important;

        position: static !important;

        left: auto !important;
        right: auto !important;

        width: 100% !important;

        max-width: 100% !important;

        transform: none !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    /* -----------------------------------------------------
       SUBMENU LINKS
       ----------------------------------------------------- */

    .header .nav .submenu a {

        display: block !important;

        position: relative !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 13px 20px 13px 38px !important;

        margin: 0 !important;

        white-space: normal !important;

        word-break: normal !important;
    }


    /* -----------------------------------------------------
       REMOVE DESKTOP HOVER POSITIONING
       ----------------------------------------------------- */

    .header .nav .has-submenu:hover > .submenu {

        display: none !important;
    }


    .header .nav
    .has-submenu.submenu-open:hover > .submenu {

        display: block !important;
    }


    /* -----------------------------------------------------
       RAISE ISSUE
       ----------------------------------------------------- */

    .header .nav
    .main-blue-button-hover {

        width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 575px) {

    .header .nav .nav-list > li > .nav-link {

        padding-left: 16px !important;
        padding-right: 16px !important;

    }

    .header .nav .submenu a {

        padding-left: 32px !important;

        padding-right: 16px !important;

    }

}