/* ==============================================
AAKASH COOPERATIVE - MAIN STYLESHEET
Green Theme Similar to Nepali Cooperative Sites
============================================== */
/* Color Variables */
:root {
--primary-color: #1a5f2a;
--primary-dark: #145021;
--primary-light: #28a745;
--secondary-color: #ffc107;
--accent-color: #17a2b8;
--text-color: #333333;
--text-light: #666666;
--white: #ffffff;
--light-bg: #f8f9fa;
--border-color: #e0e0e0;
--success: #28a745;
--danger: #dc3545;
--warning: #ffc107;
--info: #17a2b8;
}
/* ==============================================
WHATSAPP FLOATING BUTTON
============================================== */
.whatsapp-float {
position: fixed;
left: 25px;
bottom: 25px;
width: 60px;
height: 60px;
background: #25D366;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
z-index: 9998;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
animation: whatsapp-pulse 2s infinite;
}
.whatsapp-float:hover {
background: #128C7E;
color: #fff;
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}
@keyframes whatsapp-pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
}
70% {
box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
@media (max-width: 767px) {
.whatsapp-float {
left: 15px;
bottom: 15px;
width: 50px;
height: 50px;
font-size: 26px;
}
}
/* ==============================================
SCROLL PROGRESS BAR
============================================== */
.scroll-progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(0, 0, 0, 0.1);
z-index: 99999;
}
.scroll-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
transition: width 0.1s ease-out;
border-radius: 0 2px 2px 0;
box-shadow: 0 0 10px rgba(26, 95, 42, 0.5);
}
/* ==============================================
SCROLL NAVIGATION BUTTONS
============================================== */
.scroll-nav {
position: fixed;
right: 25px;
bottom: 30px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateX(20px);
transition: all 0.3s ease;
}
.scroll-nav.show {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.scroll-btn {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.scroll-btn.up {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
}
.scroll-btn.down {
background: var(--white);
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.scroll-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.scroll-btn.up:hover {
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
}
.scroll-btn.down:hover {
background: var(--primary-color);
color: var(--white);
}
/* Scroll percentage indicator */
.scroll-percent {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: var(--primary-dark);
color: var(--white);
padding: 4px 10px;
border-radius: 15px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
}
.scroll-nav:hover .scroll-percent {
opacity: 1;
}
@media (max-width: 767px) {
.scroll-nav {
right: 15px;
bottom: 15px;
}
.scroll-btn {
width: 45px;
height: 45px;
font-size: 16px;
}
.scroll-percent {
display: none;
}
}
/* ==============================================
PAGE LOADER
============================================== */
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.loaded {
opacity: 0;
visibility: hidden;
}
.loader-inner {
text-align: center;
}
.loader-logo {
margin-bottom: 30px;
animation: pulse 1.5s ease-in-out infinite;
display: none; /* Hide logo during loading */
}
.loader-spinner-wrap {
margin-bottom: 30px;
}
.loader-spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(255,255,255,0.3);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loader-logo img {
width: 100px;
height: 100px;
object-fit: contain;
background: var(--white);
border-radius: 50%;
padding: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.loader-progress {
width: 180px;
margin: 0 auto 15px;
}
.progress-bar {
width: 100%;
height: 5px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
}
.progress-fill {
width: 0%;
height: 100%;
background: linear-gradient(90deg, var(--secondary-color), #ffd54f);
border-radius: 3px;
transition: width 0.1s ease;
}
.progress-text {
color: var(--white);
font-size: 20px;
font-weight: 700;
}
.loader-text {
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Utility Classes */
.cursor-pointer {
cursor: pointer;
}
body {
font-family: 'Mukta', sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text-color);
background: var(--white);
/* Improved text rendering for Nepali/Devanagari */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Ensure proper rendering for Nepali text */
html[lang="ne"], html[lang="np"],
body.lang-ne, body.lang-np {
font-feature-settings: "liga" 1, "kern" 1;
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--primary-light);
}
img {
max-width: 100%;
height: auto;
}
/* ==============================================
TOP BAR
============================================== */
.top-bar {
background: var(--primary-dark);
color: var(--white);
padding: 8px 0;
font-size: 14px;
}
.top-bar .top-info {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 0;
padding: 0;
}
.top-bar .top-info li {
display: flex;
align-items: center;
gap: 6px;
}
.top-bar .top-info i {
color: var(--secondary-color);
}
.top-bar .social-links {
list-style: none;
display: flex;
gap: 10px;
margin: 0;
padding: 0;
justify-content: flex-end;
}
.top-bar .social-links a {
width: 30px;
height: 30px;
background: rgba(255,255,255,0.1);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s;
}
.top-bar .social-links a:hover {
background: var(--secondary-color);
color: var(--primary-dark);
}
/* Language Switch */
.lang-switch {
display: flex;
align-items: center;
gap: 5px;
margin-right: 15px;
}
.lang-btn {
color: rgba(255,255,255,0.7) !important;
font-weight: 500;
font-size: 13px;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.3s;
}
.lang-btn:hover,
.lang-btn.active {
color: var(--white) !important;
background: rgba(255,255,255,0.15);
}
.lang-divider {
color: rgba(255,255,255,0.4);
font-size: 12px;
}
/* Internet Banking Button */
.internet-banking-btn {
margin-right: 10px;
}
.internet-banking-btn a {
background: var(--secondary-color) !important;
color: var(--primary-dark) !important;
padding: 6px 15px !important;
border-radius: 20px !important;
font-weight: 600 !important;
font-size: 12px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
width: auto !important;
height: auto !important;
}
.internet-banking-btn a:hover {
background: var(--white) !important;
color: var(--primary-color) !important;
}
/* ==============================================
MAIN HEADER
============================================== */
.main-header {
background: var(--white);
padding: 12px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
@media (max-width: 767px) {
.main-header {
padding: 10px 0;
}
}
/* Banner Style Logo - Wide logo with name/slogan embedded */
.logo-banner {
display: flex;
align-items: center;
}
.logo-banner-link {
display: block;
line-height: 0;
}
.logo-banner-img {
height: 60px;
width: auto;
max-width: 100%;
object-fit: contain;
/* High quality image rendering for logos */
image-rendering: -webkit-optimize-contrast;
image-rendering: high-quality;
image-rendering: crisp-edges;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
-webkit-font-smoothing: antialiased;
/* Prevent blur on retina displays */
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Ensure sharp edges */
filter: contrast(1);
}
@media (max-width: 991px) {
.logo-banner-img {
height: 52px;
}
}
@media (max-width: 767px) {
.logo-banner-img {
height: 46px;
}
}
@media (max-width: 480px) {
.logo-banner-img {
height: 42px;
}
}
/* Old Logo Style (kept for compatibility) */
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.logo img {
max-height: 60px;
width: auto;
}
.logo-text {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 220px;
}
.logo-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1.25;
text-align: left;
word-wrap: break-word;
overflow-wrap: break-word;
}
.logo-slogan {
font-size: 0.72rem;
color: var(--text-light);
text-align: left;
margin-top: 2px;
}
/* Navigation */
.main-nav {
display: flex;
justify-content: flex-end;
}
.nav-menu {
list-style: none;
display: flex;
gap: 5px;
margin: 0;
padding: 0;
}
.nav-menu > li {
position: relative;
}
.nav-menu > li > a {
display: flex;
align-items: center;
gap: 5px;
padding: 12px 18px;
color: var(--text-color);
font-weight: 500;
border-radius: 5px;
transition: all 0.3s;
}
.nav-menu > li > a:hover,
.nav-menu > li.active > a {
background: var(--primary-color);
color: var(--white);
}
/* Dropdown */
.nav-menu .dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: var(--white);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
border-radius: 8px;
padding: 10px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s;
list-style: none;
}
.nav-menu .has-dropdown:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-menu .dropdown li a {
display: block;
padding: 10px 20px;
color: var(--text-color);
}
.nav-menu .dropdown li a:hover {
background: var(--light-bg);
color: var(--primary-color);
}
/* Mobile Menu */
.mobile-menu-toggle {
display: none;
background: var(--primary-color);
color: var(--white);
border: none;
padding: 12px 16px;
font-size: 22px;
border-radius: 5px;
cursor: pointer;
position: relative;
z-index: 1001;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus,
.mobile-menu-toggle:active {
background: var(--primary-dark);
outline: none;
}
.close-menu {
display: none;
}
@media (max-width: 991px) {
.mobile-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
float: right;
margin-top: 5px;
}
/* Main nav styles moved to MOBILE MENU FIXES section below for consistency */
.close-menu {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 15px;
right: 15px;
background: var(--light-bg);
border: none;
font-size: 24px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 100001;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.close-menu:hover,
.close-menu:active {
background: var(--border-color);
}
.nav-menu {
flex-direction: column;
margin-top: 10px;
width: 100%;
}
.nav-menu > li {
width: 100%;
}
.nav-menu > li > a {
padding: 15px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.nav-menu .dropdown {
position: static;
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
transform: none;
box-shadow: none;
padding-left: 20px;
transition: all 0.3s ease-in-out;
background: var(--light-bg);
border-radius: 0;
}
.nav-menu .has-dropdown.open .dropdown {
opacity: 1;
visibility: visible;
max-height: 500px;
padding: 10px 0 10px 20px;
}
.nav-menu .dropdown li a {
padding: 12px 15px;
display: block;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.nav-menu .has-dropdown > a i {
transition: transform 0.3s;
}
.nav-menu .has-dropdown.open > a i {
transform: rotate(180deg);
}
/* Menu overlay styles moved to MOBILE MENU FIXES section below */
}
/* ==============================================
NOTICE TICKER (Scrolling Notices)
============================================== */
.notice-ticker {
background: #fff8e1;
border-bottom: 2px solid var(--secondary-color);
padding: 0;
}
.ticker-wrapper {
display: flex;
align-items: stretch;
margin-left: 0;
margin-right: 0;
}
.ticker-label {
background: var(--primary-color);
color: var(--white);
padding: 12px 20px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
position: relative;
flex-shrink: 0;
margin-left: 0;
}
.ticker-label::after {
content: '';
position: absolute;
right: -15px;
top: 0;
border-style: solid;
border-width: 22px 0 22px 15px;
border-color: transparent transparent transparent var(--primary-color);
}
.ticker-label i {
font-size: 16px;
}
.ticker-content {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
padding-left: 25px;
margin-left: 0;
}
.ticker-scroll {
display: flex;
gap: 50px;
animation: tickerScroll 30s linear infinite;
white-space: nowrap;
padding-left: 10px;
}
.ticker-scroll:hover {
animation-play-state: paused;
}
@keyframes tickerScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.ticker-item {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text-color);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: color 0.3s;
}
.ticker-item:hover {
color: var(--primary-color);
}
.ticker-item i {
font-size: 6px;
color: var(--primary-color);
}
@media (max-width: 767px) {
.ticker-label {
padding: 10px 15px;
font-size: 12px;
}
.ticker-label span {
display: none;
}
.ticker-label::after {
border-width: 18px 0 18px 15px;
right: -15px;
}
.ticker-content {
padding-left: 20px;
}
.ticker-item {
font-size: 13px;
}
}
/* ==============================================
POPUP NOTICE MODAL - Enhanced UI/UX
============================================== */
.notice-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: popupOverlayIn 0.3s ease;
}
@keyframes popupOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
.popup-content {
background: var(--white);
border-radius: 20px;
max-width: 520px;
width: 100%;
position: relative;
animation: popupIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.1);
overflow: hidden;
}
@keyframes popupIn {
from {
opacity: 0;
transform: scale(0.85) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.popup-close {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255,255,255,0.2);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
z-index: 10;
backdrop-filter: blur(10px);
}
.popup-close:hover {
background: rgba(255,255,255,0.35);
transform: rotate(90deg);
}
.popup-header {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
padding: 30px 25px;
text-align: center;
position: relative;
overflow: hidden;
}
.popup-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
animation: popupHeaderGlow 3s ease-in-out infinite;
}
@keyframes popupHeaderGlow {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(10%, 10%); }
}
.popup-header i {
font-size: 48px;
margin-bottom: 12px;
display: block;
position: relative;
animation: popupIconBounce 1s ease-in-out;
}
@keyframes popupIconBounce {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.popup-header h3 {
margin: 0;
font-size: 1.6rem;
font-weight: 700;
position: relative;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.popup-body {
padding: 30px;
max-height: 400px;
overflow-y: auto;
}
.popup-body h4 {
color: var(--primary-color);
margin-bottom: 15px;
font-size: 1.25rem;
font-weight: 600;
border-left: 4px solid var(--primary-color);
padding-left: 12px;
}
.popup-body p {
color: var(--text-color);
line-height: 1.8;
margin-bottom: 20px;
font-size: 15px;
}
.popup-body .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-weight: 600;
border-radius: 10px;
transition: all 0.3s;
}
.popup-body .btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(26, 95, 42, 0.3);
}
@media (max-width: 576px) {
.popup-content {
margin: 10px;
border-radius: 16px;
}
.popup-header {
padding: 25px 20px;
}
.popup-header i {
font-size: 40px;
}
.popup-header h3 {
font-size: 1.3rem;
}
.popup-body {
padding: 20px;
max-height: 300px;
}
.popup-body h4 {
font-size: 1.1rem;
}
}
/* ==============================================
HERO SLIDER - Enhanced Eye-Catching Design
============================================== */
.hero-slider {
position: relative;
overflow: hidden;
}
.slider-bg {
height: 550px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
}
.slider-bg.default-slider {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}
.slider-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.85) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.slider-content {
position: relative;
z-index: 2;
color: var(--white);
max-width: 750px;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slider-content h1 {
font-size: 3.2rem;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
line-height: 1.2;
position: relative;
}
.slider-content h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--secondary-color), transparent);
border-radius: 2px;
}
.slider-content p {
font-size: 1.3rem;
margin-bottom: 30px;
opacity: 0.95;
margin-top: 25px;
line-height: 1.7;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.slider-content .btn {
padding: 14px 35px;
font-weight: 600;
font-size: 1rem;
border-radius: 30px;
background: linear-gradient(135deg, var(--secondary-color), #ffca2c);
border: none;
color: var(--primary-dark);
box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.slider-content .btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 35px rgba(255, 193, 7, 0.5);
}
.slider-content .btn i {
transition: transform 0.3s ease;
}
.slider-content .btn:hover i {
transform: translateX(5px);
}
/* Carousel controls enhancement */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
width: 60px;
height: 60px;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.15);
border-radius: 50%;
opacity: 0.8;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.hero-slider .carousel-control-prev:hover,
.hero-slider .carousel-control-next:hover {
background: var(--secondary-color);
opacity: 1;
}
.hero-slider .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 6px;
border: 2px solid rgba(255,255,255,0.5);
background: transparent;
transition: all 0.3s ease;
}
.hero-slider .carousel-indicators button.active {
background: var(--secondary-color);
border-color: var(--secondary-color);
transform: scale(1.2);
}
@media (max-width: 991px) {
.slider-bg {
height: 450px;
}
.slider-content h1 {
font-size: 2.4rem;
}
.slider-content p {
font-size: 1.1rem;
}
}
@media (max-width: 767px) {
.slider-bg {
height: 380px;
}
.slider-content h1 {
font-size: 1.9rem;
}
.slider-content p {
font-size: 1rem;
margin-bottom: 20px;
}
.slider-content .btn {
padding: 12px 25px;
font-size: 0.9rem;
}
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
width: 45px;
height: 45px;
}
}
/* ==============================================
SECTIONS - Enhanced with Eye-Catching Headers
============================================== */
.section-padding {
padding: 70px 0;
}
.section-header {
margin-bottom: 50px;
position: relative;
}
.section-header h2 {
font-size: 2.2rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 12px;
position: relative;
display: inline-block;
}
.section-header.text-center h2::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
border-radius: 2px;
}
.section-header h2::before {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: var(--secondary-color);
border-radius: 50%;
z-index: 1;
box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2);
}
.section-header p {
color: var(--text-light);
font-size: 1.1rem;
margin-top: 20px;
}
/* ==============================================
SERVICE CARDS - Enhanced Eye-Catching Design
============================================== */
.service-card {
background: var(--white);
padding: 35px 25px;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 100%;
position: relative;
overflow: hidden;
border: 1px solid rgba(26, 95, 42, 0.08);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
transform: scaleX(0);
transition: transform 0.4s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(26, 95, 42, 0.2);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-icon {
width: 90px;
height: 90px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
transition: all 0.4s ease;
box-shadow: 0 10px 25px rgba(26, 95, 42, 0.3);
}
.service-icon::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 24px;
border: 2px dashed rgba(26, 95, 42, 0.3);
opacity: 0;
transition: all 0.4s ease;
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
border-radius: 50%;
}
.service-card:hover .service-icon::after {
opacity: 1;
animation: spin 8s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.service-icon i {
font-size: 36px;
color: var(--white);
transition: transform 0.3s ease;
}
.service-card:hover .service-icon i {
transform: scale(1.1);
}
.service-card h4 {
font-size: 1.3rem;
margin-bottom: 12px;
color: var(--text-color);
font-weight: 600;
transition: color 0.3s ease;
}
.service-card:hover h4 {
color: var(--primary-color);
}
.service-card p {
color: var(--text-light);
margin-bottom: 18px;
line-height: 1.6;
}
.service-link {
color: var(--primary-color);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 25px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.08), rgba(26, 95, 42, 0.12));
transition: all 0.3s ease;
}
.service-link:hover {
background: var(--primary-color);
color: var(--white);
transform: translateX(5px);
}
.service-link i {
transition: transform 0.3s ease;
}
.service-link:hover i {
transform: translateX(3px);
}
/* Service Detail Card */
.service-detail-card {
background: var(--white);
padding: 35px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
height: 100%;
border-top: 4px solid var(--primary-color);
}
.service-icon-lg {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.service-icon-lg i {
font-size: 28px;
color: var(--white);
}
.service-detail-card h4 {
margin-bottom: 15px;
color: var(--primary-color);
}
.service-features {
list-style: none;
padding: 0;
margin-top: 20px;
}
.service-features li {
padding: 8px 0;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: 10px;
}
.service-features li i {
color: var(--primary-light);
}
/* ==============================================
INTEREST RATES - Enhanced Eye-Catching Design
============================================== */
.rates-box, .notices-box {
background: var(--white);
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
padding: 30px;
height: 100%;
transition: all 0.4s ease;
border: 1px solid rgba(0,0,0,0.05);
}
.rates-box:hover, .notices-box:hover {
box-shadow: 0 15px 45px rgba(26, 95, 42, 0.15);
}
.rate-card {
background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 14px;
padding: 22px;
margin-bottom: 20px;
border: 1px solid rgba(0,0,0,0.06);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.rate-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--primary-color);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.rate-card:hover::before {
transform: scaleY(1);
}
.rate-card:hover {
transform: translateX(5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.rate-card h5 {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
color: var(--primary-color);
font-weight: 600;
font-size: 1.05rem;
}
.rate-card h5 i {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 16px;
}
.rate-card.saving h5 i {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), rgba(40, 167, 69, 0.25));
color: var(--primary-light);
}
.rate-card.loan h5 i {
background: linear-gradient(135deg, rgba(23, 162, 184, 0.15), rgba(23, 162, 184, 0.25));
color: var(--accent-color);
}
.rate-card .table {
margin-bottom: 0;
font-size: 14px;
border-collapse: separate;
border-spacing: 0;
}
.rate-card .table td {
padding: 14px 12px;
border-bottom: 1px solid rgba(0,0,0,0.10);
transition: background 0.2s ease;
vertical-align: middle;
line-height: 1.5;
}
.rate-card .table tbody tr:last-child td {
border-bottom: none;
}
.rate-card .table tr:hover td {
background: rgba(26, 95, 42, 0.06);
}
.rate-card .table td:first-child {
font-weight: 500;
color: var(--text-color);
}
.rate-card .table td:last-child {
text-align: right;
padding-right: 8px;
}
.rate-value {
font-weight: 700;
color: var(--primary-color);
text-align: center;
font-size: 1.15rem;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.08), rgba(26, 95, 42, 0.15));
padding: 10px 16px;
border-radius: 8px;
display: inline-block;
white-space: nowrap;
line-height: 1.3;
min-width: 90px;
letter-spacing: 0.5px;
}
/* Rates Page */
.rates-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
overflow: hidden;
}
.rates-header {
background: var(--primary-color);
color: var(--white);
padding: 20px 25px;
display: flex;
align-items: center;
gap: 12px;
}
.rates-header.loan {
background: var(--accent-color);
}
.rates-header i {
font-size: 28px;
}
.rates-header h3 {
margin: 0;
font-size: 1.3rem;
}
.rates-body {
padding: 20px;
}
.rates-table th {
background: var(--light-bg);
}
.rate-badge {
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-weight: 700;
font-size: 14px;
}
.rate-badge.saving {
background: rgba(40, 167, 69, 0.1);
color: var(--primary-light);
}
.rate-badge.loan {
background: rgba(23, 162, 184, 0.1);
color: var(--accent-color);
}
.rates-note {
background: #fff3cd;
border-left: 4px solid var(--secondary-color);
padding: 20px 25px;
border-radius: 0 8px 8px 0;
}
.rates-note h5 {
color: #856404;
margin-bottom: 15px;
}
.rates-note ul {
margin: 0;
padding-left: 20px;
}
.rates-note li {
margin-bottom: 8px;
}
/* ==============================================
MODERN RATES CARD DESIGN
============================================== */
.rates-card-modern {
background: var(--white);
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
overflow: hidden;
height: 100%;
transition: all 0.3s ease;
}
.rates-card-modern:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.rates-header-modern {
padding: 25px;
display: flex;
align-items: center;
gap: 18px;
background: linear-gradient(145deg, #fafafa, #f5f5f5);
border-bottom: 1px solid #eee;
}
.rates-icon {
width: 60px;
height: 60px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
flex-shrink: 0;
}
.rates-icon.saving {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: var(--primary-color);
}
.rates-icon.loan {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1565c0;
}
.rates-header-modern h3 {
margin: 0 0 3px;
font-size: 1.3rem;
color: var(--text-color);
}
.rates-header-modern p {
margin: 0;
font-size: 0.85rem;
color: var(--text-light);
}
.rates-body-modern {
padding: 10px 0;
}
.rate-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 25px;
border-bottom: 1px solid #f5f5f5;
transition: background 0.2s ease;
}
.rate-item:last-child {
border-bottom: none;
}
.rate-item:hover {
background: #fafafa;
}
.rate-info {
flex: 1;
}
.rate-info strong {
display: block;
color: var(--text-color);
font-size: 1rem;
margin-bottom: 3px;
}
.rate-info small {
color: var(--text-light);
font-size: 0.85rem;
}
.rate-value {
font-size: 1.5rem;
font-weight: 700;
padding: 8px 16px;
border-radius: 10px;
min-width: 90px;
text-align: center;
}
.rate-value span {
font-size: 0.9rem;
font-weight: 500;
}
.rate-value.saving {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: var(--primary-color);
}
.rate-value.loan {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1565c0;
}
.rate-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-light);
}
.rate-empty i {
font-size: 40px;
margin-bottom: 10px;
color: #ddd;
}
.rate-empty p {
margin: 0;
}
@media (max-width: 767px) {
.rates-header-modern {
padding: 20px;
}
.rates-icon {
width: 50px;
height: 50px;
font-size: 22px;
}
.rates-header-modern h3 {
font-size: 1.1rem;
}
.rate-item {
padding: 14px 20px;
}
.rate-value {
font-size: 1.2rem;
padding: 6px 12px;
min-width: 75px;
}
}
/* ==============================================
NOTICES
============================================== */
.notices-list {
max-height: 350px;
overflow-y: auto;
}
.notice-item {
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
}
.notice-item:last-child {
border-bottom: none;
}
.notice-date {
font-size: 12px;
color: var(--text-light);
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 5px;
}
.notice-item h6 {
margin: 0;
}
.notice-item h6 a {
color: var(--text-color);
}
.notice-item h6 a:hover {
color: var(--primary-color);
}
/* Notice Card */
.notice-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
padding: 25px;
display: flex;
gap: 20px;
position: relative;
transition: all 0.3s;
}
.notice-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.notice-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.notice-icon i {
font-size: 20px;
color: var(--white);
}
.notice-card .notice-content {
flex: 1;
}
.notice-card h5 {
margin-bottom: 8px;
}
.notice-card h5 a {
color: var(--text-color);
}
.notice-card h5 a:hover {
color: var(--primary-color);
}
.notice-card p {
color: var(--text-light);
margin-bottom: 10px;
font-size: 14px;
}
.read-more {
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
display: inline-flex;
align-items: center;
gap: 5px;
}
.notice-attachment-icon {
position: absolute;
top: 15px;
right: 15px;
}
.notice-attachment-icon a {
color: var(--text-light);
}
/* Notice Detail */
.notice-detail-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
padding: 35px;
}
.notice-detail-card .notice-header {
border-bottom: 2px solid var(--primary-color);
padding-bottom: 20px;
margin-bottom: 25px;
}
.notice-detail-card h2 {
color: var(--text-color);
margin-top: 10px;
}
.notice-detail-card .notice-content {
line-height: 1.8;
margin-bottom: 25px;
}
.notice-detail-card .notice-attachment {
background: var(--light-bg);
padding: 20px;
border-radius: 8px;
margin-bottom: 25px;
}
.notice-detail-card .notice-footer {
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
/* ==============================================
FEATURES / WHY US
============================================== */
.feature-box {
background: var(--white);
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
text-align: center;
height: 100%;
transition: all 0.3s;
}
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.feature-icon i {
font-size: 28px;
color: var(--white);
}
.feature-box h5 {
margin-bottom: 12px;
color: var(--text-color);
}
.feature-box p {
color: var(--text-light);
font-size: 14px;
margin: 0;
}
/* ==============================================
MOBILE APP SECTION
============================================== */
.mobile-app-section {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
padding: 80px 0;
color: var(--white);
position: relative;
overflow: hidden;
}
.mobile-app-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.app-content {
position: relative;
z-index: 1;
}
.app-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
color: var(--white);
}
.app-content h3 {
font-size: 2rem;
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 20px;
}
.app-tagline {
font-size: 1.3rem;
color: var(--primary-light);
margin-bottom: 15px;
font-weight: 500;
}
.app-description {
font-size: 1rem;
opacity: 0.9;
line-height: 1.7;
margin-bottom: 30px;
}
.app-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.app-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 25px;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s;
}
.app-btn i {
font-size: 28px;
}
.app-btn span {
display: flex;
flex-direction: column;
text-align: left;
}
.app-btn span small {
font-size: 10px;
text-transform: uppercase;
opacity: 0.9;
}
.app-btn.google-play {
background: var(--primary-color);
color: var(--white);
}
.app-btn.google-play:hover {
background: var(--primary-light);
transform: translateY(-3px);
}
.app-btn.app-store {
background: var(--white);
color: var(--text-color);
}
.app-btn.app-store:hover {
background: var(--secondary-color);
color: var(--primary-dark);
transform: translateY(-3px);
}
.app-image {
position: relative;
z-index: 1;
}
.app-image img {
max-width: 350px;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}
.app-mockup {
display: none;
width: 200px;
height: 350px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 30px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.app-mockup i {
font-size: 80px;
color: rgba(255,255,255,0.3);
}
.app-image img + .app-mockup {
display: none;
}
@media (max-width: 991px) {
.app-content h2 {
font-size: 1.8rem;
}
.app-content h3 {
font-size: 1.5rem;
}
.app-mockup {
width: 160px;
height: 280px;
}
}
@media (max-width: 767px) {
.mobile-app-section {
padding: 50px 0;
}
.app-content h2 {
font-size: 1.5rem;
}
.app-content h3 {
font-size: 1.2rem;
}
.app-buttons {
justify-content: center;
}
.app-btn {
padding: 10px 20px;
}
.app-btn i {
font-size: 22px;
}
}
/* ==============================================
APP FEATURES SECTION
============================================== */
.app-features-section {
background: var(--white);
}
.section-badge-wrap {
margin-bottom: 15px;
}
.section-badge {
display: inline-block;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
padding: 8px 20px;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(26, 95, 42, 0.25);
}
.section-divider {
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
margin: 15px auto;
border-radius: 2px;
}
.section-divider::before {
content: '';
display: block;
width: 12px;
height: 12px;
background: var(--accent-color);
border-radius: 50%;
margin: -4px auto 0;
}
.app-features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
}
.app-feature-item {
background: #f8f9fa;
border-radius: 16px;
padding: 30px 20px;
text-align: center;
position: relative;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.app-feature-item:hover {
background: var(--white);
border-color: var(--primary-light);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(46, 125, 50, 0.15);
}
.app-feature-item.has-new-badge {
background: linear-gradient(135deg, rgba(46, 125, 50, 0.05), rgba(76, 175, 80, 0.08));
border-color: rgba(46, 125, 50, 0.2);
}
.new-badge {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: var(--white);
font-size: 10px;
font-weight: 700;
padding: 5px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
animation: pulse-badge 2s infinite;
box-shadow: 0 3px 10px rgba(238, 90, 36, 0.4);
}
@keyframes pulse-badge {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.feature-icon-wrap {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
transition: all 0.3s ease;
}
.app-feature-item:hover .feature-icon-wrap {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(46, 125, 50, 0.3);
}
.feature-icon-wrap i {
font-size: 28px;
color: var(--white);
}
.app-feature-item h5 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-dark);
}
@media (max-width: 991px) {
.app-features-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
@media (max-width: 767px) {
.app-features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.app-feature-item {
padding: 20px 15px;
}
.feature-icon-wrap {
width: 55px;
height: 55px;
}
.feature-icon-wrap i {
font-size: 22px;
}
.app-feature-item h5 {
font-size: 0.85rem;
}
.new-badge {
font-size: 8px;
padding: 4px 8px;
top: -5px;
right: -5px;
}
}
@media (max-width: 400px) {
.app-features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.app-feature-item {
padding: 15px 10px;
}
}
/* Hidden Feature Items - Show More/Less Functionality */
.app-feature-item.hidden-feature {
display: none;
}
.app-feature-item.hidden-feature.show {
display: block;
animation: fadeInUp 0.4s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#showMoreFeatures,
#showLessFeatures {
transition: all 0.3s ease;
}
#showMoreFeatures .feature-count {
opacity: 0.8;
font-size: 0.9em;
margin-left: 5px;
}
#showMoreFeatures:hover,
#showLessFeatures:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* ==============================================
CTA SECTION
============================================== */
.cta-section {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
padding: 50px 0;
}
.cta-content {
color: var(--white);
}
.cta-content h2 {
font-size: 2rem;
margin-bottom: 10px;
}
.cta-content p {
opacity: 0.9;
margin-bottom: 0;
}
.cta-content .btn-light {
color: var(--primary-color);
font-weight: 600;
}
/* ==============================================
PAGE BANNER
============================================== */
.page-banner {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
padding: 50px 0;
text-align: center;
color: var(--white);
}
.page-banner h1 {
font-size: 2.2rem;
margin-bottom: 15px;
}
.page-banner .breadcrumb {
justify-content: center;
margin: 0;
}
.page-banner .breadcrumb-item a {
color: rgba(255,255,255,0.8);
}
.page-banner .breadcrumb-item.active {
color: var(--white);
}
.page-banner .breadcrumb-item + .breadcrumb-item::before {
color: rgba(255,255,255,0.6);
}
/* ==============================================
ABOUT PAGE
============================================== */
.about-image img {
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.about-content h2 {
color: var(--primary-color);
margin-bottom: 20px;
}
.about-content h4 {
color: var(--text-color);
margin-top: 25px;
margin-bottom: 10px;
}
/* Mission Vision Values */
.mvv-card {
background: var(--white);
padding: 35px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
text-align: center;
height: 100%;
}
.mvv-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.mvv-icon i {
font-size: 32px;
color: var(--white);
}
.mvv-card h4 {
color: var(--primary-color);
margin-bottom: 15px;
}
/* Statistics */
.stats-section {
background: var(--primary-dark);
padding: 50px 0;
}
.stat-box {
text-align: center;
color: var(--white);
}
.stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--secondary-color);
}
.stat-label {
font-size: 1.1rem;
opacity: 0.9;
}
/* ==============================================
TEAM - New Modern Design with Full Photo Display
============================================== */
.team-card {
background: var(--white);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
overflow: hidden;
text-align: center;
transition: all 0.4s ease;
border: 1px solid rgba(0,0,0,0.04);
height: 100%;
display: flex;
flex-direction: column;
}
.team-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(26, 95, 42, 0.15);
border-color: var(--primary-color);
}
.team-photo {
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 20px 20px 0;
display: flex;
justify-content: center;
align-items: flex-end;
min-height: 220px;
}
/* Photo wrapper - circular or rectangular based on preference */
.team-photo-wrapper {
position: relative;
width: 160px;
height: 200px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
background: #fff;
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center; /* Keep face/top visible */
transition: transform 0.4s ease;
}
.team-card:hover .team-photo img {
transform: scale(1.05);
}
/* Placeholder for members without photos */
.team-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
}
.team-placeholder i {
font-size: 50px;
color: #adb5bd;
}
/* Team member info section */
.team-info {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.team-info h5 {
margin-bottom: 6px;
color: var(--text-color);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
}
.team-info .position {
color: var(--primary-color);
font-size: 14px;
font-weight: 500;
padding: 4px 12px;
background: rgba(26, 95, 42, 0.08);
border-radius: 20px;
display: inline-block;
margin: 0 auto;
}
.team-contact {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 10px;
}
.team-contact a {
width: 38px;
height: 38px;
background: linear-gradient(135deg, var(--light-bg), #e9ecef);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
transition: all 0.3s ease;
font-size: 14px;
}
.team-contact a:hover {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(26, 95, 42, 0.3);
}
/* Alternative: Circular photo design */
.team-card.circular .team-photo {
padding: 25px 20px 15px;
min-height: auto;
}
.team-card.circular .team-photo-wrapper {
width: 140px;
height: 140px;
border-radius: 50%;
border: 4px solid var(--white);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
/* Small variant for committees etc */
.team-card.small .team-photo {
padding: 15px 15px 0;
min-height: 160px;
}
.team-card.small .team-photo-wrapper {
width: 120px;
height: 150px;
}
.team-card.small .team-info {
padding: 15px;
}
.team-card.small h6 {
margin-bottom: 3px;
font-size: 14px;
}
.team-card.small .position {
font-size: 12px;
padding: 3px 10px;
}
/* Responsive adjustments */
@media (max-width: 991px) {
.team-photo-wrapper {
width: 140px;
height: 175px;
}
.team-photo {
min-height: 200px;
}
}
@media (max-width: 575px) {
.team-photo {
padding: 15px 15px 0;
min-height: 180px;
}
.team-photo-wrapper {
width: 120px;
height: 150px;
}
.team-info h5 {
font-size: 1rem;
}
}
/* ==============================================
CIRCULAR TEAM CARD DESIGN - Like bandanasigdel.com.np
============================================== */
.team-card-circular {
background: var(--white);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: visible;
text-align: center;
transition: all 0.4s ease;
height: 100%;
display: flex;
flex-direction: column;
padding: 30px 20px 25px;
border: 1px solid rgba(0,0,0,0.05);
}
.team-card-circular:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(26, 95, 42, 0.18);
}
.team-card-circular.featured {
border: 2px solid var(--primary-color);
box-shadow: 0 8px 30px rgba(26, 95, 42, 0.15);
background: linear-gradient(135deg, #f8fff9 0%, #ffffff 100%);
}
.team-card-circular.featured .team-position-badge {
background: var(--primary-color);
color: var(--white);
}
/* Circular Photo with Green Border */
.team-photo-circular {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto 20px;
border-radius: 50%;
padding: 4px;
background: linear-gradient(145deg, var(--primary-color), var(--primary-light));
box-shadow: 0 8px 25px rgba(26, 95, 42, 0.25);
transition: all 0.4s ease;
}
.team-card-circular:hover .team-photo-circular {
transform: scale(1.05);
box-shadow: 0 12px 35px rgba(26, 95, 42, 0.35);
}
.team-photo-circular img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
border-radius: 50%;
background: var(--white);
border: 3px solid var(--white);
}
/* Placeholder for members without photos */
.team-placeholder-circular {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #f5f5f5, #e8e8e8);
border-radius: 50%;
border: 3px solid var(--white);
}
.team-placeholder-circular i {
font-size: 55px;
color: #ccc;
}
/* Team Info Section */
.team-info-circular {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.team-info-circular h5 {
margin: 0 0 5px;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color);
line-height: 1.3;
}
.team-info-circular h6 {
margin: 0 0 5px;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-color);
}
.team-info-circular .team-name-en {
font-size: 0.8rem;
color: var(--text-light);
margin-bottom: 8px;
}
.team-position-badge {
display: inline-block;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: var(--primary-color);
padding: 6px 16px;
border-radius: 20px;
font-size: 0.78rem;
font-weight: 500;
margin-top: 5px;
}
/* Contact Icons */
.team-contact-circular {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #f0f0f0;
}
.team-contact-circular a {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 13px;
}
.team-contact-circular a:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(26, 95, 42, 0.3);
}
/* Small variant for staff */
.team-card-circular.small {
padding: 20px 15px;
}
.team-photo-circular.small {
width: 100px;
height: 100px;
margin-bottom: 15px;
padding: 3px;
}
.team-card-circular.small .team-placeholder-circular i {
font-size: 38px;
}
.team-info-circular h6 {
font-size: 0.85rem;
}
.team-position-badge.small {
font-size: 0.68rem;
padding: 4px 10px;
}
/* Responsive adjustments */
@media (max-width: 991px) {
.team-photo-circular {
width: 130px;
height: 130px;
}
.team-info-circular h5 {
font-size: 1rem;
}
.team-position-badge {
font-size: 0.72rem;
padding: 5px 12px;
}
}
@media (max-width: 575px) {
.team-card-circular {
padding: 20px 12px;
}
.team-photo-circular {
width: 110px;
height: 110px;
}
.team-photo-circular.small {
width: 80px;
height: 80px;
}
.team-info-circular h5 {
font-size: 0.95rem;
}
}
/* ==============================================
NEW TEAM CARD DESIGN - Circular Photo with Green Border
============================================== */
.team-card-new {
background: var(--white);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: visible;
text-align: center;
transition: all 0.4s ease;
height: 100%;
display: flex;
flex-direction: column;
padding: 30px 20px 25px;
border: 1px solid rgba(0,0,0,0.05);
}
.team-card-new:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(26, 95, 42, 0.18);
}
.team-card-new.featured {
border: 2px solid var(--primary-color);
box-shadow: 0 8px 30px rgba(26, 95, 42, 0.15);
}
.team-card-new.featured .team-position {
background: var(--primary-color);
color: var(--white);
}
/* Circular Photo Container with Green Border */
.team-photo-container {
position: relative;
width: 160px;
height: 160px;
margin: 0 auto 20px;
border-radius: 50%;
padding: 4px;
background: var(--primary-color);
box-shadow: 0 8px 25px rgba(26, 95, 42, 0.25);
transition: all 0.4s ease;
}
.team-card-new:hover .team-photo-container {
transform: scale(1.05);
box-shadow: 0 12px 35px rgba(26, 95, 42, 0.35);
}
.team-member-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
border-radius: 50%;
background: var(--white);
}
/* Placeholder for members without photos */
.team-placeholder-new {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #f5f5f5, #e8e8e8);
border-radius: 50%;
}
.team-placeholder-new i {
font-size: 60px;
color: #ccc;
}
/* Team Info Section */
.team-info-new {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.team-info-new h5 {
margin: 0 0 8px;
font-size: 1.15rem;
font-weight: 600;
color: var(--text-color);
line-height: 1.3;
}
.team-info-new h6 {
margin: 0 0 6px;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-color);
}
.team-position {
display: inline-block;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: var(--primary-color);
padding: 6px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
margin-top: 5px;
}
/* Contact Icons */
.team-contact-new {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid #f0f0f0;
}
.team-contact-new a {
width: 38px;
height: 38px;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 14px;
}
.team-contact-new a:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(26, 95, 42, 0.3);
}
/* Small variant for staff */
.team-card-new.small {
padding: 20px 15px;
}
.team-card-new.small .team-photo-container {
width: 100px;
height: 100px;
margin-bottom: 15px;
padding: 3px;
}
.team-card-new.small .team-placeholder-new i {
font-size: 40px;
}
.team-card-new.small .team-info-new h6 {
font-size: 0.85rem;
}
.team-card-new.small .team-position {
font-size: 0.7rem;
padding: 4px 10px;
}
/* Responsive adjustments */
@media (max-width: 991px) {
.team-photo-container {
width: 140px;
height: 140px;
}
.team-card-new .team-info-new h5 {
font-size: 1rem;
}
.team-position {
font-size: 0.75rem;
padding: 5px 12px;
}
}
@media (max-width: 575px) {
.team-card-new {
padding: 25px 15px 20px;
}
.team-photo-container {
width: 120px;
height: 120px;
margin-bottom: 15px;
}
.team-info-new h5 {
font-size: 0.95rem;
}
.team-placeholder-new i {
font-size: 45px;
}
}
/* ==============================================
IMPROVED TABLE STYLES - Public & Admin
============================================== */
.table-modern {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}
.table-modern thead {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}
.table-modern thead th {
padding: 16px 20px;
font-weight: 600;
color: var(--white);
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.5px;
border: none;
text-align: left;
}
.table-modern tbody tr {
transition: all 0.2s ease;
}
.table-modern tbody tr:hover {
background: #f8fdf9;
}
.table-modern tbody td {
padding: 14px 20px;
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
font-size: 0.95rem;
}
.table-modern tbody tr:last-child td {
border-bottom: none;
}
/* Striped variant */
.table-modern.table-striped tbody tr:nth-child(even) {
background: #fafafa;
}
.table-modern.table-striped tbody tr:nth-child(even):hover {
background: #f0f8f2;
}
/* Action buttons in tables */
.table-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.table-actions .btn-sm {
padding: 6px 12px;
font-size: 12px;
border-radius: 6px;
}
/* Status badges */
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.status-badge.active,
.status-badge.success {
background: #d4edda;
color: #155724;
}
.status-badge.pending,
.status-badge.warning {
background: #fff3cd;
color: #856404;
}
.status-badge.inactive,
.status-badge.danger {
background: #f8d7da;
color: #721c24;
}
.status-badge.info {
background: #d1ecf1;
color: #0c5460;
}
/* Responsive table wrapper */
.table-responsive-modern {
overflow-x: auto;
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}
@media (max-width: 767px) {
.table-modern thead th,
.table-modern tbody td {
padding: 12px 14px;
font-size: 0.85rem;
}
}
/* ==============================================
GALLERY
============================================== */
.gallery-filter {
margin-bottom: 30px;
}
.filter-btn {
background: var(--light-bg);
border: none;
padding: 10px 25px;
border-radius: 25px;
margin: 5px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.filter-btn:hover, .filter-btn.active {
background: var(--primary-color);
color: var(--white);
}
.gallery-card {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.gallery-card img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s;
}
.gallery-card:hover img {
transform: scale(1.05);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(26, 95, 42, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}
.gallery-card:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay i {
font-size: 30px;
color: var(--white);
}
.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: var(--white);
padding: 20px 15px 15px;
font-size: 14px;
}
/* ==============================================
CONTACT PAGE
============================================== */
.contact-info-box {
background: var(--primary-color);
color: var(--white);
padding: 35px;
border-radius: 12px;
height: 100%;
}
.contact-info-box h4 {
margin-bottom: 15px;
}
.contact-info-box > p {
opacity: 0.9;
margin-bottom: 25px;
}
.contact-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.contact-icon {
width: 45px;
height: 45px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-icon i {
font-size: 18px;
color: var(--secondary-color);
}
.contact-details h6 {
margin-bottom: 3px;
font-size: 14px;
opacity: 0.8;
}
.contact-details p {
margin: 0;
}
.contact-social {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.2);
}
.contact-social h6 {
margin-bottom: 12px;
}
.contact-social a {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--white);
margin-right: 10px;
transition: all 0.3s;
}
.contact-social a:hover {
background: var(--secondary-color);
color: var(--primary-dark);
}
.contact-form-box {
background: var(--white);
padding: 35px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.contact-form-box h4 {
margin-bottom: 25px;
color: var(--primary-color);
}
.hours-box {
background: var(--white);
padding: 35px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.hours-box h3 {
color: var(--primary-color);
}
.hour-item {
padding: 20px;
background: var(--light-bg);
border-radius: 8px;
}
.hour-item h5 {
margin-bottom: 5px;
color: var(--text-color);
}
.hour-item p {
margin: 0;
color: var(--primary-color);
font-weight: 600;
}
/* ==============================================
LEADERSHIP MESSAGES SECTION
============================================== */
.leadership-messages-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.message-card {
background: var(--white);
border-radius: 16px;
padding: 30px;
height: 100%;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.message-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-color);
}
.message-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.message-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.leader-photo {
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 3px solid var(--primary-light);
box-shadow: 0 5px 20px rgba(46, 125, 50, 0.2);
}
.leader-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 36px;
}
.leader-info h4 {
margin: 0 0 5px 0;
color: var(--text-dark);
font-size: 1.25rem;
font-weight: 600;
}
.leader-info .position {
color: var(--primary-color);
font-size: 0.9rem;
font-weight: 500;
}
.message-body {
position: relative;
}
.quote-icon {
font-size: 32px;
color: var(--primary-light);
opacity: 0.3;
position: absolute;
top: -10px;
left: -5px;
}
.message-text {
color: var(--text-muted);
line-height: 1.8;
font-size: 0.95rem;
padding-left: 25px;
margin-bottom: 20px;
min-height: 120px;
}
.read-more-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.read-more-link:hover {
color: var(--primary-dark);
gap: 12px;
}
.read-more-link i {
font-size: 12px;
}
/* Chairman card accent */
.chairman-card::before {
background: linear-gradient(90deg, #1a5928, #2e7d32);
}
/* CEO card accent */
.ceo-card::before {
background: linear-gradient(90deg, #2e7d32, #4caf50);
}
@media (max-width: 991px) {
.message-card {
padding: 24px;
}
.leader-photo {
width: 70px;
height: 70px;
}
.photo-placeholder {
font-size: 28px;
}
.message-text {
min-height: auto;
}
}
@media (max-width: 576px) {
.message-header {
flex-direction: column;
text-align: center;
}
.message-text {
padding-left: 0;
text-align: center;
}
.quote-icon {
position: static;
display: block;
text-align: center;
margin-bottom: 10px;
}
.read-more-link {
justify-content: center;
width: 100%;
}
}
/* ==============================================
FOOTER - Enhanced Eye-Catching Design
============================================== */
.main-footer {
background: linear-gradient(180deg, var(--footer-color, #1a5f2a) 0%, var(--footer-dark, #145021) 100%);
color: rgba(255,255,255,0.85);
position: relative;
overflow: hidden;
}
.main-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--secondary-color), var(--primary-light), var(--secondary-color), var(--primary-light), var(--secondary-color));
background-size: 200% 100%;
animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.main-footer::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.footer-top {
padding: 70px 0 50px;
position: relative;
z-index: 1;
}
.footer-widget {
margin-bottom: 25px;
}
.footer-widget h4 {
color: var(--white);
margin-bottom: 28px;
font-size: 1.2rem;
font-weight: 600;
position: relative;
padding-bottom: 15px;
}
.footer-widget h4::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--secondary-color), transparent);
border-radius: 2px;
}
.footer-widget p {
font-size: 14px;
line-height: 1.9;
color: rgba(255,255,255,0.75);
}
.footer-logo {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.footer-logo img {
height: 55px;
width: auto;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
transition: transform 0.3s ease;
}
.footer-logo:hover img {
transform: scale(1.05);
}
.footer-logo span {
font-size: 1.15rem;
font-weight: 700;
color: var(--white);
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.footer-social {
display: flex;
gap: 12px;
margin-top: 25px;
}
.footer-social a {
width: 44px;
height: 44px;
background: rgba(255,255,255,0.1);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: var(--white);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(255,255,255,0.15);
position: relative;
overflow: hidden;
}
.footer-social a::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-light));
opacity: 0;
transition: opacity 0.3s ease;
}
.footer-social a:hover {
transform: translateY(-5px) rotate(5deg);
border-color: transparent;
box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
}
.footer-social a:hover::before {
opacity: 1;
}
.footer-social a:hover i {
transform: scale(1.2);
}
.footer-social i {
font-size: 18px;
transition: transform 0.3s ease;
position: relative;
z-index: 1;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: rgba(255,255,255,0.7);
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.footer-links a::before {
content: '\f105';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 10px;
color: var(--primary-light);
transition: transform 0.3s ease;
}
.footer-links a:hover {
color: var(--primary-light);
transform: translateX(5px);
}
.footer-links a:hover::before {
transform: translateX(3px);
}
.footer-notices {
list-style: none;
padding: 0;
}
.footer-notices li {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-notices li:last-child {
border-bottom: none;
}
.footer-notices a {
color: rgba(255,255,255,0.8);
font-size: 14px;
display: flex;
align-items: start;
gap: 8px;
}
.footer-notices a:hover {
color: var(--primary-light);
}
.footer-notices .notice-date {
display: block;
font-size: 12px;
color: rgba(255,255,255,0.5);
margin-top: 5px;
}
.footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 16px;
font-size: 14px;
color: rgba(255,255,255,0.8);
transition: all 0.3s ease;
}
.footer-contact li:hover {
color: var(--white);
}
.footer-contact i {
color: var(--primary-light);
width: 20px;
height: 20px;
min-width: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-top: 2px;
}
.footer-contact span {
line-height: 1.5;
}
.footer-bottom {
background: rgba(0,0,0,0.3);
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-bottom .container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.footer-bottom p {
margin: 0;
font-size: 13px;
color: rgba(255,255,255,0.6);
}
.footer-bottom .copyright {
display: flex;
align-items: center;
gap: 8px;
}
.footer-bottom .developer a {
color: var(--primary-light);
font-weight: 500;
transition: all 0.3s ease;
}
.footer-bottom .developer a:hover {
color: var(--white);
text-decoration: underline;
}
/* Visitor Counter */
.visitor-counter {
display: flex;
align-items: center;
gap: 20px;
}
.visitor-item {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.08);
padding: 8px 16px;
border-radius: 25px;
font-size: 13px;
color: rgba(255,255,255,0.8);
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s ease;
}
.visitor-item:hover {
background: rgba(255,255,255,0.12);
border-color: var(--primary-light);
}
.visitor-item i {
color: var(--primary-light);
font-size: 14px;
}
.visitor-item.today {
background: rgba(46, 125, 50, 0.15);
border-color: rgba(46, 125, 50, 0.3);
}
.visitor-item.today i {
color: #4caf50;
}
.visitor-item span {
font-weight: 600;
color: var(--white);
}
@media (max-width: 768px) {
.visitor-counter {
justify-content: center;
gap: 12px;
}
.visitor-item {
padding: 6px 12px;
font-size: 12px;
}
}
@media (max-width: 768px) {
.footer-top {
padding: 40px 0 20px;
}
.footer-bottom .container {
flex-direction: column;
text-align: center;
}
.footer-widget h4::after {
left: 50%;
transform: translateX(-50%);
}
.footer-widget {
text-align: center;
}
.footer-social {
justify-content: center;
}
.footer-contact li {
justify-content: center;
}
.footer-links a::before {
display: none;
}
}
/* ==============================================
POPUP NOTICE
============================================== */
.notice-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.popup-content {
background: var(--white);
max-width: 500px;
width: 90%;
border-radius: 15px;
overflow: hidden;
position: relative;
animation: slideIn 0.3s;
}
@keyframes slideIn {
from { transform: translateY(-30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.popup-close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 24px;
color: var(--white);
cursor: pointer;
z-index: 1;
}
.popup-header {
background: var(--primary-color);
color: var(--white);
padding: 20px;
text-align: center;
}
.popup-header i {
font-size: 40px;
margin-bottom: 10px;
}
.popup-header h3 {
margin: 0;
}
.popup-body {
padding: 25px;
}
.popup-body h4 {
color: var(--text-color);
margin-bottom: 15px;
}
.popup-body p {
color: var(--text-light);
}
/* ==============================================
SCROLL TO TOP
============================================== */
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 45px;
height: 45px;
background: var(--primary-color);
color: var(--white);
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transition: all 0.3s;
z-index: 999;
}
.scroll-top:hover {
background: var(--primary-light);
transform: translateY(-3px);
}
.scroll-top.show {
display: flex;
}
/* ==============================================
BUTTONS - Enhanced Eye-Catching Design
============================================== */
.btn {
border-radius: 10px;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:active::before {
width: 300px;
height: 300px;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border: none;
box-shadow: 0 4px 15px rgba(26, 95, 42, 0.3);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(26, 95, 42, 0.4);
}
.btn-outline-primary {
color: var(--primary-color);
border: 2px solid var(--primary-color);
background: transparent;
}
.btn-outline-primary:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(26, 95, 42, 0.3);
}
.btn-lg {
padding: 14px 35px;
font-size: 1.05rem;
}
/* ==============================================
FORM ELEMENTS - Enhanced Eye-Catching Design
============================================== */
.form-control, .form-select {
border-radius: 12px;
padding: 14px 18px;
border: 2px solid #e8e8e8;
background: #fafafa;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.form-control:hover, .form-select:hover {
border-color: #d0d0d0;
background: #fff;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
background: #fff;
box-shadow: 0 0 0 4px rgba(26, 95, 42, 0.1), 0 4px 15px rgba(26, 95, 42, 0.08);
outline: none;
}
.form-control::placeholder {
color: #aaa;
transition: all 0.3s ease;
}
.form-control:focus::placeholder {
opacity: 0.5;
transform: translateX(5px);
}
/* Form Label Enhancement */
.form-label {
font-weight: 600;
color: var(--text-color);
margin-bottom: 8px;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 5px;
}
.form-label .text-danger {
color: #e53935;
}
/* Input Group Enhancement */
.input-group {
position: relative;
}
.input-group .form-control {
border-radius: 12px 0 0 12px;
}
.input-group .btn {
border-radius: 0 12px 12px 0;
}
/* Textarea Enhancement */
textarea.form-control {
min-height: 120px;
resize: vertical;
}
/* Checkbox & Radio Enhancement */
.form-check-input {
width: 20px;
height: 20px;
border: 2px solid #d0d0d0;
transition: all 0.2s ease;
cursor: pointer;
}
.form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.form-check-input:focus {
box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.15);
}
.form-check-label {
cursor: pointer;
padding-left: 5px;
}
/* Contact Form Box Enhancement */
.contact-form-box {
background: var(--white);
border-radius: 20px;
padding: 35px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.contact-form-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
}
.contact-form-box h4 {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
display: flex;
align-items: center;
gap: 10px;
}
.contact-form-box h4::before {
content: '';
width: 6px;
height: 25px;
background: var(--primary-color);
border-radius: 3px;
}
/* Contact Info Box Enhancement */
.contact-info-box {
background: linear-gradient(145deg, var(--primary-color), var(--primary-light));
border-radius: 20px;
padding: 35px;
color: var(--white);
height: 100%;
position: relative;
overflow: hidden;
}
.contact-info-box::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
}
.contact-info-box h4 {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 15px;
position: relative;
}
.contact-info-box > p {
opacity: 0.9;
margin-bottom: 30px;
position: relative;
}
.contact-item {
display: flex;
gap: 15px;
margin-bottom: 25px;
position: relative;
}
.contact-icon {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.contact-item:hover .contact-icon {
background: rgba(255,255,255,0.25);
transform: scale(1.1);
}
.contact-details h6 {
font-size: 0.85rem;
font-weight: 600;
opacity: 0.8;
margin-bottom: 3px;
}
.contact-details p {
margin: 0;
font-size: 0.95rem;
}
.contact-social {
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid rgba(255,255,255,0.2);
position: relative;
}
.contact-social h6 {
font-size: 0.9rem;
margin-bottom: 15px;
opacity: 0.9;
}
.contact-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: rgba(255,255,255,0.15);
color: var(--white);
border-radius: 10px;
margin-right: 10px;
transition: all 0.3s ease;
}
.contact-social a:hover {
background: var(--white);
color: var(--primary-color);
transform: translateY(-3px);
}
/* Application Form Styles */
.application-form-wrapper {
background: var(--white);
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 50px rgba(0,0,0,0.1);
position: relative;
}
.application-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-light));
border-radius: 20px 20px 0 0;
}
/* Form Step Indicator */
.form-steps {
display: flex;
justify-content: center;
margin-bottom: 40px;
gap: 10px;
}
.form-step {
display: flex;
align-items: center;
gap: 10px;
}
.form-step .step-number {
width: 36px;
height: 36px;
border-radius: 50%;
background: #e8e8e8;
color: #999;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.form-step.active .step-number {
background: var(--primary-color);
color: var(--white);
box-shadow: 0 4px 15px rgba(26, 95, 42, 0.3);
}
.form-step.completed .step-number {
background: var(--primary-light);
color: var(--white);
}
.form-step .step-label {
font-size: 0.85rem;
color: #999;
font-weight: 500;
}
.form-step.active .step-label {
color: var(--primary-color);
font-weight: 600;
}
.form-step-divider {
width: 50px;
height: 2px;
background: #e8e8e8;
margin: 0 5px;
}
/* Form Section Headers */
.form-section-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-color);
padding-bottom: 12px;
margin-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
display: flex;
align-items: center;
gap: 10px;
}
.form-section-title i {
width: 32px;
height: 32px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(26, 95, 42, 0.15));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
/* File Upload Enhancement */
.file-upload-wrapper {
position: relative;
border: 2px dashed #d0d0d0;
border-radius: 12px;
padding: 30px;
text-align: center;
background: #fafafa;
transition: all 0.3s ease;
cursor: pointer;
}
.file-upload-wrapper:hover {
border-color: var(--primary-color);
background: rgba(26, 95, 42, 0.02);
}
.file-upload-wrapper.dragover {
border-color: var(--primary-color);
background: rgba(26, 95, 42, 0.05);
}
.file-upload-wrapper input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.file-upload-wrapper i {
font-size: 40px;
color: #ccc;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.file-upload-wrapper:hover i {
color: var(--primary-color);
transform: scale(1.1);
}
.file-upload-wrapper p {
margin: 0;
color: #666;
font-size: 0.9rem;
}
.file-upload-wrapper .file-types {
font-size: 0.8rem;
color: #999;
margin-top: 8px;
}
/* Form Submit Button Enhancement */
.form-submit-btn {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border: none;
padding: 16px 40px;
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
color: var(--white);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 25px rgba(26, 95, 42, 0.3);
}
.form-submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(26, 95, 42, 0.4);
}
.form-submit-btn:active {
transform: translateY(-1px);
}
.form-submit-btn i {
transition: transform 0.3s ease;
}
.form-submit-btn:hover i {
transform: translateX(5px);
}
/* Alert Enhancement */
.alert {
border-radius: 12px;
padding: 16px 20px;
border: none;
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.alert i {
font-size: 20px;
margin-top: 2px;
}
.alert-success {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
color: #155724;
}
.alert-danger {
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
color: #721c24;
}
.alert-warning {
background: linear-gradient(135deg, #fff3cd, #ffeeba);
color: #856404;
}
.alert-info {
background: linear-gradient(135deg, #d1ecf1, #bee5eb);
color: #0c5460;
}
/* ==============================================
UTILITIES
============================================== */
.bg-light {
background: var(--light-bg) !important;
}
.empty-state i {
color: #ddd;
}
/* ==============================================
MARQUEE / SCROLLING TEXT
============================================== */
.marquee-bar {
background: var(--secondary-color);
padding: 8px 0;
overflow: hidden;
}
.marquee-content {
display: flex;
animation: marquee 30s linear infinite;
white-space: nowrap;
}
.marquee-content span {
padding: 0 50px;
color: var(--primary-dark);
font-weight: 500;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-bar:hover .marquee-content {
animation-play-state: paused;
}
/* ==============================================
ENHANCED ANIMATIONS
============================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-fadeInUp {
animation: fadeInUp 0.6s ease-out;
}
.service-card:hover .service-icon,
.feature-box:hover .feature-icon {
animation: pulse 0.5s ease-in-out;
}
/* ==============================================
COUNTER / ODOMETER STYLES
============================================== */
.counter-section {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
padding: 60px 0;
position: relative;
overflow: hidden;
}
.counter-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') repeat;
background-size: 100px 100px;
}
.counter-box {
text-align: center;
color: var(--white);
position: relative;
z-index: 1;
}
.counter-icon {
width: 70px;
height: 70px;
background: rgba(255,255,255,0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
}
.counter-icon i {
font-size: 28px;
color: var(--secondary-color);
}
.counter-number {
font-size: 3rem;
font-weight: 700;
color: var(--white);
line-height: 1;
margin-bottom: 5px;
}
.counter-label {
font-size: 1rem;
opacity: 0.9;
}
/* ==============================================
QUICK LINKS FLOATING BOX
============================================== */
.quick-links-float {
position: fixed;
right: -200px;
top: 50%;
transform: translateY(-50%);
background: var(--white);
border-radius: 10px 0 0 10px;
box-shadow: -5px 0 25px rgba(0,0,0,0.15);
padding: 15px;
z-index: 999;
transition: right 0.3s ease;
}
.quick-links-float:hover {
right: 0;
}
.quick-links-toggle {
position: absolute;
left: -45px;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
background: var(--primary-color);
border-radius: 10px 0 0 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 18px;
cursor: pointer;
}
.quick-links-float ul {
list-style: none;
padding: 0;
margin: 0;
}
.quick-links-float li {
margin-bottom: 10px;
}
.quick-links-float li:last-child {
margin-bottom: 0;
}
.quick-links-float a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background: var(--light-bg);
border-radius: 8px;
color: var(--text-color);
font-size: 14px;
transition: all 0.3s;
}
.quick-links-float a:hover {
background: var(--primary-color);
color: var(--white);
}
.quick-links-float a i {
width: 20px;
text-align: center;
}
/* ==============================================
ENHANCED CARDS WITH BORDER ANIMATION
============================================== */
.service-card,
.feature-box,
.notice-card {
position: relative;
overflow: hidden;
}
.service-card::before,
.feature-box::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
transition: left 0.5s ease;
}
.service-card:hover::before,
.feature-box:hover::before {
left: 100%;
}
/* ==============================================
LOADING ANIMATION
============================================== */
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
transition: opacity 0.5s, visibility 0.5s;
}
.page-loader.loaded {
opacity: 0;
visibility: hidden;
}
.loader-spinner {
width: 50px;
height: 50px;
border: 3px solid var(--light-bg);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ==============================================
NEPALI DATE BADGE
============================================== */
.nepali-date-badge {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
padding: 8px 20px;
border-radius: 25px;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.nepali-date-badge i {
color: var(--secondary-color);
}
/* ==============================================
TOOLS SECTION (EMI, Exchange, Date Converter)
============================================== */
.tool-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
padding: 35px;
margin-bottom: 30px;
}
.tool-header {
text-align: center;
margin-bottom: 30px;
}
.tool-header .tool-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.tool-header .tool-icon i {
font-size: 32px;
color: var(--white);
}
.tool-header h3 {
color: var(--primary-color);
margin-bottom: 10px;
}
.tool-header p {
color: var(--text-light);
}
.tool-form .form-label {
font-weight: 600;
color: var(--text-color);
margin-bottom: 8px;
}
/* EMI Result */
.emi-result {
margin-top: 30px;
padding-top: 30px;
border-top: 2px solid var(--border-color);
}
.emi-result h4 {
text-align: center;
color: var(--primary-color);
margin-bottom: 25px;
}
.result-box {
background: var(--light-bg);
padding: 20px;
border-radius: 10px;
text-align: center;
height: 100%;
}
.result-box .result-label {
display: block;
font-size: 14px;
color: var(--text-light);
margin-bottom: 8px;
}
.result-box .result-value {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.emi-breakdown h5 {
margin-bottom: 15px;
color: var(--text-color);
}
/* Exchange Rate Table */
.exchange-table {
margin-top: 20px;
}
.currency-flag {
width: 24px;
margin-right: 10px;
border-radius: 2px;
}
.exchange-table th {
background: var(--primary-color);
color: var(--white);
font-weight: 600;
}
.exchange-table td {
vertical-align: middle;
}
.rate-note {
background: var(--light-bg);
padding: 15px 20px;
border-radius: 8px;
}
/* Date Converter */
.date-converter-tabs {
margin-top: 20px;
}
.date-converter-tabs .nav-tabs {
border-bottom: 2px solid var(--border-color);
margin-bottom: 25px;
}
.date-converter-tabs .nav-link {
color: var(--text-color);
border: none;
padding: 12px 20px;
font-weight: 600;
}
.date-converter-tabs .nav-link.active {
color: var(--primary-color);
border-bottom: 3px solid var(--primary-color);
background: none;
}
.converter-form h5 {
margin-bottom: 15px;
color: var(--text-color);
}
.converter-result {
margin-top: 25px;
padding: 20px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 10px;
text-align: center;
color: var(--white);
}
.converter-result h5 {
color: rgba(255,255,255,0.9);
margin-bottom: 10px;
}
.converter-result .result-date {
font-size: 1.8rem;
font-weight: 700;
}
.today-date-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
padding: 25px;
}
.date-box {
padding: 20px;
background: var(--light-bg);
border-radius: 8px;
}
.date-box h6 {
color: var(--text-light);
margin-bottom: 8px;
}
.date-box .date-display {
font-size: 1.3rem;
font-weight: 700;
color: var(--primary-color);
}
/* Tools Widget Section on Homepage */
.tools-widget-section {
background: var(--light-bg);
padding: 40px 0;
}
/* Tool Widget Cards - Enhanced Eye-Catching Design */
.tool-widget-card {
background: var(--white);
border-radius: 16px;
padding: 28px 20px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 100%;
position: relative;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.05);
}
.tool-widget-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(26, 95, 42, 0.05), transparent);
transition: left 0.5s ease;
}
.tool-widget-card:hover::before {
left: 100%;
}
.tool-widget-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 40px rgba(26, 95, 42, 0.15);
}
.tool-widget-card .widget-icon {
width: 65px;
height: 65px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
box-shadow: 0 8px 20px rgba(26, 95, 42, 0.25);
transition: all 0.4s ease;
position: relative;
}
.tool-widget-card:hover .widget-icon {
transform: scale(1.1) rotate(8deg);
border-radius: 50%;
}
.tool-widget-card .widget-icon i {
font-size: 26px;
color: var(--white);
transition: transform 0.3s ease;
}
.tool-widget-card:hover .widget-icon i {
transform: scale(1.15);
}
.tool-widget-card h5 {
font-size: 1rem;
color: var(--text-color);
margin-bottom: 10px;
font-weight: 600;
transition: color 0.3s ease;
}
.tool-widget-card:hover h5 {
color: var(--primary-color);
}
.tool-widget-card p {
font-size: 13px;
color: var(--text-light);
margin-bottom: 15px;
}
.tool-widget-card .btn-sm {
padding: 8px 20px;
font-size: 13px;
}
/* Highlight Widget (KYC & Loan Apply) - Premium Style */
.tool-widget-card.highlight-widget {
background: linear-gradient(145deg, #ffffff 0%, #f8fdf9 100%);
border: 2px solid var(--primary-color);
position: relative;
overflow: hidden;
}
.tool-widget-card.highlight-widget::after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 30px;
height: 30px;
background: var(--secondary-color);
transform: rotate(45deg);
box-shadow: 0 2px 10px rgba(255, 193, 7, 0.4);
}
.tool-widget-card.highlight-widget .widget-icon {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
box-shadow: 0 10px 25px rgba(26, 95, 42, 0.35);
}
.tool-widget-card.highlight-widget .widget-icon i {
color: #fff;
}
.tool-widget-card.highlight-widget h5 {
color: var(--primary-color);
font-weight: 700;
}
.tool-widget-card.highlight-widget:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 20px 50px rgba(26, 95, 42, 0.25);
border-color: var(--primary-dark);
background: linear-gradient(145deg, #ffffff 0%, #e8f5e9 100%);
}
/* ==============================================
DOWNLOADS SECTION
============================================== */
.category-title {
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.download-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
padding: 25px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
transition: all 0.3s;
}
.download-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.download-card .download-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #dc3545, #c82333);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.download-card .download-icon i {
font-size: 28px;
color: var(--white);
}
.download-card .download-info {
flex: 1;
margin-bottom: 15px;
}
.download-card .download-info h5 {
font-size: 1rem;
color: var(--text-color);
margin-bottom: 8px;
}
.download-card .file-type {
display: inline-block;
background: var(--light-bg);
padding: 3px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
color: var(--text-light);
margin-right: 8px;
}
.download-card .download-count {
font-size: 12px;
color: var(--text-light);
}
/* ==============================================
VENDOR ENLISTMENT
============================================== */
.vendor-info-card {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
padding: 25px 30px;
border-radius: 12px;
}
.vendor-info-card h4 {
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.vendor-info-card p {
margin: 0;
opacity: 0.95;
}
.vendor-form-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
padding: 35px;
}
.vendor-form-card h4 {
color: var(--primary-color);
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(--border-color);
}
.vendor-form .form-label {
font-weight: 600;
color: var(--text-color);
}
/* ==============================================
IMPORTANT LINKS
============================================== */
.links-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
padding: 25px;
height: 100%;
transition: all 0.3s;
}
.links-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.links-card .link-icon {
width: 50px;
height: 50px;
background: var(--light-bg);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.links-card .link-icon img {
max-width: 35px;
max-height: 35px;
}
.links-card h5 {
font-size: 1rem;
color: var(--text-color);
margin-bottom: 8px;
}
.links-card p {
font-size: 13px;
color: var(--text-light);
margin-bottom: 12px;
}
.links-card a {
font-size: 13px;
font-weight: 600;
}
/* ==============================================
CAREER PAGE
============================================== */
.job-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
padding: 25px;
margin-bottom: 20px;
transition: all 0.3s;
}
.job-card:hover {
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
/* Deadline passed job card styling */
.job-card.deadline-passed {
background: linear-gradient(to right, #f8f9fa, #fff);
border-left: 4px solid #dc3545;
opacity: 0.85;
}
.job-card.deadline-passed:hover {
opacity: 1;
}
.job-header-right {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.deadline-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
}
.deadline-badge.active {
background: #d4edda;
color: #155724;
}
.deadline-badge.expired {
background: #f8d7da;
color: #721c24;
}
.job-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
}
.job-header h4 {
margin: 0;
color: var(--primary-color);
}
.job-type {
background: var(--primary-light);
color: var(--white);
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.job-details ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 15px;
}
.job-details li {
font-size: 14px;
color: var(--text-light);
}
.job-details li i {
color: var(--primary-color);
margin-right: 5px;
}
.job-description {
color: var(--text-color);
margin-bottom: 20px;
}
.job-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sidebar-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
padding: 25px;
margin-bottom: 25px;
text-align: center;
}
.sidebar-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
}
.sidebar-icon i {
font-size: 28px;
color: var(--white);
}
.sidebar-card h4 {
color: var(--text-color);
margin-bottom: 10px;
}
.sidebar-card p {
color: var(--text-light);
font-size: 14px;
margin-bottom: 15px;
}
.benefit-list {
list-style: none;
padding: 0;
text-align: left;
}
.benefit-list li {
padding: 8px 0;
color: var(--text-color);
font-size: 14px;
}
.benefit-list li i {
color: var(--success);
margin-right: 8px;
}
/* ==============================================
REPORTS PAGE
============================================== */
.year-title {
background: var(--light-bg);
padding: 15px 25px;
border-left: 4px solid var(--primary-color);
margin-bottom: 25px;
}
.year-title span {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
}
.report-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
padding: 25px;
height: 100%;
display: flex;
flex-direction: column;
}
.report-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #dc3545, #c82333);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.report-icon i {
font-size: 28px;
color: var(--white);
}
.report-info {
flex: 1;
margin-bottom: 15px;
}
.report-info h5 {
font-size: 1rem;
margin-bottom: 5px;
color: var(--text-color);
}
.report-type {
font-size: 13px;
color: var(--text-light);
}
.report-actions {
display: flex;
gap: 10px;
}
/* Report Card Type Variations */
.report-card.monthly .report-icon {
background: linear-gradient(135deg, #3498db, #2980b9);
}
.report-card.quarterly .report-icon {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
.report-card.progress .report-icon {
background: linear-gradient(135deg, #2ecc71, #27ae60);
}
.report-card.annual .report-icon {
background: linear-gradient(135deg, #f39c12, #e67e22);
}
.report-card.financial .report-icon {
background: linear-gradient(135deg, #00b894, #00cec9);
}
.report-card.audit .report-icon {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}
.report-card.agm .report-icon {
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}
/* Purple button for AGM */
.btn-purple {
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
border: none;
color: #fff;
}
.btn-purple:hover {
background: linear-gradient(135deg, #5b4cdb, #918bef);
color: #fff;
}
.btn-outline-purple {
border: 1px solid #6c5ce7;
color: #6c5ce7;
background: transparent;
}
.btn-outline-purple:hover {
background: #6c5ce7;
color: #fff;
}
/* ==============================================
NEWS PAGE
============================================== */
.news-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
overflow: hidden;
height: 100%;
transition: all 0.3s;
}
.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.news-image {
position: relative;
height: 200px;
overflow: hidden;
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
}
.news-placeholder i {
font-size: 50px;
color: rgba(255,255,255,0.5);
}
.news-date {
position: absolute;
top: 15px;
left: 15px;
background: var(--primary-color);
color: var(--white);
padding: 8px 12px;
border-radius: 8px;
text-align: center;
}
.news-date .day {
display: block;
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
}
.news-date .month {
font-size: 11px;
text-transform: uppercase;
}
.news-content {
padding: 20px;
}
.news-content h4 {
font-size: 1.1rem;
margin-bottom: 10px;
color: var(--text-color);
}
.news-content p {
font-size: 14px;
color: var(--text-light);
margin-bottom: 15px;
}
.news-content .read-more {
color: var(--primary-color);
font-weight: 600;
font-size: 14px;
}
.news-content .read-more:hover {
color: var(--primary-light);
}
/* ==============================================
SURVEY/GRIEVANCE FORM
============================================== */
.form-card {
background: var(--white);
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
padding: 40px;
}
.form-header .form-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.form-header .form-icon i {
font-size: 35px;
color: var(--white);
}
.contact-option-card {
background: var(--white);
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
padding: 30px;
text-align: center;
height: 100%;
}
.option-icon {
width: 60px;
height: 60px;
background: var(--light-bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
}
.option-icon i {
font-size: 24px;
color: var(--primary-color);
}
.contact-option-card h5 {
color: var(--text-color);
margin-bottom: 8px;
}
.contact-option-card p {
color: var(--text-light);
margin: 0;
font-size: 14px;
}
/* ==============================================
EMPTY STATE
============================================== */
.empty-state {
text-align: center;
padding: 60px 30px;
background: var(--light-bg);
border-radius: 15px;
}
.empty-icon {
width: 100px;
height: 100px;
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.empty-icon i {
font-size: 40px;
color: var(--primary-light);
}
.empty-state h4 {
color: var(--text-color);
margin-bottom: 10px;
}
.empty-state p {
color: var(--text-light);
max-width: 400px;
margin: 0 auto;
}
/* ==============================================
RESPONSIVE ADJUSTMENTS
============================================== */
@media (max-width: 991px) {
.section-padding {
padding: 40px 0;
}
.section-header h2 {
font-size: 1.7rem;
}
}
@media (max-width: 767px) {
.top-bar .top-info {
justify-content: center;
text-align: center;
gap: 10px;
font-size: 12px;
}
.top-bar .top-info li {
display: none;
}
.top-bar .top-info li:first-child,
.top-bar .top-info li:nth-child(2) {
display: flex;
}
.top-bar .social-links {
justify-content: center;
margin-top: 10px;
flex-wrap: wrap;
gap: 8px;
}
.internet-banking-btn {
margin-right: 5px;
order: -1;
width: 100%;
text-align: center;
margin-bottom: 8px;
}
.internet-banking-btn a {
justify-content: center !important;
padding: 8px 20px !important;
}
.lang-switch {
margin-right: 8px;
}
> .logo-text {
display: flex;
flex-direction: column;
max-width: 160px;
}
.logo-text {
display: none;
}
.cta-content {
text-align: center;
}
.cta-content h2 {
font-size: 1.5rem;
}
.cta-content .text-lg-end {
margin-top: 20px;
}
.tool-widget-card {
padding: 15px 10px;
}
.tool-widget-card .widget-icon {
width: 45px;
height: 45px;
}
.tool-widget-card .widget-icon i {
font-size: 18px;
}
.tool-widget-card h5 {
font-size: 0.85rem;
}
.tool-card {
padding: 20px;
}
.result-box .result-value {
font-size: 1.2rem;
}
.converter-result .result-date {
font-size: 1.3rem;
}
.links-card {
padding: 20px 15px;
}
.download-card {
padding: 20px 15px;
}
/* Footer Mobile */
.footer-widget h4 {
font-size: 1.1rem;
}
.footer-bottom {
text-align: center;
}
.footer-bottom .text-md-end {
text-align: center !important;
margin-top: 10px;
}
}
/* ==============================================
ONLINE KYC & LOAN FORM STYLES - Enhanced Eye-Catching Design
============================================== */
.kyc-form-section,
.loan-form-section {
background: linear-gradient(135deg, #f0f7f1 0%, #e8f5e9 50%, #f5f5f5 100%);
position: relative;
overflow: hidden;
}
.kyc-form-section::before,
.loan-form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%231a5f2a' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
pointer-events: none;
}
.kyc-form-box,
.loan-form-box {
background: #fff;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
padding: 45px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.kyc-form-box::before,
.loan-form-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color), var(--primary-light), var(--primary-color));
background-size: 200% 100%;
animation: shimmer 3s linear infinite;
}
.kyc-form-box .form-header,
.loan-form-box .form-header {
margin-bottom: 35px;
padding-bottom: 25px;
border-bottom: 2px solid #f0f0f0;
text-align: center;
position: relative;
}
.kyc-form-box .form-header::after,
.loan-form-box .form-header::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
}
.kyc-form-box .form-header i,
.loan-form-box .form-header i {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: var(--white);
margin: 0 auto 20px;
box-shadow: 0 10px 30px rgba(26, 95, 42, 0.3);
transition: all 0.4s ease;
}
.kyc-form-box:hover .form-header i,
.loan-form-box:hover .form-header i {
transform: scale(1.05) rotate(5deg);
}
.kyc-form-box .form-header h3,
.loan-form-box .form-header h3 {
color: var(--primary-color);
margin-bottom: 10px;
font-size: 1.6rem;
font-weight: 700;
}
.kyc-form-box .form-header p,
.loan-form-box .form-header p {
color: #666;
margin: 0;
font-size: 1rem;
}
.kyc-form .form-section,
.loan-form .form-section {
background: linear-gradient(145deg, #fafafa, #f5f5f5);
border-radius: 16px;
padding: 30px;
margin-bottom: 25px;
border: 1px solid rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.kyc-form .form-section::before,
.loan-form .form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, var(--primary-color), var(--primary-light));
border-radius: 5px 0 0 5px;
}
.kyc-form .form-section:hover,
.loan-form .form-section:hover {
box-shadow: 0 5px 25px rgba(26, 95, 42, 0.1);
transform: translateX(5px);
}
.kyc-form .form-section h5,
.loan-form .form-section h5 {
color: var(--primary-color);
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px dashed #e0e0e0;
display: flex;
align-items: center;
gap: 12px;
font-size: 1.1rem;
font-weight: 600;
}
.kyc-form .form-section h5 i,
.loan-form .form-section h5 i {
width: 36px;
height: 36px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(26, 95, 42, 0.15));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 16px;
}
.kyc-form .form-label,
.loan-form .form-label {
font-weight: 600;
color: #333;
margin-bottom: 8px;
font-size: 0.9rem;
}
.kyc-form .form-control,
.kyc-form .form-select,
.loan-form .form-control,
.loan-form .form-select {
border: 2px solid #e8e8e8;
padding: 14px 18px;
border-radius: 12px;
background: #fff;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.kyc-form .form-control:hover,
.kyc-form .form-select:hover,
.loan-form .form-control:hover,
.loan-form .form-select:hover {
border-color: #d0d0d0;
}
.kyc-form .form-control:focus,
.kyc-form .form-select:focus,
.loan-form .form-control:focus,
.loan-form .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(26, 95, 42, 0.1), 0 4px 15px rgba(26, 95, 42, 0.08);
background: #fff;
}
.kyc-form .document-upload,
.loan-form .document-upload {
border: 3px dashed #d0d0d0;
border-radius: 16px;
padding: 40px 30px;
text-align: center;
transition: all 0.4s ease;
cursor: pointer;
background: linear-gradient(145deg, #fafafa, #f5f5f5);
position: relative;
overflow: hidden;
}
.kyc-form .document-upload::before,
.loan-form .document-upload::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(26, 95, 42, 0.05), transparent);
transition: left 0.5s ease;
}
.kyc-form .document-upload:hover::before,
.loan-form .document-upload:hover::before {
left: 100%;
}
.kyc-form .document-upload:hover,
.loan-form .document-upload:hover {
border-color: var(--primary-color);
background: linear-gradient(145deg, #f0f8f2, #e8f5e9);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(26, 95, 42, 0.15);
}
.kyc-form .document-upload i,
.loan-form .document-upload i {
font-size: 50px;
color: #bbb;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.kyc-form .document-upload:hover i,
.loan-form .document-upload:hover i {
color: var(--primary-color);
transform: scale(1.1);
}
.kyc-form .document-upload p,
.loan-form .document-upload p {
margin: 0;
color: #666;
font-size: 0.95rem;
}
.kyc-form .document-upload small,
.loan-form .document-upload small {
color: #999;
font-size: 0.8rem;
display: block;
margin-top: 8px;
}
.form-actions {
text-align: center;
padding-top: 30px;
border-top: 2px solid #f0f0f0;
margin-top: 30px;
position: relative;
}
.form-actions::before {
content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
}
.form-actions .btn {
padding: 16px 50px;
font-size: 1.1rem;
border-radius: 14px;
font-weight: 600;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border: none;
box-shadow: 0 10px 30px rgba(26, 95, 42, 0.3);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.form-actions .btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(26, 95, 42, 0.4);
}
.form-actions .btn i {
margin-right: 10px;
transition: transform 0.3s ease;
}
.form-actions .btn:hover i {
transform: translateX(5px);
}
/* Mobile Responsive for KYC/Loan Forms */
@media (max-width: 768px) {
.kyc-form-box,
.loan-form-box {
padding: 20px 15px;
border-radius: 10px;
}
.kyc-form .form-section,
.loan-form .form-section {
padding: 15px;
margin-bottom: 15px;
}
.kyc-form-box .form-header i,
.loan-form-box .form-header i {
font-size: 40px;
}
.kyc-form-box .form-header h3,
.loan-form-box .form-header h3 {
font-size: 1.3rem;
}
.form-actions .btn {
width: 100%;
padding: 15px;
}
/* Tool widgets mobile */
.tool-widget-card.highlight-widget h5 {
font-size: 0.85rem;
}
}
/* ==============================================
ADDITIONAL MOBILE FIXES
============================================== */
@media (max-width: 576px) {
/* Smaller screens */
.tool-widget-card {
padding: 15px 10px;
}
.tool-widget-card h5 {
font-size: 0.8rem;
}
.widget-icon {
width: 50px;
height: 50px;
}
.widget-icon i {
font-size: 1.2rem;
}
/* Committee cards mobile */
.committee-member-card {
margin-bottom: 15px;
}
.committee-member-card .member-photo {
width: 80px;
height: 80px;
}
/* News cards mobile */
.news-card .news-content h4 {
font-size: 1rem;
}
/* Reports page mobile */
.report-card {
padding: 15px;
}
/* Filter buttons mobile */
.filter-btn {
padding: 8px 15px;
font-size: 0.85rem;
margin: 3px;
}
}
/* ==============================================
CHATBOT / FAQ WIDGET STYLES
============================================== */
.chatbot-widget {
position: fixed;
bottom: 30px;
right: 100px; /* Position left of scroll-nav buttons */
z-index: 9990;
}
.chatbot-toggle {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
position: relative;
}
.chatbot-toggle:hover {
transform: scale(1.1);
}
.chatbot-toggle i {
font-size: 24px;
}
.chatbot-badge {
position: absolute;
top: -5px;
right: -5px;
width: 22px;
height: 22px;
background: #ff4444;
color: #fff;
border-radius: 50%;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.chatbot-box {
position: fixed;
bottom: 100px;
right: 20px;
width: 350px;
max-height: 500px;
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
display: none;
overflow: hidden;
z-index: 9991;
}
.chatbot-box.active {
display: block;
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chatbot-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: #fff;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.chatbot-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.chatbot-title i {
font-size: 20px;
}
.chatbot-close {
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 18px;
padding: 0;
}
.chatbot-body {
padding: 15px;
max-height: 400px;
overflow-y: auto;
}
.chatbot-welcome {
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
margin-bottom: 15px;
text-align: center;
}
.chatbot-welcome p {
margin: 0;
color: #555;
}
.chatbot-quick-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.quick-action-btn {
flex: 1;
min-width: calc(50% - 4px);
padding: 10px 8px;
background: rgba(26, 95, 42, 0.05);
border: 1px solid rgba(26, 95, 42, 0.2);
border-radius: 8px;
color: var(--primary-color);
text-decoration: none;
text-align: center;
font-size: 0.8rem;
transition: all 0.3s ease;
}
.quick-action-btn:hover {
background: var(--primary-color);
color: #fff;
}
.quick-action-btn i {
display: block;
font-size: 1.2rem;
margin-bottom: 5px;
}
.chatbot-faqs h6 {
color: #333;
margin-bottom: 10px;
font-size: 0.9rem;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.faq-item {
border: 1px solid #eee;
border-radius: 8px;
margin-bottom: 8px;
overflow: hidden;
}
.faq-question {
padding: 10px 15px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: #fafafa;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.faq-question:hover {
background: #f0f0f0;
}
.faq-question i {
transition: transform 0.3s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 15px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
font-size: 0.8rem;
color: #666;
line-height: 1.5;
}
.faq-item.active .faq-answer {
padding: 10px 15px;
max-height: 200px;
}
.chatbot-contact {
text-align: center;
padding-top: 10px;
border-top: 1px solid #eee;
margin-top: 10px;
}
.chatbot-contact p {
margin-bottom: 10px;
color: #666;
font-size: 0.85rem;
}
/* Mobile responsive chatbot */
@media (max-width: 576px) {
.chatbot-widget {
bottom: 20px;
right: 80px;
}
.chatbot-toggle {
width: 48px;
height: 48px;
}
.chatbot-toggle i {
font-size: 18px;
}
.chatbot-box {
position: fixed;
width: calc(100vw - 20px);
left: 10px;
right: 10px;
bottom: 80px;
max-height: 65vh;
}
}
/* ==============================================
AUCTION CARD STYLES
============================================== */
.auction-card {
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
overflow: hidden;
transition: all 0.3s ease;
}
.auction-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.auction-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #f8f9fa;
border-bottom: 1px solid #eee;
}
.auction-status {
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.auction-status.status-upcoming {
background: #e3f2fd;
color: #1976d2;
}
.auction-status.status-ongoing {
background: #fff3e0;
color: #f57c00;
}
.auction-status.status-completed {
background: #e8f5e9;
color: #388e3c;
}
.auction-status.status-cancelled {
background: #ffebee;
color: #d32f2f;
}
.auction-date {
color: #666;
font-size: 0.85rem;
}
.auction-image {
height: 200px;
overflow: hidden;
}
.auction-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.auction-body {
padding: 20px;
}
.auction-body h4 {
margin-bottom: 15px;
color: var(--dark-color);
}
.auction-details p {
margin-bottom: 8px;
font-size: 0.9rem;
}
.auction-details .minimum-price {
font-size: 1.1rem;
color: var(--primary-dark);
}
.auction-description {
color: #666;
font-size: 0.9rem;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #eee;
}
.auction-contact {
margin-top: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
}
.auction-contact p {
margin: 5px 0;
font-size: 0.9rem;
}
.auction-footer {
padding: 15px 20px;
border-top: 1px solid #eee;
text-align: center;
}
/* ==============================================
GRIEVANCE FORM STYLES
============================================== */
.grievance-form-box {
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
padding: 40px;
}
.grievance-form-box .form-header i {
font-size: 50px;
color: #dc3545;
margin-bottom: 15px;
}
.grievance-form .form-section {
background: #f8f9fa;
border-radius: 10px;
padding: 25px;
margin-bottom: 25px;
border-left: 4px solid #dc3545;
}
/* ==============================================
APPOINTMENT FORM STYLES
============================================== */
.appointment-form-box {
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
padding: 40px;
}
.appointment-form-box .form-header i {
font-size: 50px;
color: var(--primary-color);
margin-bottom: 15px;
}
.appointment-form .form-section {
background: #f8f9fa;
border-radius: 10px;
padding: 25px;
margin-bottom: 25px;
border-left: 4px solid var(--primary-color);
}
/* ==============================================
ACCOUNT FORM STYLES
============================================== */
.account-form-box {
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
padding: 40px;
}
.account-form-box .form-header {
text-align: center;
margin-bottom: 30px;
}
.account-form-box .form-header i {
font-size: 50px;
color: var(--primary-color);
margin-bottom: 15px;
display: block;
}
.account-form-box .form-header h3 {
color: var(--primary-color);
margin-bottom: 10px;
}
.account-form-box .form-header p {
color: #666;
}
.account-form .form-section {
background: #f8f9fa;
border-radius: 10px;
padding: 25px;
margin-bottom: 25px;
border-left: 4px solid var(--primary-color);
}
.account-form .form-section h5 {
color: var(--primary-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.account-form .form-actions {
text-align: center;
padding-top: 20px;
}
/* KYC Form Box Styles */
.kyc-form-box {
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
padding: 40px;
}
.kyc-form-box .form-header {
text-align: center;
margin-bottom: 30px;
}
.kyc-form-box .form-header i {
font-size: 50px;
color: var(--primary-color);
margin-bottom: 15px;
display: block;
}
.kyc-form-box .form-header h3 {
color: var(--primary-color);
margin-bottom: 10px;
}
.kyc-form-box .form-header p {
color: #666;
}
.kyc-form .form-section {
background: #f8f9fa;
border-radius: 10px;
padding: 25px;
margin-bottom: 25px;
border-left: 4px solid var(--primary-color);
}
.kyc-form .form-section h5 {
color: var(--primary-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.kyc-form .form-actions {
text-align: center;
padding-top: 20px;
}
/* Loan Form Box Styles */
.loan-form-box {
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
padding: 40px;
}
.loan-form-box .form-header {
text-align: center;
margin-bottom: 30px;
}
.loan-form-box .form-header i {
font-size: 50px;
color: var(--primary-color);
margin-bottom: 15px;
display: block;
}
.loan-form-box .form-header h3 {
color: var(--primary-color);
margin-bottom: 10px;
}
.loan-form-box .form-header p {
color: #666;
}
.loan-form .form-section {
background: #f8f9fa;
border-radius: 10px;
padding: 25px;
margin-bottom: 25px;
border-left: 4px solid var(--primary-color);
}
.loan-form .form-section h5 {
color: var(--primary-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.loan-form .form-actions {
text-align: center;
padding-top: 20px;
}
/* Appointment Form Additional Styles */
.appointment-form-box .form-header {
text-align: center;
margin-bottom: 30px;
}
.appointment-form-box .form-header h3 {
color: var(--primary-color);
margin-bottom: 10px;
}
.appointment-form-box .form-header p {
color: #666;
}
.appointment-form .form-section h5 {
color: var(--primary-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.appointment-form .form-actions {
text-align: center;
padding-top: 20px;
}
/* Highlight Widget - Same white background as other widgets */
.tool-widget-card.highlight-widget {
background: var(--white);
border: 2px solid var(--primary-color);
}
.tool-widget-card.highlight-widget:hover {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: #fff;
}
.tool-widget-card.highlight-widget:hover .widget-icon {
background: rgba(255,255,255,0.2);
}
.tool-widget-card.highlight-widget:hover .widget-icon i {
color: #fff;
}
/* ==============================================
INFORMATION & GRIEVANCE OFFICER CARDS
============================================== */
.officers-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.officer-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
padding: 30px;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.officer-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0,0,0,0.15);
}
.officer-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
}
.officer-card.information-officer::before {
background: linear-gradient(90deg, #2196f3, #03a9f4);
}
.officer-card.grievance-officer::before {
background: linear-gradient(90deg, #f44336, #e91e63);
}
.officer-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 20px;
}
.information-officer .officer-badge {
background: #e3f2fd;
color: #1976d2;
}
.grievance-officer .officer-badge {
background: #ffebee;
color: #c62828;
}
.officer-badge i {
font-size: 1rem;
}
.officer-photo {
width: 150px;
height: 150px;
margin: 0 auto 20px;
border-radius: 50%;
overflow: hidden;
border: 5px solid #f0f0f0;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.officer-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.officer-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
color: #757575;
font-size: 50px;
}
.officer-info h4 {
color: var(--dark-color);
margin-bottom: 5px;
font-weight: 600;
}
.officer-info .position {
display: block;
color: #666;
font-size: 0.95rem;
margin-bottom: 15px;
}
.officer-contact {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 15px;
}
.officer-contact .contact-item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 15px;
background: #f8f9fa;
border-radius: 8px;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
.officer-contact .contact-item:hover {
background: var(--primary-color);
color: #fff;
}
.officer-contact .contact-item i {
width: 20px;
text-align: center;
}
.officer-description {
margin-top: 20px;
padding-top: 20px;
border-top: 1px dashed #ddd;
}
.officer-description p {
color: #666;
font-size: 0.9rem;
margin-bottom: 0;
line-height: 1.6;
}
/* Mobile responsive officers */
@media (max-width: 768px) {
.officer-card {
padding: 20px;
}
.officer-photo {
width: 120px;
height: 120px;
}
.officer-placeholder {
font-size: 40px;
}
.officer-info h4 {
font-size: 1.1rem;
}
}
/* ==============================================
FIX: CONSISTENT HOVER COLORS FOR ALL WIDGETS
Online KYC, EMI Calculator - same hover style
============================================== */
.tool-widget-card:hover,
.tool-widget-card.highlight-widget:hover {
background: var(--primary-color) !important;
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(26, 95, 42, 0.25);
}
.tool-widget-card:hover .widget-icon,
.tool-widget-card.highlight-widget:hover .widget-icon {
background: var(--white) !important;
}
.tool-widget-card:hover .widget-icon i,
.tool-widget-card.highlight-widget:hover .widget-icon i {
color: var(--primary-color) !important;
}
.tool-widget-card:hover h5,
.tool-widget-card.highlight-widget:hover h5 {
color: var(--white) !important;
}
/* FIX: Text overflow on widget hover - ensure text doesn't get cut off */
.tool-widget-card h5 {
font-size: 0.9rem;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
min-height: 2.6em;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 5px;
}
/* ==============================================
FIX: FOOTER SPACING - Reduce excessive padding
============================================== */
.footer-top {
padding: 40px 0 25px;
}
.footer-bottom {
padding: 15px 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-widget {
margin-bottom: 15px;
}
.footer-widget h4 {
margin-bottom: 18px;
padding-bottom: 10px;
}
/* ==============================================
FIX: MOBILE MENU CLICK ISSUE
Improve touch targets and z-index
============================================== */
@media (max-width: 991px) {
.mobile-menu-toggle {
display: flex !important;
z-index: 1001;
padding: 14px 18px;
font-size: 24px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
}
.main-nav {
z-index: 10000;
}
.menu-overlay {
z-index: 9999;
}
/* Make dropdown items clickable properly */
.nav-menu .has-dropdown > a {
pointer-events: auto;
cursor: pointer;
}
.nav-menu .dropdown li a {
padding: 12px 20px;
display: block;
width: 100%;
}
}
/* ==============================================
FIX: HEADER NAME - Center when 2 lines
============================================== */
.logo-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.logo-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1.25;
text-align: left;
}
@media (max-width: 576px) {
.logo-name {
font-size: 0.95rem;
text-align: center;
}
.logo-text {
text-align: center;
}
}
/* ==============================================
FIX: MOBILE SERVICE CENTER TEXT OVERFLOW
============================================== */
@media (max-width: 576px) {
.tool-widget-card {
padding: 12px 8px;
}
.tool-widget-card h5 {
font-size: 0.75rem;
word-break: break-word;
hyphens: auto;
}
.widget-icon {
width: 40px;
height: 40px;
}
.widget-icon i {
font-size: 16px;
}
}
/* ==============================================
FIX: VISITOR COUNTER DISPLAY
============================================== */
.visitor-counter {
display: flex;
gap: 15px;
justify-content: center;
margin: 10px 0;
}
.visitor-item {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.1);
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
color: rgba(255,255,255,0.9);
}
.visitor-item i {
color: var(--primary-light);
}
.visitor-item.today {
background: rgba(40, 167, 69, 0.2);
}
.visitor-item.today i {
color: #28a745;
}
/* ==============================================
FIX: LEADERSHIP MESSAGE SECTION DISPLAY
============================================== */
.leadership-messages-section {
background: var(--light-bg);
padding: 60px 0;
}
.message-card {
background: var(--white);
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
padding: 30px;
height: 100%;
}
.message-card.chairman-card {
border-top: 4px solid var(--primary-color);
}
.message-card.ceo-card {
border-top: 4px solid var(--accent-color);
}
.message-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dashed var(--border-color);
}
.leader-photo {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 3px solid var(--primary-color);
}
.leader-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.leader-photo-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
}
.leader-photo-placeholder i {
font-size: 40px;
color: rgba(255,255,255,0.8);
}
.leader-info h4 {
margin-bottom: 5px;
color: var(--text-color);
}
.leader-info .position {
color: var(--primary-color);
font-weight: 600;
font-size: 14px;
}
.message-content {
color: var(--text-light);
font-size: 14px;
line-height: 1.8;
}
.message-content p {
margin-bottom: 15px;
}
/* ==============================================
FIX: GRIEVANCE TRACKING STYLES
============================================== */
.tracking-form {
background: var(--light-bg);
padding: 25px;
border-radius: 12px;
margin-top: 30px;
}
.tracking-form h5 {
color: var(--primary-color);
margin-bottom: 15px;
}
.tracking-result {
background: var(--white);
padding: 25px;
border-radius: 12px;
border-left: 4px solid var(--primary-color);
margin-top: 20px;
}
.tracking-result h5 {
color: var(--primary-color);
margin-bottom: 15px;
}
.status-badge {
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
}
.status-badge.pending {
background: #fff3cd;
color: #856404;
}
.status-badge.in_progress {
background: #cce5ff;
color: #004085;
}
.status-badge.resolved {
background: #d4edda;
color: #155724;
}
.status-badge.closed {
background: #e2e3e5;
color: #383d41;
}
/* ==============================================
FIX: CONSISTENT HOVER FOR ALL TOOL WIDGETS
Online KYC, EMI Calculator, etc - same hover
============================================== */
.tool-widget-card:hover,
.tool-widget-card.highlight-widget:hover {
background: var(--primary-color) !important;
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(26, 95, 42, 0.25) !important;
border-color: var(--primary-color) !important;
}
.tool-widget-card:hover .widget-icon,
.tool-widget-card.highlight-widget:hover .widget-icon {
background: var(--white) !important;
}
.tool-widget-card:hover .widget-icon i,
.tool-widget-card.highlight-widget:hover .widget-icon i {
color: var(--primary-color) !important;
}
.tool-widget-card:hover h5,
.tool-widget-card.highlight-widget:hover h5 {
color: var(--white) !important;
}
/* FIX: Widget text overflow - prevent cutting */
.tool-widget-card h5 {
font-size: 0.85rem !important;
line-height: 1.35;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
min-height: auto;
padding: 0 5px;
margin-bottom: 0;
white-space: normal;
overflow: visible !important;
}
.tool-widget-card {
padding: 20px 12px !important;
min-height: 130px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* ==============================================
FIX: HEADER NAME - Center when 2 lines
============================================== */
.logo-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.logo-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1.25;
text-align: center;
display: block;
}
.logo-slogan {
text-align: center;
display: block;
}
.logo a {
display: flex;
align-items: center;
gap: 12px;
}
@media (max-width: 576px) {
.logo-name {
font-size: 0.9rem;
}
.logo-text {
text-align: center;
}
.logo a {
flex-direction: column;
text-align: center;
}
}
/* ==============================================
FIX: FOOTER SPACING - Reduce padding
============================================== */
.footer-top {
padding: 35px 0 20px !important;
}
.footer-bottom {
padding: 12px 0 !important;
}
.footer-widget {
margin-bottom: 15px !important;
}
.footer-widget h4 {
margin-bottom: 15px !important;
padding-bottom: 8px;
font-size: 1rem;
}
.footer-widget ul li {
margin-bottom: 6px;
}
/* ==============================================
FIX: MOBILE APP SECTION - Add admin photo area
============================================== */
.mobile-app-section {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
padding: 50px 0;
color: var(--white);
}
.mobile-app-section .app-content {
padding-right: 30px;
}
.mobile-app-section h2 {
color: var(--white);
font-size: 1.8rem;
margin-bottom: 10px;
}
.mobile-app-section h3 {
color: rgba(255,255,255,0.9);
font-size: 1.3rem;
margin-bottom: 15px;
}
.mobile-app-section .app-tagline {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 10px;
}
.mobile-app-section .app-description {
color: rgba(255,255,255,0.85);
margin-bottom: 20px;
}
.app-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.app-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s;
}
.app-btn.google-play {
background: #000;
color: #fff;
}
.app-btn.app-store {
background: #000;
color: #fff;
}
.app-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.app-btn i {
font-size: 28px;
}
.app-btn span {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.app-btn span small {
font-size: 10px;
opacity: 0.8;
}
.app-image {
position: relative;
}
.app-image img {
max-width: 100%;
height: auto;
border-radius: 20px;
}
.app-mockup {
display: none;
}
/* Show mockup only if image fails */
.app-image img[style*="display: none"] + .app-mockup,
.app-image:not(:has(img)) .app-mockup {
display: flex;
width: 250px;
height: 450px;
background: linear-gradient(145deg, #333, #222);
border-radius: 35px;
margin: 0 auto;
align-items: center;
justify-content: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.app-mockup i {
font-size: 80px;
color: rgba(255,255,255,0.3);
}
/* ==============================================
FIX: LEADERSHIP MESSAGE CARD BODY
============================================== */
.message-body {
position: relative;
}
.message-body .quote-icon {
font-size: 24px;
color: var(--primary-light);
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
}
.message-body .message-text {
padding-left: 35px;
color: var(--text-light);
font-size: 14px;
line-height: 1.7;
margin-bottom: 15px;
}
.message-body .read-more-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--primary-color);
font-weight: 600;
font-size: 13px;
text-decoration: none;
}
.message-body .read-more-link:hover {
color: var(--primary-dark);
}
.photo-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.photo-placeholder i {
font-size: 40px;
color: rgba(255,255,255,0.8);
}
/* ==============================================
FIX: MOBILE WIDGET TEXT SIZE
============================================== */
@media (max-width: 576px) {
.tool-widget-card {
padding: 15px 8px !important;
min-height: 110px;
}
.tool-widget-card h5 {
font-size: 0.7rem !important;
line-height: 1.3;
}
.widget-icon {
width: 45px !important;
height: 45px !important;
margin-bottom: 10px !important;
}
.widget-icon i {
font-size: 18px !important;
}
.mobile-app-section {
padding: 40px 0;
}
.mobile-app-section h2 {
font-size: 1.4rem;
}
.mobile-app-section .app-content {
padding-right: 0;
text-align: center;
}
.app-buttons {
justify-content: center;
}
}
/* ==============================================
FIX: NEPALI DATE PICKER STYLES
============================================== */
.nepali-datepicker-wrapper {
position: relative;
}
.nepali-datepicker-wrapper input,
input.nepali-datepicker,
input[readonly].nepali-datepicker {
cursor: pointer;
background-color: #fff !important;
}
/* Readonly datepicker inputs should look clickable */
input[readonly].nepali-datepicker:hover,
.nepali-datepicker-wrapper input:hover {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(26, 95, 42, 0.1);
}
.nepali-datepicker-wrapper .input-group-text {
cursor: pointer;
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
.ndp-container {
z-index: 9999 !important;
font-family: inherit;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
border-radius: 8px;
}
/* Nepali Datepicker styling improvements */
.ndp-container .ndp-header {
background: var(--primary-color) !important;
}
.ndp-container .ndp-day.selected,
.ndp-container .ndp-day:hover {
background: var(--primary-color) !important;
}
/* Nepali Datepicker Year/Month Select Dropdowns */
.ndp-container select {
padding: 8px 12px;
font-size: 14px;
border-radius: 6px;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
min-width: 80px;
appearance: auto;
-webkit-appearance: menulist;
-moz-appearance: menulist;
}
.ndp-container select:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 2px rgba(26, 95, 42, 0.15);
}
.ndp-container select option {
padding: 8px;
font-size: 14px;
}
.ndp-container .ndp-header select {
color: #333;
background: #fff;
margin: 0 4px;
}
/* ==============================================
INSTITUTIONAL STATS SECTION - Enhanced Eye-Catching Design
============================================== */
.institutional-stats-section {
padding: 50px 0;
background: linear-gradient(135deg, #f0f7f1 0%, #e8f5e9 50%, #f0f7f1 100%);
position: relative;
overflow: hidden;
}
.institutional-stats-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(26, 95, 42, 0.03) 0%, transparent 50%);
animation: float 15s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(2%, 2%) rotate(5deg); }
}
.institutional-stats-section .section-header h2 {
font-size: 2rem;
margin-bottom: 8px;
color: var(--primary-dark);
}
.fiscal-year-badge-wrap {
margin-top: 15px;
}
.institutional-stats-section .fiscal-year-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: #fff;
padding: 10px 28px;
border-radius: 30px;
font-size: 15px;
font-weight: 600;
box-shadow: 0 4px 20px rgba(26, 95, 42, 0.3);
letter-spacing: 0.5px;
}
.institutional-stats-section .fiscal-year-badge i {
font-size: 14px;
opacity: 0.9;
}
.stat-card {
background: #fff;
border-radius: 16px;
padding: 25px 18px;
text-align: center;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 100%;
position: relative;
overflow: hidden;
border: 1px solid rgba(26, 95, 42, 0.08);
}
.stat-card::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
transform: scaleX(0);
transition: transform 0.4s ease;
}
.stat-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 40px rgba(26, 95, 42, 0.18);
}
.stat-card:hover::before {
transform: scaleX(1);
}
.stat-card .stat-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
box-shadow: 0 8px 20px rgba(26, 95, 42, 0.25);
transition: all 0.4s ease;
position: relative;
}
.stat-card:hover .stat-icon {
transform: scale(1.1) rotate(10deg);
border-radius: 50%;
}
.stat-card .stat-icon i {
color: #fff;
font-size: 24px;
transition: transform 0.3s ease;
}
.stat-card:hover .stat-icon i {
transform: scale(1.15);
}
.stat-card .stat-value {
font-size: 1.6rem;
font-weight: 700;
color: var(--primary-dark);
line-height: 1.2;
margin-bottom: 5px;
transition: color 0.3s ease;
}
.stat-card:hover .stat-value {
color: var(--primary-color);
}
.stat-card .stat-label {
font-size: 13px;
color: var(--text-light);
margin-top: 5px;
font-weight: 500;
}
/* NPA Card Colors */
.stat-card.npa-card.good .stat-icon {
background: linear-gradient(135deg, #28a745, #34ce57);
box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);
}
.stat-card.npa-card.warning .stat-icon {
background: linear-gradient(135deg, #ffc107, #ffca2c);
box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
}
.stat-card.npa-card.bad .stat-icon {
background: linear-gradient(135deg, #dc3545, #e04a59);
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}
@media (max-width: 767px) {
.institutional-stats-section {
padding: 30px 0;
}
.stat-card {
padding: 15px 10px;
}
.stat-card .stat-value {
font-size: 1.1rem;
}
.stat-card .stat-icon {
width: 40px;
height: 40px;
}
.stat-card .stat-icon i {
font-size: 16px;
}
}
/* ==============================================
FIX: BRANCH/SERVICE CENTER SELECT IN FORMS
============================================== */
.branch-select-enhanced {
position: relative;
}
.branch-select-enhanced .form-select {
padding-right: 35px;
}
.branch-badge {
display: inline-block;
padding: 2px 8px;
font-size: 10px;
background: var(--primary-color);
color: #fff;
border-radius: 10px;
margin-left: 5px;
}
/* ==============================================
FIX: MOBILE APP SECTION PHOTO STYLES
============================================== */
.app-phone-img {
max-width: 280px;
height: auto;
border-radius: 25px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.app-mockup-default {
display: flex;
justify-content: center;
align-items: center;
}
.phone-frame {
width: 220px;
height: 420px;
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
border-radius: 35px;
padding: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
position: relative;
}
.phone-frame::before {
content: '';
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 6px;
background: #333;
border-radius: 10px;
}
.phone-screen {
width: 100%;
height: 100%;
background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border-radius: 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}
.phone-screen i {
font-size: 60px;
color: rgba(255,255,255,0.9);
}
.phone-screen span {
font-size: 16px;
color: rgba(255,255,255,0.9);
font-weight: 600;
}
@media (max-width: 768px) {
.phone-frame {
width: 180px;
height: 340px;
}
.phone-screen i {
font-size: 45px;
}
.phone-screen span {
font-size: 14px;
}
.app-phone-img {
max-width: 200px;
}
}
/* ==============================================
AWARDS SECTION STYLES
============================================== */
.awards-section {
background: var(--light-bg);
}
.award-card {
background: var(--white);
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
padding: 25px;
text-align: center;
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0,0,0,0.05);
}
.award-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
.award-image {
width: 120px;
height: 120px;
margin: 0 auto 20px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--secondary-color);
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.award-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.award-icon {
width: 100px;
height: 100px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #ffd700, #ff9800);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}
.award-icon i {
font-size: 40px;
color: var(--white);
}
.award-content h4 {
color: var(--primary-color);
margin-bottom: 10px;
font-size: 1.1rem;
}
.award-by {
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: 8px;
}
.award-by i {
color: #ffc107;
margin-right: 5px;
}
.award-date {
display: inline-block;
background: var(--light-bg);
padding: 5px 15px;
border-radius: 20px;
font-size: 0.85rem;
color: var(--text-light);
margin-bottom: 10px;
}
.award-desc {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.6;
margin-top: 10px;
}
/* ==============================================
MOBILE MENU FIXES - CRITICAL FIX FOR TOUCH/CLICK
============================================== */
@media (max-width: 991px) {
/* Menu Overlay - Must be below nav but cover page content */
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100dvh;
background: rgba(0,0,0,0.6);
z-index: 999998;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
pointer-events: none;
}
.menu-overlay.active {
display: block;
opacity: 1;
pointer-events: auto;
}
/* Main Navigation Sidebar */
.main-nav {
position: fixed;
top: 0;
right: -320px;
width: 290px;
height: 100vh;
height: 100dvh;
max-height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
background: var(--white);
box-shadow: -5px 0 30px rgba(0,0,0,0.2);
z-index: 999999;
display: flex;
flex-direction: column;
padding: 70px 0 30px;
transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
.main-nav.active {
right: 0;
}
/* Close Menu Button - Fixed inside nav */
.close-menu {
display: flex !important;
position: absolute;
top: 15px;
right: 15px;
background: var(--light-bg);
border: none;
font-size: 24px;
cursor: pointer;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
border-radius: 50%;
z-index: 1000000;
color: var(--text-color);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background 0.2s ease, transform 0.2s ease;
}
.close-menu:hover,
.close-menu:active {
background: #e0e0e0;
transform: scale(0.95);
}
/* Nav Menu List */
.nav-menu {
flex-direction: column;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
.nav-menu > li {
width: 100%;
border-bottom: 1px solid var(--border-color);
}
/* Nav Menu Links - Proper touch target */
.nav-menu > li > a {
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
border-radius: 0;
min-height: 52px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: background 0.2s ease, color 0.2s ease;
}
.nav-menu > li > a:hover,
.nav-menu > li > a:active,
.nav-menu > li.active > a {
background: rgba(26, 95, 42, 0.05);
color: var(--primary-color);
}
/* Dropdown Sub-menu */
.nav-menu .dropdown {
position: static;
opacity: 1;
visibility: visible;
max-height: 0;
overflow: hidden;
transform: none;
box-shadow: none;
background: var(--light-bg);
padding: 0;
border-radius: 0;
transition: max-height 0.3s ease, padding 0.3s ease;
list-style: none;
margin: 0;
}
.nav-menu .has-dropdown.open .dropdown {
max-height: 600px;
padding: 8px 0;
}
/* Dropdown Links - Proper touch targets */
.nav-menu .dropdown li a {
padding: 14px 20px 14px 40px;
display: block;
width: 100%;
font-size: 0.95rem;
min-height: 48px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
text-decoration: none;
color: var(--text-color);
transition: background 0.2s ease, color 0.2s ease;
}
.nav-menu .dropdown li a:hover,
.nav-menu .dropdown li a:active {
background: rgba(26, 95, 42, 0.08);
color: var(--primary-color);
}
/* Dropdown Arrow Icon */
.nav-menu .has-dropdown > a i {
transition: transform 0.3s ease;
font-size: 12px;
}
.nav-menu .has-dropdown.open > a i {
transform: rotate(180deg);
}
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
display: flex !important;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 14px 18px;
font-size: 22px;
cursor: pointer;
position: relative;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
background: var(--primary-color);
color: var(--white);
border-radius: 10px;
border: none;
margin-left: auto;
min-width: 50px;
min-height: 50px;
transition: transform 0.2s ease, background 0.2s ease;
}
.mobile-menu-toggle:hover {
background: var(--primary-light);
}
.mobile-menu-toggle:active {
transform: scale(0.95);
}
/* Prevent body scroll when menu is open */
body.menu-open {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
}
/* ==============================================
CHATBOT HELP CENTER TEXT OVERFLOW FIX
============================================== */
.chatbot-title span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
@media (max-width: 400px) {
.chatbot-title span {
font-size: 0.9rem;
max-width: 140px;
}
.chatbot-header {
padding: 12px 15px;
}
}
/* ==============================================
LEADERSHIP MESSAGES ON ABOUT PAGE
============================================== */
.leadership-messages-about .leadership-message-full {
background: var(--white);
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.leader-photo-large {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
border: 4px solid var(--primary-color);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.leader-photo-large img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-placeholder-large {
width: 100%;
height: 100%;
background: var(--light-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
color: #ccc;
}
.leader-position {
color: var(--primary-color);
font-weight: 500;
font-size: 0.95rem;
}
.message-content-full {
position: relative;
padding-left: 50px;
}
.quote-icon-large {
position: absolute;
left: 0;
top: 0;
font-size: 35px;
color: var(--primary-color);
opacity: 0.3;
}
.message-text-full {
line-height: 1.8;
color: var(--text-color);
}
.message-text-full p {
margin-bottom: 15px;
}
@media (max-width: 767px) {
.message-content-full {
padding-left: 0;
padding-top: 40px;
}
.quote-icon-large {
left: 50%;
transform: translateX(-50%);
}
.leader-photo-large {
width: 120px;
height: 120px;
}
}
/* ==============================================
INSTITUTIONAL PROFILE SECTION
============================================== */
.institutional-profile-section {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
padding: 15px 0;
}
.institutional-profile-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.profile-title {
display: flex;
align-items: center;
gap: 10px;
color: var(--white);
font-size: 1.1rem;
font-weight: 600;
}
.profile-title i {
font-size: 1.3rem;
color: var(--secondary-color);
}
.profile-reports {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.report-quick-link {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 25px;
color: var(--white);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
position: relative;
}
.report-quick-link:hover {
background: var(--white);
color: var(--primary-color);
transform: translateY(-2px);
}
.report-quick-link i {
font-size: 1rem;
}
.report-quick-link .latest-badge {
position: absolute;
top: -8px;
right: -5px;
background: #ff4757;
color: var(--white);
font-size: 0.65rem;
padding: 2px 6px;
border-radius: 10px;
font-weight: 600;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.report-quick-link.monthly:hover {
background: #3498db;
color: var(--white);
border-color: #3498db;
}
.report-quick-link.annual:hover {
background: #27ae60;
color: var(--white);
border-color: #27ae60;
}
@media (max-width: 767px) {
.institutional-profile-bar {
flex-direction: column;
text-align: center;
}
.profile-reports {
justify-content: center;
}
.report-quick-link {
padding: 8px 14px;
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.report-quick-link span {
display: none;
}
.report-quick-link {
padding: 10px 12px;
border-radius: 50%;
}
.report-quick-link i {
font-size: 1.1rem;
}
}
/* ==============================================
CTA SECTION BUTTONS
============================================== */
.cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
@media (max-width: 991px) {
.cta-buttons {
justify-content: center;
}
}
.cta-section .btn-outline-light {
border: 2px solid rgba(255,255,255,0.8);
}
.cta-section .btn-outline-light:hover {
background: rgba(255,255,255,0.1);
color: var(--white);
}
/* ==============================================
LOGO SLOGAN ONLY (No name in header)
============================================== */
.logo-text {
max-width: 250px;
}
.logo-slogan {
font-size: 0.85rem;
color: var(--primary-color);
font-weight: 500;
line-height: 1.4;
}
@media (max-width: 576px) {
.logo-slogan {
font-size: 0.75rem;
}
.logo-text {
max-width: 180px;
}
}
/* ==============================================
USEFUL LINKS FLOATING BUTTON
============================================== */
.useful-links-float {
position: fixed;
left: 20px;
bottom: 100px;
z-index: 9998;
}
.useful-links-toggle {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #3498db, #2980b9);
color: var(--white);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 20px rgba(52, 152, 219, 0.4);
transition: all 0.3s ease;
}
.useful-links-toggle:hover {
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(52, 152, 219, 0.5);
}
.useful-links-popup-box {
position: absolute;
bottom: 60px;
left: 0;
width: 280px;
background: var(--white);
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.95);
transition: all 0.3s ease;
overflow: hidden;
}
.useful-links-popup-box.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.useful-links-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 18px;
background: linear-gradient(135deg, #3498db, #2980b9);
color: var(--white);
}
.useful-links-header h5 {
margin: 0;
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.useful-links-close {
background: rgba(255,255,255,0.2);
border: none;
color: var(--white);
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.useful-links-close:hover {
background: rgba(255,255,255,0.3);
}
.useful-links-body {
max-height: 300px;
overflow-y: auto;
padding: 10px 0;
}
.useful-link-row {
display: flex;
align-items: center;
padding: 12px 18px;
color: var(--text-color);
text-decoration: none;
transition: all 0.2s ease;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.useful-link-row:last-child {
border-bottom: none;
}
.useful-link-row:hover {
background: var(--light-bg);
color: var(--primary-color);
}
.useful-link-row i:first-child {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-bg);
border-radius: 8px;
font-size: 14px;
color: #3498db;
margin-right: 12px;
flex-shrink: 0;
}
.useful-link-row span {
flex: 1;
font-size: 0.9rem;
}
.useful-link-row .link-arrow {
font-size: 12px;
color: var(--text-light);
opacity: 0;
transform: translateX(-5px);
transition: all 0.2s ease;
}
.useful-link-row:hover .link-arrow {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 576px) {
.useful-links-float {
left: 15px;
bottom: 90px;
}
.useful-links-toggle {
width: 45px;
height: 45px;
font-size: 18px;
}
.useful-links-popup-box {
width: calc(100vw - 30px);
max-width: 280px;
}
}
/* ==============================================
LEADERSHIP PROFILE CARDS - 4 Card Grid
============================================== */
.leadership-profile-card {
background: var(--white);
border-radius: 16px;
padding: 25px 20px;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.05);
}
.leadership-profile-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-color);
}
.leadership-profile-card.chairman-card::before {
background: linear-gradient(90deg, #1a5928, #2e7d32);
}
.leadership-profile-card.ceo-card::before {
background: linear-gradient(90deg, #2e7d32, #4caf50);
}
.leadership-profile-card.info-officer::before {
background: linear-gradient(90deg, #1976d2, #42a5f5);
}
.leadership-profile-card.grievance-officer::before {
background: linear-gradient(90deg, #f57c00, #ffb74d);
}
.leadership-profile-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 45px rgba(0,0,0,0.15);
}
.leadership-profile-card .profile-photo {
width: 110px;
height: 110px;
margin: 0 auto 18px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--primary-light);
box-shadow: 0 5px 20px rgba(26, 95, 42, 0.2);
flex-shrink: 0;
}
.leadership-profile-card .profile-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.leadership-profile-card .photo-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 40px;
}
.leadership-profile-card .profile-info {
flex: 1;
display: flex;
flex-direction: column;
}
.leadership-profile-card .profile-info h4 {
font-size: 1.05rem;
font-weight: 600;
color: var(--text-color);
margin: 0 0 8px;
line-height: 1.3;
}
.leadership-profile-card .profile-position {
display: inline-block;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: var(--primary-color);
padding: 5px 14px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
margin-bottom: 12px;
}
.leadership-profile-card.info-officer .profile-position {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1565c0;
}
.leadership-profile-card.grievance-officer .profile-position {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
color: #e65100;
}
.leadership-profile-card .profile-message {
font-size: 0.85rem;
color: var(--text-light);
line-height: 1.6;
margin: 0;
flex: 1;
}
.leadership-profile-card .officer-contact-info {
margin-top: 10px;
}
.leadership-profile-card .officer-contact-info a {
display: block;
font-size: 0.8rem;
color: var(--text-light);
margin-bottom: 5px;
transition: color 0.3s;
}
.leadership-profile-card .officer-contact-info a:hover {
color: var(--primary-color);
}
.leadership-profile-card .officer-contact-info a i {
margin-right: 6px;
color: var(--primary-light);
width: 16px;
}
.leadership-profile-card .profile-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
padding: 10px 20px;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 500;
margin-top: 15px;
transition: all 0.3s ease;
}
.leadership-profile-card .profile-btn:hover {
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(26, 95, 42, 0.3);
color: var(--white);
}
.leadership-profile-card .officer-badge {
position: absolute;
top: 15px;
right: 15px;
width: 36px;
height: 36px;
background: linear-gradient(135deg, #1976d2, #42a5f5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 14px;
box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
}
.leadership-profile-card .officer-badge.grievance {
background: linear-gradient(135deg, #f57c00, #ffb74d);
box-shadow: 0 3px 10px rgba(245, 124, 0, 0.3);
}
@media (max-width: 991px) {
.leadership-profile-card {
padding: 20px 15px;
}
.leadership-profile-card .profile-photo {
width: 90px;
height: 90px;
}
}
@media (max-width: 575px) {
.leadership-profile-card .profile-info h4 {
font-size: 0.95rem;
}
}
/* ==============================================
SECTION HEADER CONSISTENCY - Uniform Styling
============================================== */
.section-header {
margin-bottom: 50px;
position: relative;
}
.section-header h2 {
font-size: 2.2rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 12px;
position: relative;
display: inline-block;
}
.section-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.section-header h3 i {
font-size: 1.2rem;
}
.section-badge-wrap {
margin-bottom: 15px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.1));
color: var(--primary-color);
padding: 8px 18px;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 500;
border: 1px solid rgba(26, 95, 42, 0.15);
}
.section-divider {
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
border-radius: 2px;
margin: 15px auto 20px;
position: relative;
}
.section-divider::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background: var(--secondary-color);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2);
}
.section-header p {
color: var(--text-light);
font-size: 1.1rem;
margin-top: 10px;
}
/* ==============================================
INTEREST RATE TABLE - Improved Row Spacing
============================================== */
.rate-card .table td {
padding: 14px 10px;
border-bottom: 1px solid rgba(0,0,0,0.08);
transition: background 0.2s ease;
}
.rate-card .table tr:last-child td {
border-bottom: none;
}
.rate-card .table tr:hover td {
background: rgba(26, 95, 42, 0.04);
}
.rate-card .table tbody tr {
border-bottom: 1px solid #f0f0f0;
}
.rate-card .table tbody tr:last-child {
border-bottom: none;
}
/* ==============================================
MOBILE APP SECTION - Text Clarity Fix
============================================== */
.mobile-app-section .app-tagline {
font-size: 1.25rem !important;
color: #ffffff !important;
font-weight: 600 !important;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
margin-bottom: 15px;
}
.mobile-app-section .app-description {
font-size: 1.05rem !important;
color: rgba(255, 255, 255, 0.95) !important;
line-height: 1.7;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.mobile-app-section h2,
.mobile-app-section h3 {
color: #ffffff !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.mobile-app-section p {
color: rgba(255, 255, 255, 0.95) !important;
}
/* ==============================================
NEWS TICKER ALIGNMENT FIX
============================================== */
.notice-ticker {
background: #fff8e1;
border-bottom: 2px solid var(--secondary-color);
padding: 0;
overflow: hidden;
}
.notice-ticker .container {
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.ticker-wrapper {
display: flex;
align-items: stretch;
margin-left: -15px;
margin-right: -15px;
position: relative;
}
.ticker-label {
background: var(--primary-color);
color: var(--white);
padding: 12px 25px 12px 15px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
position: relative;
flex-shrink: 0;
margin-left: 15px;
}
.ticker-label::after {
content: '';
position: absolute;
right: -15px;
top: 0;
border-style: solid;
border-width: 22px 0 22px 15px;
border-color: transparent transparent transparent var(--primary-color);
}
.ticker-content {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
padding-left: 25px;
margin-left: 0;
}
/* ==============================================
CAREER PAGE - Grid Layout and Search
============================================== */
.career-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
@media (max-width: 991px) {
.career-grid {
grid-template-columns: 1fr;
}
}
.career-search-box {
background: var(--white);
border-radius: 12px;
padding: 20px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
margin-bottom: 25px;
}
.career-search-box .search-input-wrapper {
display: flex;
gap: 10px;
}
.career-search-box input {
flex: 1;
padding: 12px 18px;
border: 2px solid #e8e8e8;
border-radius: 10px;
font-size: 0.95rem;
transition: all 0.3s;
}
.career-search-box input:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.1);
}
.career-search-box .btn {
padding: 12px 25px;
}
.job-card {
background: var(--white);
border-radius: 14px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 25px;
transition: all 0.3s ease;
border: 1px solid rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
height: 100%;
}
.job-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}
.job-card.deadline-passed {
opacity: 0.7;
background: #fafafa;
}
.job-card .job-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
margin-bottom: 15px;
}
.job-card .job-header h4 {
margin: 0;
font-size: 1.15rem;
color: var(--text-color);
line-height: 1.3;
}
.job-card .job-header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.job-type {
display: inline-block;
padding: 5px 12px;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: var(--primary-color);
border-radius: 15px;
font-size: 0.75rem;
font-weight: 500;
}
.deadline-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 15px;
font-size: 0.7rem;
font-weight: 500;
}
.deadline-badge.active {
background: #d4edda;
color: #155724;
}
.deadline-badge.expired {
background: #f8d7da;
color: #721c24;
}
.job-details ul {
list-style: none;
padding: 0;
margin: 0 0 15px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.job-details li {
font-size: 0.85rem;
color: var(--text-light);
display: flex;
align-items: center;
gap: 6px;
}
.job-details li i {
color: var(--primary-light);
}
.job-description {
flex: 1;
margin-bottom: 15px;
}
.job-description p {
margin: 0;
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.6;
}
.job-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
}
.job-actions .btn {
padding: 10px 18px;
font-size: 0.85rem;
}
/* ==============================================
DATE INPUT DROPDOWN STYLES
============================================== */
.date-dropdown-group {
display: flex;
gap: 10px;
}
.date-dropdown-group .form-select {
flex: 1;
padding: 12px 15px;
font-size: 0.95rem;
}
.date-dropdown-group .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.1);
}
/* ==============================================
COMMITTEE FILTER FIX - Show All Button Active
============================================== */
.filter-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-tab {
padding: 10px 20px;
background: var(--white);
border: 2px solid var(--border-color);
border-radius: 25px;
color: var(--text-color);
font-size: 14px;
font-weight: 500;
transition: all 0.3s;
text-decoration: none;
}
.filter-tab:hover,
.filter-tab.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
}
.filter-tab i {
margin-right: 8px;
}
.empty-committee {
background: #f8f9fa;
border-radius: 12px;
padding: 40px;
}
.empty-committee i {
color: #ccc;
}
/* ==============================================
ADMIN TABLE IMPROVEMENTS
============================================== */
.admin-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}
.admin-table thead {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}
.admin-table thead th {
padding: 16px 18px;
font-weight: 600;
color: var(--white);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.5px;
border: none;
text-align: left;
}
.admin-table tbody tr {
transition: all 0.2s ease;
border-bottom: 1px solid #f0f0f0;
}
.admin-table tbody tr:hover {
background: #f8fdf9;
}
.admin-table tbody td {
padding: 14px 18px;
vertical-align: middle;
font-size: 0.9rem;
}
.admin-table tbody tr:last-child {
border-bottom: none;
}
/* Admin Form Card */
.admin-form-card {
background: var(--white);
border-radius: 16px;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
overflow: hidden;
}
.admin-form-card .card-header {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
padding: 18px 25px;
font-weight: 600;
}
.admin-form-card .card-body {
padding: 25px;
}
/* ==============================================
EMPTY STATE IMPROVEMENTS
============================================== */
.empty-state {
text-align: center;
padding: 50px 20px;
background: #fafafa;
border-radius: 16px;
}
.empty-state .empty-icon {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
}
.empty-state .empty-icon i {
font-size: 40px;
color: var(--primary-color);
}
.empty-state h4 {
color: var(--text-color);
margin-bottom: 10px;
}
.empty-state p {
color: var(--text-light);
max-width: 400px;
margin: 0 auto;
}
/* ==============================================
ENHANCED PUBLIC FORMS - Eye-Catching Design
============================================== */
.form-box-enhanced {
background: var(--white);
border-radius: 20px;
box-shadow: 0 10px 50px rgba(0,0,0,0.08);
overflow: hidden;
position: relative;
}
.form-box-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
}
.form-box-enhanced .form-header {
background: linear-gradient(135deg, #f8fdf9, #eef7f0);
padding: 30px;
border-bottom: 1px solid rgba(26, 95, 42, 0.1);
}
.form-box-enhanced .form-header h3 {
margin: 0;
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-color);
display: flex;
align-items: center;
gap: 12px;
}
.form-box-enhanced .form-header h3 i {
width: 45px;
height: 45px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 18px;
}
.form-box-enhanced .form-header p {
margin: 10px 0 0;
color: var(--text-light);
}
.form-box-enhanced .form-body {
padding: 30px;
}
/* Enhanced Input Fields */
.input-enhanced {
position: relative;
margin-bottom: 25px;
}
.input-enhanced label {
display: block;
font-weight: 600;
color: var(--text-color);
margin-bottom: 10px;
font-size: 0.95rem;
}
.input-enhanced label .required {
color: #e53935;
}
.input-enhanced .input-wrapper {
position: relative;
}
.input-enhanced .input-wrapper i.input-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
transition: all 0.3s ease;
z-index: 1;
}
.input-enhanced .input-wrapper.has-icon input,
.input-enhanced .input-wrapper.has-icon select,
.input-enhanced .input-wrapper.has-icon textarea {
padding-left: 50px;
}
.input-enhanced input,
.input-enhanced select,
.input-enhanced textarea {
width: 100%;
padding: 16px 20px;
border: 2px solid #e8e8e8;
border-radius: 14px;
font-size: 1rem;
background: #fafafa;
transition: all 0.3s ease;
}
.input-enhanced input:hover,
.input-enhanced select:hover,
.input-enhanced textarea:hover {
border-color: #d0d0d0;
background: #fff;
}
.input-enhanced input:focus,
.input-enhanced select:focus,
.input-enhanced textarea:focus {
outline: none;
border-color: var(--primary-color);
background: #fff;
box-shadow: 0 0 0 5px rgba(26, 95, 42, 0.08), 0 5px 20px rgba(26, 95, 42, 0.1);
}
.input-enhanced .input-wrapper:focus-within i.input-icon {
color: var(--primary-color);
}
.input-enhanced textarea {
min-height: 130px;
resize: vertical;
}
.input-enhanced .help-text {
margin-top: 8px;
font-size: 0.85rem;
color: #999;
display: flex;
align-items: center;
gap: 5px;
}
/* File Upload Enhanced */
.file-upload-enhanced {
border: 3px dashed #d0d0d0;
border-radius: 16px;
padding: 40px 30px;
text-align: center;
background: #fafafa;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.file-upload-enhanced:hover {
border-color: var(--primary-color);
background: rgba(26, 95, 42, 0.02);
}
.file-upload-enhanced.drag-over {
border-color: var(--primary-color);
background: rgba(26, 95, 42, 0.05);
transform: scale(1.02);
}
.file-upload-enhanced input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.file-upload-enhanced .upload-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.15));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.3s ease;
}
.file-upload-enhanced .upload-icon i {
font-size: 28px;
color: var(--primary-color);
}
.file-upload-enhanced:hover .upload-icon {
transform: scale(1.1);
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}
.file-upload-enhanced:hover .upload-icon i {
color: var(--white);
}
.file-upload-enhanced h5 {
margin: 0 0 8px;
color: var(--text-color);
font-weight: 600;
}
.file-upload-enhanced p {
margin: 0;
color: #999;
font-size: 0.9rem;
}
/* Enhanced Submit Button */
.btn-submit-enhanced {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 40px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
border: none;
border-radius: 14px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 25px rgba(26, 95, 42, 0.3);
position: relative;
overflow: hidden;
}
.btn-submit-enhanced::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.btn-submit-enhanced:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(26, 95, 42, 0.4);
}
.btn-submit-enhanced:hover::before {
left: 100%;
}
.btn-submit-enhanced i {
transition: transform 0.3s ease;
}
.btn-submit-enhanced:hover i {
transform: translateX(5px);
}
/* Contact Form Box Enhancement */
.contact-form-box {
background: var(--white);
border-radius: 20px;
padding: 35px;
box-shadow: 0 10px 50px rgba(0,0,0,0.08);
position: relative;
}
.contact-form-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
border-radius: 20px 20px 0 0;
}
.contact-form-box h4 {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(26, 95, 42, 0.1);
}
/* Contact Info Box Enhancement */
.contact-info-box {
background: linear-gradient(135deg, var(--primary-color), #145021);
border-radius: 20px;
padding: 35px;
color: var(--white);
height: 100%;
}
.contact-info-box h4 {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 10px;
}
.contact-info-box > p {
opacity: 0.85;
margin-bottom: 25px;
font-size: 0.95rem;
}
.contact-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
background: rgba(255,255,255,0.1);
border-radius: 14px;
transition: all 0.3s ease;
}
.contact-item:hover {
background: rgba(255,255,255,0.15);
transform: translateX(5px);
}
.contact-icon {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.contact-details h6 {
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 5px;
opacity: 0.9;
}
.contact-details p {
margin: 0;
font-size: 1rem;
}
.contact-social {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.15);
}
.contact-social h6 {
font-size: 0.9rem;
margin-bottom: 15px;
opacity: 0.9;
}
.contact-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: rgba(255,255,255,0.15);
border-radius: 12px;
color: var(--white);
font-size: 18px;
margin-right: 10px;
transition: all 0.3s ease;
}
.contact-social a:hover {
background: var(--white);
color: var(--primary-color);
transform: translateY(-3px);
}
/* Office Hours Box */
.hours-box {
background: var(--white);
border-radius: 20px;
padding: 35px;
box-shadow: 0 10px 50px rgba(0,0,0,0.08);
}
.hours-box h3 {
color: var(--primary-color);
font-weight: 700;
margin-bottom: 10px;
}
.hours-box h3 i {
margin-right: 10px;
}
.hour-item {
background: #f8f9fa;
padding: 25px;
border-radius: 14px;
transition: all 0.3s ease;
}
.hour-item:hover {
background: #e8f5e9;
transform: translateY(-3px);
}
.hour-item h5 {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 8px;
}
.hour-item p {
margin: 0;
font-size: 1.1rem;
color: var(--text-color);
}
/* Alert Boxes Enhanced */
.alert-enhanced {
padding: 20px 25px;
border-radius: 14px;
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 25px;
border: none;
}
.alert-enhanced .alert-icon {
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.alert-enhanced.alert-success {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: #2e7d32;
}
.alert-enhanced.alert-success .alert-icon {
background: #2e7d32;
color: var(--white);
}
.alert-enhanced.alert-danger {
background: linear-gradient(135deg, #ffebee, #ffcdd2);
color: #c62828;
}
.alert-enhanced.alert-danger .alert-icon {
background: #c62828;
color: var(--white);
}
/* Page Banner Enhanced */
.page-banner {
background: linear-gradient(135deg, var(--primary-color) 0%, #0d3015 100%);
padding: 60px 0;
position: relative;
overflow: hidden;
}
.page-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
.page-banner h1 {
color: var(--white);
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 15px;
position: relative;
}
.page-banner .breadcrumb {
background: transparent;
padding: 0;
margin: 0;
position: relative;
}
.page-banner .breadcrumb-item {
color: rgba(255,255,255,0.7);
}
.page-banner .breadcrumb-item a {
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: color 0.3s ease;
}
.page-banner .breadcrumb-item a:hover {
color: var(--white);
}
.page-banner .breadcrumb-item.active {
color: var(--secondary-color);
}
.page-banner .breadcrumb-item + .breadcrumb-item::before {
color: rgba(255,255,255,0.5);
}
/* Map Wrapper */
.map-wrapper {
border-radius: 0;
overflow: hidden;
box-shadow: 0 -10px 50px rgba(0,0,0,0.1);
}
.map-wrapper iframe {
display: block;
}
/* Quick Service Cards */
.quick-service-card {
background: var(--white);
border-radius: 16px;
padding: 25px;
text-align: center;
box-shadow: 0 5px 25px rgba(0,0,0,0.06);
transition: all 0.4s ease;
border: 2px solid transparent;
height: 100%;
}
.quick-service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 45px rgba(0,0,0,0.12);
border-color: rgba(26, 95, 42, 0.15);
}
.quick-service-card .service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.15));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.4s ease;
}
.quick-service-card .service-icon i {
font-size: 28px;
color: var(--primary-color);
transition: all 0.3s ease;
}
.quick-service-card:hover .service-icon {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
transform: scale(1.1) rotate(5deg);
}
.quick-service-card:hover .service-icon i {
color: var(--white);
}
.quick-service-card h5 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color);
margin-bottom: 10px;
}
.quick-service-card p {
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: 15px;
}
.quick-service-card .btn-link {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.quick-service-card .btn-link:hover {
gap: 12px;
}
/* Enhanced Pagination */
.pagination-enhanced {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 40px;
}
.pagination-enhanced .page-link {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--white);
border: 2px solid #eee;
color: var(--text-color);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.pagination-enhanced .page-link:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.pagination-enhanced .page-link.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
}
/* Tooltip Enhanced */
.tooltip-enhanced {
position: relative;
}
.tooltip-enhanced::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-5px);
background: #333;
color: var(--white);
padding: 8px 14px;
border-radius: 8px;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 100;
}
.tooltip-enhanced:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Floating Action Button */
.fab-button {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 24px;
box-shadow: 0 8px 25px rgba(26, 95, 42, 0.4);
transition: all 0.4s ease;
z-index: 1000;
cursor: pointer;
text-decoration: none;
}
.fab-button:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 12px 35px rgba(26, 95, 42, 0.5);
color: var(--white);
}
/* Animated Underline Links */
.link-animated {
position: relative;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
.link-animated::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.link-animated:hover::after {
width: 100%;
}